@fundamental-ngx/core 0.65.0 → 0.65.1-rc.1

package/fesm2022/fundamental-ngx-core-overflow-layout.mjs

@@ -23,15 +23,15 @@ class OverflowExpandDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowExpandDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowExpandDirective, isStandalone: true, selector: "[fdOverflowExpand]", inputs: { fdOverflowExpandItems: "fdOverflowExpandItems" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowExpandDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowExpandDirective, isStandalone: true, selector: "[fdOverflowExpand]", inputs: { fdOverflowExpandItems: "fdOverflowExpandItems" }, providers: [
             {
                 provide: FD_OVERFLOW_EXPAND,
                 useExisting: OverflowExpandDirective
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowExpandDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowExpandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowExpand]',
@@ -84,10 +84,10 @@ class OverflowItemContainerRefDirective {
     ngOnDestroy() {
         this._viewRef?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowItemContainerRefDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowItemContainerRefDirective, isStandalone: true, selector: "[fdOverflowItemContainerRef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowItemContainerRefDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowItemContainerRefDirective, isStandalone: true, selector: "[fdOverflowItemContainerRef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowItemContainerRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowItemContainerRefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowItemContainerRef]',
@@ -142,15 +142,15 @@ class OverflowItemRefDirective {
     setOverflowItem(item) {
         this.overflowItem = item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowItemRefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowItemRefDirective, isStandalone: true, selector: "[fdOverflowItemRef]", inputs: { item: ["fdOverflowItemRef", "item"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowItemRefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowItemRefDirective, isStandalone: true, selector: "[fdOverflowItemRef]", inputs: { item: ["fdOverflowItemRef", "item"] }, providers: [
             {
                 provide: FD_OVERFLOW_ITEM_REF,
                 useExisting: OverflowItemRefDirective
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowItemRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowItemRefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowItemRef]',
@@ -186,10 +186,10 @@ class OverflowLayoutItemContainerDirective {
         /** @hidden */
         this._initialClass = 'fd-overflow-layout__item';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutItemContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowLayoutItemContainerDirective, isStandalone: true, selector: "[fdOverflowLayoutItemContainer]", inputs: { last: "last", first: "first", softHidden: "softHidden" }, host: { properties: { "class.fd-overflow-layout__item--last": "this.last", "class.fd-overflow-layout__item--first": "this.first", "class.fd-overflow-layout__item--soft-hidden": "this.softHidden", "class": "this._initialClass" } }, queries: [{ propertyName: "containerRef", first: true, predicate: OverflowItemContainerRefDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutItemContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowLayoutItemContainerDirective, isStandalone: true, selector: "[fdOverflowLayoutItemContainer]", inputs: { last: "last", first: "first", softHidden: "softHidden" }, host: { properties: { "class.fd-overflow-layout__item--last": "this.last", "class.fd-overflow-layout__item--first": "this.first", "class.fd-overflow-layout__item--soft-hidden": "this.softHidden", "class": "this._initialClass" } }, queries: [{ propertyName: "containerRef", first: true, predicate: OverflowItemContainerRefDirective, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutItemContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutItemContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowLayoutItemContainer]',
@@ -279,10 +279,10 @@ class OverflowLayoutPopoverContentDirective {
     ngOnDestroy() {
         this._keyboardEventsManager?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutPopoverContentDirective, deps: [{ token: FD_OVERFLOW_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowLayoutPopoverContentDirective, isStandalone: true, selector: "[fdOverflowLayoutPopoverContent]", inputs: { items: "items" }, host: { listeners: { "keyup": "keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutPopoverContentDirective, deps: [{ token: FD_OVERFLOW_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowLayoutPopoverContentDirective, isStandalone: true, selector: "[fdOverflowLayoutPopoverContent]", inputs: { items: "items" }, host: { listeners: { "keyup": "keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutPopoverContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutPopoverContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowLayoutPopoverContent]',
@@ -509,10 +509,10 @@ class OverflowLayoutService {
             });
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutService, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutService, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
@@ -716,8 +716,8 @@ class OverflowLayoutComponent {
             .withVerticalOrientation()
             .skipPredicate((item) => !item.navigable || item.hidden);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: OverflowLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OverflowLayoutComponent, isStandalone: true, selector: "fd-overflow-layout", inputs: { maxVisibleItems: "maxVisibleItems", navigationTrigger: "navigationTrigger", showMorePosition: "showMorePosition", renderShowMoreButton: ["renderShowMoreButton", "renderShowMoreButton", booleanAttribute], reverseHiddenItems: "reverseHiddenItems", enableKeyboardNavigation: "enableKeyboardNavigation", ariaRole: "ariaRole", moreItemsButtonText: "moreItemsButtonText" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount", hiddenItemsChange: "hiddenItemsChange" }, host: { properties: { "class": "this._initialClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: OverflowLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: OverflowLayoutComponent, isStandalone: true, selector: "fd-overflow-layout", inputs: { maxVisibleItems: "maxVisibleItems", navigationTrigger: "navigationTrigger", showMorePosition: "showMorePosition", renderShowMoreButton: ["renderShowMoreButton", "renderShowMoreButton", booleanAttribute], reverseHiddenItems: "reverseHiddenItems", enableKeyboardNavigation: "enableKeyboardNavigation", ariaRole: "ariaRole", moreItemsButtonText: "moreItemsButtonText" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount", hiddenItemsChange: "hiddenItemsChange" }, host: { properties: { "class": "this._initialClass" } }, providers: [
             {
                 provide: FD_OVERFLOW_CONTAINER,
                 useExisting: OverflowLayoutComponent
@@ -725,7 +725,7 @@ class OverflowLayoutComponent {
             OverflowLayoutService
         ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF, descendants: true }, { propertyName: "_focusableOverflowItems", predicate: FD_OVERFLOW_FOCUSABLE_ITEM, descendants: true }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "@if (renderShowMoreButton && showMorePosition === 'left') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items-wrapper\">\n        <div class=\"fd-overflow-layout__items\" #itemsWrapper [attr.role]=\"ariaRole\">\n            @for (item of _allItems; track item.templateRef) {\n                <div\n                    fdOverflowLayoutItemContainer\n                    [first]=\"item.first\"\n                    [last]=\"item.last\"\n                    [softHidden]=\"item.softHidden\"\n                    [attr.role]=\"ariaRole === 'list' ? 'listitem' : null\"\n                >\n                    <ng-container *fdOverflowItemContainerRef>\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: item.hidden,\n                                index: item.index,\n                                first: item.first,\n                                last: item.last,\n                                globalIndex: item.globalIndex,\n                                injector: item.injector\n                            }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n@if (renderShowMoreButton && showMorePosition === 'right') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'inline-flex' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n                        {{ ('coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length })() }}\n                    </button>\n                </fd-popover-control>\n                <ng-template fdPopoverBody>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        @for (item of _hiddenItems; track item) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last,\n                                    globalIndex: item.globalIndex,\n                                    injector: item.injector\n                                }\"\n                            ></ng-template>\n                        }\n                    </div>\n                </ng-template>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout{display:flex;align-items:center;width:100%;justify-content:space-between}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{display:flex;align-items:center;display:inline-flex}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{display:flex;align-items:center;flex-shrink:0}.fd-overflow-layout__more .fd-breadcrumb__item{margin-block-start:.1875rem}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{position:relative}.fd-overflow-layout__items-wrapper{display:inline-flex}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{display:block;white-space:normal;max-width:19.5rem}.fd-overflow-layout__item--soft-hidden{opacity:0!important;position:absolute!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: ["last", "first", "softHidden"] }, { kind: "directive", type: OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: PopoverBodyDirective, selector: "[fdPopoverBody]" }, { kind: "directive", type: OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-overflow-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -828,15 +828,15 @@ class OverflowLayoutFocusableItemDirective {
     focus() {
         this.elementRef.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutFocusableItemDirective, deps: [{ token: OverflowLayoutComponent }, { token: FD_OVERFLOW_ITEM, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowLayoutFocusableItemDirective, isStandalone: true, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: { focusable: "focusable", navigable: "navigable" }, host: { listeners: { "focus": "_onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutFocusableItemDirective, deps: [{ token: OverflowLayoutComponent }, { token: FD_OVERFLOW_ITEM, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowLayoutFocusableItemDirective, isStandalone: true, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: { focusable: "focusable", navigable: "navigable" }, host: { listeners: { "focus": "_onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
             {
                 provide: FD_OVERFLOW_FOCUSABLE_ITEM,
                 useExisting: OverflowLayoutFocusableItemDirective
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutFocusableItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutFocusableItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]',
@@ -911,15 +911,15 @@ class OverflowLayoutItemDirective {
         this._overflowItemRef?.setElementRef(this.elmRef);
         this._overflowItemRef?.setOverflowItem(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowLayoutItemDirective, isStandalone: true, selector: "[fdOverflowLayoutItem]", inputs: { forceVisibility: "forceVisibility" }, outputs: { hiddenChange: "hiddenChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: OverflowLayoutItemDirective, isStandalone: true, selector: "[fdOverflowLayoutItem]", inputs: { forceVisibility: "forceVisibility" }, outputs: { hiddenChange: "hiddenChange" }, providers: [
             {
                 provide: FD_OVERFLOW_ITEM,
                 useExisting: OverflowLayoutItemDirective
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdOverflowLayoutItem]',
@@ -949,8 +949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         OverflowLayoutFocusableItemDirective
  */
 class OverflowLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent,
             OverflowItemRefDirective,
             OverflowExpandDirective,
             OverflowLayoutItemDirective,
@@ -965,9 +965,9 @@ class OverflowLayoutModule {
             OverflowLayoutPopoverContentDirective,
             OverflowLayoutItemContainerDirective,
             OverflowLayoutFocusableItemDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: OverflowLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -91,10 +91,10 @@ class PaginationService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationService, decorators: [{
             type: Injectable
         }] });
 
@@ -351,10 +351,10 @@ class PaginationComponent {
             totalCount: this.totalItems
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: i2.LiveAnnouncer }, { token: i3.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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                    (\n                        'corePagination.inputAriaLabel'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                    )()\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                    (\n                        'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                    )()\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.41.9\n   * Copyright (c) 2026 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: ["id"], 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", "disabled", "unitDescription", "independent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.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", "ariaHasPopup", "ariaDescription", "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: i2.LiveAnnouncer }, { token: i3.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", 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                    (\n                        'corePagination.inputAriaLabel'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                    )()\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                    (\n                        'corePagination.labelAfterInputMobile'\n                        | fdTranslate: { pageNumber: currentPage, totalCount: _totalPages }\n                    )()\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.41.9\n   * Copyright (c) 2026 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: ["id"], 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", "disabled", "unitDescription", "independent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.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", "ariaHasPopup", "ariaDescription", "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: "22.0.5", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-pagination', providers: [PaginationService, contentDensityObserverProviders()], host: {
                         class: 'fd-pagination',
@@ -415,11 +415,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Use direct imports of components and directives.
  */
 class PaginationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: PaginationModule, imports: [PaginationComponent], exports: [PaginationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationModule, imports: [PaginationComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: PaginationModule, imports: [PaginationComponent], exports: [PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationModule, imports: [PaginationComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PaginationComponent],

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

@@ -50,10 +50,10 @@ class PanelContentDirective {
     get id() {
         return this._resolvedId();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: PanelContentDirective, isStandalone: true, selector: "[fd-panel-content]", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, 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 }, _idInput: { classPropertyName: "_idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-panel__content--no-padding": "noPadding()", "class.fd-panel__content--transparent": "transparent()", "style.height": "height()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.role": "role()", "attr.id": "_resolvedId()" }, classAttribute: "fd-panel__content" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: PanelContentDirective, isStandalone: true, selector: "[fd-panel-content]", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, 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 }, _idInput: { classPropertyName: "_idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-panel__content--no-padding": "noPadding()", "class.fd-panel__content--transparent": "transparent()", "style.height": "height()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.role": "role()", "attr.id": "_resolvedId()" }, classAttribute: "fd-panel__content" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelContentDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -89,10 +89,10 @@ class PanelTitleDirective {
         /** Whether the title text wraps instead of truncating with ellipsis. Enabled by default to satisfy WCAG 1.4.10 Reflow. */
         this.wrap = input(true, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: PanelTitleDirective, isStandalone: true, selector: "[fd-panel-title]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-panel__title--wrap": "wrap()", "attr.id": "id()" }, classAttribute: "fd-panel__title" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: PanelTitleDirective, isStandalone: true, selector: "[fd-panel-title]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-panel__title--wrap": "wrap()", "attr.id": "id()" }, classAttribute: "fd-panel__title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -156,10 +156,10 @@ class PanelComponent {
     toggleExpand() {
         this.expanded.update((expanded) => !expanded);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", 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: "22.0.5", type: PanelComponent, isStandalone: true, selector: "fd-panel", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, expandId: { classPropertyName: "expandId", publicName: "expandId", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabelledBy: { classPropertyName: "expandAriaLabelledBy", publicName: "expandAriaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, 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: { expanded: "expandedChange" }, host: { properties: { "attr.id": "id()" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "panelContent", first: true, predicate: PanelContentDirective, descendants: true, isSignal: 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);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:.75rem}.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%;-webkit-padding-start:.25rem;padding-inline-start:.25rem}.fd-panel__title--wrap{overflow:visible;text-overflow:clip;white-space:normal}.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.41.9\n   * Copyright (c) 2026 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: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", 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: "22.2.1", type: PanelComponent, isStandalone: true, selector: "fd-panel", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, expandId: { classPropertyName: "expandId", publicName: "expandId", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabelledBy: { classPropertyName: "expandAriaLabelledBy", publicName: "expandAriaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, 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: { expanded: "expandedChange" }, host: { properties: { "attr.id": "id()" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "panelContent", first: true, predicate: PanelContentDirective, descendants: true, isSignal: 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);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:.75rem}.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%;-webkit-padding-start:.25rem;padding-inline-start:.25rem}.fd-panel__title--wrap{overflow:visible;text-overflow:clip;white-space:normal}.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.41.9\n   * Copyright (c) 2026 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: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], imports: [ButtonComponent], host: {
                         '[attr.id]': 'id()'
@@ -171,11 +171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Use direct imports of PanelComponent, PanelContentDirective, PanelTitleDirective
  */
 class PanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: PanelModule, imports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule], exports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelModule, imports: [PanelComponent, ContentDensityModule, ContentDensityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: PanelModule, imports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule], exports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelModule, imports: [PanelComponent, ContentDensityModule, ContentDensityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PanelComponent, PanelContentDirective, PanelTitleDirective, ContentDensityModule],