@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/dist/Popover.js

@@ -1,5 +1,6 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -22,7 +23,7 @@ const ARROW_SIZE = 8;
  */
 const metadata = {
 	tag: "ui5-popover",
-	properties: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Popover.prototype */ {
 		/**
 		 * Defines the header text.
 		 * <br><br>
@@ -47,7 +48,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverPlacementType}
+		 * @type {sap.ui.webc.main.types.PopoverPlacementType}
 		 * @defaultvalue "Right"
 		 * @public
 		 */
@@ -67,7 +68,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverHorizontalAlign}
+		 * @type {sap.ui.webc.main.types.PopoverHorizontalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -87,7 +88,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverVerticalAlign}
+		 * @type {sap.ui.webc.main.types.PopoverVerticalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -145,14 +146,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the opener id of the element that the popover is shown at
+		 * Defines the ID or DOM Reference of the element that the popover is shown at
 		 * @public
-		 * @type {String}
+		 * @type {sap.ui.webc.base.types.DOMReference}
 		 * @defaultvalue ""
 		 * @since 1.2.0
 		 */
 		opener: {
-			type: String,
+			type: DOMReference,
 		},
 
 		/**
@@ -208,7 +209,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Popover.prototype */ {
 		/**
 		 * Defines the header HTML Element.
 		 *
@@ -231,7 +232,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
+	events: /** @lends sap.ui.webc.main.Popover.prototype */ {
 	},
 };
 
@@ -276,8 +277,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Popover
- * @extends Popup
+ * @alias sap.ui.webc.main.Popover
+ * @extends sap.ui.webc.main.Popup
  * @tagname ui5-popover
  * @since 1.0.0-rc.6
  * @public
@@ -305,7 +306,7 @@ class Popover extends Popup {
 
 	onAfterRendering() {
 		if (!this.isOpen() && this.open) {
-			const opener = document.getElementById(this.opener);
+			const opener = this.opener instanceof HTMLElement ? this.opener : this.getRootNode().getElementById(this.opener);
 			if (!opener) {
 				console.warn("Valid opener id is required."); // eslint-disable-line
 				return;

package/dist/Popup.js

@@ -4,6 +4,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } 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 { 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";
@@ -23,7 +24,7 @@ import globalStyles from "./generated/themes/PopupGlobal.css.js";
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
@@ -36,7 +37,7 @@ const metadata = {
 			propertyName: "content",
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -128,14 +129,28 @@ const metadata = {
 		_blockLayerHidden: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates if the element is the top modal popup
+		 *
+		 * This property is calculated automatically
+		 *
+		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		isTopModalPopup: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
+	events: /** @lends sap.ui.webc.main.Popup.prototype */ {
 
 		/**
 		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#before-open
+		 * @event sap.ui.webc.main.Popup#before-open
 		 * @allowPreventDefault
 		 */
 		"before-open": {},
@@ -144,7 +159,7 @@ const metadata = {
 		 * Fired after the component is opened. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#after-open
+		 * @event sap.ui.webc.main.Popup#after-open
 		 */
 		"after-open": {},
 
@@ -152,7 +167,7 @@ const metadata = {
 		 * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#before-close
+		 * @event sap.ui.webc.main.Popup#before-close
 		 * @allowPreventDefault
 		 * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
 		 */
@@ -166,7 +181,7 @@ const metadata = {
 		 * Fired after the component is closed. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#after-close
+		 * @event sap.ui.webc.main.Popup#after-close
 		 */
 		"after-close": {},
 
@@ -174,7 +189,7 @@ const metadata = {
 		 * Fired whenever the popup content area is scrolled
 		 *
 		 * @private
-		 * @event sap.ui.webcomponents.main.Popup#scroll
+		 * @event sap.ui.webc.main.Popup#scroll
 		 */
 		"scroll": {},
 	},
@@ -219,8 +234,8 @@ const pageScrollingBlockers = new Set();
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Popup
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Popup
+ * @extends sap.ui.webc.base.UI5Element
  * @public
  */
 class Popup extends UI5Element {
@@ -254,11 +269,11 @@ class Popup extends UI5Element {
 		return staticAreaStyles;
 	}
 
-	onEnterDOM() {
-		if (!this.isOpen()) {
-			this._blockLayerHidden = true;
-		}
+	onBeforeRendering() {
+		this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
+	}
 
+	onEnterDOM() {
 		ResizeHandler.register(this, this._resizeHandler);
 	}
 
@@ -351,6 +366,7 @@ class Popup extends UI5Element {
 
 	_onmouseup() {
 		this._root.tabIndex = -1;
+
 		if (this._shouldFocusRoot) {
 			if (isChrome()) {
 				this._root.focus();
@@ -367,7 +383,7 @@ class Popup extends UI5Element {
 		const firstFocusable = await getFirstFocusableElement(this);
 
 		if (firstFocusable) {
-			firstFocusable.focus();
+			firstFocusable.focus({ focusVisible: true });
 		} else {
 			this._root.focus();
 		}
@@ -381,7 +397,7 @@ class Popup extends UI5Element {
 		const lastFocusable = await getLastFocusableElement(this);
 
 		if (lastFocusable) {
-			lastFocusable.focus();
+			lastFocusable.focus({ focusVisible: true });
 		} else {
 			this._root.focus();
 		}
@@ -414,7 +430,7 @@ class Popup extends UI5Element {
 			if (element === this._root) {
 				element.tabIndex = -1;
 			}
-			element.focus();
+			element.focus({ focusVisible: true });
 		}
 	}
 
@@ -428,7 +444,7 @@ class Popup extends UI5Element {
 	}
 
 	isFocusWithin() {
-		return isFocusedElementWithinNode(this.shadowRoot.querySelector(".ui5-popup-root"));
+		return isFocusedElementWithinNode(this._root);
 	}
 
 	/**
@@ -527,7 +543,7 @@ class Popup extends UI5Element {
 			return;
 		}
 
-		this._focusedElementBeforeOpen.focus();
+		this._focusedElementBeforeOpen.focus({ focusVisible: true });
 		this._focusedElementBeforeOpen = null;
 	}
 
@@ -596,6 +612,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get _role() {
+		return "dialog";
+	}
+
 	get contentDOM() {
 		return this.shadowRoot.querySelector(".ui5-popup-content");
 	}
@@ -614,6 +634,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

package/dist/ProgressIndicator.d.ts

@@ -0,0 +1,121 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Icon from "./Icon.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * Shows the progress of a process in a graphical way. To indicate the progress,
+ * the inside of the component is filled with a color.
+ *
+ * <h3>Responsive Behavior</h3>
+ * You can change the size of the Progress Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ProgressIndicator.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ProgressIndicator
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-progress-indicator
+ * @public
+ * @since 1.0.0-rc.8
+ */
+declare class ProgressIndicator extends UI5Element {
+    /**
+     * Defines whether component is in disabled state.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.ProgressIndicator.prototype.disabled
+     * @defaultvalue false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the component value is shown.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.ProgressIndicator.prototype.hideValue
+     * @defaultvalue false
+     * @public
+     */
+    hideValue: boolean;
+    /**
+     * Specifies the numerical value in percent for the length of the component.
+     *
+     * <b>Note:</b>
+     * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
+     * @type {sap.ui.webc.base.types.Integer}
+     * @name sap.ui.webc.main.ProgressIndicator.prototype.value
+     * @defaultvalue 0
+     * @public
+     */
+    value: number;
+    /**
+     * Specifies the text value to be displayed in the bar.
+     *
+     * <b>Note:</b>
+     * <ul>
+     * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+     * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+     * </ul>
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.ProgressIndicator.prototype.displayValue
+     * @public
+     */
+    displayValue: string;
+    /**
+     * Defines the value state of the component.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>None</code></li>
+     * <li><code>Error</code></li>
+     * <li><code>Warning</code></li>
+     * <li><code>Success</code></li>
+     * <li><code>Information</code></li>
+     * </ul>
+     *
+     * @type {sap.ui.webc.base.types.ValueState}
+     * @name sap.ui.webc.main.ProgressIndicator.prototype.valueState
+     * @defaultvalue "None"
+     * @public
+     */
+    valueState: ValueState;
+    static i18nBundle: I18nBundle;
+    _previousValue: number;
+    _transitionDuration: number;
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    static get dependencies(): (typeof Icon)[];
+    constructor();
+    onBeforeRendering(): void;
+    valueStateTextMappings(): Record<string, string>;
+    valueStateIconMappings(): Record<string, string>;
+    get styles(): {
+        bar: {
+            width: string;
+            "transition-duration": string;
+        };
+    };
+    get classes(): {
+        root: {
+            "ui5-progress-indicator-max-value": boolean;
+            "ui5-progress-indicator-min-value": boolean;
+        };
+    };
+    get validatedValue(): number;
+    get showValueInRemainingBar(): boolean;
+    get shouldAnimate(): boolean;
+    get valueStateText(): string;
+    get showIcon(): boolean;
+    get valueStateIcon(): string;
+    get _ariaDisabled(): true | undefined;
+    static onDefine(): Promise<void>;
+}
+export default ProgressIndicator;