@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/Avatar.d.ts

@@ -1,17 +1,19 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import type { IAvatar } from "./Interfaces.js";
+import type { IAvatarGroupItem } from "./AvatarGroup.js";
+import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
 import "@ui5/webcomponents-icons/dist/employee.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
+type AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
 /**
  * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### 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.
@@ -19,113 +21,91 @@ import "@ui5/webcomponents-icons/dist/alert.js";
  * The shape can be circular or square. There are several predefined sizes, as well as an option to
  * set a custom size.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
- *
- * <ul>
- * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
- * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
- * </ul>
- * <br><br>
- *
- * <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
  * @extends UI5Element
  * @since 1.0.0-rc.6
- * @implements {IAvatar}
+ * @implements {IAvatarGroupItem}
  * @public
  */
-declare class Avatar extends UI5Element implements ITabbable, IAvatar {
+declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     /**
      * 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
      */
     disabled: boolean;
     /**
      * Defines if the avatar is interactive (focusable and pressable).
-     * <b>Note:</b> This property won't have effect if the <code>disabled</code>
-     * property is set to <code>true</code>.
+     *
+     * **Note:** This property won't have effect if the `disabled`
+     * property is set to `true`.
      * @default false
      * @public
      */
     interactive: boolean;
-    /**
-     * Indicates if the elements is on focus
-     * @private
-     */
-    focused: boolean;
-    /**
-     * Indicates if the elements is pressed
-     * @private
-     */
-    pressed: boolean;
     /**
      * Defines the name of the UI5 Icon, that will be displayed.
-     * <br>
-     * <b>Note:</b> If <code>image</code> slot is provided, the property will 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="employee"></pre>
-     * <br>
-     * <b>Note:</b> If no icon or an empty one is provided, by default the "employee" icon should be displayed.
-     *
-     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     *
+     * **Note:** If `image` slot is provided, the property will be ignored.
+     *
+     * **Note:** You should import the desired icon first, then use its name as "icon".
+     *
+     * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+     *
+     * `<ui5-avatar icon="employee">`
+     *
+     * **Note:** If no icon or an empty one is provided, by default the "employee" icon should be displayed.
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default ""
      * @public
      */
     icon: string;
     /**
      * Defines the name of the fallback icon, which should be displayed in the following cases:
-     * <ul>
-     * 	<li>If the initials are not valid (more than 3 letters, unsupported languages or empty initials).</li>
-     * 	<li>If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).</li>
-     * 	<li>If the image src is wrong.</li>
-     * </ul>
-     *
-     * <br>
-     * <b>Note:</b> If not set, a default fallback icon "employee" is displayed.
-     * <br>
-     * <b>Note:</b> You should import the desired icon first, then use its name as "fallback-icon".
-     * <br><br>
-     * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
-     * <br>
-     * <pre>&lt;ui5-avatar fallback-icon="alert"></pre>
-     * <br>
-     *
-     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     *
+     * 	- 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 ""
      * @public
      */
     fallbackIcon: string;
     /**
      * Defines the displayed initials.
-     * <br>
-     * Up to three Latin letters can be displayed as initials.
      *
+     * Up to three Latin letters can be displayed as initials.
      * @default ""
      * @public
      */
     initials: string;
     /**
      * Defines the shape of the component.
-     *
      * @default "Circle"
      * @public
      */
     shape: `${AvatarShape}`;
     /**
      * Defines predefined size of the component.
-     *
      * @default "S"
      * @public
      */
@@ -136,7 +116,6 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatar {
     _size: AvatarSize;
     /**
      * Defines the background color of the desired image.
-     *
      * @default "Accent6"
      * @public
      */
@@ -148,55 +127,39 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatar {
     /**
      * Defines the text alternative of the component.
      * If not provided a default text alternative will be set, if present.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.7
      */
     accessibleName: string;
     /**
-     * Defines the aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.
-     * <br><br>
-     * @since 1.0.0-rc.15
-     * @protected
+     * 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 {}
      */
-    ariaHaspopup: string;
-    _tabIndex: string;
+    accessibilityAttributes: AvatarAccessibilityAttributes;
+    forcedTabIndex: string;
     _hasImage: boolean;
     /**
-     * Receives the desired <code>&lt;img&gt;</code> tag
+     * Receives the desired `<img>` tag
      *
-     * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
-     * <br /> <br />
-     * <code>
-     *		ui5-avatar:not(:defined) { <br />
-     *			&nbsp;visibility: hidden; <br />
-     *		} <br />
-     * </code>
+     * **Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
      * @public
      * @since 1.0.0-rc.15
      */
     image: Array<HTMLElement>;
     /**
      * Defines the optional badge that will be used for visual affordance.
-     * <b>Note:</b> While the slot allows for custom badges, to achieve
-     * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
-     * in the corresponding <code>icon</code> slot, without text nodes.
-     * <br><br>
-     * Example:
-     * <br><br>
-     * &lt;ui5-avatar><br>
-     * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
-     * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
-     * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>
-     * &lt;/ui5-avatar>
-     * <br><br>
-     * <ui5-avatar initials="AB" color-scheme="Accent1">
-     * <ui5-badge slot="badge">
-     * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
-     * </ui5-badge>
-     * </ui5-avatar>
      *
+     * **Note:** While the slot allows for custom badges, to achieve
+     * the Fiori design, you can use the `ui5-tag` with `ui5-icon`
+     * in the corresponding `icon` slot, without text nodes.
      * @public
      * @since 1.7.0
      */
@@ -212,33 +175,35 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatar {
      * @default "S"
      * @private
      */
-    get _effectiveSize(): AvatarSize;
+    get effectiveSize(): AvatarSize;
     /**
      * Returns the effective background color.
      * @default "Accent6"
      * @private
      */
-    get _effectiveBackgroundColor(): AvatarColorScheme;
+    get еffectiveBackgroundColor(): AvatarColorScheme;
     get _role(): "button" | "img";
-    get _ariaHasPopup(): string | undefined;
+    get _ariaHasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
     get _fallbackIcon(): string;
     get _interactive(): boolean;
     get validInitials(): string | null;
     get accessibleNameText(): string | undefined;
     get hasImage(): boolean;
     get initialsContainer(): HTMLObjectElement | null;
+    get fallBackIconDomRef(): Icon | null;
     onBeforeRendering(): void;
     onAfterRendering(): Promise<void>;
     onEnterDOM(): void;
     onExitDOM(): void;
     handleResize(): void;
     _checkInitials(): void;
+    showFallbackIcon(): void;
+    showInitials(): void;
     _onClickHandler(e: MouseEvent): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _fireClick(): void;
-    _onfocusout(): void;
-    _onfocusin(): void;
-    _getAriaHasPopup(): string | undefined;
+    _getAriaHasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
 }
 export default Avatar;
+export type { AvatarAccessibilityAttributes, };

package/dist/Avatar.js

@@ -15,6 +15,7 @@ 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";
@@ -29,8 +30,7 @@ import "@ui5/webcomponents-icons/dist/employee.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 /**
  * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### 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.
@@ -38,23 +38,17 @@ import "@ui5/webcomponents-icons/dist/alert.js";
  * The shape can be circular or square. There are several predefined sizes, as well as an option to
  * set a custom size.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
- *
- * <ul>
- * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
- * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
- * </ul>
- * <br><br>
- *
- * <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
  * @extends UI5Element
  * @since 1.0.0-rc.6
- * @implements {IAvatar}
+ * @implements {IAvatarGroupItem}
  * @public
  */
 let Avatar = Avatar_1 = class Avatar extends UI5Element {
@@ -66,14 +60,14 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         Avatar_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
     get tabindex() {
-        return this._tabIndex || (this._interactive ? "0" : "-1");
+        return this.forcedTabIndex || (this._interactive ? "0" : "-1");
     }
     /**
      * Returns the effective avatar size.
      * @default "S"
      * @private
      */
-    get _effectiveSize() {
+    get effectiveSize() {
         // we read the attribute, because the "size" property will always have a default value
         return this.getAttribute("size") || this._size;
     }
@@ -82,7 +76,7 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
      * @default "Accent6"
      * @private
      */
-    get _effectiveBackgroundColor() {
+    get еffectiveBackgroundColor() {
         // we read the attribute, because the "background-color" property will always have a default value
         return this.getAttribute("color-scheme") || this._colorScheme;
     }
@@ -122,6 +116,9 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
     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;
     }
@@ -132,6 +129,9 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         }
     }
     onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
         this.initialsContainer && ResizeHandler.register(this.initialsContainer, this._handleResizeBound);
     }
     onExitDOM() {
@@ -143,19 +143,22 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         }
     }
     _checkInitials() {
-        const avatar = this.getDomRef(), avatarInitials = avatar.querySelector(".ui5-avatar-initials");
-        // if there aren`t initalts set - the fallBack icon should be shown
-        if (!this.validInitials) {
-            avatarInitials.classList.add("ui5-avatar-initials-hidden");
+        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;
         }
-        // if initials` width is bigger than the avatar, an icon should be shown inside the avatar
-        avatarInitials && avatarInitials.classList.remove("ui5-avatar-initials-hidden");
-        if (this.initials && this.initials.length === 3) {
-            if (avatarInitials && avatarInitials.scrollWidth > avatar.scrollWidth) {
-                avatarInitials.classList.add("ui5-avatar-initials-hidden");
-            }
-        }
+        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
@@ -180,21 +183,13 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
     }
     _fireClick() {
         this.fireEvent("click");
-        this.pressed = !this.pressed;
-    }
-    _onfocusout() {
-        this.focused = false;
-    }
-    _onfocusin() {
-        if (this._interactive) {
-            this.focused = true;
-        }
     }
     _getAriaHasPopup() {
-        if (!this._interactive || this.ariaHaspopup === "") {
+        const ariaHaspopup = this.accessibilityAttributes.hasPopup;
+        if (!this._interactive || !ariaHaspopup) {
             return;
         }
-        return this.ariaHaspopup;
+        return ariaHaspopup;
     }
 };
 __decorate([
@@ -203,12 +198,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Avatar.prototype, "interactive", void 0);
-__decorate([
-    property({ type: Boolean })
-], Avatar.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean })
-], Avatar.prototype, "pressed", void 0);
 __decorate([
     property()
 ], Avatar.prototype, "icon", void 0);
@@ -237,11 +226,11 @@ __decorate([
     property()
 ], Avatar.prototype, "accessibleName", void 0);
 __decorate([
-    property()
-], Avatar.prototype, "ariaHaspopup", void 0);
+    property({ type: Object })
+], Avatar.prototype, "accessibilityAttributes", void 0);
 __decorate([
     property({ noAttribute: true })
-], Avatar.prototype, "_tabIndex", void 0);
+], Avatar.prototype, "forcedTabIndex", void 0);
 __decorate([
     property({ type: Boolean })
 ], Avatar.prototype, "_hasImage", void 0);
@@ -261,12 +250,13 @@ Avatar = Avatar_1 = __decorate([
         dependencies: [Icon],
     })
     /**
-    * Fired on mouseup, space and enter if avatar is interactive
-    * <b>Note:</b> The event will not be fired if the <code>disabled</code>
-    * property is set to <code>true</code>.
-    * @private
-    * @since 1.0.0-rc.11
-    */
+     * 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);

package/dist/Avatar.js.map

@@ -1 +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 { 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 type { IAvatar } from \"./Interfaces.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\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\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 * <br><br>\n * <h3>Keyboard Handling</h3>\n *\n * <ul>\n * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>\n * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>\n * </ul>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.6\n * @implements {IAvatar}\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* <b>Note:</b> The event will not be fired if the <code>disabled</code>\n* property is set to <code>true</code>.\n* @private\n* @since 1.0.0-rc.11\n*/\n@event(\"click\")\nclass Avatar extends UI5Element implements ITabbable, IAvatar {\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 *\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 * <b>Note:</b> This property won't have effect if the <code>disabled</code>\n\t * property is set to <code>true</code>.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * Indicates if the elements is pressed\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tpressed!: boolean;\n\n\t/**\n\t * Defines the name of the UI5 Icon, that will be displayed.\n\t * <br>\n\t * <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.\n\t * <br>\n\t * <b>Note:</b> You should import the desired icon first, then use its name as \"icon\".\n\t * <br><br>\n\t * import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"\n\t * <br>\n\t * <pre>&lt;ui5-avatar icon=\"employee\"></pre>\n\t * <br>\n\t * <b>Note:</b> 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 <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\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 * <ul>\n\t * \t<li>If the initials are not valid (more than 3 letters, unsupported languages or empty initials).</li>\n\t * \t<li>If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).</li>\n\t * \t<li>If the image src is wrong.</li>\n\t * </ul>\n\t *\n\t * <br>\n\t * <b>Note:</b> If not set, a default fallback icon \"employee\" is displayed.\n\t * <br>\n\t * <b>Note:</b> You should import the desired icon first, then use its name as \"fallback-icon\".\n\t * <br><br>\n\t * import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"\n\t * <br>\n\t * <pre>&lt;ui5-avatar fallback-icon=\"alert\"></pre>\n\t * <br>\n\t *\n\t * See all the available icons in the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\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 * <br>\n\t * Up to three Latin letters can be displayed as initials.\n\t *\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 *\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 *\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 *\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 *\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 aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.\n\t * <br><br>\n\t * @since 1.0.0-rc.15\n\t * @protected\n\t */\n\t@property()\n\tariaHaspopup!: string;\n\n\t@property({ noAttribute: true })\n\t_tabIndex!: string;\n\n\t@property({ type: Boolean })\n\t_hasImage!: boolean;\n\n\t/**\n\t * Receives the desired <code>&lt;img&gt;</code> tag\n\t *\n\t * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:\n\t * <br /> <br />\n\t * <code>\n\t *\t\tui5-avatar:not(:defined) { <br />\n\t *\t\t\t&nbsp;visibility: hidden; <br />\n\t *\t\t} <br />\n\t * </code>\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 * <b>Note:</b> While the slot allows for custom badges, to achieve\n\t * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>\n\t * in the corresponding <code>icon</code> slot, without text nodes.\n\t * <br><br>\n\t * Example:\n\t * <br><br>\n\t * &lt;ui5-avatar><br>\n\t * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot=\"badge\"><br>\n\t * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot=\"icon\" name=\"employee\">&lt;/ui5-icon><br>\n\t * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>\n\t * &lt;/ui5-avatar>\n\t * <br><br>\n\t * <ui5-avatar initials=\"AB\" color-scheme=\"Accent1\">\n\t * <ui5-badge slot=\"badge\">\n\t * <ui5-icon slot=\"icon\" name=\"accelerated\"></ui5-icon>\n\t * </ui5-badge>\n\t * </ui5-avatar>\n\t *\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._tabIndex || (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 _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 _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\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\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\t\tavatarInitials = avatar.querySelector(\".ui5-avatar-initials\");\n\t\t// if there aren`t initalts set - the fallBack icon should be shown\n\t\tif (!this.validInitials) {\n\t\t\tavatarInitials!.classList.add(\"ui5-avatar-initials-hidden\");\n\t\t\treturn;\n\t\t}\n\t\t// if initials` width is bigger than the avatar, an icon should be shown inside the avatar\n\t\tavatarInitials && avatarInitials.classList.remove(\"ui5-avatar-initials-hidden\");\n\t\tif (this.initials && this.initials.length === 3) {\n\t\t\tif (avatarInitials && avatarInitials.scrollWidth > avatar.scrollWidth) {\n\t\t\t\tavatarInitials.classList.add(\"ui5-avatar-initials-hidden\");\n\t\t\t}\n\t\t}\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\tthis.pressed = !this.pressed;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin() {\n\t\tif (this._interactive) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\tif (!this._interactive || this.ariaHaspopup === \"\") {\n\t\t\treturn;\n\t\t}\n\n\t\treturn this.ariaHaspopup;\n\t}\n}\n\nAvatar.define();\n\nexport default Avatar;\n"]}
+{"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"]}