@ui5/webcomponents 0.0.0-49cef2d02 → 0.0.0-4a28ecb24

package/src/features/InputSuggestions.ts

@@ -1,7 +1,6 @@
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 // @ts-ignore
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
@@ -9,7 +8,6 @@ import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generat
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import List from "../List.js";
 import type { ClickEventDetail, SelectionChangeEventDetail } from "../List.js";
-// @ts-ignore
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
@@ -21,7 +19,6 @@ import SuggestionListItem from "../SuggestionListItem.js";
 
 import {
 	LIST_ITEM_POSITION,
-	// @ts-ignore
 } from "../generated/i18n/i18n-defaults.js";
 import type ListItemType from "../types/ListItemType.js";
 import type ListItemBase from "../ListItemBase.js";
@@ -59,8 +56,6 @@ type SuggestionsAccInfo = {
 	itemText: string;
 }
 
-type TempResponsivePopover = Popover; // change to ResponsivePopover when implemented;
-
 /**
  * A class to manage the <code>Input</code suggestion items.
  *
@@ -75,7 +70,7 @@ class Suggestions {
 	highlight: boolean;
 	selectedItemIndex: number;
 	accInfo?: SuggestionsAccInfo;
-	responsivePopover?: TempResponsivePopover;
+	responsivePopover?: ResponsivePopover;
 	_scrollContainer?: HTMLElement;
 	_handledPress?: boolean;
 	attachedAfterOpened?: boolean;
@@ -583,7 +578,7 @@ class Suggestions {
 		}
 
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem!.querySelector<TempResponsivePopover>("[ui5-responsive-popover]")!;
+		this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 		return this.responsivePopover;
 	}
 
@@ -592,7 +587,7 @@ class Suggestions {
 			return "";
 		}
 
-		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION as I18nText, this.accInfo.currentPos, this.accInfo.listSize);
+		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize);
 
 		return `${this.accInfo.itemText} ${itemPositionText}`;
 	}

package/src/i18n/messagebundle.properties

@@ -134,7 +134,7 @@ FILEUPLOADER_TITLE=Upload File
 GROUP_HEADER_TEXT=Group Header
 
 #XACT: ARIA announcement for the Select`s roledescription attribute
-SELECT_ROLE_DESCRIPTION=Select Combo Box
+SELECT_ROLE_DESCRIPTION=Listbox
 
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options

package/src/themes/Avatar.css

@@ -131,77 +131,77 @@
 :host(:not([color-scheme])),
 :host(:not([_has-image])),
 :host([_color-scheme="Accent6"]),
-:host([color-scheme="Accent6"]) {
+:host([ui5-avatar][color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 	color: var(--ui5-avatar-accent6-color);
 	border-color: var(--ui5-avatar-accent6-border-color);
 }
 
 :host([_color-scheme="Accent1"]),
-:host([color-scheme="Accent1"]) {
+:host([ui5-avatar][color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 	color: var(--ui5-avatar-accent1-color);
 	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
 :host([_color-scheme="Accent2"]),
-:host([color-scheme="Accent2"]) {
+:host([ui5-avatar][color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 	color: var(--ui5-avatar-accent2-color);
 	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
 :host([_color-scheme="Accent3"]),
-:host([color-scheme="Accent3"]) {
+:host([ui5-avatar][color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 	color: var(--ui5-avatar-accent3-color);
 	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
 :host([_color-scheme="Accent4"]),
-:host([color-scheme="Accent4"]) {
+:host([ui5-avatar][color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 	color: var(--ui5-avatar-accent4-color);
 	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
 :host([_color-scheme="Accent5"]),
-:host([color-scheme="Accent5"]) {
+:host([ui5-avatar][color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 	color: var(--ui5-avatar-accent5-color);
 	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
 :host([_color-scheme="Accent7"]),
-:host([color-scheme="Accent7"]) {
+:host([ui5-avatar][color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 	color: var(--ui5-avatar-accent7-color);
 	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
 :host([_color-scheme="Accent8"]),
-:host([color-scheme="Accent8"]) {
+:host([ui5-avatar][color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 	color: var(--ui5-avatar-accent8-color);
 	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
 :host([_color-scheme="Accent9"]),
-:host([color-scheme="Accent9"]) {
+:host([ui5-avatar][color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 	color: var(--ui5-avatar-accent9-color);
 	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
 :host([_color-scheme="Accent10"]),
-:host([color-scheme="Accent10"]) {
+:host([ui5-avatar][color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 	color: var(--ui5-avatar-accent10-color);
 	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
 :host([_color-scheme="Placeholder"]),
-:host([color-scheme="Placeholder"]) {
+:host([ui5-avatar][color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
 	border-color: var(--ui5-avatar-placeholder-border-color);

package/src/types/PopupAccessibleRole.ts

@@ -0,0 +1,34 @@
+/**
+ * Popup accessible roles.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.PopupAccessibleRole
+ */
+enum PopupAccessibleRole {
+
+	/**
+	 * Represents no ARIA role.
+	 * @public
+	 * @type {None}
+	 */
+	None = "None",
+
+	/**
+	 * Represents the ARIA role "dialog".
+	 * @public
+	 * @type {Dialog}
+	 */
+	Dialog = "Dialog",
+
+	/**
+	 * Represents the ARIA role "alertdialog".
+	 * @public
+	 * @type {AlertDialog}
+	 */
+	AlertDialog = "AlertDialog",
+}
+
+export default PopupAccessibleRole;

package/.dev-server-port

@@ -1 +0,0 @@
-8080

package/src/Option.js

@@ -1,136 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-
-/**
-* @public
-*/
-const metadata = {
-	tag: "ui5-option",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webc.main.Option.prototype */ {
-
-		/**
-		 * Defines the selected state of the component.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is in disabled state.
-		 * <br><br>
-		 * <b>Note:</b> A disabled component is hidden.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.12
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the tooltip of the component.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.1.0
-		 */
-		title: {
-			type: String,
-		},
-
-		/**
-		 * Defines the <code>icon</code> source URI.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		icon: {
-			type: String,
-			defaultValue: null,
-		},
-
-		/**
-		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
-		 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		value: {
-			type: String,
-		},
-
-		/**
-		 * Defines the additional text displayed at the end of the option element.
-		 * @type {string}
-		 * @public
-		 * @since 1.3.0
-		 */
-		 additionalText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the focused state of the component.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.13
-		 * @private
-		 */
-		_focused: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webc.main.Option.prototype */ {
-		/**
-		 * Defines the text of the component.
-		 * <br><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,
-		},
-	},
-	events: /** @lends sap.ui.webc.main.Option.prototype */ {},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Option
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-option
- * @implements sap.ui.webc.main.ISelectOption
- * @public
- */
-class Option extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
-}
-
-Option.define();
-
-export default Option;