diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index dc9c1163f26f..bbf018089e5c 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -78,8 +78,6 @@ import StandardListItem from "./dist/StandardListItem.js"; import CustomListItem from "./dist/CustomListItem.js"; import GroupHeaderListItem from "./dist/GroupHeaderListItem.js"; - - // used in test pages import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js"; window.RenderScheduler = RenderScheduler; diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs index 97a08b5b1f76..41abff6844a9 100644 --- a/packages/main/src/Dialog.hbs +++ b/packages/main/src/Dialog.hbs @@ -1 +1,20 @@ -{{>include "./Popup.hbs"}} \ No newline at end of file +{{>include "./Popup.hbs"}} + +{{#*inline "beforeContent"}} +
+ {{#if header.length }} + + {{else}} +

{{headerText}}

+ {{/if}} +
+{{/inline}} + +{{#*inline "afterContent"}} + {{#if footer.length }} + + {{/if}} +{{/inline}} + diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js index 8c2add338327..092de1f93f75 100644 --- a/packages/main/src/Dialog.js +++ b/packages/main/src/Dialog.js @@ -1,20 +1,54 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; -import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js"; - import Popup from "./Popup.js"; + // Template import DialogTemplate from "./generated/templates/DialogTemplate.lit.js"; - // Styles +import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js"; import dialogCSS from "./generated/themes/Dialog.css.js"; -import { getFocusedElement } from "./popup-utils/PopupUtils.js"; /** * @public */ const metadata = { tag: "ui5-dialog", + slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ { + /** + * Defines the header HTML Element. + * + * @type {HTMLElement[]} + * @slot + * @public + */ + header: { + type: HTMLElement, + }, + + /** + * Defines the footer HTML Element. + * + * @type {HTMLElement[]} + * @slot + * @public + */ + footer: { + type: HTMLElement, + }, + }, properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ { + /** + * Defines the header text. + *

+ * Note: If header slot is provided, the headerText is ignored. + * + * @type {string} + * @defaultvalue "" + * @public + */ + headerText: { + type: String, + }, + /** * Determines whether the ui5-dialog should be stretched to fullscreen. *

@@ -29,6 +63,9 @@ const metadata = { type: Boolean, }, + /** + * @private + */ onPhone: { type: Boolean, }, @@ -78,77 +115,34 @@ class Dialog extends Popup { } static get styles() { - return [Popup.styles, dialogCSS]; - } - - constructor() { - super(); + return [PopupsCommonCss, dialogCSS]; } onBeforeRendering() { this.onPhone = isPhone(); } - /** - * Opens the ui5-dialog. - * @public - */ - open() { - super.open(); - - this._focusedElementBeforeOpen = getFocusedElement(); - this.fireEvent("before-open", {}); - this.show(); - this.applyInitialFocus(); - - Dialog.blockBodyScrolling(); - - addOpenedPopup(this); - this.opened = true; - this.fireEvent("after-open", {}); - } - - /** - * Closes the ui5-dialog. - * @public - */ - close(escPressed) { - const prevented = !this.fireEvent("before-close", { escPressed }, true); - - if (prevented || !this.opened) { - return; - } - - super.close(); - this.hide(); - this.opened = false; - - this.fireEvent("after-close", {}); - - removeOpenedPopup(this); - Dialog.unblockBodyScrolling(); - - if (this._focusedElementBeforeOpen && !this._disableInitialFocus) { - this._focusedElementBeforeOpen.focus(); - } + get isModal() { // Required by Popup.js + return true; } - onExitDOM() { - if (this.isOpen()) { - Dialog.unblockBodyScrolling(); - } + get _ariaLabelledBy() { // Required by Popup.js + return "ui5-popup-header"; } - get isModal() { + get _ariaModal() { // Required by Popup.js return true; } - get _displayFooter() { - return true; - } - - get _displayHeader() { - return true; + get classes() { + return { + root: { + "ui5-popup-root": true, + }, + content: { + "ui5-popup-content": true, + }, + }; } } diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs index 0c5591f40688..4d6831702399 100644 --- a/packages/main/src/Popover.hbs +++ b/packages/main/src/Popover.hbs @@ -1,5 +1,25 @@ {{>include "./Popup.hbs"}} -{{#*inline "beforeHeader"}} +{{#*inline "beforeContent"}} -{{/inline}} \ No newline at end of file + + {{#if _displayHeader}} +
+ {{#if header.length }} + + {{else}} +

{{headerText}}

+ {{/if}} +
+ {{/if}} +{{/inline}} + +{{#*inline "afterContent"}} + {{#if _displayFooter}} + {{#if footer.length }} + + {{/if}} + {{/if}} +{{/inline}} diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js index 504417b2989d..9f79462cb71f 100644 --- a/packages/main/src/Popover.js +++ b/packages/main/src/Popover.js @@ -1,14 +1,15 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; -import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js"; import Popup from "./Popup.js"; import PopoverPlacementType from "./types/PopoverPlacementType.js"; import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js"; import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; - import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js"; -import { getFocusedElement, getClosedPopupParent } from "./popup-utils/PopupUtils.js"; +import { getClosedPopupParent } from "./popup-utils/PopupUtils.js"; +// Template +import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js"; // Styles +import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js"; import PopoverCss from "./generated/themes/Popover.css.js"; const arrowSize = 8; @@ -19,6 +20,19 @@ const arrowSize = 8; const metadata = { tag: "ui5-popover", properties: /** @lends sap.ui.webcomponents.main.Popover.prototype */ { + /** + * Defines the header text. + *

+ * Note: If header slot is provided, the headerText is ignored. + * + * @type {string} + * @defaultvalue "" + * @public + */ + headerText: { + type: String, + }, + /** * Determines on which side the ui5-popover is placed at. *

@@ -151,16 +165,6 @@ const metadata = { }, managedSlots: true, slots: /** @lends sap.ui.webcomponents.main.Popover.prototype */ { - /** - * Defines the content of the Web Component. - * @type {Node[]} - * @slot - * @public - */ - "default": { - type: HTMLElement, - }, - /** * Defines the header HTML Element. * @@ -229,7 +233,7 @@ class Popover extends Popup { } static get styles() { - return [Popup.styles, PopoverCss]; + return [PopupsCommonCss, PopoverCss]; } static get template() { @@ -255,80 +259,25 @@ class Popover extends Popup { if (!opener || this.opened) { return; } - - super.open(); - - if (this.isModal) { - Popover.blockBodyScrolling(); - } - this._opener = opener; - this._focusedElementBeforeOpen = getFocusedElement(); - this.fireEvent("before-open", {}); - this.reposition(); - - if (!preventInitialFocus) { - this.applyInitialFocus(); - } - - addOpenedPopover(this); - - this.opened = true; - this.fireEvent("after-open", {}); + super.open(preventInitialFocus); } /** - * Closes the popover. - * @public + * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this) + * @private */ - close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) { - if (!this.opened) { - return; - } - - super.close(); - - if (this.isModal) { - Popover.unblockBodyScrolling(); - } - - this.fireEvent("before-close", { - escPressed, - }, true); - - - this.opened = false; - - if (!preventRegistryUpdate) { - removeOpenedPopover(this); - } - - if (!preventFocusRestore) { - this.resetFocus(); - } - - this.hide(); - this.fireEvent("after-close", {}); - } - - get focusedElement() { - let element = document.activeElement; - - while (element.shadowRoot && element.shadowRoot.activeElement) { - element = element.shadowRoot.activeElement; - } - - return (element && typeof element.focus === "function") ? element : null; + _addOpenedPopup() { + addOpenedPopover(this); } - resetFocus() { - if (!this._focusedElementBeforeOpen) { - return; - } - - this._focusedElementBeforeOpen.focus(); - this._focusedElementBeforeOpen = null; + /** + * Override for the _removeOpenedPopup hook, which would otherwise just call removeOpenedPopup(this) + * @private + */ + _removeOpenedPopup() { + removeOpenedPopover(this); } shouldCloseDueToOverflow(placement, openerRect) { @@ -361,6 +310,10 @@ class Popover extends Popup { } reposition() { + this.show(); + } + + show() { const popoverSize = this.popoverSize; const openerRect = this._opener.getBoundingClientRect(); const placement = this.calcPlacement(openerRect, popoverSize); @@ -371,7 +324,7 @@ class Popover extends Popup { } if (this._oldPlacement && (this._oldPlacement.left === placement.left) && (this._oldPlacement.top === placement.top) && stretching) { - this.show(); + super.show(); this.style.width = this._width; return; } @@ -387,7 +340,7 @@ class Popover extends Popup { this.style.left = `${popoverOnLeftBorder ? Popover.MIN_OFFSET : this._left}px`; this.style.top = `${popoverOnTopBorder ? Popover.MIN_OFFSET : this._top}px`; - this.show(); + super.show(); if (stretching && this._width) { this.style.width = this._width; @@ -407,7 +360,7 @@ class Popover extends Popup { } this.style.visibility = "hidden"; - this.show(); + this.style.display = "block"; rect = this.getBoundingClientRect(); @@ -641,10 +594,18 @@ class Popover extends Popup { return top; } - get isModal() { + get isModal() { // Required by Popup.js return this.modal; } + get _ariaLabelledBy() { // Required by Popup.js + return "ui5-popup-header"; + } + + get _ariaModal() { // Required by Popup.js + return true; + } + get styles() { return { ...super.styles, @@ -657,6 +618,17 @@ class Popover extends Popup { }; } + get classes() { + return { + root: { + "ui5-popup-root": true, + }, + content: { + "ui5-popup-content": true, + }, + }; + } + /** * Hook for descendants to hide header. */ diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs index 63e8e8500560..92cc49d9bc12 100644 --- a/packages/main/src/Popup.hbs +++ b/packages/main/src/Popup.hbs @@ -1,44 +1,22 @@ -