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

package/CHANGELOG.md

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

package/dist/PromptInput.d.ts

@@ -1,25 +1,125 @@
 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 "@ui5/webcomponents-icons/dist/paper-plane.js";
+import type { InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
 /**
  * @class
- *
  * ### Overview
  *
- * The PromptInput is an AI component.
+ * The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.
+ *
+ * **Note:** The web component is in an experimental state
  *
  * ### ES6 Module Import
  *
- * `import "@ui5/webcomponents-ai/dist/PromptInput.js";`
+ * `import "@ui5/webcomponents-ai/dist/PromptInput.js
+ * @class
  * @constructor
- * @extends UI5Element
- * @since 2.0
  * @public
+ * @extends UI5Element
  */
 declare class PromptInput extends UI5Element {
     /**
-     * Defines the value of the PromptInput.
-     * @public
+     * Defines the value of the component.
+     *
      * @default ""
+     * @since 2.0.0
+     * @public
      */
     value: string;
+    /**
+     * Defines a short hint intended to aid the user with data entry when the
+     * component has no value.
+     * @default ""
+     * @since 2.0.0
+     * @public
+     */
+    placeholder: string;
+    /**
+     * Defines the label of the input field.
+     *
+     * @default ""
+     * @since 2.0.0
+     * @public
+     */
+    label: string;
+    /**
+     * Defines whether the clear icon of the input will be shown.
+     * @default false
+     * @public
+     * @since 2.0.0
+     */
+    showClearIcon: boolean;
+    /**
+     * 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
+     */
+    showExceededText: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     *
+     * **Note:** A disabled component is completely noninteractive.
+     * @default false
+     * @public
+     * @since 2.0.0
+     */
+    disabled: boolean;
+    /**
+     * 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
+     */
+    readonly: boolean;
+    /**
+     * Sets the maximum number of characters available in the input field.
+     *
+     * @default undefined
+     * @since 2.0.0
+     * @public
+     */
+    maxlength?: number;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @since 2.0.0
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Defines the value state message that will be displayed as pop up under the component.
+     * The value state message slot should contain only one root element.
+     *
+     * **Note:** If not specified, a default text (in the respective language) will be displayed.
+     *
+     * **Note:** The `valueStateMessage` would be displayed,
+     * when the component is in `Information`, `Critical` or `Negative` value state.
+     *
+     * @since 2.0.0
+     * @public
+     */
+    valueStateMessage: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    constructor();
+    _onkeydown(e: KeyboardEvent): void;
+    _onInnerInput(e: CustomEvent<InputEventDetail>): void;
+    _onInnerChange(): void;
+    _onButtonClick(): void;
+    get _exceededText(): string | undefined;
+    get _maxLenght(): number | undefined;
+    get _submitButtonDisabled(): boolean;
 }
 export default PromptInput;

package/dist/PromptInput.js

@@ -4,43 +4,155 @@ 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 PromptInput_1;
 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";
+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 Label from "@ui5/webcomponents/dist/Label.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";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { PROMPT_INPUT_CHARACTERS_LEFT, PROMPT_INPUT_CHARACTERS_EXCEEDED, } from "./generated/i18n/i18n-defaults.js";
+import PromptInputTemplate from "./generated/templates/PromptInputTemplate.lit.js";
+// Styles
+import PromptInputCss from "./generated/themes/PromptInput.css.js";
 /**
  * @class
- *
  * ### Overview
  *
- * The PromptInput is an AI component.
+ * The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.
+ *
+ * **Note:** The web component is in an experimental state
  *
  * ### ES6 Module Import
  *
- * `import "@ui5/webcomponents-ai/dist/PromptInput.js";`
+ * `import "@ui5/webcomponents-ai/dist/PromptInput.js
+ * @class
  * @constructor
- * @extends UI5Element
- * @since 2.0
  * @public
+ * @extends UI5Element
  */
-let PromptInput = class PromptInput extends UI5Element {
+let PromptInput = PromptInput_1 = class PromptInput extends UI5Element {
+    static async onDefine() {
+        PromptInput_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-ai");
+    }
+    constructor() {
+        super();
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            this.fireEvent("submit");
+        }
+    }
+    _onInnerInput(e) {
+        this.value = e.target.value;
+        this.fireEvent("input");
+    }
+    _onInnerChange() {
+        this.fireEvent("change");
+    }
+    _onButtonClick() {
+        this.fireEvent("submit");
+    }
+    get _exceededText() {
+        if (this.showExceededText) {
+            let leftCharactersCount;
+            const maxLength = this.maxlength;
+            if (maxLength !== undefined) {
+                leftCharactersCount = maxLength - this.value.length;
+                if (leftCharactersCount >= 0) {
+                    return PromptInput_1.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_LEFT, leftCharactersCount);
+                }
+                return PromptInput_1.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));
+            }
+        }
+    }
+    get _maxLenght() {
+        return this.maxlength || undefined;
+    }
+    get _submitButtonDisabled() {
+        return (this.value.length <= 0) || this.disabled || this.readonly;
+    }
 };
 __decorate([
     property()
 ], PromptInput.prototype, "value", void 0);
-PromptInput = __decorate([
+__decorate([
+    property()
+], PromptInput.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], PromptInput.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], PromptInput.prototype, "showClearIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], PromptInput.prototype, "showExceededText", void 0);
+__decorate([
+    property({ type: Boolean })
+], PromptInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], PromptInput.prototype, "readonly", void 0);
+__decorate([
+    property({ validator: Integer })
+], PromptInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], PromptInput.prototype, "valueState", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+    })
+], PromptInput.prototype, "valueStateMessage", void 0);
+PromptInput = PromptInput_1 = __decorate([
     customElement({
         tag: "ui5-ai-prompt-input",
         renderer: litRender,
+        styles: PromptInputCss,
+        template: PromptInputTemplate,
         dependencies: [
             Input,
             Label,
             Button,
         ],
     })
+    /**
+     * Fired when the input operation has finished by pressing Enter
+     * or AI button is clicked.
+     *
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("submit")
+    /**
+     * Fired when the value of the component changes at each keystroke,
+     * and when a suggestion item has been selected.
+     *
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("input")
+    /**
+     * Fired when the input operation has finished by pressing Enter
+     * or on focusout.
+     *
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("change")
 ], PromptInput);
 PromptInput.define();
 export default PromptInput;

package/dist/PromptInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptInput.js","sourceRoot":"","sources":["../src/PromptInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AAUH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;CAQnC,CAAA;AADA;IADC,QAAQ,EAAE;0CACI;AAPV,WAAW;IAThB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,SAAS;QACnB,YAAY,EAAE;YACb,KAAK;YACL,KAAK;YACL,MAAM;SACN;KACD,CAAC;GACI,WAAW,CAQhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport Label from \"@ui5/webcomponents/dist/Label.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The PromptInput is an AI component.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/PromptInput.js\";`\n * @constructor\n * @extends UI5Element\n * @since 2.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-ai-prompt-input\",\n\trenderer: litRender,\n\tdependencies: [\n\t\tInput,\n\t\tLabel,\n\t\tButton,\n\t],\n})\nclass PromptInput extends UI5Element {\n\t/**\n\t * Defines the value of the PromptInput.\n\t * @public\n\t * @default \"\"\n\t */\n\t@property()\n\tvalue!: string;\n}\n\nPromptInput.define();\n\nexport default PromptInput;\n"]}
+{"version":3,"file":"PromptInput.js","sourceRoot":"","sources":["../src/PromptInput.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport \"@ui5/webcomponents-icons/dist/paper-plane.js\";\nimport type { InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Label from \"@ui5/webcomponents/dist/Label.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tPROMPT_INPUT_CHARACTERS_LEFT,\n\tPROMPT_INPUT_CHARACTERS_EXCEEDED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport PromptInputTemplate from \"./generated/templates/PromptInputTemplate.lit.js\";\n\n// Styles\nimport PromptInputCss from \"./generated/themes/PromptInput.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n *\n * **Note:** The web component is in an experimental state\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/PromptInput.js\n * @class\n * @constructor\n * @public\n * @extends UI5Element\n */\n@customElement({\n\ttag: \"ui5-ai-prompt-input\",\n\trenderer: litRender,\n\tstyles: PromptInputCss,\n\ttemplate: PromptInputTemplate,\n\tdependencies: [\n\t\tInput,\n\t\tLabel,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or AI button is clicked.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"submit\")\n\n/**\n * Fired when the value of the component changes at each keystroke,\n * and when a suggestion item has been selected.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"input\")\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or on focusout.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"change\")\nclass PromptInput extends UI5Element {\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * @default \"\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default \"\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tplaceholder!: string;\n\n\t/**\n\t * Defines the label of the input field.\n\t *\n\t * @default \"\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tlabel!: string;\n\n\t/**\n\t * Defines whether the clear icon of the input will be shown.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon!: boolean;\n\n\t/**\n\t * Determines whether the characters exceeding the maximum allowed character count are visible\n\t * in the component.\n\t *\n\t * If set to `false`, the user is not allowed to enter more characters than what is set in the\n\t * `maxlength` property.\n\t * If set to `true` the characters exceeding the `maxlength` value are selected on\n\t * paste and the counter below the component displays their number.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowExceededText!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\treadonly!: boolean;\n\n\t/**\n\t * Sets the maximum number of characters available in the input field.\n\t *\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property({ validator: Integer })\n\tmaxlength?: number;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * Defines the value state message that will be displayed as pop up under the component.\n\t * The value state message slot should contain only one root element.\n\t *\n\t * **Note:** If not specified, a default text (in the respective language) will be displayed.\n\t *\n\t * **Note:** The `valueStateMessage` would be displayed,\n\t * when the component is in `Information`, `Critical` or `Negative` value state.\n\t *\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\tvalueStateMessage!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tPromptInput.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-ai\");\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireEvent(\"submit\");\n\t\t}\n\t}\n\n\t_onInnerInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis.value = (e.target as Input).value;\n\n\t\tthis.fireEvent(\"input\");\n\t}\n\n\t_onInnerChange() {\n\t\tthis.fireEvent(\"change\");\n\t}\n\n\t_onButtonClick() {\n\t\tthis.fireEvent(\"submit\");\n\t}\n\n\tget _exceededText() {\n\t\tif (this.showExceededText) {\n\t\t\tlet leftCharactersCount;\n\t\t\tconst maxLength = this.maxlength;\n\n\t\t\tif (maxLength !== undefined) {\n\t\t\t\tleftCharactersCount = maxLength - this.value.length;\n\n\t\t\t\tif (leftCharactersCount >= 0) {\n\t\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_LEFT, leftCharactersCount);\n\t\t\t\t}\n\n\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));\n\t\t\t}\n\t\t}\n\t}\n\n\tget _maxLenght() {\n\t\treturn this.maxlength || undefined;\n\t}\n\n\tget _submitButtonDisabled() {\n\t\treturn (this.value.length <= 0) || this.disabled || this.readonly;\n\t}\n}\n\nPromptInput.define();\n\nexport default PromptInput;\n"]}

package/dist/css/themes/PromptInput.css

@@ -0,0 +1 @@
+.ai-prompt-input-button{margin-left:.5rem;margin-top:3px}.ai-prompt-input-wrapper{display:flex;flex-direction:column;width:270px}.ai-prompt-input-form-wrapper{display:flex;flex:1}.ai-prompt-input-counter{font-size:.75rem;align-self:flex-end}#input{width:100%}.ai-prompt-inner-input-wrapper{display:flex;flex-direction:column;flex:1}

package/dist/custom-elements-internal.json

@@ -76,8 +76,19 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nThe PromptInput is an AI component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\";`",
+          "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js",
           "name": "PromptInput",
+          "slots": [
+            {
+              "name": "valueStateMessage",
+              "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+              "_ui5since": "2.0.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -85,21 +96,226 @@
               "type": {
                 "text": "string"
               },
-              "description": "Defines the value of the PromptInput.",
+              "description": "Defines the value of the component.",
+              "default": "\"\"",
               "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "String"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
               "default": "\"\"",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
               "_ui5validator": "String"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the label of the input field.",
+              "default": "\"\"",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "String"
+            },
+            {
+              "kind": "field",
+              "name": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the clear icon of the input will be shown.",
+              "default": "false",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "Boolean"
+            },
+            {
+              "kind": "field",
+              "name": "showExceededText",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+              "default": "false",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "Boolean"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "default": "false",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "Boolean"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "default": "false",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "Boolean"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the maximum number of characters available in the input field.",
+              "default": "undefined",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "Integer"
+            },
+            {
+              "kind": "field",
+              "name": "valueState",
+              "type": {
+                "text": "ValueState",
+                "references": [
+                  {
+                    "name": "ValueState",
+                    "package": "@ui5/webcomponents-base",
+                    "module": "dist/types/ValueState.js"
+                  }
+                ]
+              },
+              "description": "Defines the value state of the component.",
+              "default": "\"None\"",
+              "privacy": "public",
+              "_ui5since": "2.0.0",
+              "_ui5validator": "ValueState"
+            }
+          ],
+          "events": [
+            {
+              "name": "submit",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.",
+              "_ui5since": "2.0.0"
+            },
+            {
+              "name": "input",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.",
+              "_ui5since": "2.0.0"
+            },
+            {
+              "name": "change",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.",
+              "_ui5since": "2.0.0"
             }
           ],
           "attributes": [
             {
-              "description": "Defines the value of the PromptInput.",
+              "description": "Defines the value of the component.",
               "name": "value",
               "default": "\"\"",
               "fieldName": "value",
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "name": "placeholder",
+              "default": "\"\"",
+              "fieldName": "placeholder",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines the label of the input field.",
+              "name": "label",
+              "default": "\"\"",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines whether the clear icon of the input will be shown.",
+              "name": "show-clear-icon",
+              "default": "false",
+              "fieldName": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+              "name": "show-exceeded-text",
+              "default": "false",
+              "fieldName": "showExceededText",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "name": "readonly",
+              "default": "false",
+              "fieldName": "readonly",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Sets the maximum number of characters available in the input field.",
+              "name": "maxlength",
+              "default": "undefined",
+              "fieldName": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              }
+            },
+            {
+              "description": "Defines the value state of the component.",
+              "name": "value-state",
+              "default": "\"None\"",
+              "fieldName": "valueState",
+              "type": {
+                "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+              }
             }
           ],
           "superclass": {
@@ -109,7 +325,6 @@
           },
           "tagName": "ui5-ai-prompt-input",
           "customElement": true,
-          "_ui5since": "2.0",
           "_ui5privacy": "public"
         }
       ],

package/dist/custom-elements.json

@@ -73,8 +73,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nThe PromptInput is an AI component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\";`",
+          "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js",
           "name": "PromptInput",
+          "slots": [
+            {
+              "name": "valueStateMessage",
+              "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state."
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -82,20 +88,202 @@
               "type": {
                 "text": "string"
               },
-              "description": "Defines the value of the PromptInput.",
-              "privacy": "public",
-              "default": "\"\""
+              "description": "Defines the value of the component.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the label of the input field.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the clear icon of the input will be shown.",
+              "default": "false",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "showExceededText",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+              "default": "false",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "default": "false",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "default": "false",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the maximum number of characters available in the input field.",
+              "default": "undefined",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "valueState",
+              "type": {
+                "text": "ValueState",
+                "references": [
+                  {
+                    "name": "ValueState",
+                    "package": "@ui5/webcomponents-base",
+                    "module": "dist/types/ValueState.js"
+                  }
+                ]
+              },
+              "description": "Defines the value state of the component.",
+              "default": "\"None\"",
+              "privacy": "public"
+            }
+          ],
+          "events": [
+            {
+              "name": "submit",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked."
+            },
+            {
+              "name": "input",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the input operation has finished by pressing Enter\nor on focusout."
             }
           ],
           "attributes": [
             {
-              "description": "Defines the value of the PromptInput.",
+              "description": "Defines the value of the component.",
               "name": "value",
               "default": "\"\"",
               "fieldName": "value",
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "name": "placeholder",
+              "default": "\"\"",
+              "fieldName": "placeholder",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines the label of the input field.",
+              "name": "label",
+              "default": "\"\"",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines whether the clear icon of the input will be shown.",
+              "name": "show-clear-icon",
+              "default": "false",
+              "fieldName": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+              "name": "show-exceeded-text",
+              "default": "false",
+              "fieldName": "showExceededText",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "name": "readonly",
+              "default": "false",
+              "fieldName": "readonly",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Sets the maximum number of characters available in the input field.",
+              "name": "maxlength",
+              "default": "undefined",
+              "fieldName": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              }
+            },
+            {
+              "description": "Defines the value state of the component.",
+              "name": "value-state",
+              "default": "\"None\"",
+              "fieldName": "valueState",
+              "type": {
+                "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+              }
             }
           ],
           "superclass": {

package/dist/generated/i18n/i18n-defaults.d.ts

@@ -1 +1,4 @@
-export {};
+import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+declare const PROMPT_INPUT_CHARACTERS_LEFT: I18nText;
+declare const PROMPT_INPUT_CHARACTERS_EXCEEDED: I18nText;
+export { PROMPT_INPUT_CHARACTERS_LEFT, PROMPT_INPUT_CHARACTERS_EXCEEDED };

package/dist/generated/i18n/i18n-defaults.js

@@ -1,2 +1,5 @@
 import "@ui5/webcomponents-base/dist/i18nBundle.js";
+const PROMPT_INPUT_CHARACTERS_LEFT = { key: "PROMPT_INPUT_CHARACTERS_LEFT", defaultText: "{0} characters remaining" };
+const PROMPT_INPUT_CHARACTERS_EXCEEDED = { key: "PROMPT_INPUT_CHARACTERS_EXCEEDED", defaultText: "{0} characters over limit" };
+export { PROMPT_INPUT_CHARACTERS_LEFT, PROMPT_INPUT_CHARACTERS_EXCEEDED };
 //# sourceMappingURL=i18n-defaults.js.map

package/dist/generated/i18n/i18n-defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n-defaults.js","sourceRoot":"","sources":["../../../src/generated/i18n/i18n-defaults.ts"],"names":[],"mappings":"AAAA,OAAyB,4CAA4C,CAAC","sourcesContent":["import { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nexport {};"]}
+{"version":3,"file":"i18n-defaults.js","sourceRoot":"","sources":["../../../src/generated/i18n/i18n-defaults.ts"],"names":[],"mappings":"AAAA,OAAyB,4CAA4C,CAAC;AACtE,MAAM,4BAA4B,GAAa,EAAC,GAAG,EAAE,8BAA8B,EAAE,WAAW,EAAE,0BAA0B,EAAC,CAAC;AAAA,MAAM,gCAAgC,GAAa,EAAC,GAAG,EAAE,kCAAkC,EAAE,WAAW,EAAE,2BAA2B,EAAC,CAAC;AACrQ,OAAO,EAAC,4BAA4B,EAAC,gCAAgC,EAAC,CAAC","sourcesContent":["import { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nconst PROMPT_INPUT_CHARACTERS_LEFT: I18nText = {key: \"PROMPT_INPUT_CHARACTERS_LEFT\", defaultText: \"{0} characters remaining\"};const PROMPT_INPUT_CHARACTERS_EXCEEDED: I18nText = {key: \"PROMPT_INPUT_CHARACTERS_EXCEEDED\", defaultText: \"{0} characters over limit\"};\nexport {PROMPT_INPUT_CHARACTERS_LEFT,PROMPT_INPUT_CHARACTERS_EXCEEDED};"]}

package/dist/generated/templates/PromptInputTemplate.lit.d.ts

@@ -0,0 +1,4 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type PromptInput from "../../PromptInput.js";
+declare function block0(this: PromptInput, context: UI5Element, tags: string[], suffix: string | undefined): import("lit-html").TemplateResult;
+export default block0;

package/dist/generated/templates/PromptInputTemplate.lit.js

@@ -0,0 +1,8 @@
+/* eslint no-unused-vars: 0 */
+import { html, ifDefined, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+function block0(context, tags, suffix) { return suffix ? html `<div class="ai-prompt-input-wrapper">${this.label ? block1.call(this, context, tags, suffix) : undefined}<div class="ai-prompt-input-form-wrapper"><div class="ai-prompt-inner-input-wrapper"><${scopeTag("ui5-input", tags, suffix)} id="input" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.placeholder)}" value-state="${ifDefined(this.valueState)}" ?show-clear-icon=${this.showClearIcon} ?disabled="${this.disabled}" ?readonly="${this.readonly}" @keydown="${this._onkeydown}" @ui5-input="${ifDefined(this._onInnerInput)}" @ui5-change="${ifDefined(this._onInnerChange)}">${this.valueStateMessage.length ? block2.call(this, context, tags, suffix) : undefined}</${scopeTag("ui5-input", tags, suffix)}>${this.showExceededText ? block3.call(this, context, tags, suffix) : undefined}</div><${scopeTag("ui5-button", tags, suffix)} ?disabled=${this._submitButtonDisabled} class="ai-prompt-input-button" design="Emphasized" icon="paper-plane" @click="${this._onButtonClick}"></${scopeTag("ui5-button", tags, suffix)}></div></div>` : html `<div class="ai-prompt-input-wrapper">${this.label ? block1.call(this, context, tags, suffix) : undefined}<div class="ai-prompt-input-form-wrapper"><div class="ai-prompt-inner-input-wrapper"><ui5-input id="input" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.placeholder)}" value-state="${ifDefined(this.valueState)}" ?show-clear-icon=${this.showClearIcon} ?disabled="${this.disabled}" ?readonly="${this.readonly}" @keydown="${this._onkeydown}" @ui5-input="${ifDefined(this._onInnerInput)}" @ui5-change="${ifDefined(this._onInnerChange)}">${this.valueStateMessage.length ? block2.call(this, context, tags, suffix) : undefined}</ui5-input>${this.showExceededText ? block3.call(this, context, tags, suffix) : undefined}</div><ui5-button ?disabled=${this._submitButtonDisabled} class="ai-prompt-input-button" design="Emphasized" icon="paper-plane" @click="${this._onButtonClick}"></ui5-button></div></div>`; }
+function block1(context, tags, suffix) { return suffix ? html `<${scopeTag("ui5-label", tags, suffix)} for="input">${ifDefined(this.label)}</${scopeTag("ui5-label", tags, suffix)}>` : html `<ui5-label for="input">${ifDefined(this.label)}</ui5-label>`; }
+function block2(context, tags, suffix) { return html `<slot name="valueStateMessage" slot="valueStateMessage"></slot>`; }
+function block3(context, tags, suffix) { return suffix ? html `<${scopeTag("ui5-label", tags, suffix)} class="ai-prompt-input-counter">${ifDefined(this._exceededText)}</${scopeTag("ui5-label", tags, suffix)}>` : html `<ui5-label class="ai-prompt-input-counter">${ifDefined(this._exceededText)}</ui5-label>`; }
+export default block0;
+//# sourceMappingURL=PromptInputTemplate.lit.js.map

package/dist/generated/templates/PromptInputTemplate.lit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInputTemplate.lit.js","sourceRoot":"","sources":["../../../src/generated/templates/PromptInputTemplate.lit.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint no-unused-vars: 0 */\nimport { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\timport type PromptInput from \"../../PromptInput.js\";\n\timport type { ClassMapValue } from \"@ui5/webcomponents-base/dist/types.js\";\n\t\nfunction block0 (this: PromptInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class=\"ai-prompt-input-wrapper\">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class=\"ai-prompt-input-form-wrapper\"><div class=\"ai-prompt-inner-input-wrapper\"><${scopeTag(\"ui5-input\", tags, suffix)} id=\"input\" .value=\"${ifDefined(this.value)}\" placeholder=\"${ifDefined(this.placeholder)}\" value-state=\"${ifDefined(this.valueState)}\" ?show-clear-icon=${this.showClearIcon} ?disabled=\"${this.disabled}\" ?readonly=\"${this.readonly}\" @keydown=\"${this._onkeydown}\" @ui5-input=\"${ifDefined(this._onInnerInput)}\" @ui5-change=\"${ifDefined(this._onInnerChange)}\">${ this.valueStateMessage.length ? block2.call(this, context, tags, suffix) : undefined }</${scopeTag(\"ui5-input\", tags, suffix)}>${ this.showExceededText ? block3.call(this, context, tags, suffix) : undefined }</div><${scopeTag(\"ui5-button\", tags, suffix)} ?disabled=${this._submitButtonDisabled} class=\"ai-prompt-input-button\" design=\"Emphasized\" icon=\"paper-plane\" @click=\"${this._onButtonClick}\"></${scopeTag(\"ui5-button\", tags, suffix)}></div></div>` : html`<div class=\"ai-prompt-input-wrapper\">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class=\"ai-prompt-input-form-wrapper\"><div class=\"ai-prompt-inner-input-wrapper\"><ui5-input id=\"input\" .value=\"${ifDefined(this.value)}\" placeholder=\"${ifDefined(this.placeholder)}\" value-state=\"${ifDefined(this.valueState)}\" ?show-clear-icon=${this.showClearIcon} ?disabled=\"${this.disabled}\" ?readonly=\"${this.readonly}\" @keydown=\"${this._onkeydown}\" @ui5-input=\"${ifDefined(this._onInnerInput)}\" @ui5-change=\"${ifDefined(this._onInnerChange)}\">${ this.valueStateMessage.length ? block2.call(this, context, tags, suffix) : undefined }</ui5-input>${ this.showExceededText ? block3.call(this, context, tags, suffix) : undefined }</div><ui5-button ?disabled=${this._submitButtonDisabled} class=\"ai-prompt-input-button\" design=\"Emphasized\" icon=\"paper-plane\" @click=\"${this._onButtonClick}\"></ui5-button></div></div>`;}\nfunction block1 (this: PromptInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag(\"ui5-label\", tags, suffix)} for=\"input\">${ifDefined(this.label)}</${scopeTag(\"ui5-label\", tags, suffix)}>` : html`<ui5-label for=\"input\">${ifDefined(this.label)}</ui5-label>`;}\nfunction block2 (this: PromptInput, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name=\"valueStateMessage\" slot=\"valueStateMessage\"></slot>`;}\nfunction block3 (this: PromptInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag(\"ui5-label\", tags, suffix)} class=\"ai-prompt-input-counter\">${ifDefined(this._exceededText)}</${scopeTag(\"ui5-label\", tags, suffix)}>` : html`<ui5-label class=\"ai-prompt-input-counter\">${ifDefined(this._exceededText)}</ui5-label>`;}\n\n\nexport default block0;"]}

package/dist/generated/themes/PromptInput.css.d.ts

@@ -0,0 +1,3 @@
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+declare const styleData: StyleData;
+export default styleData;

package/dist/generated/themes/PromptInput.css.js

@@ -0,0 +1,9 @@
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
+registerThemePropertiesLoader("@ui5/webcomponents-ai", "sap_horizon", async () => defaultTheme);
+const styleData = { packageName: "@ui5/webcomponents-ai", fileName: "themes/PromptInput.css.ts", content: `.ai-prompt-input-button{margin-left:.5rem;margin-top:3px}.ai-prompt-input-wrapper{display:flex;flex-direction:column;width:270px}.ai-prompt-input-form-wrapper{display:flex;flex:1}.ai-prompt-input-counter{font-size:.75rem;align-self:flex-end}#input{width:100%}.ai-prompt-inner-input-wrapper{display:flex;flex-direction:column;flex:1}
+` };
+export default styleData;
+//# sourceMappingURL=PromptInput.css.js.map

package/dist/generated/themes/PromptInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.css.js","sourceRoot":"","sources":["../../../src/generated/themes/PromptInput.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAEhG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,uBAAuB,EAAC,QAAQ,EAAC,2BAA2B,EAAC,OAAO,EAAC;CAC9G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@ui5/webcomponents-ai\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@ui5/webcomponents-ai\",fileName:\"themes/PromptInput.css.ts\",content:`.ai-prompt-input-button{margin-left:.5rem;margin-top:3px}.ai-prompt-input-wrapper{display:flex;flex-direction:column;width:270px}.ai-prompt-input-form-wrapper{display:flex;flex:1}.ai-prompt-input-counter{font-size:.75rem;align-self:flex-end}#input{width:100%}.ai-prompt-inner-input-wrapper{display:flex;flex-direction:column;flex:1}\n`};\nexport default styleData;\n\t"]}

package/dist/vscode.html-custom-data.json

@@ -15,12 +15,58 @@
     },
     {
       "name": "ui5-ai-prompt-input",
-      "description": "### Overview\n\nThe PromptInput is an AI component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\";`\n\n\n---\n\n\n",
+      "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\n\n\n---\n\n\n\n\n### **Events:**\n - **submit** - Fired when the input operation has finished by pressing Enter\nor AI button is clicked.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **change** - Fired when the input operation has finished by pressing Enter\nor on focusout.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
       "attributes": [
         {
           "name": "value",
-          "description": "Defines the value of the PromptInput.",
+          "description": "Defines the value of the component.",
           "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Defines the label of the input field.",
+          "values": []
+        },
+        {
+          "name": "show-clear-icon",
+          "description": "Defines whether the clear icon of the input will be shown.",
+          "values": []
+        },
+        {
+          "name": "show-exceeded-text",
+          "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+          "values": []
+        },
+        {
+          "name": "maxlength",
+          "description": "Sets the maximum number of characters available in the input field.",
+          "values": []
+        },
+        {
+          "name": "value-state",
+          "description": "Defines the value state of the component.",
+          "values": [
+            { "name": "None" },
+            { "name": "Positive" },
+            { "name": "Critical" },
+            { "name": "Negative" },
+            { "name": "Information" }
+          ]
         }
       ],
       "references": []

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-ai",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -31,25 +31,142 @@
         },
         {
           "name": "ui5-ai-prompt-input",
-          "description": "### Overview\n\nThe PromptInput is an AI component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\";`\n---\n",
+          "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\n---\n\n\n### **Events:**\n - **submit** - Fired when the input operation has finished by pressing Enter\nor AI button is clicked.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **change** - Fired when the input operation has finished by pressing Enter\nor on focusout.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "Defines the value of the PromptInput.",
+              "description": "Defines the value of the component.",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the label of the input field.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "show-clear-icon",
+              "description": "Defines whether the clear icon of the input will be shown.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-exceeded-text",
+              "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "maxlength",
+              "description": "Sets the maximum number of characters available in the input field.",
+              "value": { "type": "number | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value-state",
+              "description": "Defines the value state of the component.",
+              "value": {
+                "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
+                "default": "\"None\""
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "valueStateMessage",
+              "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state."
+            }
+          ],
+          "events": [
+            {
+              "name": "submit",
+              "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked."
+            },
+            {
+              "name": "input",
+              "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected."
+            },
+            {
+              "name": "change",
+              "description": "Fired when the input operation has finished by pressing Enter\nor on focusout."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
                 "name": "value",
-                "description": "Defines the value of the PromptInput.",
+                "description": "Defines the value of the component.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "placeholder",
+                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the label of the input field.",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "show-clear-icon",
+                "description": "Defines whether the clear icon of the input will be shown.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-exceeded-text",
+                "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "readonly",
+                "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "maxlength",
+                "description": "Sets the maximum number of characters available in the input field.",
+                "value": { "type": "number | undefined" }
+              },
+              {
+                "name": "value-state",
+                "description": "Defines the value state of the component.",
+                "value": {
+                  "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+                }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "submit",
+                "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked."
+              },
+              {
+                "name": "input",
+                "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected."
+              },
+              {
+                "name": "change",
+                "description": "Fired when the input operation has finished by pressing Enter\nor on focusout."
+              }
+            ]
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -45,14 +45,14 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.0.0-rc.5",
-    "@ui5/webcomponents-base": "2.0.0-rc.5",
-    "@ui5/webcomponents-icons": "2.0.0-rc.5",
-    "@ui5/webcomponents-theming": "2.0.0-rc.5"
+    "@ui5/webcomponents": "2.0.0-rc.6",
+    "@ui5/webcomponents-base": "2.0.0-rc.6",
+    "@ui5/webcomponents-icons": "2.0.0-rc.6",
+    "@ui5/webcomponents-theming": "2.0.0-rc.6"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.0.0-rc.5",
+    "@ui5/webcomponents-tools": "2.0.0-rc.6",
     "chromedriver": "^125.0.0"
   },
-  "gitHead": "791653e253faae4847f026d022d0ddcd47a96666"
+  "gitHead": "19380fe3b367d021be5caf60e531ff50be91feef"
 }

package/src/PromptInput.hbs

@@ -0,0 +1,31 @@
+<div class="ai-prompt-input-wrapper">
+	{{#if label}}
+		<ui5-label for="input">{{label}}</ui5-label>
+	{{/if}}
+
+	<div class="ai-prompt-input-form-wrapper">
+		<div class="ai-prompt-inner-input-wrapper">
+			<ui5-input
+				id="input"
+				.value="{{value}}"
+				placeholder="{{placeholder}}"
+				value-state="{{valueState}}"
+				?show-clear-icon={{showClearIcon}}
+				?disabled="{{disabled}}"
+				?readonly="{{readonly}}"
+				@keydown="{{_onkeydown}}"
+				@ui5-input="{{_onInnerInput}}"
+				@ui5-change="{{_onInnerChange}}"
+			>
+				{{#if valueStateMessage.length}}
+					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+				{{/if}}
+			</ui5-input>
+
+			{{#if showExceededText}}
+				<ui5-label class="ai-prompt-input-counter">{{_exceededText}}</ui5-label>
+			{{/if}}
+		</div>
+		<ui5-button ?disabled={{_submitButtonDisabled}} class="ai-prompt-input-button" design="Emphasized" icon="paper-plane" @click="{{_onButtonClick}}"></ui5-button>
+	</div>
+</div>

package/src/i18n/messagebundle.properties

@@ -1,2 +1,8 @@
 #This is the resource bundle for the UI5 Web Components
 #__ldi.translation.uuid=96bea51a-d5e3-46f0-b1d1-514d97be02ec
+
+#XTXT: Text for characters left
+PROMPT_INPUT_CHARACTERS_LEFT={0} characters remaining
+
+#XTXT: Text for characters over
+PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit

package/src/themes/PromptInput.css

@@ -0,0 +1,30 @@
+.ai-prompt-input-button {
+	margin-left: .5rem;
+	margin-top: 3px;
+}
+
+.ai-prompt-input-wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 270px;
+}
+
+.ai-prompt-input-form-wrapper {
+	display: flex;
+	flex: 1;
+}
+
+.ai-prompt-input-counter {
+	font-size: .75rem;
+	align-self: flex-end;
+}
+
+#input {
+	width: 100%;
+}
+
+.ai-prompt-inner-input-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}