npm - @ui5/webcomponents - Versions diffs - 1.13.0-rc.3 → 1.13.0 - Mend

@ui5/webcomponents 1.13.0-rc.3 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (557) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.13.0](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.4...v1.13.0) (2023-05-05)
+**Note:** Version bump only for package @ui5/webcomponents
+# [1.13.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.3...v1.13.0-rc.4) (2023-05-04)
+### Bug Fixes
+* add missing file-extensions for ESM support ([#6971](https://github.com/SAP/ui5-webcomponents/issues/6971)) ([1f42d0c](https://github.com/SAP/ui5-webcomponents/commit/1f42d0c658a437d64000c0f9b7562edff85b8421))
+* **ui5-avatar:** avatar initials correct display ([#6731](https://github.com/SAP/ui5-webcomponents/issues/6731)) ([16e6307](https://github.com/SAP/ui5-webcomponents/commit/16e630735fc607061f34b6fec6a5befe0727982f)), closes [#6642](https://github.com/SAP/ui5-webcomponents/issues/6642)
+* **ui5-input:** adjust Horizon themes according to the latest specifications ([#6965](https://github.com/SAP/ui5-webcomponents/issues/6965)) ([ce3707c](https://github.com/SAP/ui5-webcomponents/commit/ce3707cfd9d2dfc18f749efb61577ecab9582aaa))
+* **ui5-tabcontainer:** bottom align tab strip item text with no additional text ([#6950](https://github.com/SAP/ui5-webcomponents/issues/6950)) ([089bf3f](https://github.com/SAP/ui5-webcomponents/commit/089bf3fef71913d6feffe2d8255335c756cd5ab4))
+### Features
+* generate TS from HBS templates ([#6558](https://github.com/SAP/ui5-webcomponents/issues/6558)) ([02611b2](https://github.com/SAP/ui5-webcomponents/commit/02611b2e24b2c2a06129b8e60a8bc680d9501e39))
 # [1.13.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.2...v1.13.0-rc.3) (2023-04-27)

package/dist/Avatar.d.ts CHANGED Viewed

@@ -1,6 +1,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 AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
@@ -212,6 +213,8 @@ declare class Avatar extends UI5Element implements ITabbable {
     badge: Array<HTMLElement>;
     _onclick?: (e: MouseEvent) => void;
     static i18nBundle: I18nBundle;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
     static onDefine(): Promise<void>;
     get tabindex(): string;
     /**
@@ -235,10 +238,13 @@ declare class Avatar extends UI5Element implements ITabbable {
     get validInitials(): string | null;
     get accessibleNameText(): string | undefined;
     get hasImage(): boolean;
+    get initialsContainer(): HTMLObjectElement | null;
     onBeforeRendering(): void;
-    onAfterRendering(): void;
-    _setFallbackIcon(): string;
-    _checkInitials(): string;
+    onAfterRendering(): Promise<void>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    handleResize(): void;
+    _checkInitials(): void;
     _onClickHandler(e: MouseEvent): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;

package/dist/Avatar.js CHANGED Viewed

@@ -12,6 +12,8 @@ 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 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";
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
@@ -58,6 +60,10 @@ import "@ui5/webcomponents-icons/dist/employee.js";
  * @public
  */
 let Avatar = Avatar_1 = class Avatar extends UI5Element {
+    constructor() {
+        super();
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
     static async onDefine() {
         Avatar_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
@@ -110,30 +116,43 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         this._hasImage = !!this.image.length;
         return this._hasImage;
     }
+    get initialsContainer() {
+        return this.getDomRef().querySelector(".ui5-avatar-initials");
+    }
     onBeforeRendering() {
         this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
     }
-    onAfterRendering() {
-        this._checkInitials();
+    async onAfterRendering() {
+        await renderFinished();
+        if (this.initials && !this.icon) {
+            this._checkInitials();
+        }
+    }
+    onEnterDOM() {
+        this.initialsContainer && ResizeHandler.register(this.initialsContainer, this._handleResizeBound);
     }
-    _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;
+    onExitDOM() {
+        this.initialsContainer && ResizeHandler.deregister(this.initialsContainer, this._handleResizeBound);
+    }
+    handleResize() {
+        if (this.initials && !this.icon) {
+            this._checkInitials();
+        }
     }
     _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();
+            avatarInitials.classList.add("ui5-avatar-initials-hidden");
+            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) {
-                this._setFallbackIcon();
+            if (avatarInitials && avatarInitials.scrollWidth > avatar.scrollWidth) {
+                avatarInitials.classList.add("ui5-avatar-initials-hidden");
             }
         }
-        return this.icon;
     }
     _onClickHandler(e) {
         // prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired

package/dist/Avatar.js.map CHANGED Viewed

	@@ -1 +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\";\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><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 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><img></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 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 * <ui5-avatar><br>\n\t *     <ui5-badge slot=\"badge\"><br>\n\t *         <ui5-icon slot=\"icon\" name=\"employee\"></ui5-icon><br>\n\t *     </ui5-badge><br>\n\t * </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"]}
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\";\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><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 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><img></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 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 * <ui5-avatar><br>\n\t *     <ui5-badge slot=\"badge\"><br>\n\t *         <ui5-icon slot=\"icon\" name=\"employee\"></ui5-icon><br>\n\t *     </ui5-badge><br>\n\t * </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\" : 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\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.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 CHANGED Viewed

@@ -2,7 +2,7 @@ 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 type Avatar from "./Avatar.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
 type AvatarGroupClickEventDetail = {

package/dist/AvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.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\";\n\nimport {\n\tisEnter,\n\tisSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Button from \"./Button.js\";\nimport type Avatar from \"./Avatar\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarGroupType from \"./types/AvatarGroupType.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\nimport {\n\tAVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,\n\tAVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,\n\tAVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,\n\tAVATAR_GROUP_ARIA_LABEL_GROUP,\n\tAVATAR_GROUP_MOVE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarGroupCss from \"./generated/themes/AvatarGroup.css.js\";\n\n// Template\nimport AvatarGroupTemplate from \"./generated/templates/AvatarGroupTemplate.lit.js\";\n\nconst OVERFLOW_BTN_CLASS = \"ui5-avatar-group-overflow-btn\";\nconst AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;\n\n// based on RTL/LTR a margin-left/right is set respectfully\nconst offsets = {\n\t[AvatarSize.XS]: {\n\t\t[AvatarGroupType.Individual]: \"0.0625rem\",\n\t\t[AvatarGroupType.Group]: \"-0.75rem\",\n\t},\n\t[AvatarSize.S]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.25rem\",\n\t},\n\t[AvatarSize.M]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.625rem\",\n\t},\n\t[AvatarSize.L]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \" -2rem\",\n\t},\n\t[AvatarSize.XL]: {\n\t\t[AvatarGroupType.Individual]: \"0.25rem\",\n\t\t[AvatarGroupType.Group]: \"-2.75rem\",\n\t},\n};\n\ntype AvatarGroupClickEventDetail = {\n\ttargetRef: HTMLElement,\n\toverflowButtonClicked: boolean,\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n Displays a group of avatars arranged horizontally. It is useful to visually\n * showcase a group of related avatars, such as, project team members or employees.\n \n The component allows you to display the avatars in different sizes,\n * depending on your use case.\n \n The <code>AvatarGroup</code> component has two group types:\n * <ul>\n * <li><code>Group</code> type: The avatars are displayed as partially overlapped on\n * top of each other and the entire group has one click/tap area.</li>\n * <li><code>Individual</code> type: The avatars are displayed side-by-side and each\n * avatar has its own click/tap area.</li>\n * </ul>\n \n <h3>Responsive Behavior</h3>\n \n When the available space is less than the width required to display all avatars,\n * an overflow visualization appears as a button placed at the end with the same shape\n * and size as the avatars. The visualization displays the number of avatars that have overflowed\n * and are not currently visible.\n \n <h3>Usage</h3>\n \n Use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a group of avatars.</li>\n * <li>You want to display several avatars which have something in common.</li>\n * </ul>\n \n Do not use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a single avatar.</li>\n * <li>You want to display a gallery for simple images.</li>\n * <li>You want to use it for other visual content than avatars.</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n * The component provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * - <code>type</code> Individual:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the overflow button</li>\n * <li>[LEFT] - Navigate one avatar to the left</li>\n * <li>[RIGHT] - Navigate one avatar to the right</li>\n * <li>[HOME] - Navigate to the first avatar</li>\n * <li>[END] - Navigate to the last avatar</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n * - <code>type</code> Group:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the next interactive element after the component</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.AvatarGroup\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-avatar-group\n * @since 1.0.0-rc.11\n * @public\n /\n\n@customElement({\n\ttag: \"ui5-avatar-group\",\n\trenderer: litRender,\n\ttemplate: AvatarGroupTemplate,\n\tstyles: AvatarGroupCss,\n\tdependencies: [Button],\n})\n/\n Fired when the component is activated either with a\n* click/tap or by using the Enter or Space key.\n* @param {HTMLElement} targetRef The DOM ref of the clicked item.\n* @param {boolean} overflowButtonClicked indicates if the overflow button is clicked\n* @event sap.ui.webc.main.AvatarGroup#click\n* @public\n* @since 1.0.0-rc.11\n/\n@event(\"click\", {\n\tdetail: {\n\t\ttargetRef: { type: HTMLElement },\n\t\toverflowButtonClicked: { type: Boolean },\n\t},\n})\n\n/\n Fired when the count of visible <code>ui5-avatar</code> elements in the\n* component has changed\n* @event sap.ui.webc.main.AvatarGroup#overflow\n* @public\n* @since 1.0.0-rc.13\n/\n@event(\"overflow\")\n\nclass AvatarGroup extends UI5Element {\n\t/\n\t Defines the mode of the <code>AvatarGroup</code>.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Group</code></li>\n\t * <li><code>Individual</code></li>\n\t * </ul>\n\t * @type {sap.ui.webc.main.types.AvatarGroupType}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.type\n\t * @defaultValue \"Group\"\n\t * @public\n\t /\n\t@property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })\n\ttype!: AvatarGroupType;\n\n\t/\n\t Defines the aria-haspopup value of the component on:\n\t * <br><br>\n\t * <ul>\n\t * <li> the whole container when <code>type</code> property is <code>Group</code></li>\n\t * <li> the default \"More\" overflow button when <code>type</code> is <code>Individual</code></li>\n\t * </ul>\n\t * <br><br>\n\t * @type String\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup\n\t * @since 1.0.0-rc.15\n\t * @protected\n\t /\n\t@property()\n\tariaHaspopup!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\t_overflowButtonText!: string;\n\n\t/\n\t Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.\n\t * <br><br>\n\t * <b>Note:</b> The UX guidelines recommends using avatars with \"Circle\" shape.\n\t * Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\n\t * as the built-in overflow action has \"Circle\" shape.\n\t * @type {sap.ui.webc.main.IAvatar[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.default\n\t * @slot items\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<Avatar>;\n\n\t/\n\t Defines the overflow button of the component.\n\t * <b>Note:</b> We recommend using the <code>ui5-button</code> component.\n\t * <br><br>\n\t * <b>Note:</b> If this slot is not used, the component will\n\t * display the built-in overflow button.\n\t * @type {HTMLElement}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton\n\t * @slot overflowButton\n\t * @public\n\t * @since 1.0.0-rc.13\n\t /\n\t@slot()\n\toverflowButton!: Array<Button>;\n\n\tstatic i18nBundle: I18nBundle;\n\t_onResizeHandler: () => void;\n\t_colorIndex: number;\n\t_hiddenItems: number;\n\t_itemNavigation: ItemNavigation;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => {\n\t\t\t\treturn this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);\n\t\t\t},\n\t\t});\n\t\tthis._colorIndex = 0;\n\t\tthis._hiddenItems = 0;\n\t\tthis._onResizeHandler = this._onResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tAvatarGroup.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t/\n\t Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.\n\t * @readonly\n\t * @type {HTMLElement[]}\n\t * @defaultValue []\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems\n\t * @public\n\t /\n\tget hiddenItems() {\n\t\treturn this.items.slice(this._hiddenStartIndex);\n\t}\n\n\t/\n\t Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.\n\t * @readonly\n\t * @type {sap.ui.webc.main.types.AvatarColorScheme[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme\n\t * @defaultValue []\n\t * @public\n\t /\n\tget colorScheme() {\n\t\treturn this.items.map(avatar => avatar._effectiveBackgroundColor);\n\t}\n\n\tget _customOverflowButton() {\n\t\treturn this.overflowButton.length ? this.overflowButton[0] : undefined;\n\t}\n\n\tget _ariaLabelText() {\n\t\tconst hiddenItemsCount = this.hiddenItems.length;\n\t\tconst typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;\n\n\t\t// avatar type label\n\t\tlet text = AvatarGroup.i18nBundle.getText(typeLabelKey);\n\n\t\t// add displayed-hidden avatars label\n\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;\n\n\t\tif (this._isGroup) {\n\t\t\t// the container role is \"button\", add the message for complete list activation\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;\n\t\t} else {\n\t\t\t// the container role is \"group\", add the \"how to navigate\" message\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget _overflowButtonAriaLabelText() {\n\t\treturn this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);\n\t}\n\n\tget _containerAriaHasPopup() {\n\t\treturn this._isGroup ? this._getAriaHasPopup() : undefined;\n\t}\n\n\tget _overflowButtonAccAttributes() {\n\t\treturn {\n\t\t\thasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._isGroup ? \"button\" : \"group\";\n\t}\n\n\tget _hiddenStartIndex() {\n\t\treturn this._itemsCount - this._hiddenItems;\n\t}\n\n\tget _overflowBtnHidden() {\n\t\treturn this._hiddenItems === 0;\n\t}\n\n\tget _isGroup() {\n\t\treturn this.type === AvatarGroupType.Group;\n\t}\n\n\tget _itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget _groupTabIndex() {\n\t\treturn this._isGroup ? \"0\" : \"-1\";\n\t}\n\n\tget _overflowButton() {\n\t\treturn this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);\n\t}\n\n\t/\n\t Return the effective overflow button width\n\t * Differences are that when in \"Group\" type the button is offset and overlaps the avatars\n\t \n\t 1) In case of \"Group\", (LTR/RTL aware) button width is qual to second item offset left/right\n\t * 2) In case of \"Individual\" group type width is directly taken from button element\n\t * @private\n\t /\n\tget _overflowButtonEffectiveWidth() {\n\t\tconst button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;\n\t\t// if in \"Group\" mode overflow button size is equal to the offset from second item\n\n\t\tif (!button) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this._isGroup) {\n\t\t\tlet item: HTMLElement = this.items[1];\n\t\t\tconst ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;\n\n\t\t\t// in some cases when second avatar is overflowed the offset of the button is the right one\n\t\t\tif (!item \|\| item.hidden) {\n\t\t\t\titem = button;\n\t\t\t}\n\n\t\t\treturn this.effectiveDir === \"rtl\" ? this._getWidthToItem(item) : ltrEffectiveWidth;\n\t\t}\n\n\t\treturn button.offsetWidth;\n\t}\n\n\tget firstAvatarSize() {\n\t\treturn this.items[0].size;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\toverflowButton: {\n\t\t\t\t\"ui5-avatar-group-overflow-btn\": true,\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xs\": this.firstAvatarSize === \"XS\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-s\": this.firstAvatarSize === \"S\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-m\": this.firstAvatarSize === \"M\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-l\": this.firstAvatarSize === \"L\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xl\": this.firstAvatarSize === \"XL\",\n\t\t\t},\n\t\t};\n\t}\n\n\tonAfterRendering() {\n\t\tthis._overflowItems();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._customOverflowButton) {\n\t\t\tthis._customOverflowButton.nonInteractive = this._isGroup;\n\t\t}\n\n\t\tthis._prepareAvatars();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._onResizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeHandler);\n\t}\n\n\t_onResize() {\n\t\tthis._overflowItems();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\t// when type is \"Individual\" the ui5-avatar and ui5-button both\n\t\t// fire \"click\" event when SPACE or ENTER are pressed and\n\t\t// AvatarGroup \"click\" is fired in their handlers (_onClick, _onUI5Click).\n\t\tif (this._isGroup) {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\t} else if (isSpace(e)) {\n\t\t\t\t// prevent scrolling\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!e.shiftKey && isSpace(e) && this._isGroup) {\n\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_fireGroupEvent(targetRef: HTMLElement) {\n\t\tconst isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) \|\| targetRef === this._customOverflowButton;\n\n\t\tthis.fireEvent<AvatarGroupClickEventDetail>(\"click\", {\n\t\t\ttargetRef,\n\t\t\toverflowButtonClicked: isOverflowButtonClicked,\n\t\t});\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// no matter the value of noConflict, the ui5-button and the group container (div) always fire a native click event\n\t\tconst isButton = target.hasAttribute(\"ui5-button\");\n\t\te.stopPropagation();\n\n\t\tif (this._isGroup \|\| isButton) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t_onUI5Click(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// when noConflict=true only ui5-avatar will fire ui5-click event\n\t\tconst isAvatar = target.hasAttribute(\"ui5-avatar\");\n\t\te.stopPropagation();\n\n\t\tif (isAvatar) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t/\n\t Modifies avatars to the needs of avatar group properties. Respects already set size and background color.\n\t * Set the margins (offsets) based on RTL/LTR.\n\t * @private\n\t /\n\t_prepareAvatars() {\n\t\tthis._colorIndex = 0;\n\n\t\tthis.items.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\tavatar.interactive = !this._isGroup;\n\n\t\t\tif (!avatar.getAttribute(\"_color-scheme\")) {\n\t\t\t\t// AvatarGroup respects colors set to ui5-avatar\n\t\t\t\tavatar.setAttribute(\"_color-scheme\", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);\n\t\t\t}\n\n\t\t\t// last avatar should not be offset as it breaks the container width and focus styles are no set correctly\n\t\t\tif (index !== this._itemsCount - 1 \|\| this._customOverflowButton) {\n\t\t\t\t// based on RTL the browser automatically sets left or right margin to avatars\n\t\t\t\tavatar.style.marginInlineEnd = offsets[avatar._effectiveSize][this.type];\n\t\t\t}\n\t\t});\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis._itemNavigation.setCurrentItem(e.target as Avatar);\n\t}\n\n\t/\n\t Returns the total width to item excluding the item width\n\t * RTL/LTR aware\n\t * @private\n\t * @param {HTMLElement} item\n\t /\n\t_getWidthToItem(item: HTMLElement) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\t\tconst ltrWidthToItem = item.offsetLeft - this.offsetLeft;\n\n\t\tif (isRTL) {\n\t\t\tconst itemOffsetParent = item.offsetParent as HTMLElement;\n\n\t\t\t// in RTL the total width is equal to difference of the parent container width and\n\t\t\t// how much is the item offset to the left minus its offsetWidth\n\n\t\t\tif (!itemOffsetParent) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\treturn itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;\n\t\t}\n\n\t\treturn ltrWidthToItem;\n\t}\n\n\t/\n\t Overflows items that were not able to fit the container\n\t * @private\n\t */\n\t_overflowItems() {\n\t\tif (this.items.length < 2) {\n\t\t\t// no need to overflow avatars\n\t\t\treturn;\n\t\t}\n\n\t\tlet hiddenItems = 0;\n\n\t\tfor (let index = 0; index < this._itemsCount; index++) {\n\t\t\tconst item: Avatar = this.items[index];\n\n\t\t\t// show item to determine if it will fit the new container size\n\t\t\titem.hidden = false;\n\n\t\t\t// container width to current item + item width (avatar)\n\t\t\t// used to determine whether the following items will fit the container or not\n\t\t\tlet totalWidth = this._getWidthToItem(item) + item.offsetWidth;\n\n\t\t\tif (index !== this._itemsCount - 1 \|\| this._customOverflowButton) {\n\t\t\t\ttotalWidth += this._overflowButtonEffectiveWidth;\n\t\t\t}\n\n\t\t\tif (totalWidth > this.offsetWidth) {\n\t\t\t\thiddenItems = this._itemsCount - index;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// hide the items that did not fit the container size\n\t\tthis._setHiddenItems(hiddenItems);\n\t}\n\n\t_getNextBackgroundColor() {\n\t\t// counter is to automatically assign background colors to avatars, `Accent10` is the highest color value\n\t\tif (++this._colorIndex > 10) {\n\t\t\tthis._colorIndex = 1;\n\t\t}\n\t\treturn this._colorIndex;\n\t}\n\n\t_setHiddenItems(hiddenItems: number) {\n\t\tconst shouldFireEvent = this._hiddenItems !== hiddenItems;\n\n\t\tthis._hiddenItems = hiddenItems;\n\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.hidden = index >= this._hiddenStartIndex;\n\t\t});\n\n\t\tthis._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;\n\n\t\tif (shouldFireEvent) {\n\t\t\tthis.fireEvent(\"overflow\");\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\tif (this.ariaHaspopup === \"\") {\n\t\t\treturn;\n\t\t}\n\n\t\treturn this.ariaHaspopup;\n\t}\n}\n\nAvatarGroup.define();\n\nexport default AvatarGroup;\nexport type {\n\tAvatarGroupClickEventDetail,\n};\n"]}
1	+ {"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.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\";\n\nimport {\n\tisEnter,\n\tisSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Button from \"./Button.js\";\nimport type Avatar from \"./Avatar.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarGroupType from \"./types/AvatarGroupType.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\nimport {\n\tAVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,\n\tAVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,\n\tAVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,\n\tAVATAR_GROUP_ARIA_LABEL_GROUP,\n\tAVATAR_GROUP_MOVE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarGroupCss from \"./generated/themes/AvatarGroup.css.js\";\n\n// Template\nimport AvatarGroupTemplate from \"./generated/templates/AvatarGroupTemplate.lit.js\";\n\nconst OVERFLOW_BTN_CLASS = \"ui5-avatar-group-overflow-btn\";\nconst AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;\n\n// based on RTL/LTR a margin-left/right is set respectfully\nconst offsets = {\n\t[AvatarSize.XS]: {\n\t\t[AvatarGroupType.Individual]: \"0.0625rem\",\n\t\t[AvatarGroupType.Group]: \"-0.75rem\",\n\t},\n\t[AvatarSize.S]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.25rem\",\n\t},\n\t[AvatarSize.M]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.625rem\",\n\t},\n\t[AvatarSize.L]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \" -2rem\",\n\t},\n\t[AvatarSize.XL]: {\n\t\t[AvatarGroupType.Individual]: \"0.25rem\",\n\t\t[AvatarGroupType.Group]: \"-2.75rem\",\n\t},\n};\n\ntype AvatarGroupClickEventDetail = {\n\ttargetRef: HTMLElement,\n\toverflowButtonClicked: boolean,\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n Displays a group of avatars arranged horizontally. It is useful to visually\n * showcase a group of related avatars, such as, project team members or employees.\n \n The component allows you to display the avatars in different sizes,\n * depending on your use case.\n \n The <code>AvatarGroup</code> component has two group types:\n * <ul>\n * <li><code>Group</code> type: The avatars are displayed as partially overlapped on\n * top of each other and the entire group has one click/tap area.</li>\n * <li><code>Individual</code> type: The avatars are displayed side-by-side and each\n * avatar has its own click/tap area.</li>\n * </ul>\n \n <h3>Responsive Behavior</h3>\n \n When the available space is less than the width required to display all avatars,\n * an overflow visualization appears as a button placed at the end with the same shape\n * and size as the avatars. The visualization displays the number of avatars that have overflowed\n * and are not currently visible.\n \n <h3>Usage</h3>\n \n Use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a group of avatars.</li>\n * <li>You want to display several avatars which have something in common.</li>\n * </ul>\n \n Do not use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a single avatar.</li>\n * <li>You want to display a gallery for simple images.</li>\n * <li>You want to use it for other visual content than avatars.</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n * The component provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * - <code>type</code> Individual:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the overflow button</li>\n * <li>[LEFT] - Navigate one avatar to the left</li>\n * <li>[RIGHT] - Navigate one avatar to the right</li>\n * <li>[HOME] - Navigate to the first avatar</li>\n * <li>[END] - Navigate to the last avatar</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n * - <code>type</code> Group:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the next interactive element after the component</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.AvatarGroup\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-avatar-group\n * @since 1.0.0-rc.11\n * @public\n /\n\n@customElement({\n\ttag: \"ui5-avatar-group\",\n\trenderer: litRender,\n\ttemplate: AvatarGroupTemplate,\n\tstyles: AvatarGroupCss,\n\tdependencies: [Button],\n})\n/\n Fired when the component is activated either with a\n* click/tap or by using the Enter or Space key.\n* @param {HTMLElement} targetRef The DOM ref of the clicked item.\n* @param {boolean} overflowButtonClicked indicates if the overflow button is clicked\n* @event sap.ui.webc.main.AvatarGroup#click\n* @public\n* @since 1.0.0-rc.11\n/\n@event(\"click\", {\n\tdetail: {\n\t\ttargetRef: { type: HTMLElement },\n\t\toverflowButtonClicked: { type: Boolean },\n\t},\n})\n\n/\n Fired when the count of visible <code>ui5-avatar</code> elements in the\n* component has changed\n* @event sap.ui.webc.main.AvatarGroup#overflow\n* @public\n* @since 1.0.0-rc.13\n/\n@event(\"overflow\")\n\nclass AvatarGroup extends UI5Element {\n\t/\n\t Defines the mode of the <code>AvatarGroup</code>.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Group</code></li>\n\t * <li><code>Individual</code></li>\n\t * </ul>\n\t * @type {sap.ui.webc.main.types.AvatarGroupType}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.type\n\t * @defaultValue \"Group\"\n\t * @public\n\t /\n\t@property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })\n\ttype!: AvatarGroupType;\n\n\t/\n\t Defines the aria-haspopup value of the component on:\n\t * <br><br>\n\t * <ul>\n\t * <li> the whole container when <code>type</code> property is <code>Group</code></li>\n\t * <li> the default \"More\" overflow button when <code>type</code> is <code>Individual</code></li>\n\t * </ul>\n\t * <br><br>\n\t * @type String\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup\n\t * @since 1.0.0-rc.15\n\t * @protected\n\t /\n\t@property()\n\tariaHaspopup!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\t_overflowButtonText!: string;\n\n\t/\n\t Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.\n\t * <br><br>\n\t * <b>Note:</b> The UX guidelines recommends using avatars with \"Circle\" shape.\n\t * Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\n\t * as the built-in overflow action has \"Circle\" shape.\n\t * @type {sap.ui.webc.main.IAvatar[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.default\n\t * @slot items\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<Avatar>;\n\n\t/\n\t Defines the overflow button of the component.\n\t * <b>Note:</b> We recommend using the <code>ui5-button</code> component.\n\t * <br><br>\n\t * <b>Note:</b> If this slot is not used, the component will\n\t * display the built-in overflow button.\n\t * @type {HTMLElement}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton\n\t * @slot overflowButton\n\t * @public\n\t * @since 1.0.0-rc.13\n\t /\n\t@slot()\n\toverflowButton!: Array<Button>;\n\n\tstatic i18nBundle: I18nBundle;\n\t_onResizeHandler: () => void;\n\t_colorIndex: number;\n\t_hiddenItems: number;\n\t_itemNavigation: ItemNavigation;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => {\n\t\t\t\treturn this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);\n\t\t\t},\n\t\t});\n\t\tthis._colorIndex = 0;\n\t\tthis._hiddenItems = 0;\n\t\tthis._onResizeHandler = this._onResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tAvatarGroup.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t/\n\t Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.\n\t * @readonly\n\t * @type {HTMLElement[]}\n\t * @defaultValue []\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems\n\t * @public\n\t /\n\tget hiddenItems() {\n\t\treturn this.items.slice(this._hiddenStartIndex);\n\t}\n\n\t/\n\t Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.\n\t * @readonly\n\t * @type {sap.ui.webc.main.types.AvatarColorScheme[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme\n\t * @defaultValue []\n\t * @public\n\t /\n\tget colorScheme() {\n\t\treturn this.items.map(avatar => avatar._effectiveBackgroundColor);\n\t}\n\n\tget _customOverflowButton() {\n\t\treturn this.overflowButton.length ? this.overflowButton[0] : undefined;\n\t}\n\n\tget _ariaLabelText() {\n\t\tconst hiddenItemsCount = this.hiddenItems.length;\n\t\tconst typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;\n\n\t\t// avatar type label\n\t\tlet text = AvatarGroup.i18nBundle.getText(typeLabelKey);\n\n\t\t// add displayed-hidden avatars label\n\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;\n\n\t\tif (this._isGroup) {\n\t\t\t// the container role is \"button\", add the message for complete list activation\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;\n\t\t} else {\n\t\t\t// the container role is \"group\", add the \"how to navigate\" message\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget _overflowButtonAriaLabelText() {\n\t\treturn this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);\n\t}\n\n\tget _containerAriaHasPopup() {\n\t\treturn this._isGroup ? this._getAriaHasPopup() : undefined;\n\t}\n\n\tget _overflowButtonAccAttributes() {\n\t\treturn {\n\t\t\thasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._isGroup ? \"button\" : \"group\";\n\t}\n\n\tget _hiddenStartIndex() {\n\t\treturn this._itemsCount - this._hiddenItems;\n\t}\n\n\tget _overflowBtnHidden() {\n\t\treturn this._hiddenItems === 0;\n\t}\n\n\tget _isGroup() {\n\t\treturn this.type === AvatarGroupType.Group;\n\t}\n\n\tget _itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget _groupTabIndex() {\n\t\treturn this._isGroup ? \"0\" : \"-1\";\n\t}\n\n\tget _overflowButton() {\n\t\treturn this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);\n\t}\n\n\t/\n\t Return the effective overflow button width\n\t * Differences are that when in \"Group\" type the button is offset and overlaps the avatars\n\t \n\t 1) In case of \"Group\", (LTR/RTL aware) button width is qual to second item offset left/right\n\t * 2) In case of \"Individual\" group type width is directly taken from button element\n\t * @private\n\t /\n\tget _overflowButtonEffectiveWidth() {\n\t\tconst button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;\n\t\t// if in \"Group\" mode overflow button size is equal to the offset from second item\n\n\t\tif (!button) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this._isGroup) {\n\t\t\tlet item: HTMLElement = this.items[1];\n\t\t\tconst ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;\n\n\t\t\t// in some cases when second avatar is overflowed the offset of the button is the right one\n\t\t\tif (!item \|\| item.hidden) {\n\t\t\t\titem = button;\n\t\t\t}\n\n\t\t\treturn this.effectiveDir === \"rtl\" ? this._getWidthToItem(item) : ltrEffectiveWidth;\n\t\t}\n\n\t\treturn button.offsetWidth;\n\t}\n\n\tget firstAvatarSize() {\n\t\treturn this.items[0].size;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\toverflowButton: {\n\t\t\t\t\"ui5-avatar-group-overflow-btn\": true,\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xs\": this.firstAvatarSize === \"XS\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-s\": this.firstAvatarSize === \"S\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-m\": this.firstAvatarSize === \"M\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-l\": this.firstAvatarSize === \"L\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xl\": this.firstAvatarSize === \"XL\",\n\t\t\t},\n\t\t};\n\t}\n\n\tonAfterRendering() {\n\t\tthis._overflowItems();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._customOverflowButton) {\n\t\t\tthis._customOverflowButton.nonInteractive = this._isGroup;\n\t\t}\n\n\t\tthis._prepareAvatars();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._onResizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeHandler);\n\t}\n\n\t_onResize() {\n\t\tthis._overflowItems();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\t// when type is \"Individual\" the ui5-avatar and ui5-button both\n\t\t// fire \"click\" event when SPACE or ENTER are pressed and\n\t\t// AvatarGroup \"click\" is fired in their handlers (_onClick, _onUI5Click).\n\t\tif (this._isGroup) {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\t} else if (isSpace(e)) {\n\t\t\t\t// prevent scrolling\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!e.shiftKey && isSpace(e) && this._isGroup) {\n\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_fireGroupEvent(targetRef: HTMLElement) {\n\t\tconst isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) \|\| targetRef === this._customOverflowButton;\n\n\t\tthis.fireEvent<AvatarGroupClickEventDetail>(\"click\", {\n\t\t\ttargetRef,\n\t\t\toverflowButtonClicked: isOverflowButtonClicked,\n\t\t});\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// no matter the value of noConflict, the ui5-button and the group container (div) always fire a native click event\n\t\tconst isButton = target.hasAttribute(\"ui5-button\");\n\t\te.stopPropagation();\n\n\t\tif (this._isGroup \|\| isButton) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t_onUI5Click(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// when noConflict=true only ui5-avatar will fire ui5-click event\n\t\tconst isAvatar = target.hasAttribute(\"ui5-avatar\");\n\t\te.stopPropagation();\n\n\t\tif (isAvatar) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t/\n\t Modifies avatars to the needs of avatar group properties. Respects already set size and background color.\n\t * Set the margins (offsets) based on RTL/LTR.\n\t * @private\n\t /\n\t_prepareAvatars() {\n\t\tthis._colorIndex = 0;\n\n\t\tthis.items.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\tavatar.interactive = !this._isGroup;\n\n\t\t\tif (!avatar.getAttribute(\"_color-scheme\")) {\n\t\t\t\t// AvatarGroup respects colors set to ui5-avatar\n\t\t\t\tavatar.setAttribute(\"_color-scheme\", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);\n\t\t\t}\n\n\t\t\t// last avatar should not be offset as it breaks the container width and focus styles are no set correctly\n\t\t\tif (index !== this._itemsCount - 1 \|\| this._customOverflowButton) {\n\t\t\t\t// based on RTL the browser automatically sets left or right margin to avatars\n\t\t\t\tavatar.style.marginInlineEnd = offsets[avatar._effectiveSize][this.type];\n\t\t\t}\n\t\t});\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis._itemNavigation.setCurrentItem(e.target as Avatar);\n\t}\n\n\t/\n\t Returns the total width to item excluding the item width\n\t * RTL/LTR aware\n\t * @private\n\t * @param {HTMLElement} item\n\t /\n\t_getWidthToItem(item: HTMLElement) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\t\tconst ltrWidthToItem = item.offsetLeft - this.offsetLeft;\n\n\t\tif (isRTL) {\n\t\t\tconst itemOffsetParent = item.offsetParent as HTMLElement;\n\n\t\t\t// in RTL the total width is equal to difference of the parent container width and\n\t\t\t// how much is the item offset to the left minus its offsetWidth\n\n\t\t\tif (!itemOffsetParent) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\treturn itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;\n\t\t}\n\n\t\treturn ltrWidthToItem;\n\t}\n\n\t/\n\t Overflows items that were not able to fit the container\n\t * @private\n\t */\n\t_overflowItems() {\n\t\tif (this.items.length < 2) {\n\t\t\t// no need to overflow avatars\n\t\t\treturn;\n\t\t}\n\n\t\tlet hiddenItems = 0;\n\n\t\tfor (let index = 0; index < this._itemsCount; index++) {\n\t\t\tconst item: Avatar = this.items[index];\n\n\t\t\t// show item to determine if it will fit the new container size\n\t\t\titem.hidden = false;\n\n\t\t\t// container width to current item + item width (avatar)\n\t\t\t// used to determine whether the following items will fit the container or not\n\t\t\tlet totalWidth = this._getWidthToItem(item) + item.offsetWidth;\n\n\t\t\tif (index !== this._itemsCount - 1 \|\| this._customOverflowButton) {\n\t\t\t\ttotalWidth += this._overflowButtonEffectiveWidth;\n\t\t\t}\n\n\t\t\tif (totalWidth > this.offsetWidth) {\n\t\t\t\thiddenItems = this._itemsCount - index;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// hide the items that did not fit the container size\n\t\tthis._setHiddenItems(hiddenItems);\n\t}\n\n\t_getNextBackgroundColor() {\n\t\t// counter is to automatically assign background colors to avatars, `Accent10` is the highest color value\n\t\tif (++this._colorIndex > 10) {\n\t\t\tthis._colorIndex = 1;\n\t\t}\n\t\treturn this._colorIndex;\n\t}\n\n\t_setHiddenItems(hiddenItems: number) {\n\t\tconst shouldFireEvent = this._hiddenItems !== hiddenItems;\n\n\t\tthis._hiddenItems = hiddenItems;\n\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.hidden = index >= this._hiddenStartIndex;\n\t\t});\n\n\t\tthis._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;\n\n\t\tif (shouldFireEvent) {\n\t\t\tthis.fireEvent(\"overflow\");\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\tif (this.ariaHaspopup === \"\") {\n\t\t\treturn;\n\t\t}\n\n\t\treturn this.ariaHaspopup;\n\t}\n}\n\nAvatarGroup.define();\n\nexport default AvatarGroup;\nexport type {\n\tAvatarGroupClickEventDetail,\n};\n"]}

package/dist/Button.d.ts CHANGED Viewed

@@ -177,7 +177,11 @@ declare class Button extends UI5Element implements IFormElement {
      * @public
      * @since 1.2.0
      */
-    accessibilityAttributes: object;
+    accessibilityAttributes: {
+        expanded: "true" | "false";
+        hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree";
+        controls: string;
+    };
     /**
      * Used to switch the active state (pressed or not) of the component.
      * @private
@@ -245,7 +249,7 @@ declare class Button extends UI5Element implements IFormElement {
     _onfocusout(): void;
     _onfocusin(e: FocusEvent): void;
     get hasButtonType(): boolean;
-    get iconRole(): "presentation" | "";
+    get iconRole(): "" | "presentation";
     get isIconOnly(): boolean;
     static typeTextMappings(): Record<string, I18nText>;
     get buttonTypeText(): string;

package/dist/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type { PassiveEventListenerObject } 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 { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport { getIconAccessibleName } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\n\nimport {\n\tisPhone,\n\tisTablet,\n\tisCombi,\n\tisDesktop,\n\tisSafari,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport type { IFormElement } from \"./features/InputElementsFormSupport.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport ButtonTemplate from \"./generated/templates/ButtonTemplate.lit.js\";\nimport Icon from \"./Icon.js\";\n\nimport { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport buttonCss from \"./generated/themes/Button.css.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeButton: Button \| null = null;\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-button</code> component represents a simple push button.\n * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing\n * certain keyboard keys, such as Enter.\n \n \n * <h3>Usage</h3>\n \n For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify\n * whether the text or the icon is displayed first.\n * <br><br>\n * You can choose from a set of predefined types that offer different\n * styling to correspond to the triggered action.\n * <br><br>\n * You can set the <code>ui5-button</code> as enabled or disabled. An enabled\n * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes\n * its style to provide visual feedback to the user that it is pressed or hovered over with\n * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.\n \n <h3>CSS Shadow Parts</h3>\n \n <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-button</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>button - Used to style the native button element</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents/dist/Button\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Button\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-button\n * @implements sap.ui.webc.main.IButton\n * @public\n /\n@customElement({\n\ttag: \"ui5-button\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: ButtonTemplate,\n\tstyles: buttonCss,\n\tdependencies: [Icon],\n})\n/\n Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * <br><br>\n * <b>Note:</b> The event will not be fired if the <code>disabled</code>\n * property is set to <code>true</code>.\n \n @event sap.ui.webc.main.Button#click\n * @public\n * @native\n /\n@event(\"click\")\nclass Button extends UI5Element implements IFormElement {\n\t/\n\t Defines the component design.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>Default</code></li>\n\t * <li><code>Emphasized</code></li>\n\t * <li><code>Positive</code></li>\n\t * <li><code>Negative</code></li>\n\t * <li><code>Transparent</code></li>\n\t * <li><code>Attention</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.main.types.ButtonDesign}\n\t * @name sap.ui.webc.main.Button.prototype.design\n\t * @defaultvalue \"Default\"\n\t * @public\n\t /\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: ButtonDesign;\n\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.Button.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 the icon, displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t * <br><br>\n\t * Example:\n\t \n\t See all the available icons within 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 \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.icon\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\ticon!: string;\n\n\t/\n\t Defines whether the icon should be displayed after the component text.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Button.prototype.iconEnd\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\n\n\t/\n\t When set to <code>true</code>, the component will\n\t * automatically submit the nearest HTML form element on <code>press</code>.\n\t * <br><br>\n\t * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Button.prototype.submits\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tsubmits!: boolean;\n\n\t/\n\t Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.tooltip\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.2.0\n\t /\n\t@property()\n\ttooltip!: string;\n\n\t/\n\t Defines the accessible ARIA name of the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.accessibleName\n\t * @defaultvalue undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/\n\t Receives id(or many ids) of the elements that label the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.1.0\n\t /\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/\n\t An object of strings that defines several additional accessibility attribute values\n\t * for customization depending on the use case.\n\t \n\t It supports the following fields:\n\t \n\t <ul>\n\t * \t\t<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t \t\t\t<ul>\n\t \t\t\t\t<li><code>true</code></li>\n\t \t\t\t\t<li><code>false</code></li>\n\t \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>hasPopup</code>: 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:\n\t * \t\t\t<ul>\n\t \t\t\t\t<li><code>Dialog</code></li>\n\t \t\t\t\t<li><code>Grid</code></li>\n\t \t\t\t\t<li><code>ListBox</code></li>\n\t \t\t\t\t<li><code>Menu</code></li>\n\t \t\t\t\t<li><code>Tree</code></li>\n\t \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>\n\t * </ul>\n\t * @type {object}\n\t * @name sap.ui.webc.main.Button.prototype.accessibilityAttributes\n\t * @public\n\t * @since 1.2.0\n\t /\n\t@property({ type: Object })\n\taccessibilityAttributes!: object;\n\n\t/\n\t Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/\n\t Defines if a content has been added to the default slot\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\ticonOnly!: 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 has a slotted icon\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\thasIcon!: boolean;\n\n\t/\n\t Indicates if the element if focusable\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tnonInteractive!: boolean;\n\n\t/\n\t The current title of the button, either the tooltip property or the icons tooltip. The tooltip property with higher prio.\n\t * @private\n\t /\n\t@property({ noAttribute: true })\n\tbuttonTitle?: string;\n\n\t@property({ type: Object })\n\t_iconSettings!: object;\n\n\t/\n\t Defines the tabIndex of the component.\n\t * @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t/\n\t @since 1.0.0-rc.13\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\t_isTouch!: boolean;\n\n\t/\n\t Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t \n\t @type {Node[]}\n\t * @name sap.ui.webc.main.Button.prototype.default\n\t * @slot\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t_deactivate: () => void;\n\n\t_ontouchstart: PassiveEventListenerObject;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeButton) {\n\t\t\t\tactiveButton.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\n\t\tconst handleTouchStartEvent = (e: TouchEvent) => {\n\t\t\tmarkEvent(e, \"button\");\n\n\t\t\tif (this.nonInteractive) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.active = true;\n\t\t};\n\n\t\tthis._ontouchstart = {\n\t\t\thandleEvent: handleTouchStartEvent,\n\t\t\tpassive: true,\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tthis._isTouch = (isPhone() \|\| isTablet()) && !isCombi();\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (this.submits && !formSupport) {\n\t\t\tconsole.warn(`In order for the \"submits\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\n\t\tthis.iconOnly = this.isIconOnly;\n\t\tthis.hasIcon = !!this.icon;\n\n\t\tthis.buttonTitle = this.tooltip \|\| await getIconAccessibleName(this.icon);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\t\tmarkEvent(e, \"button\");\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport && this.submits) {\n\t\t\tformSupport.triggerFormSubmit(this);\n\t\t}\n\n\t\tif (isSafari()) {\n\t\t\tthis.getDomRef()?.focus();\n\t\t}\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tif (this.nonInteractive \|\| this._isTouch) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tthis.active = true;\n\t\tactiveButton = this; // eslint-disable-line\n\t}\n\n\t_ontouchend() {\n\t\tthis.active = false;\n\n\t\tif (activeButton) {\n\t\t\tactiveButton.active = false;\n\t\t}\n\t}\n\n\t_onmouseup(e: MouseEvent) {\n\t\tmarkEvent(e, \"button\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tmarkEvent(e, \"button\");\n\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.active = true;\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.active = false;\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\t\tthis.active = false;\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = false;\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\tget hasButtonType() {\n\t\treturn this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;\n\t}\n\n\tget iconRole() {\n\t\tif (!this.icon) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn \"presentation\";\n\t}\n\n\tget isIconOnly() {\n\t\treturn !willShowContent(this.text);\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Positive\": BUTTON_ARIA_TYPE_ACCEPT,\n\t\t\t\"Negative\": BUTTON_ARIA_TYPE_REJECT,\n\t\t\t\"Emphasized\": BUTTON_ARIA_TYPE_EMPHASIZED,\n\t\t};\n\t}\n\n\tget buttonTypeText() {\n\t\treturn Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);\n\t}\n\n\tget tabIndexValue() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (tabindex) {\n\t\t\treturn tabindex;\n\t\t}\n\n\t\treturn this.nonInteractive ? \"-1\" : this._tabIndex;\n\t}\n\n\tget showIconTooltip() {\n\t\treturn this.iconOnly && !this.tooltip;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tButton.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nButton.define();\n\nexport default Button;\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type { PassiveEventListenerObject } 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 { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport { getIconAccessibleName } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\n\nimport {\n\tisPhone,\n\tisTablet,\n\tisCombi,\n\tisDesktop,\n\tisSafari,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport type { IFormElement } from \"./features/InputElementsFormSupport.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport ButtonTemplate from \"./generated/templates/ButtonTemplate.lit.js\";\nimport Icon from \"./Icon.js\";\n\nimport { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport buttonCss from \"./generated/themes/Button.css.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeButton: Button \| null = null;\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-button</code> component represents a simple push button.\n * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing\n * certain keyboard keys, such as Enter.\n \n \n * <h3>Usage</h3>\n \n For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify\n * whether the text or the icon is displayed first.\n * <br><br>\n * You can choose from a set of predefined types that offer different\n * styling to correspond to the triggered action.\n * <br><br>\n * You can set the <code>ui5-button</code> as enabled or disabled. An enabled\n * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes\n * its style to provide visual feedback to the user that it is pressed or hovered over with\n * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.\n \n <h3>CSS Shadow Parts</h3>\n \n <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-button</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>button - Used to style the native button element</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents/dist/Button\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Button\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-button\n * @implements sap.ui.webc.main.IButton\n * @public\n /\n@customElement({\n\ttag: \"ui5-button\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: ButtonTemplate,\n\tstyles: buttonCss,\n\tdependencies: [Icon],\n})\n/\n Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * <br><br>\n * <b>Note:</b> The event will not be fired if the <code>disabled</code>\n * property is set to <code>true</code>.\n \n @event sap.ui.webc.main.Button#click\n * @public\n * @native\n /\n@event(\"click\")\nclass Button extends UI5Element implements IFormElement {\n\t/\n\t Defines the component design.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>Default</code></li>\n\t * <li><code>Emphasized</code></li>\n\t * <li><code>Positive</code></li>\n\t * <li><code>Negative</code></li>\n\t * <li><code>Transparent</code></li>\n\t * <li><code>Attention</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.main.types.ButtonDesign}\n\t * @name sap.ui.webc.main.Button.prototype.design\n\t * @defaultvalue \"Default\"\n\t * @public\n\t /\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: ButtonDesign;\n\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.Button.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 the icon, displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t * <br><br>\n\t * Example:\n\t \n\t See all the available icons within 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 \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.icon\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\ticon!: string;\n\n\t/\n\t Defines whether the icon should be displayed after the component text.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Button.prototype.iconEnd\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\n\n\t/\n\t When set to <code>true</code>, the component will\n\t * automatically submit the nearest HTML form element on <code>press</code>.\n\t * <br><br>\n\t * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Button.prototype.submits\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tsubmits!: boolean;\n\n\t/\n\t Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.tooltip\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.2.0\n\t /\n\t@property()\n\ttooltip!: string;\n\n\t/\n\t Defines the accessible ARIA name of the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.accessibleName\n\t * @defaultvalue undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/\n\t Receives id(or many ids) of the elements that label the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Button.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.1.0\n\t /\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/\n\t An object of strings that defines several additional accessibility attribute values\n\t * for customization depending on the use case.\n\t \n\t It supports the following fields:\n\t \n\t <ul>\n\t * \t\t<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t \t\t\t<ul>\n\t \t\t\t\t<li><code>true</code></li>\n\t \t\t\t\t<li><code>false</code></li>\n\t \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>hasPopup</code>: 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:\n\t * \t\t\t<ul>\n\t \t\t\t\t<li><code>Dialog</code></li>\n\t \t\t\t\t<li><code>Grid</code></li>\n\t \t\t\t\t<li><code>ListBox</code></li>\n\t \t\t\t\t<li><code>Menu</code></li>\n\t \t\t\t\t<li><code>Tree</code></li>\n\t \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>\n\t * </ul>\n\t * @type {object}\n\t * @name sap.ui.webc.main.Button.prototype.accessibilityAttributes\n\t * @public\n\t * @since 1.2.0\n\t /\n\t@property({ type: Object })\n\taccessibilityAttributes!: { expanded: \"true\" \| \"false\", hasPopup: \"Dialog\" \| \"Grid\" \| \"ListBox\" \| \"Menu\" \| \"Tree\", controls: string};\n\n\t/\n\t Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/\n\t Defines if a content has been added to the default slot\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\ticonOnly!: 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 has a slotted icon\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\thasIcon!: boolean;\n\n\t/\n\t Indicates if the element if focusable\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tnonInteractive!: boolean;\n\n\t/\n\t The current title of the button, either the tooltip property or the icons tooltip. The tooltip property with higher prio.\n\t * @private\n\t /\n\t@property({ noAttribute: true })\n\tbuttonTitle?: string;\n\n\t@property({ type: Object })\n\t_iconSettings!: object;\n\n\t/\n\t Defines the tabIndex of the component.\n\t * @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t/\n\t @since 1.0.0-rc.13\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\t_isTouch!: boolean;\n\n\t/\n\t Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t \n\t @type {Node[]}\n\t * @name sap.ui.webc.main.Button.prototype.default\n\t * @slot\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t_deactivate: () => void;\n\n\t_ontouchstart: PassiveEventListenerObject;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeButton) {\n\t\t\t\tactiveButton.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\n\t\tconst handleTouchStartEvent = (e: TouchEvent) => {\n\t\t\tmarkEvent(e, \"button\");\n\n\t\t\tif (this.nonInteractive) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.active = true;\n\t\t};\n\n\t\tthis._ontouchstart = {\n\t\t\thandleEvent: handleTouchStartEvent,\n\t\t\tpassive: true,\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tthis._isTouch = (isPhone() \|\| isTablet()) && !isCombi();\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (this.submits && !formSupport) {\n\t\t\tconsole.warn(`In order for the \"submits\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\n\t\tthis.iconOnly = this.isIconOnly;\n\t\tthis.hasIcon = !!this.icon;\n\n\t\tthis.buttonTitle = this.tooltip \|\| await getIconAccessibleName(this.icon);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\t\tmarkEvent(e, \"button\");\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport && this.submits) {\n\t\t\tformSupport.triggerFormSubmit(this);\n\t\t}\n\n\t\tif (isSafari()) {\n\t\t\tthis.getDomRef()?.focus();\n\t\t}\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tif (this.nonInteractive \|\| this._isTouch) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tthis.active = true;\n\t\tactiveButton = this; // eslint-disable-line\n\t}\n\n\t_ontouchend() {\n\t\tthis.active = false;\n\n\t\tif (activeButton) {\n\t\t\tactiveButton.active = false;\n\t\t}\n\t}\n\n\t_onmouseup(e: MouseEvent) {\n\t\tmarkEvent(e, \"button\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tmarkEvent(e, \"button\");\n\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.active = true;\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.active = false;\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\t\tthis.active = false;\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = false;\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\tget hasButtonType() {\n\t\treturn this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;\n\t}\n\n\tget iconRole() {\n\t\tif (!this.icon) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn \"presentation\";\n\t}\n\n\tget isIconOnly() {\n\t\treturn !willShowContent(this.text);\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Positive\": BUTTON_ARIA_TYPE_ACCEPT,\n\t\t\t\"Negative\": BUTTON_ARIA_TYPE_REJECT,\n\t\t\t\"Emphasized\": BUTTON_ARIA_TYPE_EMPHASIZED,\n\t\t};\n\t}\n\n\tget buttonTypeText() {\n\t\treturn Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);\n\t}\n\n\tget tabIndexValue() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (tabindex) {\n\t\t\treturn tabindex;\n\t\t}\n\n\t\treturn this.nonInteractive ? \"-1\" : this._tabIndex;\n\t}\n\n\tget showIconTooltip() {\n\t\treturn this.iconOnly && !this.tooltip;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tButton.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nButton.define();\n\nexport default Button;\n"]}

package/dist/Card.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type CardHeader from "./CardHeader.js";
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -7,14 +8,10 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
  * The <code>ui5-card</code> is a component that represents information in the form of a
  * tile with separate header and content areas.
  * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.
+ * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and feel.
  *
  * Note: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Card";</code>
@@ -64,17 +61,18 @@ declare class Card extends UI5Element {
      * Defines the header of the component.
      * <br><br>
      * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
-     * @type {HTMLElement[]}
+     * @type {sap.ui.webc.main.ICardHeader[]}
      * @since 1.0.0-rc.15
      * @slot header
      * @name sap.ui.webc.main.Card.prototype.header
      * @public
     */
-    header: Array<HTMLElement>;
+    header: Array<CardHeader>;
     static i18nBundle: I18nBundle;
     get classes(): {
         root: {
             "ui5-card-root": boolean;
+            "ui5-card--interactive": boolean;
             "ui5-card--nocontent": boolean;
         };
     };

package/dist/Card.js CHANGED Viewed

@@ -24,14 +24,10 @@ import cardCss from "./generated/themes/Card.css.js";
  * The <code>ui5-card</code> is a component that represents information in the form of a
  * tile with separate header and content areas.
  * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.
+ * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and feel.
  *
  * Note: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Card";</code>
@@ -51,6 +47,7 @@ let Card = Card_1 = class Card extends UI5Element {
         return {
             root: {
                 "ui5-card-root": true,
+                "ui5-card--interactive": this._hasHeader && this.header[0].interactive,
                 "ui5-card--nocontent": !this.content.length,
             },
         };
@@ -79,7 +76,7 @@ __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Card.prototype, "content", void 0);
 __decorate([
-    slot()
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
 ], Card.prototype, "header", void 0);
 Card = Card_1 = __decorate([
     customElement({