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

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.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./generated/templates/DynamicPageTemplate.lit.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: litRender,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\")\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\")\n\nclass DynamicPage extends UI5Element {\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton!: boolean;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned!: boolean;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter!: boolean;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange!: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped!: boolean;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tDynamicPage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget scrollContainer(): HTMLElement | null {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-dynamic-page-scroll-container\");\n\t}\n\n\tget headerActions(): DynamicPageHeaderActions | null {\n\t\treturn this.shadowRoot!.querySelector<DynamicPageHeaderActions>(\"ui5-dynamic-page-header-actions\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header`,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\t\t} else {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireEvent(\"title-toggle\");\n\t\t}\n\n\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t}\n\n\tasync onExpandClick() {\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis._toggleHeader();\n\t\tthis.fireEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

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;