@arsedizioni/ars-utils 22.5.37 → 22.5.38
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 +179 -179
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +1 -2
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.date.mjs +5 -76
- package/fesm2022/arsedizioni-ars-utils-core.date.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.validators.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs +73 -3
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs.map +1 -1
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-core.date.d.ts +4 -37
- package/types/arsedizioni-ars-utils-ui.controls.d.ts +34 -1
package/README.md
CHANGED
|
@@ -1,179 +1,179 @@
|
|
|
1
|
-
# ARS Utils
|
|
2
|
-
|
|
3
|
-
Common tools and standalone components shared among ARS Edizioni Angular based web applications.
|
|
4
|
-
|
|
5
|
-
Rispetto alla versione monolitica precedente adotta la struttura a entry point
|
|
6
|
-
introdotta con `@fabio.buscaroli/scm-utils`: code splitting e tree shaking sono il criterio di
|
|
7
|
-
ripartizione dei simboli, non un effetto collaterale.
|
|
8
|
-
|
|
9
|
-
## Platform
|
|
10
|
-
|
|
11
|
-
Angular 22 + Material
|
|
12
|
-
|
|
13
|
-
## Entry points
|
|
14
|
-
|
|
15
|
-
La libreria non espone un barrel unico: l'entry point secondario e' l'unica unita' di
|
|
16
|
-
code splitting riconosciuta da ng-packagr, quindi ogni gruppo di simboli che ha un ciclo
|
|
17
|
-
di vita proprio vive nel suo entry point. Importare sempre dal path specifico.
|
|
18
|
-
|
|
19
|
-
### Nucleo condiviso
|
|
20
|
-
|
|
21
|
-
| Livello | Entry point | Contenuto | Note |
|
|
22
|
-
|---|---|---|---|
|
|
23
|
-
| L0 | `core` | `SystemUtils`, models, definitions, pipe, direttive validator, servizi (broadcast, screen, theme, splash, environment), `LoginOAuthType` | nessuna dipendenza da Angular Material |
|
|
24
|
-
| L0 | `core.date` | `provideArsDateFns`, `provideArsLocalDates`, `MAT_DATE_FNS_FORMATS`, `arsLocalDateInterceptor`, `ARS_TIME_ZONE` | isola `@angular/material/core` + `datepicker` |
|
|
25
|
-
| L0 | `core.markdown` | `MarkdownUtils`, `FormatMarkdownPipe` | parser markdown, fuori dal percorso comune |
|
|
26
|
-
| L0 | `core.validators` | direttive validator per i form template-driven (`ValidatorDirective`, `ValidIfDirective`, `EqualsValidatorDirective`, `PasswordValidatorDirective`, `EmailsValidatorDirective`, ...) | isola `@angular/forms` (53 KB): `core` sta sul percorso di boot e non deve trascinarselo |
|
|
27
|
-
| L0.5 | `ui.shell` | `ShellService` (`info`, `error`, `busy*`, `wait`, `BusyTimer`), `ShellMessageComponent`, `ShellBusyComponent` | zero Material e zero CDK: e' quello che shell, interceptor, guard e app initializer possono permettersi sul percorso di boot |
|
|
28
|
-
| L1 | `ui` | `FlexLayoutModule`, `MediaObserver`, `UIService`, tipi dei dialog | kernel: deve restare magro, e non importa nulla da Material |
|
|
29
|
-
| L1 | `ui.paginator` | `PaginatorIntl` | isola `@angular/material/paginator`, che si porta dietro `mat-select` e `mat-option` |
|
|
30
|
-
| L1.5 | `ui.dialogs` | `DialogService` (estende `ShellService`) + confirm, delete, toast, `open`, e le aperture pigre dei dialog pesanti | tutto cio' che chiede qualcosa all'utente, piu' il toast |
|
|
31
|
-
| L2 | `ui.dialogs.auth` | credentials, reset-password, recover-password, prompt-otp, `OtpInputComponent`, `PasswordStrengthComponent` | solo route di login/account |
|
|
32
|
-
| L2 | `ui.dialogs.prompt` | prompt, prompt-date, prompt-time | porta `@angular/material/datepicker` |
|
|
33
|
-
| L2 | `ui.dialogs.select` | select, select-tree, send-to | porta `mat-tree`, `mat-list`, `mat-chips` |
|
|
34
|
-
| L2 | `ui.files` | file-input, file-preview, select-file, select-picture | |
|
|
35
|
-
| L2 | `ui.controls` | button-selector, button-toggle, chips-selector, tree-picker, calendar-empty-header | |
|
|
36
|
-
| L2 | `ui.filters` | `FilterBarComponent` + modello `Filters` | |
|
|
37
|
-
| L2 | `ui.navigation` | `NavigationBarComponent` + definizioni | shell applicativa |
|
|
38
|
-
|
|
39
|
-
### Specifici ARS
|
|
40
|
-
|
|
41
|
-
| Livello | Entry point | Contenuto | Dipendenze pesanti |
|
|
42
|
-
|---|---|---|---|
|
|
43
|
-
| L0.5 | `support.common` | `SupportService`, notifiche, definitions, messages | - |
|
|
44
|
-
| L0.5 | `evolution.common` | `EvolutionService`, account, compliance, login, interceptor auth | - |
|
|
45
|
-
| L2 | `ui.oauth` | `LoginOAuthComponent`, `LoginOAuthOkMSComponent` | `@azure/msal-angular`, `@azure/msal-browser` |
|
|
46
|
-
| L2 | `ui.help` | `HelpService`, `HelpViewerComponent`, modello dei capitoli | - |
|
|
47
|
-
| L2 | `ui.tinymce` | `TinymceEditorDirective`, `TinymceLoaderService`, `TinymceUtils`, `TinyMceEditorComponent`, `langs/it.js` | `tinymce` (caricato a runtime) |
|
|
48
|
-
| L2 | `ui.notifications` | `NotificationsBrowserComponent` (ex `support.ui`) | - |
|
|
49
|
-
| L2 | `clipper.common` | `ClipperService`, documents, login, canali e contatori non letti, interceptor auth | solo il necessario a consultare i documenti |
|
|
50
|
-
| L4 | `clipper.ui` | browser, document, references, search-* e `ClipperDocumentUtilsService` | `clipper.scss` |
|
|
51
|
-
|
|
52
|
-
I peer dependency opzionali (`@azure/msal-*`, `tinymce`) servono
|
|
53
|
-
solo a chi importa rispettivamente `ui.oauth` e `ui.tinymce`: sono dichiarati in
|
|
54
|
-
`peerDependenciesMeta.optional` proprio perche' nessun altro entry point li aggancia.
|
|
55
|
-
|
|
56
|
-
### Grafo delle dipendenze statiche
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
core core.date core.markdown core.validators ui.paginator
|
|
60
|
-
| \
|
|
61
|
-
| ui.shell
|
|
62
|
-
| |
|
|
63
|
-
ui ------|-----------------------------------------------------------
|
|
64
|
-
| | | | | | |
|
|
65
|
-
| | ui.controls ui.filters ui.navigation ui.dialogs.select clipper.common
|
|
66
|
-
| |
|
|
67
|
-
ui.dialogs <-- DialogService extends ShellService: dipende da `ui` E da `ui.shell`
|
|
68
|
-
| | | | | |
|
|
69
|
-
| ui.dialogs.auth ui.dialogs.prompt ui.files ui.help ui.oauth
|
|
70
|
-
| ui.notifications (+ support.common)
|
|
71
|
-
clipper.ui (+ clipper.common, ui.controls, ui.files, ui.dialogs.select)
|
|
72
|
-
|
|
73
|
-
`ui.dialogs` --- import() ---> ui.dialogs.{auth,prompt,select}, ui.files
|
|
74
|
-
Gli archi dinamici puntano all'insu' e sono l'unica ragione per cui quei quattro entry point
|
|
75
|
-
restano fuori dal bundle iniziale. Regge finche' NESSUNO di loro importa `DialogService`: per
|
|
76
|
-
`error()` e `busy()` iniettano `ShellService`.
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
`evolution.common` e `support.common` dipendono solo da `core`.
|
|
80
|
-
|
|
81
|
-
### Regole da rispettare
|
|
82
|
-
|
|
83
|
-
1. Il grafo **statico** tra entry point deve restare un DAG: `ui.dialogs` raggiunge i dialog
|
|
84
|
-
pesanti solo con `import()`, e quei quattro entry point non devono importare `DialogService`
|
|
85
|
-
in nessun modo — ng-packagr rifiuta la build con `circular dependency` al primo che lo fa.
|
|
86
|
-
Per messaggi e attesa iniettano `ShellService`, che sta sotto di loro nel grafo.
|
|
87
|
-
2. I tipi condivisi fra il facade e i dialog pesanti stanno in `ui` (`dialog.definitions.ts`).
|
|
88
|
-
Se un tipo servisse a entrambi e vivesse nel dialog, l'`import()` del facade tornerebbe statico.
|
|
89
|
-
3. Il facade usa `import type` per i tipi dei componenti e `import()` per i valori: e' quello
|
|
90
|
-
che tiene i dialog fuori dal bundle iniziale.
|
|
91
|
-
4. Dopo una modifica, verificare che gli `import()` sopravvivano alla build:
|
|
92
|
-
`grep -o "import('@arsedizioni[^']*')" dist/ars-utils/fesm2022/*ui.dialogs.mjs` deve stampare i nove.
|
|
93
|
-
5. `ui.shell` non importa nulla da `@angular/material` ne' da `@angular/cdk`, e nemmeno da `ui`.
|
|
94
|
-
E' l'unica ragione per cui esiste: se ci finisce dentro un solo simbolo di Material, la shell
|
|
95
|
-
torna a pagare l'intero stack sul percorso di boot. Da verificare dopo ogni build:
|
|
96
|
-
`grep -oE "@angular/(material|cdk)[^'\"]*" dist/ars-utils/fesm2022/*ui.shell.mjs` non deve
|
|
97
|
-
stampare nulla.
|
|
98
|
-
7. Le sovrapposizioni di `ui.shell` stanno nel **top layer** del browser, non nello stack del CDK.
|
|
99
|
-
Da Angular CDK 22 ogni overlay viene aperto come `popover="manual"`, quindi un dialog Material
|
|
100
|
-
non sta piu' a z-index 1000: sta nel top layer, che viene disegnato sopra tutta la pagina
|
|
101
|
-
qualunque cosa dica lo z-index della pagina. Un numero, per quanto alto, non ci arriva sopra:
|
|
102
|
-
per questo `ShellService` promuove anche i suoi due overlay con `showPopover()`.
|
|
103
|
-
Nel top layer l'ordine e' quello di promozione, l'ultimo promosso sta sopra. Da qui le tre
|
|
104
|
-
regole esplicite: `setBusy()` ripromuove il messaggio dopo aver alzato il busy,
|
|
105
|
-
`DialogService.open()` chiama `raiseMessage()` dopo aver aperto un dialog, e chiama
|
|
106
|
-
`clearBusy(true)` senza periodo di grazia. La coppia `--ars-shell-dialog-z-index`/`--ars-shell-busy-z-index`
|
|
107
|
-
(1100/1090) resta valida e serve ancora: e' quello che ordina gli overlay sui browser senza
|
|
108
|
-
Popover API, dove nemmeno il CDK la usa. Se un'applicazione avesse bisogno del vecchio
|
|
109
|
-
comportamento puo' spegnere la Popover API del CDK con
|
|
110
|
-
`{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } }`.
|
|
111
|
-
6. `ui` non importa valori da Material. `PaginatorIntl` e' uscito da li' proprio per questo: era
|
|
112
|
-
l'unico simbolo che ne dipendeva, e faceva pagare `mat-paginator` + `mat-select` + `mat-option`
|
|
113
|
-
a chiunque toccasse `ui.dialogs`. Restano due eccezioni, entrambe volute:
|
|
114
|
-
`MatFormFieldAppearance` in `dialog.definitions.ts`, che e' un `import type` e quindi sparisce
|
|
115
|
-
in compilazione, e `@angular/cdk/layout` (1 KB) di cui `MediaObserver` ha bisogno.
|
|
116
|
-
|
|
117
|
-
### Da dove parte un'applicazione
|
|
118
|
-
|
|
119
|
-
`core` + `ui.shell`. Sono i due entry point che una applicazione ARS carica comunque prima di
|
|
120
|
-
avere una rotta, e gli unici due che non costano Material. `core` porta `SystemUtils`, i modelli,
|
|
121
|
-
`BroadcastService`, `SplashService`, `EnvironmentService`, `ThemeService`; `ui.shell` porta il modo
|
|
122
|
-
di dire all'utente che la sessione e' scaduta o che l'API non risponde.
|
|
123
|
-
|
|
124
|
-
Non sono un entry point solo, e non devono diventarlo: `core` e' L0 e ci dipendono anche
|
|
125
|
-
`clipper.common`, `evolution.common` e `support.common`, che di interfaccia non ne hanno. Fonderli
|
|
126
|
-
significherebbe far dipendere tre entry point headless da uno di UI, cioe' rompere la regola 1.
|
|
127
|
-
|
|
128
|
-
La conseguenza pratica per chi scrive l'applicazione:
|
|
129
|
-
|
|
130
|
-
- shell, interceptor, guard, `provideAppInitializer` -> `ShellService` di `ui.shell`
|
|
131
|
-
- componenti di rotta -> `DialogService` di `ui.dialogs`, che apre anche i dialog pesanti
|
|
132
|
-
|
|
133
|
-
I tre servizi sono una catena, non tre servizi diversi:
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
ShellService info, error, busy*, wait, busyTimer ui.shell
|
|
137
|
-
└ DialogService + open, confirm, delete, toast, ui.dialogs
|
|
138
|
-
select, prompt, sendTo, ... (pigri)
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
Quindi chi inietta `DialogService` ha tutto quello che aveva prima: `info`, `error` e `busy` non
|
|
142
|
-
sono spariti, sono ereditati. E non esistono in due copie — c'e' una implementazione sola, quella
|
|
143
|
-
senza Material.
|
|
144
|
-
|
|
145
|
-
`ShellService.info()` e `ShellService.error()` hanno gli stessi parametri, nello stesso ordine,
|
|
146
|
-
delle omonime di `DialogService`: spostare una chiamata dall'una all'altra e' un cambio di servizio
|
|
147
|
-
iniettato e nient'altro.
|
|
148
|
-
|
|
149
|
-
## Differenze rispetto alla versione precedente (22.1.x monolitica)
|
|
150
|
-
|
|
151
|
-
- Nessun barrel radice: `@arsedizioni/ars-utils` esporta solo `ARS_UTILS_VERSION`.
|
|
152
|
-
- `ui` non contiene piu' i dialog: `DialogService` sta in `ui.dialogs`.
|
|
153
|
-
- `ui.application` non esiste piu': i nove metodi che apriva stanno in `DialogService`. I controlli sono in
|
|
154
|
-
`ui.controls`, i file in `ui.files`, i filtri in `ui.filters`, la navigazione in `ui.navigation`.
|
|
155
|
-
- `SystemUtils.markdownToHtml` non esiste piu': usare `MarkdownUtils.toHtml` da `core.markdown`.
|
|
156
|
-
- `SelectableModel` espone `first` e `selectedAny` al posto di `selectedFirst` e `selectedAll`.
|
|
157
|
-
- `support.ui` si chiama `ui.notifications`, `help` si chiama `ui.help`, `tinymce` si chiama `ui.tinymce`.
|
|
158
|
-
- `PaginatorIntl` non sta piu' in `ui`: sta in `ui.paginator`.
|
|
159
|
-
- `ui.tinymce` non dipende piu' da `@tinymce/tinymce-angular`: l'editor e' la direttiva
|
|
160
|
-
`[tinymceEditor]` su una `<textarea>`, e TinyMCE viene caricato a runtime da
|
|
161
|
-
`TinymceLoaderService`. Il componente `<editor>` non esiste piu'.
|
|
162
|
-
- Le direttive validator non stanno piu' in `core`: stanno in `core.validators`, che e' l'unico
|
|
163
|
-
entry point del nucleo a dipendere da `@angular/forms`.
|
|
164
|
-
- I token CSS della shell stanno tutti sotto `--ars-shell-dialog-*` e `--ars-shell-busy-*`: prima
|
|
165
|
-
erano `--ars-dialog-*`, `--ars-scrim-color`, `--ars-busy-*` e `--ars-progress-track-color`, che si
|
|
166
|
-
confondevano con `--ars-dialog-item-*`, cioe' i dialog Material veri. Un'applicazione che ne
|
|
167
|
-
sovrascriveva qualcuno deve rinominarlo.
|
|
168
|
-
- La shell non deve piu' iniettare `DialogService` per mostrare un errore: c'e' `ShellService` in `ui.shell`.
|
|
169
|
-
- `info`, `error`, `busy`, `busySpinner`, `busyHourglass`, `wait`, `busyTimer` e `clearBusy` sono
|
|
170
|
-
passati a `ShellService`. `DialogService` li eredita, quindi nessuna chiamata cambia.
|
|
171
|
-
- `info()` e `error()` restituiscono `ShellMessageRef` invece di `MatDialogRef<InfoDialogComponent>`.
|
|
172
|
-
In myARS nessun chiamante usava quel valore; controllare nelle altre applicazioni.
|
|
173
|
-
- `clearBusy()` accetta `immediate`: `clearBusy(true)` non aspetta i 500 ms di grazia.
|
|
174
|
-
- `BusyTimer` si importa da `ui.shell`, non piu' da `ui.dialogs`.
|
|
175
|
-
- `InfoDialogComponent` e `BusyDialogComponent` non esistono piu': li sostituiscono
|
|
176
|
-
`ShellMessageComponent` e `ShellBusyComponent`, senza Material.
|
|
177
|
-
|
|
178
|
-
## Authors
|
|
179
|
-
Fabio Buscaroli, Alberto Doria
|
|
1
|
+
# ARS Utils
|
|
2
|
+
|
|
3
|
+
Common tools and standalone components shared among ARS Edizioni Angular based web applications.
|
|
4
|
+
|
|
5
|
+
Rispetto alla versione monolitica precedente adotta la struttura a entry point
|
|
6
|
+
introdotta con `@fabio.buscaroli/scm-utils`: code splitting e tree shaking sono il criterio di
|
|
7
|
+
ripartizione dei simboli, non un effetto collaterale.
|
|
8
|
+
|
|
9
|
+
## Platform
|
|
10
|
+
|
|
11
|
+
Angular 22 + Material
|
|
12
|
+
|
|
13
|
+
## Entry points
|
|
14
|
+
|
|
15
|
+
La libreria non espone un barrel unico: l'entry point secondario e' l'unica unita' di
|
|
16
|
+
code splitting riconosciuta da ng-packagr, quindi ogni gruppo di simboli che ha un ciclo
|
|
17
|
+
di vita proprio vive nel suo entry point. Importare sempre dal path specifico.
|
|
18
|
+
|
|
19
|
+
### Nucleo condiviso
|
|
20
|
+
|
|
21
|
+
| Livello | Entry point | Contenuto | Note |
|
|
22
|
+
|---|---|---|---|
|
|
23
|
+
| L0 | `core` | `SystemUtils`, models, definitions, pipe, direttive validator, servizi (broadcast, screen, theme, splash, environment), `LoginOAuthType` | nessuna dipendenza da Angular Material |
|
|
24
|
+
| L0 | `core.date` | `provideArsDateFns`, `provideArsLocalDates`, `MAT_DATE_FNS_FORMATS`, `arsLocalDateInterceptor`, `ARS_TIME_ZONE` | isola `@angular/material/core` + `datepicker` |
|
|
25
|
+
| L0 | `core.markdown` | `MarkdownUtils`, `FormatMarkdownPipe` | parser markdown, fuori dal percorso comune |
|
|
26
|
+
| L0 | `core.validators` | direttive validator per i form template-driven (`ValidatorDirective`, `ValidIfDirective`, `EqualsValidatorDirective`, `PasswordValidatorDirective`, `EmailsValidatorDirective`, ...) | isola `@angular/forms` (53 KB): `core` sta sul percorso di boot e non deve trascinarselo |
|
|
27
|
+
| L0.5 | `ui.shell` | `ShellService` (`info`, `error`, `busy*`, `wait`, `BusyTimer`), `ShellMessageComponent`, `ShellBusyComponent` | zero Material e zero CDK: e' quello che shell, interceptor, guard e app initializer possono permettersi sul percorso di boot |
|
|
28
|
+
| L1 | `ui` | `FlexLayoutModule`, `MediaObserver`, `UIService`, tipi dei dialog | kernel: deve restare magro, e non importa nulla da Material |
|
|
29
|
+
| L1 | `ui.paginator` | `PaginatorIntl` | isola `@angular/material/paginator`, che si porta dietro `mat-select` e `mat-option` |
|
|
30
|
+
| L1.5 | `ui.dialogs` | `DialogService` (estende `ShellService`) + confirm, delete, toast, `open`, e le aperture pigre dei dialog pesanti | tutto cio' che chiede qualcosa all'utente, piu' il toast |
|
|
31
|
+
| L2 | `ui.dialogs.auth` | credentials, reset-password, recover-password, prompt-otp, `OtpInputComponent`, `PasswordStrengthComponent` | solo route di login/account |
|
|
32
|
+
| L2 | `ui.dialogs.prompt` | prompt, prompt-date, prompt-time | porta `@angular/material/datepicker` |
|
|
33
|
+
| L2 | `ui.dialogs.select` | select, select-tree, send-to | porta `mat-tree`, `mat-list`, `mat-chips` |
|
|
34
|
+
| L2 | `ui.files` | file-input, file-preview, select-file, select-picture | |
|
|
35
|
+
| L2 | `ui.controls` | button-selector, button-toggle, chips-selector, tree-picker, calendar-empty-header | |
|
|
36
|
+
| L2 | `ui.filters` | `FilterBarComponent` + modello `Filters` | |
|
|
37
|
+
| L2 | `ui.navigation` | `NavigationBarComponent` + definizioni | shell applicativa |
|
|
38
|
+
|
|
39
|
+
### Specifici ARS
|
|
40
|
+
|
|
41
|
+
| Livello | Entry point | Contenuto | Dipendenze pesanti |
|
|
42
|
+
|---|---|---|---|
|
|
43
|
+
| L0.5 | `support.common` | `SupportService`, notifiche, definitions, messages | - |
|
|
44
|
+
| L0.5 | `evolution.common` | `EvolutionService`, account, compliance, login, interceptor auth | - |
|
|
45
|
+
| L2 | `ui.oauth` | `LoginOAuthComponent`, `LoginOAuthOkMSComponent` | `@azure/msal-angular`, `@azure/msal-browser` |
|
|
46
|
+
| L2 | `ui.help` | `HelpService`, `HelpViewerComponent`, modello dei capitoli | - |
|
|
47
|
+
| L2 | `ui.tinymce` | `TinymceEditorDirective`, `TinymceLoaderService`, `TinymceUtils`, `TinyMceEditorComponent`, `langs/it.js` | `tinymce` (caricato a runtime) |
|
|
48
|
+
| L2 | `ui.notifications` | `NotificationsBrowserComponent` (ex `support.ui`) | - |
|
|
49
|
+
| L2 | `clipper.common` | `ClipperService`, documents, login, canali e contatori non letti, interceptor auth | solo il necessario a consultare i documenti |
|
|
50
|
+
| L4 | `clipper.ui` | browser, document, references, search-* e `ClipperDocumentUtilsService` | `clipper.scss` |
|
|
51
|
+
|
|
52
|
+
I peer dependency opzionali (`@azure/msal-*`, `tinymce`) servono
|
|
53
|
+
solo a chi importa rispettivamente `ui.oauth` e `ui.tinymce`: sono dichiarati in
|
|
54
|
+
`peerDependenciesMeta.optional` proprio perche' nessun altro entry point li aggancia.
|
|
55
|
+
|
|
56
|
+
### Grafo delle dipendenze statiche
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
core core.date core.markdown core.validators ui.paginator
|
|
60
|
+
| \
|
|
61
|
+
| ui.shell
|
|
62
|
+
| |
|
|
63
|
+
ui ------|-----------------------------------------------------------
|
|
64
|
+
| | | | | | |
|
|
65
|
+
| | ui.controls ui.filters ui.navigation ui.dialogs.select clipper.common
|
|
66
|
+
| |
|
|
67
|
+
ui.dialogs <-- DialogService extends ShellService: dipende da `ui` E da `ui.shell`
|
|
68
|
+
| | | | | |
|
|
69
|
+
| ui.dialogs.auth ui.dialogs.prompt ui.files ui.help ui.oauth
|
|
70
|
+
| ui.notifications (+ support.common)
|
|
71
|
+
clipper.ui (+ clipper.common, ui.controls, ui.files, ui.dialogs.select)
|
|
72
|
+
|
|
73
|
+
`ui.dialogs` --- import() ---> ui.dialogs.{auth,prompt,select}, ui.files
|
|
74
|
+
Gli archi dinamici puntano all'insu' e sono l'unica ragione per cui quei quattro entry point
|
|
75
|
+
restano fuori dal bundle iniziale. Regge finche' NESSUNO di loro importa `DialogService`: per
|
|
76
|
+
`error()` e `busy()` iniettano `ShellService`.
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
`evolution.common` e `support.common` dipendono solo da `core`.
|
|
80
|
+
|
|
81
|
+
### Regole da rispettare
|
|
82
|
+
|
|
83
|
+
1. Il grafo **statico** tra entry point deve restare un DAG: `ui.dialogs` raggiunge i dialog
|
|
84
|
+
pesanti solo con `import()`, e quei quattro entry point non devono importare `DialogService`
|
|
85
|
+
in nessun modo — ng-packagr rifiuta la build con `circular dependency` al primo che lo fa.
|
|
86
|
+
Per messaggi e attesa iniettano `ShellService`, che sta sotto di loro nel grafo.
|
|
87
|
+
2. I tipi condivisi fra il facade e i dialog pesanti stanno in `ui` (`dialog.definitions.ts`).
|
|
88
|
+
Se un tipo servisse a entrambi e vivesse nel dialog, l'`import()` del facade tornerebbe statico.
|
|
89
|
+
3. Il facade usa `import type` per i tipi dei componenti e `import()` per i valori: e' quello
|
|
90
|
+
che tiene i dialog fuori dal bundle iniziale.
|
|
91
|
+
4. Dopo una modifica, verificare che gli `import()` sopravvivano alla build:
|
|
92
|
+
`grep -o "import('@arsedizioni[^']*')" dist/ars-utils/fesm2022/*ui.dialogs.mjs` deve stampare i nove.
|
|
93
|
+
5. `ui.shell` non importa nulla da `@angular/material` ne' da `@angular/cdk`, e nemmeno da `ui`.
|
|
94
|
+
E' l'unica ragione per cui esiste: se ci finisce dentro un solo simbolo di Material, la shell
|
|
95
|
+
torna a pagare l'intero stack sul percorso di boot. Da verificare dopo ogni build:
|
|
96
|
+
`grep -oE "@angular/(material|cdk)[^'\"]*" dist/ars-utils/fesm2022/*ui.shell.mjs` non deve
|
|
97
|
+
stampare nulla.
|
|
98
|
+
7. Le sovrapposizioni di `ui.shell` stanno nel **top layer** del browser, non nello stack del CDK.
|
|
99
|
+
Da Angular CDK 22 ogni overlay viene aperto come `popover="manual"`, quindi un dialog Material
|
|
100
|
+
non sta piu' a z-index 1000: sta nel top layer, che viene disegnato sopra tutta la pagina
|
|
101
|
+
qualunque cosa dica lo z-index della pagina. Un numero, per quanto alto, non ci arriva sopra:
|
|
102
|
+
per questo `ShellService` promuove anche i suoi due overlay con `showPopover()`.
|
|
103
|
+
Nel top layer l'ordine e' quello di promozione, l'ultimo promosso sta sopra. Da qui le tre
|
|
104
|
+
regole esplicite: `setBusy()` ripromuove il messaggio dopo aver alzato il busy,
|
|
105
|
+
`DialogService.open()` chiama `raiseMessage()` dopo aver aperto un dialog, e chiama
|
|
106
|
+
`clearBusy(true)` senza periodo di grazia. La coppia `--ars-shell-dialog-z-index`/`--ars-shell-busy-z-index`
|
|
107
|
+
(1100/1090) resta valida e serve ancora: e' quello che ordina gli overlay sui browser senza
|
|
108
|
+
Popover API, dove nemmeno il CDK la usa. Se un'applicazione avesse bisogno del vecchio
|
|
109
|
+
comportamento puo' spegnere la Popover API del CDK con
|
|
110
|
+
`{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } }`.
|
|
111
|
+
6. `ui` non importa valori da Material. `PaginatorIntl` e' uscito da li' proprio per questo: era
|
|
112
|
+
l'unico simbolo che ne dipendeva, e faceva pagare `mat-paginator` + `mat-select` + `mat-option`
|
|
113
|
+
a chiunque toccasse `ui.dialogs`. Restano due eccezioni, entrambe volute:
|
|
114
|
+
`MatFormFieldAppearance` in `dialog.definitions.ts`, che e' un `import type` e quindi sparisce
|
|
115
|
+
in compilazione, e `@angular/cdk/layout` (1 KB) di cui `MediaObserver` ha bisogno.
|
|
116
|
+
|
|
117
|
+
### Da dove parte un'applicazione
|
|
118
|
+
|
|
119
|
+
`core` + `ui.shell`. Sono i due entry point che una applicazione ARS carica comunque prima di
|
|
120
|
+
avere una rotta, e gli unici due che non costano Material. `core` porta `SystemUtils`, i modelli,
|
|
121
|
+
`BroadcastService`, `SplashService`, `EnvironmentService`, `ThemeService`; `ui.shell` porta il modo
|
|
122
|
+
di dire all'utente che la sessione e' scaduta o che l'API non risponde.
|
|
123
|
+
|
|
124
|
+
Non sono un entry point solo, e non devono diventarlo: `core` e' L0 e ci dipendono anche
|
|
125
|
+
`clipper.common`, `evolution.common` e `support.common`, che di interfaccia non ne hanno. Fonderli
|
|
126
|
+
significherebbe far dipendere tre entry point headless da uno di UI, cioe' rompere la regola 1.
|
|
127
|
+
|
|
128
|
+
La conseguenza pratica per chi scrive l'applicazione:
|
|
129
|
+
|
|
130
|
+
- shell, interceptor, guard, `provideAppInitializer` -> `ShellService` di `ui.shell`
|
|
131
|
+
- componenti di rotta -> `DialogService` di `ui.dialogs`, che apre anche i dialog pesanti
|
|
132
|
+
|
|
133
|
+
I tre servizi sono una catena, non tre servizi diversi:
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
ShellService info, error, busy*, wait, busyTimer ui.shell
|
|
137
|
+
└ DialogService + open, confirm, delete, toast, ui.dialogs
|
|
138
|
+
select, prompt, sendTo, ... (pigri)
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Quindi chi inietta `DialogService` ha tutto quello che aveva prima: `info`, `error` e `busy` non
|
|
142
|
+
sono spariti, sono ereditati. E non esistono in due copie — c'e' una implementazione sola, quella
|
|
143
|
+
senza Material.
|
|
144
|
+
|
|
145
|
+
`ShellService.info()` e `ShellService.error()` hanno gli stessi parametri, nello stesso ordine,
|
|
146
|
+
delle omonime di `DialogService`: spostare una chiamata dall'una all'altra e' un cambio di servizio
|
|
147
|
+
iniettato e nient'altro.
|
|
148
|
+
|
|
149
|
+
## Differenze rispetto alla versione precedente (22.1.x monolitica)
|
|
150
|
+
|
|
151
|
+
- Nessun barrel radice: `@arsedizioni/ars-utils` esporta solo `ARS_UTILS_VERSION`.
|
|
152
|
+
- `ui` non contiene piu' i dialog: `DialogService` sta in `ui.dialogs`.
|
|
153
|
+
- `ui.application` non esiste piu': i nove metodi che apriva stanno in `DialogService`. I controlli sono in
|
|
154
|
+
`ui.controls`, i file in `ui.files`, i filtri in `ui.filters`, la navigazione in `ui.navigation`.
|
|
155
|
+
- `SystemUtils.markdownToHtml` non esiste piu': usare `MarkdownUtils.toHtml` da `core.markdown`.
|
|
156
|
+
- `SelectableModel` espone `first` e `selectedAny` al posto di `selectedFirst` e `selectedAll`.
|
|
157
|
+
- `support.ui` si chiama `ui.notifications`, `help` si chiama `ui.help`, `tinymce` si chiama `ui.tinymce`.
|
|
158
|
+
- `PaginatorIntl` non sta piu' in `ui`: sta in `ui.paginator`.
|
|
159
|
+
- `ui.tinymce` non dipende piu' da `@tinymce/tinymce-angular`: l'editor e' la direttiva
|
|
160
|
+
`[tinymceEditor]` su una `<textarea>`, e TinyMCE viene caricato a runtime da
|
|
161
|
+
`TinymceLoaderService`. Il componente `<editor>` non esiste piu'.
|
|
162
|
+
- Le direttive validator non stanno piu' in `core`: stanno in `core.validators`, che e' l'unico
|
|
163
|
+
entry point del nucleo a dipendere da `@angular/forms`.
|
|
164
|
+
- I token CSS della shell stanno tutti sotto `--ars-shell-dialog-*` e `--ars-shell-busy-*`: prima
|
|
165
|
+
erano `--ars-dialog-*`, `--ars-scrim-color`, `--ars-busy-*` e `--ars-progress-track-color`, che si
|
|
166
|
+
confondevano con `--ars-dialog-item-*`, cioe' i dialog Material veri. Un'applicazione che ne
|
|
167
|
+
sovrascriveva qualcuno deve rinominarlo.
|
|
168
|
+
- La shell non deve piu' iniettare `DialogService` per mostrare un errore: c'e' `ShellService` in `ui.shell`.
|
|
169
|
+
- `info`, `error`, `busy`, `busySpinner`, `busyHourglass`, `wait`, `busyTimer` e `clearBusy` sono
|
|
170
|
+
passati a `ShellService`. `DialogService` li eredita, quindi nessuna chiamata cambia.
|
|
171
|
+
- `info()` e `error()` restituiscono `ShellMessageRef` invece di `MatDialogRef<InfoDialogComponent>`.
|
|
172
|
+
In myARS nessun chiamante usava quel valore; controllare nelle altre applicazioni.
|
|
173
|
+
- `clearBusy()` accetta `immediate`: `clearBusy(true)` non aspetta i 500 ms di grazia.
|
|
174
|
+
- `BusyTimer` si importa da `ui.shell`, non piu' da `ui.dialogs`.
|
|
175
|
+
- `InfoDialogComponent` e `BusyDialogComponent` non esistono piu': li sostituiscono
|
|
176
|
+
`ShellMessageComponent` e `ShellBusyComponent`, senza Material.
|
|
177
|
+
|
|
178
|
+
## Authors
|
|
179
|
+
Fabio Buscaroli, Alberto Doria
|
|
@@ -17,7 +17,7 @@ import * as i14 from '@angular/material/chips';
|
|
|
17
17
|
import { MatChipsModule } from '@angular/material/chips';
|
|
18
18
|
import * as i12 from '@angular/material/datepicker';
|
|
19
19
|
import { MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
|
|
20
|
-
import { MatDatepickerParseErrorFixDirective } from '@arsedizioni/ars-utils/
|
|
20
|
+
import { MatDatepickerParseErrorFixDirective, ChipsSelectorComponent, ButtonSelectorComponent, ButtonToggleComponent, CalendarEmptyHeader } from '@arsedizioni/ars-utils/ui.controls';
|
|
21
21
|
import * as i4$1 from '@angular/material/divider';
|
|
22
22
|
import { MatDividerModule } from '@angular/material/divider';
|
|
23
23
|
import * as i7 from '@angular/material/expansion';
|
|
@@ -46,7 +46,6 @@ import { ClipperService, ClipperModel, ClipperUtils, ClipperSearchFacetsSnapshot
|
|
|
46
46
|
import { BroadcastService, SystemUtils, ThemeService, ScreenService, DateFormat, FormatPipe, DtoUtils, DateInterval, SelectableModel } from '@arsedizioni/ars-utils/core';
|
|
47
47
|
import * as i1 from '@arsedizioni/ars-utils/ui';
|
|
48
48
|
import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
|
|
49
|
-
import { ChipsSelectorComponent, ButtonSelectorComponent, ButtonToggleComponent, CalendarEmptyHeader } from '@arsedizioni/ars-utils/ui.controls';
|
|
50
49
|
import { switchMap, EMPTY, finalize, Subject } from 'rxjs';
|
|
51
50
|
import { debounceTime, finalize as finalize$1 } from 'rxjs/operators';
|
|
52
51
|
import { startOfToday, startOfDay, subDays, endOfDay, startOfMonth, endOfMonth } from 'date-fns';
|