@beeq/angular 1.0.0 → 1.0.1
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 +13 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,31 +7,31 @@ An Angular-specific wrapper on top of BEEQ web components that enables NG_VALUE_
|
|
|
7
7
|
- install the package
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
npm install @
|
|
10
|
+
npm install @beeq/angular
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
- update the package
|
|
14
14
|
|
|
15
15
|
```
|
|
16
|
-
npm install @
|
|
16
|
+
npm install @beeq/angular@latest
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
if the `@
|
|
19
|
+
if the `@beeq/core` package is added to your `package.json` should update both
|
|
20
20
|
|
|
21
21
|
```
|
|
22
|
-
npm install @
|
|
22
|
+
npm install @beeq/{core,angular}
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Setup
|
|
26
26
|
|
|
27
27
|
### Call `defineCustomElements`
|
|
28
28
|
|
|
29
|
-
The BEEQ core package includes the main function that is used to load the components in the collection and makes Angular aware of the custom tags of the web components. That function is called `defineCustomElements()` and it is handled by the `@
|
|
29
|
+
The BEEQ core package includes the main function that is used to load the components in the collection and makes Angular aware of the custom tags of the web components. That function is called `defineCustomElements()` and it is handled by the `@beeq/angular` wrapper itself. Yet, **if you need to support older versions of Microsoft Edge and Internet Explorer, you can apply the polyfills as follow**:
|
|
30
30
|
|
|
31
31
|
```ts
|
|
32
32
|
// main.ts
|
|
33
33
|
|
|
34
|
-
import { applyPolyfills, defineCustomElements } from '@
|
|
34
|
+
import { applyPolyfills, defineCustomElements } from '@beeq/core/dist/loader';
|
|
35
35
|
|
|
36
36
|
...
|
|
37
37
|
|
|
@@ -43,7 +43,7 @@ applyPolyfills().then(() => {
|
|
|
43
43
|
|
|
44
44
|
### Add BEEQ styles and assets
|
|
45
45
|
|
|
46
|
-
> ❗️The icons SVG are shipped in a separate folder. Projects will need to include `node_modules/@
|
|
46
|
+
> ❗️The icons SVG are shipped in a separate folder. Projects will need to include `node_modules/@beeq/core/dist/beeq/svg` in their build and try to make it in a certain way that it respond to: `http://<domain>/svg`
|
|
47
47
|
|
|
48
48
|
```json
|
|
49
49
|
/** angular.json */
|
|
@@ -64,13 +64,13 @@ applyPolyfills().then(() => {
|
|
|
64
64
|
"src/assets",
|
|
65
65
|
{
|
|
66
66
|
"glob": "**/*",
|
|
67
|
-
"input": "node_modules/@
|
|
67
|
+
"input": "node_modules/@beeq/core/dist/beeq/svg",
|
|
68
68
|
"output": "/svg/"
|
|
69
69
|
}
|
|
70
70
|
],
|
|
71
71
|
"styles": [
|
|
72
72
|
"src/styles.scss",
|
|
73
|
-
"node_modules/@
|
|
73
|
+
"node_modules/@beeq/core/dist/beeq/beeq.css"
|
|
74
74
|
],
|
|
75
75
|
...
|
|
76
76
|
}
|
|
@@ -84,17 +84,17 @@ applyPolyfills().then(() => {
|
|
|
84
84
|
BEEQ styles can be also imported into your application's main style file:
|
|
85
85
|
|
|
86
86
|
```css
|
|
87
|
-
@import '~@
|
|
87
|
+
@import '~@beeq/core/dist/beeq/beeq.css';
|
|
88
88
|
```
|
|
89
89
|
|
|
90
90
|
### Add the BEEQ Angular module to your application module
|
|
91
91
|
|
|
92
|
-
You will be able to add BEEQ web components to your app by adding the `BeeQModule` exported by `@
|
|
92
|
+
You will be able to add BEEQ web components to your app by adding the `BeeQModule` exported by `@beeq/angular`:
|
|
93
93
|
|
|
94
94
|
```ts
|
|
95
95
|
import { NgModule } from '@angular/core';
|
|
96
96
|
import { BrowserModule } from '@angular/platform-browser';
|
|
97
|
-
import { BeeQModule } from '@
|
|
97
|
+
import { BeeQModule } from '@beeq/angular';
|
|
98
98
|
|
|
99
99
|
import { AppComponent } from './app.component';
|
|
100
100
|
|
|
@@ -118,7 +118,7 @@ To enable two-way binding and the use of [ngModel] within BEEQ form components,
|
|
|
118
118
|
import { NgModule } from '@angular/core';
|
|
119
119
|
import { FormsModule } from '@angular/forms';
|
|
120
120
|
import { BrowserModule } from '@angular/platform-browser';
|
|
121
|
-
import { BeeQModule, BooleanValueAccessor, TextValueAccessor } from '@
|
|
121
|
+
import { BeeQModule, BooleanValueAccessor, TextValueAccessor } from '@beeq/angular';
|
|
122
122
|
|
|
123
123
|
import { AppComponent } from './app.component';
|
|
124
124
|
|