@ui5/webcomponents-ai 0.0.0-9261ac932 → 0.0.0-acc6fea96

package/CHANGELOG.md

@@ -3,6 +3,166 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.5...v2.6.0) (2025-01-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.6.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.4...v2.6.0-rc.5) (2025-01-07)
+
+
+### Bug Fixes
+
+* remove dependencies for TSX components and fix features ([#10449](https://github.com/SAP/ui5-webcomponents/issues/10449)) ([a2b5f6f](https://github.com/SAP/ui5-webcomponents/commit/a2b5f6fb768499a8b757a9b7abad5f19033a33a7))
+
+
+
+
+
+# [2.6.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.3...v2.6.0-rc.4) (2025-01-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.6.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.2...v2.6.0-rc.3) (2024-12-26)
+
+
+### Features
+
+* **ui5-ai-button:** implement split button functionality ([#10242](https://github.com/SAP/ui5-webcomponents/issues/10242)) ([55c9e4d](https://github.com/SAP/ui5-webcomponents/commit/55c9e4d67800d82a0d357eda8859b78d69dc25ab))
+
+
+
+
+
+# [2.6.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.1...v2.6.0-rc.2) (2024-12-19)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
+
+
+### Features
+
+* **framework:** add JSX template support with TypeScript ([#10046](https://github.com/SAP/ui5-webcomponents/issues/10046)) ([f42e7c1](https://github.com/SAP/ui5-webcomponents/commit/f42e7c18c846f923df4fec6ae02f1b4c20c006fa))
+
+
+
+
+
+# [2.5.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.3...v2.5.0) (2024-12-05)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.5.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.2...v2.5.0-rc.3) (2024-12-05)
+
+
+### Features
+
+* **framework:** add strict event type checking ([#10235](https://github.com/SAP/ui5-webcomponents/issues/10235)) ([4ff8ab7](https://github.com/SAP/ui5-webcomponents/commit/4ff8ab7c34db5058b92511767be1b96c69a91cb5))
+
+
+
+
+
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.2...v2.4.0-rc.3) (2024-10-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
+
+
+### Bug Fixes
+
+* scoping issues and document how scoping is used correctly ([#10023](https://github.com/SAP/ui5-webcomponents/issues/10023)) ([ee808c3](https://github.com/SAP/ui5-webcomponents/commit/ee808c309f316fe145b05d292c92328396c655ab))
+* **tools:** revert tsconfig moduleResolution to node ([#10014](https://github.com/SAP/ui5-webcomponents/issues/10014)) ([0724b92](https://github.com/SAP/ui5-webcomponents/commit/0724b9289ad04f88972d4978ed37e76f13abca13))
+
+
+
+
+
 # [2.4.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.3.1-rc.0...v2.4.0-rc.0) (2024-10-10)
 
 

package/README.md

@@ -10,9 +10,10 @@ Provides web components implementing AI-related visual and interaction.
 
 ## Provided components
 
-| Web Component            | Tag name                    | Module import                                              |
-|--------------------------|-----------------------------|------------------------------------------------------------|
-
+| Web Component            | Tag name                       | Module import                                           |
+|--------------------------|--------------------------------|---------------------------------------------------------|
+| Button                   | `ui5-ai-button`                | `import "@ui5/webcomponents-ai/dist/Button.js";`        |
+| PromptInput              | `ui5-ai-prompt-input`          | `import "@ui5/webcomponents-ai/dist/PromptInput.js";`   |
 
 ## Provided assets
 

package/dist/Button.d.ts

@@ -1,24 +1,27 @@
 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";
 /**
  * @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
  *
@@ -31,6 +34,10 @@ import ButtonState from "./ButtonState.js";
  * @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.
  */
 declare class Button extends UI5Element {
+    eventDetails: {
+        "click": void;
+        "arrow-click": void;
+    };
     /**
      * Defines the component design.
      * @default "Default"
@@ -53,34 +60,43 @@ 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;
+    activeArrowButton: boolean;
     /**
-     * Initiates button fade middle phase.
-     * @default false
+     * 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;
+    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.
@@ -101,14 +117,11 @@ 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-click event when `ui5-ai-button` is in split mode.
+     * @private
+     */
+    _onArrowClick(e: CustomEvent): void;
 }
 export default Button;

package/dist/Button.js

@@ -8,13 +8,11 @@ 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.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import MainButton from "@ui5/webcomponents/dist/Button.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import ButtonState from "./ButtonState.js";
-import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ButtonTemplate from "./ButtonTemplate.js";
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
 /**
@@ -22,18 +20,21 @@ import ButtonCss from "./generated/themes/Button.css.js";
  *
  * ### 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
  *
@@ -63,32 +64,57 @@ 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
-         */
-        this.fadeOut = false;
-        /**
-         * Initiates button fade middle phase.
-         * @default false
-         * @private
+         * @public
+         * @since 2.6.0
          */
-        this.fadeMid = false;
+        this.activeArrowButton = false;
         /**
-         * 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?.splitMode;
+    }
+    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?.splitMode ? "" : 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.activeArrowButton;
         }
         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 +125,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;
         }
-        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);
+        const buttonWidth = button.offsetWidth;
+        const currentState = this._currentStateObject || {};
+        if ((!currentState.splitMode && newStateObject.splitMode) || (!currentState.endIcon && !!newStateObject.endIcon)) {
+            this.classList.add("ui5-ai-button-button-to-menu");
         }
+        if ((currentState.splitMode && !newStateObject.splitMode) || (!!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 +179,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 +195,17 @@ 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;
-    }
-    get _hasText() {
-        return !!this._stateText;
+    /**
+     * Handles the arrow-click event when `ui5-ai-button` is in split mode.
+     * @private
+     */
+    _onArrowClick(e) {
+        e.stopImmediatePropagation();
+        this.fireDecoratorEvent("arrow-click");
     }
 };
 __decorate([
@@ -193,29 +217,31 @@ __decorate([
 __decorate([
     property()
 ], Button.prototype, "state", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Button.prototype, "activeArrowButton", void 0);
 __decorate([
     property({ type: Object })
 ], Button.prototype, "_currentStateObject", void 0);
 __decorate([
     property({ type: Boolean })
-], Button.prototype, "fadeOut", void 0);
-__decorate([
-    property({ type: Boolean })
-], Button.prototype, "fadeMid", 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);
+__decorate([
+    query("[ui5-split-button]")
+], Button.prototype, "_splitButton", void 0);
+__decorate([
+    query(".ui5-ai-button-hidden[ui5-split-button]")
+], Button.prototype, "_hiddenSplitButton", void 0);
 Button = __decorate([
     customElement({
         tag: "ui5-ai-button",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: ButtonTemplate,
         styles: ButtonCss,
-        dependencies: [MainButton, Icon, ButtonState],
         shadowRootOptions: { delegatesFocus: true },
     })
     /**
@@ -227,6 +253,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-click", {
+        bubbles: true,
+    })
 ], Button);
 Button.define();
 export default Button;