@ui5/webcomponents 2.22.0-rc.1 → 2.22.0-rc.2

package/dist/AvatarBadge.d.ts

@@ -41,6 +41,16 @@ declare class AvatarBadge extends UI5Element {
      * @public
      */
     icon?: string;
+    /**
+     * Defines the custom text alternative of the badge icon.
+     *
+     * **Note:** If not provided, the badge uses the icon accessible name.
+     * If no icon accessible name is available, a generic fallback text is used.
+     * @default undefined
+     * @public
+     * @since 2.22.0
+     */
+    accessibleName?: string;
     /**
      * Defines the state of the badge, which determines its styling.
      *
@@ -59,6 +69,10 @@ declare class AvatarBadge extends UI5Element {
      * @private
      */
     invalid: boolean;
-    onBeforeRendering(): void;
+    /**
+     * @private
+     */
+    effectiveAccessibleName?: string;
+    onBeforeRendering(): Promise<void>;
 }
 export default AvatarBadge;

package/dist/AvatarBadge.js

@@ -8,12 +8,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import { getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 // Template
 import AvatarBadgeTemplate from "./AvatarBadgeTemplate.js";
 // Styles
 import AvatarBadgeCss from "./generated/themes/AvatarBadge.css.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+const ICON_NOT_FOUND = "ICON_NOT_FOUND";
 /**
  * @class
  * ### Overview
@@ -65,22 +67,57 @@ let AvatarBadge = class AvatarBadge extends UI5Element {
          */
         this.invalid = false;
     }
-    onBeforeRendering() {
-        this.invalid = !this.icon || !getIconDataSync(this.icon);
+    async onBeforeRendering() {
+        const icon = this.icon;
+        if (!icon) {
+            this.invalid = true;
+            this.effectiveAccessibleName = undefined;
+            return;
+        }
+        const iconData = getIconDataSync(icon) || await getIconData(icon);
+        this.invalid = !iconData || iconData === ICON_NOT_FOUND;
+        if (this.invalid) {
+            this.effectiveAccessibleName = undefined;
+        }
+        else if (this.accessibleName) {
+            // User-provided accessible name takes precedence
+            this.effectiveAccessibleName = this.accessibleName;
+        }
+        else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {
+            // Use the icon's registered i18n label (e.g., message-error -> "Error")
+            if (iconData.packageName) {
+                const i18nBundle = await getI18nBundle(iconData.packageName);
+                this.effectiveAccessibleName = i18nBundle.getText(iconData.accData) || undefined;
+            }
+            else {
+                this.effectiveAccessibleName = iconData.accData.defaultText || undefined;
+            }
+        }
+        else {
+            // Derive from icon name (e.g., "edit" -> "Edit")
+            this.effectiveAccessibleName = icon.charAt(0).toUpperCase() + icon.slice(1);
+        }
     }
 };
 __decorate([
     property()
 ], AvatarBadge.prototype, "icon", void 0);
+__decorate([
+    property()
+], AvatarBadge.prototype, "accessibleName", void 0);
 __decorate([
     property()
 ], AvatarBadge.prototype, "state", void 0);
 __decorate([
     property({ type: Boolean })
 ], AvatarBadge.prototype, "invalid", void 0);
+__decorate([
+    property({ noAttribute: true })
+], AvatarBadge.prototype, "effectiveAccessibleName", void 0);
 AvatarBadge = __decorate([
     customElement({
         tag: "ui5-avatar-badge",
+        languageAware: true,
         renderer: jsxRenderer,
         styles: AvatarBadgeCss,
         template: AvatarBadgeTemplate,

package/dist/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","sourceRoot":"","sources":["../src/AvatarBadge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wDAAwD,CAAC;AAEzF,WAAW;AACX,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAOH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAcC;;;;;;;;;;;;WAYG;QAEH,UAAK,GAAoB,UAAU,CAAC,IAAI,CAAC;QAEzC;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;IAKjB,CAAC;IAHA,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;CACD,CAAA;AA3BA;IADC,QAAQ,EAAE;yCACG;AAgBd;IADC,QAAQ,EAAE;0CAC8B;AAMzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAlCX,WAAW;IANhB,aAAa,CAAC;QACd,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC7B,CAAC;GACI,WAAW,CAuChB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\n\n// Template\nimport AvatarBadgeTemplate from \"./AvatarBadgeTemplate.js\";\n\n// Styles\nimport AvatarBadgeCss from \"./generated/themes/AvatarBadge.css.js\";\n\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\n * The badge can display an icon and supports different states for visual affordance.\n *\n * ### Usage\n *\n * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n *\n * ```html\n * <ui5-avatar>\n *   <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n * </ui5-avatar>\n * ```\n *\n * ### Keyboard Handling\n *\n * The badge does not receive keyboard focus.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.19.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar-badge\",\n\trenderer: jsxRenderer,\n\tstyles: AvatarBadgeCss,\n\ttemplate: AvatarBadgeTemplate,\n})\nclass AvatarBadge extends UI5Element {\n\t/**\n\t * Defines the icon name to be displayed inside the badge.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the state of the badge, which determines its styling.\n\t *\n\t * Available options:\n\t * - `None` (default) - Standard appearance\n\t * - `Positive` - Green, used for success/approved states\n\t * - `Critical` - Orange, used for warning states\n\t * - `Negative` - Red, used for error/rejected states\n\t * - `Information` - Blue, used for informational states\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tstate: `${ValueState}` = ValueState.None;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\tonBeforeRendering() {\n\t\tthis.invalid = !this.icon || !getIconDataSync(this.icon);\n\t}\n}\n\nAvatarBadge.define();\n\nexport default AvatarBadge;\n"]}
+{"version":3,"file":"AvatarBadge.js","sourceRoot":"","sources":["../src/AvatarBadge.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\n// Template\nimport AvatarBadgeTemplate from \"./AvatarBadgeTemplate.js\";\n\n// Styles\nimport AvatarBadgeCss from \"./generated/themes/AvatarBadge.css.js\";\n\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\n * The badge can display an icon and supports different states for visual affordance.\n *\n * ### Usage\n *\n * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n *\n * ```html\n * <ui5-avatar>\n *   <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n * </ui5-avatar>\n * ```\n *\n * ### Keyboard Handling\n *\n * The badge does not receive keyboard focus.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.19.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar-badge\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarBadgeCss,\n\ttemplate: AvatarBadgeTemplate,\n})\nclass AvatarBadge extends UI5Element {\n\t/**\n\t * Defines the icon name to be displayed inside the badge.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the custom text alternative of the badge icon.\n\t *\n\t * **Note:** If not provided, the badge uses the icon accessible name.\n\t * If no icon accessible name is available, a generic fallback text is used.\n\t * @default undefined\n\t * @public\n \t * @since 2.22.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the state of the badge, which determines its styling.\n\t *\n\t * Available options:\n\t * - `None` (default) - Standard appearance\n\t * - `Positive` - Green, used for success/approved states\n\t * - `Critical` - Orange, used for warning states\n\t * - `Negative` - Red, used for error/rejected states\n\t * - `Information` - Blue, used for informational states\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tstate: `${ValueState}` = ValueState.None;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tasync onBeforeRendering() {\n\t\tconst icon = this.icon;\n\t\tif (!icon) {\n\t\t\tthis.invalid = true;\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\tconst iconData = getIconDataSync(icon) || await getIconData(icon);\n\t\tthis.invalid = !iconData || iconData === ICON_NOT_FOUND;\n\n\t\tif (this.invalid) {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t} else if (this.accessibleName) {\n\t\t\t// User-provided accessible name takes precedence\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {\n\t\t\t// Use the icon's registered i18n label (e.g., message-error -> \"Error\")\n\t\t\tif (iconData.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(iconData.packageName);\n\t\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(iconData.accData) || undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveAccessibleName = iconData.accData.defaultText || undefined;\n\t\t\t}\n\t\t} else {\n\t\t\t// Derive from icon name (e.g., \"edit\" -> \"Edit\")\n\t\t\tthis.effectiveAccessibleName = icon.charAt(0).toUpperCase() + icon.slice(1);\n\t\t}\n\t}\n}\n\nAvatarBadge.define();\n\nexport default AvatarBadge;\n"]}

package/dist/AvatarBadgeTemplate.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
 import Icon from "./Icon.js";
 export default function AvatarBadgeTemplate() {
-    return (_jsx(_Fragment, { children: !this.invalid && (_jsx(Icon, { name: this.icon, class: "ui5-avatar-badge-icon", mode: "Decorative" })) }));
+    return (_jsx(_Fragment, { children: !this.invalid && (_jsx(Icon, { name: this.icon, class: "ui5-avatar-badge-icon", accessibleName: this.effectiveAccessibleName, showTooltip: true, mode: "Image" })) }));
 }
 //# sourceMappingURL=AvatarBadgeTemplate.js.map

package/dist/AvatarBadgeTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadgeTemplate.js","sourceRoot":"","sources":["../src/AvatarBadgeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,4BACE,CAAC,IAAI,CAAC,OAAO,IAAI,CACjB,KAAC,IAAI,IACJ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,YAAY,GACV,CACR,GACC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type AvatarBadge from \"./AvatarBadge.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function AvatarBadgeTemplate(this: AvatarBadge) {\n\treturn (\n\t\t<>\n\t\t\t{!this.invalid && (\n\t\t\t\t<Icon\n\t\t\t\t\tname={this.icon}\n\t\t\t\t\tclass=\"ui5-avatar-badge-icon\"\n\t\t\t\t\tmode=\"Decorative\"\n\t\t\t\t></Icon>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"AvatarBadgeTemplate.js","sourceRoot":"","sources":["../src/AvatarBadgeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,4BACE,CAAC,IAAI,CAAC,OAAO,IAAI,CACjB,KAAC,IAAI,IACJ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,uBAAuB,EAC7B,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAC5C,WAAW,EAAE,IAAI,EACjB,IAAI,EAAC,OAAO,GACL,CACR,GACC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type AvatarBadge from \"./AvatarBadge.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function AvatarBadgeTemplate(this: AvatarBadge) {\n\treturn (\n\t\t<>\n\t\t\t{!this.invalid && (\n\t\t\t\t<Icon\n\t\t\t\t\tname={this.icon}\n\t\t\t\t\tclass=\"ui5-avatar-badge-icon\"\n\t\t\t\t\taccessibleName={this.effectiveAccessibleName}\n\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\tmode=\"Image\"\n\t\t\t\t></Icon>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"]}

package/dist/ComboBox.js

@@ -961,9 +961,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (!this._useSelectedValue && item.value !== undefined) {
             this._useSelectedValue = true;
         }
-        if (this._useSelectedValue) {
+        // Always set selectedValue when the item has a value property, regardless of _useSelectedValue state
+        if (item.value !== undefined) {
             this.selectedValue = item.value;
         }
+        else if (this._useSelectedValue) {
+            // Only clear selectedValue if we were using it before
+            this.selectedValue = undefined;
+        }
         if (!item.selected) {
             this.fireDecoratorEvent("selection-change", {
                 item,