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

package/llms/references/components/fileupload/fileupload.component.md

@@ -0,0 +1,91 @@
+# fileupload — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-file-fileupload-angular-basic--docs)
+
+## Angular
+
+Les stories "Single file" et "Multiple files" simulent un usage avec Lucca Files. Consultez la section Mise en place en bas de page pour vous aider lors de l'implémentation.
+
+## Mise en place
+
+FileUpload is a component designed to manage file uploads. It aims to standardize both the technical and visual
+approaches to file uploads.
+
+### Utilisation
+
+For the purely visual and interactive part, you'll need `lu-single-file-upload` if you only want to manage
+one file at a time, or `lu-multiple-file-upload` if you want to manage multiple files at once.
+
+Both of these components come from `@lucca-front/ng/file-upload`.
+
+In both components, simply connect to the `filePicked` event to retrieve the files sent by the user, these are of
+the native Javascript File type, and each file will emit an event. In the case of multiple selections, an event
+will be emitted per file.
+
+Then, you'll just need to manage the upload of these files via LuccaFiles for most cases.
+
+Once the files are sent, the display management changes depending on the approach, single or multi.
+
+### Details
+
+In both cases, `fileUploadFeature` is simply the SignalStore provided by `@lucca/cdk` for interactions with LuccaFiles,
+`luFileEntry` is a pipe that transforms a `FileUpload` into a `LuccaFileEntry`.
+
+It's also possible to specify a list of accepted files, solely for UX purposes, as the file type is not enforced by the
+browser in any way, this list is an `Array<{ format: string; name?: string; }>`, `name` being used for display only.
+
+### Basic
+
+Component selector : `lu-single-file-upload`
+
+Component selector : `lu-multi-file-upload`
+
+```js
+import { SingleFileUploadComponent } from '@lucca-front/ng/file-upload';
+import { MultiFileUploadComponent } from '@lucca-front/ng/file-upload';
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-multi-file-upload
+		fileMaxSize="5000000"
+		illustration="paper"
+		(filePicked)="fileUploadFeature.uploadFiles([$event])"
+	/>
+</lu-form-field>
+<lu-file-entry-wrapper>
+	@for (fileUpload of fileUploadFeature.fileUploads(); track $index) {
+		<lu-file-entry
+			[entry]="fileUpload | fileUploadToLFEntry"
+			[state]="fileUpload.state"
+			[previewUrl]="getPreviewUrl(fileUpload)"
+			[inlineMessageError]="fileUpload.error?.detail"
+			(deleteFile)="deleteFile(fileUpload)"
+		/>
+	}
+</lu-file-entry-wrapper>
+```
+
+```html
+@let fileUpload = fileUploadFeature.fileUploads()[0];
+<lu-form-field label="Label">
+	@if (fileUpload) {
+		<lu-file-entry-wrapper>
+			<lu-file-entry
+				size="L"
+				[entry]="fileUpload | fileUploadToLFEntry"
+				[state]="fileUpload.state"
+				[previewUrl]="getPreviewUrl(fileUpload)"
+				[inlineMessageError]="fileUpload.error?.detail"
+				(deleteFile)="deleteFile(fileUpload)"
+			/>
+		</lu-file-entry-wrapper>
+	} @else {
+		<lu-single-file-upload
+			fileMaxSize="5000000"
+			[accept]="accept"
+			(filePicked)="fileUploadFeature.uploadFiles([$event])"
+		/>
+	}
+</lu-form-field>
+```

package/llms/references/components/fileupload/fileupload.md

@@ -0,0 +1,246 @@
+# fileupload
+
+## Import
+
+```typescript
+import { FileDropzoneComponent, FileEntryComponent, FileEntryWrapperComponent, MultiFileUploadComponent, SingleFileUploadComponent } from '@lucca-front/ng/file-upload';
+```
+
+## Basic Usage
+
+```html
+<lu-form-field label="Label"> <lu-multi-file-upload fileMaxSize="5000000" illustration="paper" (filePicked)="fileUploadFeature.uploadFiles([$event])" /> </lu-form-field> <lu-file-entry-wrapper> @for(fileUpload of fileUploadFeature.fileUploads(); track $index) { <lu-file-entry [entry]="fileUpload | fileUploadToLFEntry" [state]="fileUpload.state" [previewUrl]="getPreviewUrl(fileUpload)" [inlineMessageError]="fileUpload.error?.detail" (deleteFile)="deleteFile(fileUpload)" /> } </lu-file-entry-wrapper>
+```
+
+## API Reference
+
+### FileDropzoneComponent (component)
+
+**Selector:** `lu-file-dropzone`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `accept` | `accept` | `Array<{
+			format: string;
+			name?: string;
+		}>` | `[]` | — | — | Liste des formats de fichiers acceptés. |
+| `structure` | `structure` | `boolean` | `false` | — | `luBooleanAttribute` | Augmente le border-radius du champ pour l’utiliser en élément de structure. |
+| `fileMaxSize` | `fileMaxSize` | `unknown` | `80 * MEGA_BYTE` | — | `luNumberAttribute` | Limite le poids des fichiers importables (en octets). |
+| `size` | `size` | `FileUploadSize \| null` | `null` | — | — | Modifie la taille du composant. |
+| `password` | `password` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `illustration` | `illustration` | `/** @deprecated use 'invoice' instead */
+		'paper' \| 'picture' \| 'invoice'` | `'invoice'` | — | — | Modifie l’illustration de l’icône dans la zone de drop. |
+| `required` | `required` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `buttonFilled` | `buttonFilled` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le bouton comme action principale de la page. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `filePicked` | `filePicked` | `File` | — |
+
+### FileEntryComponent (component)
+
+**Selector:** `lu-file-entry`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `state` | `state` | `'success' \| 'loading' \| 'error' \| 'default'` | `'default'` | — | — | — |
+| `displayFileName` | `displayFileName` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le nom des fichiers importés sous l’image en vue media. |
+| `structure` | `structure` | `boolean` | `false` | — | `luBooleanAttribute` | Augmente le border-radius du champ pour l’utiliser en élément de structure. |
+| `inlineMessageError` | `inlineMessageError` | `string \| null` | `null` | — | — | — |
+| `entry` | `entry` | `FileEntry` | — | ✅ | — | — |
+| `size` | `size` | `FileEntrySize \| null` | `null` | — | — | Modifie la taille du composant. |
+| `iconOverride` | `iconOverride` | `string` | `''` | — | — | — |
+| `downloadURL` | `downloadURL` | `string` | `''` | — | — | — |
+| `openInNewTab` | `openInNewTab` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `password` | `password` | `string` | `''` | — | — | — |
+| `media` | `media` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche les fichiers importés avec une mise en forme adaptée aux visuels. |
+| `previewUrl` | `previewUrl` | `string` | `''` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `passwordChange` | `passwordChange` | `void` | — |
+| `deleteFile` | `deleteFile` | `void` | — |
+
+### FileEntryWrapperComponent (component)
+
+**Selector:** `lu-file-entry-wrapper`
+
+### MultiFileUploadComponent (component)
+
+**Selector:** `lu-multi-file-upload`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `accept` | `accept` | `Array<{
+			format: string;
+			name?: string;
+		}>` | `[]` | — | — | Liste des formats de fichiers acceptés. |
+| `structure` | `structure` | `boolean` | `false` | — | `luBooleanAttribute` | Augmente le border-radius du champ pour l’utiliser en élément de structure. |
+| `fileMaxSize` | `fileMaxSize` | `unknown` | `80 * MEGA_BYTE` | — | `luNumberAttribute` | Limite le poids des fichiers importables (en octets). |
+| `size` | `size` | `FileUploadSize \| null` | `null` | — | — | Modifie la taille du composant. |
+| `password` | `password` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `illustration` | `illustration` | `/** @deprecated use 'invoice' instead */
+		'paper' \| 'picture' \| 'invoice'` | `'invoice'` | — | — | Modifie l’illustration de l’icône dans la zone de drop. |
+| `required` | `required` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `buttonFilled` | `buttonFilled` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le bouton comme action principale de la page. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `filePicked` | `filePicked` | `File` | — |
+
+### SingleFileUploadComponent (component)
+
+**Selector:** `lu-single-file-upload`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `accept` | `accept` | `Array<{
+			format: string;
+			name?: string;
+		}>` | `[]` | — | — | Liste des formats de fichiers acceptés. |
+| `structure` | `structure` | `boolean` | `false` | — | `luBooleanAttribute` | Augmente le border-radius du champ pour l’utiliser en élément de structure. |
+| `fileMaxSize` | `fileMaxSize` | `unknown` | `80 * MEGA_BYTE` | — | `luNumberAttribute` | Limite le poids des fichiers importables (en octets). |
+| `size` | `size` | `FileUploadSize \| null` | `null` | — | — | Modifie la taille du composant. |
+| `password` | `password` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `illustration` | `illustration` | `/** @deprecated use 'invoice' instead */
+		'paper' \| 'picture' \| 'invoice'` | `'invoice'` | — | — | Modifie l’illustration de l’icône dans la zone de drop. |
+| `required` | `required` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `buttonFilled` | `buttonFilled` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le bouton comme action principale de la page. |
+| `entry` | `entry` | `FileEntry \| null` | `null` | — | — | — |
+| `state` | `state` | `'loading' \| 'success' \| 'error' \| 'default'` | `'default'` | — | — | — |
+| `inlineMessageError` | `inlineMessageError` | `string \| null` | `null` | — | — | — |
+| `previewUrl` | `previewUrl` | `string \| null` | `null` | — | — | — |
+| `displayFileName` | `displayFileName` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le nom des fichiers importés sous l’image en vue media. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `filePicked` | `filePicked` | `File` | — |
+| `deleteFile` | `deleteFile` | `void` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./fileupload.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/fileupload/fileupload.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/fileupload/fileupload.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-file-fileupload-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
++ component `FileEntryWrapperComponent` (lu-file-entry-wrapper)
+`FileDropzoneComponent` :
+  ~ `structure` : transform booleanAttribute → luBooleanAttribute
+  ~ `fileMaxSize` : number → unknown, transform ∅ → luNumberAttribute
+  ~ `password` : transform booleanAttribute → luBooleanAttribute
+  ~ `required` : transform booleanAttribute → luBooleanAttribute
+  ~ `buttonFilled` : transform booleanAttribute → luBooleanAttribute
+`FileEntryComponent` :
+  + `structure` : boolean
+  ~ `displayFileName` : transform booleanAttribute → luBooleanAttribute
+  ~ `openInNewTab` : transform booleanAttribute → luBooleanAttribute
+  ~ `media` : transform booleanAttribute → luBooleanAttribute
+`MultiFileUploadComponent` :
+  ~ `structure` : transform booleanAttribute → luBooleanAttribute
+  ~ `fileMaxSize` : number → unknown, transform ∅ → luNumberAttribute
+  ~ `password` : transform booleanAttribute → luBooleanAttribute
+  ~ `required` : transform booleanAttribute → luBooleanAttribute
+  ~ `buttonFilled` : transform booleanAttribute → luBooleanAttribute
+`SingleFileUploadComponent` :
+  ~ `structure` : transform booleanAttribute → luBooleanAttribute
+  ~ `fileMaxSize` : number → unknown, transform ∅ → luNumberAttribute
+  ~ `password` : transform booleanAttribute → luBooleanAttribute
+  ~ `required` : transform booleanAttribute → luBooleanAttribute
+  ~ `buttonFilled` : transform booleanAttribute → luBooleanAttribute
+  ~ `displayFileName` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `openInNewTab` input on `lu-file-entry` to open the `downloadURL` in a new tab.
+
+##### Fixed
+
+- Icon preview of `lu-file-entry`.
+
+#### 21.3.0
+
+##### Added
+
+- `FILE_ENTRY_STATE`, `FILE_ENTRY_SIZE`, `FILE_UPLOAD_STATE` and `FILE_UPLOAD_SIZE` constants, together with their matching types, are now publicly exported and used to type the `state` and `size` inputs.
+
+#### 21.2.2
+
+##### Fixed
+
+- File size is displayed even when it equals `0`.
+
+#### 21.2.0
+
+##### Added
+
+- Content slot to display a tag next to the file.
+- `media` and `size` of a `lu-file-entry` can now be left undefined.
+
+#### 21.1.4
+
+##### Fixed
+
+- Divider rendering between file entries.
+
+#### 21.1.2
+
+##### Added
+
+- `buttonFilled` input to render the upload button with the filled style instead of the outlined one.
+
+#### 21.1.0
+
+##### Added
+
+- `formatFileSize` function is now publicly exported.
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+##### Fixed
+
+- The displayed file type now matches the actual file.
+
+#### 20.3.1
+
+##### Fixed
+
+- Typing of the `state` input.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-single-file-upload`, `lu-multi-file-upload`, `lu-file-dropzone` and `lu-file-entry` components, with the `accept`, `fileMaxSize`, `required`, `state`, `size`, `illustration`, `iconOverride`, `displayFileName`, `downloadURL`, `previewUrl`, `password`, `inlineMessageError` and `intl` inputs, plus the `filePicked`, `deleteFile` and `passwordChange` outputs.

package/llms/references/components/filterbar/filterbar.component.md

@@ -0,0 +1,302 @@
+# filterbar — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-filterbar-angular--docs)
+
+## Angular
+
+Component selector : `lu-filter-bar`
+
+### Filter pills optionnelles
+
+`optional` permet de conditionner l'affichage d'une filter pill. Elle sera masquée par défaut et accessible depuis le bouton filtre.
+
+Une filter pill optionnelle doit obligatoirement contenir un attribut `name` (dont la valeur est libre) afin de pouvoir être affichée.
+
+### luFilterPillAddonBefore et luFilterPillAddonAfter
+
+Deux directives structurelles permettent de projeter du contenu aux extrémités de la FilterBar.
+
+| **`*`**`luFilterPillAddonBefore` | Placé **avant** les pills, dans la zone scrollable, avec un séparateur vertical automatique. Exemple : un SegmentedControl ou un sélecteur de vues. |
+| --- | --- |
+| **`*`**`luFilterPillAddonAfter` | Placé **après** les pills, aligné à droite. Exemple : un bouton d'export. |
+
+### Bar save
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { LuCoreSelectApiV4Directive } from '@lucca-front/ng/core-select/api';
+import { DateInputComponent, DateRangeInputComponent } from '@lucca-front/ng/date2';
+import { DividerComponent } from '@lucca-front/ng/divider';
+import { DropdownActionComponent, DropdownItemComponent, DropdownMenuComponent, LuDropdownTriggerDirective } from '@lucca-front/ng/dropdown';
+import { FilterBarComponent, FilterPillAddonAfterDirective, FilterPillAddonBeforeDirective, FilterPillComponent } from '@lucca-front/ng/filter-pills';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { CheckboxInputComponent, TextInputComponent } from '@lucca-front/ng/forms';
+import { LuMultiSelectInputComponent } from '@lucca-front/ng/multi-select';
+import { NumericBadgeComponent } from '@lucca-front/ng/numeric-badge';
+import { SegmentedControlComponent, SegmentedControlFilterComponent } from '@lucca-front/ng/segmented-control';
+import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
+import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+import { IconComponent } from '@lucca/prisme/icon';
+```
+
+```html
+<lu-filter-bar>
+	<lu-segmented-control class="filterBar-segmentedControl" *luFilterPillAddonBefore [(ngModel)]="example">
+		<ng-template #label0>
+			Tous
+			<lu-numeric-badge [value]="12" />
+		</ng-template>
+		<ng-template #label1>
+			En cours d’approbation
+			<lu-numeric-badge [value]="5" />
+		</ng-template>
+		<ng-template #label2>
+			Approuvés
+			<lu-numeric-badge [value]="3" />
+		</ng-template>
+		<ng-template #label3>
+			Clos
+			<lu-numeric-badge [value]="4" />
+		</ng-template>
+		<ng-template #label4>
+			Produit
+			<button type="button" size="XS" luButton="ghost" aria-expanded="false" disclosure [luDropdown]="optionsDropdown">
+				<lu-icon alt="Options" icon="menuDots" />
+			</button>
+			<ng-template #optionsDropdown>
+				<lu-dropdown-menu>
+					<lu-dropdown-item>
+						<button lu-dropdown-action type="button">
+							<lu-icon icon="edit" />
+							Modifier le nom
+						</button>
+					</lu-dropdown-item>
+					<lu-dropdown-item>
+						<button lu-dropdown-action type="button" critical>
+							<lu-icon icon="trash" />
+							Supprimer
+						</button>
+					</lu-dropdown-item>
+				</lu-dropdown-menu>
+			</ng-template>
+		</ng-template>
+		<lu-segmented-control-filter [label]="label0" value="0" />
+		<lu-segmented-control-filter [label]="label1" value="1" />
+		<lu-segmented-control-filter [label]="label2" value="2" />
+		<lu-segmented-control-filter [label]="label3" value="3" />
+		<lu-segmented-control-filter [label]="label4" value="4" />
+	</lu-segmented-control>
+	<lu-filter-pill label="Inclure les collaborateurs partis" optional name="includeFormerEmployees">
+		<lu-checkbox-input [ngModel]="false" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Date de début" optional name="startingDate">
+		<lu-date-input [(ngModel)]="example1" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Période">
+		<lu-date-range-input [(ngModel)]="examplePeriod" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Multi ApiV4" optional name="multiv4">
+		<lu-multi-select
+			[ngModel]="[]"
+			apiV4="/organization/structure/api/establishments"
+			filterPillLabelPlural="établissements"
+		/>
+	</lu-filter-pill>
+	<lu-form-field label="Test" hiddenLabel>
+		<lu-text-input [ngModel]="example2" [ngModelOptions]="{ standalone: true }" hasSearchIcon hasClearer />
+	</lu-form-field>
+	<ng-container *luFilterPillAddonAfter>
+		<button
+			type="button"
+			size="S"
+			luButton="outlined"
+			palette="product"
+			disclosure
+			aria-expanded="false"
+			[luDropdown]="saveDropdown"
+		>
+			<!--Enregistrer en tant que nouvelle vue-->
+			Enregistrer la vue
+			<lu-icon icon="arrowChevronBottom" />
+		</button>
+		<button type="submit" size="S" luButton="outlined">Exporter</button>
+	</ng-container>
+</lu-filter-bar>
+<ng-template #saveDropdown>
+	<lu-dropdown-menu>
+		<lu-dropdown-item>
+			<button lu-dropdown-action type="button">
+				<lu-icon icon="save" />
+				Enregistrer les modifications
+			</button>
+		</lu-dropdown-item>
+		<lu-dropdown-item>
+			<button
+				lu-dropdown-action
+				type="button"
+				aria-disabled="true"
+				class="is-disabled"
+				luTooltip="Supprimer des vues pour en créer des nouvelles"
+			>
+				<lu-icon icon="mathsPlus" />
+				Enregistrer en tant que nouvelle vue
+			</button>
+		</lu-dropdown-item>
+	</lu-dropdown-menu>
+</ng-template>
+```
+
+### Bar
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { LuCoreSelectApiV4Directive } from '@lucca-front/ng/core-select/api';
+import { DateInputComponent, DateRangeInputComponent } from '@lucca-front/ng/date2';
+import { DividerComponent } from '@lucca-front/ng/divider';
+import { FilterBarComponent, FilterPillAddonAfterDirective, FilterPillAddonBeforeDirective, FilterPillComponent } from '@lucca-front/ng/filter-pills';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { CheckboxInputComponent, TextInputComponent } from '@lucca-front/ng/forms';
+import { LuMultiSelectInputComponent } from '@lucca-front/ng/multi-select';
+import { NumericBadgeComponent } from '@lucca-front/ng/numeric-badge';
+import { SegmentedControlComponent, SegmentedControlFilterComponent } from '@lucca-front/ng/segmented-control';
+import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
+```
+
+```html
+<lu-filter-bar>
+	<lu-segmented-control *luFilterPillAddonBefore [(ngModel)]="example">
+		<ng-template #label0>
+			Tous
+			<lu-numeric-badge [value]="12" />
+		</ng-template>
+		<ng-template #label1>
+			En cours d’approbation
+			<lu-numeric-badge [value]="5" />
+		</ng-template>
+		<ng-template #label2>
+			Approuvés
+			<lu-numeric-badge [value]="3" />
+		</ng-template>
+		<ng-template #label3>
+			Clos
+			<lu-numeric-badge [value]="4" />
+		</ng-template>
+		<lu-segmented-control-filter [label]="label0" value="0" />
+		<lu-segmented-control-filter [label]="label1" value="1" />
+		<lu-segmented-control-filter [label]="label2" value="2" />
+		<lu-segmented-control-filter [label]="label3" value="3" />
+	</lu-segmented-control>
+	<lu-filter-pill label="Inclure les collaborateurs partis" optional name="includeFormerEmployees">
+		<lu-checkbox-input [ngModel]="false" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Date de début" optional name="startingDate">
+		<lu-date-input [(ngModel)]="example1" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Période">
+		<lu-date-range-input [(ngModel)]="examplePeriod" />
+	</lu-filter-pill>
+	<lu-filter-pill label="Multi ApiV4" optional name="multiv4">
+		<lu-multi-select
+			[ngModel]="[]"
+			apiV4="/organization/structure/api/establishments"
+			filterPillLabelPlural="établissements"
+		/>
+	</lu-filter-pill>
+	<lu-form-field label="Test" hiddenLabel>
+		<lu-text-input [ngModel]="example2" [ngModelOptions]="{ standalone: true }" hasSearchIcon hasClearer />
+	</lu-form-field>
+	<button *luFilterPillAddonAfter type="submit" size="S" luButton="outlined">Exporter</button>
+</lu-filter-bar>
+```
+
+## HTML/CSS
+
+### Bar
+
+```css
+@forward '@lucca-front/scss/src/components/filterBar';
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/clear';
+@forward '@lucca-front/scss/src/components/divider';
+@forward '@lucca-front/scss/src/components/filterPill';
+@forward '@lucca-front/scss/src/components/numericBadge';
+@forward '@lucca-front/scss/src/components/segmentedControl';
+```
+
+```html
+<form>
+	<div class="filterBar">
+		<lu-scroll-box class="filterBar-scrollBox">
+			<div class="filterBar-scrollBox-group">
+				<ul class="segmentedControl filterBar-segmentedControl" role="presentation">
+					<li class="segmentedControl-item">
+						<input type="radio" class="segmentedControl-item-input" name="tab" id="tab1" checked="checked" />
+						<label for="tab1" class="segmentedControl-item-action">Tous</label>
+					</li>
+					<li class="segmentedControl-item">
+						<input type="radio" class="segmentedControl-item-input" name="tab" id="tab2" />
+						<label for="tab2" class="segmentedControl-item-action">
+							En cours d’approbation @if (withNumericBadge) {
+							<span class="numericBadge">8</span>
+							}
+						</label>
+					</li>
+					<li class="segmentedControl-item">
+						<input type="radio" class="segmentedControl-item-input" name="tab" id="tab3" />
+						<label for="tab3" class="segmentedControl-item-action">
+							Approuvés @if (withNumericBadge) {
+							<span class="numericBadge">88</span>
+							}
+						</label>
+					</li>
+					<li class="segmentedControl-item">
+						<input type="radio" class="segmentedControl-item-input" name="tab" id="tab4" />
+						<label for="tab4" class="segmentedControl-item-action">Clos</label>
+					</li>
+				</ul>
+
+				<div class="divider filterBar-divider"></div>
+
+				<button type="button" class="filterPill mod-checkbox">
+					<span class="filterPill-checkbox">
+						<span class="filterPill-checkbox-input"></span>
+						<span class="filterPill-checkbox-icon" aria-hidden="true">
+							<span class="filterPill-checkbox-icon-check"></span>
+						</span>
+					</span>
+					<span class="filterPill-label" luTooltip="Inclure les collaborateurs partis" luTooltipWhenEllipsis>
+						Inclure les collaborateurs partis
+						<span
+							class="filterPill-label-placeholder"
+							aria-hidden="true"
+							data-content-before="Inclure les collaborateurs partis"
+						></span>
+					</span>
+				</button>
+
+				<div class="filterPillWrapper">
+					<button type="button" class="filterPill" aria-expanded="false" aria-controls="panel">
+						<span class="filterPill-label">Département</span>
+						<span class="filterPill-value"></span>
+						<span class="filterPill-toggle">
+							<span class="lucca-icon icon-arrowChevronBottom mod-S"></span>
+						</span>
+					</button>
+					<button type="button" class="filterPill_clear clear"><span class="pr-u-mask">Vider ce champ</span></button>
+				</div>
+
+				<button type="submit" class="button mod-ghost mod-S palette-product">Appliquer les filtres</button>
+			</div>
+			<div class="filterBar-scrollBox-export">
+				<button type="submit" class="button mod-S mod-outlined">Exporter</button>
+			</div>
+		</lu-scroll-box>
+	</div>
+</form>
+```