@fundamental-ngx/core 0.33.0 → 0.33.1-rc.3

package/pagination/fesm2020/fundamental-ngx-core-pagination.mjs

@@ -171,6 +171,8 @@ class PaginationComponent {
             of: 0
         };
         /** @hidden */
+        this._displayedPageSizeOptions = [];
+        /** @hidden */
         this._itemsPerPage = DEFAULT_ITEMS_PER_PAGE;
         /** @hidden */
         this._mobile = false;
@@ -240,6 +242,7 @@ class PaginationComponent {
     set itemsPerPage(value) {
         value = Math.floor(coerceNumberProperty(value, DEFAULT_ITEMS_PER_PAGE));
         this._itemsPerPage = Math.max(value, 1);
+        this._updateDisplayedPageSizeOptions();
     }
     /** Represents the options for items per page. */
     get itemsPerPageOptions() {
@@ -251,9 +254,7 @@ class PaginationComponent {
             .map((v) => Math.floor(v))
             .filter((v) => v > 0)
             .sort((a, b) => a - b);
-        if (this._itemsPerPageOptions.some((v) => v !== this.itemsPerPage)) {
-            this.itemsPerPage = this._itemsPerPageOptions[0];
-        }
+        this._updateDisplayedPageSizeOptions();
     }
     /**
      * Retrieves an object that represents
@@ -395,16 +396,32 @@ class PaginationComponent {
             .findIndex((elem) => elem.nativeElement === currentPageNativeElement);
         this._focusKeyManagerList.focusItem(index);
     }
+    /**
+     * Updates the list of page size options to display to the user. Includes making sure that
+     * the page size is an option and that the list is sorted.
+     */
+    _updateDisplayedPageSizeOptions() {
+        // If no page size is provided, use the first page size option or the default page size.
+        if (!this.itemsPerPage) {
+            this._itemsPerPage = this.itemsPerPageOptions.length ? this.itemsPerPageOptions[0] : DEFAULT_ITEMS_PER_PAGE;
+        }
+        this._displayedPageSizeOptions = this.itemsPerPageOptions?.slice() ?? [];
+        if (!this._displayedPageSizeOptions.includes(this.itemsPerPage)) {
+            this._displayedPageSizeOptions.push(this.itemsPerPage);
+        }
+        this._displayedPageSizeOptions.sort((a, b) => a - b);
+        this._cdr.markForCheck();
+    }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: i2.LiveAnnouncer }, { token: i3.RtlService, optional: true }, { token: i3.ContentDensityService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", compact: "compact", mobile: "mobile", totalItems: "totalItems", currentPage: "currentPage", itemsPerPage: "itemsPerPage", itemsPerPageTemplate: "itemsPerPageTemplate", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", displayTotalItems: "displayTotalItems", displayTextTemplate: "displayTextTemplate", firstLabel: "firstLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", lastLabel: "lastLabel", ariaLabel: "ariaLabel", pageLabel: "pageLabel", currentPageAriaLabel: "currentPageAriaLabel", labelBeforeInputMobile: "labelBeforeInputMobile", labelAfterInputMobile: "labelAfterInputMobile", inputAriaLabel: "inputAriaLabel" }, outputs: { pageChangeStart: "pageChangeStart", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class.fd-pagination--mobile": "mobile", "class.fd-pagination--short": "_lastPage <= 9" }, classAttribute: "fd-pagination" }, providers: [PaginationService], viewQueries: [{ propertyName: "_focusKeyManagerList", first: true, predicate: FocusKeyManagerListDirective, descendants: true }, { propertyName: "_pageInputElement", first: true, predicate: ["pageInputElement"], descendants: true, read: ElementRef }, { propertyName: "_currentPageElement", first: true, predicate: ["currentPageElement"], descendants: true, read: ElementRef }, { propertyName: "_focusKeyManagerItems", predicate: FocusKeyManagerItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalItems\">\n    <div\n        class=\"fd-pagination__per-page\"\n        *ngIf=\"itemsPerPageTemplate || (itemsPerPageOptions && itemsPerPageOptions.length)\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage>\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:2.75rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;display:flex;justify-content:center;align-items:center;margin:0 auto}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;width:2.25rem;text-align:center}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{width:auto;min-width:2.5rem;text-align:center;-moz-appearance:textfield}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{flex-shrink:0;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], components: [{ type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpBodyPlacement", "inlineHelpPlacement"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "compact", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline"], outputs: ["isOpenChange", "valueChange"] }, { type: i6.OptionComponent, selector: "fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.FocusKeyManagerListDirective, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { type: i3.FocusKeyManagerItemDirective, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.OnlyDigitsDirective, selector: "[fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", compact: "compact", mobile: "mobile", totalItems: "totalItems", currentPage: "currentPage", itemsPerPage: "itemsPerPage", itemsPerPageTemplate: "itemsPerPageTemplate", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", displayTotalItems: "displayTotalItems", displayTextTemplate: "displayTextTemplate", firstLabel: "firstLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", lastLabel: "lastLabel", ariaLabel: "ariaLabel", pageLabel: "pageLabel", currentPageAriaLabel: "currentPageAriaLabel", labelBeforeInputMobile: "labelBeforeInputMobile", labelAfterInputMobile: "labelAfterInputMobile", inputAriaLabel: "inputAriaLabel" }, outputs: { pageChangeStart: "pageChangeStart", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class.fd-pagination--mobile": "mobile", "class.fd-pagination--short": "_lastPage <= 9" }, classAttribute: "fd-pagination" }, providers: [PaginationService], viewQueries: [{ propertyName: "_focusKeyManagerList", first: true, predicate: FocusKeyManagerListDirective, descendants: true }, { propertyName: "_pageInputElement", first: true, predicate: ["pageInputElement"], descendants: true, read: ElementRef }, { propertyName: "_currentPageElement", first: true, predicate: ["currentPageElement"], descendants: true, read: ElementRef }, { propertyName: "_focusKeyManagerItems", predicate: FocusKeyManagerItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:2.75rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;display:flex;justify-content:center;align-items:center;margin:0 auto}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;width:2.25rem;text-align:center}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{width:auto;min-width:2.5rem;text-align:center;-moz-appearance:textfield}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{flex-shrink:0;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], components: [{ type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpBodyPlacement", "inlineHelpPlacement"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "compact", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline"], outputs: ["isOpenChange", "valueChange"] }, { type: i6.OptionComponent, selector: "fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.FocusKeyManagerListDirective, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { type: i3.FocusKeyManagerItemDirective, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.OnlyDigitsDirective, selector: "[fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-pagination', providers: [PaginationService], host: {
                         class: 'fd-pagination',
                         '[class.fd-pagination--mobile]': 'mobile',
                         '[class.fd-pagination--short]': '_lastPage <= 9'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<ng-container *ngIf=\"totalItems\">\n    <div\n        class=\"fd-pagination__per-page\"\n        *ngIf=\"itemsPerPageTemplate || (itemsPerPageOptions && itemsPerPageOptions.length)\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage>\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:2.75rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;display:flex;justify-content:center;align-items:center;margin:0 auto}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;width:2.25rem;text-align:center}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{width:auto;min-width:2.5rem;text-align:center;-moz-appearance:textfield}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{flex-shrink:0;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:2.75rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;display:flex;justify-content:center;align-items:center;margin:0 auto}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;width:2.25rem;text-align:center}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{width:auto;min-width:2.5rem;text-align:center;-moz-appearance:textfield}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{flex-shrink:0;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-right:auto;margin-left:0}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: i2.LiveAnnouncer }, { type: i3.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i3.ContentDensityService, decorators: [{

package/pagination/fesm2020/fundamental-ngx-core-pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-pagination.mjs","sources":["../../../../../libs/core/src/lib/pagination/pagination.service.ts","../../../../../libs/core/src/lib/pagination/pagination.component.ts","../../../../../libs/core/src/lib/pagination/pagination.component.html","../../../../../libs/core/src/lib/pagination/pagination.module.ts","../../../../../libs/core/src/lib/pagination/fundamental-ngx-core-pagination.ts"],"sourcesContent":["import { Injectable, isDevMode } from '@angular/core';\n\nimport { Pagination } from './pagination.model';\n\n/** Constant representing the number of pages which appear before and after current page. */\nconst CORNER_DISPLAY_PAGES = 1;\nconst SIDE_CURRENT_DISPLAY_PAGES = 2;\n\n/**\n * Service that is used to retrieve all the pages, the number of pages, and to validate the pagination object.\n */\n@Injectable()\nexport class PaginationService {\n    /** @hidden */\n    public readonly moreElementValue = -1;\n\n    /**\n     * Returns a number array representing the pages of the pagination object.\n     * Array length always the same and configured by CORNER_DISPLAY_PAGES & SIDE_CURRENT_DISPLAY_PAGES.\n     * @param pagination An object of type *Pagination*.\n     */\n    getPages(pagination: Pagination): number[] {\n        if (!pagination.currentPage) {\n            pagination.currentPage = 1;\n        }\n\n        this.validate(pagination);\n\n        const totalPages = this.getTotalPages(pagination);\n        const pages = new Array(totalPages).fill(undefined).map((_, i) => i + 1);\n\n        // +1 for current page, +2 for \"more\" elements - after start & before end pages\n        const pagesToDisplay = CORNER_DISPLAY_PAGES * 2 + SIDE_CURRENT_DISPLAY_PAGES * 2 + 1 + 2;\n\n        if (pages.length <= pagesToDisplay) {\n            return pages;\n        }\n\n        const pagesBefore = pagination.currentPage - 1;\n        const pagesAfter = totalPages - pagination.currentPage;\n        const minimalPagesGap = Math.round(pagesToDisplay / 2);\n\n        if (pagesBefore < minimalPagesGap) {\n            return [\n                ...pages.slice(0, pagesToDisplay - 2),\n                this.moreElementValue,\n                ...pages.slice(totalPages - CORNER_DISPLAY_PAGES)\n            ];\n        }\n\n        if (pagesAfter < minimalPagesGap) {\n            return [\n                ...pages.slice(0, CORNER_DISPLAY_PAGES),\n                this.moreElementValue,\n                ...pages.slice(totalPages - pagesToDisplay + 2)\n            ];\n        }\n\n        return [\n            ...pages.slice(0, CORNER_DISPLAY_PAGES),\n            this.moreElementValue,\n            ...pages.slice(\n                pagination.currentPage - SIDE_CURRENT_DISPLAY_PAGES - 1,\n                pagination.currentPage + SIDE_CURRENT_DISPLAY_PAGES\n            ),\n            this.moreElementValue,\n            ...pages.slice(totalPages - CORNER_DISPLAY_PAGES)\n        ];\n    }\n\n    /**\n     * Retrieves the total number of pages.\n     * @param pagination An object of type *Pagination*.\n     */\n    getTotalPages(pagination: Pagination): number {\n        if (!pagination.itemsPerPage) {\n            return 0;\n        }\n\n        return Math.ceil(pagination.totalItems / pagination.itemsPerPage);\n    }\n\n    /**\n     * Provides validation for the pagination object.\n     * @param pagination An object of type *Pagination*.\n     */\n    validate(pagination: Pagination): void {\n        if (isDevMode()) {\n            if (isNaN(pagination.totalItems) || pagination.totalItems <= 0) {\n                console.warn(\n                    `\"totalItems\" must be a number greater than zero but got \"${pagination.totalItems}\". This warning only appears in development mode.`\n                );\n            }\n\n            if (isNaN(pagination.itemsPerPage) || pagination.itemsPerPage <= 0) {\n                console.warn(\n                    `\"itemsPerPage\" must be a number greater than zero but got \"${pagination.itemsPerPage}\". This warning only appears in development mode.`\n                );\n            }\n        }\n    }\n}\n","import { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceArray, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { NgModel } from '@angular/forms';\n\nimport {\n    FocusKeyManagerItemDirective,\n    FocusKeyManagerListDirective,\n    ContentDensityService,\n    RtlService\n} from '@fundamental-ngx/core/utils';\n\nimport { Pagination } from './pagination.model';\nimport { PaginationService } from './pagination.service';\n\n/** Constant representing the default number of items per page. */\nconst DEFAULT_ITEMS_PER_PAGE = 10;\n\ninterface CurrentShowing {\n    from: number;\n    to: number;\n    of: number;\n}\n\nlet paginationUniqueId = 0;\n\n/**\n * The component that is used to provide navigation between paged information.\n * ```html\n * <fd-pagination\n *          [totalItems]=\"50\"\n *          [itemsPerPage]=\"10\"\n *          [currentPage]=\"3\">\n * </fd-pagination>\n * ```\n */\n@Component({\n    selector: 'fd-pagination',\n    templateUrl: './pagination.component.html',\n    providers: [PaginationService],\n    host: {\n        class: 'fd-pagination',\n        '[class.fd-pagination--mobile]': 'mobile',\n        '[class.fd-pagination--short]': '_lastPage <= 9'\n    },\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./pagination.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    preserveWhitespaces: true\n})\nexport class PaginationComponent implements OnChanges, OnInit, OnDestroy {\n    /** Id for the pagination component. If omitted, a unique one is generated. */\n    @Input()\n    id: string = 'fd-pagination-' + paginationUniqueId++;\n\n    /** Whether component should be shown in compact mode. True by default. Cozy mode is generally applied for tablets, mobile. */\n    @Input()\n    compact = true;\n\n    /** Whether component should be shown in the mobile mode. */\n    @Input()\n    set mobile(value: BooleanInput) {\n        this._mobile = coerceBooleanProperty(value);\n    }\n    get mobile(): boolean {\n        return this._mobile;\n    }\n\n    /** Represents the total number of items. */\n    @Input()\n    totalItems: number;\n\n    /** Represents the current page number. */\n    @Input()\n    get currentPage(): number {\n        return this._currentPage;\n    }\n    set currentPage(value: number) {\n        this._currentPage = Math.floor(coerceNumberProperty(value, 1));\n    }\n\n    /** Represents the number of items per page. */\n    @Input()\n    get itemsPerPage(): number {\n        return this._itemsPerPage;\n    }\n    set itemsPerPage(value: number) {\n        value = Math.floor(coerceNumberProperty(value, DEFAULT_ITEMS_PER_PAGE));\n\n        this._itemsPerPage = Math.max(value, 1);\n    }\n\n    /**\n     * The custom template show range of item by current page of items.\n     * It has higher priority than `itemsPerPageOptions` property.\n     */\n    @Input()\n    itemsPerPageTemplate: TemplateRef<any>;\n\n    /**\n     * Label for options for items per page.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    itemsPerPageLabel = 'Results per Page';\n\n    /** Represents the options for items per page. */\n    @Input()\n    get itemsPerPageOptions(): number[] {\n        return this._itemsPerPageOptions;\n    }\n    set itemsPerPageOptions(value: number[]) {\n        this._itemsPerPageOptions = coerceArray<number>(value)\n            .map((v) => coerceNumberProperty(v, 0))\n            .map((v) => Math.floor(v))\n            .filter((v) => v > 0)\n            .sort((a, b) => a - b);\n\n        if (this._itemsPerPageOptions.some((v) => v !== this.itemsPerPage)) {\n            this.itemsPerPage = this._itemsPerPageOptions[0];\n        }\n    }\n\n    /** Whether to display the total number of items. */\n    @Input()\n    displayTotalItems = true;\n\n    /**\n     * The template show range of item by current page of items.\n     * Default view: Showing {{ from }}-{{ to }} of {{ of }}\n     */\n    @Input()\n    displayTextTemplate: TemplateRef<any>;\n\n    /**\n     * Label for the 'first' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    firstLabel = 'First';\n\n    /**\n     * Label for the 'previous' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    previousLabel = 'Previous';\n\n    /**\n     * Label for the 'next' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    nextLabel = 'Next';\n\n    /**\n     * Label for the 'last' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    lastLabel = 'Last';\n\n    /**\n     * Aria label for the navigation element\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    ariaLabel = 'Pagination';\n\n    /** Event emitted when the page is changed. */\n    @Output()\n    pageChangeStart = new EventEmitter<number>();\n\n    /** Event emitted when items per page option is changed.*/\n    @Output()\n    itemsPerPageChange = new EventEmitter<number>();\n\n    /** @hidden */\n    _pages: number[] = [];\n\n    /** @hidden */\n    _pagesBeforeCurrent: number[];\n\n    /** @hidden */\n    _pagesAfterCurrent: number[];\n\n    /** @hidden */\n    @ViewChild(FocusKeyManagerListDirective)\n    readonly _focusKeyManagerList: FocusKeyManagerListDirective;\n\n    /** @hidden */\n    @ViewChildren(FocusKeyManagerItemDirective)\n    readonly _focusKeyManagerItems: QueryList<FocusKeyManagerItemDirective>;\n\n    /** @hidden */\n    @ViewChild('pageInputElement', { read: ElementRef })\n    readonly _pageInputElement: ElementRef;\n\n    /** @hidden */\n    @ViewChild('currentPageElement', { read: ElementRef })\n    readonly _currentPageElement: ElementRef;\n\n    /**\n     * Retrieves an object that represents\n     * the total number of items, the current page, and the number of items per page.\n     */\n    get paginationObject(): Pagination {\n        return {\n            totalItems: this.totalItems,\n            currentPage: this.currentPage,\n            itemsPerPage: this.itemsPerPage\n        };\n    }\n\n    /** @hidden */\n    get _lastPage(): number {\n        return this.paginationService.getTotalPages(this.paginationObject);\n    }\n\n    /** @hidden */\n    get isFirstPage(): boolean {\n        return this.currentPage === 1;\n    }\n\n    /** @hidden */\n    get isLastPage(): boolean {\n        return this.currentPage === this.paginationService.getTotalPages(this.paginationObject);\n    }\n\n    /** @hidden */\n    get _totalPagesElementId(): string {\n        return this.id + '__total';\n    }\n\n    /** @hidden */\n    get _moreElementValue(): number {\n        return this.paginationService.moreElementValue;\n    }\n\n    /** @hidden */\n    _currentShowing: CurrentShowing = {\n        from: 0,\n        to: 0,\n        of: 0\n    };\n\n    /** @hidden */\n    private _itemsPerPage: number = DEFAULT_ITEMS_PER_PAGE;\n\n    /** @hidden */\n    private _mobile = false;\n\n    /** @hidden */\n    private _itemsPerPageOptions: number[];\n\n    /** @hidden */\n    private _currentPage = 1;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private get _isRtl(): boolean {\n        return this._rtlService?.rtl.value;\n    }\n\n    /**\n     * Label for the 'Page ' page button. Page number passed as function parameter.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    pageLabel: (page: number) => string = (page: number) => `Page ${page}`;\n\n    /**\n     * Function to create current page aria label, current page passed as a parameter of the function\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    currentPageAriaLabel: (currentPage: number) => string = (currentPage: number) =>\n        `Page ${currentPage} is current page`;\n\n    /**\n     * Page label to be shown before current page input in mobile mode.\n     * In conjuction with @pageLabelAfterInputMobile generates the label for the input.\n     * Example: 'Page' + input + pageLabelAfterInputMobile\n     * This property is mainly provided to support i18n.\n     */\n    // eslint-disable-next-line @typescript-eslint/member-ordering\n    @Input()\n    labelBeforeInputMobile = 'Page';\n\n    /**\n     * Page label to be shown after current page input in mobile mode. Pages count passed as the function parameter.\n     * In conjuction with @pageLabelBeforeInputMobile generates the label for the input.\n     * Example: pageLabelBeforeInputMobile + input + 'of 500'.\n     * This property is mainly provided to support i18n.\n     */\n    @Input()\n    labelAfterInputMobile: (pagesCount: number) => string = (pagesCount: number) => `of ${pagesCount}`;\n\n    /**\n     * Current page input aria label, parameters passed to the function (currentPage: number, pagesCount: number).\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    inputAriaLabel: (currentPage: number, pagesCount: number) => string = (currentPage: number, pagesCount: number) =>\n        `Page input, Current page, Page ${currentPage} of ${pagesCount}`;\n\n    /** @hidden */\n    constructor(\n        private readonly paginationService: PaginationService,\n        private readonly _cdr: ChangeDetectorRef,\n        private readonly _liveAnnouncer: LiveAnnouncer,\n        @Optional() private readonly _rtlService: RtlService,\n        @Optional() private readonly _contentDensityService: ContentDensityService\n    ) {}\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes?.currentPage) {\n            this.currentPage = changes.currentPage.currentValue;\n        }\n\n        if (!this.currentPage || this.currentPage < 1) {\n            this.currentPage = 1;\n        } else {\n            const totalPages = this.paginationService.getTotalPages(this.paginationObject);\n\n            if (this.currentPage > totalPages) {\n                this.currentPage = totalPages;\n            }\n        }\n\n        this._refreshPages();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscriptions.add(this._rtlService?.rtl.subscribe(() => this._refreshPages()));\n\n        this._subscriptions.add(\n            this._contentDensityService?._isCompactDensity.subscribe((isCompact) => {\n                this.compact = isCompact;\n                this._cdr.markForCheck();\n            })\n        );\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /** @hidden */\n    skipItemPredicate(item: FocusKeyManagerItemDirective): boolean {\n        return (\n            getComputedStyle(item.nativeElement).display === 'none' ||\n            item.nativeElement.getAttribute('disabled') === 'true'\n        );\n    }\n\n    /**\n     * Navigates to a specific page.\n     * @param page The number of the page to navigate to.\n     * @param $event The mouse event (optional).\n     */\n    goToPage(page: number, event?: KeyboardEvent): void {\n        if (page > this._lastPage || page < 1) {\n            return;\n        }\n\n        this._refreshPages();\n\n        if (event) {\n            this._focusCurrentPage();\n        }\n\n        this.pageChangeStart.emit(page);\n\n        this._liveAnnouncer.announce(this.currentPageAriaLabel(this.currentPage));\n    }\n\n    /** Navigates to the first page */\n    goToFirstPage(): void {\n        this.goToPage(1);\n    }\n\n    /**\n     * Navigates to a previous page.\n     */\n    previousPage(): void {\n        this.goToPage(this.currentPage - 1);\n    }\n\n    /**\n     * Navigates to a next page.\n     */\n    nextPage(): void {\n        this.goToPage(this.currentPage + 1);\n    }\n\n    /** Navigates to the last page */\n    goToLastPage(): void {\n        this.goToPage(this._lastPage);\n    }\n\n    /** @deprecated, use {@link paginationObject} getter instead */\n    getPaginationObject(): Pagination {\n        return this.paginationObject;\n    }\n\n    /** @hidden */\n    _onChangePerPage = (event: number): void => {\n        this.itemsPerPage = event;\n        this.itemsPerPageChange.emit(this.itemsPerPage);\n\n        this._refreshPages();\n\n        const maxPage = this._pages[this._pages.length - 1];\n        if (this.currentPage > maxPage) {\n            this.pageChangeStart.emit(maxPage);\n        }\n    };\n\n    /** @hidden */\n    _restoreInputValue(model: NgModel): void {\n        model.reset(this.currentPage);\n        this._cdr.markForCheck();\n    }\n\n    /** @hidden */\n    private _refreshPages(): void {\n        const pagination = this.paginationObject;\n        const pages = this.paginationService.getPages(pagination);\n\n        this._pages = this._isRtl ? pages.slice().reverse() : pages;\n\n        const currentPageIndex = this._pages.findIndex((page) => page === this.currentPage);\n\n        this._pagesBeforeCurrent = this._pages.slice(0, currentPageIndex);\n        this._pagesAfterCurrent = this._pages.slice(currentPageIndex + 1);\n\n        this._currentShowing = {\n            from: this.currentPage - 1 === 0 ? 1 : (this.currentPage - 1) * pagination.itemsPerPage + 1,\n            to: Math.min((this.currentPage - 1) * pagination.itemsPerPage + pagination.itemsPerPage, this.totalItems),\n            of: this.totalItems\n        };\n\n        this._cdr.markForCheck();\n    }\n\n    /** Focus current page link/input using FocusKeyManager\n     * @hidden\n     */\n    private _focusCurrentPage(): void {\n        const currentPageNativeElement =\n            getComputedStyle(this._currentPageElement.nativeElement).display === 'none'\n                ? this._pageInputElement.nativeElement\n                : this._currentPageElement.nativeElement;\n\n        const index = this._focusKeyManagerItems\n            .toArray()\n            .findIndex((elem) => elem.nativeElement === currentPageNativeElement);\n\n        this._focusKeyManagerList.focusItem(index);\n    }\n}\n","<ng-container *ngIf=\"totalItems\">\n    <div\n        class=\"fd-pagination__per-page\"\n        *ngIf=\"itemsPerPageTemplate || (itemsPerPageOptions && itemsPerPageOptions.length)\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage>\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { SelectModule } from '@fundamental-ngx/core/select';\nimport { FormModule } from '@fundamental-ngx/core/form';\nimport { OnlyDigitsModule, FocusKeyManagerHelpersModule } from '@fundamental-ngx/core/utils';\n\nimport { PaginationComponent } from './pagination.component';\nimport { PaginationService } from './pagination.service';\n\n@NgModule({\n    declarations: [PaginationComponent],\n    imports: [\n        CommonModule,\n        ButtonModule,\n        IconModule,\n        SelectModule,\n        FormsModule,\n        FormModule,\n        OnlyDigitsModule,\n        FocusKeyManagerHelpersModule\n    ],\n    providers: [PaginationService],\n    exports: [PaginationComponent]\n})\nexport class PaginationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-pagination.mjs","sources":["../../../../../libs/core/src/lib/pagination/pagination.service.ts","../../../../../libs/core/src/lib/pagination/pagination.component.ts","../../../../../libs/core/src/lib/pagination/pagination.component.html","../../../../../libs/core/src/lib/pagination/pagination.module.ts","../../../../../libs/core/src/lib/pagination/fundamental-ngx-core-pagination.ts"],"sourcesContent":["import { Injectable, isDevMode } from '@angular/core';\n\nimport { Pagination } from './pagination.model';\n\n/** Constant representing the number of pages which appear before and after current page. */\nconst CORNER_DISPLAY_PAGES = 1;\nconst SIDE_CURRENT_DISPLAY_PAGES = 2;\n\n/**\n * Service that is used to retrieve all the pages, the number of pages, and to validate the pagination object.\n */\n@Injectable()\nexport class PaginationService {\n    /** @hidden */\n    public readonly moreElementValue = -1;\n\n    /**\n     * Returns a number array representing the pages of the pagination object.\n     * Array length always the same and configured by CORNER_DISPLAY_PAGES & SIDE_CURRENT_DISPLAY_PAGES.\n     * @param pagination An object of type *Pagination*.\n     */\n    getPages(pagination: Pagination): number[] {\n        if (!pagination.currentPage) {\n            pagination.currentPage = 1;\n        }\n\n        this.validate(pagination);\n\n        const totalPages = this.getTotalPages(pagination);\n        const pages = new Array(totalPages).fill(undefined).map((_, i) => i + 1);\n\n        // +1 for current page, +2 for \"more\" elements - after start & before end pages\n        const pagesToDisplay = CORNER_DISPLAY_PAGES * 2 + SIDE_CURRENT_DISPLAY_PAGES * 2 + 1 + 2;\n\n        if (pages.length <= pagesToDisplay) {\n            return pages;\n        }\n\n        const pagesBefore = pagination.currentPage - 1;\n        const pagesAfter = totalPages - pagination.currentPage;\n        const minimalPagesGap = Math.round(pagesToDisplay / 2);\n\n        if (pagesBefore < minimalPagesGap) {\n            return [\n                ...pages.slice(0, pagesToDisplay - 2),\n                this.moreElementValue,\n                ...pages.slice(totalPages - CORNER_DISPLAY_PAGES)\n            ];\n        }\n\n        if (pagesAfter < minimalPagesGap) {\n            return [\n                ...pages.slice(0, CORNER_DISPLAY_PAGES),\n                this.moreElementValue,\n                ...pages.slice(totalPages - pagesToDisplay + 2)\n            ];\n        }\n\n        return [\n            ...pages.slice(0, CORNER_DISPLAY_PAGES),\n            this.moreElementValue,\n            ...pages.slice(\n                pagination.currentPage - SIDE_CURRENT_DISPLAY_PAGES - 1,\n                pagination.currentPage + SIDE_CURRENT_DISPLAY_PAGES\n            ),\n            this.moreElementValue,\n            ...pages.slice(totalPages - CORNER_DISPLAY_PAGES)\n        ];\n    }\n\n    /**\n     * Retrieves the total number of pages.\n     * @param pagination An object of type *Pagination*.\n     */\n    getTotalPages(pagination: Pagination): number {\n        if (!pagination.itemsPerPage) {\n            return 0;\n        }\n\n        return Math.ceil(pagination.totalItems / pagination.itemsPerPage);\n    }\n\n    /**\n     * Provides validation for the pagination object.\n     * @param pagination An object of type *Pagination*.\n     */\n    validate(pagination: Pagination): void {\n        if (isDevMode()) {\n            if (isNaN(pagination.totalItems) || pagination.totalItems <= 0) {\n                console.warn(\n                    `\"totalItems\" must be a number greater than zero but got \"${pagination.totalItems}\". This warning only appears in development mode.`\n                );\n            }\n\n            if (isNaN(pagination.itemsPerPage) || pagination.itemsPerPage <= 0) {\n                console.warn(\n                    `\"itemsPerPage\" must be a number greater than zero but got \"${pagination.itemsPerPage}\". This warning only appears in development mode.`\n                );\n            }\n        }\n    }\n}\n","import { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceArray, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { NgModel } from '@angular/forms';\n\nimport {\n    FocusKeyManagerItemDirective,\n    FocusKeyManagerListDirective,\n    ContentDensityService,\n    RtlService\n} from '@fundamental-ngx/core/utils';\n\nimport { Pagination } from './pagination.model';\nimport { PaginationService } from './pagination.service';\n\n/** Constant representing the default number of items per page. */\nconst DEFAULT_ITEMS_PER_PAGE = 10;\n\ninterface CurrentShowing {\n    from: number;\n    to: number;\n    of: number;\n}\n\nlet paginationUniqueId = 0;\n\n/**\n * The component that is used to provide navigation between paged information.\n * ```html\n * <fd-pagination\n *          [totalItems]=\"50\"\n *          [itemsPerPage]=\"10\"\n *          [currentPage]=\"3\">\n * </fd-pagination>\n * ```\n */\n@Component({\n    selector: 'fd-pagination',\n    templateUrl: './pagination.component.html',\n    providers: [PaginationService],\n    host: {\n        class: 'fd-pagination',\n        '[class.fd-pagination--mobile]': 'mobile',\n        '[class.fd-pagination--short]': '_lastPage <= 9'\n    },\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./pagination.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    preserveWhitespaces: true\n})\nexport class PaginationComponent implements OnChanges, OnInit, OnDestroy {\n    /** Id for the pagination component. If omitted, a unique one is generated. */\n    @Input()\n    id: string = 'fd-pagination-' + paginationUniqueId++;\n\n    /** Whether component should be shown in compact mode. True by default. Cozy mode is generally applied for tablets, mobile. */\n    @Input()\n    compact = true;\n\n    /** Whether component should be shown in the mobile mode. */\n    @Input()\n    set mobile(value: BooleanInput) {\n        this._mobile = coerceBooleanProperty(value);\n    }\n    get mobile(): boolean {\n        return this._mobile;\n    }\n\n    /** Represents the total number of items. */\n    @Input()\n    totalItems: number;\n\n    /** Represents the current page number. */\n    @Input()\n    get currentPage(): number {\n        return this._currentPage;\n    }\n    set currentPage(value: number) {\n        this._currentPage = Math.floor(coerceNumberProperty(value, 1));\n    }\n\n    /** Represents the number of items per page. */\n    @Input()\n    get itemsPerPage(): number {\n        return this._itemsPerPage;\n    }\n    set itemsPerPage(value: number) {\n        value = Math.floor(coerceNumberProperty(value, DEFAULT_ITEMS_PER_PAGE));\n\n        this._itemsPerPage = Math.max(value, 1);\n\n        this._updateDisplayedPageSizeOptions();\n    }\n\n    /**\n     * The custom template show range of item by current page of items.\n     * It has higher priority than `itemsPerPageOptions` property.\n     */\n    @Input()\n    itemsPerPageTemplate: TemplateRef<any>;\n\n    /**\n     * Label for options for items per page.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    itemsPerPageLabel = 'Results per Page';\n\n    /** Represents the options for items per page. */\n    @Input()\n    get itemsPerPageOptions(): number[] {\n        return this._itemsPerPageOptions;\n    }\n    set itemsPerPageOptions(value: number[]) {\n        this._itemsPerPageOptions = coerceArray<number>(value)\n            .map((v) => coerceNumberProperty(v, 0))\n            .map((v) => Math.floor(v))\n            .filter((v) => v > 0)\n            .sort((a, b) => a - b);\n\n        this._updateDisplayedPageSizeOptions();\n    }\n\n    /** Whether to display the total number of items. */\n    @Input()\n    displayTotalItems = true;\n\n    /**\n     * The template show range of item by current page of items.\n     * Default view: Showing {{ from }}-{{ to }} of {{ of }}\n     */\n    @Input()\n    displayTextTemplate: TemplateRef<any>;\n\n    /**\n     * Label for the 'first' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    firstLabel = 'First';\n\n    /**\n     * Label for the 'previous' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    previousLabel = 'Previous';\n\n    /**\n     * Label for the 'next' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    nextLabel = 'Next';\n\n    /**\n     * Label for the 'last' page button.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    lastLabel = 'Last';\n\n    /**\n     * Aria label for the navigation element\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    ariaLabel = 'Pagination';\n\n    /** Event emitted when the page is changed. */\n    @Output()\n    pageChangeStart = new EventEmitter<number>();\n\n    /** Event emitted when items per page option is changed.*/\n    @Output()\n    itemsPerPageChange = new EventEmitter<number>();\n\n    /** @hidden */\n    _pages: number[] = [];\n\n    /** @hidden */\n    _pagesBeforeCurrent: number[];\n\n    /** @hidden */\n    _pagesAfterCurrent: number[];\n\n    /** @hidden */\n    @ViewChild(FocusKeyManagerListDirective)\n    readonly _focusKeyManagerList: FocusKeyManagerListDirective;\n\n    /** @hidden */\n    @ViewChildren(FocusKeyManagerItemDirective)\n    readonly _focusKeyManagerItems: QueryList<FocusKeyManagerItemDirective>;\n\n    /** @hidden */\n    @ViewChild('pageInputElement', { read: ElementRef })\n    readonly _pageInputElement: ElementRef;\n\n    /** @hidden */\n    @ViewChild('currentPageElement', { read: ElementRef })\n    readonly _currentPageElement: ElementRef;\n\n    /**\n     * Retrieves an object that represents\n     * the total number of items, the current page, and the number of items per page.\n     */\n    get paginationObject(): Pagination {\n        return {\n            totalItems: this.totalItems,\n            currentPage: this.currentPage,\n            itemsPerPage: this.itemsPerPage\n        };\n    }\n\n    /** @hidden */\n    get _lastPage(): number {\n        return this.paginationService.getTotalPages(this.paginationObject);\n    }\n\n    /** @hidden */\n    get isFirstPage(): boolean {\n        return this.currentPage === 1;\n    }\n\n    /** @hidden */\n    get isLastPage(): boolean {\n        return this.currentPage === this.paginationService.getTotalPages(this.paginationObject);\n    }\n\n    /** @hidden */\n    get _totalPagesElementId(): string {\n        return this.id + '__total';\n    }\n\n    /** @hidden */\n    get _moreElementValue(): number {\n        return this.paginationService.moreElementValue;\n    }\n\n    /** @hidden */\n    _currentShowing: CurrentShowing = {\n        from: 0,\n        to: 0,\n        of: 0\n    };\n\n    /** @hidden */\n    _displayedPageSizeOptions: number[] = [];\n\n    /** @hidden */\n    private _itemsPerPage: number = DEFAULT_ITEMS_PER_PAGE;\n\n    /** @hidden */\n    private _mobile = false;\n\n    /** @hidden */\n    private _itemsPerPageOptions: number[];\n\n    /** @hidden */\n    private _currentPage = 1;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private get _isRtl(): boolean {\n        return this._rtlService?.rtl.value;\n    }\n\n    /**\n     * Label for the 'Page ' page button. Page number passed as function parameter.\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    pageLabel: (page: number) => string = (page: number) => `Page ${page}`;\n\n    /**\n     * Function to create current page aria label, current page passed as a parameter of the function\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    currentPageAriaLabel: (currentPage: number) => string = (currentPage: number) =>\n        `Page ${currentPage} is current page`;\n\n    /**\n     * Page label to be shown before current page input in mobile mode.\n     * In conjuction with @pageLabelAfterInputMobile generates the label for the input.\n     * Example: 'Page' + input + pageLabelAfterInputMobile\n     * This property is mainly provided to support i18n.\n     */\n    // eslint-disable-next-line @typescript-eslint/member-ordering\n    @Input()\n    labelBeforeInputMobile = 'Page';\n\n    /**\n     * Page label to be shown after current page input in mobile mode. Pages count passed as the function parameter.\n     * In conjuction with @pageLabelBeforeInputMobile generates the label for the input.\n     * Example: pageLabelBeforeInputMobile + input + 'of 500'.\n     * This property is mainly provided to support i18n.\n     */\n    @Input()\n    labelAfterInputMobile: (pagesCount: number) => string = (pagesCount: number) => `of ${pagesCount}`;\n\n    /**\n     * Current page input aria label, parameters passed to the function (currentPage: number, pagesCount: number).\n     * This property is mainly provided to support reading in the right language for screen reader.\n     */\n    @Input()\n    inputAriaLabel: (currentPage: number, pagesCount: number) => string = (currentPage: number, pagesCount: number) =>\n        `Page input, Current page, Page ${currentPage} of ${pagesCount}`;\n\n    /** @hidden */\n    constructor(\n        private readonly paginationService: PaginationService,\n        private readonly _cdr: ChangeDetectorRef,\n        private readonly _liveAnnouncer: LiveAnnouncer,\n        @Optional() private readonly _rtlService: RtlService,\n        @Optional() private readonly _contentDensityService: ContentDensityService\n    ) {}\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes?.currentPage) {\n            this.currentPage = changes.currentPage.currentValue;\n        }\n\n        if (!this.currentPage || this.currentPage < 1) {\n            this.currentPage = 1;\n        } else {\n            const totalPages = this.paginationService.getTotalPages(this.paginationObject);\n\n            if (this.currentPage > totalPages) {\n                this.currentPage = totalPages;\n            }\n        }\n\n        this._refreshPages();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscriptions.add(this._rtlService?.rtl.subscribe(() => this._refreshPages()));\n\n        this._subscriptions.add(\n            this._contentDensityService?._isCompactDensity.subscribe((isCompact) => {\n                this.compact = isCompact;\n                this._cdr.markForCheck();\n            })\n        );\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /** @hidden */\n    skipItemPredicate(item: FocusKeyManagerItemDirective): boolean {\n        return (\n            getComputedStyle(item.nativeElement).display === 'none' ||\n            item.nativeElement.getAttribute('disabled') === 'true'\n        );\n    }\n\n    /**\n     * Navigates to a specific page.\n     * @param page The number of the page to navigate to.\n     * @param $event The mouse event (optional).\n     */\n    goToPage(page: number, event?: KeyboardEvent): void {\n        if (page > this._lastPage || page < 1) {\n            return;\n        }\n\n        this._refreshPages();\n\n        if (event) {\n            this._focusCurrentPage();\n        }\n\n        this.pageChangeStart.emit(page);\n\n        this._liveAnnouncer.announce(this.currentPageAriaLabel(this.currentPage));\n    }\n\n    /** Navigates to the first page */\n    goToFirstPage(): void {\n        this.goToPage(1);\n    }\n\n    /**\n     * Navigates to a previous page.\n     */\n    previousPage(): void {\n        this.goToPage(this.currentPage - 1);\n    }\n\n    /**\n     * Navigates to a next page.\n     */\n    nextPage(): void {\n        this.goToPage(this.currentPage + 1);\n    }\n\n    /** Navigates to the last page */\n    goToLastPage(): void {\n        this.goToPage(this._lastPage);\n    }\n\n    /** @deprecated, use {@link paginationObject} getter instead */\n    getPaginationObject(): Pagination {\n        return this.paginationObject;\n    }\n\n    /** @hidden */\n    _onChangePerPage = (event: number): void => {\n        this.itemsPerPage = event;\n        this.itemsPerPageChange.emit(this.itemsPerPage);\n\n        this._refreshPages();\n\n        const maxPage = this._pages[this._pages.length - 1];\n        if (this.currentPage > maxPage) {\n            this.pageChangeStart.emit(maxPage);\n        }\n    };\n\n    /** @hidden */\n    _restoreInputValue(model: NgModel): void {\n        model.reset(this.currentPage);\n        this._cdr.markForCheck();\n    }\n\n    /** @hidden */\n    private _refreshPages(): void {\n        const pagination = this.paginationObject;\n        const pages = this.paginationService.getPages(pagination);\n\n        this._pages = this._isRtl ? pages.slice().reverse() : pages;\n\n        const currentPageIndex = this._pages.findIndex((page) => page === this.currentPage);\n\n        this._pagesBeforeCurrent = this._pages.slice(0, currentPageIndex);\n        this._pagesAfterCurrent = this._pages.slice(currentPageIndex + 1);\n\n        this._currentShowing = {\n            from: this.currentPage - 1 === 0 ? 1 : (this.currentPage - 1) * pagination.itemsPerPage + 1,\n            to: Math.min((this.currentPage - 1) * pagination.itemsPerPage + pagination.itemsPerPage, this.totalItems),\n            of: this.totalItems\n        };\n\n        this._cdr.markForCheck();\n    }\n\n    /** Focus current page link/input using FocusKeyManager\n     * @hidden\n     */\n    private _focusCurrentPage(): void {\n        const currentPageNativeElement =\n            getComputedStyle(this._currentPageElement.nativeElement).display === 'none'\n                ? this._pageInputElement.nativeElement\n                : this._currentPageElement.nativeElement;\n\n        const index = this._focusKeyManagerItems\n            .toArray()\n            .findIndex((elem) => elem.nativeElement === currentPageNativeElement);\n\n        this._focusKeyManagerList.focusItem(index);\n    }\n\n    /**\n     * Updates the list of page size options to display to the user. Includes making sure that\n     * the page size is an option and that the list is sorted.\n     */\n    private _updateDisplayedPageSizeOptions(): void {\n        // If no page size is provided, use the first page size option or the default page size.\n        if (!this.itemsPerPage) {\n            this._itemsPerPage = this.itemsPerPageOptions.length ? this.itemsPerPageOptions[0] : DEFAULT_ITEMS_PER_PAGE;\n        }\n\n        this._displayedPageSizeOptions = this.itemsPerPageOptions?.slice() ?? [];\n\n        if (!this._displayedPageSizeOptions.includes(this.itemsPerPage)) {\n            this._displayedPageSizeOptions.push(this.itemsPerPage);\n        }\n\n        this._displayedPageSizeOptions.sort((a, b) => a - b);\n        this._cdr.markForCheck();\n    }\n}\n","<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"firstLabel\"\n            [title]=\"firstLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage($event)\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"previousLabel\"\n            [title]=\"previousLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage($event)\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"pageLabel(currentPage)\"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\"> {{ labelBeforeInputMobile }}: </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            [compact]=\"compact\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"inputAriaLabel(currentPage, _lastPage)\"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{ labelAfterInputMobile(_lastPage) }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [compact]=\"compact\"\n                [ariaLabel]=\"pageLabel(page)\"\n                [title]=\"nextLabel\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"nextLabel\"\n            [title]=\"nextLabel\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [compact]=\"compact\"\n            [ariaLabel]=\"lastLabel\"\n            [title]=\"lastLabel\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"compact\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\"> {{ showing.of }} Results </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">{{ itemsPerPageLabel }}:</label>\n\n    <fd-select\n        [compact]=\"compact\"\n        class=\"fd-pagination__per-page-select\"\n        [value]=\"itemsPerPage\"\n        (valueChange)=\"_onChangePerPage($event)\"\n    >\n        <fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</fd-option>\n    </fd-select>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { SelectModule } from '@fundamental-ngx/core/select';\nimport { FormModule } from '@fundamental-ngx/core/form';\nimport { OnlyDigitsModule, FocusKeyManagerHelpersModule } from '@fundamental-ngx/core/utils';\n\nimport { PaginationComponent } from './pagination.component';\nimport { PaginationService } from './pagination.service';\n\n@NgModule({\n    declarations: [PaginationComponent],\n    imports: [\n        CommonModule,\n        ButtonModule,\n        IconModule,\n        SelectModule,\n        FormsModule,\n        FormModule,\n        OnlyDigitsModule,\n        FocusKeyManagerHelpersModule\n    ],\n    providers: [PaginationService],\n    exports: [PaginationComponent]\n})\nexport class PaginationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/pagination",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/pagination/pagination.component.d.ts

@@ -123,6 +123,8 @@ export declare class PaginationComponent implements OnChanges, OnInit, OnDestroy
     /** @hidden */
     _currentShowing: CurrentShowing;
     /** @hidden */
+    _displayedPageSizeOptions: number[];
+    /** @hidden */
     private _itemsPerPage;
     /** @hidden */
     private _mobile;
@@ -203,6 +205,11 @@ export declare class PaginationComponent implements OnChanges, OnInit, OnDestroy
      * @hidden
      */
     private _focusCurrentPage;
+    /**
+     * Updates the list of page size options to display to the user. Includes making sure that
+     * the page size is an option and that the list is sorted.
+     */
+    private _updateDisplayedPageSizeOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "fd-pagination", never, { "id": "id"; "compact": "compact"; "mobile": "mobile"; "totalItems": "totalItems"; "currentPage": "currentPage"; "itemsPerPage": "itemsPerPage"; "itemsPerPageTemplate": "itemsPerPageTemplate"; "itemsPerPageLabel": "itemsPerPageLabel"; "itemsPerPageOptions": "itemsPerPageOptions"; "displayTotalItems": "displayTotalItems"; "displayTextTemplate": "displayTextTemplate"; "firstLabel": "firstLabel"; "previousLabel": "previousLabel"; "nextLabel": "nextLabel"; "lastLabel": "lastLabel"; "ariaLabel": "ariaLabel"; "pageLabel": "pageLabel"; "currentPageAriaLabel": "currentPageAriaLabel"; "labelBeforeInputMobile": "labelBeforeInputMobile"; "labelAfterInputMobile": "labelAfterInputMobile"; "inputAriaLabel": "inputAriaLabel"; }, { "pageChangeStart": "pageChangeStart"; "itemsPerPageChange": "itemsPerPageChange"; }, never, never>;
 }

package/panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/panel",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/popover",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/product-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/product-switch",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/progress-indicator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/progress-indicator",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~12.0.5",
     "@angular/core": "~12.0.5"

package/quick-view/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/quick-view",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/radio",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/rating-indicator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/rating-indicator",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/resizable-card-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/resizable-card-layout",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/scroll-spy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/scroll-spy",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/scrollbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/scrollbar",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/segmented-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/segmented-button",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/select",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/shared",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/shellbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/shellbar",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/side-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/side-navigation",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"

package/slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/slider",
-  "version": "0.33.0",
+  "version": "0.33.1-rc.3",
   "peerDependencies": {
     "@angular/common": "~13.1.1",
     "@angular/core": "~13.1.1"