@ui5/webcomponents 0.0.0-ca2fa23d3 → 0.0.0-cad512aa3

package/dist/Avatar.js

@@ -0,0 +1,240 @@
+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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.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 AvatarColorScheme from "./types/AvatarColorScheme.js";
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * 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.
+ *
+ * <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>
+ *
+ * <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
+ * @since 1.0.0-rc.6
+ * @implements sap.ui.webc.main.IAvatar
+ * @public
+ */
+let Avatar = Avatar_1 = class Avatar extends UI5Element {
+    static async onDefine() {
+        Avatar_1.i18nBundle = await getI18nBundle("@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("color-scheme") || this._colorScheme;
+    }
+    get _role() {
+        return this.interactive ? "button" : undefined;
+    }
+    get _ariaHasPopup() {
+        return this._getAriaHasPopup();
+    }
+    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;
+    }
+    onBeforeRendering() {
+        this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+    }
+    onAfterRendering() {
+        this._checkInitials();
+    }
+    _setFallbackIcon() {
+        // if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing
+        this.icon = this.icon || "employee";
+        return this.icon;
+    }
+    _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) {
+            this._setFallbackIcon();
+        }
+        // if initials` width is bigger than the avatar, an icon should be shown inside the avatar
+        if (this.initials && this.initials.length === 3) {
+            if (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {
+                this._setFallbackIcon();
+            }
+        }
+        return this.icon;
+    }
+    _onClickHandler(e) {
+        // prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+        e.stopPropagation();
+        this.fireEvent("click");
+    }
+    _onkeydown(e) {
+        if (!this.interactive) {
+            return;
+        }
+        if (isEnter(e)) {
+            this.fireEvent("click");
+        }
+        if (isSpace(e)) {
+            e.preventDefault(); // prevent scrolling
+        }
+    }
+    _onkeyup(e) {
+        if (this.interactive && !e.shiftKey && isSpace(e)) {
+            this.fireEvent("click");
+        }
+    }
+    _onfocusout() {
+        this.focused = false;
+    }
+    _onfocusin() {
+        if (this.interactive) {
+            this.focused = true;
+        }
+    }
+    _getAriaHasPopup() {
+        if (!this.interactive || this.ariaHaspopup === "") {
+            return;
+        }
+        return this.ariaHaspopup;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "focused", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "icon", 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()
+], Avatar.prototype, "ariaHaspopup", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Avatar.prototype, "_tabIndex", 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
+    *
+    * @event
+    * @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 { 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\";\n\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\";\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*\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 if the avatar is interactive (focusable and pressable).\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 * 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 *\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 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 * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Circle</code></li>\n\t * <li><code>Square</code></li>\n\t * </ul>\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 * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>XS</code></li>\n\t * <li><code>S</code></li>\n\t * <li><code>M</code></li>\n\t * <li><code>L</code></li>\n\t * <li><code>XL</code></li>\n\t * </ul>\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 * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Accent1</code></li>\n\t * <li><code>Accent2</code></li>\n\t * <li><code>Accent3</code></li>\n\t * <li><code>Accent4</code></li>\n\t * <li><code>Accent5</code></li>\n\t * <li><code>Accent6</code></li>\n\t * <li><code>Accent7</code></li>\n\t * <li><code>Accent8</code></li>\n\t * <li><code>Accent9</code></li>\n\t * <li><code>Accent10</code></li>\n\t * <li><code>Placeholder</code></li>\n\t * </ul>\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\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\" : undefined;\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\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\tonBeforeRendering() {\n\t\tthis._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;\n\t}\n\n\tonAfterRendering() {\n\t\tthis._checkInitials();\n\t}\n\n\t_setFallbackIcon() {\n\t\t// if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing\n\t\tthis.icon = this.icon || \"employee\";\n\t\treturn this.icon;\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\tthis._setFallbackIcon();\n\t\t}\n\t\t// if initials` width is bigger than the avatar, an icon should be shown inside the avatar\n\t\tif (this.initials && this.initials.length === 3) {\n\t\t\tif (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {\n\t\t\t\tthis._setFallbackIcon();\n\t\t\t}\n\t\t}\n\t\treturn this.icon;\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.fireEvent(\"click\");\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.fireEvent(\"click\");\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.fireEvent(\"click\");\n\t\t}\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

@@ -0,0 +1,236 @@
+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";
+import AvatarSize from "./types/AvatarSize.js";
+import AvatarGroupType from "./types/AvatarGroupType.js";
+type AvatarGroupClickEventDetail = {
+    targetRef: HTMLElement;
+    overflowButtonClicked: boolean;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Displays a group of avatars arranged horizontally. It is useful to visually
+ * showcase a group of related avatars, such as, project team members or employees.
+ *
+ * The component allows you to display the avatars in different sizes,
+ * depending on your use case.
+ *
+ * The <code>AvatarGroup</code> component has two group types:
+ * <ul>
+ * <li><code>Group</code> type: The avatars are displayed as partially overlapped on
+ * top of each other and the entire group has one click/tap area.</li>
+ * <li><code>Individual</code> type: The avatars are displayed side-by-side and each
+ * avatar has its own click/tap area.</li>
+ * </ul>
+ *
+ * <h3>Responsive Behavior</h3>
+ *
+ * When the available space is less than the width required to display all avatars,
+ * an overflow visualization appears as a button placed at the end with the same shape
+ * and size as the avatars. The visualization displays the number of avatars that have overflowed
+ * and are not currently visible.
+ *
+ * <h3>Usage</h3>
+ *
+ * Use the <code>AvatarGroup</code> if:
+ * <ul>
+ * <li>You want to display a group of avatars.</li>
+ * <li>You want to display several avatars which have something in common.</li>
+ * </ul>
+ *
+ * Do not use the <code>AvatarGroup</code> if:
+ * <ul>
+ * <li>You want to display a single avatar.</li>
+ * <li>You want to display a gallery for simple images.</li>
+ * <li>You want to use it for other visual content than avatars.</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The component provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * - <code>type</code> Individual:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the overflow button</li>
+ * <li>[LEFT] - Navigate one avatar to the left</li>
+ * <li>[RIGHT] - Navigate one avatar to the right</li>
+ * <li>[HOME] - Navigate to the first avatar</li>
+ * <li>[END] - Navigate to the last avatar</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ * - <code>type</code> Group:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the component</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.AvatarGroup
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-avatar-group
+ * @since 1.0.0-rc.11
+ * @public
+ */
+declare class AvatarGroup extends UI5Element {
+    /**
+     * Defines the mode of the <code>AvatarGroup</code>.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>Group</code></li>
+     * <li><code>Individual</code></li>
+     * </ul>
+     * @type {sap.ui.webc.main.types.AvatarGroupType}
+     * @name sap.ui.webc.main.AvatarGroup.prototype.type
+     * @defaultValue "Group"
+     * @public
+     */
+    type: AvatarGroupType;
+    /**
+     * Defines the aria-haspopup value of the component on:
+     * <br><br>
+     * <ul>
+     * <li> the whole container when <code>type</code> property is <code>Group</code></li>
+     * <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
+     */
+    ariaHaspopup: string;
+    /**
+     * @private
+     */
+    _overflowButtonText: string;
+    /**
+     * Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.
+     * <br><br>
+     * <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>;
+    /**
+     * 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>;
+    static i18nBundle: I18nBundle;
+    _onResizeHandler: () => void;
+    _colorIndex: number;
+    _hiddenItems: number;
+    _itemNavigation: ItemNavigation;
+    constructor();
+    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
+     * @public
+     */
+    get hiddenItems(): Avatar[];
+    /**
+     * 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 []
+     * @public
+     */
+    get colorScheme(): string[];
+    get _customOverflowButton(): Button | undefined;
+    get _ariaLabelText(): string;
+    get _overflowButtonAriaLabelText(): string | undefined;
+    get _containerAriaHasPopup(): string | undefined;
+    get _overflowButtonAccAttributes(): {
+        hasPopup: string | undefined;
+    };
+    get _role(): "button" | "group";
+    get _hiddenStartIndex(): number;
+    get _overflowBtnHidden(): boolean;
+    get _isGroup(): boolean;
+    get _itemsCount(): number;
+    get _groupTabIndex(): "0" | "-1";
+    get _overflowButton(): Button | null;
+    /**
+     * Return the effective overflow button width
+     * Differences are that when in "Group" type the button is offset and overlaps the avatars
+     *
+     * 1) In case of "Group", (LTR/RTL aware) button width is qual to second item offset left/right
+     * 2) In case of "Individual" group type width is directly taken from button element
+     * @private
+     */
+    get _overflowButtonEffectiveWidth(): number;
+    get firstAvatarSize(): AvatarSize;
+    get classes(): {
+        overflowButton: {
+            "ui5-avatar-group-overflow-btn": boolean;
+            "ui5-avatar-group-overflow-btn-xs": boolean;
+            "ui5-avatar-group-overflow-btn-s": boolean;
+            "ui5-avatar-group-overflow-btn-m": boolean;
+            "ui5-avatar-group-overflow-btn-l": boolean;
+            "ui5-avatar-group-overflow-btn-xl": boolean;
+        };
+    };
+    onAfterRendering(): void;
+    onBeforeRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _onResize(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _fireGroupEvent(targetRef: HTMLElement): void;
+    _onClick(e: MouseEvent): void;
+    _onUI5Click(e: MouseEvent): void;
+    /**
+     * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.
+     * Set the margins (offsets) based on RTL/LTR.
+     * @private
+     */
+    _prepareAvatars(): void;
+    _onfocusin(e: FocusEvent): void;
+    /**
+     * Returns the total width to item excluding the item width
+     * RTL/LTR aware
+     * @private
+     * @param {HTMLElement} item
+     */
+    _getWidthToItem(item: HTMLElement): number;
+    /**
+     * Overflows items that were not able to fit the container
+     * @private
+     */
+    _overflowItems(): void;
+    _getNextBackgroundColor(): number;
+    _setHiddenItems(hiddenItems: number): void;
+    _getAriaHasPopup(): string | undefined;
+}
+export default AvatarGroup;
+export type { AvatarGroupClickEventDetail, };