@ui5/webcomponents 0.0.0-bad80d0d6 → 0.0.0-bf8366eb6

package/dist/Avatar.js

@@ -1,367 +1,265 @@
+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.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import encodeCSS from "@ui5/webcomponents-base/dist/util/encodeCSS.js";
-
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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 "./generated/templates/AvatarTemplate.lit.js";
-
 import { AVATAR_TOOLTIP } from "./generated/i18n/i18n-defaults.js";
-
 // Styles
 import AvatarCss from "./generated/themes/Avatar.css.js";
-
 import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
-import AvatarFitType from "./types/AvatarFitType.js";
-import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-avatar",
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
-
-		/**
-		 * Defines if the avatar is interactive (focusable and pressable)
-		 * @type {boolean}
-		 * @defaultValue false
-		 * @public
-		 */
-		interactive: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates if the elements is on focus
-		 * @private
-		 */
-		focused: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the source path to the desired image.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		image: {
-			type: String,
-		},
-
-		/**
-		 * Defines the name of the UI5 Icon, that would be displayed.
-		 * <br>
-		 * <b>Note:</b> If <code>image</code> is set, the property would be ignored.
-		 * <br>
-		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
-		 * <br><br>
-		 * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
-		 * <br>
-		 * <pre>&lt;ui5-avatar icon-src="employee"></pre>
-		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: String,
-		},
-
-		/**
-		 * Defines the displayed initials.
-		 * <br>
-		 * Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		initials: {
-			type: String,
-		},
-
-		/**
-		 * Defines the shape of the <code>ui5-avatar</code>.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Circle</code></li>
-		 * <li><code>Square</code></li>
-		 * </ul>
-		 * @type {AvatarShape}
-		 * @defaultvalue "Circle"
-		 * @public
-		 */
-		shape: {
-			type: AvatarShape,
-			defaultValue: AvatarShape.Circle,
-		},
-
-		/**
-		 * Defines predefined size of the <code>ui5-avatar</code>.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>XS</code></li>
-		 * <li><code>S</code></li>
-		 * <li><code>M</code></li>
-		 * <li><code>L</code></li>
-		 * <li><code>XL</code></li>
-		 * </ul>
-		 * @type {AvatarSize}
-		 * @defaultvalue "S"
-		 * @public
-		 */
-		size: {
-			type: AvatarSize,
-			defaultValue: AvatarSize.S,
-		},
-
-		/**
-		 * @private
-		 */
-		_size: {
-			type: String,
-			defaultValue: AvatarSize.S,
-		},
-
-		/**
-		 * Defines the fit type of the desired image.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Cover</code></li>
-		 * <li><code>Contain</code></li>
-		 * </ul>
-		 * @type {AvatarFitType}
-		 * @defaultvalue "Cover"
-		 * @public
-		 */
-		imageFitType: {
-			type: AvatarFitType,
-			defaultValue: AvatarFitType.Cover,
-		},
-
-		/**
-		 * Defines the background color of the desired image.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Accent1</code></li>
-		 * <li><code>Accent2</code></li>
-		 * <li><code>Accent3</code></li>
-		 * <li><code>Accent4</code></li>
-		 * <li><code>Accent5</code></li>
-		 * <li><code>Accent6</code></li>
-		 * <li><code>Accent7</code></li>
-		 * <li><code>Accent8</code></li>
-		 * <li><code>Accent9</code></li>
-		 * <li><code>Accent10</code></li>
-		 * <li><code>Placeholder</code></li>
-		 * </ul>
-		 * @type {AvatarBackgroundColor}
-		 * @defaultvalue "Accent6"
-		 * @public
-		 */
-		backgroundColor: {
-			type: AvatarBackgroundColor,
-			defaultValue: AvatarBackgroundColor.Accent6,
-		},
-
-		/**
-		 * @private
-		 */
-		_backgroundColor: {
-			type: String,
-			defaultValue: AvatarBackgroundColor.Accent6,
-		},
-
-		/**
-		 * Defines the text alternative of the <code>ui5-avatar</code>.
-		 * If not provided a default text alternative will be set, if present.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.7
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		_tabIndex: {
-			type: String,
-			noAttribute: true,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
-	},
-	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
-		/**
-		* Fired on mouseup, space and enter if avatar is interactive
-		*
-		* @event
-		* @private
-		* @since 1.0.0-rc.11
-		*/
-		click: {},
-	},
-};
-
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
 /**
  * @class
+ * ### Overview
  *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * An image-like control that has different display options for representing images and icons
+ * 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.
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard Handling
  *
- * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
+ * - [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
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Avatar
  * @extends UI5Element
- * @tagname ui5-avatar
  * @since 1.0.0-rc.6
- * @implements sap.ui.webcomponents.main.IAvatar
+ * @implements {IAvatarGroupItem}
  * @public
  */
-class Avatar extends UI5Element {
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return AvatarCss;
-	}
-
-	static get template() {
-		return AvatarTemplate;
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	get tabindex() {
-		return this._tabIndex || (this.interactive ? "0" : "-1");
-	}
-
-	/**
-	 * Returns the effective avatar size.
-	 * @readonly
-	 * @type { String }
-	 * @defaultValue "S"
-	 * @private
-	 */
-	get _effectiveSize() {
-		// we read the attribute, because the "size" property will always have a default value
-		return this.getAttribute("size") || this._size;
-	}
-
-	/**
-	 * Returns the effective background color.
-	 * @readonly
-	 * @type { String }
-	 * @defaultValue "Accent6"
-	 * @private
-	 */
-	get _effectiveBackgroundColor() {
-		// we read the attribute, because the "background-color" property will always have a default value
-		return this.getAttribute("background-color") || this._backgroundColor;
-	}
-
-	get validInitials() {
-		const validInitials = /^[a-zA-Z]{1,2}$/;
-
-		if (this.initials && validInitials.test(this.initials)) {
-			return this.initials;
-		}
-
-		return null;
-	}
-
-	get accessibleNameText() {
-		if (this.accessibleName) {
-			return this.accessibleName;
-		}
-
-		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
-	}
-
-	get styles() {
-		return {
-			img: {
-				"background-image": `url("${encodeCSS(this.image)}")`,
-			},
-		};
-	}
-
-	_onclick(event) {
-		if (this.interactive) {
-			// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
-			event.stopPropagation();
-			this.fireEvent("click");
-		}
-	}
-
-	_onkeydown(event) {
-		if (!this.interactive) {
-			return;
-		}
-
-		if (isEnter(event)) {
-			this.fireEvent("click");
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault(); // prevent scrolling
-		}
-	}
-
-	_onkeyup(event) {
-		if (this.interactive && !event.shiftKey && isSpace(event)) {
-			this.fireEvent("click");
-		}
-	}
-
-	_onfocusout() {
-		this.focused = false;
-	}
-
-	_onfocusin() {
-		if (this.interactive) {
-			this.focused = true;
-		}
-	}
-}
-
+let Avatar = Avatar_1 = class Avatar extends UI5Element {
+    constructor() {
+        super();
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
+    static async onDefine() {
+        Avatar_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    get tabindex() {
+        return this.forcedTabIndex || (this._interactive ? "0" : "-1");
+    }
+    /**
+     * 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") || this._size;
+    }
+    /**
+     * Returns the effective background color.
+     * @default "Accent6"
+     * @private
+     */
+    get еffectiveBackgroundColor() {
+        // 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 _fallbackIcon() {
+        if (this.fallbackIcon === "") {
+            this.fallbackIcon = "employee";
+        }
+        return this.fallbackIcon;
+    }
+    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;
+        }
+        return Avatar_1.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+    }
+    get hasImage() {
+        this._hasImage = !!this.image.length;
+        return this._hasImage;
+    }
+    get initialsContainer() {
+        return this.getDomRef().querySelector(".ui5-avatar-initials");
+    }
+    get fallBackIconDomRef() {
+        return this.getDomRef().querySelector(".ui5-avatar-icon-fallback");
+    }
+    onBeforeRendering() {
+        this._onclick = this._interactive ? this._onClickHandler.bind(this) : undefined;
+    }
+    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);
+    }
+    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");
+    }
+    _onClickHandler(e) {
+        // prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+        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.fireEvent("click");
+    }
+    _getAriaHasPopup() {
+        const ariaHaspopup = this.accessibilityAttributes.hasPopup;
+        if (!this._interactive || !ariaHaspopup) {
+            return;
+        }
+        return ariaHaspopup;
+    }
+};
+__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({ type: AvatarShape, defaultValue: AvatarShape.Circle })
+], Avatar.prototype, "shape", void 0);
+__decorate([
+    property({ type: AvatarSize, defaultValue: AvatarSize.S })
+], Avatar.prototype, "size", void 0);
+__decorate([
+    property({ type: AvatarSize, defaultValue: AvatarSize.S })
+], Avatar.prototype, "_size", void 0);
+__decorate([
+    property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 })
+], Avatar.prototype, "colorScheme", void 0);
+__decorate([
+    property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 })
+], 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([
+    slot({ type: HTMLElement, "default": true })
+], Avatar.prototype, "image", void 0);
+__decorate([
+    slot()
+], Avatar.prototype, "badge", void 0);
+Avatar = Avatar_1 = __decorate([
+    customElement({
+        tag: "ui5-avatar",
+        languageAware: true,
+        renderer: litRender,
+        styles: AvatarCss,
+        template: AvatarTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * 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`.
+     * @private
+     * @since 1.0.0-rc.11
+     */
+    ,
+    event("click")
+], 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":"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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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.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 \"./generated/templates/AvatarTemplate.lit.js\";\n\nimport { AVATAR_TOOLTIP } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nimport Icon from \"./Icon.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarShape from \"./types/AvatarShape.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\n// Icon\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.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: litRender,\n\tstyles: AvatarCss,\n\ttemplate: AvatarTemplate,\n\tdependencies: [Icon],\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 * @private\n * @since 1.0.0-rc.11\n */\n@event(\"click\")\nclass Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {\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!: boolean;\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!: boolean;\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 \"\"\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 \"\"\n\t * @public\n\t */\n\t@property()\n\tfallbackIcon!: string;\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 \"\"\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({ type: AvatarShape, defaultValue: AvatarShape.Circle })\n\tshape!: `${AvatarShape}`;\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t */\n\t@property({ type: AvatarSize, defaultValue: AvatarSize.S })\n\tsize!: `${AvatarSize}`;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: AvatarSize, defaultValue: AvatarSize.S })\n\t_size!: AvatarSize;\n\n\t/**\n\t * Defines the background color of the desired image.\n\t * @default \"Accent6\"\n\t * @public\n\t */\n\t@property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 })\n\tcolorScheme!: `${AvatarColorScheme}`;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 })\n\t_colorScheme!: AvatarColorScheme;\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 \"\"\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@property({ type: Boolean })\n\t_hasImage!: boolean;\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 being defined with the following CSS:\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\timage!: Array<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, you can use the `ui5-tag` with `ui5-icon`\n\t * in the corresponding `icon` slot, without text nodes.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot()\n\tbadge!: Array<HTMLElement>;\n\n\t_onclick?: (e: MouseEvent) => void;\n\tstatic i18nBundle: I18nBundle;\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tAvatar.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget tabindex() {\n\t\treturn this.forcedTabIndex || (this._interactive ? \"0\" : \"-1\");\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 || this._size;\n\t}\n\n\t/**\n\t * Returns the effective background color.\n\t * @default \"Accent6\"\n\t * @private\n\t */\n\tget еffectiveBackgroundColor(): 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 _fallbackIcon() {\n\t\tif (this.fallbackIcon === \"\") {\n\t\t\tthis.fallbackIcon = \"employee\";\n\t\t}\n\n\t\treturn this.fallbackIcon;\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\treturn Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;\n\t}\n\n\tget hasImage() {\n\t\tthis._hasImage = !!this.image.length;\n\t\treturn this._hasImage;\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\tonBeforeRendering() {\n\t\tthis._onclick = this._interactive ? this._onClickHandler.bind(this) : undefined;\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\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_onClickHandler(e: MouseEvent) {\n\t\t// prevent the native event and fire custom event to ensure the noConfict \"ui5-click\" is fired\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.fireEvent(\"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\nAvatar.define();\n\nexport default Avatar;\nexport type {\n\tAvatarAccessibilityAttributes,\n};\n"]}