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

package/dist/DynamicPageHeader.d.ts

@@ -0,0 +1,38 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * Header of the DynamicPage.
+ *
+ * ### Overview
+ *
+ * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family
+ * and is used to serve as header of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageHeader` can hold any layout control and has two states - expanded
+ * and collapsed (snapped). The switching between these states happens when:
+ *	- the user scrolls below its bottom margin
+ *	- the user clicks on the `DynamicPageTitle`
+ *	- through the `DynamicPage` property `headerSnapped`
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the
+ * content that is displayed.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+declare class DynamicPageHeader extends UI5Element {
+    /**
+     * Defines the content of the Dynamic Page Header.
+     *
+     * @public
+     */
+    content: HTMLElement[];
+}
+export default DynamicPageHeader;

package/dist/DynamicPageHeader.js

@@ -0,0 +1,58 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+// Template
+import DynamicPageHeaderTemplate from "./generated/templates/DynamicPageHeaderTemplate.lit.js";
+// Styles
+import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
+/**
+ * @class
+ *
+ * Header of the DynamicPage.
+ *
+ * ### Overview
+ *
+ * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family
+ * and is used to serve as header of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageHeader` can hold any layout control and has two states - expanded
+ * and collapsed (snapped). The switching between these states happens when:
+ *	- the user scrolls below its bottom margin
+ *	- the user clicks on the `DynamicPageTitle`
+ *	- through the `DynamicPage` property `headerSnapped`
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the
+ * content that is displayed.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+let DynamicPageHeader = class DynamicPageHeader extends UI5Element {
+};
+__decorate([
+    slot({ "default": true, type: HTMLElement })
+], DynamicPageHeader.prototype, "content", void 0);
+DynamicPageHeader = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-header",
+        renderer: litRender,
+        styles: DynamicPageHeaderCss,
+        template: DynamicPageHeaderTemplate,
+    })
+], DynamicPageHeader);
+DynamicPageHeader.define();
+export default DynamicPageHeader;
+//# sourceMappingURL=DynamicPageHeader.js.map

package/dist/DynamicPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeader.js","sourceRoot":"","sources":["../src/DynamicPageHeader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,WAAW;AACX,OAAO,yBAAyB,MAAM,wDAAwD,CAAC;AAE/F,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;CAQzC,CAAA;AADA;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;kDACrB;AAPnB,iBAAiB;IANtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,oBAAoB;QAC5B,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GACI,iBAAiB,CAQtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Template\nimport DynamicPageHeaderTemplate from \"./generated/templates/DynamicPageHeaderTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderCss from \"./generated/themes/DynamicPageHeader.css.js\";\n\n/**\n * @class\n *\n * Header of the DynamicPage.\n *\n * ### Overview\n *\n * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\n * and is used to serve as header of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageHeader` can hold any layout control and has two states - expanded\n * and collapsed (snapped). The switching between these states happens when:\n *\t- the user scrolls below its bottom margin\n *\t- the user clicks on the `DynamicPageTitle`\n *\t- through the `DynamicPage` property `headerSnapped`\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the\n * content that is displayed.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderCss,\n\ttemplate: DynamicPageHeaderTemplate,\n})\nclass DynamicPageHeader extends UI5Element {\n\t/**\n\t * Defines the content of the Dynamic Page Header.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n}\n\nDynamicPageHeader.define();\n\nexport default DynamicPageHeader;\n"]}

package/dist/DynamicPageHeaderActions.d.ts

@@ -0,0 +1,72 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/pushpin-off.js";
+import "@ui5/webcomponents-icons/dist/pushpin-on.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `DynamicPageHeaderActions` component is part of the `DynamicPage`
+ * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.
+ *
+ * The "pin" action is used to attach the header to a certain state (expanded/collapsed).
+ * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+declare class DynamicPageHeaderActions extends UI5Element {
+    /**
+     * Defines whether the header is pinned.
+     *
+     * @protected
+     * @default false
+     */
+    pinned: boolean;
+    /**
+     * Defines whether the pin button is hidden.
+     *
+     * @protected
+     * @default false
+     */
+    hidePinButton: boolean;
+    /**
+     * Defines whether the header is snapped.
+     *
+     * @protected
+     * @default false
+     */
+    snapped: boolean;
+    /**
+     * Contains attributes to be added to HTML to gain accessibility.
+     *
+     * @protected
+     * @default {}
+     */
+    accessibilityAttributes: {
+        controls: string;
+    };
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get arrowButtonIcon(): "slim-arrow-down" | "slim-arrow-up";
+    get pinButtonIcon(): "pushpin-off" | "pushpin-on";
+    get expandButton(): Button | null;
+    get pinButton(): ToggleButton | null;
+    get pinLabel(): string;
+    get expandLabel(): string;
+    focusExpandButton(): void;
+    focusPinButton(): void;
+    onExpandClick(): void;
+    onPinClick(): void;
+    onExpandHoverIn(): void;
+    onExpandHoverOut(): void;
+    get showPinButton(): boolean;
+}
+export default DynamicPageHeaderActions;

package/dist/DynamicPageHeaderActions.js

@@ -0,0 +1,136 @@
+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 DynamicPageHeaderActions_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import { isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/pushpin-off.js";
+import "@ui5/webcomponents-icons/dist/pushpin-on.js";
+// Template
+import DynamicPageHeaderActionsTemplate from "./generated/templates/DynamicPageHeaderActionsTemplate.lit.js";
+// Styles
+import DynamicPageHeaderActionsCss from "./generated/themes/DynamicPageHeaderActions.css.js";
+// Texts
+import { DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER, DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER, DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `DynamicPageHeaderActions` component is part of the `DynamicPage`
+ * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.
+ *
+ * The "pin" action is used to attach the header to a certain state (expanded/collapsed).
+ * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+let DynamicPageHeaderActions = DynamicPageHeaderActions_1 = class DynamicPageHeaderActions extends UI5Element {
+    static async onDefine() {
+        DynamicPageHeaderActions_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+    }
+    get arrowButtonIcon() {
+        return this.snapped ? "slim-arrow-down" : "slim-arrow-up";
+    }
+    get pinButtonIcon() {
+        if (isLegacyThemeFamily()) {
+            return "pushpin-off";
+        }
+        return this.pinned ? "pushpin-on" : "pushpin-off";
+    }
+    get expandButton() {
+        return this.shadowRoot.querySelector(".ui5-dynamic-page-header-action-expand");
+    }
+    get pinButton() {
+        return this.shadowRoot.querySelector(".ui5-dynamic-page-header-action-pin");
+    }
+    get pinLabel() {
+        return DynamicPageHeaderActions_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);
+    }
+    get expandLabel() {
+        return this.snapped
+            ? DynamicPageHeaderActions_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)
+            : DynamicPageHeaderActions_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);
+    }
+    focusExpandButton() {
+        this.expandButton?.focus();
+    }
+    focusPinButton() {
+        this.pinButton?.focus();
+    }
+    onExpandClick() {
+        this.fireEvent("expand-button-click");
+    }
+    onPinClick() {
+        this.fireEvent("pin-button-click");
+    }
+    onExpandHoverIn() {
+        this.fireEvent("expand-button-hover-in");
+    }
+    onExpandHoverOut() {
+        this.fireEvent("expand-button-hover-out");
+    }
+    get showPinButton() {
+        return !this.hidePinButton && !this.snapped;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DynamicPageHeaderActions.prototype, "pinned", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageHeaderActions.prototype, "hidePinButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageHeaderActions.prototype, "snapped", void 0);
+__decorate([
+    property({ type: Object })
+], DynamicPageHeaderActions.prototype, "accessibilityAttributes", void 0);
+DynamicPageHeaderActions = DynamicPageHeaderActions_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-header-actions",
+        renderer: litRender,
+        styles: DynamicPageHeaderActionsCss,
+        template: DynamicPageHeaderActionsTemplate,
+        dependencies: [Button, ToggleButton],
+    })
+    /**
+     * Event that is being fired by clicking on the expand button.
+     *
+     * @protected
+     */
+    ,
+    event("expand-button-click")
+    /**
+     * Event that is being fired by clicking on the pin button.
+     *
+     * @protected
+     */
+    ,
+    event("pin-button-click")
+    /**
+     * Event that is being fired by hovering over the expand button.
+     *
+     * @protected
+     */
+    ,
+    event("expand-button-hover")
+], DynamicPageHeaderActions);
+DynamicPageHeaderActions.define();
+export default DynamicPageHeaderActions;
+//# sourceMappingURL=DynamicPageHeaderActions.js.map

package/dist/DynamicPageHeaderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeaderActions.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActions.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\n\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-off.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-on.js\";\n\n// Template\nimport DynamicPageHeaderActionsTemplate from \"./generated/templates/DynamicPageHeaderActionsTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderActionsCss from \"./generated/themes/DynamicPageHeaderActions.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `DynamicPageHeaderActions` component is part of the `DynamicPage`\n * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n *\n * The \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\n * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n *\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header-actions\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\n\tdependencies: [Button, ToggleButton],\n})\n\n/**\n * Event that is being fired by clicking on the expand button.\n *\n * @protected\n */\n@event(\"expand-button-click\")\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\")\n\n/**\n * Event that is being fired by hovering over the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover\")\n\nclass DynamicPageHeaderActions extends UI5Element {\n\t/**\n\t * Defines whether the header is pinned.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tpinned!: boolean;\n\n\t/**\n\t * Defines whether the pin button is hidden.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thidePinButton!: boolean;\n\n\t/**\n\t * Defines whether the header is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped!: boolean;\n\n\t/**\n\t * Contains attributes to be added to HTML to gain accessibility.\n\t *\n\t * @protected\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: { controls: string };\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicPageHeaderActions.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tget arrowButtonIcon() {\n\t\treturn this.snapped ? \"slim-arrow-down\" : \"slim-arrow-up\";\n\t}\n\n\tget pinButtonIcon() {\n\t\tif (isLegacyThemeFamily()) {\n\t\t\treturn \"pushpin-off\";\n\t\t}\n\t\treturn this.pinned ? \"pushpin-on\" : \"pushpin-off\";\n\t}\n\n\tget expandButton(): Button | null {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-dynamic-page-header-action-expand\");\n\t}\n\n\tget pinButton(): ToggleButton | null {\n\t\treturn this.shadowRoot!.querySelector<ToggleButton>(\".ui5-dynamic-page-header-action-pin\");\n\t}\n\n\tget pinLabel() {\n\t\treturn DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);\n\t}\n\n\tget expandLabel() {\n\t\treturn this.snapped\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)\n\t\t\t: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);\n\t}\n\n\tfocusExpandButton() {\n\t\tthis.expandButton?.focus();\n\t}\n\n\tfocusPinButton() {\n\t\tthis.pinButton?.focus();\n\t}\n\n\tonExpandClick() {\n\t\tthis.fireEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireEvent(\"expand-button-hover-out\");\n\t}\n\n\tget showPinButton() {\n\t\treturn !this.hidePinButton && !this.snapped;\n\t}\n}\n\nDynamicPageHeaderActions.define();\n\nexport default DynamicPageHeaderActions;\n"]}

package/dist/DynamicPageTitle.d.ts

@@ -0,0 +1,147 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Title of the `DynamicPage`.
+ *
+ * The `DynamicPageTitle` component is part of the `DynamicPage`
+ * family and is used to serve as title of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageTitle` can hold any component and displays the most important
+ * information regarding the object that will always remain visible while scrolling.
+ *
+ * **Note:** The `actions` slot accepts any UI5 web component, but it's
+ * recommended to use `ui5-toolbar`.
+ *
+ * The user can switch between the expanded/collapsed states of the
+ * `DynamicPage` by clicking on the `DynamicPageTitle`
+ * or by using the expand/collapse visual indicators, positioned at the bottom of the
+ * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the
+ * content that is displayed.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+declare class DynamicPageTitle extends UI5Element {
+    /**
+     * Defines if the title is snapped.
+     *
+     * @protected
+     * @default false
+     */
+    snapped: boolean;
+    /**
+     * Defines if the mobileNavigationActions are shown.
+     *
+     * @private
+     */
+    mobileNavigationActions: boolean;
+    /**
+     * Indicates if the elements is on focus
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Defines the minimum width of the content area.
+     * @private
+     */
+    minContentWidth?: number;
+    /**
+     * Defines the minimum width of the actions area.
+     * @private
+     */
+    minActionsWidth?: number;
+    /**
+     * Defines the content of the Heading of the Dynamic Page.
+     *
+     * @public
+     */
+    heading: HTMLElement[];
+    /**
+     * Defines the heading that is shown only when the header is snapped.
+     *
+     * @public
+     */
+    snappedHeading: HTMLElement[];
+    /**
+     * Defines the bar with actions in the Dynamic page title.
+     *
+     * @public
+     */
+    actionsBar: HTMLElement[];
+    /**
+     * Defines the bar with navigation actions in the Dynamic page title.
+     *
+     * @public
+     */
+    navigationBar: Array<Toolbar>;
+    /**
+     * Defines the content of the Dynamic page title.
+     *
+     * @public
+     */
+    content: HTMLElement[];
+    /**
+     * Defines the content of the title that is shown only when the header is not snapped.
+     *
+     * @public
+     */
+    subheading: HTMLElement[];
+    /**
+     * Defines the content of the title that is shown only when the header is snapped.
+     *
+     * @public
+     */
+    snappedSubheading: HTMLElement[];
+    /**
+     * Defines the content of the breadcrumbs inside Dynamic Page Title.
+     *
+     * @public
+     */
+    breadcrumbs: HTMLElement[];
+    /**
+     * @private
+     */
+    interactive: boolean;
+    static i18nBundle: I18nBundle;
+    _handleResize: ResizeObserverCallback;
+    constructor();
+    static onDefine(): Promise<void>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    get styles(): {
+        content: {
+            "min-width": string | undefined;
+        };
+        actions: {
+            "min-width": string | undefined;
+        };
+    };
+    get hasContent(): boolean;
+    get headingSlotName(): "heading" | "snappedHeading";
+    get subheadingSlotName(): "subheading" | "snappedSubheading";
+    get _tabIndex(): "0" | undefined;
+    get _headerExpanded(): boolean;
+    get _ariaDescribedbyText(): string;
+    get _ariaLabelledBy(): string | undefined;
+    prepareLayoutActions(): void;
+    handleResize(): void;
+    onMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>): void;
+    onTitleClick(): void;
+    _onkeydown(e: KeyboardEvent): void;
+}
+export default DynamicPageTitle;

package/dist/DynamicPageTitle.js

@@ -0,0 +1,206 @@
+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 DynamicPageTitle_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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+// Template
+import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js";
+// Styles
+import DynamicPageTitleCss from "./generated/themes/DynamicPageTitle.css.js";
+// Texts
+import { DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Title of the `DynamicPage`.
+ *
+ * The `DynamicPageTitle` component is part of the `DynamicPage`
+ * family and is used to serve as title of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageTitle` can hold any component and displays the most important
+ * information regarding the object that will always remain visible while scrolling.
+ *
+ * **Note:** The `actions` slot accepts any UI5 web component, but it's
+ * recommended to use `ui5-toolbar`.
+ *
+ * The user can switch between the expanded/collapsed states of the
+ * `DynamicPage` by clicking on the `DynamicPageTitle`
+ * or by using the expand/collapse visual indicators, positioned at the bottom of the
+ * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the
+ * content that is displayed.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5Element {
+    constructor() {
+        super();
+        this._handleResize = this.handleResize.bind(this);
+    }
+    static async onDefine() {
+        DynamicPageTitle_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResize);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResize);
+    }
+    onBeforeRendering() {
+        this.prepareLayoutActions();
+    }
+    get styles() {
+        return {
+            content: {
+                "min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
+            },
+            actions: {
+                "min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
+            },
+        };
+    }
+    get hasContent() {
+        return !!this.content.length;
+    }
+    get headingSlotName() {
+        if (!this.snapped) {
+            return "heading";
+        }
+        return "snappedHeading";
+    }
+    get subheadingSlotName() {
+        return !this.snapped ? "subheading" : "snappedSubheading";
+    }
+    get _tabIndex() {
+        return this.interactive ? "0" : undefined;
+    }
+    get _headerExpanded() {
+        return !this.snapped;
+    }
+    get _ariaDescribedbyText() {
+        return DynamicPageTitle_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);
+    }
+    get _ariaLabelledBy() {
+        const hasAnyHeading = this[this.headingSlotName].length;
+        if (hasAnyHeading) {
+            return `${this._id}-heading`;
+        }
+    }
+    prepareLayoutActions() {
+        // all navigation/layout actions should have the NeverOverflow behavior
+        const navigationBar = this.querySelector("[ui5-toolbar][slot='navigationBar']");
+        if (!navigationBar) {
+            return;
+        }
+        navigationBar.items.forEach(action => {
+            action.overflowPriority = ToolbarItemOverflowBehavior.NeverOverflow;
+        });
+    }
+    handleResize() {
+        this.mobileNavigationActions = this.offsetWidth < 1280;
+    }
+    onMinContentWidthChange(e) {
+        const slotName = e.target?.assignedSlot?.name;
+        if (!slotName || slotName === "content") {
+            this.minContentWidth = e.detail.minWidth;
+        }
+        else if (slotName === "actionsBar") {
+            this.minActionsWidth = e.detail.minWidth;
+        }
+    }
+    onTitleClick() {
+        this.fireEvent("_toggle-title");
+    }
+    _onkeydown(e) {
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            this.fireEvent("_toggle-title");
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "snapped", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "mobileNavigationActions", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "focused", void 0);
+__decorate([
+    property({ validator: Integer })
+], DynamicPageTitle.prototype, "minContentWidth", void 0);
+__decorate([
+    property({ validator: Integer })
+], DynamicPageTitle.prototype, "minActionsWidth", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "heading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "snappedHeading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "actionsBar", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "navigationBar", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement })
+], DynamicPageTitle.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "subheading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "snappedSubheading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "breadcrumbs", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "interactive", void 0);
+DynamicPageTitle = DynamicPageTitle_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-title",
+        fastNavigation: true,
+        renderer: litRender,
+        styles: DynamicPageTitleCss,
+        template: DynamicPageTitleTemplate,
+    })
+    /**
+     * Event is fired when the title is toggled.
+     * @private
+     */
+    ,
+    event("_toggle-title")
+], DynamicPageTitle);
+DynamicPageTitle.define();
+export default DynamicPageTitle;
+//# sourceMappingURL=DynamicPageTitle.js.map