@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Popover.d.ts

@@ -1,6 +1,6 @@
 import Popup from "./Popup.js";
 import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
-import PopoverPlacementType from "./types/PopoverPlacementType.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 type PopoverSize = {
@@ -15,98 +15,73 @@ type CalculatedPlacement = {
     arrow: ArrowPosition;
     top: number;
     left: number;
-    placementType: `${PopoverPlacementType}`;
+    placement: `${PopoverPlacement}`;
 };
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-popover</code> component displays additional information for an object
+ * The `ui5-popover` component displays additional information for an object
  * in a compact way and without leaving the page.
  * The Popover can contain various UI elements, such as fields, tables, images, and charts.
  * It can also include actions in the footer.
  *
- * <h3>Structure</h3>
+ * ### Structure
  *
  * The popover has three main areas:
- * <ul>
- * <li>Header (optional)</li>
- * <li>Content</li>
- * <li>Footer (optional)</li>
- * </ul>
  *
- * <b>Note:</b> The <code>ui5-popover</code> is closed when the user clicks
+ * - Header (optional)
+ * - Content
+ * - Footer (optional)
+ *
+ * **Note:** The `ui5-popover` is closed when the user clicks
  * or taps outside the popover
  * or selects an action within the popover. You can prevent this with the
- * <code>modal</code> property.
- *
- * <h3>CSS Shadow Parts</h3>
+ * `modal` property.
  *
- * <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-popover</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the header of the component</li>
- * <li>content - Used to style the content of the component</li>
- * <li>footer - Used to style the footer of the component</li>
- * </ul>
+ * ### ES6 Module Import
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents/dist/Popover.js";`
  *
- * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
- *
- * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * **Note: ** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)
  * outside any other components. Preferably, the popup-like components should be placed
  * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
  * the position and/or z-index management of the popup-like components.
  *
- * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
- *
+ * **Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Popover
- * @extends sap.ui.webc.main.Popup
- * @tagname ui5-popover
+ * @extends Popup
  * @since 1.0.0-rc.6
  * @public
+ * @csspart header - Used to style the header of the component
+ * @csspart content - Used to style the content of the component
+ * @csspart footer - Used to style the footer of the component
  */
 declare class Popover extends Popup {
     /**
      * Defines the header text.
-     * <br><br>
-     * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Popover.prototype.headerText
-     * @defaultvalue ""
+     * **Note:** If `header` slot is provided, the `headerText` is ignored.
+     * @default ""
      * @public
      */
     headerText: string;
     /**
      * Determines on which side the component is placed at.
-     *
-     * @type {sap.ui.webc.main.types.PopoverPlacementType}
-     * @name sap.ui.webc.main.Popover.prototype.placementType
-     * @defaultvalue "Right"
+     * @default "End"
      * @public
      */
-    placementType: `${PopoverPlacementType}`;
+    placement: `${PopoverPlacement}`;
     /**
      * Determines the horizontal alignment of the component.
-     *
-     * @type {sap.ui.webc.main.types.PopoverHorizontalAlign}
-     * @name sap.ui.webc.main.Popover.prototype.horizontalAlign
-     * @defaultvalue "Center"
+     * @default "Center"
      * @public
      */
     horizontalAlign: `${PopoverHorizontalAlign}`;
     /**
      * Determines the vertical alignment of the component.
-     *
-     * @type {sap.ui.webc.main.types.PopoverVerticalAlign}
-     * @name sap.ui.webc.main.Popover.prototype.verticalAlign
-     * @defaultvalue "Center"
+     * @default "Center"
      * @public
      */
     verticalAlign: `${PopoverVerticalAlign}`;
@@ -114,28 +89,13 @@ declare class Popover extends Popup {
      * Defines whether the component should close when
      * clicking/tapping outside of the popover.
      * If enabled, it blocks any interaction with the background.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Popover.prototype.modal
-     * @defaultvalue false
+     * @default false
      * @public
      */
     modal: boolean;
-    /**
-     * Defines whether the block layer will be shown if modal property is set to true.
-     * @type {boolean}
-     * @name sap.ui.webc.main.Popover.prototype.hideBackdrop
-     * @defaultvalue false
-     * @public
-     * @since 1.0.0-rc.10
-     */
-    hideBackdrop: boolean;
     /**
      * Determines whether the component arrow is hidden.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Popover.prototype.hideArrow
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.0.0-rc.15
      */
@@ -143,69 +103,44 @@ declare class Popover extends Popup {
     /**
      * Determines if there is no enough space, the component can be placed
      * over the target.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Popover.prototype.allowTargetOverlap
-     * @defaultvalue false
+     * @default false
      * @public
      */
     allowTargetOverlap: boolean;
-    /**
-     * Defines the ID or DOM Reference of the element that the popover is shown at
-     * @public
-     * @type {sap.ui.webc.base.types.DOMReference}
-     * @name sap.ui.webc.main.Popover.prototype.opener
-     * @defaultvalue undefined
-     * @since 1.2.0
-     */
-    opener?: HTMLElement | string;
     /**
      * Defines whether the content is scrollable.
-     *
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     disableScrolling: boolean;
     /**
      * Sets the X translation of the arrow
-     *
      * @private
      */
     arrowTranslateX: number;
     /**
      * Sets the Y translation of the arrow
-     *
      * @private
      */
     arrowTranslateY: number;
     /**
      * Returns the calculated placement depending on the free space
-     *
      * @private
      */
-    actualPlacementType: `${PopoverPlacementType}`;
+    actualPlacement: `${PopoverPlacement}`;
     _maxHeight?: number;
     _maxWidth?: number;
     /**
      * Defines the header HTML Element.
-     *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Popover.prototype.header
-     * @slot
      * @public
      */
     header: Array<HTMLElement>;
     /**
      * Defines the footer HTML Element.
-     *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Popover.prototype.footer
-     * @slot
      * @public
      */
     footer: Array<HTMLElement>;
-    _opener?: HTMLElement;
+    _opener?: HTMLElement | string;
     _openerRect?: DOMRect;
     _preventRepositionAndClose?: boolean;
     _top?: number;
@@ -214,20 +149,18 @@ declare class Popover extends Popup {
     _width?: string;
     static get VIEWPORT_MARGIN(): number;
     constructor();
-    onAfterRendering(): void;
-    isOpenerClicked(e: MouseEvent): boolean;
     /**
-     * Shows the popover.
-     * @param {HTMLElement} opener the element that the popover is shown at
-     * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
+     * Defines the ID or DOM Reference of the element at which the popover is shown.
+     * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
+     * You can only set the `opener` attribute to a DOM Reference when using JavaScript.
      * @public
-     * @async
-     * @method
-     * @name sap.ui.webc.main.Popover#showAt
-     * @async
-     * @returns {Promise} Resolved when the popover is open
+     * @default undefined
+     * @since 1.2.0
      */
-    showAt(opener: HTMLElement, preventInitialFocus?: boolean): Promise<void>;
+    set opener(value: HTMLElement | string);
+    get opener(): HTMLElement | string | undefined;
+    openPopup(): Promise<void>;
+    isOpenerClicked(e: MouseEvent): boolean;
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
      * @private
@@ -238,7 +171,8 @@ declare class Popover extends Popup {
      * @private
      */
     _removeOpenedPopup(): void;
-    shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean;
+    getOpenerHTMLElement(opener: HTMLElement | string | undefined): HTMLElement | null | undefined;
+    shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean;
     shouldCloseDueToNoOpener(openerRect: DOMRect): boolean;
     isOpenerOutsideViewport(openerRect: DOMRect): boolean;
     /**
@@ -251,8 +185,8 @@ declare class Popover extends Popup {
      * Adjust the desired top position to compensate for shift of the screen
      * caused by opened keyboard on iOS which affects all elements with position:fixed.
      * @private
-     * @param {int} top The target top in px.
-     * @returns {int} The adjusted top in px.
+     * @param top The target top in px.
+     * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top: number): number;
     _getContainingBlockClientLocation(): DOMRect | {
@@ -270,24 +204,23 @@ declare class Popover extends Popup {
      * Calculates the position for the arrow.
      * @private
      * @param targetRect BoundingClientRect of the target element
-     * @param {{width: number, height: number}} popoverSize Width and height of the popover
+     * @param popoverSize Width and height of the popover
      * @param left Left offset of the popover
      * @param top Top offset of the popover
      * @param isVertical If the popover is positioned vertically to the target element
-     * @param {number} borderRadius Value of the border-radius property
-     * @returns {{x: number, y: number}} Arrow's coordinates
+     * @param borderRadius Value of the border-radius property
+     * @returns  Arrow's coordinates
      */
     getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition;
     /**
-     * Fallbacks to new placement, prioritizing <code>Left</code> and <code>Right</code> placements.
+     * Fallbacks to new placement, prioritizing `Left` and `Right` placements.
      * @private
      */
-    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined;
-    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacementType}`;
+    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacement | undefined;
+    getActualPlacement(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacement}`;
     getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number;
     getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number;
     get isModal(): boolean;
-    get shouldHideBackdrop(): boolean;
     get _ariaLabelledBy(): "ui5-popup-header" | undefined;
     get styles(): {
         root: {
@@ -298,9 +231,6 @@ declare class Popover extends Popup {
             transform: string;
         };
         content: {};
-        blockLayer: {
-            zIndex: string | number;
-        };
     };
     get classes(): import("@ui5/webcomponents-base/dist/types.js").ClassMap;
     /**
@@ -311,7 +241,7 @@ declare class Popover extends Popup {
      * Hook for descendants to hide footer.
      */
     get _displayFooter(): boolean;
-    get _actualHorizontalAlign(): "Left" | "Right" | "Center" | "Stretch" | PopoverHorizontalAlign.Left | PopoverHorizontalAlign.Right;
+    get _actualHorizontalAlign(): "Start" | "End" | "Center" | "Stretch" | PopoverHorizontalAlign.Start | PopoverHorizontalAlign.End;
 }
 declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;