@ui5/webcomponents-fiori 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/src/MediaGallery.js

@@ -35,7 +35,7 @@ const COLUMNS_COUNT = {
 const metadata = {
 	tag: "ui5-media-gallery",
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
@@ -45,7 +45,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.IMediaGalleryItem[]}
+		 * @type {sap.ui.webc.fiori.IMediaGalleryItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -56,7 +56,7 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * If set to <code>true</code>, all thumbnails are rendered in a scrollable container.
 		 * If <code>false</code>, only up to five thumbnails are rendered, followed by
@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Auto"
 		 * @public
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		 * <li><code>Right</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryMenuHorizontalAlign}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign}
 		 * @defaultvalue "Left"
 		 * @public
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryMenuVerticalAlign}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign}
 		 * @defaultvalue "Bottom"
 		 * @public
 		 */
@@ -153,7 +153,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Vertical"
 		 * @private
 		 */
@@ -182,11 +182,11 @@ const metadata = {
 			defaultValue: 0,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * Fired when selection is changed by user interaction.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#selection-change
+		 * @event sap.ui.webc.fiori.MediaGallery#selection-change
 		 * @param {HTMLElement} item the selected item.
 		 * @public
 		 */
@@ -199,7 +199,7 @@ const metadata = {
 		/**
 		 * Fired when the thumbnails overflow button is clicked.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#overflow-click
+		 * @event sap.ui.webc.fiori.MediaGallery#overflow-click
 		 * @public
 		 */
 		"overflow-click": {},
@@ -209,7 +209,7 @@ const metadata = {
 		 * The display area is the central area that contains
 		 * the enlarged content of the currently selected item.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#display-area-click
+		 * @event sap.ui.webc.fiori.MediaGallery#display-area-click
 		 * @public
 		 */
 		"display-area-click": {},
@@ -253,8 +253,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.MediaGallery
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.MediaGallery
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-media-gallery
  * @appenddocs MediaGalleryItem
  * @public

package/src/MediaGalleryItem.js

@@ -16,7 +16,7 @@ import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
 const metadata = {
 	tag: "ui5-media-gallery-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.MediaGalleryItem.prototype */ {
 
 		/**
 		 * Defines the selected state of the component.
@@ -49,7 +49,7 @@ const metadata = {
 		 * <li><code>Wide</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryItemLayout}
 		 * @defaultvalue "Square"
 		 * @public
 		 */
@@ -119,7 +119,7 @@ const metadata = {
 			defaultValue: "",
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.MediaGalleryItem.prototype */ {
 		/**
 		 * Defines the content of the component.
 		 *
@@ -168,11 +168,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.MediaGalleryItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.MediaGalleryItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-media-gallery-item
  * @public
- * @implements sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @implements sap.ui.webc.fiori.IMediaGalleryItem
  * @since 1.1.0
  */
 class MediaGalleryItem extends UI5Element {

package/src/NotificationAction.js

@@ -6,7 +6,7 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
  */
 const metadata = {
 	tag: "ui5-notification-action",
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-notification-action</code>.
 		 *
@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>Transparent</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
+		 * @type {sap.ui.webc.main.types.ButtonDesign}
 		 * @defaultvalue "Transparent"
 		 * @public
 		 */
@@ -68,9 +68,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 		click: {},
 	},
 };
@@ -82,10 +82,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationAction
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.NotificationAction
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-notification-action
- * @implements sap.ui.webcomponents.fiori.INotificationAction
+ * @implements sap.ui.webc.fiori.INotificationAction
  * @public
  */
 class NotificationAction extends UI5Element {

package/src/NotificationListGroupItem.js

@@ -39,7 +39,7 @@ const metadata = {
 	tag: "ui5-li-notification-group",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Defines if the group is collapsed or expanded.
@@ -61,13 +61,13 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Defines the items of the <code>ui5-li-notification-group</code>,
 		 * usually <code>ui5-li-notification</code> items.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.INotificationListItem[]}
+		 * @type {sap.ui.webc.fiori.INotificationListItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -76,7 +76,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction.
@@ -124,12 +124,12 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListGroupItem
- * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListGroupItem
+ * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction
- * @implements sap.ui.webcomponents.main.IListItem
+ * @implements sap.ui.webc.main.IListItem
  * @public
  */
 class NotificationListGroupItem extends NotificationListItemBase {

package/src/NotificationListItem.js

@@ -1,6 +1,6 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
@@ -41,7 +41,7 @@ const metadata = {
 	tag: "ui5-li-notification",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 
 		/**
 		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
@@ -50,7 +50,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-		 * @type {sap.ui.webcomponents.main.types.WrappingType}
+		 * @type {sap.ui.webc.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -77,7 +77,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 
 		/**
 		 * Defines the avatar, displayed in the <code>ui5-li-notification</code>.
@@ -89,7 +89,7 @@ const metadata = {
 		 * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code>
 		 * you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size="XS">&lt;/ui5-avatar></code>.
 		 *
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @public
 		 */
@@ -124,7 +124,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 		_press: {},
 	},
 };
@@ -167,12 +167,12 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListItem
- * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListItem
+ * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification
  * @appenddocs NotificationAction
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.INotificationListItem, sap.ui.webcomponents.main.IListItem
+ * @implements sap.ui.webc.fiori.INotificationListItem, sap.ui.webc.main.IListItem
  * @public
  */
 class NotificationListItem extends NotificationListItemBase {
@@ -365,7 +365,7 @@ class NotificationListItem extends NotificationListItemBase {
 
 		const space = isSpace(event);
 
-		if (space && event.isMarked === "link") {
+		if (space && getEventMark(event) === "link") {
 			this._onShowMoreClick(event);
 			return;
 		}
@@ -379,7 +379,7 @@ class NotificationListItem extends NotificationListItemBase {
 	 * Private
 	 */
 	fireItemPress(event) {
-		if (event.isMarked === "button" || event.isMarked === "link") {
+		if (getEventMark(event) === "button" || getEventMark(event) === "link") {
 			return;
 		}
 

package/src/NotificationListItemBase.js

@@ -1,5 +1,6 @@
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
@@ -31,7 +32,7 @@ const ICON_PER_PRIORITY = {
  */
 const metadata = {
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the <code>titleText</code> of the item.
@@ -52,7 +53,7 @@ const metadata = {
 		 * <li><code>Medium</code></li>
 		 * <li><code>High</code></li>
 		 * </ul>
-		 * @type {sap.ui.webcomponents.main.types.Priority}
+		 * @type {sap.ui.webc.main.types.Priority}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -98,7 +99,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {sap.ui.webcomponents.base.types.Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -107,14 +108,14 @@ const metadata = {
 			defaultValue: 1000,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the actions, displayed in the top-right area.
 		 * <br><br>
 		 * <b>Note:</b> use the <code>ui5-notification-action</code> component.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.INotificationAction[]}
+		 * @type {sap.ui.webc.fiori.INotificationAction[]}
 		 * @slot
 		 * @public
 		 */
@@ -122,14 +123,19 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 		/**
 		 * Fired when the <code>Close</code> button is pressed.
 		 *
-		 * @event
+		 * @event sap.ui.webc.fiori.NotificationListItemBase#close
+		 * @param {HTMLElement} item the closed item.
 		 * @public
 		 */
-		close: {},
+		close: {
+			detail: {
+				item: HTMLElement,
+			},
+		},
 	},
 };
 
@@ -141,8 +147,8 @@ const metadata = {
  * @abstract
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListItemBase
- * @extends sap.ui.webcomponents.main.ListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListItemBase
+ * @extends sap.ui.webc.main.ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction
@@ -236,7 +242,7 @@ class NotificationListItemBase extends ListItemBase {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (event.isMarked === "button") {
+		if (getEventMark(event) === "button") {
 			return;
 		}
 

package/src/{Page.js → Page.ts}

@@ -1,4 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
@@ -10,122 +14,6 @@ import PageTemplate from "./generated/templates/PageTemplate.lit.js";
 // Styles
 import PageCss from "./generated/themes/Page.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-page",
-	managedSlots: true,
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
-
-		/**
-		 * Defines the background color of the <code>ui5-page</code>.
-		 * <br><br>
-		 * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Solid</code></li> (default)
-		 * <li><code>Transparent</code></li>
-		 * <li><code>List</code></li>
-		 * </ul>
-		 * @type {sap.ui.webcomponents.fiori.types.PageBackgroundDesign}
-		 * @defaultvalue "Solid"
-		 * @public
-		 */
-		backgroundDesign: {
-			type: PageBackgroundDesign,
-			defaultValue: PageBackgroundDesign.Solid,
-		},
-
-		/**
-		 * Disables vertical scrolling of page content.
-		 * If set to true, there will be no vertical scrolling at all.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disableScrolling: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines if the footer should float over the content.
-		 * <br><br>
-		 * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
-		 * @type {boolean}
-		 * @defaultvalue true
-		 * @public
-		 */
-		floatingFooter: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the footer visibility.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		hideFooter: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the current media query size.
-		 *
-		 * @type {string}
-		 * @private
-		 * @since 1.0.0-rc.15
-		 */
-		mediaRange: {
-			type: String,
-		},
-	},
-
-	slots: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
-
-		/**
-		 * Defines the header HTML Element.
-		 *
-		 * @type {sap.ui.webcomponents.fiori.IBar}
-		 * @slot
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the content HTML Element.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot content
-		 * @public
-		 */
-		"default": {
-			propertyName: "content",
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the footer HTML Element.
-		 *
-		 * @type {sap.ui.webcomponents.fiori.IBar}
-		 * @slot
-		 * @public
-		 */
-		footer: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
-	},
-};
-
 /**
  * @class
  *
@@ -153,16 +41,113 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.Page
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.Page
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-page
  * @since 1.0.0-rc.12
  * @public
  */
+@customElement("ui5-page")
+@languageAware
 class Page extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Defines the background color of the <code>ui5-page</code>.
+	 * <br><br>
+	 * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>Solid</code></li> (default)
+	 * <li><code>Transparent</code></li>
+	 * <li><code>List</code></li>
+	 * </ul>
+	 * @type {sap.ui.webc.fiori.types.PageBackgroundDesign}
+	 * @name sap.ui.webc.fiori.Page.prototype.backgroundDesign
+	 * @defaultvalue "Solid"
+	 * @public
+	 */
+	@property({ type: PageBackgroundDesign, defaultValue: PageBackgroundDesign.Solid })
+	backgroundDesign!: PageBackgroundDesign;
+
+	/**
+	 * Disables vertical scrolling of page content.
+	 * If set to true, there will be no vertical scrolling at all.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.Page.prototype.disableScrolling
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disableScrolling!: boolean;
+
+	/**
+	 * Defines if the footer should float over the content.
+	 * <br><br>
+	 * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.Page.prototype.floatingFooter
+	 * @defaultvalue true
+	 * @public
+	 */
+	@property({ type: Boolean })
+	floatingFooter!: boolean;
+
+	/**
+	 * Defines the footer visibility.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.Page.prototype.hideFooter
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	hideFooter!: boolean;
+
+	/**
+	 * Defines the current media query size.
+	 *
+	 * @type {string}
+	 * @private
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	mediaRange!: string;
+
+	/**
+	 * Defines the header HTML Element.
+	 *
+	 * @type {sap.ui.webc.fiori.IBar}
+	 * @name sap.ui.webc.fiori.Page.prototype.header
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	header!: Array<HTMLElement>;
+
+	/**
+	 * Defines the content HTML Element.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.fiori.Page.prototype.default
+	 * @slot content
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	content!: Array<HTMLElement>;
+
+	/**
+	 * Defines the footer HTML Element.
+	 *
+	 * @type {sap.ui.webc.fiori.IBar}
+	 * @name sap.ui.webc.fiori.Page.prototype.footer
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	footer!: Array<HTMLElement>;
+
+	_updateMediaRange: () => void;
 
 	static get render() {
 		return litRender;
@@ -191,7 +176,7 @@ class Page extends UI5Element {
 	}
 
 	updateMediaRange() {
-		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
 	}
 
 	get _contentBottom() {