@cnx-dev/angular-devextreme 1.0.0 → 1.0.2
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 +76 -4
- package/package.json +7 -1
- package/cnx-dev-angular-devextreme-1.0.0.tgz +0 -0
package/README.md
CHANGED
|
@@ -1,7 +1,79 @@
|
|
|
1
|
-
# angular-devextreme
|
|
1
|
+
# @cnx-dev/angular-devextreme
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular UI Component Library powered by DevExtreme for CNX Dev internal applications.
|
|
4
|
+
Provides enhanced, easy-to-use wrappers around DevExtreme components with built-in support for Dependency Injection and dynamic data loading.
|
|
4
5
|
|
|
5
|
-
##
|
|
6
|
+
## Features
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
- **SelectBox (`<cnx-select-box>`)**: A smart dropdown component that supports dynamic data loading, pagination, search, cascading options (`cascadeBy`), and hidden options (`ignoreValue`) via the `SELECTBOX_DATA_PROVIDER` injection token.
|
|
9
|
+
- Seamless integration with Angular 17+ and DevExtreme 23.2+.
|
|
10
|
+
- Built with Angular Package Format (APF) for optimal consumption in both Module-based and Standalone Angular applications.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @cnx-dev/angular-devextreme devextreme devextreme-angular
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Setup
|
|
19
|
+
|
|
20
|
+
1. Add the DevExtreme Light Compact Theme to your `angular.json`:
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
"styles": [
|
|
24
|
+
"node_modules/devextreme/dist/css/dx.light.compact.css",
|
|
25
|
+
"src/styles.css"
|
|
26
|
+
]
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
2. Add the `dx-viewport` class to your `<body>` in `src/index.html`:
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<body class="dx-viewport">
|
|
33
|
+
<app-root></app-root>
|
|
34
|
+
</body>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
3. Import the module in your application (e.g., `app.module.ts`):
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { DxSelectBoxModule, DxTemplateModule } from 'devextreme-angular';
|
|
41
|
+
import { CnxSelectBoxModule } from '@cnx-dev/angular-devextreme';
|
|
42
|
+
import { AppSelectBoxService } from './services/app-select-box.service';
|
|
43
|
+
|
|
44
|
+
@NgModule({
|
|
45
|
+
imports: [DxSelectBoxModule, DxTemplateModule, CnxSelectBoxModule.forRoot(AppSelectBoxService)],
|
|
46
|
+
})
|
|
47
|
+
export class AppModule {}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## SelectBox Usage
|
|
51
|
+
|
|
52
|
+
Implement the `SelectBoxDataProvider` interface in your service:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { Injectable } from '@angular/core';
|
|
56
|
+
import { Observable, of } from 'rxjs';
|
|
57
|
+
import { SelectBoxDataProvider, SelectBoxKey, SelectBoxParam, SelectBoxLoadResult } from '@cnx-dev/angular-devextreme';
|
|
58
|
+
|
|
59
|
+
@Injectable()
|
|
60
|
+
export class AppSelectBoxService implements SelectBoxDataProvider {
|
|
61
|
+
getService(key: SelectBoxKey, param: SelectBoxParam): Observable<SelectBoxLoadResult> {
|
|
62
|
+
if (key === 'bank') {
|
|
63
|
+
const data = [{ text: 'Bangkok Bank', value: 'BBL', dropdownText: 'BBL - Bangkok Bank' }];
|
|
64
|
+
return of({ data, totalCount: data.length });
|
|
65
|
+
}
|
|
66
|
+
return of(new SelectBoxLoadResult());
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Use in your template:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<cnx-select-box [selectBoxKey]="'bank'" [placeholder]="'Select Bank...'" (onValueChanged)="onBankChanged($event)"> </cnx-select-box>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
UNLICENSED
|
package/package.json
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cnx-dev/angular-devextreme",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "CNX Dev - Angular DevExtreme UI Component Library",
|
|
5
5
|
"author": "cnx-dev",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/cnx-dev/angular-devextreme"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/cnx-dev/angular-devextreme#readme",
|
|
12
|
+
"readme": "README.md",
|
|
7
13
|
"peerDependencies": {
|
|
8
14
|
"@angular/common": "^17.3.0",
|
|
9
15
|
"@angular/core": "^17.3.0",
|
|
Binary file
|