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

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

@@ -0,0 +1,96 @@
+# pagination — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-pagination-angular--docs)
+
+## Angular
+
+Mots-clés : pages, page suivante
+
+Component selector : `lu-pagination`
+
+`LuPagination` permet la navigation entre plusieurs pages, comme pour un tableau.
+
+Il propose 2 interfaces différentes (appelé `mod`) :
+   * `default` : le plus simple, avec des boutons de navigation et des informations sur la page courante et le nombre total d'éléments
+   * `compact` : un mode plus compact, avec les boutons de navigation uniquement
+
+### Mod `default`
+
+La pagination en mode `default` est le mode par défaut si vous ne précisez rien. Pour l'utiliser, vous devrez :
+
+   * passer les inputs suivantes :
+     * `from` : l'index du premier élément de la page courante
+     * `to` : l'index du dernier élément de la page courante
+     * `itemsCount` : le nombre total d'éléments
+     * `isFirstPage` : un booléen indiquant si la page courante est la première
+     * `isLastPage` : un booléen indiquant si la page courante est la dernière
+
+   * récupérer les outputs suivants :
+     * `previousPage` : émis lorsque l'utilisateur clique sur le bouton avec la flèche gauche `<`, correspondant à "précédent"
+     * `nextPage` : émis lorsque l'utilisateur clique sur le bouton avec la flèche droite `>`, correspondant à "suivant"
+
+Voici un exemple d'utilisation de `LuPagination` en mode `default` :
+
+### Mod `compact`
+
+Le mode `compact` est une version plus simple de la pagination avec uniquement les boutons de navigation. Pour l'utiliser, vous devrez :
+
+   * passer les inputs suivants :
+     * `isFirstPage` : un booléen indiquant si la page courante est la première
+     * `isLastPage` : un booléen indiquant si la page courante est la dernière
+
+   * récupérer les outputs suivants :
+     * `previousPage` : émis lorsque l'utilisateur clique sur le bouton avec la flèche gauche `<`, correspondant à "précédent"
+     * `nextPage` : émis lorsque l'utilisateur clique sur le bouton avec la flèche droite `>`, correspondant à "suivant"
+
+Voici un exemple d'utilisation de `LuPagination` en mode `compact` :
+
+### Pagination
+
+```js
+import { PAGINATION_MOD, PaginationComponent } from '@lucca-front/ng/pagination';
+```
+
+```html
+<lu-pagination from="1" to="20" itemsCount="27" isFirstPage />
+```
+
+## HTML/CSS
+
+Classe CSS : `.pagination`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/pagination';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<nav class="pagination" role="navigation" aria-label="Pagination des résultats">
+	<div class="pagination-count">
+		<span class="pagination-count-current">
+			<span class="pr-u-mask">Résultats de</span>
+			1
+			<span aria-hidden="true">–</span>
+			<span class="pr-u-mask">à</span>
+			10
+		</span>
+		<span class="pagination-count-separator">sur</span>
+		<span class="pagination-count-total">
+			50
+			<span class="pr-u-mask">pages</span>
+		</span>
+	</div>
+	<div class="pagination-scrolling">
+		<button type="button" class="button mod-onlyIcon mod-ghost mod-S" disabled>
+			<span aria-hidden="true" class="lucca-icon icon-arrowChevronLeft"></span>
+			<span class="pr-u-mask">Précédent</span>
+		</button>
+		<button type="button" class="button mod-onlyIcon mod-ghost mod-S">
+			<span aria-hidden="true" class="lucca-icon icon-arrowChevronRight"></span>
+			<span class="pr-u-mask">Suivant</span>
+		</button>
+	</div>
+</nav>
+```

package/llms/references/components/pagination/pagination.md

@@ -0,0 +1,107 @@
+# pagination
+
+## Import
+
+```typescript
+import { PaginationComponent } from '@lucca-front/ng/pagination';
+```
+
+## API Reference
+
+### PaginationComponent (component)
+
+**Selector:** `lu-pagination`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `isFirstPage` | `isFirstPage` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le bouton précédent. |
+| `isLastPage` | `isLastPage` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le bouton suivant. |
+| `from` | `from` | `unknown` | `undefined` | — | `luOptionalNullableNumberAttribute` | Numéro du dernier élément affiché. |
+| `to` | `to` | `unknown` | `undefined` | — | `luOptionalNullableNumberAttribute` | Numéro du dernier élément affiché. |
+| `itemsCount` | `itemsCount` | `unknown` | `undefined` | — | `luOptionalNullableNumberAttribute` | Nombre total d’éléments. |
+| `mod` | `mod` | `'default' \| 'compact'` | `'default'` | — | — | Affiche la pagination en vue compacte (seulement avec les boutons précédent et suivant). |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `previousPage` | `previousPage` | `void` | — |
+| `nextPage` | `nextPage` | `void` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./pagination.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/pagination/pagination.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-pagination-angular--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
+
+~ `isFirstPage` : transform booleanAttribute → luBooleanAttribute
+~ `isLastPage` : transform booleanAttribute → luBooleanAttribute
+~ `from` : number | null → unknown, défaut ∅ → undefined, transform ∅ → luOptionalNullableNumberAttribute
+~ `to` : number | null → unknown, défaut ∅ → undefined, transform ∅ → luOptionalNullableNumberAttribute
+~ `itemsCount` : number | null → unknown, défaut ∅ → undefined, transform ∅ → luOptionalNullableNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `PAGINATION_MOD` constant and `PaginationMod` type are now publicly exported and used to type the `mod` input.
+
+#### 21.2.2
+
+##### Fixed
+
+- Missing `button` import prevented the pagination controls from rendering.
+
+#### 21.1.4
+
+##### Fixed
+
+- `mod="compact"` display.
+
+#### 21.1.1
+
+##### Fixed
+
+- `intl` input is now public.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 20.3.3
+
+##### Fixed
+
+- The pagination can now be displayed with zero item.
+
+#### 20.2.1
+
+##### Fixed
+
+- The component now imports its own styles.
+
+#### 20.1.3
+
+##### Fixed
+
+- Inputs behaviour of the Angular component.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-pagination` component (`pagination`) with the `from`, `to`, `itemsCount`, `isFirstPage`, `isLastPage`, `mod` and `intl` inputs, and the `previousPage` / `nextPage` outputs.

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

@@ -0,0 +1,35 @@
+# phonenumberfield — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-phonenumberfield-angular--docs)
+
+## Angular
+
+Component selector : `lu-phone-number-input`
+
+### Number input
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FORM_FIELD_SIZE, FormFieldComponent } from '@lucca-front/ng/form-field';
+import { PHONE_NUMBER_INPUT_AUTOCOMPLETE, PhoneNumberInputComponent } from '@lucca-front/ng/forms/phone-number-input';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+```
+
+```html
+<lu-form-field
+	[rolePresentationLabel]="true"
+	label="Phone"
+	tooltip="Tooltip message"
+	inlineMessage="Helper message"
+	inlineMessageState="default"
+	errorInlineMessage="Invalid Phone Number"
+>
+	<lu-phone-number-input label="Phone" [country]="country" [(ngModel)]="model.example" #result="ngModel" required />
+</lu-form-field>
+@if (result.invalid && result.errors.validPhoneNumber) {
+	<div>{{ result.errors.validPhoneNumber }}</div>
+}
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```

package/llms/references/components/phonenumberfield/phonenumberfield.md

@@ -0,0 +1,131 @@
+# phonenumberfield
+
+## Import
+
+```typescript
+import { PhoneNumberInputComponent } from '@lucca-front/ng/forms/phone-number-input';
+```
+
+## API Reference
+
+### PhoneNumberInputComponent (component)
+
+**Selector:** `lu-phone-number-input`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `string` | — | — | — | Modifie le label du champ. |
+| `autocomplete` | `autocomplete` | `'off' \| 'tel'` | — | — | — | — |
+| `allowedCountries` | `allowedCountries` | `ReadonlyArray<CountryCode \| string>` | `[]` | — | — | — |
+| `noAutoPlaceholder` | `noAutoPlaceholder` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `defaultCountryCode` | `country` | `CountryCode` | `undefined` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `countryChange` | `countryChange` | `CountryCode` | — |
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luPhoneNumberFormat` | `PhoneNumberFormatPipe` | `(value: E164Number, format: NumberFormat = 'NATIONAL'): unknown` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./phonenumberfield.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/phonenumberfield/phonenumberfield.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/phonenumberfield/phonenumberfield.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-phonenumberfield-angular--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
+
+~ `noAutoPlaceholder` : transform ∅ → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.3
+
+##### Fixed
+
+- `presentation` display: align the empty-value display with the other form inputs.
+
+#### 21.1.0
+
+##### Added
+
+- `presentation` display mode: render the field as a read-only formatted value when the form field is in presentation mode.
+- `presentation` display: show a `–` placeholder when the value is empty.
+
+#### 20.3.3
+
+##### Added
+
+- SCSS styles are now available as a standalone `phoneNumber` component export from `@lucca-front/scss`.
+
+#### 20.3.2
+
+##### Fixed
+
+- Correct the spacing (margin) applied after the country flag.
+
+#### 20.1.2
+
+##### Fixed
+
+- Sort the country list by translated country name instead of by raw country code.
+
+#### 19.2.1
+
+##### Changed
+
+- Remove the search icon from the country selector dropdown.
+
+#### 19.2.0
+
+##### Added
+
+- `noAutoPlaceholder` input: disable the automatically generated example-number placeholder (enabled by default).
+
+#### 18.3.0
+
+##### Added
+
+- `autocomplete` input (`'off' | 'tel'`): control the browser autocomplete behavior of the phone number field.
+
+#### 18.2.3
+
+##### Fixed
+
+- Validator now takes the selected country code into account when validating the number.
+
+#### 18.2.2
+
+##### Added
+
+- `country` input: set the default country code used to parse and format the number.
+- `countryChange` output: emitted when the detected/selected country code changes.
+- Incomplete numbers are now formatted as they are typed.
+
+#### 18.2.1
+
+##### Added
+
+- Display and search countries by their localized country name.
+
+##### Fixed
+
+- Catch `libphonenumber-js` exceptions when parsing invalid input.
+
+#### 18.2.0
+
+##### Added
+
+- `lu-phone-number-input` component: a phone number input field with country selection, parsing, formatting and validation powered by `libphonenumber-js`.

package/llms/references/components/plg-push/plg-push.component.md

@@ -0,0 +1,91 @@
+# plg-push — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-plg-push-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-plg-push`
+
+### Push basic
+
+```js
+import { IconComponent } from '@lucca-front/ng/icon';
+import { PLGPushComponent } from '@lucca-front/ng/plg-push';
+```
+
+```html
+<lu-plg-push>
+	Bénéficiez de toutes les options liées au télétravail avec Timmi Office.
+	<a class="link mod-icon" href="#" target="_blank" rel="noopener noreferrer">
+		<span class="link-text">Demander un essai gratuit</span>
+		<!-- no text node here -->
+		<span class="link-icon">
+			<lu-icon class="pr-u-displayContents" icon="arrowExternal" alt="Ouvrir dans une nouvelle fenêtre" />
+		</span>
+	</a>
+</lu-plg-push>
+```
+
+## HTML/CSS
+
+Classe CSS : `.plgPush`
+
+### Push basic
+
+```css
+@forward '@lucca-front/scss/src/components/plgPush';
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/link';
+```
+
+```html
+<div class="plgPush">
+	<div class="plgPush-icons">
+		<span aria-hidden="true" class="plgPush-icons-front lucca-icon icon-transportRocket mod-S"></span>
+		<img class="plgPush-icons-back" alt="" src="https://cdn.lucca.fr/lucca-front/assets/plg-push/shape.svg" />
+	</div>
+	<div class="plgPush-content">
+		<div class="plgPush-content-description">
+			Bénéficiez de toutes les options liées au télétravail avec Timmi Office.
+			<a class="link mod-icon" href="#" target="_blank" rel="noopener noreferrer">
+				<span class="link-text">Demander un essai gratuit</span>
+				<!-- no text node here -->
+				<span class="link-icon"><span aria-hidden="true" class="lucca-icon icon-arrowExternal"></span></span>
+				<span class="pr-u-mask">Ouvrir dans une nouvelle fenêtre</span>
+			</a>
+		</div>
+	</div>
+	<button type="button" class="plgPush-close button mod-onlyIcon mod-S mod-ghost">
+		<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
+		<span class="pr-u-mask">Fermer</span>
+	</button>
+</div>
+```
+
+### Push title
+
+```css
+@forward '@lucca-front/scss/src/components/plgPush';
+@forward '@lucca-front/scss/src/components/link';
+```
+
+```html
+<div class="plgPush">
+	<div class="plgPush-icons">
+		<span aria-hidden="true" class="plgPush-icons-front lucca-icon icon-transportRocket mod-S"></span>
+		<img class="plgPush-icons-back" alt="" src="https://cdn.lucca.fr/lucca-front/assets/plg-push/shape.svg" />
+	</div>
+	<div class="plgPush-content">
+		<div class="plgPush-content-title">Connaissez-vous Timmi Office ?</div>
+		<div class="plgPush-content-description">
+			Activez toutes les options liées aux télétravail.
+			<a class="link mod-icon" href="#" target="_blank" rel="noopener noreferrer">
+				<span class="link-text">Demander un essai gratuit</span>
+				<!-- no text node here -->
+				<span class="link-icon"><span aria-hidden="true" class="lucca-icon icon-arrowExternal"></span></span>
+				<span class="pr-u-mask">Ouvrir dans une nouvelle fenêtre</span>
+			</a>
+		</div>
+	</div>
+</div>
+```

package/llms/references/components/plg-push/plg-push.md

@@ -0,0 +1,82 @@
+# plg-push
+
+## Import
+
+```typescript
+import { PLGPushComponent } from '@lucca-front/ng/plg-push';
+```
+
+## Basic Usage
+
+```html
+<lu-plg-push > Bénéficiez de toutes les options liées au télétravail avec Timmi Office. <a class="link mod-icon" href="#" target="_blank" rel="noopener noreferrer"> <span class="link-text">Demander un essai gratuit</span><!-- no text node here --><span class="link-icon"><lu-icon class="pr-u-displayContents" icon="arrowExternal" alt="Ouvrir dans une nouvelle fenêtre" /></span> </a>
+</lu-plg-push>
+```
+
+## API Reference
+
+### PLGPushComponent (component)
+
+**Selector:** `lu-plg-push`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `heading` | `heading` | `string` | `''` | — | — | Ajoute un titre au composant. |
+| `removable` | `removable` | `boolean` | `false` | — | `luBooleanAttribute` | Rend le composant supprimable. |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `removed` | `unknown` | — | — |
+
+## Related files
+
+- 📝 [Code & implementation](./plg-push.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/plg-push/plg-push.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/plg-push/plg-push.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-plg-push-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
+
+~ `removable` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.1
+
+##### Fixed
+
+- `intl` input is now public so its translations can be overridden.
+
+#### 21.1.0
+
+##### Added
+
+- `intl` input to override the component's translations.
+
+#### 21.0.0
+
+##### Added
+
+- `removable` input to display a close button.
+- `removed` two-way binding model reflecting whether the push has been closed.
+
+#### 18.2.3
+
+##### Fixed
+
+- Link color inside the push.
+
+#### 18.2.0
+
+##### Added
+
+- `lu-plg-push` component with a `heading` input.

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

@@ -0,0 +1,130 @@
+# popover — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-popover--docs)
+
+## Angular
+
+Mots-clés : bulle contextuelle
+
+Directive selector : `luPopover2`
+
+Popover2 est la nouvelle version de LuPopover, il a été choisi de partir sur une implémentation différente et donc, afin d'éviter les impacts d'un breaking change,
+une nouvelle directive a vu le jour `luPopover2`, dans un nouveau point d'entrée, `@lucca-front/ng/popover2`.
+
+### Mise en place
+
+Popover2 est fait pour être simple à utiliser, il suffit de l'importer dans votre environement avec `configureLuPopover()` (à placer dans les providers de votre `AppModule` ou lors du bootstrap de `AppComponent` si vous êtes en full standalone).
+
+### Utilisation
+
+Pour utiliser `Popover2` dans un template, il suffit d'appliquer la directive `[luPopover2]` en renseignant en input une référence à un `ng-template`, exemple:
+
+### Paramètres et position
+
+Seule la référence au `ng-template` est obligatoire, mais la directive propose des paramètres pour divers usages:
+
+- `luPopoverTrigger` permet de définir les évènements déclencheurs d’ouverture du popover :
+  - `click` est le cas par défaut, c’est le cas le plus proche d’un comportement natif navigateur et le moins intrusif.
+  - `click+hover` ajoute au click l’ouverture au survol. Le popover s’ouvre alors plus facilement (mais peut l’être aussi de manière involontaire).
+  - `hover+focus` désactive l’ouverture au click, ce qui permet de le réserver pour une navigation vers une autre page. Il faut cependant bien noter que dans cette configuration le popover n’est plus accessible : il convient donc de s’assurer que les informations contenues dans le popover soient reprises dans la page liée.
+- `luPopoverPosition` par défaut à `above`, permet de régler la position voulue du popover, en cas d'espace manquant dans le rendu, le composant tentera de se positionner d'abord à l'opposé de la position demandée, puis les deux autres à tour de rôle.
+- `luPopoverDisabled` permet de désactiver totalement le popover.
+- `customPositions` à utiliser avec précaution, permet de renseigner des `ConnectionPositionPair` pour totalement remplacer la logique de positionnement, très utile pour les menus qui doivent être `below` mais alignés sur un côté plutôt que l'autre.
+
+Les positions custom doivent être déclarées dans le `component.ts` sous forme d'un tableau et passés dans le template en input, exemple pour un menu qui s'ouvre en dessous à gauche (ou au dessus à gauche si pas de place):
+
+component.ts:
+
+component.html:
+
+### Overlays popover
+
+```js
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuPopoverAlignment, LuPopoverModule, LuPopoverPosition, LuPopoverTriggerEvent } from '@lucca-front/ng/popover';
+import { LuPopoverModule } from '@lucca-front/ng/popover';
+```
+
+```html
+<button
+	type="button"
+	class="button"
+	[luPopover]="popover"
+	[luPopoverPosition]="position()"
+	[luPopoverAlignment]="alignment()"
+	[luPopoverTrigger]="trigger()"
+>
+	{{ trigger() }} me
+</button>
+<lu-popover #popover>{{ popoverContent() }}</lu-popover>
+```
+
+### Users popover
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ILuUser } from '@lucca-front/ng/user';
+import { LuUserPopoverDirective } from '@lucca-front/ng/user-popover';
+```
+
+```html
+<button
+	type="button"
+	class="userPopover_trigger"
+	[luUserPopover]="luUserPopover()"
+	[luUserPopoverDisabled]="luUserPopoverDisabled()"
+>
+	Survolez-moi !
+</button>
+```
+
+## HTML/CSS
+
+### Popover
+
+```css
+@forward '@lucca-front/scss/src/components/popover';
+@forward '@lucca-front/scss/src/components/avatar';
+@forward '@lucca-front/scss/src/components/userPopover';
+```
+
+```html
+<section class="lu-popover-content userPopover">
+	<div class="userPopover-details">
+		<div class="userPopover-details-avatar avatar">
+			<div class="avatar-picture" style="background-color: rgb(92, 214, 153)">
+				<span class="avatar-picture-initials" translate="no">CA</span>
+			</div>
+		</div>
+		<div class="userPopover-details-info">
+			<h1 class="userPopover-details-info-name pr-u-ellipsis">
+				<a class="userPopover-details-info-name-linkOptional" href="#">Chloé Alibert</a>
+			</h1>
+			<p class="userPopover-details-info-detail pr-u-ellipsis">Technicienne</p>
+			<p class="userPopover-details-info-detail pr-u-ellipsis">SAV</p>
+			<p class="userPopover-details-info-detail">
+				<!--
+					<span class="userPopover-details-info-detail-workplace">
+						<span aria-hidden="true" class="lucca-icon icon-calendarPlanning mod-S"></span>
+						<span class="userPopover-details-info-detail-link-state">Arrivée prévue le 3 mai</span>
+					</span>
+					<span class="userPopover-details-info-detail-workplace">
+						<span aria-hidden="true" class="lucca-icon icon-calendarStrikethrough mod-S"></span>
+						<span class="userPopover-details-info-detail-link-state">Parti(e)</span>
+					</span>
+					-->
+				<a class="userPopover-details-info-detail-workplace" href="#">
+					<span aria-hidden="true" class="lucca-icon icon-calendarPlanning mod-S"></span>
+					<span class="userPopover-details-info-detail-workplace-state">
+						Absent(e) –
+						<span class="pr-u-textLight">Jusqu’au 28/02/2024 inclus</span>
+					</span>
+				</a>
+			</p>
+		</div>
+	</div>
+</section>
+```