@wizishop/angular-components 19.0.0-beta.3 → 19.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 +87 -87
- package/angular-components.scss +11030 -11024
- package/assets/images/upload/icon_picture.svg +11 -11
- package/assets/images/upload/upload_images.svg +23 -23
- package/fesm2022/wizishop-angular-components.mjs +178 -178
- package/fesm2022/wizishop-angular-components.mjs.map +1 -1
- package/package.json +1 -1
- package/wizishop-angular-components-19.0.01.tgz +0 -0
package/README.md
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
# Wizi Angular Components Module
|
|
2
|
-
|
|
3
|
-
## 1 - Dependencies
|
|
4
|
-
|
|
5
|
-
- Run `npm i @wizishop/angular-components`.
|
|
6
|
-
|
|
7
|
-
- Then install all the lib dependencies & peerDenpendencies.
|
|
8
|
-
You can find the list, in the `package.json` file in `node_modules/@wizishop/angular-components`.
|
|
9
|
-
|
|
10
|
-
Run `npm i nameOfTheDependency`.
|
|
11
|
-
|
|
12
|
-
## 2 - Module & Translation system
|
|
13
|
-
|
|
14
|
-
In `app.module.ts` file :
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
18
|
-
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
19
|
-
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
|
20
|
-
|
|
21
|
-
import { WiziComponentsModule } from 'angular-components';
|
|
22
|
-
|
|
23
|
-
export function HttpLoaderFactory(http: HttpClient) {
|
|
24
|
-
return new TranslateHttpLoader(http, './assets/angular-components/i18n/', '.json');
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
@NgModule({
|
|
29
|
-
imports: [
|
|
30
|
-
BrowserModule,
|
|
31
|
-
BrowserAnimationsModule,
|
|
32
|
-
CommonModule,
|
|
33
|
-
ReactiveFormsModule,
|
|
34
|
-
FormsModule,
|
|
35
|
-
...
|
|
36
|
-
HttpClientModule,
|
|
37
|
-
TranslateModule.forRoot({
|
|
38
|
-
defaultLanguage: 'fr',
|
|
39
|
-
loader: {
|
|
40
|
-
provide: TranslateLoader,
|
|
41
|
-
useFactory: (HttpLoaderFactory),
|
|
42
|
-
deps: [HttpClient]
|
|
43
|
-
}
|
|
44
|
-
}),
|
|
45
|
-
WiziComponentsModule
|
|
46
|
-
]
|
|
47
|
-
...
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
If you already use ngx-translate, maybe you should use [@ngx-translate/multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader) in order to load multiple translation source file.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## 3 - Integration / Assets & Styles
|
|
56
|
-
|
|
57
|
-
- In `angular.json` file add a link to the module assets and a link to calendar script :
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
assets": [
|
|
61
|
-
...
|
|
62
|
-
{
|
|
63
|
-
"glob": "**/*",
|
|
64
|
-
"input": "node_modules/@wizishop/angular-components/assets/",
|
|
65
|
-
"output": "./assets/angular-components/"
|
|
66
|
-
}
|
|
67
|
-
],
|
|
68
|
-
...
|
|
69
|
-
"scripts": [
|
|
70
|
-
"node_modules/bulma-calendar/dist/js/bulma-calendar.js"
|
|
71
|
-
]
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
- Add `<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />` in your `index.html` file.
|
|
75
|
-
|
|
76
|
-
- Copy/paste the following folder in your app project.
|
|
77
|
-
|
|
78
|
-
[Github link with all scss files to import](https://gitlab.wizishop.com/wizi/angular-components/-/tree/master/projects/showcase/src/scss/includes)
|
|
79
|
-
|
|
80
|
-
- Make the import of the `import.scss` file in your main scss file :
|
|
81
|
-
|
|
82
|
-
`@import '@wizishop/angular-components/angular-components';`
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
## 4 - Use components from this module !
|
|
86
|
-
|
|
87
|
-
All the components of this module starts with `wac-` prefix like `<wac-button>`.
|
|
1
|
+
# Wizi Angular Components Module
|
|
2
|
+
|
|
3
|
+
## 1 - Dependencies
|
|
4
|
+
|
|
5
|
+
- Run `npm i @wizishop/angular-components`.
|
|
6
|
+
|
|
7
|
+
- Then install all the lib dependencies & peerDenpendencies.
|
|
8
|
+
You can find the list, in the `package.json` file in `node_modules/@wizishop/angular-components`.
|
|
9
|
+
|
|
10
|
+
Run `npm i nameOfTheDependency`.
|
|
11
|
+
|
|
12
|
+
## 2 - Module & Translation system
|
|
13
|
+
|
|
14
|
+
In `app.module.ts` file :
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
18
|
+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
19
|
+
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
|
20
|
+
|
|
21
|
+
import { WiziComponentsModule } from 'angular-components';
|
|
22
|
+
|
|
23
|
+
export function HttpLoaderFactory(http: HttpClient) {
|
|
24
|
+
return new TranslateHttpLoader(http, './assets/angular-components/i18n/', '.json');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
@NgModule({
|
|
29
|
+
imports: [
|
|
30
|
+
BrowserModule,
|
|
31
|
+
BrowserAnimationsModule,
|
|
32
|
+
CommonModule,
|
|
33
|
+
ReactiveFormsModule,
|
|
34
|
+
FormsModule,
|
|
35
|
+
...
|
|
36
|
+
HttpClientModule,
|
|
37
|
+
TranslateModule.forRoot({
|
|
38
|
+
defaultLanguage: 'fr',
|
|
39
|
+
loader: {
|
|
40
|
+
provide: TranslateLoader,
|
|
41
|
+
useFactory: (HttpLoaderFactory),
|
|
42
|
+
deps: [HttpClient]
|
|
43
|
+
}
|
|
44
|
+
}),
|
|
45
|
+
WiziComponentsModule
|
|
46
|
+
]
|
|
47
|
+
...
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
If you already use ngx-translate, maybe you should use [@ngx-translate/multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader) in order to load multiple translation source file.
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
## 3 - Integration / Assets & Styles
|
|
56
|
+
|
|
57
|
+
- In `angular.json` file add a link to the module assets and a link to calendar script :
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
assets": [
|
|
61
|
+
...
|
|
62
|
+
{
|
|
63
|
+
"glob": "**/*",
|
|
64
|
+
"input": "node_modules/@wizishop/angular-components/assets/",
|
|
65
|
+
"output": "./assets/angular-components/"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
...
|
|
69
|
+
"scripts": [
|
|
70
|
+
"node_modules/bulma-calendar/dist/js/bulma-calendar.js"
|
|
71
|
+
]
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
- Add `<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />` in your `index.html` file.
|
|
75
|
+
|
|
76
|
+
- Copy/paste the following folder in your app project.
|
|
77
|
+
|
|
78
|
+
[Github link with all scss files to import](https://gitlab.wizishop.com/wizi/angular-components/-/tree/master/projects/showcase/src/scss/includes)
|
|
79
|
+
|
|
80
|
+
- Make the import of the `import.scss` file in your main scss file :
|
|
81
|
+
|
|
82
|
+
`@import '@wizishop/angular-components/angular-components';`
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
## 4 - Use components from this module !
|
|
86
|
+
|
|
87
|
+
All the components of this module starts with `wac-` prefix like `<wac-button>`.
|