ecabs-components 1.0.89 → 1.0.90

package/fesm2022/ecabs-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, HostBinding, EventEmitter, Output, Injectable, Directive, HostListener, ViewChild, ContentChild, Inject, Pipe } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, HostBinding, EventEmitter, Output, Injectable, Directive, HostListener, ViewChild, ContentChild, Inject, Host, Self, Optional, Pipe } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe } from '@angular/common';
 import * as i6 from '@angular/material/button';
@@ -48,6 +48,7 @@ import * as i2$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$3 from '@angular/material/paginator';
 import { map as map$1 } from 'rxjs/operators';
 import * as i3$3 from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -522,16 +523,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class HintComponent {
+class EcabsHintComponent {
     element;
     maxValue;
     showHint = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HintComponent, selector: "app-hint", inputs: { element: "element", maxValue: "maxValue", showHint: "showHint" }, ngImport: i0, template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHintComponent, selector: "ecabs-hint", inputs: { element: "element", maxValue: "maxValue", showHint: "showHint" }, ngImport: i0, template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-hint', template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n" }]
+            args: [{ selector: 'ecabs-hint', template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n" }]
         }], propDecorators: { element: [{
                 type: Input
             }], maxValue: [{
@@ -563,11 +564,11 @@ class ElementWrapperComponent {
         this.decrease.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div class=\"flex\">\r\n    <label \r\n      class=\"form-field__label\" \r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\" [matTooltip]=\"data?.tooltip\">error_outline</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <app-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></app-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: HintComponent, selector: "app-hint", inputs: ["element", "maxValue", "showHint"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div class=\"flex\">\r\n    <label\r\n      class=\"form-field__label\"\r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n              [matTooltip]=\"data?.tooltip\">error_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: EcabsHintComponent, selector: "ecabs-hint", inputs: ["element", "maxValue", "showHint"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-element-wrapper', template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div class=\"flex\">\r\n    <label \r\n      class=\"form-field__label\" \r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\" [matTooltip]=\"data?.tooltip\">error_outline</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <app-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></app-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"] }]
+            args: [{ selector: 'app-element-wrapper', template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div class=\"flex\">\r\n    <label\r\n      class=\"form-field__label\"\r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n              [matTooltip]=\"data?.tooltip\">error_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], showCloseIcon: [{
@@ -818,17 +819,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class HintModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HintModule, declarations: [HintComponent], imports: [CommonModule, FormsModule, MatFormFieldModule], exports: [HintComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintModule, imports: [CommonModule, FormsModule, MatFormFieldModule] });
+class EcabsHintModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintModule, declarations: [EcabsHintComponent], imports: [CommonModule], exports: [EcabsHintComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [HintComponent],
-                    imports: [CommonModule, FormsModule, MatFormFieldModule],
-                    exports: [HintComponent],
+                    declarations: [EcabsHintComponent],
+                    imports: [CommonModule],
+                    exports: [EcabsHintComponent],
                 }]
         }] });
 
@@ -864,7 +865,7 @@ class ElementWrapperModule {
             MatFormFieldModule,
             MatIconModule,
             MatLegacyTooltipModule,
-            HintModule], exports: [ElementWrapperComponent] });
+            EcabsHintModule], exports: [ElementWrapperComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementWrapperModule, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -882,7 +883,7 @@ class ElementWrapperModule {
             MatFormFieldModule,
             MatIconModule,
             MatLegacyTooltipModule,
-            HintModule] });
+            EcabsHintModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementWrapperModule, decorators: [{
             type: NgModule,
@@ -896,7 +897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatLegacyTooltipModule,
-                        HintModule,
+                        EcabsHintModule,
                     ],
                     providers: [
                         {
@@ -4516,6 +4517,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsPaginatorDirective {
+    matPag;
+    vr;
+    ren;
+    destroyRef;
+    length;
+    _rangeStart;
+    _rangeEnd;
+    _buttons = [];
+    _curPageObj = {
+        length: 0,
+        pageIndex: 0,
+        pageSize: 0,
+        previousPageIndex: 0,
+    };
+    _showTotalPages = 3;
+    get showTotalPages() {
+        return this._showTotalPages;
+    }
+    get inc() {
+        return this._showTotalPages % 2 === 0
+            ? this.showTotalPages / 2
+            : (this.showTotalPages - 1) / 2;
+    }
+    get lastPageIndex() {
+        return this.matPag.getNumberOfPages() - 1;
+    }
+    set showTotalPages(value) {
+        this._showTotalPages = value % 2 === 0 ? value + 1 : value;
+    }
+    constructor(matPag, vr, ren, destroyRef) {
+        this.matPag = matPag;
+        this.vr = vr;
+        this.ren = ren;
+        this.destroyRef = destroyRef;
+        // to rerender buttons on items per page change and first, last, next and prior buttons
+        this.matPag.page
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((e) => {
+            this.pageChanged(e);
+        });
+        this.matPag.selectConfig = {
+            panelClass: 'paginator--selector',
+        };
+    }
+    pageChanged(page) {
+        if (this._curPageObj.pageSize !== page.pageSize &&
+            this._curPageObj.pageIndex !== 0) {
+            page.pageIndex = 0;
+            this._rangeStart = 0;
+            this._rangeEnd = this._showTotalPages - 1;
+        }
+        this._curPageObj = page;
+        this.initPageRange();
+    }
+    ngOnChanges(changes) {
+        if (changes['length'] && !changes['length']?.firstChange) {
+            this.pageChanged(this._curPageObj);
+        }
+    }
+    //Initialize default state after view init
+    ngAfterViewInit() {
+        this._rangeStart = 0;
+        this._rangeEnd = this._showTotalPages - 1;
+        this.initPageRange();
+    }
+    buildPageNumbers() {
+        const actionContainer = this.vr.element.nativeElement.querySelector('div.mat-mdc-paginator-range-actions');
+        // including flex box in container
+        const container = this.vr.element.nativeElement.querySelector('div.mat-mdc-paginator-container');
+        // removing item per page
+        const itemPerPage = this.vr.element.nativeElement.querySelector('div.mat-mdc-paginator-page-size');
+        this.ren.appendChild(container, itemPerPage);
+        // remove buttons before creating new ones
+        if (this._buttons.length > 0) {
+            this._buttons.forEach((button) => {
+                this.ren.removeChild(actionContainer, button);
+            });
+            // Empty state array
+            this._buttons.length = 0;
+        }
+    }
+    // calculates the button range based on class input parameters and based on current page index value. Used to render new buttons after event.
+    initPageRange() {
+        const middleIndex = (this._rangeStart + this._rangeEnd) / 2;
+        this._rangeStart = this.calcRangeStart(middleIndex);
+        this._rangeEnd = this.calcRangeEnd(middleIndex);
+        this.buildPageNumbers();
+    }
+    // Helper function To calculate start of button range
+    calcRangeStart(middleIndex) {
+        switch (true) {
+            case this._curPageObj.pageIndex === 0 && this._rangeStart !== 0:
+                return 0;
+            case this._curPageObj.pageIndex > this._rangeEnd:
+                return this._curPageObj.pageIndex + this.inc > this.lastPageIndex
+                    ? this.lastPageIndex - this.inc * 2
+                    : this._curPageObj.pageIndex - this.inc;
+            case this._curPageObj.pageIndex > this._curPageObj.previousPageIndex &&
+                this._curPageObj.pageIndex > middleIndex &&
+                this._rangeEnd < this.lastPageIndex:
+                return this._rangeStart + 1;
+            case this._curPageObj.pageIndex < this._curPageObj.previousPageIndex &&
+                this._curPageObj.pageIndex < middleIndex &&
+                this._rangeStart > 0:
+                return this._rangeStart - 1;
+            default:
+                return this._rangeStart;
+        }
+    }
+    // Helper function to calculate end of button range
+    calcRangeEnd(middleIndex) {
+        switch (true) {
+            case this._curPageObj.pageIndex === 0 &&
+                this._rangeEnd !== this._showTotalPages:
+                return this._showTotalPages - 1;
+            case this._curPageObj.pageIndex > this._rangeEnd:
+                return this._curPageObj.pageIndex + this.inc > this.lastPageIndex
+                    ? this.lastPageIndex
+                    : this._curPageObj.pageIndex + 1;
+            case this._curPageObj.pageIndex > this._curPageObj.previousPageIndex &&
+                this._curPageObj.pageIndex > middleIndex &&
+                this._rangeEnd < this.lastPageIndex:
+                return this._rangeEnd + 1;
+            case this._curPageObj.pageIndex < this._curPageObj.previousPageIndex &&
+                this._curPageObj.pageIndex < middleIndex &&
+                this._rangeStart >= 0 &&
+                this._rangeEnd > this._showTotalPages - 1:
+                return this._rangeEnd - 1;
+            default:
+                return this._rangeEnd;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirective, deps: [{ token: i1$3.MatPaginator, host: true, optional: true, self: true }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsPaginatorDirective, selector: "[ecabsPaginator]", inputs: { length: "length", showTotalPages: "showTotalPages" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsPaginator]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatPaginator, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.DestroyRef }]; }, propDecorators: { length: [{
+                type: Input
+            }], showTotalPages: [{
+                type: Input
+            }] } });
+
+class EcabsPaginatorDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirectiveModule, declarations: [EcabsPaginatorDirective], imports: [CommonModule], exports: [EcabsPaginatorDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPaginatorDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsPaginatorDirective],
+                    exports: [EcabsPaginatorDirective],
+                }]
+        }] });
+
 class EcabsValidationComponent {
     validations;
     form;
@@ -5409,5 +5577,5 @@ const sortGeneric = (objX, objY, sortParams) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, DynamicBgColorDirective, DynamicBgColorDirectiveModule, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTruncatePipe, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, MaskTimeDirective, MaskTimeDirectiveModule, TableComponent, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, UnsubscribeService, ValidationComponent, scrollFactory, sortGeneric };
+export { ButtonsComponent, DynamicBgColorDirective, DynamicBgColorDirectiveModule, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTruncatePipe, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, MaskTimeDirective, MaskTimeDirectiveModule, TableComponent, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, UnsubscribeService, ValidationComponent, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map