@ui5/webcomponents-ai 2.0.0-rc.6 → 2.0.1

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

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)
 

package/dist/Button.d.ts

@@ -1,4 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import ButtonState from "./ButtonState.js";
 /**
  * @class
  *
@@ -11,12 +13,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * ### 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 key that identifies it and can have text, icon, end icon, next state and hasPopup type defined (in any combination) depending on the state purpose.
+ * 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 that offer different styling to correspond to the triggered action.
+ * 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 set the `ui5-ai-button` as enabled or disabled. An enabled `ui5-ai-button` can be pressed by clicking or tapping it. On press `ui5-ai-button` changes its state to the next one (if defined).
- * the mouse cursor. A disabled `ui5-ai-button` appears inactive and cannot be pressed.
+ * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
  *
  * ### ES6 Module Import
  *
@@ -26,8 +27,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @extends UI5Element
  * @since 2.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 {
+    /**
+     * Defines the component design.
+     * @default "Default"
+     * @public
+     */
+    design?: `${ButtonDesign}`;
     /**
      * Defines whether the component is disabled.
      * A disabled component can't be pressed or
@@ -36,7 +44,69 @@ declare class Button extends UI5Element {
      * @public
      */
     disabled: boolean;
-    icon: string;
-    endIcon: string;
+    /**
+     * 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 _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,15 +5,18 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-// Deps
 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 "./generated/templates/ButtonTemplate.lit.js";
 // Styles
-import styles from "./generated/themes/Button.css.js";
+import ButtonCss from "./generated/themes/Button.css.js";
 /**
  * @class
  *
@@ -26,12 +29,11 @@ import styles from "./generated/themes/Button.css.js";
  * ### 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 key that identifies it and can have text, icon, end icon, next state and hasPopup type defined (in any combination) depending on the state purpose.
+ * 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 that offer different styling to correspond to the triggered action.
+ * 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 set the `ui5-ai-button` as enabled or disabled. An enabled `ui5-ai-button` can be pressed by clicking or tapping it. On press `ui5-ai-button` changes its state to the next one (if defined).
- * the mouse cursor. A disabled `ui5-ai-button` appears inactive and cannot be pressed.
+ * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
  *
  * ### ES6 Module Import
  *
@@ -41,26 +43,180 @@ import styles from "./generated/themes/Button.css.js";
  * @extends UI5Element
  * @since 2.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.shadowRoot?.querySelector("[ui5-button]");
+        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);
+    }
+    /**
+     * Handles the click event.
+     * @private
+     */
+    _onclick(e) {
+        e.stopImmediatePropagation();
+        this.fireEvent("click");
+    }
+    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, "design", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "disabled", void 0);
 __decorate([
     property()
-], Button.prototype, "icon", void 0);
+], Button.prototype, "state", void 0);
 __decorate([
-    property()
-], Button.prototype, "endIcon", void 0);
+    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",
+        languageAware: true,
         renderer: litRender,
-        template,
-        styles,
-        dependencies: [MainButton],
+        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")
 ], 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":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO;AACP,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D,WAAW;AACX,OAAO,QAAQ,MAAM,6CAA6C,CAAC;AAEnE,SAAS;AACT,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAQH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;CAgB9B,CAAA;AAPA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,EAAE;oCACG;AAGd;IADC,QAAQ,EAAE;uCACM;AAfZ,MAAM;IAPX,aAAa,CAAC;QACd,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,QAAQ;QACR,MAAM;QACN,YAAY,EAAE,CAAC,UAAU,CAAC;KAC1B,CAAC;GACI,MAAM,CAgBX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Deps\nimport MainButton from \"@ui5/webcomponents/dist/Button.js\";\n\n// Template\nimport template from \"./generated/templates/ButtonTemplate.lit.js\";\n\n// Styles\nimport styles 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 key that identifies it and can have text, icon, end icon, next state and hasPopup type defined (in any combination) depending on the state purpose.\n *\n * You can choose from a set of predefined designs that offer different styling to correspond to the triggered action.\n *\n * You can set the `ui5-ai-button` as enabled or disabled. An enabled `ui5-ai-button` can be pressed by clicking or tapping it. On press `ui5-ai-button` changes its state to the next one (if defined).\n * the mouse cursor. A disabled `ui5-ai-button` appears inactive and cannot be pressed.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Button.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-ai-button\",\n\trenderer: litRender,\n\ttemplate,\n\tstyles,\n\tdependencies: [MainButton],\n})\nclass Button extends UI5Element {\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!: boolean;\n\n\t@property()\n\ticon!: string;\n\n\t@property()\n\tendIcon!: string;\n}\n\nButton.define();\n\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.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.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 \"./generated/templates/ButtonTemplate.lit.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\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: litRender,\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\")\nclass Button extends UI5Element {\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.shadowRoot?.querySelector(\"[ui5-button]\") as 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\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.fireEvent(\"click\");\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"]}

package/dist/ButtonState.d.ts

@@ -0,0 +1,60 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.
+ *
+ * ### 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.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/AiButtonState.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 2.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 ButtonState extends UI5Element {
+    /**
+     * Defines the name of the button state.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Defines the text of the button in this state.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the icon to be displayed as graphical element within the component before the text.
+     * The SAP-icons font provides numerous options.
+     *
+     * **Example:**
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the icon to be displayed as graphical element within the component after the text.
+     * The SAP-icons font provides numerous options.
+     *
+     * **Example:**
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @public
+     */
+    endIcon?: string;
+}
+export default ButtonState;

package/dist/ButtonState.js

@@ -0,0 +1,51 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.
+ *
+ * ### 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.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/AiButtonState.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 2.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 ButtonState = class ButtonState extends UI5Element {
+};
+__decorate([
+    property()
+], ButtonState.prototype, "name", void 0);
+__decorate([
+    property()
+], ButtonState.prototype, "text", void 0);
+__decorate([
+    property()
+], ButtonState.prototype, "icon", void 0);
+__decorate([
+    property()
+], ButtonState.prototype, "endIcon", void 0);
+ButtonState = __decorate([
+    customElement("ui5-ai-button-state")
+], ButtonState);
+ButtonState.define();
+export default ButtonState;
+//# sourceMappingURL=ButtonState.js.map

package/dist/ButtonState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonState.js","sourceRoot":"","sources":["../src/ButtonState.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;CA0CnC,CAAA;AAnCA;IADC,QAAQ,EAAE;yCACG;AAQd;IADC,QAAQ,EAAE;yCACG;AAad;IADC,QAAQ,EAAE;yCACG;AAad;IADC,QAAQ,EAAE;4CACM;AAzCZ,WAAW;IADhB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,WAAW,CA0ChB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AACrB,eAAe,WAAW,CAAC","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\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.\n *\n * ### Usage\n *\n * `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\n * of `ui5-ai-button` and should be used as standalone component.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/AiButtonState.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @since 2.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@customElement(\"ui5-ai-button-state\")\nclass ButtonState extends UI5Element {\n\t/**\n\t * Defines the name of the button state.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text of the button in this state.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component before the text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component after the text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tendIcon?: string;\n}\n\nButtonState.define();\nexport default ButtonState;\n"]}

package/dist/PromptInput.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/paper-plane.js";
 import type { InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
 /**
@@ -18,6 +18,7 @@ import type { InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
  * @constructor
  * @public
  * @extends UI5Element
+ * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
  */
 declare class PromptInput extends UI5Element {
     /**
@@ -31,19 +32,19 @@ declare class PromptInput extends UI5Element {
     /**
      * Defines a short hint intended to aid the user with data entry when the
      * component has no value.
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Defines the label of the input field.
      *
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    label: string;
+    label?: string;
     /**
      * Defines whether the clear icon of the input will be shown.
      * @default false

package/dist/PromptInput.js

@@ -12,8 +12,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/paper-plane.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
@@ -38,6 +36,7 @@ import PromptInputCss from "./generated/themes/PromptInput.css.js";
  * @constructor
  * @public
  * @extends UI5Element
+ * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
  */
 let PromptInput = PromptInput_1 = class PromptInput extends UI5Element {
     static async onDefine() {
@@ -45,6 +44,60 @@ let PromptInput = PromptInput_1 = class PromptInput extends UI5Element {
     }
     constructor() {
         super();
+        /**
+         * Defines the value of the component.
+         *
+         * @default ""
+         * @since 2.0.0
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines whether the clear icon of the input will be shown.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.showClearIcon = false;
+        /**
+         * Determines whether the characters exceeding the maximum allowed character count are visible
+         * in the component.
+         *
+         * If set to `false`, the user is not allowed to enter more characters than what is set in the
+         * `maxlength` property.
+         * If set to `true` the characters exceeding the `maxlength` value are selected on
+         * paste and the counter below the component displays their number.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.showExceededText = false;
+        /**
+         * Defines whether the component is in disabled state.
+         *
+         * **Note:** A disabled component is completely noninteractive.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.disabled = false;
+        /**
+         * Defines whether the component is read-only.
+         *
+         * **Note:** A read-only component is not editable,
+         * but still provides visual feedback upon user interaction.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.readonly = false;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @since 2.0.0
+         * @public
+         */
+        this.valueState = "None";
     }
     _onkeydown(e) {
         if (isEnter(e)) {
@@ -103,10 +156,10 @@ __decorate([
     property({ type: Boolean })
 ], PromptInput.prototype, "readonly", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], PromptInput.prototype, "maxlength", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], PromptInput.prototype, "valueState", void 0);
 __decorate([
     slot({