@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/Interfaces.js

@@ -88,6 +88,15 @@ const IInputSuggestionItem = "sap.ui.webcomponents.main.IInputSuggestionItem";
  */
 const IListItem = "sap.ui.webcomponents.main.IListItem";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-menu</code> as items
+ *
+ * @name sap.ui.webcomponents.main.IMenuItem
+ * @interface
+ * @public
+ */
+const IMenuItem = "sap.ui.webcomponents.main.IMenuItem";
+
 /**
  * Interface for components that may be slotted inside a <code>ui5-multi-combobox</code> as items
  *
@@ -180,6 +189,7 @@ export {
 	IInput,
 	IInputSuggestionItem,
 	IListItem,
+	IMenuItem,
 	IMultiComboBoxItem,
 	ISegmentedButtonItem,
 	ISelectOption,

package/dist/Label.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -20,7 +19,9 @@ const metadata = {
 		/**
 		 * Defines whether an asterisk character is added to the component text.
 		 * <br><br>
-		 * <b>Note:</b> Usually indicates that user input is required.
+		 * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+		 * In that case the <code>required</> property of
+		 * the corresponding input should also be set.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -38,7 +39,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -145,8 +146,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const ownerNode = findNodeOwner(this);
-		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
+		const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/dist/Label2.d.ts

@@ -0,0 +1,134 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import WrappingType from "./types/WrappingType.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-label</code> is a component used to represent a label,
+ * providing valuable information to the user.
+ * Usually it is placed next to a value holder, such as a text field.
+ * It informs the user about what data is displayed or expected in the value holder.
+ * <br><br>
+ * The <code>ui5-label</code> appearance can be influenced by properties,
+ * such as <code>required</code> and <code>wrappingType</code>.
+ * The appearance of the Label can be configured in a limited way by using the design property.
+ * For a broader choice of designs, you can use custom styles.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Label";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Label
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-label
+ * @public
+ */
+declare class Label extends UI5Element {
+    for?: string;
+    static get metadata(): {
+        tag: string;
+        properties: {
+            /**
+             * Defines whether an asterisk character is added to the component text.
+             * <br><br>
+             * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+             * In that case the <code>required</> property of
+             * the corresponding input should also be set.
+             *
+             * @type {boolean}
+             * @defaultvalue false
+             * @public
+             */
+            required: {
+                type: BooleanConstructor;
+            };
+            /**
+             * Defines how the text of a component will be displayed when there is not enough space.
+             * Available options are:
+             * <ul>
+             * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+             * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+             * </ul>
+             *
+             * @type {sap.ui.webcomponents.main.types.WrappingType}
+             * @defaultvalue "None"
+             * @public
+             */
+            wrappingType: {
+                type: typeof WrappingType;
+                defaultValue: WrappingType;
+            };
+            /**
+             * Defines whether colon is added to the component text.
+             * <br><br>
+             * <b>Note:</b> Usually used in forms.
+             * @type {boolean}
+             * @defaultvalue false
+             * @public
+             */
+            showColon: {
+                type: BooleanConstructor;
+            };
+            /**
+             * Defines the labeled input by providing its ID.
+             * <br><br>
+             * <b>Note:</b> Can be used with both <code>ui5-input</code> and native input.
+             *
+             * @type {string}
+             * @defaultvalue ""
+             * @public
+             */
+            for: {
+                type: StringConstructor;
+            };
+        };
+        slots: {
+            /**
+             * Defines the text of the component.
+             * <br><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
+             * @public
+             */
+            default: {
+                type: {
+                    new (): Node;
+                    prototype: Node;
+                    readonly ATTRIBUTE_NODE: number;
+                    readonly CDATA_SECTION_NODE: number;
+                    readonly COMMENT_NODE: number;
+                    readonly DOCUMENT_FRAGMENT_NODE: number;
+                    readonly DOCUMENT_NODE: number;
+                    readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+                    readonly DOCUMENT_POSITION_CONTAINS: number;
+                    readonly DOCUMENT_POSITION_DISCONNECTED: number;
+                    readonly DOCUMENT_POSITION_FOLLOWING: number;
+                    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+                    readonly DOCUMENT_POSITION_PRECEDING: number;
+                    readonly DOCUMENT_TYPE_NODE: number;
+                    readonly ELEMENT_NODE: number;
+                    readonly ENTITY_NODE: number;
+                    readonly ENTITY_REFERENCE_NODE: number;
+                    readonly NOTATION_NODE: number;
+                    readonly PROCESSING_INSTRUCTION_NODE: number;
+                    readonly TEXT_NODE: number;
+                };
+            };
+        };
+    };
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    get classes(): {
+        textWrapper: {
+            "ui5-label-text-wrapper": boolean;
+            "ui5-label-text-wrapper-safari": boolean;
+        };
+    };
+    _onclick(): void;
+}
+export default Label;

package/dist/Label2.js

@@ -0,0 +1,142 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import WrappingType from "./types/WrappingType.js";
+// Template
+import LabelTemplate from "./generated/templates/LabelTemplate.lit.js";
+// Styles
+import labelCss from "./generated/themes/Label.css.js";
+/**
+ * @public
+ */
+const metadata = {
+    tag: "ui5-label",
+    properties: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
+        /**
+         * Defines whether an asterisk character is added to the component text.
+         * <br><br>
+         * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+         * In that case the <code>required</> property of
+         * the corresponding input should also be set.
+         *
+         * @type {boolean}
+         * @defaultvalue false
+         * @public
+         */
+        required: {
+            type: Boolean,
+        },
+        /**
+         * Defines how the text of a component will be displayed when there is not enough space.
+         * Available options are:
+         * <ul>
+         * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+         * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+         * </ul>
+         *
+         * @type {sap.ui.webcomponents.main.types.WrappingType}
+         * @defaultvalue "None"
+         * @public
+         */
+        wrappingType: {
+            type: WrappingType,
+            defaultValue: WrappingType.None,
+        },
+        /**
+         * Defines whether colon is added to the component text.
+         * <br><br>
+         * <b>Note:</b> Usually used in forms.
+         * @type {boolean}
+         * @defaultvalue false
+         * @public
+         */
+        showColon: {
+            type: Boolean,
+        },
+        /**
+         * Defines the labeled input by providing its ID.
+         * <br><br>
+         * <b>Note:</b> Can be used with both <code>ui5-input</code> and native input.
+         *
+         * @type {string}
+         * @defaultvalue ""
+         * @public
+         */
+        "for": {
+            type: String,
+        },
+    },
+    slots: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
+        /**
+         * Defines the text of the component.
+         * <br><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
+         * @public
+         */
+        "default": {
+            type: Node,
+        },
+    },
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-label</code> is a component used to represent a label,
+ * providing valuable information to the user.
+ * Usually it is placed next to a value holder, such as a text field.
+ * It informs the user about what data is displayed or expected in the value holder.
+ * <br><br>
+ * The <code>ui5-label</code> appearance can be influenced by properties,
+ * such as <code>required</code> and <code>wrappingType</code>.
+ * The appearance of the Label can be configured in a limited way by using the design property.
+ * For a broader choice of designs, you can use custom styles.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Label";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Label
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-label
+ * @public
+ */
+class Label extends UI5Element {
+    static get metadata() {
+        return metadata;
+    }
+    static get render() {
+        return litRender;
+    }
+    static get template() {
+        return LabelTemplate;
+    }
+    static get styles() {
+        return labelCss;
+    }
+    get classes() {
+        return {
+            textWrapper: {
+                "ui5-label-text-wrapper": true,
+                "ui5-label-text-wrapper-safari": isSafari(),
+            },
+        };
+    }
+    _onclick() {
+        if (!this.for) {
+            return;
+        }
+        const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
+        if (elementToFocus) {
+            elementToFocus.focus();
+        }
+    }
+}
+Label.define();
+export default Label;
+//# sourceMappingURL=Label2.js.map

package/dist/Label2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label2.js","sourceRoot":"","sources":["../src/Label2.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,WAAW;AACX,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;GAEG;AACH,MAAM,QAAQ,GAAG;IAChB,GAAG,EAAE,WAAW;IAChB,UAAU,EAAE,uDAAuD,CAAE;QAEpE;;;;;;;;;;WAUG;QACH,QAAQ,EAAE;YACT,IAAI,EAAE,OAAO;SACb;QAED;;;;;;;;;;;WAWG;QACF,YAAY,EAAE;YACd,IAAI,EAAE,YAAY;YAClB,YAAY,EAAE,YAAY,CAAC,IAAI;SAC/B;QAED;;;;;;;WAOG;QAEH,SAAS,EAAE;YACV,IAAI,EAAE,OAAO;SACb;QAED;;;;;;;;WAQG;QACH,KAAK,EAAE;YACN,IAAI,EAAE,MAAM;SACZ;KACD;IACD,KAAK,EAAE,uDAAuD,CAAC;QAC9D;;;;;;;WAOG;QACH,SAAS,EAAE;YACV,IAAI,EAAE,IAAI;SACV;KACD;CACD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,KAAM,SAAQ,UAAU;IAG7B,MAAM,KAAK,QAAQ;QAClB,OAAO,QAAQ,CAAC;IACjB,CAAC;IAED,MAAM,KAAK,MAAM;QAChB,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,MAAM,KAAK,QAAQ;QAClB,OAAO,aAAa,CAAC;IACtB,CAAC;IAED,MAAM,KAAK,MAAM;QAChB,OAAO,QAAQ,CAAC;IACjB,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,WAAW,EAAE;gBACZ,wBAAwB,EAAE,IAAI;gBAC9B,+BAA+B,EAAE,QAAQ,EAAE;aAC3C;SACD,CAAC;IACH,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACd,OAAO;SACP;QAED,MAAM,cAAc,GAAI,IAAI,CAAC,WAAW,EAAkB,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAgB,CAAC;QACxG,IAAI,cAAc,EAAE;YACnB,cAAc,CAAC,KAAK,EAAE,CAAC;SACvB;IACF,CAAC;CACD;AAED,KAAK,CAAC,MAAM,EAAE,CAAC;AAEf,eAAe,KAAK,CAAC"}

package/dist/Link.js

@@ -20,7 +20,7 @@ import linkCss from "./generated/themes/Link.css.js";
 const metadata = {
 	tag: "ui5-link",
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Link.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Link.prototype */  {
 
 		/**
 		 * Defines whether the component is disabled.
@@ -76,7 +76,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.
 		 *
-		 * @type {LinkDesign}
+		 * @type {sap.ui.webcomponents.main.types.LinkDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -93,7 +93,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -103,7 +103,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -128,12 +128,17 @@ const metadata = {
 
 		/**
 		 * Defines the ARIA role of the component.
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.15
+		 *
+		 * <b>Note:</b> Use the "button" role in cases when navigation is not expected to occur and the href property is not defined.
+		 *
+		 * @type {string}
+		 * @defaultvalue "link"
+		 * @public
+		 * @since 1.9.0
 		 */
-		 accessibleRole: {
+		accessibleRole: {
 			type: String,
+			defaultValue: "link",
 		},
 
 		/**
@@ -206,9 +211,20 @@ const metadata = {
 		 *
 		 * @event
 		 * @public
-		 * @native
+		 * @allowPreventDefault
+		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 */
-		click: {},
+		click: {
+			detail: {
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
+			},
+		},
 	},
 };
 
@@ -323,7 +339,7 @@ class Link extends UI5Element {
 	}
 
 	get effectiveAccRole() {
-		return this.accessibleRole || "link";
+		return this.accessibleRole.toLowerCase();
 	}
 
 	static async onDefine() {
@@ -331,7 +347,26 @@ class Link extends UI5Element {
 	}
 
 	_onclick(event) {
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = event;
+
+		event.stopImmediatePropagation();
 		event.isMarked = "link";
+
+		const executeEvent = this.fireEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		}, true);
+
+		if (!executeEvent) {
+			event.preventDefault();
+		}
 	}
 
 	_onfocusin(event) {
@@ -344,13 +379,8 @@ class Link extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
-			const executeEvent = this.fireEvent("click", null, true);
-
-			if (executeEvent) {
-				event.preventDefault();
-				this.href && window.open(this.href, this.target);
-			}
+		if (isEnter(event) && !this.href) {
+			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
 		}
@@ -364,11 +394,13 @@ class Link extends UI5Element {
 			return;
 		}
 
-		event.preventDefault();
+		this._onclick(event);
+
+		if (this.href && !event.defaultPrevented) {
+			const customEvent = new MouseEvent("click");
 
-		const executeEvent = this.fireEvent("click", null, true);
-		if (executeEvent) {
-			this.href && window.open(this.href, this.target);
+			customEvent.stopImmediatePropagation();
+			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}
 }