feat(ui5-dynamic-page): poc

packages/fiori/bundle.common.js

@@ -6,6 +6,10 @@ import "./dist/illustrations/AllIllustrations.js";
 
 // FIORI components
 import Bar from "./dist/Bar.js";
+import DynamicPage from "./dist/DynamicPage.js";
+import DynamicPageHeader from "./dist/DynamicPageHeader.js";
+import DynamicPageTitle from "./dist/DynamicPageTitle.js";
+import DynamicPageHeaderActions from "./dist/DynamicPageHeaderActions.js";
 import DynamicSideContent from "./dist/DynamicSideContent.js";
 import FilterItem from "./dist/FilterItem.js";
 import FilterItemOption from "./dist/FilterItemOption.js";

packages/fiori/src/DynamicPage.hbs

@@ -0,0 +1,25 @@
+<div class="{{classes.root}}">
+  <div class="{{classes.headerWrapper}}">
+    <slot name="titleArea"></slot>
+    {{#unless headerSnapped}}
+      <slot name="headerArea"></slot>
+    {{/unless}}
+
+    <ui5-dynamic-page-header-actions
+      ?snapped="{{headerSnapped}}"
+      ?pinned="{{headerPinned}}"
+      @ui5-expand-button-click={{onExpandClick}}
+      @ui5-pin-button-click={{onPinClick}}
+    ></ui5-dynamic-page-header-actions>
+  </div>
+
+  <div class="{{classes.content}}">
+    <slot></slot>
+  </div>
+
+  {{#if showFooter}}
+    <div class="{{classes.footer}}">
+      <slot name="footer"></slot>
+    </div>
+  {{/if}}
+</div>

packages/fiori/src/DynamicPage.ts

@@ -0,0 +1,101 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Template
+import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js";
+
+// Styles
+import DynamicPageCss from "./generated/themes/DynamicPage.css.js";
+
+import DynamicPageHeader from "./DynamicPageHeader.js";
+import DynamicPageTitle from "./DynamicPageTitle.js";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * @constructor
+ * @alias sap.ui.webc.fiori.DynamicPage
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-dynamic-page
+ * @public
+ */
+@customElement({
+	tag: "ui5-dynamic-page",
+	renderer: litRender,
+	styles: DynamicPageCss,
+	template: DynamicPageTemplate,
+	dependencies: [DynamicPageHeader, DynamicPageTitle, DynamicPageHeaderActions],
+})
+class DynamicPage extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		DynamicPage.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
+	}
+
+	@property({ type: Boolean })
+	headerSnapped!: boolean;
+
+	@property({ type: Boolean })
+	headerPinned!: boolean;
+
+	@property({ type: Boolean })
+	showFooter!: boolean;
+
+	@slot({ "default": true, type: HTMLElement })
+	content!: HTMLElement[];
+
+	@slot({ type: DynamicPageTitle })
+	titleArea!: HTMLElement[];
+
+	@slot({ type: DynamicPageHeader })
+	headerArea!: HTMLElement[];
+
+	@slot({ type: HTMLElement })
+	footer!: HTMLElement[];
+
+	get classes() {
+		return {
+			root: {
+				"ui5-dynamic-page-root": true,
+			},
+			headerWrapper: {
+				"ui5-dynamic-page-title-header-wrapper": true,
+			},
+			content: {
+				"ui5-dynamic-page-content": true,
+			},
+			footer: {
+				"ui5-dynamic-page-footer": true,
+			},
+		};
+	}
+
+	get dynamicPageTitle() {
+		return this.querySelector<DynamicPageTitle>("[ui5-dynamic-page-title]");
+	}
+
+	onExpandClick() {
+		this.headerSnapped = !this.headerSnapped;
+		if (this.dynamicPageTitle) {
+			this.dynamicPageTitle.snapped = this.headerSnapped;
+		}
+	}
+
+	onPinClick() {
+		this.headerPinned = !this.headerPinned;
+	}
+}
+
+DynamicPage.define();
+
+export default DynamicPage;

packages/fiori/src/DynamicPageHeader.hbs

@@ -0,0 +1,3 @@
+<div class="{{classes.root}}">
+    <slot></slot>
+</div>

packages/fiori/src/DynamicPageHeader.ts

@@ -0,0 +1,52 @@
+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";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Template
+import DynamicPageHeaderTemplate from "./generated/templates/DynamicPageHeaderTemplate.lit.js";
+
+// Styles
+import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * @constructor
+ * @alias sap.ui.webc.fiori.DynamicPageHeader
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-dynamic-page-header
+ * @public
+ */
+@customElement({
+	tag: "ui5-dynamic-page-header",
+	renderer: litRender,
+	styles: DynamicPageHeaderCss,
+	template: DynamicPageHeaderTemplate,
+})
+class DynamicPageHeader extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		DynamicPageHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	@slot({ "default": true, type: HTMLElement })
+	content!: HTMLElement[];
+	get classes() {
+		return {
+			root: {
+				"ui5-dynamic-page-header-root": true,
+			},
+		};
+	}
+}
+
+DynamicPageHeader.define();
+
+export default DynamicPageHeader;

packages/fiori/src/DynamicPageHeaderActions.hbs

@@ -0,0 +1,8 @@
+<div class="{{classes.root}}">
+    <div class="{{classes.wrapper}}">
+        <ui5-button @click="{{onExpandClick}}" icon="{{arrowButtonIcon}}"></ui5-button>
+        {{#unless snapped}}
+            <ui5-button @click="{{onPinClick}}" icon="{{pinButtonIcon}}"></ui5-button>
+        {{/unless}}
+    </div>
+</div>

packages/fiori/src/DynamicPageHeaderActions.ts

@@ -0,0 +1,80 @@
+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 type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Template
+import DynamicPageHeaderActionsTemplate from "./generated/templates/DynamicPageHeaderActionsTemplate.lit.js";
+
+// Styles
+import DynamicPageHeaderActionsCss from "./generated/themes/DynamicPageHeaderActions.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * @constructor
+ * @alias sap.ui.webc.fiori.DynamicPageHeaderActions
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-dynamic-page-header-actions
+ * @public
+ */
+@customElement({
+	tag: "ui5-dynamic-page-header-actions",
+	renderer: litRender,
+	styles: DynamicPageHeaderActionsCss,
+	template: DynamicPageHeaderActionsTemplate,
+})
+
+@event("expand-button-click")
+@event("pin-button-click")
+
+class DynamicPageHeaderActions extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		DynamicPageHeaderActions.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	@property({ type: Boolean })
+	pinned!: boolean;
+
+	@property({ type: Boolean })
+	snapped!: boolean;
+
+	get classes() {
+		return {
+			root: {
+				"ui5-dynamic-page-header-actions-root": true,
+			},
+			wrapper: {
+				"ui5-dynamic-page-header-actions--wrapper": true,
+			},
+		};
+	}
+
+	get arrowButtonIcon() {
+		return this.snapped ? "slim-arrow-up" : "slim-arrow-down";
+	}
+
+	get pinButtonIcon() {
+		return this.pinned ? "pushpin-off" : "pushpin-on";
+	}
+
+	onExpandClick() {
+		this.fireEvent("expand-button-click");
+	}
+
+	onPinClick() {
+		this.fireEvent("pin-button-click");
+	}
+}
+
+DynamicPageHeaderActions.define();
+
+export default DynamicPageHeaderActions;

packages/fiori/src/DynamicPageTitle.hbs

@@ -0,0 +1,33 @@
+<div class="{{classes.root}}">
+  <div class="{{classes.breadcrumbs}}">
+    {{#if hasBreadcrumb}}
+      <div>
+        <slot name="breadcrumbs"></slot>
+      </div>
+    {{/if}}
+
+    {{#if mobileNavigationActions}}
+      <slot name="navigationActions"></slot>
+    {{/if}}
+  </div>
+
+  <div class="{{classes.wrapper}}">
+    <div class="{{classes.heading}}">
+      <slot name="{{headingSlotName}}"></slot>
+    </div>
+
+    <div class="{{classes.content}}">
+      <slot></slot>
+    </div>
+
+    <div class="{{classes.actions}}">
+      <slot name="actions"></slot>
+      {{#unless mobileNavigationActions}}
+        <div class="{{classes.actionsSeparator}}"></div>
+        <slot name="navigationActions"></slot>
+      {{/unless}}
+    </div>
+  </div>
+
+  <slot name="{{contentSlotName}}"></slot>
+</div>