@ui5/webcomponents 0.0.0-037d08c67

package/dist/Avatar.js

@@ -0,0 +1,407 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Avatar_1;
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+// Template
+import AvatarTemplate from "./AvatarTemplate.js";
+import { AVATAR_TOOLTIP, AVATAR_TYPE_BUTTON, AVATAR_TYPE_IMAGE, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import AvatarCss from "./generated/themes/Avatar.css.js";
+import AvatarSize from "./types/AvatarSize.js";
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * An image-like component that has different display options for representing images and icons
+ * in different shapes and sizes, depending on the use case.
+ *
+ * The shape can be circular or square. There are several predefined sizes, as well as an option to
+ * set a custom size.
+ *
+ * ### Keyboard Handling
+ *
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/Avatar.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.6
+ * @implements {IAvatarGroupItem}
+ * @public
+ */
+let Avatar = Avatar_1 = class Avatar extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines whether the component is disabled.
+         * A disabled component can't be pressed or
+         * focused, and it is not in the tab chain.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines if the avatar is interactive (focusable and pressable).
+         *
+         * **Note:** This property won't have effect if the `disabled`
+         * property is set to `true`.
+         * @default false
+         * @public
+         */
+        this.interactive = false;
+        /**
+         * Defines the name of the fallback icon, which should be displayed in the following cases:
+         *
+         * 	- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
+         * 	- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+         * 	- If the image src is wrong.
+         *
+         * **Note:** If not set, a default fallback icon "employee" is displayed.
+         *
+         * **Note:** You should import the desired icon first, then use its name as "fallback-icon".
+         *
+         * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+         *
+         * `<ui5-avatar fallback-icon="alert">`
+         *
+         * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         * @default "employee"
+         * @public
+         */
+        this.fallbackIcon = "employee";
+        /**
+         * Defines the shape of the component.
+         * @default "Circle"
+         * @public
+         */
+        this.shape = "Circle";
+        /**
+         * Defines predefined size of the component.
+         * @default "S"
+         * @public
+         */
+        this.size = "S";
+        /**
+         * Defines the background color of the desired image.
+         * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
+         *
+         * @default "Auto"
+         * @public
+         */
+        this.colorScheme = "Auto";
+        /**
+         * @private
+         */
+        this._colorScheme = "Auto";
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+         * The following field is supported:
+         *
+         * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+         * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         *
+         * @public
+         * @since 2.0.0
+         * @default {}
+         */
+        this.accessibilityAttributes = {};
+        /**
+         * @private
+         */
+        this._hasImage = false;
+        /**
+         * @private
+         */
+        this._imageLoadError = false;
+        this._handleResizeBound = this.handleResize.bind(this);
+        this._onImageLoadBound = this._onImageLoad.bind(this);
+        this._onImageErrorBound = this._onImageError.bind(this);
+    }
+    onBeforeRendering() {
+        this._attachImageEventHandlers();
+        this._hasImage = this.hasImage;
+    }
+    get tabindex() {
+        if (this.forcedTabIndex) {
+            return parseInt(this.forcedTabIndex);
+        }
+        return this._interactive ? 0 : undefined;
+    }
+    /**
+     * Returns the effective avatar size.
+     * @default "S"
+     * @private
+     */
+    get effectiveSize() {
+        // we read the attribute, because the "size" property will always have a default value
+        return this.getAttribute("size") || AvatarSize.S;
+    }
+    /**
+     * Returns the effective background color.
+     * @default "Auto"
+     * @private
+     */
+    get effectiveBackgroundColor() {
+        // we read the attribute, because the "background-color" property will always have a default value
+        return this.getAttribute("color-scheme") || this._colorScheme;
+    }
+    get _role() {
+        return this._interactive ? "button" : "img";
+    }
+    get _ariaHasPopup() {
+        return this._getAriaHasPopup();
+    }
+    get _interactive() {
+        return this.interactive && !this.disabled;
+    }
+    get validInitials() {
+        // initials should consist of only 1,2 or 3 latin letters
+        const validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/, areInitialsValid = this.initials && validInitials.test(this.initials);
+        if (areInitialsValid) {
+            return this.initials;
+        }
+        return null;
+    }
+    get accessibleNameText() {
+        if (this.accessibleName) {
+            return this.accessibleName;
+        }
+        const defaultLabel = Avatar_1.i18nBundle.getText(AVATAR_TOOLTIP);
+        return this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;
+    }
+    get hasImage() {
+        return !!this.image.length && !this._imageLoadError;
+    }
+    get imageEl() {
+        return this.image?.[0] instanceof HTMLImageElement ? this.image[0] : null;
+    }
+    get initialsContainer() {
+        return this.getDomRef().querySelector(".ui5-avatar-initials");
+    }
+    get fallBackIconDomRef() {
+        return this.getDomRef().querySelector(".ui5-avatar-icon-fallback");
+    }
+    async onAfterRendering() {
+        await renderFinished();
+        if (this.initials && !this.icon) {
+            this._checkInitials();
+        }
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+        this.initialsContainer && ResizeHandler.register(this.initialsContainer, this._handleResizeBound);
+    }
+    onExitDOM() {
+        this.initialsContainer && ResizeHandler.deregister(this.initialsContainer, this._handleResizeBound);
+        this._detachImageEventHandlers();
+    }
+    handleResize() {
+        if (this.initials && !this.icon) {
+            this._checkInitials();
+        }
+    }
+    _checkInitials() {
+        const avatar = this.getDomRef();
+        const avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+        const validInitials = this.validInitials && avatarInitials && avatarInitials.scrollWidth <= avatar.scrollWidth;
+        if (validInitials) {
+            this.showInitials();
+            return;
+        }
+        this.showFallbackIcon();
+    }
+    showFallbackIcon() {
+        this.initialsContainer?.classList.add("ui5-avatar-initials-hidden");
+        this.fallBackIconDomRef?.classList.remove("ui5-avatar-fallback-icon-hidden");
+    }
+    showInitials() {
+        this.initialsContainer?.classList.remove("ui5-avatar-initials-hidden");
+        this.fallBackIconDomRef?.classList.add("ui5-avatar-fallback-icon-hidden");
+    }
+    _onclick(e) {
+        e.stopPropagation();
+        this._fireClick();
+    }
+    _onkeydown(e) {
+        if (!this._interactive) {
+            return;
+        }
+        if (isEnter(e)) {
+            this._fireClick();
+        }
+        if (isSpace(e)) {
+            e.preventDefault(); // prevent scrolling
+        }
+    }
+    _onkeyup(e) {
+        if (this._interactive && !e.shiftKey && isSpace(e)) {
+            this._fireClick();
+        }
+    }
+    _fireClick() {
+        this.fireDecoratorEvent("click");
+    }
+    _getAriaHasPopup() {
+        const ariaHaspopup = this.accessibilityAttributes.hasPopup;
+        if (!this._interactive || !ariaHaspopup) {
+            return;
+        }
+        return ariaHaspopup;
+    }
+    _attachImageEventHandlers() {
+        const imgEl = this.imageEl;
+        if (!imgEl) {
+            this._imageLoadError = false;
+            return;
+        }
+        // Remove previous handlers to avoid duplicates
+        imgEl.removeEventListener("load", this._onImageLoadBound);
+        imgEl.removeEventListener("error", this._onImageErrorBound);
+        // Attach new handlers
+        imgEl.addEventListener("load", this._onImageLoadBound);
+        imgEl.addEventListener("error", this._onImageErrorBound);
+        // Check existing image state
+        this._checkExistingImageState();
+    }
+    _checkExistingImageState() {
+        const imgEl = this.imageEl;
+        if (!imgEl) {
+            this._imageLoadError = false;
+            return;
+        }
+        if (imgEl.complete && imgEl.naturalWidth === 0) {
+            this._imageLoadError = true; // Already broken
+        }
+        else if (imgEl.complete && imgEl.naturalWidth > 0) {
+            this._imageLoadError = false; // Already loaded
+        }
+        else {
+            this._imageLoadError = false; // Pending load
+        }
+    }
+    _detachImageEventHandlers() {
+        const imgEl = this.imageEl;
+        if (!imgEl) {
+            return;
+        }
+        imgEl.removeEventListener("load", this._onImageLoadBound);
+        imgEl.removeEventListener("error", this._onImageErrorBound);
+    }
+    _onImageLoad(e) {
+        if (e.target !== this.imageEl) {
+            e.target?.removeEventListener("load", this._onImageLoadBound);
+            return;
+        }
+        this._imageLoadError = false;
+    }
+    _onImageError(e) {
+        if (e.target !== this.imageEl) {
+            e.target?.removeEventListener("error", this._onImageErrorBound);
+            return;
+        }
+        this._imageLoadError = true;
+    }
+    get accessibilityInfo() {
+        return {
+            role: this._role,
+            type: this.interactive ? Avatar_1.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar_1.i18nBundle.getText(AVATAR_TYPE_IMAGE),
+            description: this.accessibleNameText,
+            disabled: this.disabled,
+        };
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "interactive", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "icon", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "fallbackIcon", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "initials", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "shape", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "size", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "colorScheme", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "_colorScheme", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Object })
+], Avatar.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Avatar.prototype, "forcedTabIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "_hasImage", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Avatar.prototype, "_imageLoadError", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Avatar.prototype, "image", void 0);
+__decorate([
+    slot()
+], Avatar.prototype, "badge", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Avatar, "i18nBundle", void 0);
+Avatar = Avatar_1 = __decorate([
+    customElement({
+        tag: "ui5-avatar",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: AvatarCss,
+        template: AvatarTemplate,
+    })
+    /**
+     * Fired on mouseup, space and enter if avatar is interactive
+     *
+     * **Note:** The event will not be fired if the `disabled`
+     * property is set to `true`.
+     * @public
+     * @since 2.11.0
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
+], Avatar);
+Avatar.define();
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAI/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,WAAW;AACX,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EACN,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GACjB,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAGzD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAI/C,OAAO;AACP,OAAO,2CAA2C,CAAC;AAInD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAmBH,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,UAAU;IAmL9B;QACC,KAAK,EAAE,CAAC;QAhLT;;;;;;WAMG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;;WAOG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAsBpB;;;;;;;;;;;;;;;;;;WAkBG;QAEH,iBAAY,GAAG,UAAU,CAAC;QAY1B;;;;WAIG;QAEH,UAAK,GAAqB,QAAQ,CAAC;QAEnC;;;;WAIG;QAEH,SAAI,GAAoB,GAAG,CAAC;QAE5B;;;;;;WAMG;QAEH,gBAAW,GAA2B,MAAM,CAAC;QAE7C;;WAEG;QAEH,iBAAY,GAA2B,MAAM,CAAC;QAY9C;;;;;;;;;;WAUG;QAEH,4BAAuB,GAAkC,EAAE,CAAC;QAK5D;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAoCvB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACX,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1C,CAAC;IAED;;;;OAIG;IACH,IAAI,aAAa;QAChB,sFAAsF;QACtF,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAe,IAAI,UAAU,CAAC,CAAC,CAAC;IAChE,CAAC;IAED;;;;OAIG;IACH,IAAI,wBAAwB;QAC3B,kGAAkG;QAClG,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAsB,IAAI,IAAI,CAAC,YAAY,CAAC;IACpF,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7C,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC3C,CAAC;IAED,IAAI,aAAa;QAChB,yDAAyD;QACzD,MAAM,aAAa,GAAG,uBAAuB,EAC5C,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEvE,IAAI,gBAAgB,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,kBAAkB;QACrB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC5B,CAAC;QAED,MAAM,YAAY,GAAG,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE/D,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IACjF,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACrD,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,gBAAgB;QACrB,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;IAED,UAAU;QACT,IAAI,SAAS,EAAE,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,iBAAiB,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EACtE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3B,CAAC;IAED,SAAS;QACR,IAAI,CAAC,iBAAiB,IAAI,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,EACxE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IAClC,CAAC;IAED,YAAY;QACX,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;IAED,cAAc;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QACjC,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACpE,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,cAAc,IAAI,cAAc,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC;QAE/G,IAAI,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;QACpE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC;IAC9E,CAAC;IAED,YAAY;QACX,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC;QACvE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IAC3E,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,OAAO;QACR,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;QACzC,CAAC;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,UAAU;QACT,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC;QAE3D,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,EAAE,CAAC;YACzC,OAAO;QACR,CAAC;QAED,OAAO,YAAY,CAAC;IACrB,CAAC;IAED,yBAAyB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,OAAO;QACR,CAAC;QAED,+CAA+C;QAC/C,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1D,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE5D,sBAAsB;QACtB,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACvD,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEzD,6BAA6B;QAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAED,wBAAwB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,OAAO;QACR,CAAC;QAED,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,iBAAiB;QAC/C,CAAC;aAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,iBAAiB;QAChD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,eAAe;QAC9C,CAAC;IACF,CAAC;IAED,yBAAyB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,OAAO;QACR,CAAC;QAED,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1D,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC7D,CAAC;IAED,YAAY,CAAC,CAAQ;QACpB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,CAAC,CAAC,MAA2B,EAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACpF,OAAO;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,aAAa,CAAC,CAAQ;QACrB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,CAAC,CAAC,MAA2B,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACtF,OAAO;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,KAAiB;YAC5B,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;YACrH,WAAW,EAAE,IAAI,CAAC,kBAAkB;YACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACvB,CAAC;IACH,CAAC;CACD,CAAA;AAhaA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAWjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACR;AAoBpB;IADC,QAAQ,EAAE;oCACG;AAsBd;IADC,QAAQ,EAAE;4CACe;AAU1B;IADC,QAAQ,EAAE;wCACO;AAQlB;IADC,QAAQ,EAAE;qCACwB;AAQnC;IADC,QAAQ,EAAE;oCACiB;AAU5B;IADC,QAAQ,EAAE;2CACkC;AAM7C;IADC,QAAQ,EAAE;4CACmC;AAU9C;IADC,QAAQ,EAAE;8CACa;AAcxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACiC;AAG5D;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;8CACR;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACV;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CACvB;AAaxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qCACZ;AAWjC;IADC,IAAI,EAAE;qCACmB;AAGnB;IADN,IAAI,CAAC,oBAAoB,CAAC;gCACG;AA7KzB,MAAM;IAlBX,aAAa,CAAC;QACd,GAAG,EAAE,YAAY;QACjB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,cAAc;KACxB,CAAC;IACF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;KACb,CAAC;GACI,MAAM,CA4aX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot, DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { AccessibilityAttributes, AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IAvatarGroupItem } from \"./AvatarGroup.js\";\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\nimport {\n\tAVATAR_TOOLTIP,\n\tAVATAR_TYPE_BUTTON,\n\tAVATAR_TYPE_IMAGE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nimport type Icon from \"./Icon.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport type AvatarShape from \"./types/AvatarShape.js\";\nimport type AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\n// Icon\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\ntype AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\n/**\n * @class\n * ### Overview\n *\n * An image-like component that has different display options for representing images and icons\n * in different shapes and sizes, depending on the use case.\n *\n * The shape can be circular or square. There are several predefined sizes, as well as an option to\n * set a custom size.\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/Avatar.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.6\n * @implements {IAvatarGroupItem}\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarCss,\n\ttemplate: AvatarTemplate,\n})\n/**\n * Fired on mouseup, space and enter if avatar is interactive\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @public\n * @since 2.11.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {\n\teventDetails!: {\n\t\tclick: void,\n\t}\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines if the avatar is interactive (focusable and pressable).\n\t *\n\t * **Note:** This property won't have effect if the `disabled`\n\t * property is set to `true`.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the name of the UI5 Icon, that will be displayed.\n\t *\n\t * **Note:** If `image` slot is provided, the property will be ignored.\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 * `<ui5-avatar icon=\"employee\">`\n\t *\n\t * **Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the fallback icon, which should be displayed in the following cases:\n\t *\n\t * \t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t * \t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t * \t- If the image src is wrong.\n\t *\n\t * **Note:** If not set, a default fallback icon \"employee\" is displayed.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * `<ui5-avatar fallback-icon=\"alert\">`\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"employee\"\n\t * @public\n\t */\n\t@property()\n\tfallbackIcon = \"employee\";\n\n\t/**\n\t * Defines the displayed initials.\n\t *\n\t * Up to three Latin letters can be displayed as initials.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tinitials?: string;\n\n\t/**\n\t * Defines the shape of the component.\n\t * @default \"Circle\"\n\t * @public\n\t */\n\t@property()\n\tshape: `${AvatarShape}` = \"Circle\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t */\n\t@property()\n\tsize: `${AvatarSize}` = \"S\";\n\n\t/**\n\t * Defines the background color of the desired image.\n\t * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n\t *\n\t * @default \"Auto\"\n\t * @public\n\t */\n\t@property()\n\tcolorScheme: `${AvatarColorScheme}` = \"Auto\";\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\t_colorScheme: `${AvatarColorScheme}` = \"Auto\";\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.7\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following field is supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 2.0.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: AvatarAccessibilityAttributes = {};\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_imageLoadError = false;\n\n\t/**\n\t * Receives the desired `<img>` tag\n\t *\n\t * **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n\t * `ui5-avatar:not(:defined) {`<br/>\n\t * &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n\t * `}`\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\timage!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the optional badge that will be used for visual affordance.\n\t *\n\t * **Note:** While the slot allows for custom badges, to achieve\n\t * the Fiori design, use the `ui5-avatar-badge` component.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot()\n\tbadge!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResizeBound: ResizeObserverCallback;\n\t_onImageLoadBound: (e: Event) => void;\n\t_onImageErrorBound: (e: Event) => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t\tthis._onImageLoadBound = this._onImageLoad.bind(this);\n\t\tthis._onImageErrorBound = this._onImageError.bind(this);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._attachImageEventHandlers();\n\t\tthis._hasImage = this.hasImage;\n\t}\n\n\tget tabindex() {\n\t\tif (this.forcedTabIndex) {\n\t\t\treturn parseInt(this.forcedTabIndex);\n\t\t}\n\t\treturn this._interactive ? 0 : undefined;\n\t}\n\n\t/**\n\t * Returns the effective avatar size.\n\t * @default \"S\"\n\t * @private\n\t */\n\tget effectiveSize(): AvatarSize {\n\t\t// we read the attribute, because the \"size\" property will always have a default value\n\t\treturn this.getAttribute(\"size\") as AvatarSize || AvatarSize.S;\n\t}\n\n\t/**\n\t * Returns the effective background color.\n\t * @default \"Auto\"\n\t * @private\n\t */\n\tget effectiveBackgroundColor(): AvatarColorScheme {\n\t\t// we read the attribute, because the \"background-color\" property will always have a default value\n\t\treturn this.getAttribute(\"color-scheme\") as AvatarColorScheme || this._colorScheme;\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : \"img\";\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\n\t}\n\n\tget _interactive() {\n\t\treturn this.interactive && !this.disabled;\n\t}\n\n\tget validInitials() {\n\t\t// initials should consist of only 1,2 or 3 latin letters\n\t\tconst validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/,\n\t\t\tareInitialsValid = this.initials && validInitials.test(this.initials);\n\n\t\tif (areInitialsValid) {\n\t\t\treturn this.initials;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tget accessibleNameText() {\n\t\tif (this.accessibleName) {\n\t\t\treturn this.accessibleName;\n\t\t}\n\n\t\tconst defaultLabel = Avatar.i18nBundle.getText(AVATAR_TOOLTIP);\n\n\t\treturn this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;\n\t}\n\n\tget hasImage() {\n\t\treturn !!this.image.length && !this._imageLoadError;\n\t}\n\n\tget imageEl(): HTMLImageElement | null {\n\t\treturn this.image?.[0] instanceof HTMLImageElement ? this.image[0] : null;\n\t}\n\n\tget initialsContainer(): HTMLObjectElement | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-initials\");\n\t}\n\n\tget fallBackIconDomRef(): Icon | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-icon-fallback\");\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished();\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\n\t\tthis.initialsContainer && ResizeHandler.register(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tthis.initialsContainer && ResizeHandler.deregister(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\n\t\tthis._detachImageEventHandlers();\n\t}\n\n\thandleResize() {\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\t_checkInitials() {\n\t\tconst avatar = this.getDomRef()!;\n\t\tconst avatarInitials = avatar.querySelector(\".ui5-avatar-initials\");\n\t\tconst validInitials = this.validInitials && avatarInitials && avatarInitials.scrollWidth <= avatar.scrollWidth;\n\n\t\tif (validInitials) {\n\t\t\tthis.showInitials();\n\t\t\treturn;\n\t\t}\n\t\tthis.showFallbackIcon();\n\t}\n\n\tshowFallbackIcon() {\n\t\tthis.initialsContainer?.classList.add(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.remove(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\tshowInitials() {\n\t\tthis.initialsContainer?.classList.remove(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.add(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis._fireClick();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this._interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this._interactive && !e.shiftKey && isSpace(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\t}\n\n\t_fireClick() {\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t_getAriaHasPopup() {\n\t\tconst ariaHaspopup = this.accessibilityAttributes.hasPopup;\n\n\t\tif (!this._interactive || !ariaHaspopup) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn ariaHaspopup;\n\t}\n\n\t_attachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove previous handlers to avoid duplicates\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Attach new handlers\n\t\timgEl.addEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.addEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Check existing image state\n\t\tthis._checkExistingImageState();\n\t}\n\n\t_checkExistingImageState() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (imgEl.complete && imgEl.naturalWidth === 0) {\n\t\t\tthis._imageLoadError = true; // Already broken\n\t\t} else if (imgEl.complete && imgEl.naturalWidth > 0) {\n\t\t\tthis._imageLoadError = false; // Already loaded\n\t\t} else {\n\t\t\tthis._imageLoadError = false; // Pending load\n\t\t}\n\t}\n\n\t_detachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\treturn;\n\t\t}\n\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\t}\n\n\t_onImageLoad(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"load\", this._onImageLoadBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = false;\n\t}\n\n\t_onImageError(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"error\", this._onImageErrorBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = true;\n\t}\n\n\tget accessibilityInfo() {\n\t\treturn {\n\t\t\trole: this._role as AriaRole,\n\t\t\ttype: this.interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE),\n\t\t\tdescription: this.accessibleNameText,\n\t\t\tdisabled: this.disabled,\n\t\t};\n\t}\n}\n\nAvatar.define();\n\nexport default Avatar;\nexport type {\n\tAvatarAccessibilityAttributes,\n};\n"]}

package/dist/AvatarBadge.d.ts

@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.
+ * The badge can display an icon and supports different value states for visual affordance.
+ *
+ * ### Usage
+ *
+ * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.
+ *
+ * ```html
+ * <ui5-avatar>
+ *   <ui5-avatar-badge icon="edit" slot="badge"></ui5-avatar-badge>
+ * </ui5-avatar>
+ * ```
+ *
+ * ### Keyboard Handling
+ *
+ * The badge does not receive keyboard focus.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/AvatarBadge.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.19.0
+ * @public
+ */
+declare class AvatarBadge extends UI5Element {
+    /**
+     * Defines the icon name to be displayed inside the badge.
+     *
+     * **Note:** You should import the desired icon first, then use its name as "icon".
+     *
+     * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+     *
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the value state of the badge, which determines its styling.
+     *
+     * Available options:
+     * - `None` (default) - Standard appearance
+     * - `Positive` - Green, used for success/approved states
+     * - `Critical` - Orange, used for warning states
+     * - `Negative` - Red, used for error/rejected states
+     * - `Information` - Blue, used for informational states
+     *
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * @private
+     */
+    invalid: boolean;
+    onBeforeRendering(): void;
+}
+export default AvatarBadge;

package/dist/AvatarBadge.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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";
+// 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";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.
+ * The badge can display an icon and supports different value states for visual affordance.
+ *
+ * ### Usage
+ *
+ * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.
+ *
+ * ```html
+ * <ui5-avatar>
+ *   <ui5-avatar-badge icon="edit" slot="badge"></ui5-avatar-badge>
+ * </ui5-avatar>
+ * ```
+ *
+ * ### Keyboard Handling
+ *
+ * The badge does not receive keyboard focus.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/AvatarBadge.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.19.0
+ * @public
+ */
+let AvatarBadge = class AvatarBadge extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the value state of the badge, which determines its styling.
+         *
+         * Available options:
+         * - `None` (default) - Standard appearance
+         * - `Positive` - Green, used for success/approved states
+         * - `Critical` - Orange, used for warning states
+         * - `Negative` - Red, used for error/rejected states
+         * - `Information` - Blue, used for informational states
+         *
+         * @default "None"
+         * @public
+         */
+        this.valueState = ValueState.None;
+        /**
+         * @private
+         */
+        this.invalid = false;
+    }
+    onBeforeRendering() {
+        this.invalid = !this.icon || !getIconDataSync(this.icon);
+    }
+};
+__decorate([
+    property()
+], AvatarBadge.prototype, "icon", void 0);
+__decorate([
+    property()
+], AvatarBadge.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], AvatarBadge.prototype, "invalid", void 0);
+AvatarBadge = __decorate([
+    customElement({
+        tag: "ui5-avatar-badge",
+        renderer: jsxRenderer,
+        styles: AvatarBadgeCss,
+        template: AvatarBadgeTemplate,
+    })
+], AvatarBadge);
+AvatarBadge.define();
+export default AvatarBadge;
+//# sourceMappingURL=AvatarBadge.js.map

package/dist/AvatarBadge.js.map

@@ -0,0 +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,eAAU,GAAoB,UAAU,CAAC,IAAI,CAAC;QAE9C;;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;+CACmC;AAM9C;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 value 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 value 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\tvalueState: `${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"]}

package/dist/AvatarBadgeTemplate.d.ts

@@ -0,0 +1,2 @@
+import type AvatarBadge from "./AvatarBadge.js";
+export default function AvatarBadgeTemplate(this: AvatarBadge): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/AvatarBadgeTemplate.js

@@ -0,0 +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" })) }));
+}
+//# sourceMappingURL=AvatarBadgeTemplate.js.map

package/dist/AvatarBadgeTemplate.js.map

@@ -0,0 +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"]}