@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), éditeur de code Monaco (cad-code-editor, chargement unique, plusieurs instances par page), texte riche en ligne (cad-richtext, sans dépendance, HTML nettoyé, relit les valeurs Quill), éditeur par blocs à la Notion (cad-block-editor sur Editor.js, même JSON que la doc du studio, et cad-block-view pour l'afficher), ~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>
npm i monaco-editor@^0.52  # optionnel : seulement si vous utilisez <cad-code-editor>
npm i @editorjs/editorjs @editorjs/header @editorjs/underline @editorjs/delimiter @calumk/editorjs-codecup editorjs-alert  # optionnel : <cad-block-editor>

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 overlay

Thè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>

Éditeur de code

Monaco se déclare une seule fois pour l'application, et ses fichiers se copient dans les assets :

// app.config.ts
providers: [provideCadMonaco({ baseUrl: 'assets/monaco/min/vs' })]

// angular.json > build > options > assets
{ "glob": "**/*", "input": "node_modules/monaco-editor/min/vs", "output": "assets/monaco/min/vs" }

<cad-code-editor [(value)]="sql" language="sql" height="320px"/>
<cad-code-editor [(ngModel)]="code" language="typescript" path="functions/tarif.ts" [extensions]="[completion]"/>

Chaque éditeur a son propre modèle. Un chargement raté n'est pas mémorisé : « Réessayer » relance. Les extensions (CadMonacoExtension : complétion, types) sont installées au premier éditeur et libérées avec le dernier.

Texte riche

Champ de formulaire sans dépendance : titres, gras, italique, souligné, barré, code, listes, citation, liens. La valeur est un HTML nettoyé par liste blanche (p h2 h3 strong em u s code ul ol li blockquote a br). Un collage depuis Word ou le web est nettoyé, et une valeur écrite avec p-editor (Quill 2, puces en <ol data-list>) se relit telle quelle.

<cad-field label="Compte rendu">
  <cad-richtext formControlName="compteRendu" placeholder="Rédige le compte rendu…" [maxLength]="5000" [toolbar]="['bold', 'italic', 'bullet', 'link']"/>
</cad-field>

format="markdown" rend la valeur en Markdown, l'édition restant visuelle. Les raccourcis # , - , 1. , > en début de ligne créent titre, liste ou citation, et un texte Markdown collé est converti. cadCleanRichText(html), cadMarkdownToRichText(md) et cadRichTextToMarkdown(html) exposent le nettoyage et les conversions seuls.

Éditeur par blocs

L'éditeur de la documentation du studio, à la Notion (menu « / », poignée de déplacement), sur Editor.js. Le document est le JSON Editor.js { time, blocks, version } : un document existant s'ouvre tel quel.

<cad-block-editor [(value)]="doc" [imagePicker]="choisirImage" [linkPicker]="choisirLien" maxWidth="760px"/>
<cad-block-view [data]="doc" [highlight]="colorer" (toc)="sommaire = $event" (linkClick)="naviguer($event)">
  <ng-template cadBlockTemplate="openapi" let-block>…</ng-template>
</cad-block-view>

Blocs par défaut : paragraphe et titre (alignables), souligné, code, séparateur, encadré, vidéo YouTube. L'image et le lien s'activent quand l'application fournit imagePicker et linkPicker. tools ajoute ou remplace des outils Editor.js. Le rendu nettoie le HTML par liste blanche et n'intègre que YouTube.

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 change

Licence MIT — icônes dérivées de Lucide (ISC).