@lucca-front/ng 22.0.5 → 22.0.6-rc.1

package/llms/references/tools/angular-api.md

@@ -0,0 +1,337 @@
+# API Angular hors composants
+
+> Providers, injection tokens, pipes et services exportés par `@lucca-front/ng/*` qui ne sont documentés sur la page d'aucun composant (package sans composant, ou symbole éloigné des composants du package). Extraits du code source au tag `v22.0.0` (JSDoc `@deprecated` inclus).
+
+## api (`@lucca-front/ng/api`)
+
+### Services
+
+#### LuApiV3Service
+
+- `getAll(filters: string[] = []): Observable<T[]>`
+- `getPaged(page: number, filters: string[] = []): Observable<T[]>`
+- `searchAll(clue: string, filters: string[] = []): Observable<T[]>`
+- `searchPaged(clue: string, page: number, filters: string[] = []): Observable<T[]>`
+
+#### LuApiV4Service
+
+- `getAll(filters: string[] = []): Observable<T[]>`
+- `getPaged(page = 0, filters: string[] = []): Observable<T[]>`
+- `searchAll(clue = '', filters: string[] = []): Observable<T[]>`
+- `searchPaged(clue = '', page = 0, filters: string[] = []): Observable<T[]>`
+- `count(): Observable<number>`
+
+#### LuApiHybridService
+
+- `getAll(filters: string[] = []): Observable<T[]>`
+- `getPaged(page: number, filters: string[] = []): Observable<T[]>`
+- `searchAll(clue: string, filters: string[] = []): Observable<T[]>`
+- `searchPaged(clue: string, page: number, filters: string[] = []): Observable<T[]>`
+
+### Modules dépréciés
+
+- ⚠️ `LuApiSearcherModule` — use `LuApiPagedSearcherComponent, LuApiSearcherComponent` instead
+
+## core (`@lucca-front/ng/core`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_NATIVE_DATE_ADAPTER_OPTIONS` | `ILuNativeDateAdapterOptions` | — |
+| `PORTAL_CONTEXT` | `unknown` | — |
+| `LOCALE_PLURAL_RULES` | `unknown` | — |
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `intlParams` | `IntlParamsPipe` | `(value: string, args: Record<string, string \| number>): string` | — |
+| `intlPluralLabel` | `IntlPluralLabelPipe` | `(value: string \| LuPluralForms, count: number): string` | — |
+| `luTypeGuard` | `LuTypeGuardPipe` | `(obj: T, typeGuardFn: (arg: T) => arg is U): obj is U` | — |
+
+### Services
+
+#### LuNativeDateAdapter
+
+- `isParsable(text: string, granularity: LuDateGranularity = ELuDateGranularity.day): boolean`
+- `parse(text: string, granularity: LuDateGranularity = ELuDateGranularity.day): Date | undefined`
+- `format(d: Date, format: string): string`
+- `forge(year: number, month: number, date: number): Date`
+- `forgeToday(): Date`
+- `forgeInvalid(): Date`
+- `isValid(d: Date): boolean`
+- `clone(d: Date): Date`
+- `getYear(d: Date): number`
+- `getMonth(d: Date): number`
+- `getDate(d: Date): number`
+- `getDay(d: Date): number`
+- `add(d: Date, count: number, granularity: LuDateGranularity): Date`
+
+#### LuStringDateAdapter
+
+bind to a string with iso 26001 format YYYY-MM-DD
+
+- `forge(year: number, month: number, date: number): string`
+- `forgeToday(): string`
+- `forgeInvalid(): string`
+- `isValid(d: string): boolean`
+- `compare(a: string, b: string, granularity: LuDateGranularity): number`
+- `isParsable(text: string): boolean`
+- `parse(text: string, granularity: LuDateGranularity): string | undefined`
+- `format(d: string, format: string): string`
+- `clone(d: string): string`
+- `getYear(d: string): number`
+- `getMonth(d: string): number`
+- `getDate(d: string): number`
+- `getDay(d: string): number`
+- `add(d: string, count: number, granularity: LuDateGranularity): string`
+
+## core-select/legal-units (`@lucca-front/ng/core-select/legal-units`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `ARCHIVED_LEGAL_UNITS_CONTEXT` | `ArchivedLegalUnitsContext` | — |
+
+## department (`@lucca-front/ng/department`)
+
+### Services
+
+#### LuDepartmentV3Service — ⚠️ Déprécié : use {LuDepartmentService} instead.
+
+- `getTrees()`
+
+#### LuDepartmentV4Service
+
+- `getTrees()`
+
+## dialog/testing (`@lucca-front/ng/dialog/testing`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuDialogDataTesting` | `<T = unknown>(data: LuDialogData<T>)` | — |
+
+## establishment (`@lucca-front/ng/establishment`)
+
+### Services
+
+#### LuEstablishmentService
+
+#### LuLegalUnitService
+
+## formly (`@lucca-front/ng/formly`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuFormly` | `(): EnvironmentProviders` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuFormlyModule` — use provideLuFormly() in a lazy loaded route (and stop using formly please)
+
+## forms/rich-text-input/formatters/html (`@lucca-front/ng/forms/rich-text-input/formatters/html`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuRichTextHTMLFormatter` | `(): Provider` | — |
+
+## forms/rich-text-input/formatters/markdown (`@lucca-front/ng/forms/rich-text-input/formatters/markdown`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuRichTextMarkdownFormatter` | `(transformers?: Transformer[]): Provider` | — |
+
+## forms/rich-text-input/formatters/plain-text (`@lucca-front/ng/forms/rich-text-input/formatters/plain-text`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuRichTextPlainTextFormatter` | `(transformers?: PlainTextTransformer[]): Provider` | — |
+
+## input (`@lucca-front/ng/input`)
+
+### Modules dépréciés
+
+- ⚠️ `LuInputClearerModule` — use `LuInputClearerComponent` instead
+- ⚠️ `LuInputDisplayerModule` — use `LuInputDisplayerDirective` instead
+- ⚠️ `LuInputModule` — use `LuInputDirective, LuInputDisplayerDirective, LuInputClearerComponent` instead
+
+## number (`@lucca-front/ng/number`)
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luNumber` | `LuNumberPipe` | `(number: number, precision = 2)` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuNumberModule` — use `LuNumberPipe` instead
+
+## number-format (`@lucca-front/ng/number-format`)
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luNumberFormat` | `LuFormatNumberPipe` | `(value: number, options: NumberFormatOptions)` | — |
+
+## option (`@lucca-front/ng/option`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_TREE_OPTION_ITEM_TRANSLATIONS` | `unknown` | — |
+| `LU_OPTION_SELECT_ALL_TRANSLATIONS` | `unknown` | — |
+| `LU_OPTION_PLACEHOLDER_TRANSLATIONS` | `unknown` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuOptionItemModule` — use `LuOptionItemComponent` instead
+- ⚠️ `LuTreeOptionItemModule` — use `LuTreeOptionItemComponent` instead
+- ⚠️ `LuOptionPickerModule` — use `LuOptionPickerComponent, LuOptionPickerAdvancedComponent, LuOptionItemComponent` instead
+- ⚠️ `LuTreeOptionPickerModule` — use `LuTreeOptionPickerComponent, LuTreeOptionPickerAdvancedComponent` instead
+- ⚠️ `LuOptionFeederModule` — use `LuOptionFeederComponent` instead
+- ⚠️ `LuTreeOptionFeederModule` — use `LuTreeOptionFeederComponent` instead
+- ⚠️ `LuForOptionsModule` — use `LuForOptionsDirective` instead
+- ⚠️ `LuForTreeOptionsModule` — use `LuForTreeOptionsDirective` instead
+- ⚠️ `LuOptionPagerModule` — use `LuOptionPagerComponent` instead
+- ⚠️ `LuOptionSearcherModule` — use `LuOptionSearcherComponent` instead
+- ⚠️ `LuTreeOptionSearcherModule` — use `LuTreeOptionSearcherComponent` instead
+- ⚠️ `LuTreeOptionOperatorModule` — use `LuTreeOptionFeederComponent, LuForTreeOptionsDirective, LuTreeOptionPagerComponent, LuTreeOptionSearcherComponent` instead
+- ⚠️ `LuOptionSelectAllModule` — use `LuOptionSelectAllComponent` instead
+- ⚠️ `LuOptionModule` — use `LuOptionItemComponent, LuOptionPickerComponent, LuOptionPickerAdvancedComponent, LuOptionPagerComponent, LuOptionFeederComponent, LuOptionSearcherComponent, LuForOptionsDirective, LuForGroupsDirective, LuOptionSelectAllComponent, LuOptionPlaceholderComponent` instead
+- ⚠️ `LuTreeOptionModule` — use `LuTreeOptionItemComponent, LuTreeOptionPickerComponent, LuTreeOptionPickerAdvancedComponent, LuTreeOptionFeederComponent, LuForTreeOptionsDirective, LuTreeOptionPagerComponent, LuTreeOptionSearcherComponent, LuTreeOptionSelectAllComponent` instead
+
+## popup (`@lucca-front/ng/popup`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_POPUP_REF_FACTORY` | `ILuPopupRefFactory` | — |
+| `LU_POPUP_DATA` | `unknown` | Injection token that can be used to access the data that was passed in to a dialog. |
+| `LU_POPUP_CONFIG` | `ILuPopupConfig` | — |
+
+### Services
+
+#### LuPopupRefFactory
+
+- `forge<T, D, R>(component: ComponentType<T>, config: ILuPopupConfig)`
+
+#### LuPopup
+
+- `open<T, D, R>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<ILuPopupConfig> = {}): ILuPopupRef<D, R>`
+
+### Modules dépréciés
+
+- ⚠️ `LuPopupModule` — use `OverlayModule` imports && `LuPopup, { provide: LU_POPUP_CONFIG, useValue: luDefaultPopupConfig }, { provide: LU_POPUP_REF_FACTORY, useClass: LuPopupRefFactory }` providers instead
+
+## safe-content (`@lucca-front/ng/safe-content`)
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luSafeExternalSvg` | `LuSafeExternalSvgPipe` | `(url: string): SafeHtml` | — |
+| `luSafeHtml` | `LuSafeHtmlPipe` | `(value: string, config?: SanitizerConfig): SafeHtml` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuSafeContentModule` — use `LuSafeHtmlPipe` instead
+
+## sidepanel (`@lucca-front/ng/sidepanel`)
+
+### Services
+
+#### LuSidepanel — ⚠️ Déprécié : Use LuModal with `modal.open(component, data, { mode: 'sidepanel' })` instead.
+
+- `open<T extends ILuModalContent, D>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<LuModalConfig> = {}): ILuSidepanelRef<D, LuModalContentResult<T>>`
+
+### Modules dépréciés
+
+- ⚠️ `LuSidepanelModule` — Use LuModal with `modal.open(component, data, { mode: 'sidepanel' })` instead.
+
+## software-icon-wrapper (`@lucca-front/ng/software-icon-wrapper`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_SOFTWARE_ICON_WRAPPER_TRANSLATIONS` | `unknown` | — |
+
+## title (`@lucca-front/ng/title`)
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuTitleStrategy` | `(options: LuTitleStrategyOptions): Provider[]` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_TITLE_TRANSLATE_SERVICE` | `ILuTitleTranslateService` | — |
+
+### Services
+
+#### LuTitleService — ⚠️ Déprécié : use Title strategy instead
+
+- `init(applicationNameTranslationKey: string)`
+- `prependTitle(title: string | ObservableInput<string>)`
+- `overrideFirstTitlePart(title: string | ObservableInput<string>)`
+
+#### LuTitleStrategy
+
+- `updateTitle(routerState: RouterStateSnapshot)`
+- `prependTitle(title: string | ObservableInput<string>)`
+- `overrideFirstTitlePart(title: string | ObservableInput<string>)`
+
+### Modules dépréciés
+
+- ⚠️ `LuTitleModule` — use title streatgy instead
+
+## user (`@lucca-front/ng/user`)
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DEFAULT_DISPLAY_POLICY` | `LuDisplayFormat` | Injection token that can be used to change the default displayed user format. |
+| `LU_USER_SEARCHER_TRANSLATIONS` | `unknown` | — |
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luUserDisplay` | `LuUserDisplayPipe` | `(user: T, options?: Partial<LuUserDisplaySingleOptions>)` | Displays a user name according to specified format. Supported formats: f for first name, F for first initial, l for last name, L for last initial. |
+
+### Services
+
+#### LuUserHomonymsService
+
+- `extractHomonyms(users: U[]): U[]`
+- `enrichHomonyms(homonyms: U[]): Observable<U[]>`
+
+#### LuUserV3Service
+
+- `getMe(): Observable<U>`
+
+### Modules dépréciés
+
+- ⚠️ `LuUserDisplayModule` — use `LuUserDisplayPipe` imports && `LuUserDisplayPipe` providers instead
+- ⚠️ `LuUserMeOptionModule` — use `LuUserMeOptionDirective` instead
+- ⚠️ `LuUserSearcherModule` — use `LuUserPagedSearcherComponent` instead

package/llms/references/tools/animations.md

@@ -0,0 +1,173 @@
+# Animations
+
+# Content
+
+**Exemple : Fade**
+
+```html
+/* 1. Appeler provideAnimations */
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+@NgModule({
+	providers: [provideAnimations()]
+})
+class AppModule {}
+
+/* 2. Utiliser luFadeAnimationFactory() */
+@Component({
+	selector: 'story-fade-animation',
+	template: \`
+		<div class="grid">
+			<div class="grid-column ng-demo-block" style="--grid-colspan: 3">
+				<h3 class="pr-u-margin0">
+					Fade
+					<button class="button mod-S" (click)="fading = !fading">{{ fading ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!fading) {
+					<div class="animated-block" [@fadeAnimation]>Fade</div>
+				}
+			</div>
+		</div>\`,
+	styleUrl: './animations.scss',
+	animations: [luFadeAnimationFactory()],
+})
+class FadeAnimationStory {
+	fading = false;
+}
+```
+**Exemple : Scale**
+
+```html
+/* 1. Appeler provideAnimations */
+Appeler { provideAnimations } from '@angular/platform-browser/animations';
+
+@NgModule({
+	providers: [provideAnimations()]
+})
+class AppModule {}
+
+/* 2. Utiliser luScaleAnimationFactory() */
+@Component({
+	selector: 'story-scale-animation',
+	template: \`
+		<div class="grid">
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Scale
+					<button class="button mod-S" (click)="scalingCenter = !scalingCenter">{{ scalingCenter ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!scalingCenter) {
+					<div class="animated-block" [@scaleAnimation]>Scale from center</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Left <button class="button mod-S" (click)="scalingLeft = !scalingLeft">{{ scalingLeft ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!scalingLeft) {
+					<div class="animated-block" [@scaleAnimation]="'left'">Scale from left</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Right
+					<button class="button mod-S" (click)="scalingRight = !scalingRight">{{ scalingRight ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!scalingRight) {
+					<div class="animated-block" [@scaleAnimation]="'right'">Scale from right</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Top
+					<button class="button mod-S" (click)="scalingTop = !scalingTop">{{ scalingTop ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!scalingTop) {
+					<div class="animated-block" [@scaleAnimation]="'top'">Scale from top</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Bottom
+					<button class="button mod-S" (click)="scalingBottom = !scalingBottom">{{ scalingBottom ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!scalingBottom) {
+					<div class="animated-block" [@scaleAnimation]="'bottom'">Scale from bottom</div>
+				}
+			</div>
+		</div>
+	\`,
+	styleUrl: './animations.scss',
+	animations: [luScaleAnimationFactory()],
+})
+class ScaleAnimationStory {
+	scalingLeft = false;
+	scalingRight = false;
+	scalingTop = false;
+	scalingBottom = false;
+	scalingCenter = false;
+}
+```
+**Exemple : Slide**
+
+```html
+/* 1. Appeler provideAnimations */
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+@NgModule({
+	providers: [provideAnimations()]
+})
+class AppModule {}
+
+/* 2. Utiliser luSlideAnimationFactory() */
+@Component({
+	selector: 'story-slide-animation',
+	template: \`
+		<div class="grid">
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Left <button class="button mod-S" (click)="slidingLeft = !slidingLeft">{{ slidingLeft ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!slidingLeft) {
+					<div class="animated-block" [@slideAnimation]="'left'">Slide from left</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Right
+					<button class="button mod-S" (click)="slidingRight = !slidingRight">{{ slidingRight ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!slidingRight) {
+					<div class="animated-block" [@slideAnimation]="'right'">Slide from right</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Top
+					<button class="button mod-S" (click)="slidingTop = !slidingTop">{{ slidingTop ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!slidingTop) {
+					<div class="animated-block" [@slideAnimation]="'top'">Slide from top</div>
+				}
+			</div>
+			<div class="grid-column ng-demo-block">
+				<h3 class="pr-u-margin0">
+					Bottom
+					<button class="button mod-S" (click)="slidingBottom = !slidingBottom">{{ slidingBottom ? 'Show' : 'Hide' }}</button>
+				</h3>
+				@if (!slidingBottom) {
+					<div class="animated-block" [@slideAnimation]="'bottom'">Slide from bottom</div>
+				}
+			</div>
+		</div>
+	\`,
+	styleUrl: './animations.scss',
+	animations: [luSlideAnimationFactory()],
+})
+class SlideAnimationStory {
+	slidingLeft = false;
+	slidingRight = false;
+	slidingTop = false;
+	slidingBottom = false;
+}
+```

package/llms/references/tools/mixins.md

@@ -0,0 +1,106 @@
+# Mixins SCSS
+
+# Icônes
+
+Génère une icône grâce à la mixin `icon.generate`.
+
+```css
+@use '@lucca-front/icons/src/commons/utils/icon';
+@include icon.generate('heart');
+```
+
+Il est très souvent utile d'utiliser la mixin generate dans un `::before`
+
+# Loadings
+
+## Spinner
+
+```css
+@use '@lucca-front/scss/src/commons/utils/loading';
+@include loading.spinner(); 
+```
+
+| Propriété | Valeur par défaut | Description |
+| --- | --- | --- |
+| `$size` | `1.5rem` | Taille du spinner |
+
+## Gradient
+
+```css
+@use '@lucca-front/scss/src/commons/utils/loading';
+@include loading.gradient(); 
+```
+
+| Propriété | Valeur par défaut | Description |
+| --- | --- | --- |
+| `$backgroundColor` | `transparent` | Couleur de fond |
+| `$color` | `color.transparentize(var(--palettes-neutral-900), 0.1)` | Couleur du dégradé |
+
+# Media et container queries
+
+Vous pouvez utiliser les breakpoints via les mixins `max` et `min`ou `between` disponibles pour les medias ou les containers.
+
+```css
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
+
+@include media.max('M') {…}
+@include media.min('M') {…}
+@include media.between('S', 'L') {…}
+
+@include container.max('M') {…}
+@include container.min('M') {…}
+@include container.between('S', 'L') {…}
+```
+
+Si les valeurs prédéfinies ne conviennent pas, les valeurs personnalisées des breakpoints sont autorisées et converties automatiquement de `px` en `em`.
+
+Il est possible pour les containers queries de nommer le container avec le paramètre `$name`.
+
+Le paramètre `$property: height` permet de basculer les tests de la largeur à la hauteur. 
+
+# Masquage
+
+Masque visuellement un élément sans pour autant le retirer de la couche sémantique du document.
+
+```css
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@include a11y.mask;
+```
+
+La classe `.pr-u-mask` fait directement appel à cette mixin.
+
+# Focus
+
+Marque le focus d'un élément de la page. Il est recommandé d'utiliser `:focus-visible` plutôt que `:focus` afin de n'afficher le contour de sélection seulement lors de la navigation clavier ainsi que pour les éléments nécessitant une saisie clavier (ex: textfield). 
+
+```css
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@include a11y.focusVisible();
+```
+
+| Propriété | Valeur par défaut | Description |
+| --- | --- | --- |
+| `$borderRadius` | `false` | `border-radius` du composant au focus. |
+| `$offset` | `2px` | Espace entre le composant et l'outline. |
+| `$color` | `var(--palettes-product-700)` | Couleur de l'outline. |
+
+# Colors
+
+## Transparantize
+
+Permet d'appliquer une transparence à une couleur.
+
+```css
+@use '@lucca-front/scss/src/commons/utils/color';
+color.transparentize(var(--palettes-neutral-900), 0.6); 
+```
+
+# Overflow scrollblock [v19.2]
+
+Permet de bloquer l'affichage de la barre de scroll sur le body, afin d'éviter un double scroll lors de l'affichage d'une fenêtre de dialogue.
+
+```css
+@use '@lucca-front/scss/src/commons/utils/overflow';
+@include overflow.scrollblock;
+```

package/llms/references/tools/numbers.md

@@ -0,0 +1,81 @@
+# Nombres / LuNumber
+
+# Content
+
+**Exemple : Base**
+
+```html
+/* 1. Importer LuNumberPipe */
+import { LuNumberPipe } from '@lucca-front/ng/number';
+
+@NgModule({
+	imports: [LuNumberPipe]
+})
+class StoriesModule {}
+
+/* 2. Template */
+<table class="table">
+	<thead class="table-head">
+		<tr class="table-head-row">
+			<th class="table-head-row-cell">Number</th>
+			<th class="table-head-row-cell mod-alignRight">Value</th>
+			<th class="table-head-row-cell mod-alignRight">Value aligned</th>
+		</tr>
+	</thead>
+	<tbody class="table-body">
+		<tr class="table-body-row">
+			<td class="table-body-row-cell">π</td>
+			<td class="table-body-row-cell mod-alignRight">{{ pi }}</td>
+			<td class="table-body-row-cell mod-alignRight" [innerHtml]="pi | luNumber"></td>
+		</tr>
+		<tr class="table-body-row">
+			<td class="table-body-row-cell">Dix</td>
+			<td class="table-body-row-cell mod-alignRight">{{ ten }}</td>
+			<td class="table-body-row-cell mod-alignRight" [innerHtml]="ten | luNumber"></td>
+		</tr>
+		<tr class="table-body-row">
+			<td class="table-body-row-cell"><span>e</span></td>
+			<td class="table-body-row-cell mod-alignRight">{{ e }}</td>
+			<td class="table-body-row-cell mod-alignRight" [innerHtml]="e | luNumber"></td>
+		</tr>
+		<tr class="table-body-row">
+			<td class="table-body-row-cell">Milliers</td>
+			<td class="table-body-row-cell mod-alignRight">{{ thousands }}</td>
+			<td class="table-body-row-cell mod-alignRight" [innerHtml]="thousands | luNumber"></td>
+		</tr>
+	</tbody>
+</table>
+
+/* 3. Utiliser le pipe luNumber */
+@Component({
+	selector: 'numbers-stories',
+	templateUrl: './numbers.stories.html',
+})
+class NumbersStory {
+	public pi = 3.141592;
+	public ten = 10;
+	public e = 2.71727;
+	public thousands = 12345;
+}
+```
+**Exemple : Décimaux**
+
+```html
+/* 1. Importer LuNumberPipe */
+import { LuNumberPipe } from '@lucca-front/ng/number';
+
+@NgModule({
+	imports: [LuNumberPipe]
+})
+class StoriesModule {}
+
+/* 2. Utiliser le pipe luNumber */
+@Component({
+	selector: 'precision-stories',
+	template: \`<code [innerHTML]="value | luNumber: precision"></code>\`,
+})
+class PrecisionStory {
+	value = input<number>();
+	precision = input<number>();
+}
+```