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

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,159 @@
 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.5](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.4...v2.0.0-rc.5) (2024-06-06)
+
+
+### Bug Fixes
+
+* **ui5-notification-list:** improved accessibility ([#9070](https://github.com/SAP/ui5-webcomponents/issues/9070)) ([5e62d4a](https://github.com/SAP/ui5-webcomponents/commit/5e62d4af792d7043f931b0f8f894d36a85f18395))
+* **ui5-shellbar:** improved samples accessibility ([#8847](https://github.com/SAP/ui5-webcomponents/issues/8847)) ([7563e7d](https://github.com/SAP/ui5-webcomponents/commit/7563e7d942d06865d8fcc44d9f4dc1e1d6179e97)), closes [#8821](https://github.com/SAP/ui5-webcomponents/issues/8821)
+
+
+### Code Refactoring
+
+* **ui5-link:** wrap text by default ([#9006](https://github.com/SAP/ui5-webcomponents/issues/9006)) ([1924b54](https://github.com/SAP/ui5-webcomponents/commit/1924b5457f22c428527f8be3fbdd46d9d5d7ffed))
+
+
+### BREAKING CHANGES
+
+* **ui5-link:** `wrapping-type` property default value has changed from `None` to `Normal`.
+Before: 
+```html
+<ui5-link>some very very very long link</ui5-link> <!-- would truncate the text if there is not enough space -->
+```
+
+Now:
+```html
+<ui5-link>some very very very long link</ui5-link> <!-- would let the text wrap if there is not enough space -->
+```
+
+
+
+
+
+# [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,27 +51,10 @@ 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)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
 We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).

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