@fundamental-ngx/ui5-webcomponents-ai 0.58.0-rc.63 → 0.58.0-rc.65
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/README.md +70 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,3 +1,72 @@
|
|
|
1
1
|
# ui5-webcomponents-ai
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular component wrappers around the [@ui5/webcomponents-ai](https://www.npmjs.com/package/@ui5/webcomponents-ai) npm package.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This library provides Angular components that wrap UI5 AI Web Components, bringing AI-powered UI elements to your Angular applications. These components integrate AI features like prompt inputs and AI-enhanced buttons with Angular's change detection and template syntax.
|
|
8
|
+
|
|
9
|
+
- Angular-friendly API (inputs, outputs, template syntax)
|
|
10
|
+
- TypeScript type definitions
|
|
11
|
+
- Full integration with Angular's change detection
|
|
12
|
+
- Standalone components support
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @fundamental-ngx/ui5-webcomponents-ai
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
Import the AI components you need:
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { Button } from '@fundamental-ngx/ui5-webcomponents-ai/button';
|
|
26
|
+
import { PromptInput } from '@fundamental-ngx/ui5-webcomponents-ai/prompt-input';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
selector: 'app-example',
|
|
30
|
+
standalone: true,
|
|
31
|
+
imports: [Button, PromptInput],
|
|
32
|
+
template: `
|
|
33
|
+
<ui5-ai-button (click)="handleAIAction()">AI Action</ui5-ai-button>
|
|
34
|
+
<ui5-prompt-input [(value)]="prompt"></ui5-prompt-input>
|
|
35
|
+
`
|
|
36
|
+
})
|
|
37
|
+
export class ExampleComponent {
|
|
38
|
+
prompt = '';
|
|
39
|
+
|
|
40
|
+
handleAIAction() {
|
|
41
|
+
console.log('AI button clicked!');
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Using Angular Components Inside UI5 Components
|
|
47
|
+
|
|
48
|
+
Angular components often use selectors with hyphens (e.g. `<app-item>`, `<app-value>`).
|
|
49
|
+
UI5 interprets such tags as custom elements and may wait **up to 1 second** for their registration, causing delayed rendering inside components like `<ui5-table-cell>`.
|
|
50
|
+
|
|
51
|
+
To avoid this, configure UI5 to ignore Angular component prefixes:
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
// ui5-init.ts
|
|
55
|
+
import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
|
|
56
|
+
|
|
57
|
+
ignoreCustomElements('app-');
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Import it before Angular bootstraps:
|
|
61
|
+
```ts
|
|
62
|
+
// main.ts
|
|
63
|
+
import './ui5-init';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
This prevents unnecessary waiting, ensures smooth rendering, and improves performance when mixing Angular components with UI5 Web Components.
|
|
67
|
+
|
|
68
|
+
## Resources
|
|
69
|
+
|
|
70
|
+
- [UI5 Web Components Documentation](https://ui5.github.io/webcomponents/)
|
|
71
|
+
- [Fundamental NGX Documentation](https://sap.github.io/fundamental-ngx)
|
|
72
|
+
- [GitHub Repository](https://github.com/SAP/fundamental-ngx)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-ngx/ui5-webcomponents-ai",
|
|
3
|
-
"version": "0.58.0-rc.
|
|
3
|
+
"version": "0.58.0-rc.65",
|
|
4
4
|
"schematics": "./schematics/collection.json",
|
|
5
5
|
"description": "Fundamental Library for Angular - UI5 Webcomponents AI",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@angular/forms": "^20.0.0",
|
|
21
21
|
"@angular/platform-browser": "^20.0.0",
|
|
22
22
|
"@angular/router": "^20.0.0",
|
|
23
|
-
"@fundamental-ngx/ui5-webcomponents": "0.58.0-rc.
|
|
23
|
+
"@fundamental-ngx/ui5-webcomponents": "0.58.0-rc.65",
|
|
24
24
|
"fundamental-styles": "0.40.1",
|
|
25
25
|
"rxjs": "^7.8.0"
|
|
26
26
|
},
|
|
@@ -44,14 +44,14 @@
|
|
|
44
44
|
"types": "./index.d.ts",
|
|
45
45
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-ai.mjs"
|
|
46
46
|
},
|
|
47
|
-
"./button": {
|
|
48
|
-
"types": "./button/index.d.ts",
|
|
49
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-ai-button.mjs"
|
|
50
|
-
},
|
|
51
47
|
"./button-state": {
|
|
52
48
|
"types": "./button-state/index.d.ts",
|
|
53
49
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-ai-button-state.mjs"
|
|
54
50
|
},
|
|
51
|
+
"./button": {
|
|
52
|
+
"types": "./button/index.d.ts",
|
|
53
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-ai-button.mjs"
|
|
54
|
+
},
|
|
55
55
|
"./input": {
|
|
56
56
|
"types": "./input/index.d.ts",
|
|
57
57
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-ai-input.mjs"
|