@acontplus/ng-components 3.0.0 → 3.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 +55 -6
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -27,6 +27,52 @@ pnpm add @acontplus/ng-components
|
|
|
27
27
|
|
|
28
28
|
## Components
|
|
29
29
|
|
|
30
|
+
### DateRangePicker
|
|
31
|
+
|
|
32
|
+
Standalone date-range form control built on `ngx-datex`. It implements
|
|
33
|
+
`ControlValueAccessor`, includes Spanish preset ranges, and can emit either
|
|
34
|
+
formatted strings or `Date` objects.
|
|
35
|
+
|
|
36
|
+
Install its peer dependencies with the package:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
pnpm add @acontplus/ng-components ngx-datex@1.0.5 @formkit/tempo
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { Component } from '@angular/core';
|
|
44
|
+
import { DateRangePicker, DateRangeValue } from '@acontplus/ng-components';
|
|
45
|
+
|
|
46
|
+
@Component({
|
|
47
|
+
standalone: true,
|
|
48
|
+
imports: [DateRangePicker],
|
|
49
|
+
template: `
|
|
50
|
+
<acp-date-range-picker
|
|
51
|
+
label="Periodo"
|
|
52
|
+
[formatOutputAsString]="false"
|
|
53
|
+
[timePicker]="true"
|
|
54
|
+
(dateRangeSelected)="onRangeSelected($event)"
|
|
55
|
+
/>
|
|
56
|
+
`,
|
|
57
|
+
})
|
|
58
|
+
export class ReportComponent {
|
|
59
|
+
onRangeSelected(range: DateRangeValue<false>): void {
|
|
60
|
+
console.log(range.from, range.to);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Use `formControlName` or `[(ngModel)]` as with any Angular form control. Its
|
|
66
|
+
main inputs are `options`, `formatOutputAsString`, `startDate`, `endDate`,
|
|
67
|
+
`minDate`, `maxDate`, `singleDatePicker`, and the time-picker settings. The
|
|
68
|
+
outputs are `dateRangeSelected`, `pickerShow`, `pickerHide`, `pickerApply`,
|
|
69
|
+
`pickerCancel`, and `checkboxChange`.
|
|
70
|
+
|
|
71
|
+
`DateRangePickerOptions` accepts `locale`, `theme`, custom `ranges`, date
|
|
72
|
+
bounds, and the `ngx-datex` behavior options. `MATERIAL_LIGHT_THEME`,
|
|
73
|
+
`SPANISH_LOCALE`, and the relevant `ngx-datex` types are re-exported from
|
|
74
|
+
`@acontplus/ng-components`.
|
|
75
|
+
|
|
30
76
|
### Cards
|
|
31
77
|
|
|
32
78
|
#### DynamicCard
|
|
@@ -362,7 +408,7 @@ import { DataGrid, DataGridColumn, TabulatorTable } from '@acontplus/ng-componen
|
|
|
362
408
|
|
|
363
409
|
#### Data Grid Features
|
|
364
410
|
|
|
365
|
-
The DataGrid is the primary table component, built with modern Angular
|
|
411
|
+
The DataGrid is the primary table component, built with modern Angular 22+ patterns:
|
|
366
412
|
|
|
367
413
|
- **Signals Architecture**: Uses `signal()`, `computed()`, `effect()` for reactive state
|
|
368
414
|
- **Modern APIs**: Uses `input()` and `output()` functions
|
|
@@ -671,8 +717,11 @@ function getStatusStyle(status: string) {
|
|
|
671
717
|
|
|
672
718
|
## Peer Dependencies
|
|
673
719
|
|
|
674
|
-
- `@angular/cdk`: ^
|
|
675
|
-
- `@angular/common`: ^
|
|
676
|
-
- `@angular/core`: ^
|
|
677
|
-
- `@angular/
|
|
678
|
-
-
|
|
720
|
+
- `@angular/cdk`: ^22.1.0
|
|
721
|
+
- `@angular/common`: ^22.1.0
|
|
722
|
+
- `@angular/core`: ^22.1.0
|
|
723
|
+
- `@angular/forms`: ^22.1.0
|
|
724
|
+
- `@angular/material`: ^22.1.0
|
|
725
|
+
- `@angular/platform-browser`: ^22.1.0
|
|
726
|
+
- `@angular/router`: ^22.1.0
|
|
727
|
+
- `tabulator-tables`: ^6.5.2
|
package/package.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acontplus/ng-components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@acontplus/ui-kit": "^1.0.2",
|
|
7
7
|
"@angular/cdk": "^22.1.0",
|
|
8
8
|
"@angular/common": "^22.1.0",
|
|
9
9
|
"@angular/core": "^22.1.0",
|
|
10
|
+
"@angular/forms": "^22.1.0",
|
|
10
11
|
"@angular/material": "^22.1.0",
|
|
12
|
+
"@angular/platform-browser": "^22.1.0",
|
|
13
|
+
"@angular/router": "^22.1.0",
|
|
11
14
|
"tabulator-tables": "^6.5.2",
|
|
12
15
|
"@formkit/tempo": "^1.1.0",
|
|
13
16
|
"ngx-datex": "1.0.5"
|