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

package/CHANGELOG.md

@@ -1,2 +1,311 @@
 # Change Log
 
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [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)
+
+
+### Bug Fixes
+
+* **ui5-ai-button:** reset button width after animations ([#9923](https://github.com/SAP/ui5-webcomponents/issues/9923)) ([2a5c7db](https://github.com/SAP/ui5-webcomponents/commit/2a5c7db734b08f629f41b586f4aa0f39b20de632))
+
+
+### Features
+
+* enhance `[@event](https://github.com/event)` decorator ([#9944](https://github.com/SAP/ui5-webcomponents/issues/9944)) ([fe1d816](https://github.com/SAP/ui5-webcomponents/commit/fe1d816f512400b839fd4ce1b9af1506d0cb4c9a))
+
+
+
+
+
+## [2.3.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0...v2.3.1-rc.0) (2024-10-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.3.0](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.3...v2.3.0) (2024-10-02)
+
+
+### Features
+
+* **framework:** introduce the `i18n` decorator and the `cldr` option ([#9897](https://github.com/SAP/ui5-webcomponents/issues/9897)) ([1f29d23](https://github.com/SAP/ui5-webcomponents/commit/1f29d231fe892a850871e7f73afca93c730ecffd))
+
+
+
+
+
+# [2.3.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.2...v2.3.0-rc.3) (2024-09-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.3.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.1...v2.3.0-rc.2) (2024-09-19)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.3.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.0...v2.3.0-rc.1) (2024-09-12)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.3.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0...v2.3.0-rc.0) (2024-09-05)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.2.0](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.3...v2.2.0) (2024-09-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.2.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.2...v2.2.0-rc.3) (2024-08-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.2.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.1...v2.2.0-rc.2) (2024-08-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.2.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.0...v2.2.0-rc.1) (2024-08-15)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.2.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.1.1...v2.2.0-rc.0) (2024-08-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.1.1](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0...v2.1.1) (2024-08-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.1.0](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0-rc.3...v2.1.0) (2024-08-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.1.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0-rc.2...v2.1.0-rc.3) (2024-08-01)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.1.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0-rc.1...v2.1.0-rc.2) (2024-07-25)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.1.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0-rc.0...v2.1.0-rc.1) (2024-07-18)
+
+
+### Features
+
+* **ui5-prompt-input:** implement suggestions ([#9390](https://github.com/SAP/ui5-webcomponents/issues/9390)) ([a261cfb](https://github.com/SAP/ui5-webcomponents/commit/a261cfbfa06328e1f496a8a2acd1e4b22e78243d))
+
+
+
+
+
+# [2.1.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.0.1...v2.1.0-rc.0) (2024-07-11)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.0.1](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0...v2.0.1) (2024-07-05)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.0.0](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.6...v2.0.0) (2024-07-03)
+
+
+### Features
+
+* add property initializers ([#8846](https://github.com/SAP/ui5-webcomponents/issues/8846)) ([eef0cc9](https://github.com/SAP/ui5-webcomponents/commit/eef0cc9b663fda6268b98e516ed46439435fa2b0))
+* **ui5-ai-button:** initial implementation ([b39548f](https://github.com/SAP/ui5-webcomponents/commit/b39548f7af9e0dd76543327d5bab5242d9ef15a0))
+
+
+### BREAKING CHANGES
+
+* @property decorator must be adapted according to new type parameter
+
+
+
+
+
+# [2.0.0-rc.6](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2024-06-17)
+
+
+### Features
+
+* **ui5-ai-prompt-input:** initial (experimental) implementation ([#9078](https://github.com/SAP/ui5-webcomponents/issues/9078)) ([9dcdfdb](https://github.com/SAP/ui5-webcomponents/commit/9dcdfdbcf78eda087099e12301ad91e624038a17))
+
+
+
+
+
+# [2.0.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.4...v2.0.0-rc.5) (2024-06-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.0.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.0.0-rc.3...v2.0.0-rc.4) (2024-05-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# Change Log

package/README.md

@@ -1,7 +1,4 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
-
-
-# UI5 Web Components - AI
+#  ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - AI
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
@@ -13,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,11 +1,117 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import MainButton from "@ui5/webcomponents/dist/Button.js";
+import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import 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.
+ *
+ * ### 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.
+ *
+ * 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.
+ *
+ * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-ai/dist/Button.js";`
+ *
  * @constructor
  * @extends UI5Element
+ * @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.
  */
 declare class Button extends UI5Element {
-    icon: string;
-    endIcon: string;
+    eventDetails: {
+        click: void;
+    };
+    /**
+     * Defines the component design.
+     * @default "Default"
+     * @public
+     */
+    design?: `${ButtonDesign}`;
+    /**
+     * Defines whether the component is disabled.
+     * A disabled component can't be pressed or
+     * focused, and it is not in the tab chain.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the current state of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    state?: string;
+    /**
+     * Keeps the current state object of the component.
+     * @private
+     */
+    _currentStateObject?: ButtonState;
+    /**
+     * Initiates button elements fade-out phase.
+     * @default false
+     * @private
+     */
+    fadeOut: boolean;
+    /**
+     * Initiates button fade middle phase.
+     * @default false
+     * @private
+     */
+    fadeMid: boolean;
+    /**
+     * Initiates button elements fade-in phase.
+     * @default false
+     * @private
+     */
+    fadeIn: boolean;
+    /**
+     * 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.
+     * @public
+     */
+    states: Array<ButtonState>;
+    onBeforeRendering(): void;
+    /**
+     * Starts the fade-out animation.
+     * @private
+     */
+    _fadeOut(): Promise<void>;
+    /**
+     * Starts the fade-in animation.
+     * @private
+     */
+    _fadeIn(): void;
+    /**
+     * Resets the fade phases when the animation is completed.
+     * @private
+     */
+    _resetFade(): void;
+    /**
+     * 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;
 }
 export default Button;

package/dist/Button.js

@@ -5,35 +5,227 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-// Deps
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import MainButton from "@ui5/webcomponents/dist/Button.js";
-// Template
-import template from "./generated/templates/ButtonTemplate.lit.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import ButtonState from "./ButtonState.js";
+import ButtonTemplate from "./ButtonTemplate.js";
 // Styles
-import styles from "./generated/themes/Button.css.js";
+import ButtonCss from "./generated/themes/Button.css.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.
+ *
+ * ### 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.
+ *
+ * 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.
+ *
+ * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-ai/dist/Button.js";`
+ *
  * @constructor
  * @extends UI5Element
+ * @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.
  */
 let Button = class Button extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the component design.
+         * @default "Default"
+         * @public
+         */
+        this.design = "Default";
+        /**
+         * Defines whether the component is disabled.
+         * A disabled component can't be pressed or
+         * focused, and it is not in the tab chain.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Initiates button elements fade-out phase.
+         * @default false
+         * @private
+         */
+        this.fadeOut = false;
+        /**
+         * Initiates button fade middle phase.
+         * @default false
+         * @private
+         */
+        this.fadeMid = false;
+        /**
+         * Initiates button elements fade-in phase.
+         * @default false
+         * @private
+         */
+        this.fadeIn = false;
+    }
+    onBeforeRendering() {
+        if (this.fadeOut || this.fadeIn) {
+            return;
+        }
+        if (!this._currentStateObject?.name) {
+            this._currentStateObject = this._effectiveStateObject;
+        }
+        const currentStateName = this._currentStateObject?.name || "";
+        if (currentStateName !== "" && currentStateName !== this._effectiveState) {
+            this._fadeOut();
+        }
+    }
+    /**
+     * Starts the fade-out animation.
+     * @private
+     */
+    async _fadeOut() {
+        const fadeOutDuration = 180;
+        const button = this._mainButton;
+        const newStateObject = this._effectiveStateObject;
+        if (!newStateObject) {
+            // eslint-disable-next-line no-console
+            console.warn(`State with name="${this.state}" doesn't exist!`);
+        }
+        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);
+        }
+    }
+    /**
+     * Starts the fade-in animation.
+     * @private
+     */
+    _fadeIn() {
+        const fadeInDuration = 60;
+        setTimeout(() => {
+            this.fadeIn = true;
+            this._resetFade();
+        }, fadeInDuration);
+    }
+    /**
+     * Resets the fade phases when the animation is completed.
+     * @private
+     */
+    _resetFade() {
+        const fadeResetDuration = 160;
+        setTimeout(() => {
+            this.fadeOut = false;
+            this.fadeMid = false;
+            this.fadeIn = false;
+        }, fadeResetDuration);
+        // reset the button's width after animations
+        const button = this._mainButton;
+        if (button) {
+            button.style.width = "";
+        }
+    }
+    /**
+     * Handles the click event.
+     * @private
+     */
+    _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;
+    }
 };
 __decorate([
     property()
-], Button.prototype, "icon", void 0);
+], Button.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "disabled", void 0);
 __decorate([
     property()
-], Button.prototype, "endIcon", void 0);
+], Button.prototype, "state", 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);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Button.prototype, "states", void 0);
 Button = __decorate([
     customElement({
         tag: "ui5-ai-button",
-        renderer: litRender,
-        template,
-        styles,
-        dependencies: [MainButton],
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: ButtonTemplate,
+        styles: ButtonCss,
+        dependencies: [MainButton, Icon, ButtonState],
+        shadowRootOptions: { delegatesFocus: true },
+    })
+    /**
+     * Fired when the component is activated either with a
+     * mouse/tap or by using the Enter or Space key.
+     * @public
+     */
+    ,
+    event("click", {
+        bubbles: true,
     })
 ], Button);
 Button.define();