npm - @fundamental-ngx/core - Versions diffs - 0.44.1-rc.3 → 0.45.0 - Mend

@fundamental-ngx/core 0.44.1-rc.3 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

package/fesm2022/fundamental-ngx-core-pagination.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { isDevMode, Injectable, EventEmitter, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, ViewChild, ViewChildren, Input, Output, forwardRef, Directive, NgModule } from '@angular/core';
+import { isDevMode, Injectable, EventEmitter, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, ViewChild, ViewChildren, Input, Output, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i8 from '@angular/forms';
@@ -12,9 +12,9 @@ import { SelectModule } from '@fundamental-ngx/core/select';
 import * as i9 from '@fundamental-ngx/core/form';
 import { FormModule } from '@fundamental-ngx/core/form';
 import * as i4 from '@fundamental-ngx/core/content-density';
-import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
+import { contentDensityObserverProviders, ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import * as i3 from '@fundamental-ngx/cdk/utils';
-import { warnOnce, FocusKeyManagerListDirective, FocusKeyManagerItemDirective, OnlyDigitsModule, FocusKeyManagerHelpersModule } from '@fundamental-ngx/cdk/utils';
+import { FocusKeyManagerListDirective, FocusKeyManagerItemDirective, OnlyDigitsModule, FocusKeyManagerHelpersModule } from '@fundamental-ngx/cdk/utils';
 import * as i10 from '@fundamental-ngx/i18n';
 import { TranslationResolver, FD_LANGUAGE, I18nModule } from '@fundamental-ngx/i18n';
 import * as i2 from '@angular/cdk/a11y';
@@ -143,18 +143,6 @@ class PaginationComponent {
     get itemsPerPage() {
         return this._itemsPerPage;
     }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for options for items per page.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set itemsPerPageLabel(value) {
-        warnOnce("Property itemsPerPageLabel is deprecated. Use i18n capabilities 'corePagination.itemsPerPageLabel' key instead.");
-        this._itemsPerPageLabel = value;
-    }
-    get itemsPerPageLabel() {
-        return this._itemsPerPageLabel;
-    }
     /** Represents the options for items per page. */
     set itemsPerPageOptions(value) {
         this._itemsPerPageOptions = coerceArray(value)
@@ -167,131 +155,6 @@ class PaginationComponent {
     get itemsPerPageOptions() {
         return this._itemsPerPageOptions;
     }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the 'first' page button.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set firstLabel(value) {
-        warnOnce("Property firstLabel is deprecated. Use i18n capabilities 'corePagination.firstLabel' key instead.");
-        this._firstLabel = value;
-    }
-    get firstLabel() {
-        return this._firstLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the 'previous' page button.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set previousLabel(value) {
-        warnOnce("Property previousLabel is deprecated. Use i18n capabilities 'corePagination.previousLabel' key instead.");
-        this._previousLabel = value;
-    }
-    get previousLabel() {
-        return this._previousLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the 'next' page button.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set nextLabel(value) {
-        console.warn("Property nextLabel is deprecated. Use i18n capabilities 'corePagination.nextLabel' key instead.");
-        this._nextLabel = value;
-    }
-    get nextLabel() {
-        return this._nextLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the 'last' page button.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set lastLabel(value) {
-        console.warn("Property lastLabel is deprecated. Use i18n capabilities 'corePagination.lastLabel' key instead.");
-        this._lastLabel = value;
-    }
-    get lastLabel() {
-        return this._lastLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Aria label for the navigation element
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set ariaLabel(value) {
-        console.warn("Property ariaLabel is deprecated. Use i18n capabilities 'corePagination.ariaLabel' key instead.");
-        this._ariaLabel = value;
-    }
-    get ariaLabel() {
-        return this._ariaLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the 'Page ' page button. Page number passed as function parameter.
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set pageLabel(value) {
-        console.warn("Property pageLabel is deprecated. Use i18n capabilities 'corePagination.pageLabel' key instead.");
-        this._pageLabel = value;
-    }
-    get pageLabel() {
-        return this._pageLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Function to create current page aria label, current page passed as a parameter of the function
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set currentPageAriaLabel(value) {
-        warnOnce("Property currentPageAriaLabel is deprecated. Use i18n capabilities 'corePagination.currentPageAriaLabel' key instead.");
-        this._currentPageAriaLabel = value;
-    }
-    get currentPageAriaLabel() {
-        return this._currentPageAriaLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Page label to be shown before current page input in mobile mode.
-     * In conjuction with @pageLabelAfterInputMobile generates the label for the input.
-     * Example: 'Page' + input + pageLabelAfterInputMobile
-     * This property is mainly provided to support i18n.
-     */
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    set labelBeforeInputMobile(value) {
-        warnOnce("Property labelBeforeInputMobile is deprecated. Use i18n capabilities 'corePagination.labelBeforeInputMobile' key instead.");
-        this._labelBeforeInputMobile = value;
-    }
-    get labelBeforeInputMobile() {
-        return this._labelBeforeInputMobile;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Page label to be shown after current page input in mobile mode. Pages count passed as the function parameter.
-     * In conjuction with @pageLabelBeforeInputMobile generates the label for the input.
-     * Example: pageLabelBeforeInputMobile + input + 'of 500'.
-     * This property is mainly provided to support i18n.
-     */
-    set labelAfterInputMobile(value) {
-        warnOnce("Property labelAfterInputMobile is deprecated. Use i18n capabilities 'corePagination.labelAfterInputMobile' key instead.");
-        this._labelAfterInputMobile = value;
-    }
-    get labelAfterInputMobile() {
-        return this._labelAfterInputMobile;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Current page input aria label, parameters passed to the function (currentPage: number, pagesCount: number).
-     * This property is mainly provided to support reading in the right language for screen reader.
-     */
-    set inputAriaLabel(value) {
-        warnOnce("Property inputAriaLabel is deprecated. Use i18n capabilities 'corePagination.inputAriaLabel' key instead.");
-        this._inputAriaLabel = value;
-    }
-    get inputAriaLabel() {
-        return this._inputAriaLabel;
-    }
     /**
      * Retrieves an object that represents
      * the total number of items, the current page, and the number of items per page.
@@ -328,10 +191,6 @@ class PaginationComponent {
         return this.paginationService.moreElementValue;
     }
     /** @hidden */
-    get _isRtl() {
-        return this._rtlService?.rtl.value;
-    }
-    /** @hidden */
     constructor(paginationService, _cdr, _liveAnnouncer, _language, _rtlService, _contentDensityObserver) {
         this.paginationService = paginationService;
         this._cdr = _cdr;
@@ -353,7 +212,6 @@ class PaginationComponent {
         this._currentShowing = {
             from: 0,
             to: 0,
-            of: 0,
             totalCount: 0
         };
         /** @hidden */
@@ -444,11 +302,6 @@ class PaginationComponent {
     goToLastPage() {
         this.goToPage(this._lastPage);
     }
-    /** @deprecated, use {@link paginationObject} getter instead */
-    getPaginationObject() {
-        warnOnce('PaginationComponent: getPaginationObject() is deprecated, use paginationObject getter instead');
-        return this.paginationObject;
-    }
     /** @hidden */
     _restoreInputValue(model) {
         model.reset(this.currentPage);
@@ -465,7 +318,6 @@ class PaginationComponent {
         this._currentShowing = {
             from: this.currentPage - 1 === 0 ? 1 : (this.currentPage - 1) * itemsPerPage + 1,
             to: Math.min((this.currentPage - 1) * itemsPerPage + itemsPerPage, this.totalItems),
-            of: this.totalItems,
             totalCount: this.totalItems
         };
         this._cdr.markForCheck();
@@ -500,21 +352,13 @@ class PaginationComponent {
     }
     /** @hidden */
     async _announcePage(page) {
-        let label;
-        if (this.currentPageAriaLabel) {
-            label = this.currentPageAriaLabel(page);
-        }
-        else {
-            const lang = await firstValueFrom(this._language);
-            label = this._translationResolver.resolve(lang, 'corePagination.currentPageAriaLabel', {
-                pageNumber: page,
-                totalCount: this.totalItems
-            });
-        }
-        this._liveAnnouncer.announce(label);
+        await this._liveAnnouncer.announce(this._translationResolver.resolve(await firstValueFrom(this._language), 'corePagination.currentPageAriaLabel', {
+            pageNumber: page,
+            totalCount: this.totalItems
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: i2.LiveAnnouncer }, { token: FD_LANGUAGE }, { token: i3.RtlService, optional: true }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", 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, contentDensityObserverProviders()], 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        fdkFocusKeyManagerList\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\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()\"\n        ></button>\n\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\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()\"\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\n                [title]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate : { pageNumber: currentPage })\n            \"\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\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile' | fdTranslate)\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fdkFocusKeyManagerItem\n            fd-form-control\n            fdkOnlyDigits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, _totalPages)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages })\n            \"\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            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages })\n            }}\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\n                [title]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\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 class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate : _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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{--fdPaginationMoreWidth:2.25rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:var(--fdPaginationMoreWidth)}.fd-pagination__more[class*=-compact],.fd-pagination__more[class*=-condensed],[class*=-compact] .fd-pagination__more:not([class*=-cozy]),[class*=-condensed] .fd-pagination__more:not([class*=-cozy]){--fdPaginationMoreWidth:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{--fdInput_Field_Margin:.125rem;--fdInput_Field_Compact_Margin:.125rem;-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.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{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-focus,.fd-pagination .fd-pagination__link:focus{outline:none;z-index:5}.fd-pagination .fd-pagination__link.is-focus:after,.fd-pagination .fd-pagination__link:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));bottom:var(--fdButton_Outline_Offset);content:\"\";display:block;left:var(--fdButton_Outline_Offset);position:absolute;right:var(--fdButton_Outline_Offset);top:var(--fdButton_Outline_Offset)}.fd-pagination .fd-pagination__link.is-focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link.is-focus.is-selected:after,.fd-pagination .fd-pagination__link:focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i7.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", 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]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdkOnlyDigits], [fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: i3.FocusKeyManagerItemDirective, selector: "[fdkFocusKeyManagerItem], [fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "directive", type: i3.FocusKeyManagerListDirective, selector: "[fdkFocusKeyManagerList], [fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", mobile: "mobile", totalItems: "totalItems", currentPage: "currentPage", itemsPerPage: "itemsPerPage", itemsPerPageTemplate: "itemsPerPageTemplate", itemsPerPageOptions: "itemsPerPageOptions", displayTotalItems: "displayTotalItems", displayTextTemplate: "displayTextTemplate" }, outputs: { pageChangeStart: "pageChangeStart", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class.fd-pagination--mobile": "mobile", "class.fd-pagination--short": "_lastPage <= 9" }, classAttribute: "fd-pagination" }, providers: [PaginationService, contentDensityObserverProviders()], 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        fdkFocusKeyManagerList\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"'corePagination.ariaLabel' | fdTranslate\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"'corePagination.firstLabel' | fdTranslate\"\n            [title]=\"'corePagination.firstLabel' | fdTranslate\"\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()\"\n        ></button>\n\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"'corePagination.previousLabel' | fdTranslate\"\n            [title]=\"'corePagination.previousLabel' | fdTranslate\"\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()\"\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\n                [title]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: 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\">\n            {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n        </label>\n\n        <input\n            #pageInputElement\n            fdkFocusKeyManagerItem\n            fd-form-control\n            fdkOnlyDigits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                'corePagination.inputAriaLabel' | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages }\n            \"\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            {{\n                'corePagination.labelAfterInputMobile'\n                    | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages }\n            }}\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\n                [title]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"'corePagination.nextLabel' | fdTranslate\"\n            [title]=\"'corePagination.nextLabel' | fdTranslate\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"'corePagination.lastLabel' | fdTranslate\"\n            [title]=\"'corePagination.lastLabel' | fdTranslate\"\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 class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate : _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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{--fdPaginationMoreWidth:2.25rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:var(--fdPaginationMoreWidth)}.fd-pagination__more[class*=-compact],.fd-pagination__more[class*=-condensed],[class*=-compact] .fd-pagination__more:not([class*=-cozy]),[class*=-condensed] .fd-pagination__more:not([class*=-cozy]){--fdPaginationMoreWidth:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{--fdInput_Field_Margin:.125rem;--fdInput_Field_Compact_Margin:.125rem;-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.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{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-focus,.fd-pagination .fd-pagination__link:focus{outline:none;z-index:5}.fd-pagination .fd-pagination__link.is-focus:after,.fd-pagination .fd-pagination__link:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));bottom:var(--fdButton_Outline_Offset);content:\"\";display:block;left:var(--fdButton_Outline_Offset);position:absolute;right:var(--fdButton_Outline_Offset);top:var(--fdButton_Outline_Offset)}.fd-pagination .fd-pagination__link.is-focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link.is-focus.is-selected:after,.fd-pagination .fd-pagination__link:focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i7.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", 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]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: i3.FocusKeyManagerItemDirective, selector: "[fdkFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "directive", type: i3.FocusKeyManagerListDirective, selector: "[fdkFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -522,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         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 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        fdkFocusKeyManagerList\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\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()\"\n        ></button>\n\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\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()\"\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\n                [title]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate : { pageNumber: currentPage })\n            \"\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\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile' | fdTranslate)\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fdkFocusKeyManagerItem\n            fd-form-control\n            fdkOnlyDigits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, _totalPages)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages })\n            \"\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            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages })\n            }}\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\n                [title]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate : { pageNumber: page })\n                \"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\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 class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate : _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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{--fdPaginationMoreWidth:2.25rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:var(--fdPaginationMoreWidth)}.fd-pagination__more[class*=-compact],.fd-pagination__more[class*=-condensed],[class*=-compact] .fd-pagination__more:not([class*=-cozy]),[class*=-condensed] .fd-pagination__more:not([class*=-cozy]){--fdPaginationMoreWidth:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{--fdInput_Field_Margin:.125rem;--fdInput_Field_Compact_Margin:.125rem;-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.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{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-focus,.fd-pagination .fd-pagination__link:focus{outline:none;z-index:5}.fd-pagination .fd-pagination__link.is-focus:after,.fd-pagination .fd-pagination__link:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));bottom:var(--fdButton_Outline_Offset);content:\"\";display:block;left:var(--fdButton_Outline_Offset);position:absolute;right:var(--fdButton_Outline_Offset);top:var(--fdButton_Outline_Offset)}.fd-pagination .fd-pagination__link.is-focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link.is-focus.is-selected:after,.fd-pagination .fd-pagination__link:focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.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        fdkFocusKeyManagerList\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"'corePagination.ariaLabel' | fdTranslate\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"'corePagination.firstLabel' | fdTranslate\"\n            [title]=\"'corePagination.firstLabel' | fdTranslate\"\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()\"\n        ></button>\n\n        <button\n            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"'corePagination.previousLabel' | fdTranslate\"\n            [title]=\"'corePagination.previousLabel' | fdTranslate\"\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()\"\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\n                [title]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: 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\">\n            {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n        </label>\n\n        <input\n            #pageInputElement\n            fdkFocusKeyManagerItem\n            fd-form-control\n            fdkOnlyDigits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                'corePagination.inputAriaLabel' | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages }\n            \"\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            {{\n                'corePagination.labelAfterInputMobile'\n                    | fdTranslate : { pageNumber: currentPage, totalCount: _totalPages }\n            }}\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                fdkFocusKeyManagerItem\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\n                [title]=\"'corePagination.pageLabel' | fdTranslate : { pageNumber: page }\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"'corePagination.nextLabel' | fdTranslate\"\n            [title]=\"'corePagination.nextLabel' | fdTranslate\"\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            fdkFocusKeyManagerItem\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"'corePagination.lastLabel' | fdTranslate\"\n            [title]=\"'corePagination.lastLabel' | fdTranslate\"\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 class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate : _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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{--fdPaginationMoreWidth:2.25rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:var(--fdPaginationMoreWidth)}.fd-pagination__more[class*=-compact],.fd-pagination__more[class*=-condensed],[class*=-compact] .fd-pagination__more:not([class*=-cozy]),[class*=-condensed] .fd-pagination__more:not([class*=-cozy]){--fdPaginationMoreWidth:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{--fdInput_Field_Margin:.125rem;--fdInput_Field_Compact_Margin:.125rem;-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.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{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-focus,.fd-pagination .fd-pagination__link:focus{outline:none;z-index:5}.fd-pagination .fd-pagination__link.is-focus:after,.fd-pagination .fd-pagination__link:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));bottom:var(--fdButton_Outline_Offset);content:\"\";display:block;left:var(--fdButton_Outline_Offset);position:absolute;right:var(--fdButton_Outline_Offset);top:var(--fdButton_Outline_Offset)}.fd-pagination .fd-pagination__link.is-focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link.is-focus.is-selected:after,.fd-pagination .fd-pagination__link:focus.fd-button--toggled:after,.fd-pagination .fd-pagination__link:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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-left:0;margin-right:auto}.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}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.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: i11.Observable, decorators: [{
                     type: Inject,
                     args: [FD_LANGUAGE]
@@ -552,70 +396,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], itemsPerPageTemplate: [{
                 type: Input
-            }], itemsPerPageLabel: [{
-                type: Input
             }], itemsPerPageOptions: [{
                 type: Input
             }], displayTotalItems: [{
                 type: Input
             }], displayTextTemplate: [{
                 type: Input
-            }], firstLabel: [{
-                type: Input
-            }], previousLabel: [{
-                type: Input
-            }], nextLabel: [{
-                type: Input
-            }], lastLabel: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], pageLabel: [{
-                type: Input
-            }], currentPageAriaLabel: [{
-                type: Input
-            }], labelBeforeInputMobile: [{
-                type: Input
-            }], labelAfterInputMobile: [{
-                type: Input
-            }], inputAriaLabel: [{
-                type: Input
             }], pageChangeStart: [{
                 type: Output
             }], itemsPerPageChange: [{
                 type: Output
             }] } });
-class DeprecatedPaginationCompactDirective extends DeprecatedCompactDirective {
-    /** @hidden */
-    constructor() {
-        super('fd-pagination');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedPaginationCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DeprecatedPaginationCompactDirective, selector: "fd-pagination[compact]", providers: [
-            {
-                provide: CONTENT_DENSITY_DIRECTIVE,
-                useExisting: forwardRef(() => DeprecatedPaginationCompactDirective)
-            }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedPaginationCompactDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'fd-pagination[compact]',
-                    providers: [
-                        {
-                            provide: CONTENT_DENSITY_DIRECTIVE,
-                            useExisting: forwardRef(() => DeprecatedPaginationCompactDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return []; } });
 class PaginationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent, DeprecatedPaginationCompactDirective], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule,
             ButtonModule,
             IconModule,
             SelectModule,
@@ -624,7 +419,7 @@ class PaginationModule {
             FormModule,
             OnlyDigitsModule,
             FocusKeyManagerHelpersModule,
-            ContentDensityModule], exports: [PaginationComponent, DeprecatedPaginationCompactDirective] }); }
+            ContentDensityModule], exports: [PaginationComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationModule, providers: [PaginationService], imports: [CommonModule,
             ButtonModule,
             IconModule,
@@ -639,7 +434,7 @@ class PaginationModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: PaginationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PaginationComponent, DeprecatedPaginationCompactDirective],
+                    declarations: [PaginationComponent],
                     imports: [
                         CommonModule,
                         ButtonModule,
@@ -653,7 +448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         ContentDensityModule
                     ],
                     providers: [PaginationService],
-                    exports: [PaginationComponent, DeprecatedPaginationCompactDirective]
+                    exports: [PaginationComponent]
                 }]
         }] });
@@ -661,5 +456,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { DeprecatedPaginationCompactDirective, PaginationComponent, PaginationModule, PaginationService };
+export { PaginationComponent, PaginationModule, PaginationService };
 //# sourceMappingURL=fundamental-ngx-core-pagination.mjs.map