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

package/llms/references/components/empty-state/empty-state.component.md

@@ -0,0 +1,226 @@
+# empty-state — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-empty-state-angular-onboarding-page--docs)
+
+## Angular
+
+🔗 [Spécifique Lucca — Page — Liste des illustrations](https://www.notion.so/c12d6c3bf8dc4cc391ad1e5bc80655ab?v=ea7b24dd88d742ccbbb0d87424560c51)
+
+Component selector : `lu-empty-state-page`
+
+### State page onboarding
+
+```js
+import { HttpClientModule } from '@angular/common/http';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { EmptyStatePageComponent, EmptyStatePageIllustration } from '@lucca-front/ng/empty-state';
+import { ListingComponent, ListingItemComponent } from '@lucca-front/ng/listing';
+import { TagComponent } from '@lucca-front/ng/tag';
+```
+
+```html
+<lu-empty-state-page
+	heading="Augmentez vos collaborateurs en 3 étapes"
+	[slotTop]="slotTop"
+	[illustration]="illustration"
+	[description]="description"
+	hx="1"
+>
+	<button luButton type="button">Créer une campagne</button>
+</lu-empty-state-page>
+
+<ng-template #slotTop><lu-tag label="Inclus dans votre abonnement" /></ng-template>
+<ng-template #description>
+	<lu-listing orderedFancy>
+		<lu-listing-item>Les responsables proposent les augmentations.</lu-listing-item>
+		<lu-listing-item>Les augmentations sont commentées, révisées.</lu-listing-item>
+		<lu-listing-item>Vous contrôlez, validez ces augmentations et décidez de leur mise en œuvre.</lu-listing-item>
+	</lu-listing>
+</ng-template>
+<ng-template #illustration>
+	<lu-empty-state-page-illustration
+		src="https://cdn.lucca.fr/transverse/prisme/visuals/empty-states/pagga/mealvoucher-icecream.svg"
+	/>
+</ng-template>
+```
+
+### State page
+
+```js
+import { HttpClientModule } from '@angular/common/http';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { EMPTY_STATE_HX, EMPTY_STATE_HX_STYLE, EmptyStatePageComponent } from '@lucca-front/ng/empty-state';
+```
+
+```html
+<lu-empty-state-page
+	heading="Empty state page"
+	slotTop=""
+	description="Description can be a string or a ng-template"
+	topRightBackground="https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg"
+	topRightForeground="https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg"
+	bottomLeftBackground="https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg"
+	bottomLeftForeground="https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg"
+>
+	<button luButton type="button" palette="product">Button</button>
+	<button luButton="outlined" type="button">Button</button>
+</lu-empty-state-page>
+```
+
+### State section
+
+```js
+import { HttpClientModule } from '@angular/common/http';
+import { BUBBLE_ILLUSTRATION } from '@lucca-front/ng/bubble-illustration';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { EMPTY_STATE_HX, EmptyStateSectionComponent } from '@lucca-front/ng/empty-state';
+```
+
+```html
+<lu-empty-state-section
+	illustration="rocket"
+	hx="3"
+	heading="Empty state section"
+	description="Description can be a string or a ng-template"
+>
+	<button luButton type="button" palette="product">Button</button>
+	<button luButton="outlined" type="button">Button</button>
+</lu-empty-state-section>
+```
+
+## HTML/CSS
+
+🔗 [Spécifique Lucca — Page — Liste des illustrations](https://www.notion.so/c12d6c3bf8dc4cc391ad1e5bc80655ab?v=ea7b24dd88d742ccbbb0d87424560c51)
+
+Classe CSS : `.emptyState`
+
+### State page
+
+```css
+@forward '@lucca-front/scss/src/components/emptyState';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<section class="emptyState mod-page" [style.--components-emptyState-background-color]="'var(--palettes-neutral-25)'">
+	<div class="emptyState-container">
+		<div class="emptyState-content">
+			<div
+				class="emptyState-content-icon"
+				aria-hidden="true"
+				[innerHtml]="'https://cdn.lucca.fr/lucca-front/assets/empty-states/message/medal-01.svg' | luSafeExternalSvg"
+			></div>
+			<div class="emptyState-content-text">
+				<h1 class="emptyState-content-heading">Empty State</h1>
+				<p class="emptyState-content-description">
+					Flatus obsequiorum potest inanes pomerium obsequiorum credi homines vero caelibes orbos potest vile
+					diversitate flatus.
+				</p>
+				<div class="emptyState-actions">
+					<button type="button" class="button">Button</button>
+					<button type="button" class="button mod-outlined">Button</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+```
+
+### State section center
+
+```css
+@forward '@lucca-front/scss/src/components/emptyState';
+@forward '@lucca-front/scss/src/components/bubbleIllustration';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<section class="emptyState mod-center">
+	<div class="emptyState-container">
+		<div class="emptyState-content">
+			<span
+				class="emptyState-content-icon bubbleIllustration mod-action mod-L"
+				aria-hidden="true"
+				[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/bubble-illustration/calendar.svg' | luSafeExternalSvg"
+			></span>
+			<div class="emptyState-content-text">
+				<h3 class="emptyState-content-heading">Empty State</h3>
+				<p class="emptyState-content-description">
+					Flatus obsequiorum potest inanes pomerium obsequiorum credi homines vero caelibes orbos potest vile
+					diversitate flatus.
+				</p>
+				<div class="emptyState-actions">
+					<button type="button" class="button">Button</button>
+					<button type="button" class="button mod-outlined">Button</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+```
+
+### State section palette
+
+```css
+@forward '@lucca-front/scss/src/components/emptyState';
+@forward '@lucca-front/scss/src/components/bubbleIllustration';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<section class="emptyState">
+	<div class="emptyState-container">
+		<div class="emptyState-content">
+			<span
+				class="emptyState-content-icon bubbleIllustration mod-action mod-L palette-success"
+				aria-hidden="true"
+				[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/bubble-illustration/calendar.svg' | luSafeExternalSvg"
+			></span>
+			<div class="emptyState-content-text">
+				<h3 class="emptyState-content-heading">Empty State</h3>
+				<p class="emptyState-content-description">
+					Flatus obsequiorum potest inanes pomerium obsequiorum credi homines vero caelibes orbos potest vile
+					diversitate flatus.
+				</p>
+				<div class="emptyState-actions">
+					<button type="button" class="button">Button</button>
+					<button type="button" class="button mod-outlined">Button</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+```
+
+### State section
+
+```css
+@forward '@lucca-front/scss/src/components/emptyState';
+@forward '@lucca-front/scss/src/components/bubbleIllustration';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<section class="emptyState">
+	<div class="emptyState-container">
+		<div class="emptyState-content">
+			<span
+				class="emptyState-content-icon bubbleIllustration mod-action mod-L"
+				aria-hidden="true"
+				[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/bubble-illustration/calendar.svg' | luSafeExternalSvg"
+			></span>
+			<div class="emptyState-content-text">
+				<h3 class="emptyState-content-heading">Empty State</h3>
+				<p class="emptyState-content-description">
+					Flatus obsequiorum potest inanes pomerium obsequiorum credi homines vero caelibes orbos potest vile
+					diversitate flatus.
+				</p>
+				<div class="emptyState-actions">
+					<button type="button" class="button">Button</button>
+					<button type="button" class="button mod-outlined">Button</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+```

package/llms/references/components/empty-state/empty-state.md

@@ -0,0 +1,62 @@
+# empty-state
+
+## Import
+
+```typescript
+import { EmptyStatePageIllustration, EmptyStatePageComponent } from '@lucca-front/ng/empty-state';
+```
+
+## API Reference
+
+### EmptyStatePageIllustration (component)
+
+**Selector:** `lu-empty-state-page-illustration`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `src` | `src` | `string \| null` | `null` | — | — | URL de l’illustration. |
+| `alt` | `alt` | `string \| null` | `''` | — | — | Texte alternatif de l’illustration restitué par les lecteurs d’écran. |
+
+### EmptyStatePageComponent (component)
+
+**Selector:** `lu-empty-state-page`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `string \| null` | `null` | — | — | Affiche une illustration au dessus du titre. |
+| `topRightBackground` | `topRightBackground` | `string \| null` | — | — | — | — |
+| `topRightForeground` | `topRightForeground` | `string \| null` | — | — | — | Illustration de premier plan dans le coin supérieur droit. |
+| `bottomLeftBackground` | `bottomLeftBackground` | `string \| null` | — | — | — | — |
+| `bottomLeftForeground` | `bottomLeftForeground` | `string \| null` | — | — | — | — |
+| `contentBackgroundColor` | `contentBackgroundColor` | `string` | `'var(--pr-t-elevation-surface-default)'` | — | — | Modifie la couleur de fond du contenu (variable CSS, couleur hexadécimale, etc.). |
+| `slotTop` | `slotTop` | `PortalContent` | — | — | — | [v19.3] Ajout d’un slot au dessus du titre. [PortalContent] |
+| `illustration` | `illustration` | `PortalContent` | — | — | — | Modifie l’illustration. |
+| `heading` | `heading` | `string` | — | — | — | Titre de l’empty state. |
+| `description` | `description` | `PortalContent` | — | — | — | Description du composant. [PortalContent] |
+| `hx` | `hx` | `number` | `1` | — | `luNumberAttribute` | Définit le niveau sémantique du titre. |
+| `hxStyle` | `hxStyle` | `number` | `1` | — | `luNumberAttribute` | [v21.2] Niveau du titre (style). |
+
+## Related files
+
+- 📝 [Code & implementation](./empty-state.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/empty-state/empty-state.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/empty-state/empty-state.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-empty-state-angular-onboarding-page--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
+
+`EmptyStatePageComponent` :
+  ~ `topRightBackground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg' → ∅
+  ~ `topRightForeground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg' → ∅
+  ~ `bottomLeftBackground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg' → ∅
+  ~ `bottomLeftForeground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg' → ∅
+  ~ `hx` : transform numberAttribute → luNumberAttribute
+  ~ `hxStyle` : transform numberAttribute → luNumberAttribute

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

@@ -0,0 +1,57 @@
+# errorpage — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-errorpage-angular-basic--docs)
+
+## Angular
+
+Mots-clés : page d'erreur, 404, 500
+
+Component selector : `lu-error-page`
+
+### Page basic
+
+```js
+import { provideRouter } from '@angular/router';
+import { ERROR_PAGE_ILLUSTRATION, ErrorPageComponent } from '@lucca-front/ng/error-page';
+```
+
+```html
+<lu-error-page heading="Erreur 404" illustration="404">
+	<p>La page que vous cherchez n’existe pas.</p>
+	<p><a href="#">Revenir à la page précédente</a></p>
+</lu-error-page>
+```
+
+## HTML/CSS
+
+🔗 [Spécifique Lucca — Liste des illustrations d'erreur](https://www.notion.so/Error-page-c7a6edc9b2364d479b079359d9b7b838)
+
+Classe CSS : `.errorPage`
+
+### Page basic
+
+```css
+@forward '@lucca-front/scss/src/components/errorPage';
+@forward '@lucca-front/scss/src/components/textFlow';
+```
+
+```html
+<div class="errorPage">
+	<section class="errorPage-section">
+		<div class="errorPage-section-info">
+			<h1 class="errorPage-section-info-title">Erreur 403</h1>
+			<div class="textFlow">
+				<p>Vous n’êtes pas autorisé à consulter cette page ou cette ressource.</p>
+				<p><a href="#">Revenir à la page précédente</a></p>
+			</div>
+		</div>
+		<img
+			src="https://cdn.lucca.fr/errors/svg/403-lucca.svg"
+			width="600"
+			height="400"
+			alt=""
+			class="errorPage-section-image"
+		/>
+	</section>
+</div>
+```

package/llms/references/components/errorpage/errorpage.md

@@ -0,0 +1,75 @@
+# errorpage
+
+## Import
+
+```typescript
+import { ErrorPageComponent } from '@lucca-front/ng/error-page';
+```
+
+## Basic Usage
+
+```html
+<lu-error-page heading="Erreur 404" illustration="404"> <p>La page que vous cherchez n’existe pas.</p> <p><a href="#">Revenir à la page précédente</a></p>
+</lu-error-page>
+```
+
+## API Reference
+
+### ErrorPageComponent (component)
+
+**Selector:** `lu-error-page`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `heading` | `heading` | `string` | — | ✅ | — | Titre de la page d’erreur. |
+| `illustration` | `illustration` | `'400' \| '403' \| '404' \| '429' \| '500' \| 'keyboard' \| 'lock' \| 'map'` | — | ✅ | — | Modifie l’illustration. |
+
+## Related files
+
+- 📝 [Code & implementation](./errorpage.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-errorpage-angular-basic--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `ERROR_PAGE_ILLUSTRATION` constant and `ErrorPageIllustration` type are now publicly exported and used to type the `illustration` input.
+
+#### 21.2.2
+
+##### Fixed
+
+- Styles are no longer scoped by view encapsulation, so the error page renders correctly wherever it is used.
+
+#### 21.2.0
+
+##### Added
+
+- `lu-error-page` component (`errorPage`) with the required `heading` and `illustration` inputs.
+
+#### 21.0.3
+
+##### Fixed
+
+- Layout of the error page when displayed inside a `lu-app-layout`.
+
+#### 19.2.0
+
+##### Changed
+
+- Titles no longer add their own spacing.
+
+#### 18.1.0
+
+##### Changed
+
+- Title color and font size updated.

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

@@ -0,0 +1,30 @@
+# establishmentselect — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-establishmentselect--docs)
+
+## Angular
+
+### Select
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuEstablishmentSelectInputComponent } from '@lucca-front/ng/establishment';
+```
+
+```html
+<label class="textfield mod-inline pr-u-marginInlineEnd200">
+	<lu-establishment-select class="textfield-input" placeholder="Select an establishment" data-testid="lu-select" />
+	<span class="textfield-label">Establishment Select</span>
+</label>
+<label class="textfield mod-inline">
+	<lu-establishment-select
+		class="textfield-input"
+		placeholder="Select an establishment"
+		[multiple]="multiple()"
+		data-testid="lu-select-multiple"
+	/>
+	<span class="textfield-label">Establishment Multiple Select</span>
+</label>
+```

package/llms/references/components/establishmentselect/establishmentselect.md

@@ -0,0 +1,42 @@
+# establishmentselect
+
+## Import
+
+```typescript
+import { LuEstablishmentSelectInputComponent } from '@lucca-front/ng/establishment';
+```
+
+## API Reference
+
+### LuEstablishmentSelectInputComponent (component)
+
+**Selector:** `lu-establishment-select`
+
+> ⚠️ **Déprécié** : prefer SimpleSelect or MultipleSelect with establishments directive
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `filters` | `filters` | `string[]` | — | — | — | — |
+| `appInstanceId` | `appInstanceId` | `number` | — | — | — | — |
+| `operations` | `operations` | `number[]` | — | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_ESTABLISHMENT_SELECT_INPUT_TRANSLATIONS` | `unknown` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuEstablishmentModule` — prefer SimpleSelect or MultipleSelect with establishments directive
+- ⚠️ `LuEstablishmentSelectModule` — prefer SimpleSelect or MultipleSelect with establishments directive
+- ⚠️ `LuEstablishmentSelectInputModule` — use `LuEstablishmentSelectInputComponent` instead
+
+## Related files
+
+- 📝 [Code & implementation](./establishmentselect.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-establishmentselect--docs)

package/llms/references/components/fancy-dialog/fancy-dialog.component.md

@@ -0,0 +1,9 @@
+# fancy-dialog — Code & Implementation
+
+## Angular
+
+Component selector : `lu-dialog`
+
+La Fancy dialog s'active via un mode spécifique de `luDialogConfig` appliqué sur le déclencheur :
+
+Consultez la documentation complète sur la page Dialog.

package/llms/references/components/fancy-dialog/fancy-dialog.md

@@ -0,0 +1,107 @@
+# fancy-dialog
+
+## Import
+
+```typescript
+import { DialogContentComponent, DialogFooterComponent, DialogHeaderAction, DialogHeaderSubtitle, DialogHeaderComponent, DialogRoutingContainerComponent, DialogComponent, DialogCloseDirective, DialogDismissDirective, DialogOpenDirective } from '@lucca-front/ng/dialog';
+```
+
+## API Reference
+
+### DialogContentComponent (component)
+
+**Selector:** `lu-dialog-content`
+
+### DialogFooterComponent (component)
+
+**Selector:** `lu-dialog-footer`
+
+### DialogHeaderAction (directive)
+
+**Selector:** `[dialogHeaderAction]`
+
+### DialogHeaderSubtitle (directive)
+
+**Selector:** `[dialogHeaderSubtitle]`
+
+### DialogHeaderComponent (component)
+
+**Selector:** `lu-dialog-header`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### DialogRoutingContainerComponent (component)
+
+**Selector:** `lu-dialog-routing-container`
+
+### DialogComponent (component)
+
+**Selector:** `lu-dialog`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `stacked` | `stacked` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `fancyIllustration` | `fancyIllustration` | `'approval' \| 'checklist' \| 'email' \| 'install' \| 'mapping' \| 'save' \| 'users' \| 'welcome' \| 'payment-card'` | `'welcome'` | — | — | — |
+| `fancyIllustrationUrl` | `fancyIllustrationUrl` | `string \| null` | `null` | — | — | — |
+
+### DialogCloseDirective (directive)
+
+**Selector:** `[luDialogClose]`
+
+### DialogDismissDirective (directive)
+
+**Selector:** `[luDialogDismiss]`
+
+### DialogOpenDirective (directive)
+
+**Selector:** `[luDialogOpen]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dialog` | `luDialogOpen` | `TemplateRef<void>` | — | ✅ | — | — |
+| `luDialogConfig` | `luDialogConfig` | `LuDialogConfig<unknown>` | — | — | — | — |
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideDialogRoutingReuseStrategy` | `(): EnvironmentProviders` | — |
+| `configureLuDialog` | `(): EnvironmentProviders` | — |
+| `provideLuDialog` | `(): Provider` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DIALOG_HEADER_TRANSLATIONS` | `unknown` | — |
+| `DIALOG_ROUTE_CLOSE_TRIGGER` | `DialogRouteCloseTrigger` | — |
+| `DIALOG_ROUTE_DISMISS_TRIGGER` | `DialogRouteDismissTrigger` | — |
+| `DIALOG_ROUTE_CONFIG` | `DialogRouteConfig<unknown>` | — |
+
+### Services
+
+#### LuDialogService
+
+- `open<C, TData = LuDialogData<C>>(config: LuDialogConfig<C, NoInfer<TData>>): LuDialogRef<C, TData>`
+
+## Related files
+
+- 📝 [Code & implementation](./fancy-dialog.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/fancy-dialog/fancy-dialog.design.md)
+
+## 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
+
+`DialogComponent` :
+  ~ `stacked` : transform booleanAttribute → luBooleanAttribute

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

@@ -0,0 +1,48 @@
+# fancybox — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-fancybox-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-fancy-box`
+
+### Box basic
+
+```js
+import { FANCY_BOX_SIZE, FancyBoxComponent } from '@lucca-front/ng/fancy-box';
+```
+
+```html
+<lu-fancy-box
+	backgroundLeft="https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/background-left-plant.svg"
+	backgroundRight="https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/background-right-candies.svg"
+	foreground="https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/foreground-right-pizza.svg"
+>
+	Content
+</lu-fancy-box>
+```
+
+## HTML/CSS
+
+Classe CSS : `.fancyBox`
+
+### Box basic
+
+```css
+@forward '@lucca-front/scss/src/components/fancyBox';
+```
+
+```html
+<div
+	class="fancyBox"
+	[attr.style]="'
+	--components-fancyBox-background-left: url(https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/background-left-plant.svg);
+	--components-fancyBox-background-right: url(https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/background-right-candies.svg);
+	--components-fancyBox-foreground: url(https://cdn.lucca.fr/transverse/prisme/visuals/fancy-box/foreground-right-pizza.svg);'"
+>
+	<div class="fancyBox-content">
+		Fancy box content
+		<div class="fancyBox-content-foreground"></div>
+	</div>
+</div>
+```