@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/Popup.js

@@ -7,27 +7,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Popup_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { isChrome, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import { isChrome, isDesktop, isPhone, } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import { registerUI5Element, getEffectiveAriaLabelText, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, deregisterUI5Element, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
-import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
-import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
+import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
+import PopupTemplate from "./PopupTemplate.js";
 import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
 import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 // Styles
 import popupStlyes from "./generated/themes/Popup.css.js";
-import popupStaticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import popupBlockLayerStyles from "./generated/themes/PopupBlockLayer.css.js";
 import globalStyles from "./generated/themes/PopupGlobal.css.js";
 const createBlockingStyle = () => {
     if (!hasStyle("data-ui5-popup-scroll-blocker")) {
@@ -41,25 +40,20 @@ const pageScrollingBlockers = new Set();
  * ### Overview
  * Base class for all popup Web Components.
  *
- * If you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend
- * at least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.
+ * If you need to create your own popup-like custom UI5 Web Components.
  *
  * 1. The Popup class handles modality:
  *  - The "isModal" getter can be overridden by derivatives to provide their own conditions when they are modal or not
  *  - Derivatives may call the "blockPageScrolling" and "unblockPageScrolling" static methods to temporarily remove scrollbars on the html element
- *  - Derivatives may call the "open" and "close" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer
+ *  - Derivatives may call the "openPopup" and "closePopup" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer
  *
  *  2. Provides blocking layer (relevant for modal popups only):
- *   - It is in the static area
  *   - Controlled by the "open" and "close" methods
  *
  * 3. The Popup class "traps" focus:
  *  - Derivatives may call the "applyInitialFocus" method (usually when opening, to transfer focus inside the popup)
  *
- * 4. The Popup class automatically assigns "z-index"
- *  - Each time a popup is opened, it gets a higher than the previously opened popup z-index
- *
- * 5. The template of this component exposes two inline partials you can override in derivatives:
+ * 4. The template of this component exposes two inline partials you can override in derivatives:
  *  - beforeContent (upper part of the box, useful for header/title/close button)
  *  - afterContent (lower part, useful for footer/action buttons)
  * @constructor
@@ -69,26 +63,129 @@ const pageScrollingBlockers = new Set();
 let Popup = Popup_1 = class Popup extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines if the focus should be returned to the previously focused element,
+         * when the popup closes.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.8
+        */
+        this.preventFocusRestore = false;
+        /**
+         * Allows setting a custom role.
+         * @default "Dialog"
+         * @public
+         * @since 1.10.0
+         */
+        this.accessibleRole = "Dialog";
+        /**
+         * Indicates whether initial focus should be prevented.
+         * @public
+         * @default false
+         * @since 2.0.0
+         */
+        this.preventInitialFocus = false;
+        /**
+         * Indicates if the element is the top modal popup
+         *
+         * This property is calculated automatically
+         * @private
+         * @default false
+         */
+        this.isTopModalPopup = false;
+        /**
+         * @private
+         */
+        this.onPhone = false;
+        /**
+         * @private
+         */
+        this.onDesktop = false;
+        this._opened = false;
+        this._open = false;
         this._resizeHandler = this._resize.bind(this);
+        this._getRealDomRef = () => {
+            return this.shadowRoot.querySelector("[root-element]");
+        };
     }
     onBeforeRendering() {
-        this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
+        this.onPhone = isPhone();
+        this.onDesktop = isDesktop();
     }
     onAfterRendering() {
-        this._updateMediaRange();
+        renderFinished().then(() => {
+            this._updateMediaRange();
+        });
     }
     onEnterDOM() {
+        this.setAttribute("popover", "manual");
         ResizeHandler.register(this, this._resizeHandler);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+        this.tabIndex = -1;
+        if (this.open) {
+            this.showPopover();
+            this.openPopup();
+        }
+        this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
+        registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
     }
     onExitDOM() {
-        if (this.isOpen()) {
+        if (this._opened) {
             Popup_1.unblockPageScrolling(this);
             this._removeOpenedPopup();
         }
         ResizeHandler.deregister(this, this._resizeHandler);
+        deregisterUI5Element(this);
+    }
+    /**
+     * Indicates if the element is open
+     * @public
+     * @default false
+     * @since 1.2.0
+     */
+    set open(value) {
+        if (this._open === value) {
+            return;
+        }
+        this._open = value;
+        if (value) {
+            this.openPopup();
+        }
+        else {
+            this.closePopup();
+        }
+    }
+    get open() {
+        return this._open;
     }
-    get _displayProp() {
-        return "block";
+    async openPopup() {
+        if (this._opened) {
+            return;
+        }
+        const prevented = !this.fireDecoratorEvent("before-open");
+        if (prevented) {
+            this.open = false;
+            return;
+        }
+        if (this.isModal) {
+            Popup_1.blockPageScrolling(this);
+        }
+        this._focusedElementBeforeOpen = getFocusedElement();
+        this._show();
+        this._opened = true;
+        if (this.getDomRef()) {
+            this._updateMediaRange();
+        }
+        this._addOpenedPopup();
+        this.open = true;
+        // initial focus, if focused element is statically created
+        await this.applyInitialFocus();
+        await renderFinished();
+        if (this.isConnected) {
+            this.fireDecoratorEvent("open");
+        }
     }
     _resize() {
         this._updateMediaRange();
@@ -122,7 +219,7 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         document.documentElement.classList.remove("ui5-popup-scroll-blocker");
     }
     _scroll(e) {
-        this.fireEvent("scroll", {
+        this.fireDecoratorEvent("scroll", {
             scrollTop: e.target.scrollTop,
             targetRef: e.target,
         });
@@ -130,7 +227,7 @@ let Popup = Popup_1 = class Popup extends UI5Element {
     _onkeydown(e) {
         const isTabOutAttempt = e.target === this._root && isTabPrevious(e);
         // if the popup is closed, focus is already moved, so Enter keydown may result in click on the newly focused element
-        const isEnterOnClosedPopupChild = isEnter(e) && !this.isOpen();
+        const isEnterOnClosedPopupChild = isEnter(e) && !this.open;
         if (isTabOutAttempt || isEnterOnClosedPopupChild) {
             e.preventDefault();
         }
@@ -143,9 +240,6 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         }
     }
     _onmousedown(e) {
-        if (!isSafari()) { // Remove when adopting native dialog
-            this._root.removeAttribute("tabindex");
-        }
         if (this.shadowRoot.contains(e.target)) {
             this._shouldFocusRoot = true;
         }
@@ -154,9 +248,6 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         }
     }
     _onmouseup() {
-        if (!isSafari()) { // Remove when adopting native dialog
-            this._root.tabIndex = -1;
-        }
         if (this._shouldFocusRoot) {
             if (isChrome()) {
                 this._root.focus();
@@ -191,11 +282,14 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         }
     }
     /**
-     * Use this method to focus the element denoted by "initialFocus", if provided, or the first focusable element otherwise.
+     * Use this method to focus the element denoted by "initialFocus", if provided,
+     * or the first focusable element otherwise.
      * @protected
      */
     async applyInitialFocus() {
-        await this.applyFocus();
+        if (!this.preventInitialFocus) {
+            await this.applyFocus();
+        }
     }
     /**
      * Focuses the element denoted by `initialFocus`, if provided,
@@ -204,6 +298,10 @@ let Popup = Popup_1 = class Popup extends UI5Element {
      * @returns Promise that resolves when the focus is applied
      */
     async applyFocus() {
+        // do nothing if the standard HTML autofocus is used
+        if (this.querySelector("[autofocus]")) {
+            return;
+        }
         await this._waitForDomRef();
         if (this.getRootNode() === this) {
             return;
@@ -221,50 +319,15 @@ let Popup = Popup_1 = class Popup extends UI5Element {
             element.focus();
         }
     }
-    /**
-     * Tells if the component is opened
-     * @public
-     */
-    isOpen() {
-        return this.opened;
-    }
     isFocusWithin() {
         return isFocusedElementWithinNode(this._root);
     }
-    /**
-     * Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking
-     * @protected
-     */
-    async _open(preventInitialFocus) {
-        const prevented = !this.fireEvent("before-open", {}, true, false);
-        if (prevented) {
-            return;
-        }
-        if (this.isModal && !this.shouldHideBackdrop) {
-            // create static area item ref for block layer
-            this.getStaticAreaItemDomRef();
-            this._blockLayerHidden = false;
-            Popup_1.blockPageScrolling(this);
-        }
-        this._zIndex = getNextZIndex();
-        this.style.zIndex = this._zIndex?.toString() || "";
-        this._focusedElementBeforeOpen = getFocusedElement();
-        this._show();
-        if (this.getDomRef()) {
-            this._updateMediaRange();
-        }
-        this._addOpenedPopup();
-        this.opened = true;
-        this.open = true;
-        await renderFinished();
-        if (!this._disableInitialFocus && !preventInitialFocus) {
-            await this.applyInitialFocus();
-        }
-        this.fireEvent("after-open", {}, false, false);
-    }
     _updateMediaRange() {
         this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
     }
+    _updateAssociatedLabelsTexts() {
+        this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
+    }
     /**
      * Adds the popup to the "opened popups registry"
      * @protected
@@ -274,22 +337,21 @@ let Popup = Popup_1 = class Popup extends UI5Element {
     }
     /**
      * Closes the popup.
-     * @public
      */
-    close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
-        if (!this.opened) {
+    closePopup(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        if (!this._opened) {
             return;
         }
-        const prevented = !this.fireEvent("before-close", { escPressed }, true, false);
+        const prevented = !this.fireDecoratorEvent("before-close", { escPressed });
         if (prevented) {
+            this.open = true;
             return;
         }
+        this._opened = false;
         if (this.isModal) {
-            this._blockLayerHidden = true;
             Popup_1.unblockPageScrolling(this);
         }
         this.hide();
-        this.opened = false;
         this.open = false;
         if (!preventRegistryUpdate) {
             this._removeOpenedPopup();
@@ -297,7 +359,7 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         if (!this.preventFocusRestore && !preventFocusRestore) {
             this.resetFocus();
         }
-        this.fireEvent("after-close", {}, false, false);
+        this.fireDecoratorEvent("close");
     }
     /**
      * Removes the popup from the "opened popups registry"
@@ -311,10 +373,7 @@ let Popup = Popup_1 = class Popup extends UI5Element {
      * @protected
      */
     resetFocus() {
-        if (!this._focusedElementBeforeOpen) {
-            return;
-        }
-        this._focusedElementBeforeOpen.focus();
+        this._focusedElementBeforeOpen?.focus();
         this._focusedElementBeforeOpen = null;
     }
     /**
@@ -322,14 +381,17 @@ let Popup = Popup_1 = class Popup extends UI5Element {
      * @protected
      */
     _show() {
-        this.style.display = this._displayProp;
+        if (this.isConnected) {
+            this.setAttribute("popover", "manual");
+            this.showPopover();
+        }
     }
     /**
      * Sets "none" display to the popup
      * @protected
      */
     hide() {
-        this.style.display = "none";
+        this.isConnected && this.hidePopover();
     }
     /**
      * Ensures ariaLabel is never null or empty string
@@ -338,11 +400,25 @@ let Popup = Popup_1 = class Popup extends UI5Element {
     get _ariaLabel() {
         return getEffectiveAriaLabelText(this);
     }
+    get _accInfoAriaDescription() {
+        return this.ariaDescriptionText || "";
+    }
+    get ariaDescriptionText() {
+        return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this);
+    }
+    get ariaDescriptionTextId() {
+        return this.ariaDescriptionText ? "accessibleDescription" : "";
+    }
+    get ariaDescribedByIds() {
+        return [
+            this.ariaDescriptionTextId,
+        ].filter(Boolean).join(" ");
+    }
     get _root() {
         return this.shadowRoot.querySelector(".ui5-popup-root");
     }
     get _role() {
-        return (this.accessibleRole === PopupAccessibleRole.None) ? undefined : this.accessibleRole.toLowerCase();
+        return (this.accessibleRole === PopupAccessibleRole.None) ? undefined : toLowercaseEnumValue(this.accessibleRole);
     }
     get _ariaModal() {
         return this.accessibleRole === PopupAccessibleRole.None ? undefined : "true";
@@ -354,16 +430,12 @@ let Popup = Popup_1 = class Popup extends UI5Element {
         return {
             root: {},
             content: {},
-            blockLayer: {
-                "zIndex": this._zIndex ? this._zIndex - 1 : "",
-            },
         };
     }
     get classes() {
         return {
             root: {
                 "ui5-popup-root": true,
-                "ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
             },
             content: {
                 "ui5-popup-content": true,
@@ -378,85 +450,87 @@ __decorate([
     property({ type: Boolean })
 ], Popup.prototype, "preventFocusRestore", void 0);
 __decorate([
-    property({ type: Boolean })
-], Popup.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, noAttribute: true })
-], Popup.prototype, "opened", void 0);
-__decorate([
-    property({ defaultValue: undefined })
+    property()
 ], Popup.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], Popup.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+    property()
 ], Popup.prototype, "accessibleRole", void 0);
 __decorate([
     property()
-], Popup.prototype, "mediaRange", void 0);
+], Popup.prototype, "accessibleDescription", void 0);
 __decorate([
-    property({ type: Boolean })
-], Popup.prototype, "_disableInitialFocus", void 0);
+    property()
+], Popup.prototype, "accessibleDescriptionRef", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Popup.prototype, "_associatedDescriptionRefTexts", void 0);
+__decorate([
+    property()
+], Popup.prototype, "mediaRange", void 0);
 __decorate([
     property({ type: Boolean })
-], Popup.prototype, "_blockLayerHidden", void 0);
+], Popup.prototype, "preventInitialFocus", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Popup.prototype, "isTopModalPopup", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Popup.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean })
+], Popup.prototype, "onPhone", void 0);
+__decorate([
+    property({ type: Boolean })
+], Popup.prototype, "onDesktop", void 0);
+__decorate([
+    property({ type: Boolean })
+], Popup.prototype, "open", null);
 Popup = Popup_1 = __decorate([
     customElement({
-        renderer: litRender,
-        styles: popupStlyes,
+        renderer: jsxRender,
+        styles: [popupStlyes, popupBlockLayerStyles],
         template: PopupTemplate,
-        staticAreaTemplate: PopupBlockLayer,
-        staticAreaStyles: popupStaticAreaStyles,
     })
     /**
-     * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
+     * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
      * @public
-     * @allowPreventDefault
      */
     ,
-    event("before-open")
+    event("before-open", {
+        cancelable: true,
+    })
     /**
-     * Fired after the component is opened. **This event does not bubble.**
+     * Fired after the component is opened.
      * @public
      */
     ,
-    event("after-open")
+    event("open")
     /**
-     * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
+     * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
      * @public
-     * @allowPreventDefault
      * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.
      */
     ,
     event("before-close", {
-        detail: {
-            /**
-             * @public
-             */
-            escPressed: {
-                type: Boolean,
-            },
-        },
+        cancelable: true,
     })
     /**
-     * Fired after the component is closed. **This event does not bubble.**
+     * Fired after the component is closed.
      * @public
      */
     ,
-    event("after-close")
+    event("close")
     /**
      * Fired whenever the popup content area is scrolled
      * @private
      */
     ,
-    event("scroll")
+    event("scroll", {
+        bubbles: true,
+    })
 ], Popup);
 export default Popup;
 //# sourceMappingURL=Popup.js.map