Home

ng-core-ui

Libreria UI condivisa per le applicazioni GPA (Gruppo Progetti Avanzati). Fornisce layout, componenti, gestione token/ambiente, routing pre-configurato, temi Angular Material 3 e utilità Tailwind CSS v4.

• Pacchetto: @gpa-gruppo-progetti-avanzati-srl/ng-core-ui
• Versione: 0.0.37
• Angular: 21.x · Material: 21.x · Tailwind: 4.x

---

Cosa include

Area	Cosa fornisce
Layout	FullLayoutComponent (sidenav + toolbar + app-switcher), RightLayoutComponent (toolbar + app-switcher) e SimpleLayoutComponent
Componenti	Card, Topbar, PageHeader, Toast, Confirm, Alert, LoadingOverlay, DataTable, FormShell
Sistema	Bootstrap automatico (token + ambiente), guard permessi, interceptor HTTP
Temi	GPA, Cobalt, Forest — basati su Angular Material 3 + Tailwind CSS v4
Schematics	ng add, generate-page, generate-routes per setup e scaffolding rapido

---

Navigazione rapida

Per iniziare

• → Installazione e setup — ng add, configurazione automatica, prima app
• → Configurazione ambiente — environment.json, temi, URL personalizzati
• → Routing e permessi — CoreRoute, MenuGuard, generate-page

Layout

• → FullLayout — shell completa con sidenav collassabile e app-switcher
• → RightLayout — toolbar + app-switcher, senza sidenav di navigazione
• → SimpleLayout — shell minimale con sola toolbar

Componenti UI

• → Card — card con icona, titolo e bottone azione
• → Topbar — barra di sezione con slot per bottoni custom
• → Page Header — intestazione pagina con divisore
• → Toast — notifiche non bloccanti
• → Confirm — dialog di conferma modale (Promise<boolean>)
• → Alert — dialog informativo modale (Promise<void>)
• → Loading Overlay — spinner che copre il container padre
• → DataTable — tabella con paginazione server-side, colonne custom, azioni
• → FormShell — form dichiarativi con Angular Signal Forms

Servizi e sistema

• → SystemService — segnali globali, bootstrap, permessi
• → LoadingService — contatore XHR, isLoading signal
• → MenuGuard — protezione rotte basata su token
• → Interceptors — loadingInterceptor, contextInterceptor

Temi e stili

• → Temi e branding — Angular Material 3, Tailwind, color bridge, logo

---

Architettura bootstrap

SystemService (constructor)
      │
      ├─ GET /environment/environment.json  → environment (appId, appTitle, theme, logoutPath…)
      │
      └─ GET /api/token (header AppId)     → whoami, paths, menuTree (computed), apps, sites

Il bootstrap parte automaticamente nel costruttore di SystemService via queueMicrotask. Chiamate concorrenti riusano la stessa Promise (deduplicazione). In caso di errore lo stato layoutState() === 'error' mostra la pagina di errore inline.