@ui5/webcomponents 1.21.0 → 1.22.0-rc.0

package/dist/Avatar.d.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
@@ -32,23 +33,18 @@ import "@ui5/webcomponents-icons/dist/alert.js";
  * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Avatar
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar
+ * @extends UI5Element
  * @since 1.0.0-rc.6
- * @implements sap.ui.webc.main.IAvatar
+ * @implements {IAvatar}
  * @public
  */
-declare class Avatar extends UI5Element implements ITabbable {
+declare class Avatar extends UI5Element implements ITabbable, IAvatar {
     /**
      * Defines whether the component is disabled.
      * A disabled component can't be pressed or
      * focused, and it is not in the tab chain.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Avatar.prototype.disabled
-     * @defaultvalue false
+     * @default false
      * @public
      */
     disabled: boolean;
@@ -56,9 +52,7 @@ declare class Avatar extends UI5Element implements ITabbable {
      * 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>.
-     * @type {boolean}
-     * @name sap.ui.webc.main.Avatar.prototype.interactive
-     * @defaultValue false
+     * @default false
      * @public
      */
     interactive: boolean;
@@ -86,9 +80,7 @@ declare class Avatar extends UI5Element implements ITabbable {
      * <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>.
-     * @type {string}
-     * @name sap.ui.webc.main.Avatar.prototype.icon
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     icon: string;
@@ -111,9 +103,7 @@ declare class Avatar extends UI5Element implements ITabbable {
      * <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>.
-     * @type {string}
-     * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     fallbackIcon: string;
@@ -122,27 +112,21 @@ declare class Avatar extends UI5Element implements ITabbable {
      * <br>
      * Up to three Latin letters can be displayed as initials.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Avatar.prototype.initials
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     initials: string;
     /**
      * Defines the shape of the component.
      *
-     * @type {sap.ui.webc.main.types.AvatarShape}
-     * @name sap.ui.webc.main.Avatar.prototype.shape
-     * @defaultvalue "Circle"
+     * @default "Circle"
      * @public
      */
     shape: `${AvatarShape}`;
     /**
      * Defines predefined size of the component.
      *
-     * @type {sap.ui.webc.main.types.AvatarSize}
-     * @name sap.ui.webc.main.Avatar.prototype.size
-     * @defaultvalue "S"
+     * @default "S"
      * @public
      */
     size: `${AvatarSize}`;
@@ -153,9 +137,7 @@ declare class Avatar extends UI5Element implements ITabbable {
     /**
      * Defines the background color of the desired image.
      *
-     * @type {sap.ui.webc.main.types.AvatarColorScheme}
-     * @name sap.ui.webc.main.Avatar.prototype.colorScheme
-     * @defaultvalue "Accent6"
+     * @default "Accent6"
      * @public
      */
     colorScheme: `${AvatarColorScheme}`;
@@ -167,9 +149,7 @@ declare class Avatar extends UI5Element implements ITabbable {
      * Defines the text alternative of the component.
      * If not provided a default text alternative will be set, if present.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Avatar.prototype.accessibleName
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.7
      */
@@ -177,7 +157,6 @@ declare class Avatar extends UI5Element implements ITabbable {
     /**
      * Defines the aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.
      * <br><br>
-     * @type String
      * @since 1.0.0-rc.15
      * @protected
      */
@@ -194,9 +173,6 @@ declare class Avatar extends UI5Element implements ITabbable {
      *			&nbsp;visibility: hidden; <br />
      *		} <br />
      * </code>
-     * @type {HTMLElement}
-     * @name sap.ui.webc.main.Avatar.prototype.default
-     * @slot image
      * @public
      * @since 1.0.0-rc.15
      */
@@ -221,9 +197,6 @@ declare class Avatar extends UI5Element implements ITabbable {
      * </ui5-badge>
      * </ui5-avatar>
      *
-     * @type {HTMLElement}
-     * @name sap.ui.webc.main.Avatar.prototype.badge
-     * @slot badge
      * @public
      * @since 1.7.0
      */
@@ -236,20 +209,16 @@ declare class Avatar extends UI5Element implements ITabbable {
     get tabindex(): string;
     /**
      * Returns the effective avatar size.
-     * @readonly
-     * @type {string}
-     * @defaultValue "S"
+     * @default "S"
      * @private
      */
     get _effectiveSize(): AvatarSize;
     /**
      * Returns the effective background color.
-     * @readonly
-     * @type {string}
-     * @defaultValue "Accent6"
+     * @default "Accent6"
      * @private
      */
-    get _effectiveBackgroundColor(): string;
+    get _effectiveBackgroundColor(): AvatarColorScheme;
     get _role(): "button" | "img";
     get _ariaHasPopup(): string | undefined;
     get _fallbackIcon(): string;

package/dist/Avatar.js

@@ -52,12 +52,9 @@ import "@ui5/webcomponents-icons/dist/alert.js";
  * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Avatar
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar
+ * @extends UI5Element
  * @since 1.0.0-rc.6
- * @implements sap.ui.webc.main.IAvatar
+ * @implements {IAvatar}
  * @public
  */
 let Avatar = Avatar_1 = class Avatar extends UI5Element {
@@ -73,9 +70,7 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
     }
     /**
      * Returns the effective avatar size.
-     * @readonly
-     * @type {string}
-     * @defaultValue "S"
+     * @default "S"
      * @private
      */
     get _effectiveSize() {
@@ -84,9 +79,7 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
     }
     /**
      * Returns the effective background color.
-     * @readonly
-     * @type {string}
-     * @defaultValue "Accent6"
+     * @default "Accent6"
      * @private
      */
     get _effectiveBackgroundColor() {
@@ -271,7 +264,6 @@ Avatar = Avatar_1 = __decorate([
     * 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>.
-    * @event
     * @private
     * @since 1.0.0-rc.11
     */

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\";\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 * @author SAP SE\n * @alias sap.ui.webc.main.Avatar\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-avatar\n * @since 1.0.0-rc.6\n * @implements sap.ui.webc.main.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* @event\n* @private\n* @since 1.0.0-rc.11\n*/\n@event(\"click\")\nclass Avatar extends UI5Element implements ITabbable {\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 * @type {boolean}\n\t * @name sap.ui.webc.main.Avatar.prototype.disabled\n\t * @defaultvalue 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 * @type {boolean}\n\t * @name sap.ui.webc.main.Avatar.prototype.interactive\n\t * @defaultValue 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 * @type {string}\n\t * @name sap.ui.webc.main.Avatar.prototype.icon\n\t * @defaultvalue \"\"\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 * @type {string}\n\t * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon\n\t * @defaultvalue \"\"\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 * @type {string}\n\t * @name sap.ui.webc.main.Avatar.prototype.initials\n\t * @defaultvalue \"\"\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 * @type {sap.ui.webc.main.types.AvatarShape}\n\t * @name sap.ui.webc.main.Avatar.prototype.shape\n\t * @defaultvalue \"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 * @type {sap.ui.webc.main.types.AvatarSize}\n\t * @name sap.ui.webc.main.Avatar.prototype.size\n\t * @defaultvalue \"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 * @type {sap.ui.webc.main.types.AvatarColorScheme}\n\t * @name sap.ui.webc.main.Avatar.prototype.colorScheme\n\t * @defaultvalue \"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 * @type {string}\n\t * @name sap.ui.webc.main.Avatar.prototype.accessibleName\n\t * @defaultvalue \"\"\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 * @type String\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 * @type {HTMLElement}\n\t * @name sap.ui.webc.main.Avatar.prototype.default\n\t * @slot image\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 * @type {HTMLElement}\n\t * @name sap.ui.webc.main.Avatar.prototype.badge\n\t * @slot badge\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 * @readonly\n\t * @type {string}\n\t * @defaultValue \"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 * @readonly\n\t * @type {string}\n\t * @defaultValue \"Accent6\"\n\t * @private\n\t */\n\tget _effectiveBackgroundColor() {\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\") || 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 { 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"]}

package/dist/AvatarGroup.d.ts

@@ -2,8 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Button from "./Button.js";
-import type Avatar from "./Avatar.js";
+import type IAvatar from "./Avatar.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+import { IButton } from "./Interfaces.js";
 type AvatarGroupClickEventDetail = {
     targetRef: HTMLElement;
     overflowButtonClicked: boolean;
@@ -75,10 +77,7 @@ type AvatarGroupClickEventDetail = {
  * <br>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.AvatarGroup
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar-group
+ * @extends UI5Element
  * @since 1.0.0-rc.11
  * @public
  */
@@ -86,9 +85,7 @@ declare class AvatarGroup extends UI5Element {
     /**
      * Defines the mode of the <code>AvatarGroup</code>.
      *
-     * @type {sap.ui.webc.main.types.AvatarGroupType}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.type
-     * @defaultValue "Group"
+     * @default "Group"
      * @public
      */
     type: `${AvatarGroupType}`;
@@ -100,8 +97,6 @@ declare class AvatarGroup extends UI5Element {
      * <li> the default "More" overflow button when <code>type</code> is <code>Individual</code></li>
      * </ul>
      * <br><br>
-     * @type String
-     * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup
      * @since 1.0.0-rc.15
      * @protected
      */
@@ -116,25 +111,19 @@ declare class AvatarGroup extends UI5Element {
      * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
      * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
      * as the built-in overflow action has "Circle" shape.
-     * @type {sap.ui.webc.main.IAvatar[]}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.default
-     * @slot items
      * @public
      */
-    items: Array<Avatar>;
+    items: Array<IAvatar>;
     /**
      * Defines the overflow button of the component.
      * <b>Note:</b> We recommend using the <code>ui5-button</code> component.
      * <br><br>
      * <b>Note:</b> If this slot is not used, the component will
      * display the built-in overflow button.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton
-     * @slot overflowButton
      * @public
      * @since 1.0.0-rc.13
      */
-    overflowButton: Array<Button>;
+    overflowButton: Array<IButton>;
     static i18nBundle: I18nBundle;
     _onResizeHandler: () => void;
     _colorIndex: number;
@@ -144,23 +133,17 @@ declare class AvatarGroup extends UI5Element {
     static onDefine(): Promise<void>;
     /**
      * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
-     * @readonly
-     * @type {HTMLElement[]}
-     * @defaultValue []
-     * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems
+     * @default []
      * @public
      */
-    get hiddenItems(): Avatar[];
+    get hiddenItems(): IAvatar[];
     /**
      * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
-     * @readonly
-     * @type {sap.ui.webc.main.types.AvatarColorScheme[]}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme
-     * @defaultValue []
+     * @default []
      * @public
      */
-    get colorScheme(): string[];
-    get _customOverflowButton(): Button | undefined;
+    get colorScheme(): AvatarColorScheme[];
+    get _customOverflowButton(): IButton | undefined;
     get _ariaLabelText(): string;
     get _overflowButtonAriaLabelText(): string | undefined;
     get _containerAriaHasPopup(): string | undefined;
@@ -215,7 +198,7 @@ declare class AvatarGroup extends UI5Element {
      * Returns the total width to item excluding the item width
      * RTL/LTR aware
      * @private
-     * @param {HTMLElement} item
+     * @param item
      */
     _getWidthToItem(item: HTMLElement): number;
     /**

package/dist/AvatarGroup.js

@@ -24,6 +24,7 @@ import { AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, AVATAR_GROUP_SHOW_COMPLETE_LIST_LA
 import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
 // Template
 import AvatarGroupTemplate from "./generated/templates/AvatarGroupTemplate.lit.js";
+import "./Interfaces.js";
 const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
 const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
 // based on RTL/LTR a margin-left/right is set respectfully
@@ -116,10 +117,7 @@ const offsets = {
  * <br>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.AvatarGroup
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar-group
+ * @extends UI5Element
  * @since 1.0.0-rc.11
  * @public
  */
@@ -140,10 +138,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
     }
     /**
      * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
-     * @readonly
-     * @type {HTMLElement[]}
-     * @defaultValue []
-     * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems
+     * @default []
      * @public
      */
     get hiddenItems() {
@@ -151,10 +146,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
     }
     /**
      * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
-     * @readonly
-     * @type {sap.ui.webc.main.types.AvatarColorScheme[]}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme
-     * @defaultValue []
+     * @default []
      * @public
      */
     get colorScheme() {
@@ -343,7 +335,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
      * Returns the total width to item excluding the item width
      * RTL/LTR aware
      * @private
-     * @param {HTMLElement} item
+     * @param item
      */
     _getWidthToItem(item) {
         const isRTL = this.effectiveDir === "rtl";
@@ -440,21 +432,25 @@ AvatarGroup = AvatarGroup_1 = __decorate([
     * click/tap or by using the Enter or Space key.
     * @param {HTMLElement} targetRef The DOM ref of the clicked item.
     * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked
-    * @event sap.ui.webc.main.AvatarGroup#click
     * @public
     * @since 1.0.0-rc.11
     */
     ,
     event("click", {
         detail: {
+            /**
+            * @public
+            */
             targetRef: { type: HTMLElement },
+            /**
+            * @public
+            */
             overflowButtonClicked: { type: Boolean },
         },
     })
     /**
     * Fired when the count of visible <code>ui5-avatar</code> elements in the
     * component has changed
-    * @event sap.ui.webc.main.AvatarGroup#overflow
     * @public
     * @since 1.0.0-rc.13
     */