@fundamental-ngx/ui5-webcomponents-fiori 0.58.0-rc.64 → 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 +75 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,77 @@
|
|
|
1
1
|
# ui5-webcomponents-fiori
|
|
2
2
|
|
|
3
|
-
ui5-
|
|
3
|
+
Angular component wrappers around the [@ui5/webcomponents-fiori](https://www.npmjs.com/package/@ui5/webcomponents-fiori) npm package.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This library provides Angular components that wrap UI5 Fiori Web Components, enabling you to build SAP Fiori-compliant applications with Angular. These components include higher-level patterns and layouts specific to enterprise applications.
|
|
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
|
+
- SAP Fiori design guidelines compliance
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @fundamental-ngx/ui5-webcomponents-fiori
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
Import the Fiori components you need:
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { ShellBar } from '@fundamental-ngx/ui5-webcomponents-fiori/shell-bar';
|
|
27
|
+
import { DynamicPage } from '@fundamental-ngx/ui5-webcomponents-fiori/dynamic-page';
|
|
28
|
+
import { Timeline } from '@fundamental-ngx/ui5-webcomponents-fiori/timeline';
|
|
29
|
+
|
|
30
|
+
@Component({
|
|
31
|
+
selector: 'app-example',
|
|
32
|
+
standalone: true,
|
|
33
|
+
imports: [ShellBar, DynamicPage, Timeline],
|
|
34
|
+
template: `
|
|
35
|
+
<ui5-shellbar
|
|
36
|
+
primary-title="My App"
|
|
37
|
+
(profile-click)="handleProfile()">
|
|
38
|
+
</ui5-shellbar>
|
|
39
|
+
<ui5-dynamic-page>
|
|
40
|
+
<!-- Page content -->
|
|
41
|
+
</ui5-dynamic-page>
|
|
42
|
+
`
|
|
43
|
+
})
|
|
44
|
+
export class ExampleComponent {
|
|
45
|
+
handleProfile() {
|
|
46
|
+
console.log('Profile clicked!');
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Using Angular Components Inside UI5 Components
|
|
52
|
+
|
|
53
|
+
Angular components often use selectors with hyphens (e.g. `<app-item>`, `<app-value>`).
|
|
54
|
+
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>`.
|
|
55
|
+
|
|
56
|
+
To avoid this, configure UI5 to ignore Angular component prefixes:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
// ui5-init.ts
|
|
60
|
+
import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
|
|
61
|
+
|
|
62
|
+
ignoreCustomElements('app-');
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Import it before Angular bootstraps:
|
|
66
|
+
```ts
|
|
67
|
+
// main.ts
|
|
68
|
+
import './ui5-init';
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
This prevents unnecessary waiting, ensures smooth rendering, and improves performance when mixing Angular components with UI5 Web Components.
|
|
72
|
+
|
|
73
|
+
## Resources
|
|
74
|
+
|
|
75
|
+
- [UI5 Web Components Documentation](https://ui5.github.io/webcomponents/)
|
|
76
|
+
- [Fundamental NGX Documentation](https://sap.github.io/fundamental-ngx)
|
|
77
|
+
- [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-fiori",
|
|
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 Fiori",
|
|
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
|
},
|