@ui5/webcomponents-fiori 2.0.0-rc.3 → 2.0.0-rc.4

package/.env.testing

@@ -0,0 +1,4 @@
+# .env.testing
+VITE_BUNDLE_PATH="../../dist/bundle.esm.js"
+# take the "development" conditional exports
+NODE_ENV=development

package/CHANGELOG.md

@@ -3,6 +3,128 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.3...v2.0.0-rc.4) (2024-05-29)
+
+
+### Bug Fixes
+
+* **ui5-illustrated-mesasge:** update subtitle color ([#8986](https://github.com/SAP/ui5-webcomponents/issues/8986)) ([c9a5120](https://github.com/SAP/ui5-webcomponents/commit/c9a5120912d22980e25adbb042d308fee5201487)), closes [#8984](https://github.com/SAP/ui5-webcomponents/issues/8984)
+* **ui5-notification-list:** fix keyboard issues ([#9040](https://github.com/SAP/ui5-webcomponents/issues/9040)) ([f1c0635](https://github.com/SAP/ui5-webcomponents/commit/f1c0635d6d2b94e94b7ecc311bb49480db1fae6d))
+* **ui5-notification:** implement keyboard navigation spec ([#8975](https://github.com/SAP/ui5-webcomponents/issues/8975)) ([d68c883](https://github.com/SAP/ui5-webcomponents/commit/d68c883f527e57f75bdad5a7a421b3ab8e4efbb0))
+* **ui5-side-navigation-item:** "selected" is no longer announced on every focused item ([#9008](https://github.com/SAP/ui5-webcomponents/issues/9008)) ([8cd3f83](https://github.com/SAP/ui5-webcomponents/commit/8cd3f83e2fcc31d57ebcdd38ee2ceff36150e1d1))
+* **ui5-side-navigation-item:** click event is no longer fired twice ([#8944](https://github.com/SAP/ui5-webcomponents/issues/8944)) ([0dd36ca](https://github.com/SAP/ui5-webcomponents/commit/0dd36ca4b84c3b73fbb9c9cd44cee3d7b6e97d2a))
+
+
+### Code Refactoring
+
+* **ui5-popup:** rename after-open and after-close events to 'open' and 'close' ([#8946](https://github.com/SAP/ui5-webcomponents/issues/8946)) ([912167d](https://github.com/SAP/ui5-webcomponents/commit/912167d18cd5e365a03513defc570da5bf372715)), closes [#8461](https://github.com/SAP/ui5-webcomponents/issues/8461)
+* **ui5-shellbar:** introducing assistant slot ([#8963](https://github.com/SAP/ui5-webcomponents/issues/8963)) ([2a8c252](https://github.com/SAP/ui5-webcomponents/commit/2a8c252ecf67fce81d5ac7b2a7d949c058de9d17)), closes [#8461](https://github.com/SAP/ui5-webcomponents/issues/8461) [#7887](https://github.com/SAP/ui5-webcomponents/issues/7887)
+
+
+### Features
+
+* **ui5-dynamic-page:** introduce new component ([#7899](https://github.com/SAP/ui5-webcomponents/issues/7899)) ([3752ce7](https://github.com/SAP/ui5-webcomponents/commit/3752ce701fe915fa0b02ba2b114c40bf3b7d9123))
+* **ui5-li-notification-group:** enhance 'Expand'/'Collapse' tooltip ([#9042](https://github.com/SAP/ui5-webcomponents/issues/9042)) ([08b81c7](https://github.com/SAP/ui5-webcomponents/commit/08b81c7bd852a50f735ab8621cb3e0de69c25497))
+* **ui5-li-notification:** implement new design ([#8426](https://github.com/SAP/ui5-webcomponents/issues/8426)) ([e451cdc](https://github.com/SAP/ui5-webcomponents/commit/e451cdc3709553dcb780f637463dc1b29e8f2971))
+
+
+### BREAKING CHANGES
+
+* **ui5-notification:** Instead of `ui5-list`, `ui5-notification-list` should be used as a container for `ui5-li-notification-group` and `ui5-li-notification` components.
+
+Previously the application developers were defining notifications in this way:
+
+```
+<ui5-list>
+        <ui5-li-notification-group title-text="Group Title" >
+            <ui5-li-notification..
+```
+To support accessibility, developers should now use the `ui5-notification-list` as seen below:
+
+```
+<ui5-notification-list>
+        <ui5-li-notification-group title-text="Group Title" >
+            <ui5-li-notification..
+```
+* **ui5-shellbar:** 1. The `showCoPilot` property of the `ui5-shellbar` is removed.
+
+If you have previously used the `showCoPilot` property:
+```html
+<ui5-shellbar show-co-pilot></ui5-shellbar>
+```
+it will no longer work for the component.
+
+2. The `CoPilotAnimation` feature of the `ui5-shellbar` is removed.
+
+If you have previously used the `CoPilotAnimation` feature:
+```js
+import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"
+```
+it will no longer work for the component.
+
+3. The `copilotDomRef` getter of the `ui5-shellbar` is removed.
+
+If you have previously used the `copilotDomRef` public getter:
+```js
+shellbar.copilotDomRef
+```
+
+it will no longer work for the component.
+
+ 4. The `co-pilot-click` event of the `ui5-shellbar` is removed.
+If you have previously used the `co-pilot-click` public event:
+```js
+shellbar.addEventListener("ui5-co-pilot-click", function(event) {
+	...
+});
+```
+
+it will no longer work for the component.
+
+You can achieve similar functionality with the new slot:
+
+HTML:
+```html
+<ui5-shellbar>
+  <ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
+</ui5-shellbar>
+```
+
+JavaScript:
+```js
+assistant.addEventListener("click", function (event) {
+	const toggleButton = event.target;
+	toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
+});
+
+```
+* **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`.
+Previously the application developers could subscribe to the events as follows:
+```ts
+popup.addEventListener("after-open", function() {
+	//...
+});
+popup.addEventListener("after-close", function() {
+	//...
+});
+```
+
+Now the application developers should include the ui5-bar as follows:
+```ts
+popup.addEventListener("open", function() {
+	//...
+});
+
+popup.addEventListener("close", function() {
+	//...
+});
+
+```
+
+
+
+
+
 # [2.0.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2024-05-10)
 
 

package/README.md

@@ -18,7 +18,8 @@ such as a common header (ShellBar).
 | Illustrated Message                       | `ui5-illustrated-message`      | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`       |
 | Media Gallery                             | `ui5-media-gallery`            | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`             |
 | Media Gallery Item                        | `ui5-media-gallery-item`       | comes with  `ui5-media-gallery`                                       |
-| Notification List Item                    | `ui5-li-notifcation`           | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`      |
+| Notification List                         | `ui5-notification-list`        | `import "@ui5/webcomponents-fiori/dist/NotifcationList.js";`          |
+| Notification List Item                    | `ui5-li-notification`          | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`      |
 | Notification Group List Item              | `ui5-li-notification-group`    | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` |
 | Notification Action                       | `ui5-notification-action`      | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";`       |
 | Page                                      | `ui5-page`                     | `import "@ui5/webcomponents-fiori/dist/Page.js";`                     |
@@ -50,23 +51,6 @@ import "@ui5/webcomponents-fiori/dist/Assets.js";
 |------------------|-------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
 | `i18n`, `themes` | `@ui5/webcomponents-fiori/dist/Assets.js` | Theming parameters and translations for the components  <br/><br/> *Automatically imports also:<br/> `@ui5/webcomponents/dist/Assets.js`* |
 
-## Provided features
-
-
-| Affects        | Feature Import                                               | Description                                                                                             |
-|----------------|--------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `ui5-shellbar` | `@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js` | Support for a better (but bigger in size) animation for the "co-pilot" button in the shellbar component |
-
-### Shellbar CoPilot animation
-
-```js
-import "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js";
-```
-
-By default, the `ui5-shellbar` CoPilot button ships with a simple animation for better performance.
-Importing the module above enables the detailed but more resource-intensive animation instead.
-
-
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)

package/dist/DynamicPage.d.ts

@@ -0,0 +1,163 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import DynamicPageHeader from "./DynamicPageHeader.js";
+import DynamicPageTitle from "./DynamicPageTitle.js";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.
+ *
+ * The component consist of several components:
+ *
+ * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.
+ * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.
+ * - `Content area` - a generic container, which can have a single UI5 layout.
+ * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.
+ *
+ * ### Usage
+ *
+ * Use the `DynamicPage` if you need to have a title, that is always visible
+ * and a header, that has configurable Expanding/Snapping functionality.
+ * If you don't need the Expanding/Snapping functionality it is better to use the
+ * `ui5-page` as a lighter component.
+ *
+ * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),
+ * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user
+ * scroll through the content.
+ *
+ * ## Notes:
+ *
+ * - Snapping of the `DynamicPageTitle` is not supported in the following case:
+ *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.
+ *
+ * ### Responsive Behavior
+ *
+ * Dynamic page web component implements the responsive paddings design.
+ *
+ * ### Keyboard Handling
+ *
+ *
+ * ### Basic Navigation
+ *
+ * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.
+ * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).
+ * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).
+ *
+ * ### Fast Navigation
+ * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * In order to use this functionality, you need to import the following module:
+ *
+ * - `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/DynamicPage.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ * @csspart content - Used to style the content of the component
+ * @csspart fit-content - Used to style the fit content container of the component.
+ * @csspart footer - Used to style the footer of the component
+ */
+declare class DynamicPage extends UI5Element {
+    /**
+     * Defines if the pin button is hidden.
+     *
+     * @default false
+     * @public
+     */
+    hidePinButton: boolean;
+    /**
+     * Defines if the header is pinned.
+     *
+     * @default false
+     * @public
+     */
+    headerPinned: boolean;
+    /**
+     * Defines if the footer is shown.
+     *
+     * @default false
+     * @public
+     */
+    showFooter: boolean;
+    /**
+     * Defines the current media query size.
+     *
+     * @private
+     */
+    mediaRange: string;
+    /**
+     * Defines the content of the Dynamic Page.
+     *
+     * @public
+     */
+    content: HTMLElement[];
+    /**
+     * Defines the title HTML Element.
+     *
+     * @public
+     */
+    titleArea: Array<DynamicPageTitle>;
+    /**
+     * Defines the header HTML Element.
+     *
+     * @public
+     */
+    headerArea: Array<DynamicPageHeader>;
+    /**
+     * Defines the footer HTML Element.
+     *
+     * @public
+     */
+    footerArea: HTMLElement[];
+    static i18nBundle: I18nBundle;
+    skipSnapOnScroll: boolean;
+    showHeaderInStickArea: boolean;
+    _headerSnapped: boolean;
+    _updateMediaRange: ResizeObserverCallback;
+    constructor();
+    static onDefine(): Promise<void>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    get dynamicPageTitle(): DynamicPageTitle | null;
+    get dynamicPageHeader(): DynamicPageHeader | null;
+    get scrollContainer(): HTMLElement | null;
+    get headerActions(): DynamicPageHeaderActions | null;
+    get actionsInTitle(): boolean;
+    get headerInTitle(): boolean;
+    get headerInContent(): boolean;
+    get _headerLabel(): string;
+    get _headerExpanded(): boolean;
+    get _accAttributesForHeaderActions(): {
+        controls: string;
+    };
+    get headerTabIndex(): -1 | 0;
+    get headerAriaHidden(): boolean;
+    get hasHeading(): boolean;
+    get headerSnapped(): boolean;
+    /**
+     * Defines if the header is snapped.
+     *
+     * @default false
+     * @public
+     */
+    set headerSnapped(snapped: boolean);
+    snapOnScroll(): void;
+    snapTitleByScroll(): void;
+    onExpandClick(): Promise<void>;
+    onPinClick(): Promise<void>;
+    onToggleTitle(): Promise<void>;
+    _toggleHeader(): Promise<void>;
+    onExpandHoverIn(): Promise<void>;
+    onExpandHoverOut(): Promise<void>;
+    updateMediaRange(): void;
+}
+export default DynamicPage;

package/dist/DynamicPage.js

@@ -0,0 +1,298 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DynamicPage_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
+// Template
+import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js";
+// Styles
+import DynamicPageCss from "./generated/themes/DynamicPage.css.js";
+import DynamicPageHeader from "./DynamicPageHeader.js";
+import DynamicPageTitle from "./DynamicPageTitle.js";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+// Texts
+import { DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER, DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, } from "./generated/i18n/i18n-defaults.js";
+const SCROLL_DEBOUNCE_RATE = 5; // ms
+const SCROLL_THRESHOLD = 10; // px
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.
+ *
+ * The component consist of several components:
+ *
+ * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.
+ * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.
+ * - `Content area` - a generic container, which can have a single UI5 layout.
+ * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.
+ *
+ * ### Usage
+ *
+ * Use the `DynamicPage` if you need to have a title, that is always visible
+ * and a header, that has configurable Expanding/Snapping functionality.
+ * If you don't need the Expanding/Snapping functionality it is better to use the
+ * `ui5-page` as a lighter component.
+ *
+ * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),
+ * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user
+ * scroll through the content.
+ *
+ * ## Notes:
+ *
+ * - Snapping of the `DynamicPageTitle` is not supported in the following case:
+ *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.
+ *
+ * ### Responsive Behavior
+ *
+ * Dynamic page web component implements the responsive paddings design.
+ *
+ * ### Keyboard Handling
+ *
+ *
+ * ### Basic Navigation
+ *
+ * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.
+ * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).
+ * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).
+ *
+ * ### Fast Navigation
+ * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * In order to use this functionality, you need to import the following module:
+ *
+ * - `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/DynamicPage.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ * @csspart content - Used to style the content of the component
+ * @csspart fit-content - Used to style the fit content container of the component.
+ * @csspart footer - Used to style the footer of the component
+ */
+let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
+    constructor() {
+        super();
+        this.skipSnapOnScroll = false;
+        this.showHeaderInStickArea = false;
+        this._updateMediaRange = this.updateMediaRange.bind(this);
+    }
+    static async onDefine() {
+        DynamicPage_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._updateMediaRange);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._updateMediaRange);
+    }
+    onBeforeRendering() {
+        if (this.dynamicPageTitle) {
+            this.dynamicPageTitle.snapped = this._headerSnapped;
+            this.dynamicPageTitle.interactive = this.hasHeading;
+        }
+    }
+    get dynamicPageTitle() {
+        return this.querySelector("[ui5-dynamic-page-title]");
+    }
+    get dynamicPageHeader() {
+        return this.querySelector("[ui5-dynamic-page-header]");
+    }
+    get scrollContainer() {
+        return this.shadowRoot.querySelector(".ui5-dynamic-page-scroll-container");
+    }
+    get headerActions() {
+        return this.shadowRoot.querySelector("ui5-dynamic-page-header-actions");
+    }
+    get actionsInTitle() {
+        return this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;
+    }
+    get headerInTitle() {
+        return !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);
+    }
+    get headerInContent() {
+        return !this.showHeaderInStickArea && !this.headerInTitle;
+    }
+    get _headerLabel() {
+        return this._headerSnapped
+            ? DynamicPage_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)
+            : DynamicPage_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);
+    }
+    get _headerExpanded() {
+        return !this._headerSnapped;
+    }
+    get _accAttributesForHeaderActions() {
+        return {
+            controls: `${this._id}-header`,
+        };
+    }
+    get headerTabIndex() {
+        return (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;
+    }
+    get headerAriaHidden() {
+        return (this._headerSnapped || this.showHeaderInStickArea);
+    }
+    get hasHeading() {
+        return this.headerArea.length > 0;
+    }
+    get headerSnapped() {
+        return this._headerSnapped;
+    }
+    /**
+     * Defines if the header is snapped.
+     *
+     * @default false
+     * @public
+     */
+    set headerSnapped(snapped) {
+        if (snapped !== this._headerSnapped) {
+            this._toggleHeader();
+        }
+    }
+    snapOnScroll() {
+        debounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);
+    }
+    snapTitleByScroll() {
+        if (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {
+            return;
+        }
+        const scrollTop = this.scrollContainer.scrollTop;
+        const lastHeaderSnapped = this._headerSnapped;
+        if (this.skipSnapOnScroll) {
+            this.skipSnapOnScroll = false;
+            return;
+        }
+        if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
+            this.showHeaderInStickArea = false;
+            this._headerSnapped = true;
+        }
+        else {
+            this._headerSnapped = false;
+        }
+        if (lastHeaderSnapped !== this._headerSnapped) {
+            this.fireEvent("title-toggle");
+        }
+        this.dynamicPageTitle.snapped = this._headerSnapped;
+    }
+    async onExpandClick() {
+        this._toggleHeader();
+        this.fireEvent("title-toggle");
+        await renderFinished();
+        this.headerActions?.focusExpandButton();
+        announce(this._headerLabel, InvisibleMessageMode.Polite);
+    }
+    async onPinClick() {
+        this.headerPinned = !this.headerPinned;
+        this.fireEvent("pin-button-toggle");
+        await renderFinished();
+        this.headerActions?.focusPinButton();
+    }
+    async onToggleTitle() {
+        if (!this.hasHeading) {
+            return;
+        }
+        this._toggleHeader();
+        this.fireEvent("title-toggle");
+        await renderFinished();
+        this.dynamicPageTitle.focus();
+    }
+    async _toggleHeader() {
+        if (this.scrollContainer.scrollTop === SCROLL_THRESHOLD) {
+            this.scrollContainer.scrollTop = 0;
+        }
+        this.showHeaderInStickArea = !this.showHeaderInStickArea;
+        this._headerSnapped = !this._headerSnapped;
+        this.skipSnapOnScroll = true;
+        await renderFinished();
+        if (this._headerSnapped && this.scrollContainer.scrollTop < SCROLL_THRESHOLD) {
+            this.scrollContainer.scrollTop = SCROLL_THRESHOLD;
+        }
+    }
+    async onExpandHoverIn() {
+        this.dynamicPageTitle?.setAttribute("hovered", "");
+        await renderFinished();
+    }
+    async onExpandHoverOut() {
+        this.dynamicPageTitle?.removeAttribute("hovered");
+        await renderFinished();
+    }
+    updateMediaRange() {
+        this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DynamicPage.prototype, "hidePinButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPage.prototype, "headerPinned", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPage.prototype, "showFooter", void 0);
+__decorate([
+    property()
+], DynamicPage.prototype, "mediaRange", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement })
+], DynamicPage.prototype, "content", void 0);
+__decorate([
+    slot({ type: DynamicPageTitle })
+], DynamicPage.prototype, "titleArea", void 0);
+__decorate([
+    slot({ type: DynamicPageHeader })
+], DynamicPage.prototype, "headerArea", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPage.prototype, "footerArea", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPage.prototype, "_headerSnapped", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPage.prototype, "headerSnapped", null);
+DynamicPage = DynamicPage_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page",
+        renderer: litRender,
+        styles: DynamicPageCss,
+        template: DynamicPageTemplate,
+        dependencies: [DynamicPageHeaderActions],
+    })
+    /**
+     * Fired when the pin header button is toggled.
+     *
+     * @public
+     */
+    ,
+    event("pin-button-toggle")
+    /**
+     * Fired when the expand/collapse area of the title is toggled.
+     *
+     * @public
+     */
+    ,
+    event("title-toggle")
+], DynamicPage);
+DynamicPage.define();
+export default DynamicPage;
+//# sourceMappingURL=DynamicPage.js.map

package/dist/DynamicPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,uDAAuD,CAAC;AAC7E,OAAO,oBAAoB,MAAM,4DAA4D,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,OAAO,QAAQ,MAAM,+CAA+C,CAAC;AAErE,WAAW;AACX,OAAO,mBAAmB,MAAM,kDAAkD,CAAC;AAEnF,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,QAAQ;AACR,OAAO,EACN,uCAAuC,EACvC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C,MAAM,oBAAoB,GAAG,CAAC,CAAC,CAAC,KAAK;AACrC,MAAM,gBAAgB,GAAG,EAAE,CAAC,CAAC,KAAK;AAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAuBH,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,UAAU;IA8EnC;QACC,KAAK,EAAE,CAAC;QATT,qBAAgB,GAAG,KAAK,CAAC;QACzB,0BAAqB,GAAG,KAAK,CAAC;QAU7B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,aAAW,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IAC1E,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACtD,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACxD,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;YACpD,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;SACpD;IACF,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,aAAa,CAAmB,0BAA0B,CAAC,CAAC;IACzE,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,aAAa,CAAoB,2BAA2B,CAAC,CAAC;IAC3E,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,oCAAoC,CAAC,CAAC;IAC1F,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAA2B,iCAAiC,CAAC,CAAC;IACpG,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,YAAY,CAAC;IAC/E,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;IAClF,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IAC3D,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,cAAc;YACzB,CAAC,CAAC,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,sCAAsC,CAAC;YACxE,CAAC,CAAC,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED,IAAI,8BAA8B;QACjC,OAAO;YACN,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS;SAC9B,CAAC;IACH,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IAEH,IAAI,aAAa,CAAC,OAAgB;QACjC,IAAI,OAAO,KAAK,IAAI,CAAC,cAAc,EAAE;YACpC,IAAI,CAAC,aAAa,EAAE,CAAC;SACrB;IACF,CAAC;IAED,YAAY;QACX,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,oBAAoB,CAAC,CAAC;IAChE,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,EAAE;YAC3E,OAAO;SACP;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,eAAgB,CAAC,SAAS,CAAC;QAClD,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC;QAE9C,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,OAAO;SACP;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,CAAC,MAAM,EAAE;YACtE,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC3B;aAAM;YACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC5B;QAED,IAAI,iBAAiB,KAAK,IAAI,CAAC,cAAc,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrD,CAAC;IAED,KAAK,CAAC,aAAa;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/B,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;IAED,KAAK,CAAC,UAAU;QACf,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;QACpC,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,KAAK,CAAC,aAAa;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACrB,OAAO;SACP;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/B,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAiB,CAAC,KAAK,EAAE,CAAC;IAChC,CAAC;IAED,KAAK,CAAC,aAAa;QAClB,IAAI,IAAI,CAAC,eAAgB,CAAC,SAAS,KAAK,gBAAgB,EAAE;YACzD,IAAI,CAAC,eAAgB,CAAC,SAAS,GAAG,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,qBAAqB,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC;QACzD,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAE3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAgB,CAAC,SAAS,GAAG,gBAAgB,EAAE;YAC9E,IAAI,CAAC,eAAgB,CAAC,SAAS,GAAG,gBAAgB,CAAC;SACnD;IACF,CAAC;IAED,KAAK,CAAC,eAAe;QACpB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnD,MAAM,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACrB,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QAClD,MAAM,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAG,CAAC,WAAW,CAAC,CAAC;IAChH,CAAC;CACD,CAAA;AA7PA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACJ;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACL;AASvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACP;AAQrB;IADC,QAAQ,EAAE;+CACS;AAQpB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACrB;AAQxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;8CACG;AAQpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC;+CACI;AAQtC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;+CACD;AAQ3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACH;AAgGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAK3B;AA9KI,WAAW;IAtBhB,aAAa,CAAC;QACd,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;QAC7B,YAAY,EAAE,CAAC,wBAAwB,CAAC;KACxC,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,mBAAmB,CAAC;IAE3B;;;;OAIG;;IACF,KAAK,CAAC,cAAc,CAAC;GAEhB,WAAW,CAqQhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./generated/templates/DynamicPageTemplate.lit.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: litRender,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\")\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\")\n\nclass DynamicPage extends UI5Element {\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton!: boolean;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned!: boolean;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter!: boolean;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange!: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped!: boolean;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget scrollContainer(): HTMLElement | null {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-dynamic-page-scroll-container\");\n\t}\n\n\tget headerActions(): DynamicPageHeaderActions | null {\n\t\treturn this.shadowRoot!.querySelector<DynamicPageHeaderActions>(\"ui5-dynamic-page-header-actions\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header`,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\t\t} else {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireEvent(\"title-toggle\");\n\t\t}\n\n\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t}\n\n\tasync onExpandClick() {\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}