@cadriciel/ui
v0.9.2
Published
Bibliothèque de composants Angular du Cadriciel (CEREMA) — remplacement de PrimeNG : formulaires, table niveau grille, layout responsive, overlays, carte MapLibre, planification (taskboard), icônes in-house.
Downloads
2,027
Maintainers
stephane.zucattiReadme
@cadriciel/ui
Bibliothèque de composants Angular 21 du Cadriciel (CEREMA). 100 % sans PrimeNG : formulaires (select, multiselect, date, nombre, slider, switch/case/radio, segmenté, listbox, orderlist, picklist), table niveau grille (arbre, groupes, responsive, virtual scroll, réordonnancement, édition, menu d'en-tête, filtres à opérateurs, panneau latéral), layout responsive (breakpoints, primitives), overlays (dialog, drawer, confirm, tooltip, popover, menu, toast, bottom-sheet mobile), navigation (tabs, stepper, accordéon, breadcrumb, orgchart), affichage (chip, tag, badge, avatar, card, progress, skeleton), carte MapLibre (cad-map, fonds IGN Géoplateforme, couches GeoJSON/WMS/WMTS, chrome, outils, cad-map-card), planification (cad-taskboard en cartes ou en liste, socle de modèle commun, calendrier ouvré, axe de temps), ~390 icônes in-house.
Installation
npm i @cadriciel/ui @angular/cdk
npm i maplibre-gl # optionnel : seulement si vous utilisez <cad-map>
npm i chart.js # optionnel : seulement si vous utilisez <cad-chart>styles.scss de l'application :
@use '@cadriciel/ui/styles/tokens'; // variables --cad-* (alias des tokens du studio : --surface-*, --text-*, --accent-*)
@use '@cadriciel/ui/styles/base'; // reset ciblé, focus, .cad-input, CDK overlayThème sombre = classe .theme-dark sur <html>. Densité tactile automatique (.cad-touch) et bottom-sheets sous md.
Utilisation
import { CadButtonComponent, CadFieldComponent, CadInputDirective, CadSelectComponent, CadTableComponent, CadColumnComponent, CadToastService } from '@cadriciel/ui';<cad-field label="Template" required>
<cad-select [(value)]="tpl" [options]="templates" filter clearable/>
</cad-field>
<cad-table [value]="rows" dataKey="id" showSearch paginator [rows]="25" selectionMode="multiple" [(selection)]="sel">
<cad-column field="name" header="Nom" sortable/>
</cad-table>Services API-compatibles PrimeNG pour la migration : CadToastService.add({severity, summary, detail}), CadConfirmService.confirm({...}).
Développement
Workspace : projects/ui (lib) + projects/showcase (démo, ng serve showcase). Tests Vitest : ng test ui. Build : ng build ui → dist/ui.
Publication (mainteneurs)
tools/pack.sh # build + cadriciel-ui-<version>.tgz
npm publish ./dist/ui --access public # npmjs, scope @cadriciel — fait par la CI GitLab (job publish-ui) quand la version changeLicence MIT — icônes dérivées de Lucide (ISC).