@bnsights/bbsf-controls 1.0.167 → 1.0.168

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -31,7 +31,7 @@ import { CommonModule, DatePipe } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpEventType, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Output, Input, Component, Directive, Pipe, Optional, Injectable, ViewChild, ViewEncapsulation, ViewContainerRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Output, Input, Component, Directive, Pipe, Optional, Injectable, ViewChild, ViewEncapsulation, HostListener, ViewContainerRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormGroupDirective } from '@angular/forms';
 import * as i6$2 from '@angular/material/slide-toggle';
@@ -5944,14 +5944,16 @@ var FilterType;
     FilterType[FilterType["Other"] = 7] = "Other";
 })(FilterType || (FilterType = {}));
 
-// tslint:disable-next-line: no-conflicting-lifecycle
 class PagingComponent {
-    constructor(utilityService, http, router, onChangeService, requestHandlerService) {
+    constructor(utilityService, http, router, route, location, onChangeService, requestHandlerService, cdr) {
         this.utilityService = utilityService;
         this.http = http;
         this.router = router;
+        this.route = route;
+        this.location = location;
         this.onChangeService = onChangeService;
         this.requestHandlerService = requestHandlerService;
+        this.cdr = cdr;
         this.items = [];
         this.result = [];
         this.pagerConfig = null;
@@ -5970,9 +5972,17 @@ class PagingComponent {
         this.isFirstCall = true;
         this.previousFilters = {};
         this.Items = new EventEmitter();
+        this.pageStateRestored = new EventEmitter();
         this.subscriptions = new Subscription();
+        // Browser navigation support
+        this.isNavigatingBack = false;
+        this.isRestoringFilters = false;
+        this.pageHistory = [];
+        this.currentHistoryIndex = -1;
         this.reinitializePaging = () => {
             this.isFirstCall = true;
+            this.currentPage = 1;
+            this.clearHistoryState();
             this.getItemList(1, true);
         };
         this.updatePaging = () => {
@@ -5984,6 +5994,10 @@ class PagingComponent {
         this.subscriptions.unsubscribe();
     }
     ngOnInit() {
+        // Initialize browser navigation support if enabled
+        if (this.options.enableBrowserNavigation) {
+            this.initializeBrowserNavigation();
+        }
         if (this.options.isLoadMoreControl)
             this.sum = this.options.pageSize;
         if (this.options.dropdownFiltersControlNames != null && this.options.dropdownFiltersControlNames.length > 0) {
@@ -5993,6 +6007,7 @@ class PagingComponent {
                 if (result.length > 0) {
                     this.isFirstCall = true;
                     this.currentPage = 1;
+                    this.updateHistoryState();
                     this.getItemList(this.currentPage, true);
                 }
             }));
@@ -6004,6 +6019,7 @@ class PagingComponent {
                 if (result.length > 0) {
                     this.isFirstCall = true;
                     this.currentPage = 1;
+                    this.updateHistoryState();
                     this.getItemList(this.currentPage, true);
                 }
             }));
@@ -6011,6 +6027,181 @@ class PagingComponent {
         this.isFirstCall = true;
         this.getItemList(this.currentPage, true);
     }
+    /**
+     * Initialize browser navigation support
+     */
+    initializeBrowserNavigation() {
+        // Try to restore state from browser history on initial load
+        this.restoreStateFromBrowserHistory();
+    }
+    /**
+     * Restore state from browser history on initial load
+     */
+    restoreStateFromBrowserHistory() {
+        try {
+            // Get the current history state
+            const currentState = history.state;
+            if (currentState && currentState.pagingState) {
+                const savedState = currentState.pagingState;
+                // Check if the saved state has valid data
+                if (savedState.page && savedState.pageSize && savedState.filters) {
+                    // Restore filter values to form controls
+                    this.restoreFilterValues(savedState.filters);
+                    // Get current filters after restoration
+                    const currentFilters = this.getFiltersValue();
+                    // Only restore if filters match (same search context)
+                    if (JSON.stringify(savedState.filters) === JSON.stringify(currentFilters)) {
+                        let pageChanged = false;
+                        let pageSizeChanged = false;
+                        if (savedState.page !== this.currentPage) {
+                            this.currentPage = savedState.page;
+                            pageChanged = true;
+                        }
+                        if (savedState.pageSize !== this.options.pageSize) {
+                            this.options.pageSize = savedState.pageSize;
+                            pageSizeChanged = true;
+                        }
+                        // If page or page size changed, reload data
+                        if (pageChanged || pageSizeChanged) {
+                            this.getItemList(this.currentPage, pageSizeChanged);
+                        }
+                        // Add the restored state to our local history
+                        this.pageHistory.push(savedState);
+                        this.currentHistoryIndex = this.pageHistory.length - 1;
+                        // Emit event to notify that page state was restored
+                        this.pageStateRestored.emit({
+                            page: this.currentPage,
+                            pageSize: this.options.pageSize
+                        });
+                        // Force change detection to update the UI
+                        this.cdr.detectChanges();
+                        console.log(`Initial page state restored: Page ${this.currentPage}, PageSize ${this.options.pageSize}, Filters restored`);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to restore browser history state:', error);
+        }
+    }
+    /**
+     * Listen to browser back/forward navigation
+     */
+    onPopState(event) {
+        if (!this.options.enableBrowserNavigation) {
+            return;
+        }
+        console.log('Browser back/forward navigation detected');
+        this.isNavigatingBack = true;
+        this.restorePageStateFromHistory();
+        this.isNavigatingBack = false;
+    }
+    /**
+     * Restore page state from browser history
+     */
+    restorePageStateFromHistory() {
+        try {
+            // Get the current history state from browser
+            const currentState = history.state;
+            if (currentState && currentState.pagingState) {
+                const savedState = currentState.pagingState;
+                // Check if the saved state has valid data
+                if (savedState.page && savedState.pageSize && savedState.filters) {
+                    // Restore filter values to form controls
+                    this.restoreFilterValues(savedState.filters);
+                    // Get current filters after restoration
+                    const currentFilters = this.getFiltersValue();
+                    // Only restore if filters match (same search context)
+                    if (JSON.stringify(savedState.filters) === JSON.stringify(currentFilters)) {
+                        let pageChanged = false;
+                        let pageSizeChanged = false;
+                        if (savedState.page !== this.currentPage) {
+                            this.currentPage = savedState.page;
+                            pageChanged = true;
+                        }
+                        if (savedState.pageSize !== this.options.pageSize) {
+                            this.options.pageSize = savedState.pageSize;
+                            pageSizeChanged = true;
+                        }
+                        // If page or page size changed, reload data
+                        if (pageChanged || pageSizeChanged) {
+                            this.getItemList(this.currentPage, pageSizeChanged);
+                        }
+                        // Update our local history index to match the browser state
+                        this.updateLocalHistoryIndex(savedState);
+                        // Emit event to notify that page state was restored
+                        this.pageStateRestored.emit({
+                            page: this.currentPage,
+                            pageSize: this.options.pageSize
+                        });
+                        // Force change detection to update the UI
+                        this.cdr.detectChanges();
+                        console.log(`Page state restored from browser navigation: Page ${this.currentPage}, PageSize ${this.options.pageSize}, Filters restored`);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to restore page state from history:', error);
+        }
+    }
+    /**
+     * Update local history index to match browser state
+     */
+    updateLocalHistoryIndex(savedState) {
+        // Find the matching state in our local history
+        const index = this.pageHistory.findIndex(state => state.page === savedState.page &&
+            state.pageSize === savedState.pageSize &&
+            JSON.stringify(state.filters) === JSON.stringify(savedState.filters));
+        if (index !== -1) {
+            this.currentHistoryIndex = index;
+        }
+        else {
+            // If not found, add it to our history
+            this.pageHistory.push(savedState);
+            this.currentHistoryIndex = this.pageHistory.length - 1;
+        }
+    }
+    /**
+     * Update browser history state with current page and page size
+     */
+    updateHistoryState() {
+        if (!this.options.enableBrowserNavigation) {
+            return;
+        }
+        const currentFilters = this.getFiltersValue();
+        const currentState = {
+            page: this.currentPage,
+            pageSize: this.options.pageSize,
+            filters: currentFilters
+        };
+        // Only update history if we're not already navigating back
+        if (!this.isNavigatingBack) {
+            // Add current state to local history
+            this.pageHistory.push(currentState);
+            this.currentHistoryIndex = this.pageHistory.length - 1;
+            // Limit history size to prevent memory issues
+            if (this.pageHistory.length > 50) {
+                this.pageHistory.shift();
+                this.currentHistoryIndex--;
+            }
+            // Update browser history state
+            const historyState = {
+                pagingState: currentState,
+                timestamp: Date.now()
+            };
+            try {
+                // Use history.pushState to add a new history entry
+                // This allows proper back/forward navigation
+                history.pushState(historyState, '', this.location.path());
+            }
+            catch (error) {
+                console.warn('Failed to update browser history state:', error);
+                // Fallback to replaceState if pushState fails
+                this.location.replaceState(this.location.path(), '', JSON.stringify(historyState));
+            }
+        }
+    }
     ngAfterViewInit() {
         if (this.options.onClickFiltersControlNames != null && this.options.onClickFiltersControlNames.length > 0) {
             const OnClickFiltersControlNames = this.options.onClickFiltersControlNames;
@@ -6019,6 +6210,7 @@ class PagingComponent {
                 document.getElementById(OnClickFiltersControlName).addEventListener("click", () => {
                     this.currentPage = 1;
                     this.isFirstCall = true;
+                    this.updateHistoryState();
                     this.getItemList(this.currentPage, true);
                 }, false);
             }
@@ -6032,6 +6224,7 @@ class PagingComponent {
                     if (e.key == "Enter") {
                         this.currentPage = 1;
                         this.isFirstCall = true;
+                        this.updateHistoryState();
                         this.getItemList(this.currentPage, true);
                     }
                 }, false);
@@ -6055,6 +6248,7 @@ class PagingComponent {
                     if (e.key == "Enter") {
                         this.currentPage = 1;
                         this.isFirstCall = true;
+                        this.updateHistoryState();
                         this.getItemList(this.currentPage, true);
                     }
                 }, false);
@@ -6065,6 +6259,7 @@ class PagingComponent {
         if (result) {
             this.currentPage = 1;
             this.isFirstCall = true;
+            this.updateHistoryState();
             this.getItemList(this.currentPage, true);
         }
     }
@@ -6077,6 +6272,7 @@ class PagingComponent {
                 return;
             }
             this.currentPage = Page;
+            this.updateHistoryState();
             this.getItemList(Page);
         }
     }
@@ -6084,6 +6280,7 @@ class PagingComponent {
         this.options.pageSize = e.target.value;
         this.currentPage = 1;
         this.isFirstCall = true;
+        this.updateHistoryState();
         this.getItemList(this.currentPage, true);
     }
     onScrollDown() {
@@ -6098,7 +6295,8 @@ class PagingComponent {
             this.options.startPagingCallback.call(null);
         let filters = {};
         filters = this.getFiltersValue();
-        if (!IsFilterUpdated && Object.keys(this.previousFilters).length != 0 && JSON.stringify(this.previousFilters) != JSON.stringify(filters)) {
+        // Skip filter change detection if we're restoring filters from browser history
+        if (!this.isRestoringFilters && !IsFilterUpdated && Object.keys(this.previousFilters).length != 0 && JSON.stringify(this.previousFilters) != JSON.stringify(filters)) {
             //Reinitialize if filters changed
             page = 1;
             IsFilterUpdated = true;
@@ -6138,6 +6336,74 @@ class PagingComponent {
                 this.router.navigate(["/Admin/account/login"]);
         });
     }
+    /**
+     * Force update the current page (useful for external components)
+     */
+    setCurrentPage(page) {
+        if (page > 0 && page !== this.currentPage) {
+            this.currentPage = page;
+            this.updateHistoryState();
+            this.getItemList(page);
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Get the current page number
+     */
+    getCurrentPage() {
+        return this.currentPage;
+    }
+    /**
+     * Restore filter values to form controls
+     */
+    restoreFilterValues(savedFilters) {
+        if (!this.options.filters || !this.group) {
+            return;
+        }
+        this.isRestoringFilters = true;
+        try {
+            for (let index = 0; index < this.options.filters.length; index++) {
+                const filter = this.options.filters[index];
+                if (filter.formControlName && filter.formControlName !== "") {
+                    const formControlName = filter.formControlName;
+                    const actionParameterName = filter.actionParameterName;
+                    // Check if we have a saved value for this filter
+                    if (savedFilters.hasOwnProperty(actionParameterName)) {
+                        const savedValue = savedFilters[actionParameterName];
+                        // Only restore if the value is not null/undefined/empty
+                        if (savedValue !== null && savedValue !== undefined && savedValue !== "") {
+                            // Set the value to the form control
+                            this.group.controls[formControlName].setValue(savedValue);
+                            console.log(`Restored filter ${formControlName} with value:`, savedValue);
+                        }
+                    }
+                }
+                else if (filter.jQuerySelector) {
+                    // Handle jQuery selector based filters
+                    const actionParameterName = filter.actionParameterName;
+                    if (savedFilters.hasOwnProperty(actionParameterName)) {
+                        const savedValue = savedFilters[actionParameterName];
+                        if (savedValue !== null && savedValue !== undefined && savedValue !== "") {
+                            const element = document.querySelector(filter.jQuerySelector);
+                            if (element) {
+                                element.value = savedValue;
+                                console.log(`Restored jQuery filter ${filter.jQuerySelector} with value:`, savedValue);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to restore filter values:', error);
+        }
+        finally {
+            // Reset the flag after a short delay to allow form controls to update
+            setTimeout(() => {
+                this.isRestoringFilters = false;
+            }, 100);
+        }
+    }
     castItems(objectArr) {
         let originalArray = [];
         for (let index = 0; index < objectArr.length; index++) {
@@ -6189,9 +6455,22 @@ class PagingComponent {
                     this.group.controls[FormControlName].setValue(null);
                 }
             }
+            // Clear history state when filters are reset
+            this.clearHistoryState();
             this.reinitializePaging();
         }
     }
+    /**
+     * Clear page history state
+     */
+    clearHistoryState() {
+        if (!this.options.enableBrowserNavigation) {
+            return;
+        }
+        // Clear the page history
+        this.pageHistory = [];
+        this.currentHistoryIndex = -1;
+    }
     getFiltersValue() {
         let filters = {};
         if (this.options.filters != null) {
@@ -6235,18 +6514,23 @@ class PagingComponent {
         }
         return filters;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }], propDecorators: { Items: [{
+            args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }, { type: i0.ChangeDetectorRef }], propDecorators: { Items: [{
+                type: Output
+            }], pageStateRestored: [{
                 type: Output
             }], options: [{
                 type: Input
             }], group: [{
                 type: Input
+            }], onPopState: [{
+                type: HostListener,
+                args: ['window:popstate', ['$event']]
             }] } });
 
 class PhoneComponent {
@@ -7148,7 +7432,7 @@ class TextAreaComponent {
         this.showCharsLimitMsg = false;
         this.hasCharsLimitValidationError = false;
         this.minCharsLimit = -1; //To disable chars limit feature by default
-        this.maxLimitWarningMsg = "";
+        this.maxLimitWarningMsg = '';
         this.isMicOn = false;
         this.resetError = () => {
             this.controlValidationService.removeGlobalError();
@@ -7190,7 +7474,7 @@ class TextAreaComponent {
             this.options.maxLength = this.globalSettings.maxLengthTextArea;
         if (!this.options.viewType)
             this.options.viewType = this.globalSettings.viewType;
-        if (this.options.labelKey != null && this.options.labelKey != "")
+        if (this.options.labelKey != null && this.options.labelKey != '')
             this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
         if (this.options.enableSpeechRecognition) {
             // Initialize language form control
@@ -7198,7 +7482,7 @@ class TextAreaComponent {
             this.group.addControl(languageControlName, new FormControl(this.options.selectedSpeechLanguage || ''));
             //Get all languages if not set
             if (!this.options.speechLanguages) {
-                this.languageService.getLanguages().subscribe(result => {
+                this.languageService.getLanguages().subscribe((result) => {
                     this.options.speechLanguages = result;
                     this.setSpeechLanguage();
                 });
@@ -7264,16 +7548,18 @@ class TextAreaComponent {
         this.controlUtility.CopyInputMessage(inputElement);
     }
     onTextChange() {
-        if (this.textAreaFormControl.value == "") {
+        if (this.textAreaFormControl.value == '') {
             this.wordCountArray = 0;
             this.wordCount = 0;
         }
         else {
-            this.wordCountArray = this.textAreaFormControl.value.split(" ").length;
+            this.wordCountArray = this.textAreaFormControl.value.split(' ').length;
             if (this.wordCountArray > 0) {
                 if (this.wordCountArray > this.options.maxWordCount) {
                     this.wordCount = this.options.maxWordCount;
-                    this.textAreaFormControl.setErrors({ "errorMassage": `  Word count must be less then or equal  ${this.options.maxWordCount}` });
+                    this.textAreaFormControl.setErrors({
+                        errorMassage: `  Word count must be less then or equal  ${this.options.maxWordCount}`
+                    });
                     this.textAreaFormControl.markAsTouched();
                     this.textAreaFormControl.invalid;
                 }
@@ -7290,9 +7576,9 @@ class TextAreaComponent {
                 this.showCharsLimitMsg = true;
                 this.hasCharsLimitValidationError = true;
                 if (this.currentCharsCount == this.options.maxLength)
-                    this.charsLimitMsgClass = "danger";
+                    this.charsLimitMsgClass = 'danger';
                 else
-                    this.charsLimitMsgClass = "warning";
+                    this.charsLimitMsgClass = 'warning';
             }
             else {
                 this.showCharsLimitMsg = false;
@@ -7300,9 +7586,11 @@ class TextAreaComponent {
             }
             let max = this.options.maxLength;
             let current = this.currentCharsCount;
-            let msg = this.utilityService.getResourceValue("MaxLengthLimitWarning");
+            let msg = this.utilityService.getResourceValue('MaxLengthLimitWarning');
             // Replace placeholders with actual values
-            this.maxLimitWarningMsg = msg.replace("${max}", max.toString()).replace("${current}", current.toString());
+            this.maxLimitWarningMsg = msg
+                .replace('${max}', max.toString())
+                .replace('${current}', current.toString());
         }
         this.onChange.emit(this.textAreaFormControl.value);
     }
@@ -7310,38 +7598,41 @@ class TextAreaComponent {
         this.isShowWordCount = isFocus;
         //onFocus
         if (isFocus) {
-            if (this.hasCharsLimitValidationError) //check if there was previous validation error
+            if (this.hasCharsLimitValidationError)
+                //check if there was previous validation error
                 this.showCharsLimitMsg = true;
-        }
-        else //onFocusOut
+        } //onFocusOut
+        else
             this.showCharsLimitMsg = false;
     }
     //region Speech Recognition
     setSpeechLanguage() {
         const languageControlName = 'Language_' + this.options.name;
         if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
-            let savedLanguage = localStorage.getItem("speechLanguage");
+            let savedLanguage = localStorage.getItem('speechLanguage');
             if (savedLanguage) {
                 this.options.selectedSpeechLanguage = savedLanguage;
             }
             else {
                 this.loadSelectedSpeechLanguage();
-                localStorage.setItem("speechLanguage", this.options.selectedSpeechLanguage);
+                localStorage.setItem('speechLanguage', this.options.selectedSpeechLanguage);
             }
         }
         else {
             this.loadSelectedSpeechLanguage();
         }
         this.group.get(languageControlName).setValue(this.options.selectedSpeechLanguage);
-        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == this.options.selectedSpeechLanguage).prefix;
+        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find((l) => l.dialect == this.options.selectedSpeechLanguage).prefix;
     }
     loadSelectedSpeechLanguage() {
         if (!this.options.selectedSpeechLanguage) {
-            if (this.currentLanguage == "en" && this.options.speechLanguages.some(language => language.englishName === 'English')) {
-                this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'English').dialect;
+            if (this.currentLanguage == 'en' &&
+                this.options.speechLanguages.some((language) => language.englishName === 'English')) {
+                this.options.selectedSpeechLanguage = this.options.speechLanguages.find((language) => language.englishName === 'English').dialect;
             }
-            else if (this.currentLanguage == "ar" && this.options.speechLanguages.some(language => language.englishName === 'Arabic')) {
-                this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'Arabic').dialect;
+            else if (this.currentLanguage == 'ar' &&
+                this.options.speechLanguages.some((language) => language.englishName === 'Arabic')) {
+                this.options.selectedSpeechLanguage = this.options.speechLanguages.find((language) => language.englishName === 'Arabic').dialect;
             }
             else {
                 this.options.selectedSpeechLanguage = this.options.speechLanguages[0].dialect;
@@ -7350,21 +7641,25 @@ class TextAreaComponent {
     }
     startSpeechRecognition() {
         if (!this.speechRecognitionService.isSupported) {
-            this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue("BrowserNotSupportSpeechRecognition"));
+            this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue('BrowserNotSupportSpeechRecognition'));
             return;
         }
         //Disable Select Language
         this.enableOrDisableLanguageSelect(false);
         this.isMicOn = true;
-        this.subscription = this.speechRecognitionService.startListening(this.options.selectedSpeechLanguage).subscribe({
+        this.subscription = this.speechRecognitionService
+            .startListening(this.options.selectedSpeechLanguage)
+            .subscribe({
             next: (transcript) => {
                 if (transcript) {
                     if (this.options.value) {
                         this.options.value += ' ';
+                        this.fireOnChange(this.options.value);
                     }
                     let charIndex = 0;
                     const interval = setInterval(() => {
                         this.options.value += transcript[charIndex];
+                        this.fireOnChange(this.options.value);
                         charIndex++;
                         if (charIndex === transcript.length) {
                             clearInterval(interval);
@@ -7394,6 +7689,11 @@ class TextAreaComponent {
             this.subscription.unsubscribe();
         }
     }
+    fireOnChange(text) {
+        if (this.onChange) {
+            this.onChange.emit(text);
+        }
+    }
     ngOnDestroy() {
         if (this.options.enableSpeechRecognition) {
             this.stopSpeechRecognition();
@@ -7401,13 +7701,13 @@ class TextAreaComponent {
     }
     onSpeechLanguageChange(event) {
         let selectedLang_Dialect = event.target.value;
-        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == selectedLang_Dialect).prefix;
+        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find((l) => l.dialect == selectedLang_Dialect).prefix;
         this.options.selectedSpeechLanguage = selectedLang_Dialect;
         const languageControlName = 'Language_' + this.options.name;
         let select = this.group.get(languageControlName);
         select.setValue(selectedLang_Dialect);
         if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
-            localStorage.setItem("speechLanguage", selectedLang_Dialect);
+            localStorage.setItem('speechLanguage', selectedLang_Dialect);
         }
     }
     enableOrDisableLanguageSelect(isEnabled = true) {
@@ -9459,6 +9759,8 @@ class PagingOptions {
         this.resetFilterButtonName = null;
         this.disableBlockUI = false;
         this.startPagingCallback = null;
+        /** Enable browser back/forward navigation support for paging state */
+        this.enableBrowserNavigation = false;
     }
 }