@gerandon/ngx-widgets 18.0.6 → 18.0.8
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +88 -12
- package/gerandon-ngx-widgets-18.0.8.tgz +0 -0
- package/package.json +1 -1
- package/gerandon-ngx-widgets-18.0.6.tgz +0 -0
package/README.md
CHANGED
|
@@ -1,24 +1,100 @@
|
|
|
1
1
|
# NgxWidgets
|
|
2
2
|
|
|
3
|
-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version
|
|
3
|
+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.x.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Short Description
|
|
6
|
+
This is basically a utility-widget Angular library, for creating `ControlValueAccessors` in an easier way, by implementing and extending
|
|
7
|
+
the `Core` classes.
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project ngx-widgets` or else it will be added to the default project in your `angular.json` file.
|
|
9
|
+
Instead of creating `ControlValueAccessor` implementations in each of our project, this library provides already defined classes for that functionality.
|
|
9
10
|
|
|
10
|
-
##
|
|
11
|
+
## <a href="https://gerandon.github.io/ngx-widgets/">Try it out - Demo</a>
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
## Built-In components
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
Be patient with me, I'm trying to figure out what this README should really contain... :)
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
## Core Classes
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
<table>
|
|
20
|
+
<thead>
|
|
21
|
+
<tr>
|
|
22
|
+
<th>File name</th>
|
|
23
|
+
<th>Class name</th>
|
|
24
|
+
<th>Description</th>
|
|
25
|
+
</tr>
|
|
26
|
+
</thead>
|
|
27
|
+
<tbody>
|
|
28
|
+
<tr>
|
|
29
|
+
<td>base-value-accessor.ts</td>
|
|
30
|
+
<td>BaseValueAccessor</td>
|
|
31
|
+
<td>The main "core" class of the library. It contains the CVA interface implementations and handles the built-in "overridable" and redundant functionalities.</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td>base.input.ts</td>
|
|
35
|
+
<td>BaseInput</td>
|
|
36
|
+
<td>Simple class that extends the BaseCVA class. It has multiple attributes inside of it, the most common ones such as: "name", "label", "appearance", etc. Extending this class in our component, makes our component to act like a custom control input.</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<td>base-text.input.ts</td>
|
|
40
|
+
<td>BaseTextInput</td>
|
|
41
|
+
<td>This class extends the BaseInput one. It has multiple attributes that are being used in case of "plain" text inputs, such as: "type (text or passwd)", "maxLength", etc.</td>
|
|
42
|
+
</tr>
|
|
43
|
+
</tbody>
|
|
44
|
+
</table>
|
|
19
45
|
|
|
20
|
-
|
|
46
|
+
##Widgets (built-in examples)
|
|
47
|
+
There are a few custom components, just to present how the core functionality and implementation works and makes
|
|
48
|
+
the development easier (especially in case of a newly created project)
|
|
21
49
|
|
|
22
|
-
|
|
50
|
+
In the following example you can see a custom CVA implementation built into the library (as widget)
|
|
23
51
|
|
|
24
|
-
|
|
52
|
+
As you can see, instead of defining what our CVA will look like, we could use the Base implementation from the core of the library. That way (as seen) our component will have significantly less code on its TS side and we also reduced redundancy as well.
|
|
53
|
+
###BasicInput (component)
|
|
54
|
+
```typescript
|
|
55
|
+
@Component({
|
|
56
|
+
selector: 'basic-input',
|
|
57
|
+
templateUrl: './basic-input.component.html',
|
|
58
|
+
styleUrls: ['./basic-input.component.scss'],
|
|
59
|
+
encapsulation: ViewEncapsulation.None,
|
|
60
|
+
providers: [
|
|
61
|
+
{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true},
|
|
62
|
+
{provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true},
|
|
63
|
+
],
|
|
64
|
+
})
|
|
65
|
+
export class BasicInputComponent extends BaseTextInput<string> implements OnInit {
|
|
66
|
+
|
|
67
|
+
constructor(protected injector: Injector, protected cdr: ChangeDetectorRef) {
|
|
68
|
+
super(cdr, injector);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
ngOnInit() {
|
|
72
|
+
super.ngOnInit();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
```angular2html
|
|
78
|
+
<mat-form-field [floatLabel]="floatLabel && 'always'" [appearance]="appearance">
|
|
79
|
+
<mat-label *ngIf="label && floatLabel !== 'never'">{{ label | translate: translateParams }}</mat-label>
|
|
80
|
+
<input
|
|
81
|
+
#inputElement
|
|
82
|
+
#input="ngForm"
|
|
83
|
+
matInput
|
|
84
|
+
label=""
|
|
85
|
+
[type]="type"
|
|
86
|
+
[attr.disabled]="disabled"
|
|
87
|
+
[readonly]="disabled"
|
|
88
|
+
[placeholder]="placeholder | translate: translateParams"
|
|
89
|
+
[formControl]="control"
|
|
90
|
+
[maxLength]="maxLength"
|
|
91
|
+
[name]="name"
|
|
92
|
+
[required]="required"/>
|
|
93
|
+
<mat-icon *ngIf="icon" matPrefix color="primary">{{icon}}</mat-icon>
|
|
94
|
+
<span *ngIf="suffix" matSuffix>{{suffix}}</span>
|
|
95
|
+
<mat-error *ngIf="hasError('required')">{{ 'COMMON.REQUIRED' | translate: translateParams }}</mat-error>
|
|
96
|
+
<mat-error *ngIf="hasError('max')">{{ 'ERROR.NUMERIC.MAX' | translate }}</mat-error>
|
|
97
|
+
<mat-error *ngIf="hasError('min')">{{ 'ERROR.NUMERIC.MIN' | translate }}</mat-error>
|
|
98
|
+
</mat-form-field>
|
|
99
|
+
|
|
100
|
+
```
|
|
Binary file
|
package/package.json
CHANGED
|
Binary file
|