@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/dist/NotificationListItem.js

@@ -1,5 +1,4 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 
@@ -9,6 +8,7 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 
 // Texts
@@ -43,35 +43,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
 
 		/**
-		 * Defines if the <code>heading</code> and <code>description</code> should wrap,
+		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
 		 * they truncate by default.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
+		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-         * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		wrap: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines if the <code>notification</code> is new or has been already read.
-		 * <br><br>
-		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
-		 * if set to true - it has a normal font.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		read: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
-		 * Defines the state of the <code>heading</code> and <code>description</code>,
+		 * Defines the state of the <code>titleText</code> and <code>description</code>,
 		 * if less or more information is displayed.
 		 * @private
 		 */
@@ -94,8 +83,12 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.
+		 * <br>
+		 * <b>Note:</b>In order to be complaint with the UX guidlines and for best experience,
+		 * 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 {HTMLElement}
+		 * @type {sap.ui.webcomponents.main.IAvatar}
 		 * @slot
 		 * @public
 		 */
@@ -104,14 +97,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>.
+		 * Defines the elements, displayed in the footer of the of the component.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
 		footnotes: {
 			type: HTMLElement,
-			propertyName: "footnotes",
 			individualSlots: true,
 		},
 
@@ -120,10 +112,10 @@ const metadata = {
 		 * usually a description of the notification.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
-		 * @slot
+		 * @slot description
 		 * @public
 		 */
 		"default": {
@@ -143,41 +135,51 @@ const metadata = {
  * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
  * <br>
  *
- * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code>
+ * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
  * and <code>footnotes</code> to fully describe a notification.
  * <br>
  *
  * The user can:
  * <ul>
  * <li>display a <code>Close</code> button</li>
- * <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
+ * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
  * and display a <code>ShowMore</code> button to switch between less and more information</li>
- * <li>add custom actions by using the <code>ui5-notification-overflow-action</code> component</li>
+ * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
  * </ul>
  *
  * <h3>Usage</h3>
  * The component can be used in a standard <code>ui5-list</code>.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title-text - Used to style the titleText of the notification list item</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/NotificationListItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
  * <br>
- * <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
+ * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListItem
  * @extends NotificationListItemBase
  * @tagname ui5-li-notification
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @since 1.0.0-rc.8
+ * @implements sap.ui.webcomponents.fiori.INotificationListItem, sap.ui.webcomponents.main.IListItem
  * @public
  */
 class NotificationListItem extends NotificationListItemBase {
 	constructor() {
 		super();
 
-		// the heading overflow height
-		this._headingOverflowHeight = 0;
+		// the titleText overflow height
+		this._titleTextOverflowHeight = 0;
 
 		// the description overflow height
 		this._descOverflowHeight = 0;
@@ -208,10 +210,6 @@ class NotificationListItem extends NotificationListItemBase {
 		];
 	}
 
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
-	}
-
 	onEnterDOM() {
 		ResizeHandler.register(this, this.onResizeBind);
 	}
@@ -230,22 +228,22 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get showMoreText() {
 		if (this._showMorePressed) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
 		}
 
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
 	}
 
-	get overflowBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	get overflowBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	get closeBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 	}
 
 	get hideShowMore() {
-		if (!this.wrap && this._showMore) {
+		if (this.wrappingType === WrappingType.None && this._showMore) {
 			return undefined;
 		}
 
@@ -256,30 +254,30 @@ class NotificationListItem extends NotificationListItemBase {
 		return this.shadowRoot.querySelector(".ui5-nli-description");
 	}
 
-	get headingDOM() {
-		return this.shadowRoot.querySelector(".ui5-nli-title");
+	get titleTextDOM() {
+		return this.shadowRoot.querySelector(".ui5-nli-title-text");
 	}
 
-	get headingHeight() {
-		return this.headingDOM.offsetHeight;
+	get titleTextHeight() {
+		return this.titleTextDOM.offsetHeight;
 	}
 
 	get descriptionHeight() {
 		return this.descriptionDOM.offsetHeight;
 	}
 
-	get headingOverflows() {
-		const heading = this.headingDOM;
+	get titleTextOverflows() {
+		const titleText = this.titleTextDOM;
 
-		if (!heading) {
+		if (!titleText) {
 			return false;
 		}
 
 		if (isIE()) {
-			return heading.scrollHeight > MAX_WRAP_HEIGHT;
+			return titleText.scrollHeight > MAX_WRAP_HEIGHT;
 		}
 
-		return heading.offsetHeight < heading.scrollHeight;
+		return titleText.offsetHeight < titleText.scrollHeight;
 	}
 
 	get descriptionOverflows() {
@@ -309,8 +307,8 @@ class NotificationListItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 		if (this.hasDesc) {
 			ids.push(`${id}-description`);
@@ -327,26 +325,26 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get priorityText() {
 		if (this.priority === Priority.High) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Medium) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Low) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
 		}
 
 		return "";
 	}
 
 	get accInvisibleText() {
-		const notifcationTxt = this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
-		const readTxt = this.read ? this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_READ) : this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+		const notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
+		const readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
 		const priorityText = this.priorityText;
 
-		return `${notifcationTxt} ${readTxt} ${priorityText}`;
+		return `${notificationText} ${readText} ${priorityText}`;
 	}
 
 	get classes() {
@@ -404,23 +402,23 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	onResize() {
-		if (this.wrap) {
+		if (this.wrappingType === WrappingType.Normal) {
 			this._showMore = false;
 			return;
 		}
 
-		const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
-		const descWouldOverflow = this.descriptionHeight > this._descOverflowHeight;
-		const overflows = headingWouldOverflow || descWouldOverflow;
+		const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
+		const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
+		const overflows = titleTextWouldOverflow || descWouldOverflow;
 
 		if (this._showMorePressed && overflows) {
 			this._showMore = true;
 			return;
 		}
 
-		if (this.headingOverflows || this.descriptionOverflows) {
-			this._headingOverflowHeight = this.headingHeight;
-			this._descOverflowHeight = this.descriptionHeight;
+		if (this.titleTextOverflows || this.descriptionOverflows) {
+			this._titleTextOverflowHeight = this.titleTextHeight;
+			this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 			this._showMore = true;
 			return;
 		}

package/dist/NotificationListItemBase.js

@@ -1,7 +1,7 @@
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
 
 // Icons
@@ -12,10 +12,10 @@ import "@ui5/webcomponents-icons/dist/message-warning.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 
 // Templates
-import NotifactionOverflowActionsPopoverTemplate from "./generated/templates/NotifactionOverflowActionsPopoverTemplate.lit.js";
+import NotificationOverflowActionsPopoverTemplate from "./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js";
 
 // Styles
-import NotifactionOverflowActionsPopoverCss from "./generated/themes/NotifactionOverflowActionsPopover.css.js";
+import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
 
 /**
  * @public
@@ -25,17 +25,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
-		 * Defines the <code>heading</code> of the item.
+		 * Defines the <code>titleText</code> of the item.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		heading: {
+		titleText: {
 			type: String,
 		},
 
 		/**
 		 * Defines the <code>priority</code> of the item.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>Low</code></li>
+		 * <li><code>Medium</code></li>
+		 * <li><code>High</code></li>
+		 * </ul>
 		 * @type {Priority}
 		 * @defaultvalue "None"
 		 * @public
@@ -55,6 +62,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines if the <code>notification</code> is new or has been already read.
+		 * <br><br>
+		 * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
+		 * if set to true - it has a normal font.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		read: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines if a busy indicator would be displayed over the item.
 		 * @type {boolean}
@@ -65,15 +85,27 @@ const metadata = {
 		busy: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the actions, displayed in the top-right area.
 		 * <br><br>
-		 * <b>Note:</b> use the <code>ui5-notification-overflow-action</code> component.
+		 * <b>Note:</b> use the <code>ui5-notification-action</code> component.
 		 *
-		 * @type {HTMLElement}
+		 * @type {sap.ui.webcomponents.fiori.INotificationAction[]}
 		 * @slot
 		 * @public
 		 */
@@ -104,26 +136,20 @@ const metadata = {
  * @extends ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @public
  */
 class NotificationListItemBase extends ListItemBase {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
 
 	static get staticAreaTemplate() {
-		return NotifactionOverflowActionsPopoverTemplate;
+		return NotificationOverflowActionsPopoverTemplate;
 	}
 
 	static get staticAreaStyles() {
-		return NotifactionOverflowActionsPopoverCss;
+		return NotificationOverflowActionsPopoverCss;
 	}
 
 	static priorityIconsMappings() {
@@ -134,8 +160,8 @@ class NotificationListItemBase extends ListItemBase {
 		};
 	}
 
-	get hasHeading() {
-		return !!this.heading.length;
+	get hasTitleText() {
+		return !!this.titleText.length;
 	}
 
 	get hasPriority() {
@@ -224,7 +250,7 @@ class NotificationListItemBase extends ListItemBase {
 
 	async openOverflow() {
 		const overflowPopover = await this.getOverflowPopover();
-		overflowPopover.openBy(this.overflowButtonDOM);
+		overflowPopover.showAt(this.overflowButtonDOM);
 	}
 
 	async closeOverflow() {
@@ -236,6 +262,10 @@ class NotificationListItemBase extends ListItemBase {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(".ui5-notification-overflow-popover");
 	}
+
+	static async onDefine() {
+		NotificationListItemBase.i18nFioriBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
 }
 
 export default NotificationListItemBase;

package/dist/Page.js

@@ -0,0 +1,223 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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";
+import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
+
+// Template
+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 {PageBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @public
+		 */
+		backgroundDesign: {
+			type: String,
+			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
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-page</code> is a container control that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * <h3>Structure</h3>
+ * <h4>Header</h4>
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * <h4>Content</h4>
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
+ * <h4>Footer</h4>
+ * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
+ * This is enabled with the <code>floatingFooter</code> property.
+ *
+ * <b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the <code>ui5-page</code> to be rendered.
+ *
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.Page
+ * @extends UI5Element
+ * @tagname ui5-page
+ * @since 1.0.0-rc.12
+ * @public
+ */
+class Page extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return PageCss;
+	}
+
+	static get template() {
+		return PageTemplate;
+	}
+
+	constructor() {
+		super();
+
+		this._updateMediaRange = this.updateMediaRange.bind(this);
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._updateMediaRange);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._updateMediaRange);
+	}
+
+	updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
+	get _contentBottom() {
+		return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
+	}
+
+	get _contentPaddingBottom() {
+		return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
+	}
+
+	get _contentTop() {
+		return this.header.length ? "2.75rem" : "0rem";
+	}
+
+	get styles() {
+		return {
+			content: {
+				"padding-bottom": this.footer.length && this._contentPaddingBottom,
+				"bottom": this.footer.length && this._contentBottom,
+				"top": this._contentTop,
+			},
+			footer: {},
+		};
+	}
+}
+
+Page.define();
+
+export default Page;