@beeq/angular 1.8.0-beta.10 → 1.8.0-beta.11
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 +32 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,24 +4,18 @@ An Angular-specific wrapper on top of BEEQ web components that enables NG_VALUE_
|
|
|
4
4
|
|
|
5
5
|
## Package installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
npm install @beeq/angular
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
- update the package
|
|
7
|
+
> [!TIP]
|
|
8
|
+
> Please always refer to the [official BEEQ documentation](https://www.beeq.design/3d466e231/p/359a26-for-developers/b/08eb89) for more information about the installation.
|
|
14
9
|
|
|
15
|
-
|
|
16
|
-
npm install @beeq/angular@latest
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
if the `@beeq/core` package is added to your `package.json` should update both
|
|
10
|
+
- install the package
|
|
20
11
|
|
|
21
12
|
```
|
|
22
13
|
npm install @beeq/{core,angular}
|
|
23
14
|
```
|
|
24
15
|
|
|
16
|
+
> [!NOTE]
|
|
17
|
+
> Make sure that you have installed the `@beeq/core` package.
|
|
18
|
+
|
|
25
19
|
## Setup
|
|
26
20
|
|
|
27
21
|
### Call `defineCustomElements`
|
|
@@ -43,7 +37,10 @@ applyPolyfills().then(() => {
|
|
|
43
37
|
|
|
44
38
|
### Add BEEQ styles and assets
|
|
45
39
|
|
|
46
|
-
>
|
|
40
|
+
> [!TIP]
|
|
41
|
+
> BEEQ uses SVG icons and these assets are shipped in a separate folder. You can use the `setBasePath` method to set the path to the icons. Make sure that your project bundle the icons in a way that they are accessible from the browser.
|
|
42
|
+
|
|
43
|
+
You can move the icons from the node_modules folder to your assets folder and set the path like this:
|
|
47
44
|
|
|
48
45
|
```json
|
|
49
46
|
/** angular.json */
|
|
@@ -65,7 +62,7 @@ applyPolyfills().then(() => {
|
|
|
65
62
|
{
|
|
66
63
|
"glob": "**/*",
|
|
67
64
|
"input": "node_modules/@beeq/core/dist/beeq/svg",
|
|
68
|
-
"output": "/svg/"
|
|
65
|
+
"output": "assets/svg/"
|
|
69
66
|
}
|
|
70
67
|
],
|
|
71
68
|
"styles": [
|
|
@@ -81,6 +78,25 @@ applyPolyfills().then(() => {
|
|
|
81
78
|
}
|
|
82
79
|
```
|
|
83
80
|
|
|
81
|
+
```js
|
|
82
|
+
// main.ts
|
|
83
|
+
import { setBasePath } from '@beeq/core';
|
|
84
|
+
|
|
85
|
+
setBasePath('/assets/svg/');
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
But you can also use a different icons library or a CDN (*no need to move the icons to your assets folder via angular.json*):
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
import { setBasePath } from '@beeq/core';
|
|
92
|
+
|
|
93
|
+
// Using heroicons library
|
|
94
|
+
setBasePath('https://cdn.jsdelivr.net/npm/heroicons@2.1.5/24/outline');
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
> [!CAUTION]
|
|
98
|
+
> When using a different icons library, make sure you use the correct icon names provided by the library or the CDN.
|
|
99
|
+
|
|
84
100
|
BEEQ styles can be also imported into your application's main style file:
|
|
85
101
|
|
|
86
102
|
```css
|
|
@@ -112,7 +128,8 @@ export class AppModule {}
|
|
|
112
128
|
|
|
113
129
|
To enable two-way binding and the use of [ngModel] within BEEQ form components, you will need to add the Value Accessors in your module declarations, along with `@angular/forms`.
|
|
114
130
|
|
|
115
|
-
>
|
|
131
|
+
> [!CAUTION]
|
|
132
|
+
> *Please notice that* **you might need to disable** `aot` *for enabling two-way data binding**. Details: https://github.com/ionic-team/stencil-ds-output-targets/issues/317*
|
|
116
133
|
|
|
117
134
|
```ts
|
|
118
135
|
import { NgModule } from '@angular/core';
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beeq/angular",
|
|
3
|
-
"version": "1.8.0-beta.
|
|
3
|
+
"version": "1.8.0-beta.11",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Angular specific wrapper for BEEQ Design System components",
|
|
6
6
|
"main": "dist/esm2015/index.js",
|
|
7
7
|
"module": "fesm2022/beeq-angular.mjs",
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@beeq/core": "^1.8.0-beta.
|
|
10
|
+
"@beeq/core": "^1.8.0-beta.11",
|
|
11
11
|
"tslib": "^2.6.3"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|