@wavemaker/app-ng-runtime 11.15.2-rc.64737 → 11.15.4-rc.250

package/components/data/pagination/fesm2022/index.mjs

@@ -4,7 +4,7 @@ import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, SkipSelf, Inject, Optional, Component } from '@angular/core';
-import { debounce, isDefined, AppConstants, DataSource, triggerFn, $appDigest, $watch, switchClass } from '@wm/core';
+import { debounce, isDefined, AppConstants, DataSource, triggerFn, $appDigest, $watch, switchClass, adjustVerticalPosition } from '@wm/core';
 import { register, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, StylableComponent, DEBOUNCE_TIMES, styler, getOrderByExpr, unsupportedStatePersistenceTypes, WidgetRef, provideAsWidgetRef } from '@wm/components/base';
 import { forEach, isArray, isEmpty, get, isString, isNull, range } from 'lodash-es';
 import * as i3 from 'ngx-bootstrap/pagination';
@@ -196,6 +196,10 @@ class PaginationComponent extends StylableComponent {
     isDataSourceHasPaging() {
         return this.datasource && this.datasource.execute(DataSource.Operation.IS_PAGEABLE);
     }
+    getPaginationStartIndex() {
+        const startIndex = this.datasource?._paginationConfig?.paginationStartIndex;
+        return 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 = (isDefined(startIndex) && isDefined(endIndex) && isDefined(totalRecords)) ? {
@@ -249,7 +253,7 @@ class PaginationComponent extends StylableComponent {
                     maxResults = this.pagination.size = Number(this.pagination.size) ? this.pagination.size : get(this.datasource.dataSet, this.pagination.size);
                     this.pagination.numberOfElements = Number(this.pagination.numberOfElements) ? this.pagination.numberOfElements : get(this.datasource.dataSet, this.pagination.numberOfElements);
                     if (this.pagination.numberOfElements > 0) {
-                        if (isDefined(this.pagination.number)) { // number is page number received from backend
+                        if (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;
@@ -358,7 +362,7 @@ class PaginationComponent extends StylableComponent {
                 pageIndex = this.parent.actionRowPage;
             }
             this.datasource.execute(DataSource.Operation.LIST_RECORDS, {
-                'page': pageIndex,
+                'page': (pageIndex - 1) + this.getPaginationStartIndex(),
                 'size': this.maxResults,
                 'filterFields': this.filterFields,
                 'orderBy': this.sortOptions,
@@ -742,6 +746,26 @@ class PaginationComponent extends StylableComponent {
             this.bsDropdown.hide();
         }
     }
+    onDropDownShown($event) {
+        const container = $event?._element?.nativeElement;
+        if (!container)
+            return;
+        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) => {
@@ -749,6 +773,9 @@ class PaginationComponent extends StylableComponent {
         };
     }
     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);
@@ -788,13 +815,13 @@ class PaginationComponent extends StylableComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.Injector }, { token: WidgetRef, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "[wmPagination]", outputs: { resultEmitter: "resultEmitter", maxResultsEmitter: "maxResultsEmitter" }, providers: [
             provideAsWidgetRef(PaginationComponent)
-        ], viewQueries: [{ propertyName: "bsDropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0, 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\" (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\" (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\"  (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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.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: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] }); }
+        ], viewQueries: [{ propertyName: "bsDropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.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: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FormsModule, PaginationModule, BsDropdownModule], selector: '[wmPagination]', providers: [
                         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\" (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\" (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\"  (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" }]
+                    ], 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.Injector }, { type: undefined, decorators: [{
                     type: SkipSelf
                 }, {