@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/data/pagination/bundles/index.umd.js

@@ -0,0 +1,885 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('lodash-es'), require('ngx-bootstrap/pagination'), require('ngx-bootstrap/dropdown')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/forms', '@angular/core', '@wm/core', '@wm/components/base', 'lodash-es', 'ngx-bootstrap/pagination', 'ngx-bootstrap/dropdown'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.pagination = {}), global.ng.common, global.ng.forms, global.ng.core, global.wm.core, global.wm.components.base, global._, global.ngxBootstrap.pagination, global.ngxBootstrap.dropdown));
+})(this, (function (exports, i1, i2, i0, core, base, lodashEs, i3, i4) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+
+    const registerProps = () => {
+        base.register('wm-pagination', new Map([
+            ['boundarylinks', { value: false, ...base.PROP_BOOLEAN }],
+            ['class', base.PROP_STRING],
+            ['dataset', base.PROP_ANY],
+            ['directionlinks', { value: true, ...base.PROP_BOOLEAN }],
+            ['forceellipses', { value: true, ...base.PROP_BOOLEAN }],
+            ['allowpagesizechange', { value: false, ...base.PROP_BOOLEAN }],
+            ['allowpagesizechange', { value: false, ...base.PROP_BOOLEAN }],
+            ['pagesizeoptions', { value: '', ...base.PROP_STRING }],
+            ['maxResults', base.PROP_NUMBER],
+            ['maxsize', { value: 5, ...base.PROP_NUMBER }],
+            ['name', base.PROP_STRING],
+            ['navigation', { value: 'Basic', ...base.PROP_STRING }],
+            ['navigationalign', { value: 'left', ...base.PROP_STRING }],
+            ['navigationsize', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['showrecordcount', base.PROP_BOOLEAN],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'app-datanavigator clearfix';
+    const WIDGET_CONFIG = { widgetType: 'wm-pagination', hostClass: DEFAULT_CLS };
+    const sizeClasses = {
+        'Pager': {
+            'small': 'pager-sm',
+            'large': 'pager-lg'
+        },
+        'Basic': {
+            'small': 'pagination-sm',
+            'large': 'pagination-lg'
+        },
+        'Classic': {
+            'small': 'pagination-sm',
+            'large': 'pagination-lg'
+        }
+    };
+    class PaginationComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        _setAriaForBasicNavigation() {
+            lodashEs.forEach(this.nativeElement.getElementsByTagName('a'), (item) => {
+                item.setAttribute('href', 'javascript:void(0);');
+                const childNode = item.querySelector('span');
+                if (childNode?.dataset.isacitvepage === "true") {
+                    item.setAttribute('aria-current', 'true');
+                }
+                if (childNode?.dataset.isdisabled === "true") {
+                    item.setAttribute('aria-disabled', 'true');
+                }
+                else {
+                    item.removeAttribute('aria-disabled');
+                }
+            });
+        }
+        constructor(inj, parent, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.parent = parent;
+            this.resultEmitter = new i0.EventEmitter();
+            this.maxResultsEmitter = new i0.EventEmitter();
+            this.defaultPageSizeOptions = [];
+            this.focusedIndex = 0;
+            this.dn = {
+                currentPage: 1
+            };
+            this.pageCount = 0;
+            this.isDisableNext = true;
+            this.isDisablePrevious = true;
+            this.isDisableFirst = true;
+            this.isDisableLast = true;
+            this._debouncedApplyDataset = core.debounce(() => this.widget.dataset = this.dataset, base.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
+            this._debouncedPageChanged = core.debounce(event => {
+                const currentPage = event && event.page;
+                const maxResults = event && (event.pagesize || event.itemsPerPage) || this.maxResults;
+                // Do not call goToPage if page has not changed
+                if (currentPage !== this.dn.currentPage || this.maxResults !== maxResults) {
+                    const inst = this.parent || this;
+                    this.dn.currentPage = currentPage;
+                    this.maxResults = maxResults;
+                    this.maxResultsEmitter.emit(this.maxResults);
+                    inst.invokeEventCallback('paginationchange', { $event: undefined, $index: this.dn.currentPage });
+                    this.goToPage();
+                    if (this.navigation === 'Basic') {
+                        this._setAriaForBasicNavigation();
+                    }
+                }
+            }, base.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
+            base.styler(this.nativeElement, this);
+            this._initTimeoutId = setTimeout(() => {
+                // Guard against component destruction or parent being null
+                if (this.isDestroyed || !this.parent) {
+                    return;
+                }
+                this.allowpagesizechange = this.parent.allowpagesizechange;
+                if (this.allowpagesizechange)
+                    this.defaultPageSizeOptions = this.normalizeToNumberArray(this.parent?.pagesizeoptions);
+            }, 0);
+        }
+        normalizeToNumberArray(input) {
+            if (!input)
+                return [];
+            let arr;
+            if (Array.isArray(input)) {
+                arr = input;
+            }
+            else if (typeof input === "string") {
+                const trimmed = input.trim();
+                // handle "[1,2,3]"
+                if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+                    try {
+                        arr = JSON.parse(trimmed);
+                    }
+                    catch {
+                        arr = [];
+                    }
+                }
+                else {
+                    // handle "1,2,3"
+                    arr = trimmed.split(",");
+                }
+            }
+            else {
+                return [];
+            }
+            return arr
+                .map(v => Number(v))
+                .filter(v => !isNaN(v))
+                .sort((a, b) => a - b);
+        }
+        setResult(result) {
+            // TODO: Emit event only if result is changed
+            this.result = result;
+            this.resultEmitter.emit(this.result);
+        }
+        // Update navigationClass based on navigation and navigationSize props
+        updateNavSize() {
+            const sizeCls = sizeClasses[this.navcontrols];
+            if (sizeCls && this.navigationsize) {
+                this.navigationClass = sizeCls[this.navigationsize];
+            }
+            else {
+                this.navigationClass = '';
+            }
+        }
+        // Function to reset the paging values to default.
+        resetPageNavigation() {
+            this.pageCount = 0;
+            this.dn.currentPage = 1;
+            this.dataSize = 0;
+        }
+        /*Function to calculate the paging values.*/
+        calculatePagingValues() {
+            this.pageCount = (this.dataSize > this.maxResults) ? (Math.ceil(this.dataSize / this.maxResults)) : (this.dataSize < 0 ? 0 : 1);
+            this.dn.currentPage = this.dn.currentPage || 1;
+        }
+        /*Function to set default values to the paging parameters*/
+        setDefaultPagingValues(dataSize, maxResults, currentPage) {
+            /*If neither 'dataSize' nor 'maxResults' is set, then set default values to the paging parameters.*/
+            if (!dataSize && !maxResults) {
+                this.pageCount = 1;
+                this.dn.currentPage = 1;
+                this.maxResults = dataSize;
+                this.dataSize = dataSize;
+            }
+            else { /*Else, set the specified values and recalculate paging parameters.*/
+                this.maxResults = maxResults || this.maxResults;
+                this.dataSize = core.isDefined(dataSize) ? dataSize : this.dataSize;
+                this.dn.currentPage = currentPage || this.dn.currentPage;
+                this.calculatePagingValues();
+            }
+            this.maxResultsEmitter.emit(this.maxResults);
+        }
+        /*Function to check the dataSize and manipulate the navigator accordingly.*/
+        checkDataSize(dataSize, numberOfElements, size) {
+            /*If the dataSize is -1 or Integer.MAX_VALUE( which is 2147483647), then the total number of records is not known.
+             * Hence,
+             * 1. Hide the 'Total Record Count'.
+             * 2. Disable the 'GoToLastPage' link as the page number of the last page is not known.*/
+            if (dataSize === -1 || dataSize === core.AppConstants.INT_MAX_VALUE) {
+                this.prevshowrecordcount = this.showrecordcount;
+                this.isDisableLast = true;
+                this.isDisableCount = true;
+                this.showrecordcount = false;
+                // If number of records in current page is less than the max records size, this is the last page. So disable next button.
+                if (numberOfElements < size) {
+                    this.isDisableNext = true;
+                }
+            }
+            else {
+                this.isDisableCount = false;
+                this.showrecordcount = this.prevshowrecordcount || this.showrecordcount;
+            }
+        }
+        /*Function to disable navigation based on the current and total pages.*/
+        disableNavigation() {
+            const isCurrentPageFirst = (this.dn.currentPage === 1), isCurrentPageLast = (this.dn.currentPage === this.pageCount);
+            if (!this.pagination?.next) {
+                this.isDisableFirst = this.isDisablePrevious = isCurrentPageFirst;
+                this.isDisableNext = this.isDisableLast = isCurrentPageLast;
+            }
+            else {
+                // WMS-18867: In case of server side pagination, for pager type pagination depend on prev and next flags which are set by developer
+                this.isDisableFirst = this.isDisablePrevious = !this.pagination.prev;
+                this.isDisableNext = this.isDisableLast = !this.pagination.next;
+            }
+            this.isDisableCurrent = isCurrentPageFirst && isCurrentPageLast;
+            // In case of client side pagination, when load more reaches last page hide the on-demand grid ele
+            if (this.dataset && this.dataset.length && this.isDisableNext && this.parent.onDemandLoad && this.parent.widgetType === 'wm-table') {
+                this.parent.callDataGridMethod('hideLoadingIndicator', this.isDisableNext, this.parent.infScroll);
+            }
+        }
+        /*Function to check if the variable bound to the data-navigator has paging.*/
+        isDataSourceHasPaging() {
+            return this.datasource && this.datasource.execute(core.DataSource.Operation.IS_PAGEABLE);
+        }
+        getPaginationStartIndex() {
+            const startIndex = this.datasource?._paginationConfig?.paginationStartIndex;
+            return core.isDefined(startIndex) && this.datasource?._paginationConfig?.type === 'page' ? Number(startIndex) : 1;
+        }
+        // this function returns an object which gives summary of the current page data (ex: In UI it is shown as  1 to 10 out of 50 records)
+        getPageDetails(startIndex, endIndex, totalRecords) {
+            this.rowSummary = (core.isDefined(startIndex) && core.isDefined(endIndex) && core.isDefined(totalRecords)) ? {
+                startIndex: startIndex,
+                endIndex: endIndex,
+                totalRecords: totalRecords
+            } : {};
+        }
+        // Set the result for client side pagination
+        setNonPageableData(newVal) {
+            let dataSize, maxResults, currentPage, startIndex;
+            dataSize = lodashEs.isArray(newVal) ? newVal.length : (lodashEs.isEmpty(newVal) ? 0 : 1);
+            maxResults = (this.options && this.options.maxResults) || dataSize;
+            if (this.allowpagesizechange) { // when default page size is not given then use maxResults instead of options.maxResults
+                maxResults = this.maxResults;
+            }
+            // For static variable, keep the current page. For other variables without pagination reset the page to 1
+            // Fix for [WMS-23263]: gridOptions.isNextPageData flag is false when dataset is changed from script, so setting current page to 1
+            if (this.datasource && (this.datasource.execute(core.DataSource.Operation.IS_API_AWARE) || (this.parent.widgetType === 'wm-table' && (this.parent.gridOptions.isNavTypeScrollOrOndemand() && (lodashEs.get(this.parent, 'gridOptions.lastActionPerformed') === this.parent.gridOptions.ACTIONS.DATASET_UPDATE || !lodashEs.get(this.parent, 'gridOptions.isNextPageData')))))) {
+                currentPage = 1;
+            }
+            else {
+                currentPage = this.dn.currentPage || 1;
+            }
+            this.setDefaultPagingValues(dataSize, maxResults, currentPage);
+            this.disableNavigation();
+            startIndex = (this.dn.currentPage - 1) * this.maxResults;
+            this.getPageDetails(startIndex + 1, Math.min(startIndex + this.maxResults, newVal?.length), newVal?.length);
+            this.setResult(lodashEs.isArray(newVal) ? newVal.slice(startIndex, startIndex + this.maxResults) : newVal);
+        }
+        /*Function to set the values needed for pagination*/
+        setPagingValues(newVal) {
+            let dataSize, maxResults, currentPage, startIndex, dataSource;
+            let variableOptions = {};
+            // Store the data in __fullData. This is used for client side searching witvah out modifying the actual dataset.
+            this.__fullData = newVal;
+            /*Check for sanity*/
+            if (this.binddataset) {
+                dataSource = this.datasource || {};
+                variableOptions = dataSource._options || {};
+                /*Check for number of elements in the data set*/
+                if (newVal) {
+                    if (this.isDataSourceHasPaging()) {
+                        this.pagination = this.datasource.execute(core.DataSource.Operation.GET_PAGING_OPTIONS) || {};
+                        // If "filterFields" and "sortOptions" have been set, then set them so that the filters can be retained while fetching data upon page navigation.
+                        this.filterFields = variableOptions.filterFields || {};
+                        this.logicalOp = variableOptions.logicalOp || '';
+                        this.sortOptions = variableOptions.orderBy ||
+                            (lodashEs.isArray(this.pagination.sort) ? base.getOrderByExpr(this.pagination.sort) : '');
+                        dataSize = this.pagination.totalElements;
+                        maxResults = this.pagination.size = Number(this.pagination.size) ? this.pagination.size : lodashEs.get(this.datasource.dataSet, this.pagination.size);
+                        this.pagination.numberOfElements = Number(this.pagination.numberOfElements) ? this.pagination.numberOfElements : lodashEs.get(this.datasource.dataSet, this.pagination.numberOfElements);
+                        if (this.pagination.numberOfElements > 0) {
+                            if (core.isDefined(this.pagination.number) && this.getPaginationStartIndex() === 1) { // number is page number received from backend
+                                this.dn.currentPage = this.pagination.number + 1;
+                            }
+                            currentPage = this.dn.currentPage || 1;
+                        }
+                        else {
+                            currentPage = 1;
+                        }
+                        /* Sending pageCount undefined to calculate it again for query.*/
+                        this.setDefaultPagingValues(dataSize, maxResults, currentPage);
+                        this.disableNavigation();
+                        this.checkDataSize(dataSize, this.pagination.numberOfElements, this.pagination.size);
+                        startIndex = (currentPage - 1) * this.maxResults;
+                        this.getPageDetails(startIndex + 1, startIndex + Number(this.pagination.numberOfElements), dataSize);
+                        this.setResult(newVal);
+                    }
+                    else if (!lodashEs.isString(newVal)) {
+                        this.setNonPageableData(newVal);
+                    }
+                }
+                else {
+                    this.setResult(newVal);
+                    this.resetPageNavigation();
+                }
+                if (this.navigation === 'Basic') {
+                    this._setAriaForBasicNavigation();
+                }
+            }
+            else {
+                if (newVal && !lodashEs.isString(newVal)) {
+                    this.setNonPageableData(newVal);
+                }
+            }
+        }
+        /*Function to check if the current page is the first page*/
+        isFirstPage() {
+            return (this.dn.currentPage === 1 || !this.dn.currentPage);
+        }
+        /*Function to check if the current page is the last page*/
+        isLastPage() {
+            return (this.dn.currentPage === this.pageCount);
+        }
+        /*Function to navigate to the last page*/
+        goToLastPage(isRefresh, event, callback) {
+            if (!this.isLastPage()) {
+                this.dn.currentPage = this.pageCount;
+                this.goToPage(event, callback);
+            }
+            else if (isRefresh) {
+                this.goToPage(event, callback);
+            }
+        }
+        /*Function to navigate to the first page*/
+        goToFirstPage(isRefresh, event, callback) {
+            if (!this.isFirstPage()) {
+                this.dn.currentPage = 1;
+                this.goToPage(event, callback);
+            }
+            else if (isRefresh) {
+                this.goToPage(event, callback);
+            }
+        }
+        /*Function to navigate to the current page*/
+        goToPage(event, callback) {
+            this.firstRow = (this.dn.currentPage - 1) * this.maxResults;
+            const mode = this.parent.statePersistence.computeMode(this.statehandler), allowpagesizechange = this.parent.allowpagesizechange;
+            if (mode && mode.toLowerCase() !== 'none' && (this.parent.widgetType === 'wm-table' || this.parent.widgetType === 'wm-list')) {
+                this.parent._selectedItemsExist = true;
+                if (this.isFirstPage() && !allowpagesizechange) {
+                    this.parent.statePersistence.removeWidgetState(this.parent, 'pagination');
+                }
+                else {
+                    if (base.unsupportedStatePersistenceTypes.indexOf(this.parent.navigation) < 0) {
+                        const state = { pagination: this.dn.currentPage };
+                        if (allowpagesizechange) {
+                            state.pagesize = this.maxResults;
+                        }
+                        this.parent.statePersistence.setWidgetState(this.parent, state);
+                    }
+                    else if (this.parent.widgetType === 'wm-list' || this.parent.widgetType === 'wm-table') {
+                        console.warn('Retain State handling on Widget ' + this.parent.name + ' is not supported for current pagination type.');
+                    }
+                }
+                this.parent.currentpage = this.dn.currentPage;
+                this.parent.nativeElement?.setAttribute('currentpage', this.dn.currentPage);
+            }
+            // call getPageData after checking state config so that Static Variables can use it
+            this.getPageData(event, callback);
+        }
+        /*Function to be invoked after the data of the page has been fetched.*/
+        onPageDataReady(event, data, callback) {
+            this.disableNavigation();
+            this.invokeSetRecord(event, data);
+            core.triggerFn(callback);
+        }
+        /*Function to get data for the current page*/
+        getPageData(event, callback) {
+            let data, startIndex;
+            if (this.isDataSourceHasPaging()) {
+                /**
+                 * In table component, in case of on demand and scroll pagination
+                 * When there is a change in data item which is not in current page
+                 * Fetch the items of the page where the change is made
+                 * */
+                let pageIndex = this.dn.currentPage;
+                if (this.isEditNotInCurrentPage() && this.parent.gridOptions.lastActionPerformed !== 'delete') {
+                    pageIndex = this.parent.actionRowPage;
+                }
+                this.datasource.execute(core.DataSource.Operation.LIST_RECORDS, {
+                    'page': (pageIndex - 1) + this.getPaginationStartIndex(),
+                    'size': this.maxResults,
+                    'filterFields': this.filterFields,
+                    'orderBy': this.sortOptions,
+                    'logicalOp': this.logicalOp,
+                    'matchMode': 'anywhereignorecase'
+                }).then(response => {
+                    this.onPageDataReady(event, response && response.data, callback);
+                    startIndex = (this.dn.currentPage - 1) * this.maxResults;
+                    this.getPageDetails(startIndex + 1, startIndex + Number(this.pagination?.numberOfElements), this.pagination?.totalElements);
+                    core.$appDigest();
+                }, error => {
+                });
+            }
+            else {
+                if (this.isEditNotInCurrentPage()) {
+                    startIndex = (this.parent.actionRowPage - 1) * this.maxResults;
+                }
+                else {
+                    startIndex = (this.dn.currentPage - 1) * this.maxResults;
+                }
+                data = lodashEs.isArray(this.__fullData) ? this.__fullData.slice(startIndex, startIndex + this.maxResults) : this.__fullData;
+                this.getPageDetails(startIndex + 1, Math.min(startIndex + this.maxResults, this.__fullData?.length), this.__fullData?.length);
+                this.setResult(data);
+                this.onPageDataReady(event, data, callback);
+            }
+        }
+        /*
+        Function to check if the edit action is performed on the previous page data of the table
+        */
+        isEditNotInCurrentPage() {
+            const pageIndex = this.dn.currentPage;
+            return this.parent.widgetType === 'wm-table' && pageIndex === this.parent.currentPage &&
+                this.parent.actionRowPage && this.parent.actionRowPage < pageIndex;
+        }
+        invokeSetRecord(event, data) {
+            // Trigger the event handler if exists.
+            const pageInfo = {
+                currentPage: this.dn.currentPage,
+                size: this.maxResults,
+                totalElements: this.dataSize,
+                totalPages: this.pageCount
+            };
+            if (this.parent) {
+                this.parent.invokeEventCallback('setrecord', { $event: event, $data: data, $index: this.dn.currentPage, pageInfo, data });
+            }
+            else {
+                this.invokeEventCallback('setrecord', { $event: event, $data: data, $index: this.dn.currentPage, pageInfo, data });
+            }
+        }
+        /*Function to validate the page input.
+         In case of invalid input, navigate to the appropriate page; also return false.
+         In case of valid input, return true.*/
+        validateCurrentPage(event, callback) {
+            /*If the value entered is greater than the last page number or invalid value, then highlighting the field showing error.*/
+            if (event && (isNaN(this.dn.currentPage) || this.dn.currentPage <= 0 || (this.pageCount && (this.dn.currentPage > this.pageCount || lodashEs.isNull(this.dn.currentPage))))) {
+                if (this.dn.currentPage <= 0) {
+                    this.dn.currentPage = 1;
+                    this.goToPage(event);
+                }
+                else if (this.dn.currentPage > this.pageCount) {
+                    this.dn.currentPage = this.pageCount;
+                    this.goToPage(event);
+                }
+                return false;
+            }
+            return true;
+        }
+        onModelChange(event) {
+            if (!this.validateCurrentPage(event)) {
+                return;
+            }
+            this.goToPage(event);
+        }
+        onKeyDown(event) {
+            const targetEle = $(event.target).closest('a');
+            if (event.code === 'KeyE') {
+                targetEle.addClass('ng-invalid');
+                return false;
+            }
+            targetEle.removeClass('ng-invalid');
+            return true;
+        }
+        pageChanged(event) {
+            this._debouncedPageChanged(event);
+        }
+        /*Function to navigate to the respective pages.*/
+        navigatePage(index, event, isRefresh, callback) {
+            // when navigated to next page turn on the isDataLoading flag to show the loading indicator
+            if (core.isDefined(this.parent.isDataLoading) && !this.isDisableNext) {
+                this.parent.isDataLoading = true;
+                // In case of infinite scroll calling the showLoadingIndicator method to update the loading message immediately when navigated to next page
+                if (this.parent.infScroll) {
+                    this.parent.variableInflight = true;
+                    this.parent.callDataGridMethod('showLoadingIndicator', this.parent.loadingdatamsg, true);
+                }
+            }
+            // reset the last action performed to "scroll" and isDatasetUpdated to false
+            if (this.parent.widgetType === 'wm-table' && this.parent.gridOptions.isNavTypeScrollOrOndemand()) {
+                this.parent.gridOptions.setLastActionPerformed(this.parent.gridOptions.ACTIONS.DEFAULT);
+                this.parent.gridOptions.setIsDatasetUpdated(false);
+            }
+            this.invokeEventCallback('paginationchange', { $event: undefined, $index: this.dn.currentPage });
+            // Convert the current page to a valid page number.
+            this.dn.currentPage = +this.dn.currentPage;
+            switch (index) {
+                case 'first':
+                    if (this.pagination?.next && this.datasource?.pagination) {
+                        this.datasource.pagination.isNext = false;
+                        this.datasource.pagination.isPrev = false;
+                    }
+                    this.goToFirstPage(isRefresh, event, callback);
+                    return;
+                case 'prev':
+                    /*Return if already on the first page.*/
+                    if (!this.pagination?.next && (this.isFirstPage() || !this.validateCurrentPage(event, callback))) {
+                        return;
+                    }
+                    else if (this.pagination?.next) { // WMS-18867: For server side pagination, skipping the regular flow and enabling isNext flag in pagination metadata
+                        this.datasource.pagination.isNext = false;
+                        this.datasource.pagination.isPrev = true;
+                    }
+                    /*Decrement the current page by 1.*/
+                    this.dn.currentPage -= 1;
+                    break;
+                case 'next':
+                    /*Return if already on the last page.*/
+                    if (!this.pagination?.next && (this.isLastPage() || !this.validateCurrentPage(event, callback))) {
+                        return;
+                    }
+                    else if (this.pagination?.next) { // WMS-18867: For server side pagination, skipping the regular flow and enabling isPrev flag in pagination metadata
+                        this.datasource.pagination.isNext = true;
+                        this.datasource.pagination.isPrev = false;
+                    }
+                    /*Increment the current page by 1.*/
+                    this.dn.currentPage += 1;
+                    break;
+                case 'last':
+                    this.goToLastPage(isRefresh, event, callback);
+                    return;
+            }
+            /*Navigate to the current page.*/
+            this.goToPage(event, callback);
+        }
+        setBindDataSet(binddataset, parent, dataSource, dataset, binddatasource, datasetBoundExpr, statehandler) {
+            const parts = binddataset.split('.');
+            let bindPagingOptions;
+            this.statehandler = statehandler;
+            if (parts[0] === 'Variables' || parts[0] === 'Widgets') {
+                bindPagingOptions = `${parts[0]}.${parts[1]}.pagination`;
+            }
+            if (!binddatasource && dataset && !datasetBoundExpr) {
+                this.dataset = dataset;
+                if (this._debouncedApplyDataset) {
+                    this._debouncedApplyDataset();
+                }
+                return;
+            }
+            this.binddataset = binddataset;
+            setTimeout(() => {
+                // watching for dataset changes even when dataset is bound to "item." (i.e. by checking for datasetBoundExpr)
+                // item context is passed as dataSource here
+                // [Todo-CSP]: check if same expr fn is generated by parent widget (list, table)
+                this.registerDestroyListener(core.$watch(binddataset, parent, datasetBoundExpr ? dataSource : {}, nv => {
+                    if (nv) {
+                        this.dataset = nv;
+                        if (this._debouncedApplyDataset) {
+                            this._debouncedApplyDataset();
+                        }
+                    }
+                    else {
+                        // WMS-19285: Setting dataset on proxy only to handle propertychange handler call for undefined cases
+                        this.widget.dataset = nv;
+                    }
+                }));
+                // Register a watch on paging options. Call dataset property change handler even if paging options changes to reflect pagination state
+                if (!bindPagingOptions) {
+                    return;
+                }
+                //[Todo-CSP]: either generate watch expr fn or register an event from the datasource itself
+                this.registerDestroyListener(core.$watch(bindPagingOptions, parent, {}, () => {
+                    if (this._debouncedApplyDataset) {
+                        this._debouncedApplyDataset();
+                    }
+                }));
+            });
+            // apply datasource only when dataset is not bound to "item.FIELD"
+            if (!datasetBoundExpr) {
+                this.datasource = dataSource;
+            }
+        }
+        // Set the datasource of pagination from the parent widget
+        setDataSource(dataSource) {
+            this.datasource = dataSource;
+        }
+        onPropertyChange(key, nv, ov) {
+            let pageSize;
+            if (key === 'dataset') {
+                let data;
+                if (this.parent && this.parent.onDataNavigatorDataSetChange) {
+                    data = this.parent.onDataNavigatorDataSetChange(nv);
+                }
+                else {
+                    data = nv;
+                }
+                // Set last action performed to "dataset_update" whenever dataset is changed in table component
+                if (this.parent.widgetType === 'wm-table') {
+                    this.parent._triggeredByUser = false;
+                }
+                if (data?.length) { // calculate Pagesize options based on actual page size
+                    if (this.isDataSourceHasPaging()) { // for Live variables
+                        const currentPageSize = lodashEs.get(data, 'pagination.size') || lodashEs.get(this.datasource, 'pagination.size'), totalElements = lodashEs.get(data, 'pagination.totalElements') || lodashEs.get(this.datasource, 'pagination.totalElements'), widgetState = this.parent.statePersistence.getWidgetState(this.parent);
+                        this.actualPageSize = widgetState?.actualpagesize || currentPageSize;
+                        this.actualPageSize = Number(this.actualPageSize) ? this.actualPageSize : lodashEs.get(this.datasource.dataSet, this.actualPageSize);
+                        if (this.defaultPageSizeOptions.length > 0) {
+                            this.pageSizeOptions = [...this.defaultPageSizeOptions];
+                        }
+                        else {
+                            this.pageSizeOptions = lodashEs.range(this.actualPageSize, Math.max(this.actualPageSize + 1, this.actualPageSize + totalElements), this.actualPageSize); // here data has only that page data and pagesize has totalNoof Elements
+                        }
+                        if (widgetState?.selectedItem && widgetState.actualpagesize !== widgetState.pagesize) {
+                            if (!this.prevPageSize) {
+                                this.prevPageSize = this.actualPageSize || data?.length;
+                            }
+                            const updatedItems = this.handleStateParamsforNewPageSize(widgetState.selectedItem, this.prevPageSize, data?.length);
+                            if (updatedItems) {
+                                this.parent.statePersistence.setWidgetState(this.parent, {
+                                    pagination: 1,
+                                    pagesize: this.maxResults,
+                                    actualpagesize: this.actualPageSize || this.maxResults,
+                                    selectedItem: updatedItems
+                                });
+                                this.prevPageSize = undefined;
+                            }
+                        }
+                    }
+                    else {
+                        pageSize = this.parent.getActualPageSize();
+                        if (this.defaultPageSizeOptions.length > 0) {
+                            this.pageSizeOptions = [...this.defaultPageSizeOptions];
+                        }
+                        else {
+                            this.pageSizeOptions = lodashEs.range(pageSize, data.length + pageSize, pageSize);
+                        }
+                    }
+                }
+                // When the dataset is not in current page, but in previous ones directly set the result without setting page values
+                if (this.isEditNotInCurrentPage()) {
+                    this.setResult(data);
+                }
+                else {
+                    this.setPagingValues(data);
+                }
+            }
+            else if (key === 'navigation') {
+                if (nv === 'Advanced') { // Support for older projects where navigation type was advanced instead of clasic
+                    this.navigation = 'Classic';
+                }
+                this.updateNavSize();
+                this.navcontrols = nv;
+            }
+            else if (key === 'navigationsize') {
+                this.updateNavSize();
+            }
+            else if (key === 'navigationalign') {
+                core.switchClass(this.nativeElement, `text-${nv}`, `text-${ov}`);
+            }
+            else if (key === 'maxResults') {
+                this.setPagingValues(this.dataset);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        // change the selectedItems page number and index in the stateparams when pagesize is changed
+        handleStateParamsforNewPageSize(selectedItem, oldPageSize, newPageSize) {
+            return selectedItem.map(({ page, index }) => {
+                const absoluteIndex = (page - 1) * oldPageSize + index;
+                const newPage = Math.floor(absoluteIndex / newPageSize) + 1; // back to 1-based
+                const newIndex = absoluteIndex % newPageSize;
+                return {
+                    page: newPage,
+                    index: newIndex
+                };
+            });
+        }
+        onDropdownKeydown(event, index) {
+            const $items = $('ul#dropdown-basic a.dropdown-item');
+            const maxIndex = this.pageSizeOptions.length - 1;
+            let selectedOption;
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'Tab':
+                    event.preventDefault();
+                    if (event.key === 'Tab' && event.shiftKey) {
+                        // Treat Shift+Tab as ArrowUp
+                        this.focusedIndex = (index - 1) < 0 ? maxIndex : index - 1;
+                    }
+                    else {
+                        // Treat Tab or ArrowDown as ArrowDown
+                        this.focusedIndex = (index + 1) > maxIndex ? 0 : index + 1;
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusedIndex = (index - 1) < 0 ? maxIndex : index - 1;
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    selectedOption = this.pageSizeOptions[this.focusedIndex];
+                    this.onPageSizeChange(event, selectedOption);
+                    this.closeDropdown();
+                    return;
+                case 'Escape':
+                    event.preventDefault();
+                    this.closeDropdown();
+                    return;
+                default:
+                    return;
+            }
+            // Move focus after index is updated
+            setTimeout(() => {
+                $items.eq(this.focusedIndex)?.focus();
+            });
+        }
+        closeDropdown() {
+            // Close dropdown
+            this.bsDropdown.hide();
+            const $toggleButton = $('button[aria-controls="dropdown-basic"]');
+            $toggleButton.focus(); // Return focus to button
+        }
+        // Function gets called on dropdown open & close
+        onOpenChange(isOpen) {
+            if (isOpen) {
+                this.focusedIndex = 0;
+                setTimeout(() => {
+                    // manually focus the dropdown as dropdown has container="body"
+                    const $items = $('ul#dropdown-basic a.dropdown-item');
+                    const $firstItem = $items.eq(this.focusedIndex);
+                    $firstItem?.focus();
+                }, 0);
+            }
+        }
+        onPageSizeChange($event, newPageSize) {
+            const widgetState = this.parent.statePersistence.getWidgetState(this.parent);
+            let updatedItems;
+            if (widgetState?.selectedItem) {
+                updatedItems = this.handleStateParamsforNewPageSize(widgetState.selectedItem, this.maxResults, +newPageSize);
+            }
+            this.actualPageSize = this.actualPageSize || this.maxResults;
+            this.maxResults = +newPageSize;
+            this.maxResultsEmitter.emit(this.maxResults);
+            if (this.isDataSourceHasPaging() && this.datasource) {
+                this.datasource.maxResults = this.maxResults;
+            }
+            if (updatedItems) {
+                this.parent.statePersistence.setWidgetState(this.parent, {
+                    pagination: 1,
+                    pagesize: this.maxResults,
+                    actualpagesize: this.actualPageSize || this.maxResults,
+                    selectedItem: updatedItems
+                });
+            }
+            else {
+                this.parent.statePersistence.setWidgetState(this.parent, {
+                    pagination: 1,
+                    pagesize: this.maxResults,
+                    actualpagesize: this.actualPageSize || this.maxResults
+                });
+            }
+            this.navigatePage('first', $event, true);
+            this.calculatePagingValues();
+            if (this.nativeElement.closest('popover-container, .popover')) {
+                $event.stopPropagation();
+                this.bsDropdown.hide();
+            }
+        }
+        onDropDownShown($event) {
+            const container = $event?._element?.nativeElement;
+            if (!container)
+                return;
+            core.adjustVerticalPosition($(container), this.nativeElement?.querySelector('.items-per-page div'), this.bsDropdown._dropdown, $(container?.querySelector('ul[id="dropdown-basic"]')));
+            this.dropdownScrollHandler = () => {
+                this.onDropdownScroll();
+            };
+            window.addEventListener('scroll', this.dropdownScrollHandler, true);
+        }
+        onDropdownScroll() {
+            // on scroll boostrap is applying 3d translation to prevent from that added this dummy function
+            return;
+        }
+        onDropdownHidden() {
+            if (this.dropdownScrollHandler) {
+                window.removeEventListener('scroll', this.dropdownScrollHandler, true);
+            }
+            this.dropdownScrollHandler = undefined;
+        }
+        ngAfterViewInit() {
+            const paginationElem = this.nativeElement;
+            paginationElem.onclick = (event) => {
+                event.stopPropagation();
+            };
+        }
+        ngOnDestroy() {
+            if (this.dropdownScrollHandler) {
+                window.removeEventListener('scroll', this.dropdownScrollHandler, true);
+            }
+            // MEMORY LEAK FIX: Clear initialization timeout if still pending
+            if (this._initTimeoutId) {
+                clearTimeout(this._initTimeoutId);
+                this._initTimeoutId = null;
+            }
+            // MEMORY LEAK FIX: Complete EventEmitters
+            if (this.resultEmitter) {
+                this.resultEmitter.complete();
+            }
+            if (this.maxResultsEmitter) {
+                this.maxResultsEmitter.complete();
+            }
+            // MEMORY LEAK FIX: Nullify debounced function closures
+            this._debouncedApplyDataset = null;
+            this._debouncedPageChanged = null;
+            // MEMORY LEAK FIX: Clear data arrays and objects
+            this.dataset = null;
+            this.__fullData = null;
+            this.result = null;
+            this.filterFields = null;
+            this.sortOptions = null;
+            this.options = null;
+            // MEMORY LEAK FIX: Clear page size options array
+            if (this.pageSizeOptions) {
+                this.pageSizeOptions = [];
+            }
+            if (this.defaultPageSizeOptions) {
+                this.defaultPageSizeOptions = [];
+            }
+            // MEMORY LEAK FIX: Clear datasource reference
+            this.datasource = null;
+            // MEMORY LEAK FIX: Clear parent reference
+            this.parent = null;
+            // Call parent ngOnDestroy (sets isDestroyed = true)
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PaginationComponent, deps: [{ token: i0__namespace.Injector }, { token: base.WidgetRef, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PaginationComponent, isStandalone: true, selector: "[wmPagination]", outputs: { resultEmitter: "resultEmitter", maxResultsEmitter: "maxResultsEmitter" }, providers: [
+                base.provideAsWidgetRef(PaginationComponent)
+            ], viewQueries: [{ propertyName: "bsDropdown", first: true, predicate: i4.BsDropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n@if (navcontrols === 'Classic') {\n<ul class=\"pagination advanced {{navigationClass}}\">\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown  container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                            <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                                <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                                   [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                            </li>\n                            }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableFirst}\">\n        <a [title]=\"appLocale.LABEL_FIRST\" name=\"first\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableFirst\"\n           (click)=\"navigatePage('first', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-first-page\"></i></span>\n            <span class=\"sr-only\">Go to first page {{ isDisableFirst ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisablePrevious}\">\n        <a [title]=\"appLocale.LABEL_PREVIOUS\" name=\"prev\" href=\"javascript:void(0);\"\n            [attr.aria-disabled]=\"isDisablePrevious\"\n            (click)=\"navigatePage('prev', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n            <span class=\"sr-only\">Go to previous page {{ isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"pagecount disabled\">\n        <a href=\"javascript:void(0);\" aria-label=\"Change Page Number\">\n            <input [(ngModel)]=\"dn.currentPage\" [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount\" [disabled]=\"isDisableCurrent\"\n                   [ngModelOptions]=\"{standalone: true}\"\n                   type=\"number\"\n                  (keydown)=\"onKeyDown($event)\" (change)=\"onModelChange($event)\" class=\"form-control\"/>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"disabled\">\n        <a [hidden]=\"isDisableCount\"> / {{pageCount}}</a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableNext}\">\n        <a [title]=\"appLocale.LABEL_NEXT\" name=\"next\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableNext\"\n           (click)=\"navigatePage('next', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n            <span class=\"sr-only\">Go to next page {{ isDisableNext ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableLast}\">\n      <a [title]=\"appLocale.LABEL_LAST\" name=\"last\" href=\"javascript:void(0);\"\n        [attr.aria-disabled]=\"isDisableLast\"\n        (click)=\"navigatePage('last', $event)\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-last-page\"></i></span>\n        <span class=\"sr-only\">Go to last page {{ isDisableLast ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    }\n    @if (showrecordcount) {\n      <li class=\"totalcount disabled\">\n        <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n      </li>\n    }\n</ul>\n}\n@if (navcontrols === 'Pager') {\n  <ul class=\"pager {{navigationClass}}\">\n        @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                        <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                            <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                        </li>\n                        }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n            <div>\n                <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n                <span>of</span>\n                <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n@if (!(dataSize<=maxResults)) {\n    <li class=\"previous\" [ngClass]=\"{'disabled':isDisablePrevious}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('prev', $event)\"\n        [attr.aria-disabled]=\"isDisablePrevious\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n        {{appLocale.LABEL_PREVIOUS}}\n        <span class=\"sr-only\">{{ isDisablePrevious ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    <li class=\"next\" [ngClass]=\"{'disabled':isDisableNext}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('next', $event)\"\n        [attr.aria-disabled]=\"isDisableNext\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n        {{appLocale.LABEL_NEXT}}\n        <span class=\"sr-only\">{{ isDisableNext ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n  }\n  </ul>\n}\n\n@if (navcontrols === 'Basic') {\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n      <div class=\"items-per-page\">\n        <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE }} :</label>\n\n        <div class=\"btn-group\" dropdown container=\"body\"  (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n            <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                    aria-controls=\"dropdown-basic\">\n                {{maxResults}} <span class=\"caret\"></span>\n            </button>\n            <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                role=\"menu\" aria-labelledby=\"button-basic\">\n                @for (option of pageSizeOptions; track option; let i = $index) {\n                    <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                        <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                    </li>\n                    }\n            </ul>\n        </div>\n      </div>\n        @if (rowSummary?.totalRecords) {\n        <div class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n        </div>\n        </div>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n      <pagination class=\"pagination basic\" [ngClass]=\"navigationClass\" role=\"navigation\"\n        [itemsPerPage]=\"maxResults\" [totalItems]=\"dataSize\"\n        (pageChanged)=\"pageChanged($event)\" [ngModelOptions]=\"{standalone:true}\" [ngModel]=\"dn.currentPage\"\n        [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount + ' pages'\"\n        [boundaryLinks]=\"boundarylinks\" [maxSize]=\"maxsize\"\n        [directionLinks]=\"directionlinks\"\n        firstText=\"Firtst\" lastText=\"Last\"\n        [customPreviousTemplate]=\"prevTemplate\"\n        [customNextTemplate]=\"nextTemplate\"\n        [customPageTemplate]=\"pageTemplate\"></pagination>\n    }\n}\n\n@if (navcontrols === 'Basic' && showrecordcount) {\n  <ul class=\"pagination\">\n    <li class=\"totalcount disabled basiccount\">\n      <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n  </ul>\n}\n\n<ng-template #pageTemplate let-page>\n  <span class=\"sr-only\" [attr.data-isacitvepage]=\"page.active\">{{'Page '}}</span>\n  {{page.number}}\n  @if (page.active) {\n    <span class=\"sr-only\"> {{', Showing page ' + page.number + ' of ' + pageCount}}</span>\n  }\n</ng-template>\n<ng-template #prevTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Previous page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n<ng-template #nextTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Next page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i3.PaginationModule }, { kind: "component", type: i3__namespace.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "ngmodule", type: i4.BsDropdownModule }, { kind: "directive", type: i4__namespace.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4__namespace.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PaginationComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule, i3.PaginationModule, i4.BsDropdownModule], selector: '[wmPagination]', providers: [
+                            base.provideAsWidgetRef(PaginationComponent)
+                        ], template: "\n@if (navcontrols === 'Classic') {\n<ul class=\"pagination advanced {{navigationClass}}\">\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown  container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                            <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                                <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                                   [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                            </li>\n                            }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableFirst}\">\n        <a [title]=\"appLocale.LABEL_FIRST\" name=\"first\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableFirst\"\n           (click)=\"navigatePage('first', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-first-page\"></i></span>\n            <span class=\"sr-only\">Go to first page {{ isDisableFirst ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisablePrevious}\">\n        <a [title]=\"appLocale.LABEL_PREVIOUS\" name=\"prev\" href=\"javascript:void(0);\"\n            [attr.aria-disabled]=\"isDisablePrevious\"\n            (click)=\"navigatePage('prev', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n            <span class=\"sr-only\">Go to previous page {{ isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"pagecount disabled\">\n        <a href=\"javascript:void(0);\" aria-label=\"Change Page Number\">\n            <input [(ngModel)]=\"dn.currentPage\" [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount\" [disabled]=\"isDisableCurrent\"\n                   [ngModelOptions]=\"{standalone: true}\"\n                   type=\"number\"\n                  (keydown)=\"onKeyDown($event)\" (change)=\"onModelChange($event)\" class=\"form-control\"/>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"disabled\">\n        <a [hidden]=\"isDisableCount\"> / {{pageCount}}</a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableNext}\">\n        <a [title]=\"appLocale.LABEL_NEXT\" name=\"next\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableNext\"\n           (click)=\"navigatePage('next', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n            <span class=\"sr-only\">Go to next page {{ isDisableNext ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableLast}\">\n      <a [title]=\"appLocale.LABEL_LAST\" name=\"last\" href=\"javascript:void(0);\"\n        [attr.aria-disabled]=\"isDisableLast\"\n        (click)=\"navigatePage('last', $event)\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-last-page\"></i></span>\n        <span class=\"sr-only\">Go to last page {{ isDisableLast ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    }\n    @if (showrecordcount) {\n      <li class=\"totalcount disabled\">\n        <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n      </li>\n    }\n</ul>\n}\n@if (navcontrols === 'Pager') {\n  <ul class=\"pager {{navigationClass}}\">\n        @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                        <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                            <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                        </li>\n                        }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n            <div>\n                <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n                <span>of</span>\n                <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n@if (!(dataSize<=maxResults)) {\n    <li class=\"previous\" [ngClass]=\"{'disabled':isDisablePrevious}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('prev', $event)\"\n        [attr.aria-disabled]=\"isDisablePrevious\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n        {{appLocale.LABEL_PREVIOUS}}\n        <span class=\"sr-only\">{{ isDisablePrevious ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    <li class=\"next\" [ngClass]=\"{'disabled':isDisableNext}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('next', $event)\"\n        [attr.aria-disabled]=\"isDisableNext\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n        {{appLocale.LABEL_NEXT}}\n        <span class=\"sr-only\">{{ isDisableNext ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n  }\n  </ul>\n}\n\n@if (navcontrols === 'Basic') {\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n      <div class=\"items-per-page\">\n        <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE }} :</label>\n\n        <div class=\"btn-group\" dropdown container=\"body\"  (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n            <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                    aria-controls=\"dropdown-basic\">\n                {{maxResults}} <span class=\"caret\"></span>\n            </button>\n            <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                role=\"menu\" aria-labelledby=\"button-basic\">\n                @for (option of pageSizeOptions; track option; let i = $index) {\n                    <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                        <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                    </li>\n                    }\n            </ul>\n        </div>\n      </div>\n        @if (rowSummary?.totalRecords) {\n        <div class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n        </div>\n        </div>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n      <pagination class=\"pagination basic\" [ngClass]=\"navigationClass\" role=\"navigation\"\n        [itemsPerPage]=\"maxResults\" [totalItems]=\"dataSize\"\n        (pageChanged)=\"pageChanged($event)\" [ngModelOptions]=\"{standalone:true}\" [ngModel]=\"dn.currentPage\"\n        [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount + ' pages'\"\n        [boundaryLinks]=\"boundarylinks\" [maxSize]=\"maxsize\"\n        [directionLinks]=\"directionlinks\"\n        firstText=\"Firtst\" lastText=\"Last\"\n        [customPreviousTemplate]=\"prevTemplate\"\n        [customNextTemplate]=\"nextTemplate\"\n        [customPageTemplate]=\"pageTemplate\"></pagination>\n    }\n}\n\n@if (navcontrols === 'Basic' && showrecordcount) {\n  <ul class=\"pagination\">\n    <li class=\"totalcount disabled basiccount\">\n      <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n  </ul>\n}\n\n<ng-template #pageTemplate let-page>\n  <span class=\"sr-only\" [attr.data-isacitvepage]=\"page.active\">{{'Page '}}</span>\n  {{page.number}}\n  @if (page.active) {\n    <span class=\"sr-only\"> {{', Showing page ' + page.number + ' of ' + pageCount}}</span>\n  }\n</ng-template>\n<ng-template #prevTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Previous page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n<ng-template #nextTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Next page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.SkipSelf
+                    }, {
+                        type: i0.Inject,
+                        args: [base.WidgetRef]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { resultEmitter: [{
+                    type: i0.Output
+                }], maxResultsEmitter: [{
+                    type: i0.Output
+                }], bsDropdown: [{
+                    type: i0.ViewChild,
+                    args: [i4.BsDropdownDirective]
+                }] } });
+
+    exports.PaginationComponent = PaginationComponent;
+
+}));