@ui5/webcomponents-ai 0.0.0-8ae0ba6fc → 0.0.0-95afb1087

package/dist/Input.js

@@ -0,0 +1,288 @@
+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;
+};
+var Input_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isEscape, isF4Shift, } from "@ui5/webcomponents-base/dist/Keys.js";
+import BaseInput from "@ui5/webcomponents/dist/Input.js";
+// styles
+import AIInputCss from "./generated/themes/Input.css.js";
+import InputCss from "@ui5/webcomponents/dist/generated/themes/Input.css.js";
+import ResponsivePopoverCommonCss from "@ui5/webcomponents/dist/generated/themes/ResponsivePopoverCommon.css.js";
+import ValueStateMessageCss from "@ui5/webcomponents/dist/generated/themes/ValueStateMessage.css.js";
+// templates
+import InputTemplate from "./InputTemplate.js";
+import { INPUT_VERSIONING_NEXT_BUTTON_TOOLTIP, INPUT_VERSIONING_PREVIOUS_BUTTON_TOOLTIP, INPUT_WRITING_ASSISTANT_BUTTON_TOOLTIP, WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-ai-input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.
+ *
+ * ### Structure
+ *
+ * The `ui5-ai-input` consists of the following main parts:
+ *
+ * - **Input Field** – Inherits all standard Input behaviors.
+ * - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.
+ *
+ * The component automatically determines which elements to render based on its internal state:
+ * - The AI Button is only shown when there are available `actions`.
+ * - The version navigation appears only when `totalVersions > 1`.
+ *
+ * ### Keyboard Support
+ *
+ * - **Shift + F4** — Opens the AI menu.
+ * - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-ai/dist/Input.js";`
+ *
+ * @constructor
+ * @extends BaseInput
+ * @since 2.16.0
+ * @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.
+ * @public
+ */
+let Input = Input_1 = class Input extends BaseInput {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates the index of the currently displayed version.
+         *
+         * @default 0
+         * @public
+         */
+        this.currentVersion = 0;
+        /**
+         * Indicates the total number of result versions available.
+         *
+         * When not set or set to 0, the versioning will be hidden.
+         *
+         * @default 0
+         * @public
+         */
+        this.totalVersions = 0;
+        /**
+         * Defines whether the AI Writing Assistant is currently loading.
+         *
+         * When `true`, indicates that an AI action is in progress.
+         *
+         * @default false
+         * @public
+         */
+        this.loading = false;
+        /**
+         * Indicates if the menu is open.
+         * @default 0
+         * @private
+         */
+        this._isMenuOpen = false;
+        this._previousCurrentStep = 0;
+        this._previousTotalSteps = 0;
+        this.isFocused = false;
+        /**
+         * Handles the escape event for the AI generate Button.
+         * @private
+         */
+        this._handleAIButtonKeydown = (e) => {
+            if (isEscape(e) && this.loading) {
+                this.fireDecoratorEvent("stop-generation");
+            }
+        };
+    }
+    _onfocusin(e) {
+        super._onfocusin(e);
+        this.isFocused = true;
+    }
+    _onfocusout(e) {
+        super._onfocusout(e);
+        this.isFocused = false;
+    }
+    /**
+     * Manages the focus when the navigation buttons become disabled/enabled.
+     * Automatically moves the focus to the available button when the user reaches the boundaries.
+     * @private
+     */
+    _manageVersionButtonsFocus() {
+        const previousButton = this.shadowRoot?.getElementById("arrow-left");
+        const nextButton = this.shadowRoot?.getElementById("arrow-right");
+        const isPreviousDisabled = this.currentVersion <= 1;
+        const isNextDisabled = this.currentVersion >= this.totalVersions;
+        if (isPreviousDisabled && previousButton) {
+            setTimeout(() => {
+                nextButton.focus();
+            }, 0);
+        }
+        else if (isNextDisabled && nextButton) {
+            setTimeout(() => {
+                previousButton.focus();
+            }, 0);
+        }
+    }
+    /**
+     * Handles the click event for the AI generate Button.
+     * Fires the appropriate event based on the AI Button state.
+     * @private
+     */
+    _handleAIButtonClick(e) {
+        const target = e.target;
+        if (target?.icon === "stop") {
+            this.fireDecoratorEvent("stop-generation");
+        }
+        else {
+            const opener = this.shadowRoot?.querySelector(".ui5-input-ai-button");
+            this.fireDecoratorEvent("button-click");
+            this.menu.opener = opener;
+            this.menu.open = true;
+            this.menu.horizontalAlign = "End";
+        }
+    }
+    /**
+     * Handles the version change event from the versioning component.
+     *
+     * @param {CustomEvent} e - The version change event
+     */
+    _handleVersionChange(e) {
+        this.fireDecoratorEvent("version-change", {
+            backwards: e.detail.backwards,
+        });
+        this._manageVersionButtonsFocus();
+    }
+    /**
+     * Handles the click event for the "Previous Version" button.
+     * Updates the current version index and syncs content.
+     * @private
+     */
+    _handlePreviousButtonClick() {
+        this._handleVersionChange(new CustomEvent("version-change", { detail: { backwards: true } }));
+    }
+    /**
+     * Handles the click event for the "Next Version" button.
+     * Updates the current version index and syncs content.
+     * @private
+     */
+    _handleNextButtonClick() {
+        this._handleVersionChange(new CustomEvent("version-change", { detail: { backwards: false } }));
+    }
+    _onMenuIconClick(e) {
+        this.fireDecoratorEvent("item-click", e.detail);
+    }
+    /**
+     * Handles keydown events for keyboard shortcuts.
+     * @private
+     */
+    _onkeydown(e) {
+        super._onkeydown(e);
+        const menuButton = this.shadowRoot?.getElementById("ai-menu-btn");
+        if (isF4Shift(e)) {
+            menuButton?.focus();
+            this.menu.opener = menuButton;
+            this.menu.open = true;
+            this.menu.horizontalAlign = "End";
+        }
+        const goPreviousStep = e.key === "Z" && e.shiftKey && e.ctrlKey;
+        const goNextStep = e.key === "Y" && e.shiftKey && e.ctrlKey;
+        if (goPreviousStep) {
+            e.preventDefault();
+            this._handlePreviousButtonClick();
+        }
+        else if (goNextStep) {
+            e.preventDefault();
+            this._handleNextButtonClick();
+        }
+    }
+    /**
+     * Handles visibility of the Writing Assistant Button.
+     * If there are no items, the Writing Assistant Button would not be rendered.
+     */
+    get hasActions() {
+        return !!this?.menu?.getSlottedNodes("items").length;
+    }
+    get ariaLabel() {
+        return this.accessibleName || !this.loading ? Input_1.i18nBundle.getText(INPUT_WRITING_ASSISTANT_BUTTON_TOOLTIP) : Input_1.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);
+    }
+    get stopGeneratingTooltip() {
+        return Input_1.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);
+    }
+    get nextButtonAccessibleName() {
+        return Input_1.i18nBundle.getText(INPUT_VERSIONING_NEXT_BUTTON_TOOLTIP);
+    }
+    get previousButtonAccessibleName() {
+        return Input_1.i18nBundle.getText(INPUT_VERSIONING_PREVIOUS_BUTTON_TOOLTIP);
+    }
+    get menu() {
+        return this.shadowRoot?.querySelector("[ui5-menu]");
+    }
+};
+__decorate([
+    property({ type: Number })
+], Input.prototype, "currentVersion", void 0);
+__decorate([
+    property({ type: Number })
+], Input.prototype, "totalVersions", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "_isMenuOpen", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+    })
+], Input.prototype, "actions", void 0);
+Input = Input_1 = __decorate([
+    customElement({
+        tag: "ui5-ai-input",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: InputTemplate,
+        styles: [
+            AIInputCss,
+            InputCss,
+            ResponsivePopoverCommonCss,
+            ValueStateMessageCss,
+        ],
+    })
+    /**
+     * Fired when the user selects the AI button.
+     * @public
+     */
+    ,
+    event("button-click", {
+        cancelable: true,
+    })
+    /** Fired when an item from the AI actions menu is clicked.
+     * @public
+     */
+    ,
+    event("item-click")
+    /**
+     * Fired when the user selects the "Stop" button to stop ongoing AI text generation.
+     * @public
+     */
+    ,
+    event("stop-generation")
+    /**
+     * Fired when the user selects the version navigation buttons.
+     *
+     * @param {boolean} backwards - Indicates if navigation is backwards (true) or forwards (false, default)
+     * @public
+     */
+    ,
+    event("version-change")
+], Input);
+Input.define();
+export default Input;
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../src/Input.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisEscape,\n\tisF4Shift,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport BaseInput from \"@ui5/webcomponents/dist/Input.js\";\nimport type Menu from \"@ui5/webcomponents/dist/Menu.js\";\nimport type { MenuItemClickEventDetail } from \"@ui5/webcomponents/dist/Menu.js\";\nimport type Button from \"./Button.js\";\n\n// styles\nimport AIInputCss from \"./generated/themes/Input.css.js\";\nimport InputCss from \"@ui5/webcomponents/dist/generated/themes/Input.css.js\";\nimport ResponsivePopoverCommonCss from \"@ui5/webcomponents/dist/generated/themes/ResponsivePopoverCommon.css.js\";\nimport ValueStateMessageCss from \"@ui5/webcomponents/dist/generated/themes/ValueStateMessage.css.js\";\n\n// templates\nimport InputTemplate from \"./InputTemplate.js\";\nimport {\n\tINPUT_VERSIONING_NEXT_BUTTON_TOOLTIP,\n\tINPUT_VERSIONING_PREVIOUS_BUTTON_TOOLTIP,\n\tINPUT_WRITING_ASSISTANT_BUTTON_TOOLTIP,\n\tWRITING_ASSISTANT_GENERATING_ANNOUNCEMENT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype InputVersionChangeEventDetail = {\n\tbackwards: boolean,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.\n *\n * ### Structure\n *\n * The `ui5-ai-input` consists of the following main parts:\n *\n * - **Input Field** – Inherits all standard Input behaviors.\n * - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.\n *\n * The component automatically determines which elements to render based on its internal state:\n * - The AI Button is only shown when there are available `actions`.\n * - The version navigation appears only when `totalVersions > 1`.\n *\n * ### Keyboard Support\n *\n * - **Shift + F4** — Opens the AI menu.\n * - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Input.js\";`\n *\n * @constructor\n * @extends BaseInput\n * @since 2.16.0\n * @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.\n * @public\n */\n@customElement({\n\ttag: \"ui5-ai-input\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: InputTemplate,\n\tstyles: [\n\t\tAIInputCss,\n\t\tInputCss,\n\t\tResponsivePopoverCommonCss,\n\t\tValueStateMessageCss,\n\t],\n})\n\n/**\n * Fired when the user selects the AI button.\n * @public\n */\n@event(\"button-click\", {\n\tcancelable: true,\n})\n\n/** Fired when an item from the AI actions menu is clicked.\n * @public\n */\n@event(\"item-click\")\n\n/**\n * Fired when the user selects the \"Stop\" button to stop ongoing AI text generation.\n * @public\n */\n@event(\"stop-generation\")\n\n/**\n * Fired when the user selects the version navigation buttons.\n *\n * @param {boolean} backwards - Indicates if navigation is backwards (true) or forwards (false, default)\n * @public\n */\n@event(\"version-change\")\n\nclass Input extends BaseInput {\n\teventDetails!: BaseInput[\"eventDetails\"] & {\n\t\t\"version-change\": InputVersionChangeEventDetail;\n\t\t\"stop-generation\": void;\n\t\t\"button-click\": void;\n\t\t\"item-click\": MenuItemClickEventDetail;\n\t};\n\n\t/**\n\t * Indicates the index of the currently displayed version.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcurrentVersion = 0;\n\n\t/**\n\t * Indicates the total number of result versions available.\n\t *\n\t * When not set or set to 0, the versioning will be hidden.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\ttotalVersions = 0;\n\n\t/**\n\t * Defines whether the AI Writing Assistant is currently loading.\n\t *\n\t * When `true`, indicates that an AI action is in progress.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading: boolean = false;\n\n\t/**\n\t * Indicates if the menu is open.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isMenuOpen: boolean = false;\n\n\t/**\n\t * Defines the items of the menu for the component.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\tactions!: Array<HTMLElement>;\n\n\t_previousCurrentStep = 0;\n\t_previousTotalSteps = 0;\n\tisFocused: boolean = false;\n\n\t_onfocusin(e: FocusEvent): void {\n\t\tsuper._onfocusin(e);\n\t\tthis.isFocused = true;\n\t}\n\n\t_onfocusout(e: FocusEvent): void {\n\t\tsuper._onfocusout(e);\n\t\tthis.isFocused = false;\n\t}\n\n\t/**\n\t * Manages the focus when the navigation buttons become disabled/enabled.\n\t * Automatically moves the focus to the available button when the user reaches the boundaries.\n\t * @private\n\t */\n\t_manageVersionButtonsFocus() {\n\t\tconst previousButton = this.shadowRoot?.getElementById(\"arrow-left\") as Button;\n\t\tconst nextButton = this.shadowRoot?.getElementById(\"arrow-right\") as Button;\n\t\tconst isPreviousDisabled = this.currentVersion <= 1;\n\t\tconst isNextDisabled = this.currentVersion >= this.totalVersions;\n\n\t\tif (isPreviousDisabled && previousButton) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tnextButton.focus();\n\t\t\t}, 0);\n\t\t} else if (isNextDisabled && nextButton) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tpreviousButton.focus();\n\t\t\t}, 0);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the click event for the AI generate Button.\n\t * Fires the appropriate event based on the AI Button state.\n\t * @private\n\t */\n\t_handleAIButtonClick(e: Event) {\n\t\tconst target = e.target as HTMLElement & { icon?: string };\n\t\tif (target?.icon === \"stop\") {\n\t\t\tthis.fireDecoratorEvent(\"stop-generation\");\n\t\t} else {\n\t\t\tconst opener = this.shadowRoot?.querySelector(\".ui5-input-ai-button\") as HTMLElement;\n\t\t\tthis.fireDecoratorEvent(\"button-click\");\n\t\t\tthis.menu.opener = opener;\n\t\t\tthis.menu.open = true;\n\t\t\tthis.menu.horizontalAlign = \"End\";\n\t\t}\n\t}\n\n\t/**\n\t * Handles the escape event for the AI generate Button.\n\t * @private\n\t */\n\t_handleAIButtonKeydown = (e: KeyboardEvent) => {\n\t\tif (isEscape(e) && this.loading) {\n\t\t\tthis.fireDecoratorEvent(\"stop-generation\");\n\t\t}\n\t}\n\n\t/**\n\t * Handles the version change event from the versioning component.\n\t *\n\t * @param {CustomEvent} e - The version change event\n\t */\n\t_handleVersionChange(e: CustomEvent<{ backwards: boolean }>) {\n\t\tthis.fireDecoratorEvent(\"version-change\", {\n\t\t\tbackwards: e.detail.backwards,\n\t\t});\n\t\tthis._manageVersionButtonsFocus();\n\t}\n\n\t/**\n\t * Handles the click event for the \"Previous Version\" button.\n\t * Updates the current version index and syncs content.\n\t * @private\n\t */\n\t_handlePreviousButtonClick(): void {\n\t\tthis._handleVersionChange(new CustomEvent(\"version-change\", { detail: { backwards: true } }));\n\t}\n\n\t/**\n\t * Handles the click event for the \"Next Version\" button.\n\t * Updates the current version index and syncs content.\n\t * @private\n\t */\n\t_handleNextButtonClick(): void {\n\t\tthis._handleVersionChange(new CustomEvent(\"version-change\", { detail: { backwards: false } }));\n\t}\n\n\t_onMenuIconClick(e: CustomEvent<MenuItemClickEventDetail>): void {\n\t\tthis.fireDecoratorEvent(\"item-click\", e.detail);\n\t}\n\n\t/**\n\t * Handles keydown events for keyboard shortcuts.\n\t * @private\n\t */\n\t_onkeydown(e: KeyboardEvent): void {\n\t\tsuper._onkeydown(e);\n\t\tconst menuButton = this.shadowRoot?.getElementById(\"ai-menu-btn\") as HTMLElement;\n\n\t\tif (isF4Shift(e)) {\n\t\t\tmenuButton?.focus();\n\n\t\t\tthis.menu.opener = menuButton;\n\t\t\tthis.menu.open = true;\n\t\t\tthis.menu.horizontalAlign = \"End\";\n\t\t}\n\t\tconst goPreviousStep = e.key === \"Z\" && e.shiftKey && e.ctrlKey;\n\t\tconst goNextStep = e.key === \"Y\" && e.shiftKey && e.ctrlKey;\n\n\t\tif (goPreviousStep) {\n\t\t\te.preventDefault();\n\t\t\tthis._handlePreviousButtonClick();\n\t\t} else if (goNextStep) {\n\t\t\te.preventDefault();\n\t\t\tthis._handleNextButtonClick();\n\t\t}\n\t}\n\n\t/**\n\t * Handles visibility of the Writing Assistant Button.\n\t * If there are no items, the Writing Assistant Button would not be rendered.\n\t */\n\tget hasActions() {\n\t\treturn !!this?.menu?.getSlottedNodes(\"items\").length;\n\t}\n\n\tget ariaLabel() {\n\t\treturn this.accessibleName || !this.loading ? Input.i18nBundle.getText(INPUT_WRITING_ASSISTANT_BUTTON_TOOLTIP) : Input.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);\n\t}\n\n\tget stopGeneratingTooltip() {\n\t\treturn Input.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);\n\t}\n\n\tget nextButtonAccessibleName() {\n\t\treturn Input.i18nBundle.getText(INPUT_VERSIONING_NEXT_BUTTON_TOOLTIP);\n\t}\n\n\tget previousButtonAccessibleName() {\n\t\treturn Input.i18nBundle.getText(INPUT_VERSIONING_PREVIOUS_BUTTON_TOOLTIP);\n\t}\n\n\tget menu() {\n\t\treturn this.shadowRoot?.querySelector(\"[ui5-menu]\") as Menu;\n\t}\n}\n\nInput.define();\n\nexport type { InputVersionChangeEventDetail, MenuItemClickEventDetail as InputItemClickEventDetail };\nexport default Input;\n"]}

package/dist/InputTemplate.d.ts

@@ -0,0 +1,10 @@
+import type Input from "./Input.js";
+import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base";
+type TemplateHook = () => JsxTemplateResult;
+export default function InputTemplate(this: Input, hooks?: {
+    preContent: TemplateHook;
+    postContent: TemplateHook;
+}): import("@ui5/webcomponents-base").JSX.Element;
+export {};

package/dist/InputTemplate.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import MenuSeparator from "@ui5/webcomponents/dist/MenuSeparator.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+export default function InputTemplate(hooks) {
+    const preContent = hooks?.preContent || defaultPreContent;
+    const postContent = hooks?.postContent || defaultPostContent;
+    return (_jsx(_Fragment, { children: _jsx("div", { class: `ui5-ai-input-root ui5-input-focusable-element ${this.loading && "ui5-ai-input-busy"}`, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, children: _jsxs("div", { class: "ui5-input-content", children: [_jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, active: this.loading, class: "ui5-input-busy-indicator", children: _jsx("div", { class: "ui5-input-root", part: "root", children: _jsxs("div", { class: "ui5-input-content", children: [preContent.call(this), _jsx("input", { id: "inner", part: "input", class: "ui5-input-inner", style: this.styles.innerInput, type: this.inputNativeType, "inner-input": true, "inner-input-with-icon": !!this.icon.length, disabled: this.disabled, readonly: this._readonly || this.loading, value: this._innerValue, placeholder: this._placeholder, maxlength: this.maxlength, role: this.accInfo.role, enterkeyhint: this.hint, "aria-controls": this.accInfo.ariaControls, "aria-invalid": this.accInfo.ariaInvalid, "aria-haspopup": this.accInfo.ariaHasPopup, "aria-describedby": this.accInfo.ariaDescribedBy, "aria-roledescription": this.accInfo.ariaRoledescription, "aria-autocomplete": this.accInfo.ariaAutoComplete, "aria-expanded": this.accInfo.ariaExpanded, "aria-label": this.ariaLabel, "aria-required": this.required, autocomplete: "off", "data-sap-focus-ref": true, step: this.nativeInputAttributes.step, min: this.nativeInputAttributes.min, max: this.nativeInputAttributes.max, onInput: this._handleNativeInput, onChange: this._handleChange, onSelect: this._handleSelect, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._click, onFocusIn: this.innerFocusIn }), this._effectiveShowClearIcon &&
+                                        _jsx("div", { tabindex: -1, part: "clear-icon-wrapper", class: "ui5-input-clear-icon-wrapper inputIcon", onClick: this._clear, onMouseDown: this._iconMouseDown, children: _jsx(Icon, { part: "clear-icon", class: "ui5-input-clear-icon", name: "decline", tabindex: -1, accessibleName: this.clearIconAccessibleName }) }), this.icon.length > 0 &&
+                                        _jsx("div", { class: "ui5-input-icon-root", tabindex: -1, children: _jsx("slot", { name: "icon" }) }), _jsx("div", { class: "ui5-input-value-state-icon", children: this._valueStateInputIcon }), postContent.call(this), this.accInfo.ariaDescription &&
+                                        _jsx("span", { id: "descr", class: "ui5-hidden-text", children: this.accInfo.ariaDescription }), this.accInfo.accessibleDescription &&
+                                        _jsx("span", { id: "accessibleDescription", class: "ui5-hidden-text", children: this.accInfo.accessibleDescription }), this.linksInAriaValueStateHiddenText.length > 0 &&
+                                        _jsx("span", { id: "hiddenText-value-state-link-shortcut", class: "ui5-hidden-text", children: this.valueStateLinksShortcutsTextAcc }), this.hasValueState &&
+                                        _jsx("span", { id: "valueStateDesc", class: "ui5-hidden-text", children: this.ariaValueStateHiddenText })] }) }) }), _jsx(Button, { id: "ai-menu-btn", hidden: (!this.isFocused && !this.loading) || !this.hasActions || this.readonly, tabIndex: -1, class: `ui5-input-ai-button ui5-ai-input-button-wrapper ${this._isMenuOpen && "ui5-input-button-menu-open"} ${this.loading && "ui5-ai-input-loading"}`, design: "Transparent", icon: this.loading ? "stop" : "ai", onClick: this._handleAIButtonClick, onKeyDown: this._handleAIButtonKeydown, "aria-keyshortcuts": this.loading ? "Esc" : "Shift + F4", tooltip: this.loading ? this.stopGeneratingTooltip : this.ariaLabel, accessibilityAttributes: { hasPopup: this.loading ? "false" : "menu" } }), _jsxs(Menu, { onItemClick: this._onMenuIconClick, onBeforeOpen: () => { this._isMenuOpen = true; }, onBeforeClose: () => { this._isMenuOpen = false; }, onClose: () => { if (!this.loading) {
+                            this.focus();
+                        } }, children: [_jsx("slot", { name: "actions" }), this.totalVersions > 1 && Versioning.call(this)] })] }) }) }));
+}
+function Versioning() {
+    return (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), _jsxs(MenuItem, { type: "Inactive", class: "ui5-ai-versioning-menu-footer", text: `${this.currentVersion} / ${this.totalVersions}`, children: [_jsx(Button, { id: "arrow-left", class: "versioning-button", slot: "endContent", design: "Transparent", icon: "navigation-left-arrow", tooltip: this.previousButtonAccessibleName, accessibleName: this.previousButtonAccessibleName, "aria-keyshortcut": "Shift+Ctrl+Z", disabled: this.currentVersion <= 1, onClick: this._handlePreviousButtonClick, "data-ui5-versioning-button": "previous" }), _jsx(Button, { id: "arrow-right", class: "versioning-button", slot: "endContent", design: "Transparent", icon: "navigation-right-arrow", tooltip: this.nextButtonAccessibleName, accessibleName: this.nextButtonAccessibleName, "aria-keyshortcut": "Shift+Ctrl+Y", disabled: this.currentVersion >= this.totalVersions, onClick: this._handleNextButtonClick, "data-ui5-versioning-button": "next" })] })] }));
+}
+function defaultPreContent() { }
+function defaultPostContent() { }
+//# sourceMappingURL=InputTemplate.js.map

package/dist/InputTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTemplate.js","sourceRoot":"","sources":["../src/InputTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Input from \"./Input.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport MenuItem from \"@ui5/webcomponents/dist/MenuItem.js\";\nimport MenuSeparator from \"@ui5/webcomponents/dist/MenuSeparator.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport Menu from \"@ui5/webcomponents/dist/Menu.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-left-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport type { JsxTemplateResult } from \"@ui5/webcomponents-base\";\n\ntype TemplateHook = () => JsxTemplateResult;\n\nexport default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {\n\tconst preContent = hooks?.preContent || defaultPreContent;\n\tconst postContent = hooks?.postContent || defaultPostContent;\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass={`ui5-ai-input-root ui5-input-focusable-element ${this.loading && \"ui5-ai-input-busy\"}`}\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t>\n\t\t\t\t<div class=\"ui5-input-content\">\n\t\t\t\t\t<BusyIndicator\n\t\t\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\t\t\tactive={this.loading}\n\t\t\t\t\t\tclass=\"ui5-input-busy-indicator\"\n\t\t\t\t\t>\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"ui5-input-root\"\n\t\t\t\t\t\t\tpart=\"root\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"ui5-input-content\">\n\t\t\t\t\t\t\t\t{preContent.call(this)}\n\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tid=\"inner\"\n\t\t\t\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\t\t\t\tclass=\"ui5-input-inner\"\n\t\t\t\t\t\t\t\t\tstyle={this.styles.innerInput}\n\t\t\t\t\t\t\t\t\ttype={this.inputNativeType}\n\t\t\t\t\t\t\t\t\tinner-input\n\t\t\t\t\t\t\t\t\tinner-input-with-icon={!!this.icon.length}\n\t\t\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\t\t\treadonly={this._readonly || this.loading}\n\t\t\t\t\t\t\t\t\tvalue={this._innerValue}\n\t\t\t\t\t\t\t\t\tplaceholder={this._placeholder}\n\t\t\t\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\t\t\t\tenterkeyhint={this.hint}\n\t\t\t\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\t\t\t\taria-invalid={this.accInfo.ariaInvalid}\n\t\t\t\t\t\t\t\t\taria-haspopup={this.accInfo.ariaHasPopup}\n\t\t\t\t\t\t\t\t\taria-describedby={this.accInfo.ariaDescribedBy}\n\t\t\t\t\t\t\t\t\taria-roledescription={this.accInfo.ariaRoledescription}\n\t\t\t\t\t\t\t\t\taria-autocomplete={this.accInfo.ariaAutoComplete}\n\t\t\t\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\t\t\t\taria-label={this.ariaLabel}\n\t\t\t\t\t\t\t\t\taria-required={this.required}\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\t\t\t\tstep={this.nativeInputAttributes.step}\n\t\t\t\t\t\t\t\t\tmin={this.nativeInputAttributes.min}\n\t\t\t\t\t\t\t\t\tmax={this.nativeInputAttributes.max}\n\t\t\t\t\t\t\t\t\tonInput={this._handleNativeInput}\n\t\t\t\t\t\t\t\t\tonChange={this._handleChange}\n\t\t\t\t\t\t\t\t\tonSelect={this._handleSelect}\n\t\t\t\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\t\t\t\t\tonClick={this._click}\n\t\t\t\t\t\t\t\t\tonFocusIn={this.innerFocusIn}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\t\tpart=\"clear-icon-wrapper\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-input-clear-icon-wrapper inputIcon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._clear}\n\t\t\t\t\t\t\t\t\t\tonMouseDown={this._iconMouseDown}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\tpart=\"clear-icon\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ui5-input-clear-icon\"\n\t\t\t\t\t\t\t\t\t\t\tname={\"decline\"}\n\t\t\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\t\t\taccessibleName={this.clearIconAccessibleName}>\n\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t{this.icon.length > 0 &&\n\t\t\t\t\t\t\t\t\t<div class=\"ui5-input-icon-root\"\n\t\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t<div class=\"ui5-input-value-state-icon\">\n\t\t\t\t\t\t\t\t\t{this._valueStateInputIcon}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ postContent.call(this) }\n\n\t\t\t\t\t\t\t\t{this.accInfo.ariaDescription &&\n\t\t\t\t\t\t\t\t\t<span id=\"descr\" class=\"ui5-hidden-text\">{this.accInfo.ariaDescription}</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t{this.accInfo.accessibleDescription &&\n\t\t\t\t\t\t\t\t\t<span id=\"accessibleDescription\" class=\"ui5-hidden-text\">{this.accInfo.accessibleDescription}</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t{this.linksInAriaValueStateHiddenText.length > 0 &&\n\t\t\t\t\t\t\t\t\t<span id=\"hiddenText-value-state-link-shortcut\" class=\"ui5-hidden-text\">{this.valueStateLinksShortcutsTextAcc}</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t{this.hasValueState &&\n\t\t\t\t\t\t\t\t\t<span id=\"valueStateDesc\" class=\"ui5-hidden-text\">{this.ariaValueStateHiddenText}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</BusyIndicator>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tid=\"ai-menu-btn\"\n\t\t\t\t\t\thidden={(!this.isFocused && !this.loading) || !this.hasActions || this.readonly}\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\tclass={`ui5-input-ai-button ui5-ai-input-button-wrapper ${this._isMenuOpen && \"ui5-input-button-menu-open\"} ${this.loading && \"ui5-ai-input-loading\"}`}\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\ticon={this.loading ? \"stop\" : \"ai\"}\n\t\t\t\t\t\tonClick={this._handleAIButtonClick}\n\t\t\t\t\t\tonKeyDown={this._handleAIButtonKeydown}\n\t\t\t\t\t\taria-keyshortcuts={ this.loading ? \"Esc\" : \"Shift + F4\" }\n\t\t\t\t\t\ttooltip={this.loading ? this.stopGeneratingTooltip : this.ariaLabel}\n\t\t\t\t\t\taccessibilityAttributes={{ hasPopup: this.loading ? \"false\" : \"menu\" }}\n\t\t\t\t\t/>\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tonItemClick={this._onMenuIconClick}\n\t\t\t\t\t\tonBeforeOpen={() => { this._isMenuOpen = true; }}\n\t\t\t\t\t\tonBeforeClose={() => { this._isMenuOpen = false; }}\n\t\t\t\t\t\tonClose={() => { if (!this.loading) { this.focus(); } }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"actions\"></slot>\n\t\t\t\t\t\t{this.totalVersions > 1 && Versioning.call(this)}\n\t\t\t\t\t</Menu>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction Versioning(this: Input) {\n\treturn (\n\t\t<>\n\t\t\t<MenuSeparator />\n\t\t\t<MenuItem\n\t\t\t\ttype=\"Inactive\"\n\t\t\t\tclass=\"ui5-ai-versioning-menu-footer\"\n\t\t\t\ttext={`${this.currentVersion} / ${this.totalVersions}`}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tid=\"arrow-left\"\n\t\t\t\t\tclass=\"versioning-button\"\n\t\t\t\t\tslot=\"endContent\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\ticon=\"navigation-left-arrow\"\n\t\t\t\t\ttooltip={this.previousButtonAccessibleName}\n\t\t\t\t\taccessibleName={this.previousButtonAccessibleName}\n\t\t\t\t\taria-keyshortcut=\"Shift+Ctrl+Z\"\n\t\t\t\t\tdisabled={this.currentVersion <= 1}\n\t\t\t\t\tonClick={this._handlePreviousButtonClick}\n\t\t\t\t\tdata-ui5-versioning-button=\"previous\"\n\t\t\t\t>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tid=\"arrow-right\"\n\t\t\t\t\tclass=\"versioning-button\"\n\t\t\t\t\tslot=\"endContent\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\ticon=\"navigation-right-arrow\"\n\t\t\t\t\ttooltip={this.nextButtonAccessibleName}\n\t\t\t\t\taccessibleName={this.nextButtonAccessibleName}\n\t\t\t\t\taria-keyshortcut=\"Shift+Ctrl+Y\"\n\t\t\t\t\tdisabled={this.currentVersion >= this.totalVersions}\n\t\t\t\t\tonClick={this._handleNextButtonClick}\n\t\t\t\t\tdata-ui5-versioning-button=\"next\"\n\t\t\t\t/>\n\t\t\t</MenuItem>\n\t\t</>\n\t);\n}\n\nfunction defaultPreContent() { }\n\nfunction defaultPostContent() {}\n"]}

package/dist/TextArea.d.ts

@@ -0,0 +1,118 @@
+import { BaseTextArea } from "@ui5/webcomponents/dist/TextArea.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+type TextAreaVersionChangeEventDetail = {
+    backwards: boolean;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-ai-textarea` component extends the standard TextArea with Writing Assistant capabilities.
+ * It provides AI-powered text generation, editing suggestions, and version management functionality.
+ *
+ * ### Structure
+ * The `ui5-ai-textarea` consists of the following elements:
+ * - TextArea: The main text input area with all standard textarea functionality
+ * - WritingAssistant: Dedicated toolbar containing:
+ *   - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions
+ *   - AI Button: Opens a menu that can be extended with custom AI generation options through slotting
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-ai/dist/TextArea.js";`
+ *
+ * @constructor
+ * @extends BaseTextArea
+ * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
+ * @since 2.16.0
+ * @public
+ * @slot {HTMLElement} menu Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.
+ */
+declare class TextArea extends BaseTextArea {
+    eventDetails: BaseTextArea["eventDetails"] & {
+        "version-change": TextAreaVersionChangeEventDetail;
+        "stop-generation": void;
+    };
+    private _keydownHandler?;
+    /**
+     * Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.
+     *
+     * @default false
+     * @public
+     */
+    loading: boolean;
+    /**
+     * Defines the prompt description of the current action.
+     *
+     * @default ""
+     * @public
+     */
+    promptDescription: string;
+    /**
+     * Indicates the index of the currently displayed version.
+     *
+     *
+     * @default 0
+     * @public
+     */
+    currentVersion: number;
+    /**
+     * Indicates the total number of result versions available.
+     *
+     * Notes:
+     * Versioning is hidden if the value is `0`
+     *
+     * @default 0
+     * @public
+     */
+    totalVersions: number;
+    menu: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    /**
+     * Handles the click event for the "Previous Version" button.
+     * Updates the current version index and syncs content.
+     */
+    _handlePreviousVersionClick(): void;
+    /**
+     * Handles the click event for the "Next Version" button.
+     * Updates the current version index and syncs content.
+     */
+    _handleNextVersionClick(): void;
+    /**
+     * Handles the version change event from the writing assistant.
+     */
+    _handleVersionChange(e: CustomEvent<{
+        backwards: boolean;
+    }>): void;
+    /**
+     * Handles keydown events for keyboard shortcuts.
+     * @private
+     */
+    _handleKeydown(keyboardEvent: KeyboardEvent): void;
+    /**
+     * Overrides the parent's onAfterRendering to add keydown handler.
+     * @private
+     */
+    onAfterRendering(): void;
+    /**
+     * Handles the generate click event from the AI toolbar.
+     * Opens the AI menu and sets the opener element.
+     *
+     * @private
+     */
+    _handleAIButtonClick: (e: CustomEvent<{
+        clickTarget?: HTMLElement;
+    }>) => void;
+    get _ariaLabel(): string;
+    /**
+     * Handles the stop generation event from the AI toolbar.
+     * Fires the stop-generation event to notify listeners.
+     *
+     * @private
+     */
+    handleStopGeneration: () => void;
+}
+export type { TextAreaVersionChangeEventDetail };
+export default TextArea;