@fundamental-ngx/core 0.43.8 → 0.43.10

package/fesm2020/fundamental-ngx-core-dynamic-page.mjs

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Injectable, EventEmitter, HostBinding, Output, ViewChild, Directive, ContentChild, inject, TemplateRef, Optional, Inject, ContentChildren, forwardRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Injectable, Directive, ContentChild, inject, TemplateRef, EventEmitter, HostBinding, Output, ViewChild, Optional, Inject, ContentChildren, forwardRef, NgModule } from '@angular/core';
 import * as i3$1 from '@fundamental-ngx/cdk/utils';
 import { resizeObservable, IgnoreClickOnSelectionModule } from '@fundamental-ngx/cdk/utils';
+import * as i5 from '@fundamental-ngx/core/flexible-column-layout';
+import { FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT } from '@fundamental-ngx/core/flexible-column-layout';
+import { TabListComponent } from '@fundamental-ngx/core/tabs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { distinctUntilChanged, takeUntil, debounceTime, map, observeOn } from 'rxjs/operators';
 import { BehaviorSubject, Subject, fromEvent, startWith, asyncScheduler } from 'rxjs';
-import * as i4 from '@fundamental-ngx/core/button';
-import { ButtonModule } from '@fundamental-ngx/core/button';
+import { takeUntil, distinctUntilChanged, debounceTime, map, observeOn } from 'rxjs/operators';
 import { DYNAMIC_PAGE_HEADER_TOKEN } from '@fundamental-ngx/core/shared';
 import { FD_BREADCRUMB_COMPONENT } from '@fundamental-ngx/core/breadcrumb';
 import * as i3 from '@fundamental-ngx/core/toolbar';
 import { ToolbarComponent, ToolbarModule } from '@fundamental-ngx/core/toolbar';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
-import { TabListComponent } from '@fundamental-ngx/core/tabs';
-import * as i5 from '@fundamental-ngx/core/flexible-column-layout';
-import { FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT } from '@fundamental-ngx/core/flexible-column-layout';
+import * as i4 from '@fundamental-ngx/core/button';
+import { ButtonModule } from '@fundamental-ngx/core/button';
 import * as i4$1 from '@fundamental-ngx/core/scrollbar';
-import { ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
+import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 
 const DYNAMIC_PAGE_CLASS_NAME = {
@@ -100,34 +100,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
-/**
- * Default options for core dynamic-page
- */
-class DynamicPageConfig {
-    constructor() {
-        /**
-         * aria label for expand/collapse button when the Dynamic Page is collapsed
-         */
-        this.expandLabel = 'Expand Header';
-        /**
-         * aria label for expand/collapse button when the Dynamic Page is expanded
-         */
-        this.collapseLabel = 'Collapse Header';
-        /**
-         * aria label for pin button when the Dynamic Page should be pinned
-         */
-        this.pinLabel = 'Pin Header';
-        /**
-         * aria label for pin button when the Panel should be unpinned
-         */
-        this.unpinLabel = 'Unpin Header';
-    }
+class DynamicPageFooterComponent {
 }
-DynamicPageConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicPageConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+DynamicPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DynamicPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageFooterComponent, selector: "fd-dynamic-page-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-dynamic-page-footer',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
         }] });
 
 class DynamicPageService {
@@ -154,139 +138,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Injectable
         }] });
 
-let dynamicPageSubHeaderId = 0;
-class DynamicPageSubheaderComponent {
-    /**
-     * the initial state of the header. Set to true if header should be collapsed.
-     */
-    set collapsed(collapsed) {
-        this._handleCollapsedChange(collapsed);
-    }
-    get collapsed() {
-        return this._collapsed;
-    }
-    /** @hidden */
-    constructor(_cd, _dynamicPageConfig, _dynamicPageService) {
-        this._cd = _cd;
-        this._dynamicPageConfig = _dynamicPageConfig;
-        this._dynamicPageService = _dynamicPageService;
-        /**
-         * whether the header can be collapsed. True by default. If set to false, both pin/collapse buttons disappear
-         * and the header stays visible
-         */
-        this.collapsible = true;
-        /**
-         * whether the header should be allowed to be pinned or unpinned. When set, the pin button shows up.
-         * Pinning the header will make the header stay visible and the collapse button(if present) will disappear until unpinned.
-         */
-        this.pinnable = false;
-        /**
-         * ARIA label for button when the header is collapsed
-         */
-        this.expandLabel = this._dynamicPageConfig.expandLabel;
-        /**
-         * ARIA label for button when the header is expanded
-         */
-        this.collapseLabel = this._dynamicPageConfig.collapseLabel;
-        /** Header role  */
-        this.role = 'region';
-        /**
-         * id for header
-         */
-        this.id = `fd-dynamic-page-header-id-${dynamicPageSubHeaderId++}`;
-        /**
-         * id for collapsible header
-         */
-        this.collapsibleHeaderId = `${this.id}-collapsible`;
-        /**
-         * aria label for pin state of pin button
-         */
-        this.pinAriaLabel = this._dynamicPageConfig.pinLabel;
-        /**
-         * aria label for unpin state of pin button
-         */
-        this.unpinAriaLabel = this._dynamicPageConfig.unpinLabel;
-        /** Collapse/Expand change event raised */
-        this.collapsedChange = new EventEmitter();
-        /**
-         * tracking if pin button is pinned
-         */
-        this._pinned = false;
-        /**
-         * @hidden
-         * tracking expand/collapse button
-         */
-        this._collapsed = false;
-        this._dynamicPageService.collapsed
-            .pipe(distinctUntilChanged())
-            .subscribe((collapsed) => this._handleCollapsedChange(collapsed));
-    }
-    /**
-     * toggles the state of the header and
-     * handles expanded/collapsed event
-     */
-    toggleCollapse() {
-        this._pinned = false;
-        this._handleCollapsedChange(!this._collapsed);
-    }
-    /**
-     * @hidden
-     * click action on pin button
-     */
-    togglePinned() {
-        this._pinned = !this._pinned;
-        this._dynamicPageService.pinned.next(this._pinned);
-    }
-    /** @hidden */
-    _handleCollapsedChange(collapsed) {
-        if (collapsed === this._collapsed) {
-            return;
-        }
-        this._collapsed = collapsed;
-        this._dynamicPageService.collapsed.next(collapsed);
-        this.collapsedChange.emit(this._collapsed);
-        this._cd.detectChanges();
-        this._dynamicPageService.subheaderVisibilityChange.next();
-    }
-}
-DynamicPageSubheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageSubheaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DynamicPageConfig }, { token: DynamicPageService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicPageSubheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: { collapsible: "collapsible", pinnable: "pinnable", collapsed: "collapsed", expandLabel: "expandLabel", collapseLabel: "collapseLabel", role: "role", id: "id", headerAriaLabel: "headerAriaLabel", pinAriaLabel: "pinAriaLabel", unpinAriaLabel: "unpinAriaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "pinCollapseContainer", first: true, predicate: ["pincollapseContainer"], descendants: true }], ngImport: i0, template: "<div class=\"fd-dynamic-page__collapsible-header-container\">\n    <div\n        class=\"fd-dynamic-page__collapsible-header\"\n        [attr.aria-label]=\"headerAriaLabel\"\n        [attr.aria-hidden]=\"collapsed\"\n        [attr.id]=\"collapsibleHeaderId\"\n        role=\"region\"\n        #headerContent\n    >\n        <ng-content></ng-content>\n    </div>\n    <div class=\"fd-dynamic-page__collapsible-header-visibility-container\" #pincollapseContainer>\n        <ng-container *ngIf=\"collapsible\">\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--left-gradient\"></div>\n            <div role=\"toolbar\" class=\"fd-dynamic-page__collapsible-header-visibility-container--button-group\">\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__collapse-button\"\n                    aria-haspopup=\"true\"\n                    [ariaLabel]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"id\"\n                    (click)=\"toggleCollapse()\"\n                >\n                    <i *ngIf=\"!collapsed\" class=\"sap-icon--slim-arrow-up\"></i>\n                    <i *ngIf=\"collapsed\" class=\"sap-icon--slim-arrow-down\"></i>\n                </button>\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__pin-button\"\n                    [ariaLabel]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [attr.title]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [toggled]=\"_pinned\"\n                    (click)=\"togglePinned()\"\n                    *ngIf=\"pinnable && !collapsed\"\n                >\n                    <i class=\"sap-icon--pushpin-off\"></i>\n                </button>\n            </div>\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--right-gradient\"></div>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageSubheaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fd-dynamic-page-subheader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-dynamic-page__collapsible-header-container\">\n    <div\n        class=\"fd-dynamic-page__collapsible-header\"\n        [attr.aria-label]=\"headerAriaLabel\"\n        [attr.aria-hidden]=\"collapsed\"\n        [attr.id]=\"collapsibleHeaderId\"\n        role=\"region\"\n        #headerContent\n    >\n        <ng-content></ng-content>\n    </div>\n    <div class=\"fd-dynamic-page__collapsible-header-visibility-container\" #pincollapseContainer>\n        <ng-container *ngIf=\"collapsible\">\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--left-gradient\"></div>\n            <div role=\"toolbar\" class=\"fd-dynamic-page__collapsible-header-visibility-container--button-group\">\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__collapse-button\"\n                    aria-haspopup=\"true\"\n                    [ariaLabel]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"id\"\n                    (click)=\"toggleCollapse()\"\n                >\n                    <i *ngIf=\"!collapsed\" class=\"sap-icon--slim-arrow-up\"></i>\n                    <i *ngIf=\"collapsed\" class=\"sap-icon--slim-arrow-down\"></i>\n                </button>\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__pin-button\"\n                    [ariaLabel]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [attr.title]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [toggled]=\"_pinned\"\n                    (click)=\"togglePinned()\"\n                    *ngIf=\"pinnable && !collapsed\"\n                >\n                    <i class=\"sap-icon--pushpin-off\"></i>\n                </button>\n            </div>\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--right-gradient\"></div>\n        </ng-container>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DynamicPageConfig }, { type: DynamicPageService }]; }, propDecorators: { collapsible: [{
-                type: Input
-            }], pinnable: [{
-                type: Input
-            }], collapsed: [{
-                type: Input
-            }], expandLabel: [{
-                type: Input
-            }], collapseLabel: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.role']
-            }], id: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.id']
-            }], headerAriaLabel: [{
-                type: Input
-            }], pinAriaLabel: [{
-                type: Input
-            }], unpinAriaLabel: [{
-                type: Input
-            }], collapsedChange: [{
-                type: Output
-            }], pinCollapseContainer: [{
-                type: ViewChild,
-                args: ['pincollapseContainer']
-            }] } });
-
 class DynamicPageBaseActions {
     /** @hidden */
     addClassToToolbar(_class, elementRef) {
@@ -626,20 +477,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: [DynamicPageTitleContentComponent]
             }] } });
 
-class DynamicPageFooterComponent {
+/**
+ * Default options for core dynamic-page
+ */
+class DynamicPageConfig {
+    constructor() {
+        /**
+         * aria label for expand/collapse button when the Dynamic Page is collapsed
+         */
+        this.expandLabel = 'Expand Header';
+        /**
+         * aria label for expand/collapse button when the Dynamic Page is expanded
+         */
+        this.collapseLabel = 'Collapse Header';
+        /**
+         * aria label for pin button when the Dynamic Page should be pinned
+         */
+        this.pinLabel = 'Pin Header';
+        /**
+         * aria label for pin button when the Panel should be unpinned
+         */
+        this.unpinLabel = 'Unpin Header';
+    }
 }
-DynamicPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageFooterComponent, selector: "fd-dynamic-page-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fd-dynamic-page-footer',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+DynamicPageConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicPageConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
+let dynamicPageSubHeaderId = 0;
+class DynamicPageSubheaderComponent {
+    /**
+     * the initial state of the header. Set to true if header should be collapsed.
+     */
+    set collapsed(collapsed) {
+        this._handleCollapsedChange(collapsed);
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
+    /** @hidden */
+    constructor(_cd, _dynamicPageConfig, _dynamicPageService) {
+        this._cd = _cd;
+        this._dynamicPageConfig = _dynamicPageConfig;
+        this._dynamicPageService = _dynamicPageService;
+        /**
+         * whether the header can be collapsed. True by default. If set to false, both pin/collapse buttons disappear
+         * and the header stays visible
+         */
+        this.collapsible = true;
+        /**
+         * whether the header should be allowed to be pinned or unpinned. When set, the pin button shows up.
+         * Pinning the header will make the header stay visible and the collapse button(if present) will disappear until unpinned.
+         */
+        this.pinnable = false;
+        /**
+         * ARIA label for button when the header is collapsed
+         */
+        this.expandLabel = this._dynamicPageConfig.expandLabel;
+        /**
+         * ARIA label for button when the header is expanded
+         */
+        this.collapseLabel = this._dynamicPageConfig.collapseLabel;
+        /** Header role  */
+        this.role = 'region';
+        /**
+         * id for header
+         */
+        this.id = `fd-dynamic-page-header-id-${dynamicPageSubHeaderId++}`;
+        /**
+         * id for collapsible header
+         */
+        this.collapsibleHeaderId = `${this.id}-collapsible`;
+        /**
+         * aria label for pin state of pin button
+         */
+        this.pinAriaLabel = this._dynamicPageConfig.pinLabel;
+        /**
+         * aria label for unpin state of pin button
+         */
+        this.unpinAriaLabel = this._dynamicPageConfig.unpinLabel;
+        /** Collapse/Expand change event raised */
+        this.collapsedChange = new EventEmitter();
+        /**
+         * tracking if pin button is pinned
+         */
+        this._pinned = false;
+        /**
+         * @hidden
+         * tracking expand/collapse button
+         */
+        this._collapsed = false;
+        this._dynamicPageService.collapsed
+            .pipe(distinctUntilChanged())
+            .subscribe((collapsed) => this._handleCollapsedChange(collapsed));
+    }
+    /**
+     * toggles the state of the header and
+     * handles expanded/collapsed event
+     */
+    toggleCollapse() {
+        this._pinned = false;
+        this._handleCollapsedChange(!this._collapsed);
+    }
+    /**
+     * @hidden
+     * click action on pin button
+     */
+    togglePinned() {
+        this._pinned = !this._pinned;
+        this._dynamicPageService.pinned.next(this._pinned);
+    }
+    /** @hidden */
+    _handleCollapsedChange(collapsed) {
+        if (collapsed === this._collapsed) {
+            return;
+        }
+        this._collapsed = collapsed;
+        this._dynamicPageService.collapsed.next(collapsed);
+        this.collapsedChange.emit(this._collapsed);
+        this._cd.detectChanges();
+        this._dynamicPageService.subheaderVisibilityChange.next();
+    }
+}
+DynamicPageSubheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageSubheaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DynamicPageConfig }, { token: DynamicPageService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicPageSubheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: { collapsible: "collapsible", pinnable: "pinnable", collapsed: "collapsed", expandLabel: "expandLabel", collapseLabel: "collapseLabel", role: "role", id: "id", headerAriaLabel: "headerAriaLabel", pinAriaLabel: "pinAriaLabel", unpinAriaLabel: "unpinAriaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "pinCollapseContainer", first: true, predicate: ["pincollapseContainer"], descendants: true }], ngImport: i0, template: "<div class=\"fd-dynamic-page__collapsible-header-container\">\n    <div\n        class=\"fd-dynamic-page__collapsible-header\"\n        [attr.aria-label]=\"headerAriaLabel\"\n        [attr.aria-hidden]=\"collapsed\"\n        [attr.id]=\"collapsibleHeaderId\"\n        role=\"region\"\n        #headerContent\n    >\n        <ng-content></ng-content>\n    </div>\n    <div class=\"fd-dynamic-page__collapsible-header-visibility-container\" #pincollapseContainer>\n        <ng-container *ngIf=\"collapsible\">\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--left-gradient\"></div>\n            <div role=\"toolbar\" class=\"fd-dynamic-page__collapsible-header-visibility-container--button-group\">\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__collapse-button\"\n                    aria-haspopup=\"true\"\n                    [ariaLabel]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"id\"\n                    (click)=\"toggleCollapse()\"\n                >\n                    <i *ngIf=\"!collapsed\" class=\"sap-icon--slim-arrow-up\"></i>\n                    <i *ngIf=\"collapsed\" class=\"sap-icon--slim-arrow-down\"></i>\n                </button>\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__pin-button\"\n                    [ariaLabel]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [attr.title]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [toggled]=\"_pinned\"\n                    (click)=\"togglePinned()\"\n                    *ngIf=\"pinnable && !collapsed\"\n                >\n                    <i class=\"sap-icon--pushpin-off\"></i>\n                </button>\n            </div>\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--right-gradient\"></div>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageSubheaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-dynamic-page-subheader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-dynamic-page__collapsible-header-container\">\n    <div\n        class=\"fd-dynamic-page__collapsible-header\"\n        [attr.aria-label]=\"headerAriaLabel\"\n        [attr.aria-hidden]=\"collapsed\"\n        [attr.id]=\"collapsibleHeaderId\"\n        role=\"region\"\n        #headerContent\n    >\n        <ng-content></ng-content>\n    </div>\n    <div class=\"fd-dynamic-page__collapsible-header-visibility-container\" #pincollapseContainer>\n        <ng-container *ngIf=\"collapsible\">\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--left-gradient\"></div>\n            <div role=\"toolbar\" class=\"fd-dynamic-page__collapsible-header-visibility-container--button-group\">\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__collapse-button\"\n                    aria-haspopup=\"true\"\n                    [ariaLabel]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"id\"\n                    (click)=\"toggleCollapse()\"\n                >\n                    <i *ngIf=\"!collapsed\" class=\"sap-icon--slim-arrow-up\"></i>\n                    <i *ngIf=\"collapsed\" class=\"sap-icon--slim-arrow-down\"></i>\n                </button>\n                <button\n                    fd-button\n                    class=\"fd-dynamic-page__pin-button\"\n                    [ariaLabel]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [attr.title]=\"_pinned ? unpinAriaLabel : pinAriaLabel\"\n                    [toggled]=\"_pinned\"\n                    (click)=\"togglePinned()\"\n                    *ngIf=\"pinnable && !collapsed\"\n                >\n                    <i class=\"sap-icon--pushpin-off\"></i>\n                </button>\n            </div>\n            <div class=\"fd-dynamic-page__collapsible-header-visibility-container--right-gradient\"></div>\n        </ng-container>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DynamicPageConfig }, { type: DynamicPageService }]; }, propDecorators: { collapsible: [{
+                type: Input
+            }], pinnable: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], expandLabel: [{
+                type: Input
+            }], collapseLabel: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.role']
+            }], id: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.id']
+            }], headerAriaLabel: [{
+                type: Input
+            }], pinAriaLabel: [{
+                type: Input
+            }], unpinAriaLabel: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }], pinCollapseContainer: [{
+                type: ViewChild,
+                args: ['pincollapseContainer']
+            }] } });
+
 class DynamicPageWrapperDirective {
     /** @hidden */
     constructor(elementRef) {
@@ -675,6 +675,8 @@ class DynamicPageComponent {
         this._dynamicPageService = _dynamicPageService;
         this._columnLayout = _columnLayout;
         this._dynamicPageWrapper = _dynamicPageWrapper;
+        /** Whether DynamicPage should snap on scroll */
+        this.disableSnapOnScroll = false;
         /** Page role  */
         this.role = 'region';
         /**
@@ -712,7 +714,7 @@ class DynamicPageComponent {
         this._listenOnCollapse();
         this._propagatePropertiesToChildren();
         this._setContentFooterSpacer();
-        if (this._pageSubheaderComponent?.collapsible) {
+        if (!this.disableSnapOnScroll && this._pageSubheaderComponent?.collapsible) {
             this._addScrollListeners();
         }
         if (this._columnLayout && this.autoResponsive) {
@@ -739,6 +741,10 @@ class DynamicPageComponent {
         this._setContainerPositions();
         this._sizeChangeHandle();
     }
+    /** @hidden */
+    _getScrollElement() {
+        return this._tabComponent?._scrollbar.elementRef.nativeElement || this._scrollbar?.elementRef.nativeElement;
+    }
     /** Set the positions of the tabs and content with respect to the window */
     _setContainerPositions() {
         this._setDynamicPageHeight();
@@ -795,26 +801,17 @@ class DynamicPageComponent {
     }
     /** @hidden */
     _addScrollListeners() {
-        const tabElement = this._tabComponent?.contentContainer?.nativeElement;
-        if (tabElement) {
-            this._listenOnScroll(tabElement);
-            return;
-        }
-        const contentElement = this._contentComponent.first?.elementRef?.nativeElement;
-        if (contentElement) {
-            this._listenOnScroll(contentElement);
+        const element = this._getScrollElement();
+        if (element) {
+            fromEvent(element, 'scroll')
+                .pipe(debounceTime(10), takeUntil(this._onDestroy$))
+                .subscribe(() => {
+                const collapse = !this._dynamicPageService.pinned.value &&
+                    (element.scrollTop > 0 || element.scrollHeight <= element.clientHeight);
+                this._dynamicPageService.collapsed.next(collapse);
+            });
         }
     }
-    /** @hidden */
-    _listenOnScroll(element) {
-        fromEvent(element, 'scroll')
-            .pipe(debounceTime(10), takeUntil(this._onDestroy$))
-            .subscribe(() => {
-            const collapse = !this._dynamicPageService.pinned.value &&
-                (element.scrollTop > 0 || element.scrollHeight <= element.clientHeight);
-            this._dynamicPageService.collapsed.next(collapse);
-        });
-    }
     /** @hidden Listen for window resize and adjust tab and content positions accordingly */
     _listenOnResize() {
         const listener = this._dynamicPageWrapper ? this._listenToWrapperResize() : this._listenToWindowResize();
@@ -868,7 +865,7 @@ class DynamicPageComponent {
     }
 }
 DynamicPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DynamicPageService }, { token: FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT, optional: true }, { token: DynamicPageWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageComponent, selector: "fd-dynamic-page", inputs: { role: "role", ariaLabel: "ariaLabel", background: "background", autoResponsive: "autoResponsive", size: "size", offset: "offset", expandContent: "expandContent" }, host: { properties: { "attr.role": "this.role" } }, providers: [DynamicPageService], queries: [{ propertyName: "_pageSubheaderComponent", first: true, predicate: DynamicPageSubheaderComponent, descendants: true }, { propertyName: "_headerComponent", first: true, predicate: DynamicPageHeaderComponent, descendants: true }, { propertyName: "_footerComponent", first: true, predicate: DynamicPageFooterComponent, descendants: true }, { propertyName: "_tabComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "_contentComponent", predicate: DynamicPageContentComponent, descendants: true }], viewQueries: [{ propertyName: "_dynamicPageElement", first: true, predicate: ["dynamicPageElement"], descendants: true }], ngImport: i0, template: "<section\n    #dynamicPageElement\n    class=\"fd-dynamic-page\"\n    [class.fd-dynamic-page--sm]=\"size === 'small'\"\n    [class.fd-dynamic-page--md]=\"size === 'medium'\"\n    [class.fd-dynamic-page--lg]=\"size === 'large'\"\n    [class.fd-dynamic-page--xl]=\"size === 'extra-large'\"\n    [class.fd-dynamic-page--transparent-bg]=\"background === 'transparent'\"\n    [class.fd-dynamic-page--list-bg]=\"background === 'list'\"\n    [attr.aria-label]=\"ariaLabel\"\n>\n    <header class=\"fd-dynamic-page__header\" [class.fd-dynamic-page__header--not-collapsible]=\"!_headerCollapsible\">\n        <div>\n            <div (click)=\"toggleCollapse()\" (keydown.enter)=\"toggleCollapse()\">\n                <ng-content select=\"fd-dynamic-page-header\"></ng-content>\n            </div>\n            <ng-content select=\"fd-dynamic-page-subheader\"></ng-content>\n        </div>\n    </header>\n\n    <ng-content select=\"fd-tab-list\"></ng-content>\n\n    <div fd-scrollbar *ngIf=\"!_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <div *ngIf=\"_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <footer>\n        <ng-content select=\"fd-dynamic-page-footer\"></ng-content>\n    </footer>\n</section>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dynamic-page{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.footer-spacer{height:3rem}.content-sticker{position:static}.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}.fd-dynamic-page__collapsible-header-visibility-container--button-group{z-index:6}.fd-tabs .fd-dynamic-page__content{display:block;height:auto!important}.fd-dynamic-page{height:100%}.fd-dynamic-page .fd-bar--floating-footer{z-index:6}.fd-dynamic-page .fd-tabs-custom{overflow:auto;background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7);flex:1}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__title-subtitle-container{flex:1}.fd-dynamic-page--transparent-bg .fd-tabs-custom{background-color:transparent;background-color:var(--fdDynamicPage_Content_Transparent_Background, transparent)}.fd-dynamic-page--list-bg .fd-tabs-custom{background-color:#fff;background-color:var(--fdDynamicPage_Content_List_Background, var(--sapGroup_ContentBackground, #fff))}.fd-dynamic-page--xl .fd-bar--floating-footer{margin:1rem 3rem}.fd-dynamic-page--lg .fd-bar--floating-footer,.fd-dynamic-page--md .fd-bar--floating-footer{margin:1rem 2rem}.fd-dynamic-page--sm .fd-bar--floating-footer{margin:1rem .5rem}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+DynamicPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageComponent, selector: "fd-dynamic-page", inputs: { disableSnapOnScroll: "disableSnapOnScroll", role: "role", ariaLabel: "ariaLabel", background: "background", autoResponsive: "autoResponsive", size: "size", offset: "offset", expandContent: "expandContent" }, host: { properties: { "attr.role": "this.role" } }, providers: [DynamicPageService], queries: [{ propertyName: "_pageSubheaderComponent", first: true, predicate: DynamicPageSubheaderComponent, descendants: true }, { propertyName: "_headerComponent", first: true, predicate: DynamicPageHeaderComponent, descendants: true }, { propertyName: "_footerComponent", first: true, predicate: DynamicPageFooterComponent, descendants: true }, { propertyName: "_tabComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "_contentComponent", predicate: DynamicPageContentComponent, descendants: true }], viewQueries: [{ propertyName: "_dynamicPageElement", first: true, predicate: ["dynamicPageElement"], descendants: true }, { propertyName: "_scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }], ngImport: i0, template: "<section\n    #dynamicPageElement\n    class=\"fd-dynamic-page\"\n    [class.fd-dynamic-page--sm]=\"size === 'small'\"\n    [class.fd-dynamic-page--md]=\"size === 'medium'\"\n    [class.fd-dynamic-page--lg]=\"size === 'large'\"\n    [class.fd-dynamic-page--xl]=\"size === 'extra-large'\"\n    [class.fd-dynamic-page--transparent-bg]=\"background === 'transparent'\"\n    [class.fd-dynamic-page--list-bg]=\"background === 'list'\"\n    [attr.aria-label]=\"ariaLabel\"\n>\n    <header class=\"fd-dynamic-page__header\" [class.fd-dynamic-page__header--not-collapsible]=\"!_headerCollapsible\">\n        <div>\n            <div (click)=\"toggleCollapse()\" (keydown.enter)=\"toggleCollapse()\">\n                <ng-content select=\"fd-dynamic-page-header\"></ng-content>\n            </div>\n            <ng-content select=\"fd-dynamic-page-subheader\"></ng-content>\n        </div>\n    </header>\n\n    <ng-content select=\"fd-tab-list\"></ng-content>\n\n    <div fd-scrollbar *ngIf=\"!_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <div *ngIf=\"_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <footer>\n        <ng-content select=\"fd-dynamic-page-footer\"></ng-content>\n    </footer>\n</section>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dynamic-page{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.footer-spacer{height:3rem}.content-sticker{position:static}.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}.fd-dynamic-page__collapsible-header-visibility-container--button-group{z-index:6}.fd-tabs .fd-dynamic-page__content{display:block;height:auto!important}.fd-dynamic-page{height:100%}.fd-dynamic-page .fd-bar--floating-footer{z-index:6}.fd-dynamic-page .fd-tabs-custom{overflow:auto;background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7);flex:1}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__title-subtitle-container{flex:1}.fd-dynamic-page--transparent-bg .fd-tabs-custom{background-color:transparent;background-color:var(--fdDynamicPage_Content_Transparent_Background, transparent)}.fd-dynamic-page--list-bg .fd-tabs-custom{background-color:#fff;background-color:var(--fdDynamicPage_Content_List_Background, var(--sapGroup_ContentBackground, #fff))}.fd-dynamic-page--xl .fd-bar--floating-footer{margin:1rem 3rem}.fd-dynamic-page--lg .fd-bar--floating-footer,.fd-dynamic-page--md .fd-bar--floating-footer{margin:1rem 2rem}.fd-dynamic-page--sm .fd-bar--floating-footer{margin:1rem .5rem}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-dynamic-page', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicPageService], template: "<section\n    #dynamicPageElement\n    class=\"fd-dynamic-page\"\n    [class.fd-dynamic-page--sm]=\"size === 'small'\"\n    [class.fd-dynamic-page--md]=\"size === 'medium'\"\n    [class.fd-dynamic-page--lg]=\"size === 'large'\"\n    [class.fd-dynamic-page--xl]=\"size === 'extra-large'\"\n    [class.fd-dynamic-page--transparent-bg]=\"background === 'transparent'\"\n    [class.fd-dynamic-page--list-bg]=\"background === 'list'\"\n    [attr.aria-label]=\"ariaLabel\"\n>\n    <header class=\"fd-dynamic-page__header\" [class.fd-dynamic-page__header--not-collapsible]=\"!_headerCollapsible\">\n        <div>\n            <div (click)=\"toggleCollapse()\" (keydown.enter)=\"toggleCollapse()\">\n                <ng-content select=\"fd-dynamic-page-header\"></ng-content>\n            </div>\n            <ng-content select=\"fd-dynamic-page-subheader\"></ng-content>\n        </div>\n    </header>\n\n    <ng-content select=\"fd-tab-list\"></ng-content>\n\n    <div fd-scrollbar *ngIf=\"!_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <div *ngIf=\"_tabComponent\">\n        <ng-content select=\"fd-dynamic-page-content\"></ng-content>\n    </div>\n\n    <footer>\n        <ng-content select=\"fd-dynamic-page-footer\"></ng-content>\n    </footer>\n</section>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dynamic-page{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.footer-spacer{height:3rem}.content-sticker{position:static}.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}.fd-dynamic-page__collapsible-header-visibility-container--button-group{z-index:6}.fd-tabs .fd-dynamic-page__content{display:block;height:auto!important}.fd-dynamic-page{height:100%}.fd-dynamic-page .fd-bar--floating-footer{z-index:6}.fd-dynamic-page .fd-tabs-custom{overflow:auto;background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7);flex:1}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__title-subtitle-container{flex:1}.fd-dynamic-page--transparent-bg .fd-tabs-custom{background-color:transparent;background-color:var(--fdDynamicPage_Content_Transparent_Background, transparent)}.fd-dynamic-page--list-bg .fd-tabs-custom{background-color:#fff;background-color:var(--fdDynamicPage_Content_List_Background, var(--sapGroup_ContentBackground, #fff))}.fd-dynamic-page--xl .fd-bar--floating-footer{margin:1rem 3rem}.fd-dynamic-page--lg .fd-bar--floating-footer,.fd-dynamic-page--md .fd-bar--floating-footer{margin:1rem 2rem}.fd-dynamic-page--sm .fd-bar--floating-footer{margin:1rem .5rem}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}\n"] }]
@@ -879,7 +876,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     args: [FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT]
                 }] }, { type: DynamicPageWrapperDirective, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { role: [{
+                }] }]; }, propDecorators: { disableSnapOnScroll: [{
+                type: Input
+            }], role: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -914,6 +913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], _dynamicPageElement: [{
                 type: ViewChild,
                 args: ['dynamicPageElement']
+            }], _scrollbar: [{
+                type: ViewChild,
+                args: [ScrollbarDirective]
             }] } });
 
 class DeprecatedDynamicPageCompactDirective extends DeprecatedCompactDirective {