@ui5/webcomponents-ai 2.15.0 → 2.16.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +1 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/TextArea.d.ts +116 -0
- package/dist/TextArea.js +235 -0
- package/dist/TextArea.js.map +1 -0
- package/dist/TextAreaTemplate.d.ts +2 -0
- package/dist/TextAreaTemplate.js +13 -0
- package/dist/TextAreaTemplate.js.map +1 -0
- package/dist/ToolbarLabel.d.ts +39 -0
- package/dist/ToolbarLabel.js +67 -0
- package/dist/ToolbarLabel.js.map +1 -0
- package/dist/ToolbarLabelTemplate.d.ts +2 -0
- package/dist/ToolbarLabelTemplate.js +5 -0
- package/dist/ToolbarLabelTemplate.js.map +1 -0
- package/dist/Versioning.d.ts +96 -0
- package/dist/Versioning.js +188 -0
- package/dist/Versioning.js.map +1 -0
- package/dist/VersioningTemplate.d.ts +4 -0
- package/dist/VersioningTemplate.js +9 -0
- package/dist/VersioningTemplate.js.map +1 -0
- package/dist/WritingAssistant.d.ts +101 -0
- package/dist/WritingAssistant.js +192 -0
- package/dist/WritingAssistant.js.map +1 -0
- package/dist/WritingAssistantTemplate.d.ts +2 -0
- package/dist/WritingAssistantTemplate.js +12 -0
- package/dist/WritingAssistantTemplate.js.map +1 -0
- package/dist/bundle.esm.js +1 -0
- package/dist/bundle.esm.js.map +1 -1
- package/dist/css/themes/AITextArea.css +1 -0
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/Versioning.css +1 -0
- package/dist/css/themes/WritingAssistant.css +1 -0
- package/dist/custom-elements-internal.json +198 -0
- package/dist/custom-elements.json +183 -0
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +10 -1
- package/dist/generated/i18n/i18n-defaults.js +10 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/themes/AITextArea.css.d.ts +2 -0
- package/dist/generated/themes/AITextArea.css.js +8 -0
- package/dist/generated/themes/AITextArea.css.js.map +1 -0
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/Versioning.css.d.ts +2 -0
- package/dist/generated/themes/Versioning.css.js +8 -0
- package/dist/generated/themes/Versioning.css.js.map +1 -0
- package/dist/generated/themes/WritingAssistant.css.d.ts +2 -0
- package/dist/generated/themes/WritingAssistant.css.js +8 -0
- package/dist/generated/themes/WritingAssistant.css.js.map +1 -0
- package/dist/vscode.html-custom-data.json +27 -0
- package/dist/web-types.json +78 -1
- package/package.json +7 -7
- package/src/TextArea.css +45 -0
- package/src/TextAreaTemplate.tsx +90 -0
- package/src/ToolbarLabelTemplate.tsx +9 -0
- package/src/VersioningTemplate.tsx +34 -0
- package/src/WritingAssistantTemplate.tsx +49 -0
- package/src/i18n/messagebundle.properties +26 -0
- package/src/i18n/messagebundle_en.properties +1 -0
- package/src/themes/AITextArea.css +45 -0
- package/src/themes/Versioning.css +20 -0
- package/src/themes/WritingAssistant.css +45 -0
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import TextArea from "@ui5/webcomponents/dist/TextArea.js";
|
|
2
|
+
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
3
|
+
/**
|
|
4
|
+
* @class
|
|
5
|
+
*
|
|
6
|
+
* ### Overview
|
|
7
|
+
*
|
|
8
|
+
* The `ui5-ai-textarea` component extends the standard TextArea with AI Writing Assistant capabilities.
|
|
9
|
+
* It provides AI-powered text generation, editing suggestions, and version management functionality.
|
|
10
|
+
*
|
|
11
|
+
* ### Structure
|
|
12
|
+
* The `ui5-ai-textarea` consists of the following elements:
|
|
13
|
+
* - TextArea: The main text input area with all standard textarea functionality
|
|
14
|
+
* - AI Toolbar: Specialized toolbar with AI generation controls
|
|
15
|
+
* - Version Navigation: Controls for navigating between AI-generated versions
|
|
16
|
+
* - Menu Integration: Support for AI action menu
|
|
17
|
+
*
|
|
18
|
+
* Single vs multiple result display is determined internally based on totalVersions count.
|
|
19
|
+
*
|
|
20
|
+
* ### ES6 Module Import
|
|
21
|
+
*
|
|
22
|
+
* `import "@sap-webcomponents/ai/dist/TextArea.js";`
|
|
23
|
+
*
|
|
24
|
+
* @constructor
|
|
25
|
+
* @extends TextArea
|
|
26
|
+
* @since 1.0.0-rc.1
|
|
27
|
+
* @public
|
|
28
|
+
* @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.
|
|
29
|
+
*/
|
|
30
|
+
declare class AITextArea extends TextArea {
|
|
31
|
+
eventDetails: TextArea["eventDetails"] & {
|
|
32
|
+
"version-change": {
|
|
33
|
+
backwards: boolean;
|
|
34
|
+
};
|
|
35
|
+
"stop-generation": object;
|
|
36
|
+
};
|
|
37
|
+
private _keydownHandler?;
|
|
38
|
+
/**
|
|
39
|
+
* Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.
|
|
40
|
+
*
|
|
41
|
+
* @default false
|
|
42
|
+
* @since 1.0.0-rc.14
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
loading: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Defines the action text of the AI Writing Assistant.
|
|
48
|
+
*
|
|
49
|
+
* @default ""
|
|
50
|
+
* @public
|
|
51
|
+
*/
|
|
52
|
+
actionText: string;
|
|
53
|
+
/**
|
|
54
|
+
* Indicates the index of the currently displayed result version.
|
|
55
|
+
*
|
|
56
|
+
* The index is **1-based** (i.e. `1` represents the first result).
|
|
57
|
+
*
|
|
58
|
+
* @default 1
|
|
59
|
+
* @public
|
|
60
|
+
*/
|
|
61
|
+
currentVersionIndex: number;
|
|
62
|
+
/**
|
|
63
|
+
* Indicates the total number of result versions available.
|
|
64
|
+
*
|
|
65
|
+
* @default 1
|
|
66
|
+
* @public
|
|
67
|
+
*/
|
|
68
|
+
totalVersions: number;
|
|
69
|
+
menu: Array<HTMLElement>;
|
|
70
|
+
static i18nBundle: I18nBundle;
|
|
71
|
+
static onDefine(): Promise<void>;
|
|
72
|
+
/**
|
|
73
|
+
* Handles the click event for the "Previous Version" button.
|
|
74
|
+
* Updates the current version index and syncs content.
|
|
75
|
+
*/
|
|
76
|
+
_handlePreviousVersionClick(): void;
|
|
77
|
+
/**
|
|
78
|
+
* Handles the click event for the "Next Version" button.
|
|
79
|
+
* Updates the current version index and syncs content.
|
|
80
|
+
*/
|
|
81
|
+
_handleNextVersionClick(): void;
|
|
82
|
+
/**
|
|
83
|
+
* Handles the version change event from the writing assistant.
|
|
84
|
+
*/
|
|
85
|
+
_handleVersionChange(e: CustomEvent<{
|
|
86
|
+
backwards: boolean;
|
|
87
|
+
}>): void;
|
|
88
|
+
/**
|
|
89
|
+
* Handles keydown events for keyboard shortcuts.
|
|
90
|
+
* @private
|
|
91
|
+
*/
|
|
92
|
+
_handleKeydown(keyboardEvent: KeyboardEvent): void;
|
|
93
|
+
/**
|
|
94
|
+
* Overrides the parent's onAfterRendering to add keydown handler.
|
|
95
|
+
* @private
|
|
96
|
+
*/
|
|
97
|
+
onAfterRendering(): void;
|
|
98
|
+
/**
|
|
99
|
+
* Handles the generate click event from the AI toolbar.
|
|
100
|
+
* Opens the AI menu and sets the opener element.
|
|
101
|
+
*
|
|
102
|
+
* @private
|
|
103
|
+
*/
|
|
104
|
+
_handleAIButtonClick: (e: CustomEvent<{
|
|
105
|
+
clickTarget?: HTMLElement;
|
|
106
|
+
}>) => void;
|
|
107
|
+
get _ariaLabel(): string;
|
|
108
|
+
/**
|
|
109
|
+
* Handles the stop generation event from the AI toolbar.
|
|
110
|
+
* Fires the stop-generation event to notify listeners.
|
|
111
|
+
*
|
|
112
|
+
* @private
|
|
113
|
+
*/
|
|
114
|
+
handleStopGeneration: () => void;
|
|
115
|
+
}
|
|
116
|
+
export default AITextArea;
|
package/dist/TextArea.js
ADDED
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var AITextArea_1;
|
|
8
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
9
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
10
|
+
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
11
|
+
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
|
12
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
13
|
+
import TextArea from "@ui5/webcomponents/dist/TextArea.js";
|
|
14
|
+
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
|
|
15
|
+
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
16
|
+
import { WRITING_ASSISTANT_LABEL, } from "./generated/i18n/i18n-defaults.js";
|
|
17
|
+
// Styles
|
|
18
|
+
import AITextAreaCss from "./generated/themes/AITextArea.css.js";
|
|
19
|
+
import textareaStyles from "@ui5/webcomponents/dist/generated/themes/TextArea.css.js";
|
|
20
|
+
import valueStateMessageStyles from "@ui5/webcomponents/dist/generated/themes/ValueStateMessage.css.js";
|
|
21
|
+
// Templates
|
|
22
|
+
import TextAreaTemplate from "./TextAreaTemplate.js";
|
|
23
|
+
import WritingAssistant from "./WritingAssistant.js";
|
|
24
|
+
/**
|
|
25
|
+
* @class
|
|
26
|
+
*
|
|
27
|
+
* ### Overview
|
|
28
|
+
*
|
|
29
|
+
* The `ui5-ai-textarea` component extends the standard TextArea with AI Writing Assistant capabilities.
|
|
30
|
+
* It provides AI-powered text generation, editing suggestions, and version management functionality.
|
|
31
|
+
*
|
|
32
|
+
* ### Structure
|
|
33
|
+
* The `ui5-ai-textarea` consists of the following elements:
|
|
34
|
+
* - TextArea: The main text input area with all standard textarea functionality
|
|
35
|
+
* - AI Toolbar: Specialized toolbar with AI generation controls
|
|
36
|
+
* - Version Navigation: Controls for navigating between AI-generated versions
|
|
37
|
+
* - Menu Integration: Support for AI action menu
|
|
38
|
+
*
|
|
39
|
+
* Single vs multiple result display is determined internally based on totalVersions count.
|
|
40
|
+
*
|
|
41
|
+
* ### ES6 Module Import
|
|
42
|
+
*
|
|
43
|
+
* `import "@sap-webcomponents/ai/dist/TextArea.js";`
|
|
44
|
+
*
|
|
45
|
+
* @constructor
|
|
46
|
+
* @extends TextArea
|
|
47
|
+
* @since 1.0.0-rc.1
|
|
48
|
+
* @public
|
|
49
|
+
* @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.
|
|
50
|
+
*/
|
|
51
|
+
let AITextArea = AITextArea_1 = class AITextArea extends TextArea {
|
|
52
|
+
constructor() {
|
|
53
|
+
super(...arguments);
|
|
54
|
+
/**
|
|
55
|
+
* Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.
|
|
56
|
+
*
|
|
57
|
+
* @default false
|
|
58
|
+
* @since 1.0.0-rc.14
|
|
59
|
+
* @public
|
|
60
|
+
*/
|
|
61
|
+
this.loading = false;
|
|
62
|
+
/**
|
|
63
|
+
* Defines the action text of the AI Writing Assistant.
|
|
64
|
+
*
|
|
65
|
+
* @default ""
|
|
66
|
+
* @public
|
|
67
|
+
*/
|
|
68
|
+
this.actionText = "";
|
|
69
|
+
/**
|
|
70
|
+
* Indicates the index of the currently displayed result version.
|
|
71
|
+
*
|
|
72
|
+
* The index is **1-based** (i.e. `1` represents the first result).
|
|
73
|
+
*
|
|
74
|
+
* @default 1
|
|
75
|
+
* @public
|
|
76
|
+
*/
|
|
77
|
+
this.currentVersionIndex = 1;
|
|
78
|
+
/**
|
|
79
|
+
* Indicates the total number of result versions available.
|
|
80
|
+
*
|
|
81
|
+
* @default 1
|
|
82
|
+
* @public
|
|
83
|
+
*/
|
|
84
|
+
this.totalVersions = 1;
|
|
85
|
+
/**
|
|
86
|
+
* Handles the generate click event from the AI toolbar.
|
|
87
|
+
* Opens the AI menu and sets the opener element.
|
|
88
|
+
*
|
|
89
|
+
* @private
|
|
90
|
+
*/
|
|
91
|
+
this._handleAIButtonClick = (e) => {
|
|
92
|
+
const menuNodes = this.getSlottedNodes("menu");
|
|
93
|
+
if (menuNodes.length === 0) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
if (!e.detail?.clickTarget) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const menu = menuNodes[0];
|
|
100
|
+
if (menu && typeof menu.open !== "undefined") {
|
|
101
|
+
menu.opener = e.detail.clickTarget;
|
|
102
|
+
menu.open = true;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* Handles the stop generation event from the AI toolbar.
|
|
107
|
+
* Fires the stop-generation event to notify listeners.
|
|
108
|
+
*
|
|
109
|
+
* @private
|
|
110
|
+
*/
|
|
111
|
+
this.handleStopGeneration = () => {
|
|
112
|
+
this.fireDecoratorEvent("stop-generation");
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
static async onDefine() {
|
|
116
|
+
AITextArea_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-ai");
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Handles the click event for the "Previous Version" button.
|
|
120
|
+
* Updates the current version index and syncs content.
|
|
121
|
+
*/
|
|
122
|
+
_handlePreviousVersionClick() {
|
|
123
|
+
this.fireDecoratorEvent("version-change", { backwards: true });
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Handles the click event for the "Next Version" button.
|
|
127
|
+
* Updates the current version index and syncs content.
|
|
128
|
+
*/
|
|
129
|
+
_handleNextVersionClick() {
|
|
130
|
+
this.fireDecoratorEvent("version-change", { backwards: false });
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Handles the version change event from the writing assistant.
|
|
134
|
+
*/
|
|
135
|
+
_handleVersionChange(e) {
|
|
136
|
+
if (e.detail.backwards) {
|
|
137
|
+
this._handlePreviousVersionClick();
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
this._handleNextVersionClick();
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Handles keydown events for keyboard shortcuts.
|
|
145
|
+
* @private
|
|
146
|
+
*/
|
|
147
|
+
_handleKeydown(keyboardEvent) {
|
|
148
|
+
const isCtrlOrCmd = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
|
|
149
|
+
const isShift = keyboardEvent.shiftKey;
|
|
150
|
+
if (isShift && keyboardEvent.key.toLowerCase() === "f4") {
|
|
151
|
+
const toolbar = this.shadowRoot?.querySelector("[ui5-ai-writing-assistant]");
|
|
152
|
+
const aiButton = toolbar?.shadowRoot?.querySelector("#ai-menu-btn");
|
|
153
|
+
if (aiButton) {
|
|
154
|
+
aiButton.focus();
|
|
155
|
+
}
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
if (this.totalVersions > 1) {
|
|
159
|
+
if (isCtrlOrCmd && isShift && keyboardEvent.key.toLowerCase() === "z") {
|
|
160
|
+
keyboardEvent.preventDefault();
|
|
161
|
+
this._handlePreviousVersionClick();
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
if (isCtrlOrCmd && isShift && keyboardEvent.key.toLowerCase() === "y") {
|
|
165
|
+
keyboardEvent.preventDefault();
|
|
166
|
+
this._handleNextVersionClick();
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Overrides the parent's onAfterRendering to add keydown handler.
|
|
172
|
+
* @private
|
|
173
|
+
*/
|
|
174
|
+
onAfterRendering() {
|
|
175
|
+
super.onAfterRendering();
|
|
176
|
+
// Add keydown event listener to the textarea
|
|
177
|
+
const textarea = this.shadowRoot?.querySelector("textarea");
|
|
178
|
+
if (textarea && !this._keydownHandler) {
|
|
179
|
+
this._keydownHandler = this._handleKeydown.bind(this);
|
|
180
|
+
textarea.addEventListener("keydown", this._keydownHandler);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
get _ariaLabel() {
|
|
184
|
+
return this.accessibleName || AITextArea_1.i18nBundle.getText(WRITING_ASSISTANT_LABEL);
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
__decorate([
|
|
188
|
+
property({ type: Boolean })
|
|
189
|
+
], AITextArea.prototype, "loading", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
property()
|
|
192
|
+
], AITextArea.prototype, "actionText", void 0);
|
|
193
|
+
__decorate([
|
|
194
|
+
property({ type: Number })
|
|
195
|
+
], AITextArea.prototype, "currentVersionIndex", void 0);
|
|
196
|
+
__decorate([
|
|
197
|
+
property({ type: Number })
|
|
198
|
+
], AITextArea.prototype, "totalVersions", void 0);
|
|
199
|
+
__decorate([
|
|
200
|
+
slot({ type: HTMLElement })
|
|
201
|
+
], AITextArea.prototype, "menu", void 0);
|
|
202
|
+
AITextArea = AITextArea_1 = __decorate([
|
|
203
|
+
customElement({
|
|
204
|
+
tag: "ui5-ai-textarea",
|
|
205
|
+
languageAware: true,
|
|
206
|
+
renderer: jsxRenderer,
|
|
207
|
+
template: TextAreaTemplate,
|
|
208
|
+
styles: [
|
|
209
|
+
textareaStyles,
|
|
210
|
+
valueStateMessageStyles,
|
|
211
|
+
AITextAreaCss,
|
|
212
|
+
],
|
|
213
|
+
dependencies: [
|
|
214
|
+
WritingAssistant,
|
|
215
|
+
BusyIndicator,
|
|
216
|
+
],
|
|
217
|
+
})
|
|
218
|
+
/**
|
|
219
|
+
* Fired when the user clicks on version navigation buttons.
|
|
220
|
+
*
|
|
221
|
+
* @public
|
|
222
|
+
*/
|
|
223
|
+
,
|
|
224
|
+
event("version-change")
|
|
225
|
+
/**
|
|
226
|
+
* Fired when the user requests to stop AI text generation.
|
|
227
|
+
*
|
|
228
|
+
* @public
|
|
229
|
+
*/
|
|
230
|
+
,
|
|
231
|
+
event("stop-generation")
|
|
232
|
+
], AITextArea);
|
|
233
|
+
AITextArea.define();
|
|
234
|
+
export default AITextArea;
|
|
235
|
+
//# sourceMappingURL=TextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport TextArea from \"@ui5/webcomponents/dist/TextArea.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n\tWRITING_ASSISTANT_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n// Styles\nimport AITextAreaCss from \"./generated/themes/AITextArea.css.js\";\nimport textareaStyles from \"@ui5/webcomponents/dist/generated/themes/TextArea.css.js\";\nimport valueStateMessageStyles from \"@ui5/webcomponents/dist/generated/themes/ValueStateMessage.css.js\";\n\n// Templates\nimport TextAreaTemplate from \"./TextAreaTemplate.js\";\nimport WritingAssistant from \"./WritingAssistant.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-textarea` component extends the standard TextArea with AI Writing Assistant capabilities.\n * It provides AI-powered text generation, editing suggestions, and version management functionality.\n *\n * ### Structure\n * The `ui5-ai-textarea` consists of the following elements:\n * - TextArea: The main text input area with all standard textarea functionality\n * - AI Toolbar: Specialized toolbar with AI generation controls\n * - Version Navigation: Controls for navigating between AI-generated versions\n * - Menu Integration: Support for AI action menu\n *\n * Single vs multiple result display is determined internally based on totalVersions count.\n *\n * ### ES6 Module Import\n *\n * `import \"@sap-webcomponents/ai/dist/TextArea.js\";`\n *\n * @constructor\n * @extends TextArea\n * @since 1.0.0-rc.1\n * @public\n * @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.\n */\n@customElement({\n\ttag: \"ui5-ai-textarea\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TextAreaTemplate,\n\tstyles: [\n\t\ttextareaStyles,\n\t\tvalueStateMessageStyles,\n\t\tAITextAreaCss,\n\t],\n\tdependencies: [\n\t\tWritingAssistant,\n\t\tBusyIndicator,\n\t],\n})\n\n/**\n * Fired when the user clicks on version navigation buttons.\n *\n * @public\n */\n@event(\"version-change\")\n\n/**\n * Fired when the user requests to stop AI text generation.\n *\n * @public\n */\n@event(\"stop-generation\")\n\nclass AITextArea extends TextArea {\n\teventDetails!: TextArea[\"eventDetails\"] & {\n\t\t\"version-change\": {\n\t\t\tbackwards: boolean;\n\t\t};\n\t\t\"stop-generation\": object;\n\t};\n\n\t// Store bound handler for proper cleanup\n\tprivate _keydownHandler?: (event: KeyboardEvent) => void;\n\n\t/**\n\t * Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.\n\t *\n\t * @default false\n\t * @since 1.0.0-rc.14\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the action text of the AI Writing Assistant.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tactionText = \"\";\n\n\t/**\n\t * Indicates the index of the currently displayed result version.\n\t *\n\t * The index is **1-based** (i.e. `1` represents the first result).\n\t *\n\t * @default 1\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcurrentVersionIndex = 1;\n\n\t/**\n\t * Indicates the total number of result versions available.\n\t *\n\t * @default 1\n\t * @public\n\t */\n\t@property({ type: Number })\n\ttotalVersions = 1;\n\n\t@slot({ type: HTMLElement })\n\tmenu!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tAITextArea.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-ai\");\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 */\n\t_handlePreviousVersionClick(): void {\n\t\tthis.fireDecoratorEvent(\"version-change\", { 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 */\n\t_handleNextVersionClick(): void {\n\t\tthis.fireDecoratorEvent(\"version-change\", { backwards: false });\n\t}\n\n\t/**\n\t * Handles the version change event from the writing assistant.\n\t */\n\t_handleVersionChange(e: CustomEvent<{ backwards: boolean }>): void {\n\t\tif (e.detail.backwards) {\n\t\t\tthis._handlePreviousVersionClick();\n\t\t} else {\n\t\t\tthis._handleNextVersionClick();\n\t\t}\n\t}\n\n\t/**\n\t * Handles keydown events for keyboard shortcuts.\n\t * @private\n\t */\n\t_handleKeydown(keyboardEvent: KeyboardEvent) {\n\t\tconst isCtrlOrCmd = keyboardEvent.ctrlKey || keyboardEvent.metaKey;\n\t\tconst isShift = keyboardEvent.shiftKey;\n\n\t\tif (isShift && keyboardEvent.key.toLowerCase() === \"f4\") {\n\t\t\tconst toolbar = this.shadowRoot?.querySelector(\"[ui5-ai-writing-assistant]\") as HTMLElement;\n\t\t\tconst aiButton = toolbar?.shadowRoot?.querySelector(\"#ai-menu-btn\") as HTMLElement;\n\n\t\t\tif (aiButton) {\n\t\t\t\taiButton.focus();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.totalVersions > 1) {\n\t\t\tif (isCtrlOrCmd && isShift && keyboardEvent.key.toLowerCase() === \"z\") {\n\t\t\t\tkeyboardEvent.preventDefault();\n\t\t\t\tthis._handlePreviousVersionClick();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (isCtrlOrCmd && isShift && keyboardEvent.key.toLowerCase() === \"y\") {\n\t\t\t\tkeyboardEvent.preventDefault();\n\t\t\t\tthis._handleNextVersionClick();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Overrides the parent's onAfterRendering to add keydown handler.\n\t * @private\n\t */\n\tonAfterRendering() {\n\t\tsuper.onAfterRendering();\n\n\t\t// Add keydown event listener to the textarea\n\t\tconst textarea = this.shadowRoot?.querySelector(\"textarea\");\n\t\tif (textarea && !this._keydownHandler) {\n\t\t\tthis._keydownHandler = this._handleKeydown.bind(this);\n\t\t\ttextarea.addEventListener(\"keydown\", this._keydownHandler);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the generate click event from the AI toolbar.\n\t * Opens the AI menu and sets the opener element.\n\t *\n\t * @private\n\t */\n\t_handleAIButtonClick = (e: CustomEvent<{ clickTarget?: HTMLElement }>) => {\n\t\tconst menuNodes = this.getSlottedNodes(\"menu\");\n\t\tif (menuNodes.length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tif (!e.detail?.clickTarget) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menu = menuNodes[0] as HTMLElement & { opener?: HTMLElement; open?: boolean };\n\t\tif (menu && typeof menu.open !== \"undefined\") {\n\t\t\tmenu.opener = e.detail.clickTarget;\n\t\t\tmenu.open = true;\n\t\t}\n\t}\n\tget _ariaLabel() {\n\t\treturn this.accessibleName || AITextArea.i18nBundle.getText(WRITING_ASSISTANT_LABEL);\n\t}\n\n\t/**\n\t * Handles the stop generation event from the AI toolbar.\n\t * Fires the stop-generation event to notify listeners.\n\t *\n\t * @private\n\t */\n\thandleStopGeneration = () => {\n\t\tthis.fireDecoratorEvent(\"stop-generation\");\n\t}\n}\n\nAITextArea.define();\n\nexport default AITextArea;\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
+
import WritingAssistant from "./WritingAssistant.js";
|
|
3
|
+
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
|
|
4
|
+
import TextAreaPopoverTemplate from "@ui5/webcomponents/dist/TextAreaPopoverTemplate.js";
|
|
5
|
+
export default function TextAreaTemplate() {
|
|
6
|
+
return (_jsxs("div", { class: "ui5-ai-textarea-root", children: [_jsxs("div", { class: this.classes.root, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, children: [_jsxs("div", { class: "ui5-textarea-wrapper", children: [this.growing &&
|
|
7
|
+
_jsx("div", { id: `${this._id}-mirror`, class: "ui5-textarea-mirror", "aria-hidden": "true", children: this._mirrorText.map(mirrorText => {
|
|
8
|
+
return (_jsxs(_Fragment, { children: [mirrorText.text, _jsx("br", {})] }));
|
|
9
|
+
}) }), _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, active: this.loading, class: "ui5-textarea-busy-indicator", children: _jsx("textarea", { id: `${this._id}-inner`, class: "ui5-textarea-inner", part: "textarea", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this._ariaLabel, "aria-describedby": this.ariaDescribedBy, "aria-invalid": this._ariaInvalid, "aria-required": this.required, maxlength: this._exceededTextProps.calcedMaxLength, value: this.value, "data-sap-focus-ref": true, onInput: this._oninput, onChange: this._onchange, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onSelect: this._onselect, onScroll: this._onscroll }) }), _jsx("div", { part: "footer", children: _jsx("slot", { name: "footer", children: _jsx(WritingAssistant, { loading: this.loading, currentVersionIndex: this.currentVersionIndex, totalVersions: this.totalVersions, actionText: this.actionText, onButtonClick: this._handleAIButtonClick, onStopGeneration: this.handleStopGeneration, onVersionChange: this._handleVersionChange }) }) })] }), this.showExceededText &&
|
|
10
|
+
_jsx("span", { class: "ui5-textarea-exceeded-text", children: this._exceededTextProps.exceededText }), this.hasValueState &&
|
|
11
|
+
_jsx("span", { id: `${this._id}-valueStateDesc`, class: "ui5-hidden-text", children: this.ariaValueStateHiddenText })] }), TextAreaPopoverTemplate.call(this), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", class: "ui5-hidden-text", children: this.loading ? this.actionText : "" }), _jsx("div", { id: "ai-menu-wrapper", children: _jsx("slot", { name: "menu" }) })] }));
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=TextAreaTemplate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextAreaTemplate.js","sourceRoot":"","sources":["../src/TextAreaTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,uBAAuB,MAAM,oDAAoD,CAAC;AAEzF,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,eAAK,KAAK,EAAC,sBAAsB,aAChC,eACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,aAE5B,eAAK,KAAK,EAAC,sBAAsB,aAC/B,IAAI,CAAC,OAAO;gCACb,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAC,qBAAqB,iBAAa,MAAM,YAC3E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;wCAClC,OAAO,CACN,8BACE,UAAU,CAAC,IAAI,EAChB,cAAM,IACJ,CACH,CAAC;oCACH,CAAC,CAAC,GACG,EAEN,KAAC,aAAa,IACb,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,6BAA6B,YAEnC,mBACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,UAAU,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,sBACT,IAAI,CAAC,eAAe,kBACxB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,QAAQ,EAC5B,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,eAAe,EAClD,KAAK,EAAE,IAAI,CAAC,KAAK,8BAEjB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,QAAQ,EAAE,IAAI,CAAC,SAAS,GACd,GACI,EAChB,cAAK,IAAI,EAAC,QAAQ,YACjB,eAAM,IAAI,EAAC,QAAQ,YAClB,KAAC,gBAAgB,IAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,oBAAoB,EACxC,gBAAgB,EAAE,IAAI,CAAC,oBAAoB,EAC3C,eAAe,EAAE,IAAI,CAAC,oBAAoB,GACzC,GACI,GACF,IACD,EAEL,IAAI,CAAC,gBAAgB;wBACtB,eAAM,KAAK,EAAC,4BAA4B,YAAE,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAQ,EAGrF,IAAI,CAAC,aAAa;wBACnB,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,iBAAiB,EAAE,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,wBAAwB,GAAQ,IAEjG,EAEL,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EAGnC,2BAAe,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAC,iBAAiB,YAChE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAC/B,EAEN,cAAK,EAAE,EAAC,iBAAiB,YACxB,eAAM,IAAI,EAAC,MAAM,GAAQ,GACpB,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type AITextArea from \"./TextArea.js\";\nimport WritingAssistant from \"./WritingAssistant.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport TextAreaPopoverTemplate from \"@ui5/webcomponents/dist/TextAreaPopoverTemplate.js\";\n\nexport default function TextAreaTemplate(this: AITextArea) {\n\treturn (\n\t\t<div class=\"ui5-ai-textarea-root\">\n\t\t\t<div\n\t\t\t\tclass={this.classes.root}\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-textarea-wrapper\">\n\t\t\t\t\t{this.growing &&\n\t\t\t\t\t<div id={`${this._id}-mirror`} class=\"ui5-textarea-mirror\" aria-hidden=\"true\">\n\t\t\t\t\t\t{this._mirrorText.map(mirrorText => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{mirrorText.text}\n\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t}\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-textarea-busy-indicator\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tid={`${this._id}-inner`}\n\t\t\t\t\t\t\tclass=\"ui5-textarea-inner\"\n\t\t\t\t\t\t\tpart=\"textarea\"\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\t\taria-label={this._ariaLabel}\n\t\t\t\t\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\t\t\t\t\taria-invalid={this._ariaInvalid}\n\t\t\t\t\t\t\taria-required={this.required}\n\t\t\t\t\t\t\tmaxlength={this._exceededTextProps.calcedMaxLength}\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\t\tonInput={this._oninput}\n\t\t\t\t\t\t\tonChange={this._onchange}\n\t\t\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\t\tonSelect={this._onselect}\n\t\t\t\t\t\t\tonScroll={this._onscroll}>\n\t\t\t\t\t\t</textarea>\n\t\t\t\t\t</BusyIndicator>\n\t\t\t\t\t<div part=\"footer\">\n\t\t\t\t\t\t<slot name=\"footer\">\n\t\t\t\t\t\t\t<WritingAssistant\n\t\t\t\t\t\t\t\tloading={this.loading}\n\t\t\t\t\t\t\t\tcurrentVersionIndex={this.currentVersionIndex}\n\t\t\t\t\t\t\t\ttotalVersions={this.totalVersions}\n\t\t\t\t\t\t\t\tactionText={this.actionText}\n\t\t\t\t\t\t\t\tonButtonClick={this._handleAIButtonClick}\n\t\t\t\t\t\t\t\tonStopGeneration={this.handleStopGeneration}\n\t\t\t\t\t\t\t\tonVersionChange={this._handleVersionChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{this.showExceededText &&\n\t\t\t\t<span class=\"ui5-textarea-exceeded-text\">{this._exceededTextProps.exceededText}</span>\n\t\t\t\t}\n\n\t\t\t\t{this.hasValueState &&\n\t\t\t\t<span id={`${this._id}-valueStateDesc`} class=\"ui5-hidden-text\">{this.ariaValueStateHiddenText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{TextAreaPopoverTemplate.call(this)}\n\n\t\t\t{/* ARIA live region for screen readers */}\n\t\t\t<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ui5-hidden-text\">\n\t\t\t\t{this.loading ? this.actionText : \"\"}\n\t\t\t</div>\n\n\t\t\t<div id=\"ai-menu-wrapper\">\n\t\t\t\t<slot name=\"menu\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import ToolbarItem from "@ui5/webcomponents/dist/ToolbarItem.js";
|
|
2
|
+
/**
|
|
3
|
+
* @class
|
|
4
|
+
*
|
|
5
|
+
* ### Overview
|
|
6
|
+
* The `ui5-ai-toolbar-label` represents a text label,
|
|
7
|
+
* used in the `ui5-toolbar`.
|
|
8
|
+
*
|
|
9
|
+
* ### ES6 Module Import
|
|
10
|
+
* `import "@ui5/webcomponents-ai/dist/ToolbarLabel.js";`
|
|
11
|
+
* @constructor
|
|
12
|
+
* @extends ToolbarItem
|
|
13
|
+
* @private
|
|
14
|
+
* @since 1.0.0-rc.1
|
|
15
|
+
*/
|
|
16
|
+
declare class ToolbarLabel extends ToolbarItem {
|
|
17
|
+
/**
|
|
18
|
+
* Defines the text of the label.
|
|
19
|
+
* @default ""
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
text: string;
|
|
23
|
+
/**
|
|
24
|
+
* @override
|
|
25
|
+
* ToolbarLabel is not interactive.
|
|
26
|
+
*/
|
|
27
|
+
get isInteractive(): boolean;
|
|
28
|
+
/**
|
|
29
|
+
* @override
|
|
30
|
+
*/
|
|
31
|
+
get classes(): {
|
|
32
|
+
root: {
|
|
33
|
+
"ui5-ai-tb-label": boolean;
|
|
34
|
+
"ui5-tb-popover-item": boolean;
|
|
35
|
+
"ui5-tb-item": boolean;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
export default ToolbarLabel;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
8
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
9
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
10
|
+
import ToolbarItem from "@ui5/webcomponents/dist/ToolbarItem.js";
|
|
11
|
+
import ToolbarLabelTemplate from "./ToolbarLabelTemplate.js";
|
|
12
|
+
/**
|
|
13
|
+
* @class
|
|
14
|
+
*
|
|
15
|
+
* ### Overview
|
|
16
|
+
* The `ui5-ai-toolbar-label` represents a text label,
|
|
17
|
+
* used in the `ui5-toolbar`.
|
|
18
|
+
*
|
|
19
|
+
* ### ES6 Module Import
|
|
20
|
+
* `import "@ui5/webcomponents-ai/dist/ToolbarLabel.js";`
|
|
21
|
+
* @constructor
|
|
22
|
+
* @extends ToolbarItem
|
|
23
|
+
* @private
|
|
24
|
+
* @since 1.0.0-rc.1
|
|
25
|
+
*/
|
|
26
|
+
let ToolbarLabel = class ToolbarLabel extends ToolbarItem {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
/**
|
|
30
|
+
* Defines the text of the label.
|
|
31
|
+
* @default ""
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
this.text = "";
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* @override
|
|
38
|
+
* ToolbarLabel is not interactive.
|
|
39
|
+
*/
|
|
40
|
+
get isInteractive() {
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* @override
|
|
45
|
+
*/
|
|
46
|
+
get classes() {
|
|
47
|
+
return {
|
|
48
|
+
root: {
|
|
49
|
+
...super.classes.root,
|
|
50
|
+
"ui5-ai-tb-label": true,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
__decorate([
|
|
56
|
+
property()
|
|
57
|
+
], ToolbarLabel.prototype, "text", void 0);
|
|
58
|
+
ToolbarLabel = __decorate([
|
|
59
|
+
customElement({
|
|
60
|
+
tag: "ui5-ai-toolbar-label",
|
|
61
|
+
template: ToolbarLabelTemplate,
|
|
62
|
+
renderer: jsxRenderer,
|
|
63
|
+
})
|
|
64
|
+
], ToolbarLabel);
|
|
65
|
+
ToolbarLabel.define();
|
|
66
|
+
export default ToolbarLabel;
|
|
67
|
+
//# sourceMappingURL=ToolbarLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarLabel.js","sourceRoot":"","sources":["../src/ToolbarLabel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AAMH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QACC;;;;WAIG;QAEH,SAAI,GAAG,EAAE,CAAC;IAqBX,CAAC;IAnBA;;;OAGG;IACH,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI;gBACrB,iBAAiB,EAAE,IAAI;aACvB;SACD,CAAC;IACH,CAAC;CACD,CAAA;AArBA;IADC,QAAQ,EAAE;0CACD;AAPL,YAAY;IALjB,aAAa,CAAC;QACd,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,WAAW;KACrB,CAAC;GACI,YAAY,CA4BjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\nimport ToolbarItem from \"@ui5/webcomponents/dist/ToolbarItem.js\";\nimport ToolbarLabelTemplate from \"./ToolbarLabelTemplate.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-ai-toolbar-label` represents a text label,\n * used in the `ui5-toolbar`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-ai/dist/ToolbarLabel.js\";`\n * @constructor\n * @extends ToolbarItem\n * @private\n * @since 1.0.0-rc.1\n */\n@customElement({\n\ttag: \"ui5-ai-toolbar-label\",\n\ttemplate: ToolbarLabelTemplate,\n\trenderer: jsxRenderer,\n})\nclass ToolbarLabel extends ToolbarItem {\n\t/**\n\t * Defines the text of the label.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext = \"\";\n\n\t/**\n\t * @override\n\t * ToolbarLabel is not interactive.\n\t */\n\tget isInteractive(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * @override\n\t */\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t...super.classes.root,\n\t\t\t\t\"ui5-ai-tb-label\": true,\n\t\t\t},\n\t\t};\n\t}\n}\n\nToolbarLabel.define();\n\nexport default ToolbarLabel;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarLabelTemplate.js","sourceRoot":"","sources":["../src/ToolbarLabelTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,eAAM,KAAK,EAAC,sBAAsB,YAChC,IAAI,CAAC,IAAI,GACJ,CACP,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarLabel from \"./ToolbarLabel.js\";\n\nexport default function ToolbarLabelTemplate(this: ToolbarLabel) {\n\treturn (\n\t\t<span class=\"ui5-ai-toolbar-label\">\n\t\t\t{this.text}\n\t\t</span>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import ToolbarItem from "@ui5/webcomponents/dist/ToolbarItem.js";
|
|
2
|
+
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
3
|
+
import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
|
|
4
|
+
import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
|
|
5
|
+
declare enum LastClickedButton {
|
|
6
|
+
None = "",
|
|
7
|
+
Previous = "previous",
|
|
8
|
+
Next = "next"
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* @class
|
|
12
|
+
*
|
|
13
|
+
* ### Overview
|
|
14
|
+
*
|
|
15
|
+
* The `ui5-ai-versioning` component provides navigation controls for AI-generated content versions.
|
|
16
|
+
* It displays the current version index and total versions, with previous/next navigation buttons.
|
|
17
|
+
* This component extends ToolbarItem to participate in toolbar overflow behavior as a single unit.
|
|
18
|
+
*
|
|
19
|
+
* ### Structure
|
|
20
|
+
* The `ui5-ai-versioning` consists of the following elements:
|
|
21
|
+
* - Previous Button: Navigates to the previous version (disabled when at first version)
|
|
22
|
+
* - Version Counter: Shows current version / total versions (e.g., "2 / 5")
|
|
23
|
+
* - Next Button: Navigates to the nex
|
|
24
|
+
* t version (disabled when at last version)
|
|
25
|
+
*
|
|
26
|
+
* ### Focus Management
|
|
27
|
+
* The component automatically manages focus when users reach version boundaries,
|
|
28
|
+
* moving focus to the available navigation button when one becomes disabled.
|
|
29
|
+
*
|
|
30
|
+
* ### Responsive Behavior
|
|
31
|
+
* When used in a toolbar, the entire versioning component (buttons + label) will overflow
|
|
32
|
+
* together as a single unit when there is insufficient space.
|
|
33
|
+
*
|
|
34
|
+
* ### ES6 Module Import
|
|
35
|
+
*
|
|
36
|
+
* `import "@ui5/webcomponents-ai/dist/Versioning.js";`
|
|
37
|
+
*
|
|
38
|
+
* @constructor
|
|
39
|
+
* @extends ToolbarItem
|
|
40
|
+
* @since 1.0.0-rc.1
|
|
41
|
+
* @private
|
|
42
|
+
*/
|
|
43
|
+
declare class Versioning extends ToolbarItem {
|
|
44
|
+
eventDetails: ToolbarItem["eventDetails"] & {
|
|
45
|
+
"version-change": {
|
|
46
|
+
backwards: boolean;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
50
|
+
* Indicates the index of the currently displayed result version.
|
|
51
|
+
*
|
|
52
|
+
* This property represents the current position in the version history.
|
|
53
|
+
* @default 0
|
|
54
|
+
* @public
|
|
55
|
+
*/
|
|
56
|
+
currentStep: number;
|
|
57
|
+
/**
|
|
58
|
+
* The total number of available result versions.
|
|
59
|
+
*
|
|
60
|
+
* Note: Versioning is hidden if the value is `0`.
|
|
61
|
+
*
|
|
62
|
+
* @default 0
|
|
63
|
+
* @public
|
|
64
|
+
* @since 1.0.0-rc.1
|
|
65
|
+
*/
|
|
66
|
+
totalSteps: number;
|
|
67
|
+
_previousCurrentStep: number;
|
|
68
|
+
_previousTotalSteps: number;
|
|
69
|
+
_lastClickedButton: LastClickedButton;
|
|
70
|
+
static i18nBundle: I18nBundle;
|
|
71
|
+
static onDefine(): Promise<void>;
|
|
72
|
+
onAfterRendering(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Manages focus when navigation buttons become disabled/enabled.
|
|
75
|
+
* Automatically moves focus to available button when user reaches boundaries.
|
|
76
|
+
* @private
|
|
77
|
+
*/
|
|
78
|
+
_manageFocus(): void;
|
|
79
|
+
handlePreviousVersionClick(): void;
|
|
80
|
+
handleNextVersionClick(): void;
|
|
81
|
+
get _previousButtonAccessibleName(): string;
|
|
82
|
+
get _nextButtonAccessibleName(): string;
|
|
83
|
+
get _previousButtonTooltip(): string;
|
|
84
|
+
get _nextButtonTooltip(): string;
|
|
85
|
+
/**
|
|
86
|
+
* @override
|
|
87
|
+
*/
|
|
88
|
+
get classes(): {
|
|
89
|
+
root: {
|
|
90
|
+
"ui5-ai-versioning": boolean;
|
|
91
|
+
"ui5-tb-popover-item": boolean;
|
|
92
|
+
"ui5-tb-item": boolean;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
export default Versioning;
|