@pepperi-addons/ngx-lib 0.4.2-beta.317 → 0.4.2-beta.319

package/fesm2020/pepperi-addons-ngx-lib-list.mjs

@@ -1255,11 +1255,11 @@ class PepListPagerComponent {
     }
 }
 PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", showPageSizeSelector: "showPageSizeSelector", showFirstLastButtons: "showFirstLastButtons", pageSizeOptions: "pageSizeOptions", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", showPageSizeSelector: "showPageSizeSelector", showFirstLastButtons: "showFirstLastButtons", pageSizeOptions: "pageSizeOptions", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">/</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            [title]=\"('LIST.PAGER_ITEMS_PER_PAGE' | translate)\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span *ngIf=\"screenSize <= PepScreenSizeType.MD\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .pager-label{white-space:nowrap}@media (max-width: 480px){.pager-container{height:auto;flex-wrap:wrap;row-gap:var(--pep-spacing-sm, .5rem)}}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
+            args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">/</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            [title]=\"('LIST.PAGER_ITEMS_PER_PAGE' | translate)\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span *ngIf=\"screenSize <= PepScreenSizeType.MD\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .pager-label{white-space:nowrap}@media (max-width: 480px){.pager-container{height:auto;flex-wrap:wrap;row-gap:var(--pep-spacing-sm, .5rem)}}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
         }, {
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { disabled: [{