@eherve/angular-material-section-tabs 0.0.0-stage → 22.0.0
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
CHANGED
|
@@ -1,3 +1,90 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Angular Material Section Tabs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
```sh
|
|
4
|
+
npm install @eherve/angular-material-section-tabs
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
Import `SectionTabsModule` in the host NgModule (or standalone component imports). Configure Angular animations in the host with `provideAnimations()` or `BrowserAnimationsModule`; tests can use `NoopAnimationsModule`. Angular, animations, Material/CDK 22 and RxJS 7.8 are peers. No Router provider is needed.
|
|
8
|
+
|
|
9
|
+
## Declarative display
|
|
10
|
+
|
|
11
|
+
`SectionTabsDisplayComponent` (`app-section-tabs-display`) renders configured sections, cards and fields. Its public configuration interfaces are exported from the package root.
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import {
|
|
15
|
+
SectionTabsDisplayOptions,
|
|
16
|
+
SectionTabsModule,
|
|
17
|
+
} from '@eherve/angular-material-section-tabs';
|
|
18
|
+
|
|
19
|
+
const display: SectionTabsDisplayOptions = {
|
|
20
|
+
data: { name: 'Example', count: 0 },
|
|
21
|
+
sections: [{
|
|
22
|
+
id: 'details',
|
|
23
|
+
label: 'Details',
|
|
24
|
+
cards: [{
|
|
25
|
+
id: 'general',
|
|
26
|
+
label: 'General',
|
|
27
|
+
grid: { columns: 2, gap: '12px', minColumnWidth: '220px' },
|
|
28
|
+
fields: [
|
|
29
|
+
{ kind: 'text', label: 'Name', path: 'name' },
|
|
30
|
+
{ kind: 'number', label: 'Count', path: 'count', decimal: 0 },
|
|
31
|
+
],
|
|
32
|
+
}],
|
|
33
|
+
}],
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<app-section-tabs-display
|
|
39
|
+
[options]="display"
|
|
40
|
+
queryParamKey="record-sections"
|
|
41
|
+
[(selectedIndex)]="selectedIndex">
|
|
42
|
+
</app-section-tabs-display>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Configuration supports `columns`, `gap`, `minColumnWidth`, card and field spans and breaks, completion counters, label actions, card actions, chips, and custom field or card components. Custom component inputs are filtered to inputs declared by that component. `sectionMode: 'single-card'` makes cards fill and scroll within the section. Falsy values such as `0` and `false` count as filled; empty strings are treated as empty and can be revealed with `showEmptyFields` or its toggle.
|
|
46
|
+
|
|
47
|
+
HTML labels and values are bound through Angular's `innerHTML` sanitization. Ordinary strings remain sanitized; hosts may intentionally pass `SafeHtml`. The library does not bypass Angular sanitization.
|
|
48
|
+
|
|
49
|
+
## Optional selection synchronization
|
|
50
|
+
|
|
51
|
+
`queryParamKey` and each section's `queryParamValue` are group and stable-value identifiers; they do not cause URL navigation. The optional `SectionSelectionHandler` provider synchronizes state. Without a handler, sections work locally.
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import { Injectable } from '@angular/core';
|
|
55
|
+
import { BehaviorSubject, Observable } from 'rxjs';
|
|
56
|
+
import {
|
|
57
|
+
SECTION_SELECTION_HANDLER,
|
|
58
|
+
SectionSelectionHandler,
|
|
59
|
+
} from '@eherve/angular-material-section-tabs';
|
|
60
|
+
|
|
61
|
+
@Injectable({ providedIn: 'root' })
|
|
62
|
+
export class MemorySectionSelectionHandler implements SectionSelectionHandler {
|
|
63
|
+
private readonly groups = new Map<string, BehaviorSubject<string | null>>();
|
|
64
|
+
private group(key: string): BehaviorSubject<string | null> {
|
|
65
|
+
let group = this.groups.get(key);
|
|
66
|
+
if (!group) {
|
|
67
|
+
group = new BehaviorSubject<string | null>(null);
|
|
68
|
+
this.groups.set(key, group);
|
|
69
|
+
}
|
|
70
|
+
return group;
|
|
71
|
+
}
|
|
72
|
+
observe(key: string): Observable<string | null> {
|
|
73
|
+
return this.group(key).asObservable();
|
|
74
|
+
}
|
|
75
|
+
select(key: string, value: string): void {
|
|
76
|
+
this.group(key).next(value);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// In application providers:
|
|
81
|
+
// { provide: SECTION_SELECTION_HANDLER, useExisting: MemorySectionSelectionHandler }
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
`observe(key)` emits the initial state and later changes. A null or unknown external value keeps the current safe local choice. External changes never trigger writes. Values must be unique within a group; duplicates are a configuration error. The component releases subscriptions when its key changes or it is destroyed. Handler errors are sent to Angular's `ErrorHandler` while local selection stays available. Handlers that persist state asynchronously should serialize their writes.
|
|
85
|
+
|
|
86
|
+
## Styling and translations
|
|
87
|
+
|
|
88
|
+
Styles retain the source `section-tabs-display__*` classes and use the `app-section-tabs-display` host selector. Section tabs provide `--ngx-mat-section-tabs-primary`, `--ngx-mat-section-tabs-background`, and `--ngx-mat-section-tabs-text` defaults. Display chips use `--ngx-mat-section-tabs-display-primary` and `--ngx-mat-section-tabs-display-background`.
|
|
89
|
+
|
|
90
|
+
`SectionTabsIntl.messages` is a complete typed dictionary for fixed labels. Defaults are `sections: 'Sections'`, `emptySections: 'Aucune section à afficher'`, `emptyComponents: 'Aucun composant configuré'`, `emptyFields: 'Aucun champ renseigné'`, `emptyFieldsDescription: "Activez l'affichage des champs vides pour voir les informations attendues."`, and `showEmptyFields: 'Afficher les champs vides'`. Replace messages and emit `changes` to refresh an existing view; an explicit `showEmptyFieldsLabel` option remains in effect. `sections` is the accessible navigation label.
|