@fundamental-ngx/ui5-webcomponents 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 +43 -43
package/README.md
CHANGED
|
@@ -1,3 +1,72 @@
|
|
|
1
1
|
# ui5-webcomponents
|
|
2
2
|
|
|
3
|
-
ui5
|
|
3
|
+
Angular component wrappers around the [@ui5/webcomponents](https://www.npmjs.com/package/@ui5/webcomponents) npm package.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This library provides Angular components that wrap UI5 Web Components, allowing you to use UI5's powerful web components seamlessly within your Angular applications. Each Angular component corresponds to a UI5 Web Component and provides:
|
|
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
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
Import the components you need directly:
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
|
|
26
|
+
import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
selector: 'app-example',
|
|
30
|
+
standalone: true,
|
|
31
|
+
imports: [Button, Input],
|
|
32
|
+
template: `
|
|
33
|
+
<ui5-button (click)="handleClick()">Click Me</ui5-button>
|
|
34
|
+
<ui5-input [(value)]="inputValue"></ui5-input>
|
|
35
|
+
`
|
|
36
|
+
})
|
|
37
|
+
export class ExampleComponent {
|
|
38
|
+
inputValue = '';
|
|
39
|
+
|
|
40
|
+
handleClick() {
|
|
41
|
+
console.log('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",
|
|
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 Base",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
"types": "./avatar/index.d.ts",
|
|
48
48
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs"
|
|
49
49
|
},
|
|
50
|
-
"./avatar-group": {
|
|
51
|
-
"types": "./avatar-group/index.d.ts",
|
|
52
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs"
|
|
53
|
-
},
|
|
54
50
|
"./bar": {
|
|
55
51
|
"types": "./bar/index.d.ts",
|
|
56
52
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs"
|
|
57
53
|
},
|
|
54
|
+
"./avatar-group": {
|
|
55
|
+
"types": "./avatar-group/index.d.ts",
|
|
56
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs"
|
|
57
|
+
},
|
|
58
58
|
"./breadcrumbs": {
|
|
59
59
|
"types": "./breadcrumbs/index.d.ts",
|
|
60
60
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs"
|
|
@@ -115,30 +115,30 @@
|
|
|
115
115
|
"types": "./color-palette/index.d.ts",
|
|
116
116
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-palette.mjs"
|
|
117
117
|
},
|
|
118
|
-
"./color-palette-item": {
|
|
119
|
-
"types": "./color-palette-item/index.d.ts",
|
|
120
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-item.mjs"
|
|
121
|
-
},
|
|
122
118
|
"./color-palette-popover": {
|
|
123
119
|
"types": "./color-palette-popover/index.d.ts",
|
|
124
120
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-popover.mjs"
|
|
125
121
|
},
|
|
126
|
-
"./color-
|
|
127
|
-
"types": "./color-
|
|
128
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-
|
|
122
|
+
"./color-palette-item": {
|
|
123
|
+
"types": "./color-palette-item/index.d.ts",
|
|
124
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-palette-item.mjs"
|
|
129
125
|
},
|
|
130
126
|
"./combo-box": {
|
|
131
127
|
"types": "./combo-box/index.d.ts",
|
|
132
128
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-combo-box.mjs"
|
|
133
129
|
},
|
|
134
|
-
"./
|
|
135
|
-
"types": "./
|
|
136
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-
|
|
130
|
+
"./color-picker": {
|
|
131
|
+
"types": "./color-picker/index.d.ts",
|
|
132
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-color-picker.mjs"
|
|
137
133
|
},
|
|
138
134
|
"./combo-box-item-group": {
|
|
139
135
|
"types": "./combo-box-item-group/index.d.ts",
|
|
140
136
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-group.mjs"
|
|
141
137
|
},
|
|
138
|
+
"./combo-box-item": {
|
|
139
|
+
"types": "./combo-box-item/index.d.ts",
|
|
140
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item.mjs"
|
|
141
|
+
},
|
|
142
142
|
"./date-picker": {
|
|
143
143
|
"types": "./date-picker/index.d.ts",
|
|
144
144
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-date-picker.mjs"
|
|
@@ -155,10 +155,6 @@
|
|
|
155
155
|
"types": "./dialog/index.d.ts",
|
|
156
156
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-dialog.mjs"
|
|
157
157
|
},
|
|
158
|
-
"./dynamic-date-range": {
|
|
159
|
-
"types": "./dynamic-date-range/index.d.ts",
|
|
160
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs"
|
|
161
|
-
},
|
|
162
158
|
"./expandable-text": {
|
|
163
159
|
"types": "./expandable-text/index.d.ts",
|
|
164
160
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-expandable-text.mjs"
|
|
@@ -167,13 +163,17 @@
|
|
|
167
163
|
"types": "./file-uploader/index.d.ts",
|
|
168
164
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-file-uploader.mjs"
|
|
169
165
|
},
|
|
166
|
+
"./form-group": {
|
|
167
|
+
"types": "./form-group/index.d.ts",
|
|
168
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-form-group.mjs"
|
|
169
|
+
},
|
|
170
170
|
"./form": {
|
|
171
171
|
"types": "./form/index.d.ts",
|
|
172
172
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-form.mjs"
|
|
173
173
|
},
|
|
174
|
-
"./
|
|
175
|
-
"types": "./
|
|
176
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-
|
|
174
|
+
"./dynamic-date-range": {
|
|
175
|
+
"types": "./dynamic-date-range/index.d.ts",
|
|
176
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs"
|
|
177
177
|
},
|
|
178
178
|
"./form-item": {
|
|
179
179
|
"types": "./form-item/index.d.ts",
|
|
@@ -211,25 +211,29 @@
|
|
|
211
211
|
"types": "./list-item-standard/index.d.ts",
|
|
212
212
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-list-item-standard.mjs"
|
|
213
213
|
},
|
|
214
|
-
"./menu": {
|
|
215
|
-
"types": "./menu/index.d.ts",
|
|
216
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-menu.mjs"
|
|
217
|
-
},
|
|
218
214
|
"./menu-item": {
|
|
219
215
|
"types": "./menu-item/index.d.ts",
|
|
220
216
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-menu-item.mjs"
|
|
221
217
|
},
|
|
218
|
+
"./menu": {
|
|
219
|
+
"types": "./menu/index.d.ts",
|
|
220
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-menu.mjs"
|
|
221
|
+
},
|
|
222
222
|
"./menu-item-group": {
|
|
223
223
|
"types": "./menu-item-group/index.d.ts",
|
|
224
224
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-menu-item-group.mjs"
|
|
225
225
|
},
|
|
226
|
+
"./message-strip": {
|
|
227
|
+
"types": "./message-strip/index.d.ts",
|
|
228
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-message-strip.mjs"
|
|
229
|
+
},
|
|
226
230
|
"./menu-separator": {
|
|
227
231
|
"types": "./menu-separator/index.d.ts",
|
|
228
232
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs"
|
|
229
233
|
},
|
|
230
|
-
"./
|
|
231
|
-
"types": "./
|
|
232
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-
|
|
234
|
+
"./multi-combo-box-item-group": {
|
|
235
|
+
"types": "./multi-combo-box-item-group/index.d.ts",
|
|
236
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-group.mjs"
|
|
233
237
|
},
|
|
234
238
|
"./multi-combo-box": {
|
|
235
239
|
"types": "./multi-combo-box/index.d.ts",
|
|
@@ -239,9 +243,9 @@
|
|
|
239
243
|
"types": "./multi-combo-box-item/index.d.ts",
|
|
240
244
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item.mjs"
|
|
241
245
|
},
|
|
242
|
-
"./
|
|
243
|
-
"types": "./
|
|
244
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-
|
|
246
|
+
"./option-custom": {
|
|
247
|
+
"types": "./option-custom/index.d.ts",
|
|
248
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-option-custom.mjs"
|
|
245
249
|
},
|
|
246
250
|
"./multi-input": {
|
|
247
251
|
"types": "./multi-input/index.d.ts",
|
|
@@ -251,18 +255,14 @@
|
|
|
251
255
|
"types": "./option/index.d.ts",
|
|
252
256
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-option.mjs"
|
|
253
257
|
},
|
|
254
|
-
"./
|
|
255
|
-
"types": "./
|
|
256
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-
|
|
258
|
+
"./popover": {
|
|
259
|
+
"types": "./popover/index.d.ts",
|
|
260
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-popover.mjs"
|
|
257
261
|
},
|
|
258
262
|
"./panel": {
|
|
259
263
|
"types": "./panel/index.d.ts",
|
|
260
264
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-panel.mjs"
|
|
261
265
|
},
|
|
262
|
-
"./popover": {
|
|
263
|
-
"types": "./popover/index.d.ts",
|
|
264
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-popover.mjs"
|
|
265
|
-
},
|
|
266
266
|
"./progress-indicator": {
|
|
267
267
|
"types": "./progress-indicator/index.d.ts",
|
|
268
268
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-progress-indicator.mjs"
|
|
@@ -279,14 +279,14 @@
|
|
|
279
279
|
"types": "./rating-indicator/index.d.ts",
|
|
280
280
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-rating-indicator.mjs"
|
|
281
281
|
},
|
|
282
|
-
"./responsive-popover": {
|
|
283
|
-
"types": "./responsive-popover/index.d.ts",
|
|
284
|
-
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-responsive-popover.mjs"
|
|
285
|
-
},
|
|
286
282
|
"./segmented-button": {
|
|
287
283
|
"types": "./segmented-button/index.d.ts",
|
|
288
284
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button.mjs"
|
|
289
285
|
},
|
|
286
|
+
"./responsive-popover": {
|
|
287
|
+
"types": "./responsive-popover/index.d.ts",
|
|
288
|
+
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-responsive-popover.mjs"
|
|
289
|
+
},
|
|
290
290
|
"./segmented-button-item": {
|
|
291
291
|
"types": "./segmented-button-item/index.d.ts",
|
|
292
292
|
"default": "./fesm2022/fundamental-ngx-ui5-webcomponents-segmented-button-item.mjs"
|