@ui5/webcomponents-fiori 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/DynamicPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type 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\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.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: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\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 = false;\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 = false;\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 = false;\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!: DefaultSlot<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!: Slot<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!: Slot<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!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\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\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget topAreaHeight() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\treturn this._headerSnapped ? titleHeight : headerHeight + titleHeight;\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 footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\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 && !this.hasSnappedTitleOnMobile;\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 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\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.hasHeading ? this._headerLabel : undefined;\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\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\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\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer!.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer!.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"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.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer!.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\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\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.topAreaHeight, end: this.endAreaHeight });\n\t\t// textareas and similar elements appear \"in view\" even when partially\n\t\t// hidden behind sticky header/footer.\n\t\t// manual scroll brings them fully into view.\n\t\t// another issue is that browsers do not reflect dynamic changes of scroll-padding\n\t\trequestAnimationFrame(() => {\n\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

package/dist/DynamicPageHeader.d.ts

@@ -0,0 +1,57 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { DefaultSlot } 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.
+ *
+ * ### Accessibility
+ *
+ * The `DynamicPageHeader` provides an accessible label for the header region.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+declare class DynamicPageHeader extends UI5Element {
+    /**
+     * Defines the content of the Dynamic Page Header.
+     *
+     * @public
+     */
+    content: DefaultSlot<HTMLElement>;
+    /**
+     * Defines if the header is snapped.
+     *
+     * @default false
+     * @private
+     */
+    _snapped: boolean;
+    static i18nBundle: I18nBundle;
+    /**
+     * Returns the aria-label for the header region.
+     * @internal
+     */
+    get _headerRegionAriaLabel(): string;
+}
+export default DynamicPageHeader;

package/dist/DynamicPageHeader.js

@@ -0,0 +1,93 @@
+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 DynamicPageHeader_1;
+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-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+// Template
+import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js";
+// Styles
+import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
+// i18n
+import { DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER, DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, } from "./generated/i18n/i18n-defaults.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.
+ *
+ * ### Accessibility
+ *
+ * The `DynamicPageHeader` provides an accessible label for the header region.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+let DynamicPageHeader = DynamicPageHeader_1 = class DynamicPageHeader extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the header is snapped.
+         *
+         * @default false
+         * @private
+         */
+        this._snapped = false;
+    }
+    /**
+     * Returns the aria-label for the header region.
+     * @internal
+     */
+    get _headerRegionAriaLabel() {
+        const defaultText = this._snapped
+            ? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER
+            : DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;
+        return DynamicPageHeader_1.i18nBundle.getText(defaultText);
+    }
+};
+__decorate([
+    slot({ "default": true, type: HTMLElement })
+], DynamicPageHeader.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageHeader.prototype, "_snapped", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], DynamicPageHeader, "i18nBundle", void 0);
+DynamicPageHeader = DynamicPageHeader_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-header",
+        renderer: jsxRenderer,
+        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,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAInE,WAAW;AACX,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E,OAAO;AACP,OAAO,EACN,uCAAuC,EACvC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QASC;;;;;WAKG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAgBlB,CAAC;IAXA;;;OAGG;IACH,IAAI,sBAAsB;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ;YAChC,CAAC,CAAC,sCAAsC;YACxC,CAAC,CAAC,uCAAuC,CAAC;QAE3C,OAAO,mBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC;CACD,CAAA;AAzBA;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;kDACV;AASnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACX;AAGV;IADN,IAAI,CAAC,0BAA0B,CAAC;2CACH;AAnBzB,iBAAiB;IANtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GACI,iBAAiB,CAgCtB;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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n// Template\nimport DynamicPageHeaderTemplate from \"./DynamicPageHeaderTemplate.js\";\n\n// Styles\nimport DynamicPageHeaderCss from \"./generated/themes/DynamicPageHeader.css.js\";\n\n// i18n\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.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 * ### Accessibility\n *\n * The `DynamicPageHeader` provides an accessible label for the header region.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header\",\n\trenderer: jsxRenderer,\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!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_snapped = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Returns the aria-label for the header region.\n\t * @internal\n\t */\n\tget _headerRegionAriaLabel(): string {\n\t\tconst defaultText = this._snapped\n\t\t\t? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER\n\t\t\t: DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER;\n\n\t\treturn DynamicPageHeader.i18nBundle.getText(defaultText);\n\t}\n}\n\nDynamicPageHeader.define();\n\nexport default DynamicPageHeader;\n"]}

package/dist/DynamicPageHeaderActions.d.ts

@@ -0,0 +1,77 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
+import type ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.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";
+type DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttributes, "controls">;
+/**
+ * @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 {
+    eventDetails: {
+        "expand-button-click": void;
+        "pin-button-click": void;
+        "expand-button-hover-in": void;
+        "expand-button-hover-out": void;
+    };
+    /**
+     * 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: DynamicPageHeaderActionsAccessibilityAttributes;
+    static i18nBundle: I18nBundle;
+    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,181 @@
+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-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 "./DynamicPageHeaderActionsTemplate.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, DYNAMIC_PAGE_ARIA_LABEL_UNPIN_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 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the header is pinned.
+         *
+         * @protected
+         * @default false
+         */
+        this.pinned = false;
+        /**
+         * Defines whether the pin button is hidden.
+         *
+         * @protected
+         * @default false
+         */
+        this.hidePinButton = false;
+        /**
+         * Defines whether the header is snapped.
+         *
+         * @protected
+         * @default false
+         */
+        this.snapped = false;
+        /**
+         * Contains attributes to be added to HTML to gain accessibility.
+         *
+         * @protected
+         * @default {}
+         */
+        this.accessibilityAttributes = {};
+    }
+    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 this.pinned
+            ? DynamicPageHeaderActions_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER)
+            : 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.fireDecoratorEvent("expand-button-click");
+    }
+    onPinClick() {
+        this.fireDecoratorEvent("pin-button-click");
+    }
+    onExpandHoverIn() {
+        this.fireDecoratorEvent("expand-button-hover-in");
+    }
+    onExpandHoverOut() {
+        this.fireDecoratorEvent("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);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], DynamicPageHeaderActions, "i18nBundle", void 0);
+DynamicPageHeaderActions = DynamicPageHeaderActions_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-header-actions",
+        renderer: jsxRenderer,
+        styles: DynamicPageHeaderActionsCss,
+        template: DynamicPageHeaderActionsTemplate,
+    })
+    /**
+     * Event that is being fired by clicking on the expand button.
+     *
+     * @protected
+     */
+    ,
+    event("expand-button-click", {
+        bubbles: true,
+    })
+    /**
+     * Event that is being fired by clicking on the pin button.
+     *
+     * @protected
+     */
+    ,
+    event("pin-button-click", {
+        bubbles: true,
+    })
+    /**
+     * Event that is being fired by hovering in the expand button.
+     *
+     * @protected
+     */
+    ,
+    event("expand-button-hover-in", {
+        bubbles: true,
+    })
+    /**
+     * Event that is being fired by hovering out the expand button.
+     *
+     * @protected
+     */
+    ,
+    event("expand-button-hover-out", {
+        bubbles: true,
+    })
+], 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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.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 \"./DynamicPageHeaderActionsTemplate.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\tDYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttributes, \"controls\">;\n\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: jsxRenderer,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\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\tbubbles: true,\n})\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\", {\n\tbubbles: true,\n})\n\n/**\n * Event that is being fired by hovering in the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-in\", {\n\tbubbles: true,\n})\n/**\n * Event that is being fired by hovering out the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-out\", {\n\tbubbles: true,\n})\nclass DynamicPageHeaderActions extends UI5Element {\n\teventDetails!: {\n\t\t\"expand-button-click\": void;\n\t\t\"pin-button-click\": void;\n\t\t\"expand-button-hover-in\": void;\n\t\t\"expand-button-hover-out\": void;\n\t}\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 = false;\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 = false;\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 = false;\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: DynamicPageHeaderActionsAccessibilityAttributes = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\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 this.pinned\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER)\n\t\t\t: 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.fireDecoratorEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireDecoratorEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireDecoratorEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireDecoratorEvent(\"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/DynamicPageHeaderActionsTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+export default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageHeaderActionsTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+export default function DynamicPageHeaderActionsTemplate() {
+    return (_jsx("div", { class: "ui5-dynamic-page-header-actions-root", children: _jsxs("div", { class: "ui5-dynamic-page-header-actions--wrapper", children: [_jsx(Button, { class: "ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand", onClick: this.onExpandClick, icon: this.arrowButtonIcon, accessibleName: this.expandLabel, accessibilityAttributes: this.accessibilityAttributes, tooltip: this.expandLabel, onMouseOver: this.onExpandHoverIn, onMouseOut: this.onExpandHoverOut }), this.showPinButton &&
+                    _jsx(ToggleButton, { class: "ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin", onClick: this.onPinClick, icon: this.pinButtonIcon, pressed: this.pinned, accessibilityAttributes: this.accessibilityAttributes, accessibleName: this.pinLabel, tooltip: this.pinLabel })] }) }));
+}
+//# sourceMappingURL=DynamicPageHeaderActionsTemplate.js.map

package/dist/DynamicPageHeaderActionsTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeaderActionsTemplate.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActionsTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AAGnE,MAAM,CAAC,OAAO,UAAU,gCAAgC;IACvD,OAAO,CACN,cAAK,KAAK,EAAC,sCAAsC,YAChD,eAAK,KAAK,EAAC,0CAA0C,aACpD,KAAC,MAAM,IACN,KAAK,EAAC,sEAAsE,EAC5E,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,UAAU,EAAE,IAAI,CAAC,gBAAgB,GAChC,EACD,IAAI,CAAC,aAAa;oBAClB,KAAC,YAAY,IACZ,KAAK,EAAC,mEAAmE,EACzE,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,cAAc,EAAE,IAAI,CAAC,QAAQ,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,GACrB,IAEE,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-header-actions-root\">\n\t\t\t<div class=\"ui5-dynamic-page-header-actions--wrapper\">\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand\"\n\t\t\t\t\tonClick={this.onExpandClick}\n\t\t\t\t\ticon={this.arrowButtonIcon}\n\t\t\t\t\taccessibleName={this.expandLabel}\n\t\t\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\t\t\ttooltip={this.expandLabel}\n\t\t\t\t\tonMouseOver={this.onExpandHoverIn}\n\t\t\t\t\tonMouseOut={this.onExpandHoverOut}\n\t\t\t\t/>\n\t\t\t\t{this.showPinButton &&\n\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\tclass=\"ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin\"\n\t\t\t\t\t\tonClick={this.onPinClick}\n\t\t\t\t\t\ticon={this.pinButtonIcon}\n\t\t\t\t\t\tpressed={this.pinned}\n\t\t\t\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\t\t\t\taccessibleName={this.pinLabel}\n\t\t\t\t\t\ttooltip={this.pinLabel}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicPageHeaderTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPageHeader from "./DynamicPageHeader.js";
+export default function DynamicPageHeaderTemplate(this: DynamicPageHeader): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageHeaderTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function DynamicPageHeaderTemplate() {
+    return (_jsx("div", { class: "ui5-dynamic-page-header-root", role: "region", "aria-label": this._headerRegionAriaLabel, children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=DynamicPageHeaderTemplate.js.map

package/dist/DynamicPageHeaderTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeaderTemplate.js","sourceRoot":"","sources":["../src/DynamicPageHeaderTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,cAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,sBAAsB,YAC9F,gBAAa,GACR,CACN,CAAC;AACH,CAAC","sourcesContent":["import type DynamicPageHeader from \"./DynamicPageHeader.js\";\n\nexport default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-header-root\" role=\"region\" aria-label={this._headerRegionAriaLabel}>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicPageTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPage from "./DynamicPage.js";
+export default function DynamicPageTemplate(this: DynamicPage): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+export default function DynamicPageTemplate() {
+    return (_jsxs("div", { class: "ui5-dynamic-page-root", children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("header", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, "aria-label": this.headerAriaLabel, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
+                                _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), this.actionsInTitle && headerActions.call(this)] }), this.headerInContent &&
+                        _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { part: "content", class: "ui5-dynamic-page-content", onFocusIn: this.onContentFocusIn, onFocusOut: this.onContentFocusOut, children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
+                                    _jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", children: _jsx("slot", { name: "footerArea" }) })] }));
+}
+function headerActions() {
+    if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
+        return (_jsx(DynamicPageHeaderActions, { snapped: this.headerSnapped, pinned: this.headerPinned, hidePinButton: this.hidePinButton, "onui5-expand-button-click": this.onExpandClick, "onui5-pin-button-click": this.onPinClick, "onui5-expand-button-hover-in": this.onExpandHoverIn, "onui5-expand-button-hover-out": this.onExpandHoverOut }));
+    }
+}
+//# sourceMappingURL=DynamicPageTemplate.js.map

package/dist/DynamicPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,aACjC,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,kBACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,gBACZ,IAAI,CAAC,eAAe,wBACZ,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACxC,EAER,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAElC,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,YACjD,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,+BACN,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\">\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<header\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</header>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div\n\t\t\t\t\tpart=\"content\"\n\t\t\t\t\tclass=\"ui5-dynamic-page-content\"\n\t\t\t\t\tonFocusIn={this.onContentFocusIn}\n\t\t\t\t\tonFocusOut={this.onContentFocusOut}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\">\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this.hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}