@fundamental-ngx/core 0.55.4 → 0.55.5

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

@@ -351,7 +351,7 @@ class PaginationComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", 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: "17.0.0", version: "19.2.3", type: PaginationComponent, isStandalone: true, selector: "fd-pagination", inputs: { id: "id", mobile: ["mobile", "mobile", booleanAttribute], 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: "@if (totalItems) {\n    @if (itemsPerPageTemplate || itemsPerPageOptions.length) {\n        <div class=\"fd-pagination__per-page\">\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-template\n                [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n                [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n            ></ng-template>\n        </div>\n    }\n    @if (totalItems >= itemsPerPage) {\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        >\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            <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            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesBeforeCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n            </label>\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                [ariaLabel]=\"\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{\n                    'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                }}\n            </label>\n            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesAfterCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <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    @if (displayTotalItems) {\n        <span class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n            <ng-template\n                [ngTemplateOutlet]=\"displayTextTemplate || total\"\n                [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n            ></ng-template>\n        </span>\n    }\n}\n<ng-template #more>\n    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\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<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        @for (option of pageOptions; track option) {\n            <li fd-option [value]=\"option\">{{ option }}</li>\n        }\n    </fd-select>\n</ng-template>\n", styles: [".fd-pagination{--fdPaginationMoreWidth:var(--fdPagination_Placeholder_Dots_Width);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:2.75rem;justify-content:space-between;padding-block:0;padding-inline:1rem;width:100%}.fd-pagination:after,.fd-pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fdPagination_Elements_Spacing);margin-inline:auto}.fd-pagination__nav:after,.fd-pagination__nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__more{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-pagination__more:after,.fd-pagination__more:before{-webkit-box-sizing:inherit;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:var(--fdPagination_Placeholder_Dots_Width_Compact)}.fd-pagination .fd-pagination__input{-webkit-appearance:textfield;-moz-appearance:textfield;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;appearance:none;margin-block:0;margin-inline:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin-block:0;margin-inline: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:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.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]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination .fd-pagination__button.is-disabled,.fd-pagination .fd-pagination__button:disabled,.fd-pagination .fd-pagination__button[aria-disabled=true]{pointer-events:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (width <= 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (width >= 600px) and (width <= 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;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/*! Bundled license information:\n\nfundamental-styles/dist/pagination.css:\n  (*!\n   * Fundamental Library Styles v0.38.0\n   * Copyright (c) 2024 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*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusKeyManagerListDirective, selector: "[fdkFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: FocusKeyManagerItemDirective, selector: "[fdkFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: PaginationComponent, isStandalone: true, selector: "fd-pagination", inputs: { id: "id", mobile: ["mobile", "mobile", booleanAttribute], 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: "@if (totalItems) {\n    @if (itemsPerPageTemplate || itemsPerPageOptions.length) {\n        <div class=\"fd-pagination__per-page\">\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-template\n                [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n                [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n            ></ng-template>\n        </div>\n    }\n    @if (totalItems >= itemsPerPage) {\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        >\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            <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            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesBeforeCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n            </label>\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                [ariaLabel]=\"\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{\n                    'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                }}\n            </label>\n            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesAfterCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <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    @if (displayTotalItems) {\n        <span class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n            <ng-template\n                [ngTemplateOutlet]=\"displayTextTemplate || total\"\n                [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n            ></ng-template>\n        </span>\n    }\n}\n<ng-template #more>\n    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\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<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        @for (option of pageOptions; track option) {\n            <li fd-option [value]=\"option\">{{ option }}</li>\n        }\n    </fd-select>\n</ng-template>\n", styles: [".fd-pagination{--fdPaginationMoreWidth:var(--fdPagination_Placeholder_Dots_Width);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:2.75rem;justify-content:space-between;padding-block:0;padding-inline:1rem;width:100%}.fd-pagination:after,.fd-pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fdPagination_Elements_Spacing);margin-inline:auto}.fd-pagination__nav:after,.fd-pagination__nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__more{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-pagination__more:after,.fd-pagination__more:before{-webkit-box-sizing:inherit;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:var(--fdPagination_Placeholder_Dots_Width_Compact)}.fd-pagination .fd-pagination__input{-webkit-appearance:textfield;-moz-appearance:textfield;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;appearance:none;margin-block:0;margin-inline:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin-block:0;margin-inline: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:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.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]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination .fd-pagination__button.is-disabled,.fd-pagination .fd-pagination__button:disabled,.fd-pagination .fd-pagination__button[aria-disabled=true]{pointer-events:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (width <= 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (width >= 600px) and (width <= 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;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/*! Bundled license information:\n\nfundamental-styles/dist/pagination.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 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*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusKeyManagerListDirective, selector: "[fdkFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: FocusKeyManagerItemDirective, selector: "[fdkFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: OnlyDigitsDirective, selector: "[fdkOnlyDigits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -371,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         SelectComponent,
                         OptionComponent,
                         FdTranslatePipe
-                    ], template: "@if (totalItems) {\n    @if (itemsPerPageTemplate || itemsPerPageOptions.length) {\n        <div class=\"fd-pagination__per-page\">\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-template\n                [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n                [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n            ></ng-template>\n        </div>\n    }\n    @if (totalItems >= itemsPerPage) {\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        >\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            <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            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesBeforeCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n            </label>\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                [ariaLabel]=\"\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{\n                    'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                }}\n            </label>\n            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesAfterCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <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    @if (displayTotalItems) {\n        <span class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n            <ng-template\n                [ngTemplateOutlet]=\"displayTextTemplate || total\"\n                [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n            ></ng-template>\n        </span>\n    }\n}\n<ng-template #more>\n    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\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<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        @for (option of pageOptions; track option) {\n            <li fd-option [value]=\"option\">{{ option }}</li>\n        }\n    </fd-select>\n</ng-template>\n", styles: [".fd-pagination{--fdPaginationMoreWidth:var(--fdPagination_Placeholder_Dots_Width);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:2.75rem;justify-content:space-between;padding-block:0;padding-inline:1rem;width:100%}.fd-pagination:after,.fd-pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fdPagination_Elements_Spacing);margin-inline:auto}.fd-pagination__nav:after,.fd-pagination__nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__more{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-pagination__more:after,.fd-pagination__more:before{-webkit-box-sizing:inherit;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:var(--fdPagination_Placeholder_Dots_Width_Compact)}.fd-pagination .fd-pagination__input{-webkit-appearance:textfield;-moz-appearance:textfield;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;appearance:none;margin-block:0;margin-inline:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin-block:0;margin-inline: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:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.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]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination .fd-pagination__button.is-disabled,.fd-pagination .fd-pagination__button:disabled,.fd-pagination .fd-pagination__button[aria-disabled=true]{pointer-events:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (width <= 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (width >= 600px) and (width <= 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;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/*! Bundled license information:\n\nfundamental-styles/dist/pagination.css:\n  (*!\n   * Fundamental Library Styles v0.38.0\n   * Copyright (c) 2024 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*/\n"] }]
+                    ], template: "@if (totalItems) {\n    @if (itemsPerPageTemplate || itemsPerPageOptions.length) {\n        <div class=\"fd-pagination__per-page\">\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-template\n                [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n                [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n            ></ng-template>\n        </div>\n    }\n    @if (totalItems >= itemsPerPage) {\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        >\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            <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            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesBeforeCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{ 'corePagination.labelBeforeInputMobile' | fdTranslate }}\n            </label>\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                [ariaLabel]=\"\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            <label fd-form-label class=\"fd-pagination__label\">\n                {{\n                    'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                }}\n            </label>\n            <!-- Duplicated to preserve the items order for keyboard navigation -->\n            @for (page of _pagesAfterCurrent; track page) {\n                @if (page !== _moreElementValue) {\n                    <button\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                } @else {\n                    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n                }\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            <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    @if (displayTotalItems) {\n        <span class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n            <ng-template\n                [ngTemplateOutlet]=\"displayTextTemplate || total\"\n                [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n            ></ng-template>\n        </span>\n    }\n}\n<ng-template #more>\n    <span class=\"fd-pagination__more\" aria-hidden=\"true\" aria-label=\"...\" role=\"presentation\"></span>\n</ng-template>\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<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ 'corePagination.itemsPerPageLabel' | fdTranslate }}\n    </label>\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        @for (option of pageOptions; track option) {\n            <li fd-option [value]=\"option\">{{ option }}</li>\n        }\n    </fd-select>\n</ng-template>\n", styles: [".fd-pagination{--fdPaginationMoreWidth:var(--fdPagination_Placeholder_Dots_Width);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:2.75rem;justify-content:space-between;padding-block:0;padding-inline:1rem;width:100%}.fd-pagination:after,.fd-pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-pagination__per-page:after,.fd-pagination__per-page:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fdPagination_Elements_Spacing);margin-inline:auto}.fd-pagination__nav:after,.fd-pagination__nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-pagination__more{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-pagination__more:after,.fd-pagination__more:before{-webkit-box-sizing:inherit;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:var(--fdPagination_Placeholder_Dots_Width_Compact)}.fd-pagination .fd-pagination__input{-webkit-appearance:textfield;-moz-appearance:textfield;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;appearance:none;margin-block:0;margin-inline:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin-block:0;margin-inline: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:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.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]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination .fd-pagination__button.is-disabled,.fd-pagination .fd-pagination__button:disabled,.fd-pagination .fd-pagination__button[aria-disabled=true]{pointer-events:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (width <= 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (width >= 600px) and (width <= 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-inline:auto 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:-webkit-box;display:-ms-flexbox;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/*! Bundled license information:\n\nfundamental-styles/dist/pagination.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 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*/\n"] }]
         }], ctorParameters: () => [{ type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: i2.LiveAnnouncer }, { type: i6.Observable, decorators: [{
                     type: Inject,
                     args: [FD_LANGUAGE]

package/fesm2022/fundamental-ngx-core-panel.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, Directive, EventEmitter, computed, signal, inject, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, Input, HostBinding, Directive, EventEmitter, computed, signal, inject, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { RtlService } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import * as i1 from '@fundamental-ngx/core/content-density';
@@ -15,10 +15,12 @@ let panelContentUniqueId = 0;
  */
 class PanelContentDirective {
     constructor() {
-        /** @hidden */
-        this.fdPanelContentClass = true;
         /** role attribute of the host element. */
         this.role = 'region';
+        /** Whether the content should have no padding. */
+        this.noPadding = input(false, { transform: booleanAttribute });
+        /** Whether the content has transparent background. */
+        this.transparent = input(false, { transform: booleanAttribute });
         /** @hidden */
         this._defaultId = 'fd-panel-content-' + panelContentUniqueId++;
         /** @hidden */
@@ -32,19 +34,21 @@ class PanelContentDirective {
         return this._id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PanelContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: PanelContentDirective, isStandalone: true, selector: "[fd-panel-content]", inputs: { height: "height", minHeight: "minHeight", maxHeight: "maxHeight", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", role: "role", id: "id" }, host: { properties: { "class.fd-panel__content": "this.fdPanelContentClass", "style.height": "this.height", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.role": "this.role", "attr.id": "this.id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: PanelContentDirective, isStandalone: true, selector: "[fd-panel-content]", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-panel__content--no-padding": "noPadding()", "class.fd-panel__content--transparent": "transparent()", "style.height": "this.height", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.role": "this.role", "attr.id": "this.id" }, classAttribute: "fd-panel__content" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PanelContentDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[fd-panel-content]',
+                    host: {
+                        class: 'fd-panel__content',
+                        '[class.fd-panel__content--no-padding]': 'noPadding()',
+                        '[class.fd-panel__content--transparent]': 'transparent()'
+                    },
                     standalone: true
                 }]
-        }], propDecorators: { fdPanelContentClass: [{
-                type: HostBinding,
-                args: ['class.fd-panel__content']
-            }], height: [{
+        }], propDecorators: { height: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -141,6 +145,10 @@ class PanelComponent {
         this.expandId = 'fd-panel-expand-' + panelExpandUniqueId++;
         /** Output event triggered when the Expand button is clicked */
         this.expandedChange = new EventEmitter();
+        /** Whether the panel (header and content) is transparent */
+        this.transparent = input(false, { transform: booleanAttribute });
+        /** Whether the panel has no border radius */
+        this.noRadius = input(false, { transform: booleanAttribute });
         /** @hidden */
         this._buttonIcon$ = computed(() => this._expanded$() ? 'slim-arrow-down' : this._rtl$() ? 'slim-arrow-left' : 'slim-arrow-right');
         /** @hidden */
@@ -158,11 +166,11 @@ class PanelComponent {
         this.expandedChange.emit(this.expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ElementRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: PanelComponent, isStandalone: true, selector: "fd-panel", inputs: { class: "class", fixed: "fixed", id: "id", expandId: "expandId", expandAriaLabel: "expandAriaLabel", expandAriaLabelledBy: "expandAriaLabelledBy", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "panelContent", first: true, predicate: PanelContentDirective, descendants: true }], ngImport: i0, template: "<div class=\"fd-panel\" [class.fd-panel--fixed]=\"fixed\" [class]=\"class\">\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n", styles: [".fd-panel{--fdPanel_Header_Height:2.75rem;border-radius:var(--fdPanel_Border_Radius);overflow:hidden}.fd-panel,.fd-panel__content,.fd-panel__expand,.fd-panel__header,.fd-panel__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-panel:after,.fd-panel:before,.fd-panel__content:after,.fd-panel__content:before,.fd-panel__expand:after,.fd-panel__expand:before,.fd-panel__header:after,.fd-panel__header:before,.fd-panel__title:after,.fd-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel:not(:last-child){-webkit-margin-after:var(--fdPanel_Margin_Bottom);margin-block-end:var(--fdPanel_Margin_Bottom)}.fd-panel__header{height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);overflow:hidden;-webkit-padding-end:.5rem;background-color:var(--sapGroup_TitleBackground);border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);display:-webkit-box;display:-ms-flexbox;display:flex;padding-inline-end:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-panel__title{color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontHeader4Size);font-size:var(--fdPanel_Title_Font_Size);-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-panel__content{background:var(--fdPanel_Content_Background_Color);border-bottom:.0625rem solid var(--fdPanel_Content_Border_Bottom_Color);overflow:auto;padding-block:.625rem;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-panel__content.is-focus,.fd-panel__content:focus{outline:none;z-index:5}.fd-panel__content::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-panel__content::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-panel__content::-webkit-scrollbar-thumb:active,.fd-panel__content::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-panel__content[dir=rtl]::-webkit-scrollbar-corner,.fd-panel__content[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-panel__content::-webkit-scrollbar-corner,[dir=rtl] .fd-panel__content::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-panel__content[aria-hidden=true]{display:none}.fd-panel__expand{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);width:2.75rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-panel__button{font-size:1rem}.fd-panel__button[dir=rtl] .sap-icon--slim-arrow-right,[dir=rtl] .fd-panel__button .sap-icon--slim-arrow-right{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-panel--fixed .fd-panel__header{-webkit-padding-start:1rem;padding-inline-start:1rem}.fd-panel--borderless .fd-panel__header{border-bottom:none}.fd-panel--transparent .fd-panel__content{background:transparent}.fd-panel[class*=-compact],.fd-panel[class*=-condensed],[class*=-compact] .fd-panel:not([class*=-cozy]),[class*=-condensed] .fd-panel:not([class*=-cozy]){--fdPanel_Header_Height:2.5rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/panel.css:\n  (*!\n   * Fundamental Library Styles v0.38.0\n   * Copyright (c) 2024 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*/\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: PanelComponent, isStandalone: true, selector: "fd-panel", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, expandId: { classPropertyName: "expandId", publicName: "expandId", isSignal: false, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, expandAriaLabelledBy: { classPropertyName: "expandAriaLabelledBy", publicName: "expandAriaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: false, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, noRadius: { classPropertyName: "noRadius", publicName: "noRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "panelContent", first: true, predicate: PanelContentDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-panel\"\n    [class.fd-panel--fixed]=\"fixed\"\n    [class.fd-panel--transparent]=\"transparent()\"\n    [class.fd-panel--no-radius]=\"noRadius()\"\n    [class]=\"class\"\n>\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n", styles: [".fd-panel{--fdPanel_Header_Width:100%;--fdPanel_Header_Height:2.75rem;--fdPanel_Flex_Direction:column;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdPanel_Flex_Direction);flex-direction:var(--fdPanel_Flex_Direction)}.fd-panel,.fd-panel__content,.fd-panel__expand,.fd-panel__header,.fd-panel__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-panel:after,.fd-panel:before,.fd-panel__content:after,.fd-panel__content:before,.fd-panel__expand:after,.fd-panel__expand:before,.fd-panel__header:after,.fd-panel__header:before,.fd-panel__title:after,.fd-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel:not(:last-child){-webkit-margin-after:var(--fdPanel_Margin_Bottom);margin-block-end:var(--fdPanel_Margin_Bottom)}.fd-panel__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapGroup_TitleBackground);border-bottom:var(--sapGroup_TitleBorderWidth) solid var(--fdPanel_Header_Border_Color,var(--sapGroup_TitleBorderColor));border-radius:var(--fdPanel_Header_Border_Top_Left_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Header_Border_Top_Right_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Header_Border_Bottom_Right_Radius,0) var(--fdPanel_Header_Border_Bottom_Left_Radius,0);height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);min-width:var(--fdPanel_Header_Width);overflow:hidden;padding-inline:var(--fdPanel_Header_Padding_Inline_Start,0) var(--fdPanel_Header_Padding_Inline_End,.5rem);position:var(--fdPanel_Header_Position,relative);top:var(--fdPanel_Header_Position_Top,unset);width:var(--fdPanel_Header_Width)}.fd-panel__header:has(.fd-panel__button[aria-expanded=false]){--fdPanel_Header_Border_Bottom_Left_Radius:var(--fdPanel_Border_Radius);--fdPanel_Header_Border_Bottom_Right_Radius:var(--fdPanel_Border_Radius)}.fd-panel__header:has(.fd-toolbar){--fdPanel_Header_Padding_Inline_End:0}.fd-panel__header:not(:has(.fd-panel__button)){--fdPanel_Header_Padding_Inline_Start:1rem}.fd-panel__title{color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontHeaderFamily);font-size:var(--sapGroup_Title_FontSize);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:var(--fdPanel_Title_Font_Size);max-width:100%;width:100%}.fd-panel__content{background:var(--fdPanel_Content_Background_Color);border-bottom:.0625rem solid var(--fdPanel_Content_Border_Bottom_Color);border-radius:var(--fdPanel_Content_Border_Top_Left_Radius,0) var(--fdPanel_Content_Border_Top_Right_Radius,0) var(--fdPanel_Content_Border_Bottom_Right_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius,var(--fdPanel_Border_Radius));overflow:auto;padding-block:var(--fdPanel_Content_Padding_Block,.625rem);padding-inline:var(--fdPanel_Content_Padding_Inline,1rem);scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-panel__content.is-focus,.fd-panel__content:focus{outline:none;z-index:5}.fd-panel__content::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-panel__content::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-panel__content::-webkit-scrollbar-thumb:active,.fd-panel__content::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-panel__content[dir=rtl]::-webkit-scrollbar-corner,.fd-panel__content[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-panel__content::-webkit-scrollbar-corner,[dir=rtl] .fd-panel__content::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-panel__content[aria-hidden=true]{display:none}.fd-panel__content--no-padding{--fdPanel_Content_Padding_Inline:0;--fdPanel_Content_Padding_Block:0}.fd-panel__expand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);width:2.75rem}.fd-panel__button{font-size:1rem}.fd-panel__button[dir=rtl] .sap-icon--slim-arrow-right,[dir=rtl] .fd-panel__button .sap-icon--slim-arrow-right{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-panel--fixed{--fdPanel_Header_Padding_Inline_Start:1rem}.fd-panel--sticky{--fdPanel_Header_Position:sticky;--fdPanel_Header_Position_Top:0}.fd-panel--borderless{--fdPanel_Header_Border_Color:transparent}.fd-panel--transparent{--fdPanel_Content_Background_Color:transparent}.fd-panel[class*=-compact],.fd-panel[class*=-condensed],[class*=-compact] .fd-panel:not([class*=-cozy]),[class*=-condensed] .fd-panel:not([class*=-cozy]){--fdPanel_Header_Height:2.5rem}.fd-panel--transparent .fd-panel__header,.fd-panel--transparent .fd-panel__content{background:transparent}.fd-panel--no-radius .fd-panel__header,.fd-panel--no-radius .fd-panel__content,.fd-panel--no-radius .fd-panel__header ul,.fd-panel--no-radius .fd-panel__content ul{border-radius:0}.fd-panel--no-radius .fd-panel__header ul li:first-child,.fd-panel--no-radius .fd-panel__header ul li:last-child,.fd-panel--no-radius .fd-panel__content ul li:first-child,.fd-panel--no-radius .fd-panel__content ul li:last-child{border-radius:0}.fd-panel__content--no-padding{padding-block:0;padding-inline:0}.fd-panel__content--transparent{background:transparent}\n/*! Bundled license information:\n\nfundamental-styles/dist/panel.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 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*/\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], imports: [ButtonComponent], template: "<div class=\"fd-panel\" [class.fd-panel--fixed]=\"fixed\" [class]=\"class\">\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n", styles: [".fd-panel{--fdPanel_Header_Height:2.75rem;border-radius:var(--fdPanel_Border_Radius);overflow:hidden}.fd-panel,.fd-panel__content,.fd-panel__expand,.fd-panel__header,.fd-panel__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-panel:after,.fd-panel:before,.fd-panel__content:after,.fd-panel__content:before,.fd-panel__expand:after,.fd-panel__expand:before,.fd-panel__header:after,.fd-panel__header:before,.fd-panel__title:after,.fd-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel:not(:last-child){-webkit-margin-after:var(--fdPanel_Margin_Bottom);margin-block-end:var(--fdPanel_Margin_Bottom)}.fd-panel__header{height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);overflow:hidden;-webkit-padding-end:.5rem;background-color:var(--sapGroup_TitleBackground);border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);display:-webkit-box;display:-ms-flexbox;display:flex;padding-inline-end:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-panel__title{color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontHeader4Size);font-size:var(--fdPanel_Title_Font_Size);-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-panel__content{background:var(--fdPanel_Content_Background_Color);border-bottom:.0625rem solid var(--fdPanel_Content_Border_Bottom_Color);overflow:auto;padding-block:.625rem;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-panel__content.is-focus,.fd-panel__content:focus{outline:none;z-index:5}.fd-panel__content::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-panel__content::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-panel__content::-webkit-scrollbar-thumb:active,.fd-panel__content::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-panel__content[dir=rtl]::-webkit-scrollbar-corner,.fd-panel__content[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-panel__content::-webkit-scrollbar-corner,[dir=rtl] .fd-panel__content::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-panel__content[aria-hidden=true]{display:none}.fd-panel__expand{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);width:2.75rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-panel__button{font-size:1rem}.fd-panel__button[dir=rtl] .sap-icon--slim-arrow-right,[dir=rtl] .fd-panel__button .sap-icon--slim-arrow-right{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-panel--fixed .fd-panel__header{-webkit-padding-start:1rem;padding-inline-start:1rem}.fd-panel--borderless .fd-panel__header{border-bottom:none}.fd-panel--transparent .fd-panel__content{background:transparent}.fd-panel[class*=-compact],.fd-panel[class*=-condensed],[class*=-compact] .fd-panel:not([class*=-cozy]),[class*=-condensed] .fd-panel:not([class*=-cozy]){--fdPanel_Header_Height:2.5rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/panel.css:\n  (*!\n   * Fundamental Library Styles v0.38.0\n   * Copyright (c) 2024 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*/\n"] }]
+            args: [{ selector: 'fd-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], imports: [ButtonComponent], template: "<div\n    class=\"fd-panel\"\n    [class.fd-panel--fixed]=\"fixed\"\n    [class.fd-panel--transparent]=\"transparent()\"\n    [class.fd-panel--no-radius]=\"noRadius()\"\n    [class]=\"class\"\n>\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n", styles: [".fd-panel{--fdPanel_Header_Width:100%;--fdPanel_Header_Height:2.75rem;--fdPanel_Flex_Direction:column;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdPanel_Flex_Direction);flex-direction:var(--fdPanel_Flex_Direction)}.fd-panel,.fd-panel__content,.fd-panel__expand,.fd-panel__header,.fd-panel__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-panel:after,.fd-panel:before,.fd-panel__content:after,.fd-panel__content:before,.fd-panel__expand:after,.fd-panel__expand:before,.fd-panel__header:after,.fd-panel__header:before,.fd-panel__title:after,.fd-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel:not(:last-child){-webkit-margin-after:var(--fdPanel_Margin_Bottom);margin-block-end:var(--fdPanel_Margin_Bottom)}.fd-panel__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapGroup_TitleBackground);border-bottom:var(--sapGroup_TitleBorderWidth) solid var(--fdPanel_Header_Border_Color,var(--sapGroup_TitleBorderColor));border-radius:var(--fdPanel_Header_Border_Top_Left_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Header_Border_Top_Right_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Header_Border_Bottom_Right_Radius,0) var(--fdPanel_Header_Border_Bottom_Left_Radius,0);height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);min-width:var(--fdPanel_Header_Width);overflow:hidden;padding-inline:var(--fdPanel_Header_Padding_Inline_Start,0) var(--fdPanel_Header_Padding_Inline_End,.5rem);position:var(--fdPanel_Header_Position,relative);top:var(--fdPanel_Header_Position_Top,unset);width:var(--fdPanel_Header_Width)}.fd-panel__header:has(.fd-panel__button[aria-expanded=false]){--fdPanel_Header_Border_Bottom_Left_Radius:var(--fdPanel_Border_Radius);--fdPanel_Header_Border_Bottom_Right_Radius:var(--fdPanel_Border_Radius)}.fd-panel__header:has(.fd-toolbar){--fdPanel_Header_Padding_Inline_End:0}.fd-panel__header:not(:has(.fd-panel__button)){--fdPanel_Header_Padding_Inline_Start:1rem}.fd-panel__title{color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontHeaderFamily);font-size:var(--sapGroup_Title_FontSize);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:var(--fdPanel_Title_Font_Size);max-width:100%;width:100%}.fd-panel__content{background:var(--fdPanel_Content_Background_Color);border-bottom:.0625rem solid var(--fdPanel_Content_Border_Bottom_Color);border-radius:var(--fdPanel_Content_Border_Top_Left_Radius,0) var(--fdPanel_Content_Border_Top_Right_Radius,0) var(--fdPanel_Content_Border_Bottom_Right_Radius,var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius,var(--fdPanel_Border_Radius));overflow:auto;padding-block:var(--fdPanel_Content_Padding_Block,.625rem);padding-inline:var(--fdPanel_Content_Padding_Inline,1rem);scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-panel__content.is-focus,.fd-panel__content:focus{outline:none;z-index:5}.fd-panel__content::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-panel__content::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-panel__content::-webkit-scrollbar-thumb:active,.fd-panel__content::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-panel__content::-webkit-scrollbar-corner,.fd-panel__content::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-panel__content[dir=rtl]::-webkit-scrollbar-corner,.fd-panel__content[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-panel__content::-webkit-scrollbar-corner,[dir=rtl] .fd-panel__content::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-panel__content[aria-hidden=true]{display:none}.fd-panel__content--no-padding{--fdPanel_Content_Padding_Inline:0;--fdPanel_Content_Padding_Block:0}.fd-panel__expand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdPanel_Header_Height);min-height:var(--fdPanel_Header_Height);width:2.75rem}.fd-panel__button{font-size:1rem}.fd-panel__button[dir=rtl] .sap-icon--slim-arrow-right,[dir=rtl] .fd-panel__button .sap-icon--slim-arrow-right{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-panel--fixed{--fdPanel_Header_Padding_Inline_Start:1rem}.fd-panel--sticky{--fdPanel_Header_Position:sticky;--fdPanel_Header_Position_Top:0}.fd-panel--borderless{--fdPanel_Header_Border_Color:transparent}.fd-panel--transparent{--fdPanel_Content_Background_Color:transparent}.fd-panel[class*=-compact],.fd-panel[class*=-condensed],[class*=-compact] .fd-panel:not([class*=-cozy]),[class*=-condensed] .fd-panel:not([class*=-cozy]){--fdPanel_Header_Height:2.5rem}.fd-panel--transparent .fd-panel__header,.fd-panel--transparent .fd-panel__content{background:transparent}.fd-panel--no-radius .fd-panel__header,.fd-panel--no-radius .fd-panel__content,.fd-panel--no-radius .fd-panel__header ul,.fd-panel--no-radius .fd-panel__content ul{border-radius:0}.fd-panel--no-radius .fd-panel__header ul li:first-child,.fd-panel--no-radius .fd-panel__header ul li:last-child,.fd-panel--no-radius .fd-panel__content ul li:first-child,.fd-panel--no-radius .fd-panel__content ul li:last-child{border-radius:0}.fd-panel__content--no-padding{padding-block:0;padding-inline:0}.fd-panel__content--transparent{background:transparent}\n/*! Bundled license information:\n\nfundamental-styles/dist/panel.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 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*/\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ContentDensityObserver }], propDecorators: { class: [{
                 type: Input
             }], fixed: [{

package/fesm2022/fundamental-ngx-core-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-panel.mjs","sources":["../../../../libs/core/panel/panel-content/panel-content.directive.ts","../../../../libs/core/panel/panel-title/panel-title.directive.ts","../../../../libs/core/panel/panel.component.ts","../../../../libs/core/panel/panel.component.html","../../../../libs/core/panel/panel.module.ts","../../../../libs/core/panel/fundamental-ngx-core-panel.ts"],"sourcesContent":["import { Directive, HostBinding, Input } from '@angular/core';\n\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\n\nlet panelContentUniqueId = 0;\n\n/**\n * Applies the panel content style to a div element.\n *\n * ```html\n * <div fd-panel-content>Panel Content</div>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-panel-content]',\n    standalone: true\n})\nexport class PanelContentDirective {\n    /** @hidden */\n    @HostBinding('class.fd-panel__content')\n    readonly fdPanelContentClass: boolean = true;\n\n    /** Custom height of the content container. */\n    @Input()\n    @HostBinding('style.height')\n    height: Nullable<string>;\n\n    /** Custom min-height of the content container. */\n    @Input()\n    @HostBinding('style.min-height')\n    minHeight: Nullable<string>;\n\n    /** Custom max-height of the content container. */\n    @Input()\n    @HostBinding('style.max-height')\n    maxHeight: Nullable<string>;\n\n    /** aria-label attribute of the host element element. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    ariaLabel: Nullable<string>;\n\n    /** aria-labelledby attribute of the host element element. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledBy: Nullable<string>;\n\n    /** role attribute of the host element. */\n    @Input()\n    @HostBinding('attr.role')\n    role = 'region';\n\n    /** Id of the host element. */\n    @Input()\n    @HostBinding('attr.id')\n    set id(value: string | undefined) {\n        this._id = value || this._defaultId;\n    }\n\n    get id(): string {\n        return this._id;\n    }\n\n    /** @hidden */\n    private readonly _defaultId = 'fd-panel-content-' + panelContentUniqueId++;\n\n    /** @hidden */\n    private _id: string = this._defaultId;\n}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\nlet panelTitleUniqueId = 0;\n\n/**\n * Applies the panel title style to a header element. It can be used with any header level.\n *\n * ```html\n * <h5 fd-panel-title>Panel Title</h5>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-panel-title]',\n    standalone: true\n})\nexport class PanelTitleDirective {\n    /** @hidden */\n    @HostBinding('class.fd-panel__title')\n    readonly fdPanelTitleClass: boolean = true;\n\n    /** Id of the host element. */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-panel-title-' + panelTitleUniqueId++;\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    ViewEncapsulation,\n    computed,\n    inject,\n    signal\n} from '@angular/core';\n\nimport { Nullable, RtlService } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { PanelContentDirective } from './panel-content/panel-content.directive';\n\nlet panelUniqueId = 0;\nlet panelExpandUniqueId = 0;\n\n/**\n * The panel is a container for grouping and displaying information\n * Types: Expandable (default) and Fixed\n * Modes: Tablet/Mobile (default) and Desktop (compact)\n */\n@Component({\n    selector: 'fd-panel',\n    templateUrl: './panel.component.html',\n    encapsulation: ViewEncapsulation.None,\n    styleUrl: './panel.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [contentDensityObserverProviders()],\n    imports: [ButtonComponent]\n})\nexport class PanelComponent {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Whether the Panel is fixed */\n    @Input()\n    fixed: boolean;\n\n    /** Id of the panel element. */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-panel-' + panelUniqueId++;\n\n    /** Id of the expand button */\n    @Input()\n    expandId: string = 'fd-panel-expand-' + panelExpandUniqueId++;\n\n    /** aria-label of the expand button */\n    @Input()\n    expandAriaLabel: Nullable<string>;\n\n    /** aria-labelledby of the expand button */\n    @Input()\n    expandAriaLabelledBy: Nullable<string>;\n\n    /** Whether the Panel Content is expanded */\n    @Input()\n    set expanded(value: boolean) {\n        this._expanded$.set(value);\n    }\n    get expanded(): boolean {\n        return this._expanded$();\n    }\n\n    /** Output event triggered when the Expand button is clicked */\n    @Output()\n    expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** Reference to panel content */\n    @ContentChild(PanelContentDirective)\n    panelContent: Nullable<PanelContentDirective>;\n\n    /** @hidden */\n    _buttonIcon$ = computed(() =>\n        this._expanded$() ? 'slim-arrow-down' : this._rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\n    );\n\n    /** @hidden */\n    private readonly _expanded$ = signal(false);\n\n    /** @hidden */\n    private readonly _rtlService = inject(RtlService, {\n        optional: true\n    });\n\n    /** @hidden */\n    private readonly _rtl$ = computed(() => !!this._rtlService?.rtlSignal());\n\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef,\n        readonly _contentDensityObserver: ContentDensityObserver\n    ) {}\n\n    /** Methods that toggles the Panel Content */\n    toggleExpand(): void {\n        this._expanded$.update((expanded) => !expanded);\n        this.expandedChange.emit(this.expanded);\n    }\n}\n","<div class=\"fd-panel\" [class.fd-panel--fixed]=\"fixed\" [class]=\"class\">\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { PanelContentDirective } from './panel-content/panel-content.directive';\nimport { PanelTitleDirective } from './panel-title/panel-title.directive';\nimport { PanelComponent } from './panel.component';\n\n/**\n * @deprecated\n * Use direct imports of PanelComponent, PanelContentDirective, PanelTitleDirective\n */\n@NgModule({\n    imports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule],\n    exports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule]\n})\nexport class PanelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-panel.mjs","sources":["../../../../libs/core/panel/panel-content/panel-content.directive.ts","../../../../libs/core/panel/panel-title/panel-title.directive.ts","../../../../libs/core/panel/panel.component.ts","../../../../libs/core/panel/panel.component.html","../../../../libs/core/panel/panel.module.ts","../../../../libs/core/panel/fundamental-ngx-core-panel.ts"],"sourcesContent":["import { Directive, HostBinding, Input, booleanAttribute, input } from '@angular/core';\n\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\n\nlet panelContentUniqueId = 0;\n\n/**\n * Applies the panel content style to a div element.\n *\n * ```html\n * <div fd-panel-content>Panel Content</div>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-panel-content]',\n    host: {\n        class: 'fd-panel__content',\n        '[class.fd-panel__content--no-padding]': 'noPadding()',\n        '[class.fd-panel__content--transparent]': 'transparent()'\n    },\n    standalone: true\n})\nexport class PanelContentDirective {\n    /** Custom height of the content container. */\n    @Input()\n    @HostBinding('style.height')\n    height: Nullable<string>;\n\n    /** Custom min-height of the content container. */\n    @Input()\n    @HostBinding('style.min-height')\n    minHeight: Nullable<string>;\n\n    /** Custom max-height of the content container. */\n    @Input()\n    @HostBinding('style.max-height')\n    maxHeight: Nullable<string>;\n\n    /** aria-label attribute of the host element element. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    ariaLabel: Nullable<string>;\n\n    /** aria-labelledby attribute of the host element element. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledBy: Nullable<string>;\n\n    /** role attribute of the host element. */\n    @Input()\n    @HostBinding('attr.role')\n    role = 'region';\n\n    /** Whether the content should have no padding. */\n    noPadding = input(false, { transform: booleanAttribute });\n\n    /** Whether the content has transparent background. */\n    transparent = input(false, { transform: booleanAttribute });\n\n    /** Id of the host element. */\n    @Input()\n    @HostBinding('attr.id')\n    set id(value: string | undefined) {\n        this._id = value || this._defaultId;\n    }\n\n    get id(): string {\n        return this._id;\n    }\n\n    /** @hidden */\n    private readonly _defaultId = 'fd-panel-content-' + panelContentUniqueId++;\n\n    /** @hidden */\n    private _id: string = this._defaultId;\n}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\nlet panelTitleUniqueId = 0;\n\n/**\n * Applies the panel title style to a header element. It can be used with any header level.\n *\n * ```html\n * <h5 fd-panel-title>Panel Title</h5>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-panel-title]',\n    standalone: true\n})\nexport class PanelTitleDirective {\n    /** @hidden */\n    @HostBinding('class.fd-panel__title')\n    readonly fdPanelTitleClass: boolean = true;\n\n    /** Id of the host element. */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-panel-title-' + panelTitleUniqueId++;\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    ViewEncapsulation,\n    booleanAttribute,\n    computed,\n    inject,\n    input,\n    signal\n} from '@angular/core';\n\nimport { Nullable, RtlService } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { PanelContentDirective } from './panel-content/panel-content.directive';\n\nlet panelUniqueId = 0;\nlet panelExpandUniqueId = 0;\n\n/**\n * The panel is a container for grouping and displaying information\n * Types: Expandable (default) and Fixed\n * Modes: Tablet/Mobile (default) and Desktop (compact)\n */\n@Component({\n    selector: 'fd-panel',\n    templateUrl: './panel.component.html',\n    encapsulation: ViewEncapsulation.None,\n    styleUrl: './panel.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [contentDensityObserverProviders()],\n    imports: [ButtonComponent]\n})\nexport class PanelComponent {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Whether the Panel is fixed */\n    @Input()\n    fixed: boolean;\n\n    /** Id of the panel element. */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-panel-' + panelUniqueId++;\n\n    /** Id of the expand button */\n    @Input()\n    expandId: string = 'fd-panel-expand-' + panelExpandUniqueId++;\n\n    /** aria-label of the expand button */\n    @Input()\n    expandAriaLabel: Nullable<string>;\n\n    /** aria-labelledby of the expand button */\n    @Input()\n    expandAriaLabelledBy: Nullable<string>;\n\n    /** Whether the Panel Content is expanded */\n    @Input()\n    set expanded(value: boolean) {\n        this._expanded$.set(value);\n    }\n    get expanded(): boolean {\n        return this._expanded$();\n    }\n\n    /** Output event triggered when the Expand button is clicked */\n    @Output()\n    expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** Reference to panel content */\n    @ContentChild(PanelContentDirective)\n    panelContent: Nullable<PanelContentDirective>;\n\n    /** Whether the panel (header and content) is transparent */\n    transparent = input(false, { transform: booleanAttribute });\n\n    /** Whether the panel has no border radius */\n    noRadius = input(false, { transform: booleanAttribute });\n\n    /** @hidden */\n    _buttonIcon$ = computed(() =>\n        this._expanded$() ? 'slim-arrow-down' : this._rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\n    );\n\n    /** @hidden */\n    private readonly _expanded$ = signal(false);\n\n    /** @hidden */\n    private readonly _rtlService = inject(RtlService, {\n        optional: true\n    });\n\n    /** @hidden */\n    private readonly _rtl$ = computed(() => !!this._rtlService?.rtlSignal());\n\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef,\n        readonly _contentDensityObserver: ContentDensityObserver\n    ) {}\n\n    /** Methods that toggles the Panel Content */\n    toggleExpand(): void {\n        this._expanded$.update((expanded) => !expanded);\n        this.expandedChange.emit(this.expanded);\n    }\n}\n","<div\n    class=\"fd-panel\"\n    [class.fd-panel--fixed]=\"fixed\"\n    [class.fd-panel--transparent]=\"transparent()\"\n    [class.fd-panel--no-radius]=\"noRadius()\"\n    [class]=\"class\"\n>\n    <div class=\"fd-panel__header\">\n        @if (!fixed) {\n            <div class=\"fd-panel__expand\">\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    class=\"fd-panel__button\"\n                    [glyph]=\"_buttonIcon$()\"\n                    [id]=\"expandId\"\n                    [class.is-expanded]=\"expanded\"\n                    [attr.aria-expanded]=\"expanded\"\n                    [attr.aria-controls]=\"panelContent?.id\"\n                    [ariaLabel]=\"expandAriaLabel\"\n                    [attr.aria-labelledby]=\"expandAriaLabelledBy + ' ' + expandId\"\n                    [title]=\"expandAriaLabel\"\n                    (click)=\"toggleExpand()\"\n                ></button>\n            </div>\n        }\n        <ng-content select=\"[fd-panel-title]\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n    @if (expanded || fixed) {\n        <ng-content select=\"[fd-panel-content]\"></ng-content>\n    }\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { PanelContentDirective } from './panel-content/panel-content.directive';\nimport { PanelTitleDirective } from './panel-title/panel-title.directive';\nimport { PanelComponent } from './panel.component';\n\n/**\n * @deprecated\n * Use direct imports of PanelComponent, PanelContentDirective, PanelTitleDirective\n */\n@NgModule({\n    imports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule],\n    exports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule]\n})\nexport class PanelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}