@ui5/webcomponents-ai 0.0.0-f42e7c18c → 0.0.0-fd426fe8a

package/dist/Button.d.ts

@@ -1,24 +1,36 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import MainButton from "@ui5/webcomponents/dist/Button.js";
+import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
 import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
-import ButtonState from "./ButtonState.js";
+import type ButtonState from "./ButtonState.js";
+import "./ButtonState.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
+type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title">;
+type AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded" | "title">;
+type AIButtonAccessibilityAttributes = {
+    root?: AIButtonRootAccessibilityAttributes;
+    arrowButton?: AIButtonArrowButtonAccessibilityAttributes;
+};
 /**
  * @class
  *
  * ### Overview
  *
- * The `ui5-ai-button` component represents a button used in AI-related scenarios.
- * It enables users to trigger actions by clicking or tapping the `ui5-ai-button`, or by pressing
- * certain keyboard keys, such as Enter.
+ * The `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`
+ * or by pressing keyboard keys like [Enter] or [Space].
  *
  * ### Usage
  *
- * For the `ui5-ai-button` UI, you can define one or more states of the button by placing `ai-button-state` components in its default slot.
- * Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.
+ * For the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.
+ * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.
+ * You can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.
  *
- * You can choose from a set of predefined designs (the same as for regular `ui5-button` component) that allow different styling to correspond to the triggered action.
+ * You can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.
  *
- * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
+ * The `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is
+ * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].
+ * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].
+ * To display additional actions, you can attach a menu to the arrow button.
  *
  * ### ES6 Module Import
  *
@@ -32,7 +44,8 @@ import ButtonState from "./ButtonState.js";
  */
 declare class Button extends UI5Element {
     eventDetails: {
-        click: void;
+        "click": void;
+        "arrow-button-click": void;
     };
     /**
      * Defines the component design.
@@ -56,34 +69,67 @@ declare class Button extends UI5Element {
      */
     state?: string;
     /**
-     * Keeps the current state object of the component.
-     * @private
-     */
-    _currentStateObject?: ButtonState;
-    /**
-     * Initiates button elements fade-out phase.
+     * Defines the active state of the arrow button in split mode.
+     * Set to true when the button is in split mode and a menu with additional options
+     * is opened by the arrow button. Set back to false when the menu is closed.
      * @default false
-     * @private
+     * @public
+     * @since 2.6.0
      */
-    fadeOut: boolean;
+    arrowButtonPressed: boolean;
     /**
-     * Initiates button fade middle phase.
-     * @default false
+     * Defines the additional accessibility attributes that will be applied to the component.
+     *
+     * This property allows for fine-tuned control of ARIA attributes for screen reader support.
+     * It accepts an object with the following optional fields:
+     *
+     * - **root**: Accessibility attributes that will be applied to the root element.
+     *   - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).
+     *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+     *   - **roleDescription**: Defines a human-readable description for the button's role.
+     *     Accepts any string value.
+     *
+     * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
+     *   - **hasPopup**: Indicates the type of popup triggered by the arrow button.
+     *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+     *   - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.
+     *     Accepts boolean values: `true` or `false`.
+     *
+     * @public
+     * @since 2.6.0
+     * @default {}
+    */
+    accessibilityAttributes: AIButtonAccessibilityAttributes;
+    /**
+     * Keeps the current state object of the component.
      * @private
      */
-    fadeMid: boolean;
+    _currentStateObject?: ButtonState;
     /**
-     * Initiates button elements fade-in phase.
+     * Determines if the button is in icon-only mode.
+     * This property is animation related only.
      * @default false
      * @private
      */
-    fadeIn: boolean;
+    iconOnly?: boolean | undefined;
     /**
      * Defines the available states of the component.
-     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use `ui5-ai-button-state` components in order to preserve the intended design.
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that
+     * you only use `ui5-ai-button-state` components in order to preserve the intended design.
      * @public
      */
     states: Array<ButtonState>;
+    _splitButton?: SplitButton;
+    _hiddenSplitButton?: SplitButton;
+    static i18nBundle: I18nBundle;
+    get _hideArrowButton(): boolean;
+    get _effectiveState(): string;
+    get _effectiveStateObject(): ButtonState | undefined;
+    get _stateIconOnly(): boolean;
+    get _stateText(): string | undefined;
+    get _stateIcon(): string | undefined;
+    get _stateEndIcon(): string | undefined;
+    get _hasText(): boolean;
     onBeforeRendering(): void;
     /**
      * Starts the fade-out animation.
@@ -104,14 +150,13 @@ declare class Button extends UI5Element {
      * Handles the click event.
      * @private
      */
-    _onclick(e: MouseEvent): void;
-    get _mainButton(): MainButton;
-    get _effectiveState(): string;
-    get _effectiveStateObject(): ButtonState | undefined;
-    get _stateIconOnly(): boolean;
-    get _stateText(): string | undefined;
-    get _stateIcon(): string | undefined;
-    get _stateEndIcon(): string | undefined;
-    get _hasText(): boolean;
+    _onClick(e: CustomEvent): void;
+    /**
+     * Handles the arrow-button-click event when `ui5-ai-button` is in split mode.
+     * @private
+     */
+    _onArrowClick(e: CustomEvent): void;
+    get _computedAccessibilityAttributes(): AIButtonAccessibilityAttributes;
 }
 export default Button;
+export type { AIButtonAccessibilityAttributes, };

package/dist/Button.js

@@ -4,36 +4,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var Button_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import MainButton from "@ui5/webcomponents/dist/Button.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import ButtonState from "./ButtonState.js";
+import { BUTTON_TOOLTIP_TEXT } from "./generated/i18n/i18n-defaults.js";
+import "./ButtonState.js";
 import ButtonTemplate from "./ButtonTemplate.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
+import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
 /**
  * @class
  *
  * ### Overview
  *
- * The `ui5-ai-button` component represents a button used in AI-related scenarios.
- * It enables users to trigger actions by clicking or tapping the `ui5-ai-button`, or by pressing
- * certain keyboard keys, such as Enter.
+ * The `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`
+ * or by pressing keyboard keys like [Enter] or [Space].
  *
  * ### Usage
  *
- * For the `ui5-ai-button` UI, you can define one or more states of the button by placing `ai-button-state` components in its default slot.
- * Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.
+ * For the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.
+ * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.
+ * You can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.
  *
- * You can choose from a set of predefined designs (the same as for regular `ui5-button` component) that allow different styling to correspond to the triggered action.
+ * You can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.
  *
- * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
+ * The `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is
+ * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].
+ * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].
+ * To display additional actions, you can attach a menu to the arrow button.
  *
  * ### ES6 Module Import
  *
@@ -45,7 +51,7 @@ import ButtonCss from "./generated/themes/Button.css.js";
  * @public
  * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
  */
-let Button = class Button extends UI5Element {
+let Button = Button_1 = class Button extends UI5Element {
     constructor() {
         super(...arguments);
         /**
@@ -63,32 +69,80 @@ let Button = class Button extends UI5Element {
          */
         this.disabled = false;
         /**
-         * Initiates button elements fade-out phase.
+         * Defines the active state of the arrow button in split mode.
+         * Set to true when the button is in split mode and a menu with additional options
+         * is opened by the arrow button. Set back to false when the menu is closed.
          * @default false
-         * @private
+         * @public
+         * @since 2.6.0
          */
-        this.fadeOut = false;
+        this.arrowButtonPressed = false;
         /**
-         * Initiates button fade middle phase.
-         * @default false
-         * @private
-         */
-        this.fadeMid = false;
+         * Defines the additional accessibility attributes that will be applied to the component.
+         *
+         * This property allows for fine-tuned control of ARIA attributes for screen reader support.
+         * It accepts an object with the following optional fields:
+         *
+         * - **root**: Accessibility attributes that will be applied to the root element.
+         *   - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).
+         *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+         *   - **roleDescription**: Defines a human-readable description for the button's role.
+         *     Accepts any string value.
+         *
+         * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
+         *   - **hasPopup**: Indicates the type of popup triggered by the arrow button.
+         *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+         *   - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.
+         *     Accepts boolean values: `true` or `false`.
+         *
+         * @public
+         * @since 2.6.0
+         * @default {}
+        */
+        this.accessibilityAttributes = {};
         /**
-         * Initiates button elements fade-in phase.
+         * Determines if the button is in icon-only mode.
+         * This property is animation related only.
          * @default false
          * @private
          */
-        this.fadeIn = false;
+        this.iconOnly = false;
+    }
+    get _hideArrowButton() {
+        return !this._effectiveStateObject?.showArrowButton;
+    }
+    get _effectiveState() {
+        return this.state || (this.states.length && this.states[0].name) || "";
+    }
+    get _effectiveStateObject() {
+        return this.states.find(state => state.name === this._effectiveState);
+    }
+    get _stateIconOnly() {
+        return !this._stateText && !!this._stateIcon;
+    }
+    get _stateText() {
+        return this._currentStateObject?.text;
+    }
+    get _stateIcon() {
+        return this._currentStateObject?.icon;
+    }
+    get _stateEndIcon() {
+        const endIcon = this._effectiveStateObject?.showArrowButton ? "" : this._effectiveStateObject?.endIcon;
+        return endIcon;
+    }
+    get _hasText() {
+        return !!this._stateText;
     }
     onBeforeRendering() {
-        if (this.fadeOut || this.fadeIn) {
-            return;
+        const splitButton = this._splitButton;
+        if (splitButton) {
+            splitButton.activeArrowButton = this.arrowButtonPressed;
         }
         if (!this._currentStateObject?.name) {
             this._currentStateObject = this._effectiveStateObject;
         }
         const currentStateName = this._currentStateObject?.name || "";
+        this.iconOnly = this._stateIconOnly;
         if (currentStateName !== "" && currentStateName !== this._effectiveState) {
             this._fadeOut();
         }
@@ -99,38 +153,50 @@ let Button = class Button extends UI5Element {
      */
     async _fadeOut() {
         const fadeOutDuration = 180;
-        const button = this._mainButton;
+        const button = this._splitButton;
+        const hiddenButton = this._hiddenSplitButton;
         const newStateObject = this._effectiveStateObject;
         if (!newStateObject) {
             // eslint-disable-next-line no-console
             console.warn(`State with name="${this.state}" doesn't exist!`);
+            return;
+        }
+        if (!button || !hiddenButton) {
+            return;
+        }
+        const buttonWidth = button.offsetWidth;
+        const currentState = this._currentStateObject || {};
+        if ((!currentState.showArrowButton && newStateObject.showArrowButton) || (!currentState.endIcon && !!newStateObject.endIcon)) {
+            this.classList.add("ui5-ai-button-button-to-menu");
         }
-        else if (button) {
-            const buttonWidth = button.offsetWidth;
-            const hiddenButton = this.shadowRoot?.querySelector(".ui5-ai-button-hidden");
-            button.style.width = `${buttonWidth}px`;
-            hiddenButton.icon = newStateObject.icon;
-            hiddenButton.endIcon = newStateObject.endIcon;
-            hiddenButton.textContent = newStateObject.text || null;
-            await renderFinished();
-            const hiddenButtonWidth = hiddenButton.offsetWidth;
-            this.fadeOut = true;
-            button.style.width = `${hiddenButtonWidth}px`;
-            setTimeout(() => {
-                this.fadeMid = true;
-                this._currentStateObject = newStateObject;
-                this._fadeIn();
-            }, fadeOutDuration);
+        if ((currentState.showArrowButton && !newStateObject.showArrowButton) || (!!currentState.endIcon && !newStateObject.endIcon)) {
+            this.classList.add("ui5-ai-button-menu-to-button");
         }
+        this.style.width = `${buttonWidth}px`;
+        hiddenButton.icon = newStateObject.icon;
+        hiddenButton._endIcon = newStateObject.endIcon;
+        hiddenButton.textContent = newStateObject.text || null;
+        hiddenButton._hideArrowButton = this._hideArrowButton;
+        await renderFinished();
+        const hiddenButtonWidth = hiddenButton.offsetWidth;
+        this.style.width = `${hiddenButtonWidth}px`;
+        this.classList.add("ui5-ai-button-fade-out");
+        setTimeout(() => {
+            this.classList.add("ui5-ai-button-fade-mid");
+            button._hideArrowButton = this._hideArrowButton;
+            this._fadeIn();
+        }, fadeOutDuration);
     }
     /**
      * Starts the fade-in animation.
      * @private
      */
     _fadeIn() {
-        const fadeInDuration = 60;
+        const fadeInDuration = 160;
         setTimeout(() => {
-            this.fadeIn = true;
+            const newStateObject = this._effectiveStateObject;
+            this._currentStateObject = newStateObject;
+            this.classList.add("ui5-ai-button-fade-in");
             this._resetFade();
         }, fadeInDuration);
     }
@@ -141,12 +207,14 @@ let Button = class Button extends UI5Element {
     _resetFade() {
         const fadeResetDuration = 160;
         setTimeout(() => {
-            this.fadeOut = false;
-            this.fadeMid = false;
-            this.fadeIn = false;
+            this.classList.remove("ui5-ai-button-fade-out");
+            this.classList.remove("ui5-ai-button-fade-mid");
+            this.classList.remove("ui5-ai-button-fade-in");
+            this.classList.remove("ui5-ai-button-button-to-menu");
+            this.classList.remove("ui5-ai-button-menu-to-button");
         }, fadeResetDuration);
         // reset the button's width after animations
-        const button = this._mainButton;
+        const button = this._splitButton;
         if (button) {
             button.style.width = "";
         }
@@ -155,33 +223,34 @@ let Button = class Button extends UI5Element {
      * Handles the click event.
      * @private
      */
-    _onclick(e) {
+    _onClick(e) {
         e.stopImmediatePropagation();
         this.fireDecoratorEvent("click");
     }
-    get _mainButton() {
-        return this.shadowRoot?.querySelector("[ui5-button]");
-    }
-    get _effectiveState() {
-        return this.state || (this.states.length && this.states[0].name) || "";
-    }
-    get _effectiveStateObject() {
-        return this.states.find(state => state.name === this._effectiveState);
-    }
-    get _stateIconOnly() {
-        return !this._stateText && !!this._stateIcon;
-    }
-    get _stateText() {
-        return this._currentStateObject?.text;
-    }
-    get _stateIcon() {
-        return this._currentStateObject?.icon;
-    }
-    get _stateEndIcon() {
-        return this._currentStateObject?.endIcon;
+    /**
+     * Handles the arrow-button-click event when `ui5-ai-button` is in split mode.
+     * @private
+     */
+    _onArrowClick(e) {
+        e.stopImmediatePropagation();
+        this.fireDecoratorEvent("arrow-button-click");
     }
-    get _hasText() {
-        return !!this._stateText;
+    get _computedAccessibilityAttributes() {
+        const labelRefTexts = getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || "";
+        const mainTitle = this._hasText ? Button_1.i18nBundle.getText(BUTTON_TOOLTIP_TEXT, this._stateText) : "";
+        const title = `${mainTitle} ${labelRefTexts}`.trim();
+        return {
+            root: {
+                hasPopup: this.accessibilityAttributes?.root?.hasPopup || "false",
+                roleDescription: this.accessibilityAttributes?.root?.roleDescription,
+                title: this.accessibilityAttributes?.root?.title || title,
+            },
+            arrowButton: {
+                hasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,
+                expanded: this.accessibilityAttributes?.arrowButton?.expanded,
+                title: this.accessibilityAttributes?.arrowButton?.title,
+            },
+        };
     }
 };
 __decorate([
@@ -194,28 +263,36 @@ __decorate([
     property()
 ], Button.prototype, "state", void 0);
 __decorate([
-    property({ type: Object })
-], Button.prototype, "_currentStateObject", void 0);
+    property({ type: Boolean, noAttribute: true })
+], Button.prototype, "arrowButtonPressed", void 0);
 __decorate([
-    property({ type: Boolean })
-], Button.prototype, "fadeOut", void 0);
+    property({ type: Object })
+], Button.prototype, "accessibilityAttributes", void 0);
 __decorate([
-    property({ type: Boolean })
-], Button.prototype, "fadeMid", void 0);
+    property({ type: Object })
+], Button.prototype, "_currentStateObject", void 0);
 __decorate([
     property({ type: Boolean })
-], Button.prototype, "fadeIn", void 0);
+], Button.prototype, "iconOnly", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Button.prototype, "states", void 0);
-Button = __decorate([
+__decorate([
+    query("[ui5-split-button]")
+], Button.prototype, "_splitButton", void 0);
+__decorate([
+    query(".ui5-ai-button-hidden[ui5-split-button]")
+], Button.prototype, "_hiddenSplitButton", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Button, "i18nBundle", void 0);
+Button = Button_1 = __decorate([
     customElement({
         tag: "ui5-ai-button",
         languageAware: true,
         renderer: jsxRenderer,
         template: ButtonTemplate,
         styles: ButtonCss,
-        dependencies: [MainButton, Icon, ButtonState],
         shadowRootOptions: { delegatesFocus: true },
     })
     /**
@@ -227,6 +304,16 @@ Button = __decorate([
     event("click", {
         bubbles: true,
     })
+    /**
+     * Fired when the component is in split mode and after the arrow button
+     * is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],
+     * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.
+     * @public
+     */
+    ,
+    event("arrow-button-click", {
+        bubbles: true,
+    })
 ], Button);
 Button.define();
 export default Button;

package/dist/Button.js.map

@@ -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 { renderFinished } from \"@ui5/webcomponents-base/dist/Render.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-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport MainButton from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport ButtonState from \"./ButtonState.js\";\n\nimport ButtonTemplate from \"./ButtonTemplate.js\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-button` component represents a button used in AI-related scenarios.\n * It enables users to trigger actions by clicking or tapping the `ui5-ai-button`, or by pressing\n * certain keyboard keys, such as Enter.\n *\n * ### Usage\n *\n * For the `ui5-ai-button` UI, you can define one or more states of the button by placing `ai-button-state` components in its default slot.\n * Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.\n *\n * You can choose from a set of predefined designs (the same as for regular `ui5-button` component) that allow different styling to correspond to the triggered action.\n *\n * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Button.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.\n */\n\n@customElement({\n\ttag: \"ui5-ai-button\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ButtonTemplate,\n\tstyles: ButtonCss,\n\tdependencies: [MainButton, Icon, ButtonState],\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Button extends UI5Element {\n\teventDetails!: {\n\t\tclick: void,\n\t}\n\t/**\n\t * Defines the component design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign?: `${ButtonDesign}` = \"Default\"\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 * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the current state of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tstate?: string;\n\n\t/**\n\t * Keeps the current state object of the component.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_currentStateObject?: ButtonState;\n\n\t/**\n\t * Initiates button elements fade-out phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeOut = false;\n\n\t/**\n\t * Initiates button fade middle phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeMid = false;\n\n\t/**\n\t * Initiates button elements fade-in phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeIn = false;\n\n\t/**\n\t * Defines the available states of the component.\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use `ui5-ai-button-state` components in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tstates!: Array<ButtonState>;\n\n\tonBeforeRendering(): void {\n\t\tif (this.fadeOut || this.fadeIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._currentStateObject?.name) {\n\t\t\tthis._currentStateObject = this._effectiveStateObject;\n\t\t}\n\n\t\tconst currentStateName = this._currentStateObject?.name || \"\";\n\n\t\tif (currentStateName !== \"\" && currentStateName !== this._effectiveState) {\n\t\t\tthis._fadeOut();\n\t\t}\n\t}\n\n\t/**\n\t * Starts the fade-out animation.\n\t * @private\n\t */\n\tasync _fadeOut(): Promise<void> {\n\t\tconst fadeOutDuration = 180;\n\n\t\tconst button = this._mainButton;\n\t\tconst newStateObject = this._effectiveStateObject;\n\n\t\tif (!newStateObject) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`State with name=\"${this.state}\" doesn't exist!`);\n\t\t} else if (button) {\n\t\t\tconst buttonWidth = button.offsetWidth;\n\t\t\tconst hiddenButton = this.shadowRoot?.querySelector(\".ui5-ai-button-hidden\") as MainButton;\n\t\t\tbutton.style.width = `${buttonWidth}px`;\n\t\t\thiddenButton.icon = newStateObject.icon;\n\t\t\thiddenButton.endIcon = newStateObject.endIcon;\n\t\t\thiddenButton.textContent = newStateObject.text || null;\n\n\t\t\tawait renderFinished();\n\t\t\tconst hiddenButtonWidth = hiddenButton.offsetWidth;\n\t\t\tthis.fadeOut = true;\n\t\t\tbutton.style.width = `${hiddenButtonWidth}px`;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.fadeMid = true;\n\t\t\t\tthis._currentStateObject = newStateObject;\n\t\t\t\tthis._fadeIn();\n\t\t\t}, fadeOutDuration);\n\t\t}\n\t}\n\n\t/**\n\t * Starts the fade-in animation.\n\t * @private\n\t */\n\t_fadeIn(): void {\n\t\tconst fadeInDuration = 60;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.fadeIn = true;\n\t\t\tthis._resetFade();\n\t\t}, fadeInDuration);\n\t}\n\n\t/**\n\t * Resets the fade phases when the animation is completed.\n\t * @private\n\t */\n\t_resetFade(): void {\n\t\tconst fadeResetDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.fadeOut = false;\n\t\t\tthis.fadeMid = false;\n\t\t\tthis.fadeIn = false;\n\t\t}, fadeResetDuration);\n\n\t\t// reset the button's width after animations\n\t\tconst button = this._mainButton;\n\t\tif (button) {\n\t\t\tbutton.style.width = \"\";\n\t\t}\n\t}\n\n\t/**\n\t * Handles the click event.\n\t * @private\n\t */\n\t_onclick(e: MouseEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\tget _mainButton() {\n\t\treturn this.shadowRoot?.querySelector(\"[ui5-button]\") as MainButton;\n\t}\n\n\tget _effectiveState() {\n\t\treturn this.state || (this.states.length && this.states[0].name) || \"\";\n\t}\n\n\tget _effectiveStateObject() {\n\t\treturn this.states.find(state => state.name === this._effectiveState);\n\t}\n\n\tget _stateIconOnly() {\n\t\treturn !this._stateText && !!this._stateIcon;\n\t}\n\n\tget _stateText() {\n\t\treturn this._currentStateObject?.text;\n\t}\n\n\tget _stateIcon() {\n\t\treturn this._currentStateObject?.icon;\n\t}\n\n\tget _stateEndIcon() {\n\t\treturn this._currentStateObject?.endIcon;\n\t}\n\n\tget _hasText() {\n\t\treturn !!this._stateText;\n\t}\n}\n\nButton.define();\nexport default Button;\n"]}
+{"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 { renderFinished } from \"@ui5/webcomponents-base/dist/Render.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-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type SplitButton from \"@ui5/webcomponents/dist/SplitButton.js\";\nimport type ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ButtonState from \"./ButtonState.js\";\nimport { BUTTON_TOOLTIP_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport \"./ButtonState.js\";\nimport ButtonTemplate from \"./ButtonTemplate.js\";\nimport {\n\tgetEffectiveAriaLabelText,\n\tgetAssociatedLabelForTexts,\n\tgetAllAccessibleNameRefTexts,\n} from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\ntype AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" | \"roleDescription\" | \"title\">;\ntype AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" | \"expanded\" | \"title\">;\ntype AIButtonAccessibilityAttributes = { root?: AIButtonRootAccessibilityAttributes, arrowButton?: AIButtonArrowButtonAccessibilityAttributes}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\n * or by pressing keyboard keys like [Enter] or [Space].\n *\n * ### Usage\n *\n * For the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\n * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\n * You can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n *\n * You can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n *\n * The `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\n * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\n * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\n * To display additional actions, you can attach a menu to the arrow button.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Button.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.\n */\n\n@customElement({\n\ttag: \"ui5-ai-button\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ButtonTemplate,\n\tstyles: ButtonCss,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the component is in split mode and after the arrow button\n * is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.\n * @public\n */\n@event(\"arrow-button-click\", {\n\tbubbles: true,\n})\n\nclass Button extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": void;\n\t\t\"arrow-button-click\": void;\n\t}\n\t/**\n\t * Defines the component design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign?: `${ButtonDesign}` = \"Default\"\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 * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the current state of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tstate?: string;\n\n\t/**\n\t * Defines the active state of the arrow button in split mode.\n\t * Set to true when the button is in split mode and a menu with additional options\n\t * is opened by the arrow button. Set back to false when the menu is closed.\n\t * @default false\n\t * @public\n\t * @since 2.6.0\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tarrowButtonPressed = false;\n\n\t/**\n \t * Defines the additional accessibility attributes that will be applied to the component.\n\t *\n\t * This property allows for fine-tuned control of ARIA attributes for screen reader support.\n\t * It accepts an object with the following optional fields:\n\t *\n\t * - **root**: Accessibility attributes that will be applied to the root element.\n\t *   - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n\t *     Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n\t *   - **roleDescription**: Defines a human-readable description for the button's role.\n\t *     Accepts any string value.\n\t *\n\t * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n\t *   - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n\t *     Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n\t *   - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n\t *     Accepts boolean values: `true` or `false`.\n\t *\n\t * @public\n\t * @since 2.6.0\n\t * @default {}\n \t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: AIButtonAccessibilityAttributes = {};\n\n\t/**\n\t * Keeps the current state object of the component.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_currentStateObject?: ButtonState;\n\n\t/**\n\t * Determines if the button is in icon-only mode.\n\t * This property is animation related only.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ticonOnly? = false;\n\n\t/**\n\t * Defines the available states of the component.\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that\n\t * you only use `ui5-ai-button-state` components in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tstates!: Array<ButtonState>;\n\n\t@query(\"[ui5-split-button]\")\n\t_splitButton?: SplitButton;\n\n\t@query(\".ui5-ai-button-hidden[ui5-split-button]\")\n\t_hiddenSplitButton?: SplitButton;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget _hideArrowButton() {\n\t\treturn !this._effectiveStateObject?.showArrowButton;\n\t}\n\n\tget _effectiveState() {\n\t\treturn this.state || (this.states.length && this.states[0].name) || \"\";\n\t}\n\n\tget _effectiveStateObject() {\n\t\treturn this.states.find(state => state.name === this._effectiveState);\n\t}\n\n\tget _stateIconOnly() {\n\t\treturn !this._stateText && !!this._stateIcon;\n\t}\n\n\tget _stateText() {\n\t\treturn this._currentStateObject?.text;\n\t}\n\n\tget _stateIcon() {\n\t\treturn this._currentStateObject?.icon;\n\t}\n\n\tget _stateEndIcon() {\n\t\tconst endIcon = this._effectiveStateObject?.showArrowButton ? \"\" : this._effectiveStateObject?.endIcon;\n\t\treturn endIcon;\n\t}\n\n\tget _hasText() {\n\t\treturn !!this._stateText;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tconst splitButton = this._splitButton;\n\n\t\tif (splitButton) {\n\t\t\tsplitButton.activeArrowButton = this.arrowButtonPressed;\n\t\t}\n\n\t\tif (!this._currentStateObject?.name) {\n\t\t\tthis._currentStateObject = this._effectiveStateObject;\n\t\t}\n\n\t\tconst currentStateName = this._currentStateObject?.name || \"\";\n\n\t\tthis.iconOnly = this._stateIconOnly;\n\t\tif (currentStateName !== \"\" && currentStateName !== this._effectiveState) {\n\t\t\tthis._fadeOut();\n\t\t}\n\t}\n\n\t/**\n\t * Starts the fade-out animation.\n\t * @private\n\t */\n\tasync _fadeOut(): Promise<void> {\n\t\tconst fadeOutDuration = 180;\n\t\tconst button = this._splitButton;\n\t\tconst hiddenButton = this._hiddenSplitButton;\n\t\tconst newStateObject = this._effectiveStateObject;\n\n\t\tif (!newStateObject) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`State with name=\"${this.state}\" doesn't exist!`);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!button || !hiddenButton) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst buttonWidth = button.offsetWidth;\n\t\tconst currentState: Partial<ButtonState> = this._currentStateObject || {};\n\n\t\tif ((!currentState.showArrowButton && newStateObject.showArrowButton) || (!currentState.endIcon && !!newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-button-to-menu\");\n\t\t}\n\t\tif ((currentState.showArrowButton && !newStateObject.showArrowButton) || (!!currentState.endIcon && !newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-menu-to-button\");\n\t\t}\n\n\t\tthis.style.width = `${buttonWidth}px`;\n\t\thiddenButton.icon = newStateObject.icon;\n\t\thiddenButton._endIcon = newStateObject.endIcon;\n\t\thiddenButton.textContent = newStateObject.text || null;\n\t\thiddenButton._hideArrowButton = this._hideArrowButton;\n\n\t\tawait renderFinished();\n\t\tconst hiddenButtonWidth = hiddenButton.offsetWidth;\n\t\tthis.style.width = `${hiddenButtonWidth}px`;\n\t\tthis.classList.add(\"ui5-ai-button-fade-out\");\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-mid\");\n\t\t\tbutton._hideArrowButton = this._hideArrowButton;\n\t\t\tthis._fadeIn();\n\t\t}, fadeOutDuration);\n\t}\n\n\t/**\n\t * Starts the fade-in animation.\n\t * @private\n\t */\n\t_fadeIn(): void {\n\t\tconst fadeInDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tconst newStateObject = this._effectiveStateObject;\n\t\t\tthis._currentStateObject = newStateObject;\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-in\");\n\t\t\tthis._resetFade();\n\t\t}, fadeInDuration);\n\t}\n\n\t/**\n\t * Resets the fade phases when the animation is completed.\n\t * @private\n\t */\n\t_resetFade(): void {\n\t\tconst fadeResetDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-out\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-mid\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-in\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-button-to-menu\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-menu-to-button\");\n\t\t}, fadeResetDuration);\n\n\t\t// reset the button's width after animations\n\t\tconst button = this._splitButton;\n\n\t\tif (button) {\n\t\t\tbutton.style.width = \"\";\n\t\t}\n\t}\n\n\t/**\n\t * Handles the click event.\n\t * @private\n\t */\n\t_onClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t/**\n\t * Handles the arrow-button-click event when `ui5-ai-button` is in split mode.\n\t * @private\n\t */\n\t_onArrowClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"arrow-button-click\");\n\t}\n\n\tget _computedAccessibilityAttributes(): AIButtonAccessibilityAttributes {\n\t\tconst labelRefTexts = getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || \"\";\n\n\t\tconst mainTitle = this._hasText ? Button.i18nBundle.getText(BUTTON_TOOLTIP_TEXT, this._stateText as string) : \"\";\n\t\tconst title = `${mainTitle} ${labelRefTexts}`.trim();\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\thasPopup: this.accessibilityAttributes?.root?.hasPopup || \"false\",\n\t\t\t\troleDescription: this.accessibilityAttributes?.root?.roleDescription,\n\t\t\t\ttitle: this.accessibilityAttributes?.root?.title || title,\n\t\t\t},\n\t\t\tarrowButton: {\n\t\t\t\thasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,\n\t\t\t\texpanded: this.accessibilityAttributes?.arrowButton?.expanded,\n\t\t\t\ttitle: this.accessibilityAttributes?.arrowButton?.title,\n\t\t\t},\n\t\t};\n\t}\n}\n\nButton.define();\nexport default Button;\nexport type {\n\tAIButtonAccessibilityAttributes,\n};\n"]}

package/dist/ButtonState.d.ts

@@ -8,8 +8,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  *
  * ### Usage
  *
- * `ui5-si-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `states` slot
- * of `ui5-ai-button` and should be used as standalone component.
+ * `ui5-ai-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `default` slot
+ * of `ui5-ai-button` and should not be used as standalone component.
  *
  * ### ES6 Module Import
  *
@@ -19,7 +19,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @abstract
  * @since 2.0.0
  * @public
- * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
+ * @experimental The Button and ButtonState web components are available since 2.0 under an experimental flag and their API and behaviour are subject to change.
  */
 declare class ButtonState extends UI5Element {
     /**
@@ -56,5 +56,12 @@ declare class ButtonState extends UI5Element {
      * @public
      */
     endIcon?: string;
+    /**
+     * Defines if the component is in split button mode.
+     * @default false
+     * @since 2.6.0
+     * @public
+     */
+    showArrowButton: boolean;
 }
 export default ButtonState;