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

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

@@ -0,0 +1,119 @@
+# box — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-box-angular-basic--docs)
+
+## Angular
+
+Mots-clés : boîte, conteneur, encadré
+
+Component selector : `lu-box`
+
+### Basic
+
+```js
+import { BoxComponent } from '@lucca-front/ng/box';
+```
+
+```html
+<lu-box (killed)="onKilled()">Lorem ipsum dolor sit amet</lu-box>
+```
+
+## HTML/CSS
+
+Classe CSS : `.box`
+
+### Arrow
+
+```css
+@forward '@lucca-front/scss/src/components/box';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/radioField';
+```
+
+```html
+<fieldset class="form-fieldset mod-inline">
+	<legend class="formLabel pr-u-mask">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field mod-withArrow">
+		<label class="formLabel" for="IDradioA">Label A</label>
+		<span class="radioField">
+			<input type="radio" class="radioField-input" id="IDradioA" name="radioName2" checked />
+			<span class="radioField-icon" aria-hidden="true">
+				<span class="radioField-icon-check"></span>
+			</span>
+		</span>
+		<div class="form-field-arrow mod-neutral"></div>
+	</div>
+	<div class="form-field mod-withArrow">
+		<label class="formLabel" for="IDradioB">Label B</label>
+		<span class="radioField">
+			<input type="radio" class="radioField-input" id="IDradioB" name="radioName2" />
+			<span class="radioField-icon" aria-hidden="true">
+				<span class="radioField-icon-check"></span>
+			</span>
+		</span>
+		<div class="form-field-arrow mod-neutral"></div>
+	</div>
+</fieldset>
+<div class="box mod-withArrow mod-neutral">
+	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam illo nostrum tenetur expedita. Accusantium cumque nisi
+	excepturi eius corporis, iusto quaerat temporibus dolorum necessitatibus laboriosam quidem quibusdam quae aperiam!
+	Vitae!
+</div>
+```
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/box';
+```
+
+```html
+<div class="box">
+	Jujubes toppin gvueoat cake cake lemon drops chupa chups sweet roll. Macaroon icing tootsie roll bonbon dragée carrot
+	cake sweet roll. Pie gingerbread jelly beans cotton candy tart lollipop bonbon candy. Bonbon chocolate gingerbread
+	pastry.
+</div>
+```
+
+### Killable
+
+```css
+@forward '@lucca-front/scss/src/components/box';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<div class="box">
+	<div class="box-close">
+		<button type="button" class="button mod-onlyIcon mod-ghost">
+			<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
+			<span class="pr-u-mask">Close</span>
+		</button>
+	</div>
+	Jujubes toppin gvueoat cake cake lemon drops chupa chups sweet roll. Macaroon icing tootsie roll bonbon dragée carrot
+	cake sweet roll. Pie gingerbread jelly beans cotton candy tart lollipop bonbon candy. Bonbon chocolate gingerbread
+	pastry.
+</div>
+```
+
+### Toggle
+
+```css
+@forward '@lucca-front/scss/src/components/box';
+@forward '@lucca-front/scss/src/components/switch';
+```
+
+```html
+<div class="switch">
+	<input class="switch-input" type="checkbox" id="boxSwitch" checked disabled />
+	<label class="switch-label" for="boxSwitch">Switch</label>
+</div>
+<div class="box mod-toggle">
+	Jujubes toppin gvueoat cake cake lemon drops chupa chups sweet roll. Macaroon icing tootsie roll bonbon dragée carrot
+	cake sweet roll. Pie gingerbread jelly beans cotton candy tart lollipop bonbon candy. Bonbon chocolate gingerbread
+	pastry.
+</div>
+```

package/llms/references/components/box/box.md

@@ -0,0 +1,88 @@
+# box
+
+## Import
+
+```typescript
+import { BoxComponent } from '@lucca-front/ng/box';
+```
+
+## Basic Usage
+
+```html
+<lu-box (killed)="onKilled()">Lorem ipsum dolor sit amet</lu-box>
+```
+
+## API Reference
+
+### BoxComponent (component)
+
+**Selector:** `lu-box`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `toggle` | `toggle` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `neutral` | `neutral` | `boolean` | `false` | — | `luBooleanAttribute` | Applique un fond gris. |
+| `killable` | `killable` | `boolean` | `false` | — | `luBooleanAttribute` | Ajoute un bouton de fermeture. |
+| `withArrow` | `withArrow` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `killed` | `killed` | `void` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./box.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-box-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
+
+~ `toggle` : transform booleanAttribute → luBooleanAttribute
+~ `neutral` : transform booleanAttribute → luBooleanAttribute
+~ `killable` : transform booleanAttribute → luBooleanAttribute
+~ `withArrow` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `intl` input to override the component's translations, used for the close button's alternative text (previously hardcoded to `Close`).
+
+#### 21.1.1
+
+##### Added
+
+- `killed` output, emitted when the close button of a `killable` box is clicked.
+
+#### 21.0.1
+
+##### Added
+
+- `withArrow` input to display the box with an arrow (`mod-withArrow`).
+
+#### 20.2.2
+
+##### Fixed
+
+- `border-radius` no longer overflows the box content.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-box` component (`box`) with the `toggle`, `neutral` and `killable` inputs.
+
+##### Changed
+
+- The box no longer applies a bottom margin — spacing is now up to the parent layout.

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

@@ -0,0 +1,59 @@
+# breadcrumbs — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-breadcrumbs-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-breadcrumbs`
+
+### Basic
+
+```js
+import { BreadcrumbsComponent, BreadcrumbsLinkDirective } from '@lucca-front/ng/breadcrumbs';
+```
+
+```html
+<lu-breadcrumbs>
+	<a *luBreadcrumbsLink routerLink="/" ariaCurrentWhenActive="page">You</a>
+	<a *luBreadcrumbsLink ariaCurrentWhenActive="page" href="#2">are</a>
+	<a *luBreadcrumbsLink aria-current="page">here</a>
+</lu-breadcrumbs>
+```
+
+## HTML/CSS
+
+Classe CSS : `.breadcrumbs`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/breadcrumbs';
+```
+
+```html
+<nav class="breadcrumbs" aria-describedby="breadcrumbs-title">
+	<p id="breadcrumbs-title" class="pr-u-mask">Breadcrumbs</p>
+	<ol class="breadcrumbs-list">
+		<li class="breadcrumbs-list-item"><a href="#" class="breadcrumbs-list-item-action">You</a></li>
+		<li class="breadcrumbs-list-item"><a href="#" class="breadcrumbs-list-item-action">are</a></li>
+		<li class="breadcrumbs-list-item"><span aria-current="page" class="breadcrumbs-list-item-action">here</span></li>
+	</ol>
+</nav>
+```
+
+### Compact
+
+```css
+@forward '@lucca-front/scss/src/components/breadcrumbs';
+```
+
+```html
+<nav role="presentation" class="breadcrumbs mod-compact">
+	<ol class="breadcrumbs-list">
+		<li class="breadcrumbs-list-item"><a href="#" class="breadcrumbs-list-item-action">Previous page</a></li>
+		<li class="breadcrumbs-list-item">
+			<span aria-current="page" class="breadcrumbs-list-item-action">Current page</span>
+		</li>
+	</ol>
+</nav>
+```

package/llms/references/components/breadcrumbs/breadcrumbs.md

@@ -0,0 +1,87 @@
+# breadcrumbs
+
+## Import
+
+```typescript
+import { BreadcrumbsLinkDirective, BreadcrumbsComponent } from '@lucca-front/ng/breadcrumbs';
+```
+
+## Basic Usage
+
+```html
+<lu-breadcrumbs > <a *luBreadcrumbsLink routerLink="/" ariaCurrentWhenActive="page">You</a> <a *luBreadcrumbsLink ariaCurrentWhenActive="page" href="#2">are</a> <a *luBreadcrumbsLink aria-current="page">here</a>
+</lu-breadcrumbs>
+```
+
+## API Reference
+
+### BreadcrumbsLinkDirective (directive)
+
+**Selector:** `[luBreadcrumbsLink]`
+
+### BreadcrumbsComponent (component)
+
+**Selector:** `lu-breadcrumbs`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `disableCompact` | `disableCompact` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./breadcrumbs.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/breadcrumbs/breadcrumbs.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/breadcrumbs/breadcrumbs.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-breadcrumbs-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
+
+`BreadcrumbsComponent` :
+  ~ `disableCompact` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Added
+
+- `intl` input to override the component's translations.
+
+#### 21.0.0
+
+##### Changed
+
+- `breadcrumbs-list-item-action` styles are now applied to every element of a `breadcrumbs-list-item`, not only to links.
+
+#### 19.3.3
+
+##### Fixed
+
+- `BreadcrumbsLinkDirective` was missing from the component's imports, making `[luBreadcrumbsLink]` unusable.
+
+#### 19.3.2
+
+##### Deprecated
+
+- `.breadcrumbs.mod-compact` CSS class.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-breadcrumbs` component (`breadcrumbs`) and the `[luBreadcrumbsLink]` directive to declare each entry of the trail.
+- `disableCompact` input to prevent the breadcrumbs from collapsing on small screens.
+
+#### 18.1.0
+
+##### Changed
+
+- Back arrow now uses the `arrow_left` icon.
+- Text and separator colors use the `neutral-700` shade for better contrast.

package/llms/references/components/bubble-icon/bubble-icon.component.md

@@ -0,0 +1,56 @@
+# bubble-icon — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-bubble-icon-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-bubble-icon`
+
+### Basic
+
+```js
+import { BUBBLE_ICON_DIRECTION, BUBBLE_ICON_SIZE, BubbleIconComponent } from '@lucca-front/ng/bubble-icon';
+import { DECORATIVE_PALETTE, PALETTE, PRODUCT_PALETTE } from '@lucca/prisme/core';
+```
+
+```html
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.bubbleIcon`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/bubbleIcon';
+```
+
+```html
+<span class="bubbleIcon mod-left">
+	<svg
+		class="bubbleIcon-bubble"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		width="40"
+		height="40"
+		viewBox="0 0 40 40"
+	>
+		<path
+			class="bubbleIcon-bubble-pathInline"
+			d="M8.02234 5.62248C18.6681.122 39.722-6.44995 39.9931 13.4051c.146 10.9657-1.8566 32.8782-21.3314 24.8746C-1.892 29.8346-5.51213 12.491 8.02234 5.62248"
+		/>
+		<path
+			class="bubbleIcon-bubble-pathBlock"
+			d="M2.25264 16.3895C8.11117 6.4042 21.9332-9.59108 32.4637 7.57789c5.8129 9.48391 15.5505 29.55471-4.5465 32.07901C6.70786 42.3228-5.2602 28.9757 2.25264 16.3895"
+		/>
+	</svg>
+	<span class="bubbleIcon-icon">
+		<span aria-hidden="true" class="lucca-icon icon-app"></span>
+	</span>
+</span>
+```

package/llms/references/components/bubble-icon/bubble-icon.md

@@ -0,0 +1,72 @@
+# bubble-icon
+
+## Import
+
+```typescript
+import { BubbleIconComponent } from '@lucca-front/ng/bubble-icon';
+```
+
+## Basic Usage
+
+```html
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+<lu-bubble-icon icon="app" />
+```
+
+## API Reference
+
+### BubbleIconComponent (component)
+
+**Selector:** `lu-bubble-icon`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `LuccaIcon` | — | ✅ | — | Modifie le glyphe de l’icône. |
+| `alt` | `alt` | `string \| null` | `null` | — | — | Information restituée par le lecteur d’écran. |
+| `size` | `size` | `'XS' \| 'S' \| 'M' \| 'L'` | `'M'` | — | — | Modifie la taille du composant. |
+| `palette` | `palette` | `Palette \| DecorativePalette \| ProductPalette` | `'product'` | — | — | Applique une palette de couleurs au composant. |
+| `bubbleDirection` | `bubbleDirection` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'random'` | `'random'` | — | — | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./bubble-icon.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/bubble-icon/bubble-icon.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/bubble-icon/bubble-icon.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-bubble-icon-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
+
+~ `palette` : Palette | DecorativePalette → Palette | DecorativePalette | ProductPalette
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `BUBBLE_ICON_SIZE` and `BUBBLE_ICON_DIRECTION` constants, together with the `BubbleIconSize` and `BubbleIconDirection` types, are now publicly exported and used to type the `size` and `bubbleDirection` inputs.
+
+#### 21.1.4
+
+##### Changed
+
+- `size` no longer accepts an empty string and now defaults to `M`.
+- `bubbleDirection` no longer accepts `null` and now defaults to `random`.
+
+#### 21.1.0
+
+##### Added
+
+- `lu-bubble-icon` component (`bubbleIcon`) with the required `icon` input plus `alt`, `size`, `palette` and `bubbleDirection` inputs.

package/llms/references/components/bubble-illustration/bubble-illustration.component.md

@@ -0,0 +1,54 @@
+# bubble-illustration — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-bubble-illustration-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-bubble-illustration`
+
+### Basic
+
+```js
+import { BUBBLE_ILLUSTRATION, BUBBLE_ILLUSTRATION_SIZE, BubbleIllustrationComponent } from '@lucca-front/ng/bubble-illustration';
+import { DECORATIVE_PALETTE, PALETTE } from '@lucca/prisme/core';
+```
+
+```html
+<lu-bubble-illustration illustration="anniversary" />
+```
+
+### List
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BUBBLE_ILLUSTRATION, BubbleIllustrationComponent } from '@lucca-front/ng/bubble-illustration';
+```
+
+```html
+<div class="demo-list">
+	@for (illustration of illustrations; track illustration) {
+		<div class="demo-list-item">
+			<lu-bubble-illustration [illustration]="illustration" />
+			<code class="code">{{ illustration }}</code>
+		</div>
+	}
+</div>
+```
+
+## HTML/CSS
+
+Classe CSS : `.bubbleIllustration`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/bubbleIllustration';
+```
+
+```html
+<span
+	class="bubbleIllustration"
+	aria-hidden="true"
+	[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/bubble-illustration/anniversary.svg' | luSafeExternalSvg"
+></span>
+```

package/llms/references/components/bubble-illustration/bubble-illustration.md

@@ -0,0 +1,77 @@
+# bubble-illustration
+
+## Import
+
+```typescript
+import { BubbleIllustrationComponent } from '@lucca-front/ng/bubble-illustration';
+```
+
+## Basic Usage
+
+```html
+<lu-bubble-illustration illustration="anniversary" />
+```
+
+## API Reference
+
+### BubbleIllustrationComponent (component)
+
+**Selector:** `lu-bubble-illustration`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `illustration` | `illustration` | `BubbleIllustration \| string` | — | ✅ | — | Modifie l’illustration. |
+| `palette` | `palette` | `Palette \| DecorativePalette` | `'product'` | — | — | Applique une palette de couleurs au composant. |
+| `size` | `size` | `'S' \| 'M' \| 'L'` | `'M'` | — | — | Modifie la taille du composant. |
+| `action` | `action` | `boolean` | `false` | — | `luBooleanAttribute` | Ajoute une icône d’action (+) à l’illustration. |
+
+## Type definitions
+
+- [`BubbleIllustration`](../../types/BubbleIllustration.md) — 102 available values
+
+## Related files
+
+- 📝 [Code & implementation](./bubble-illustration.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/bubble-illustration/bubble-illustration.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/bubble-illustration/bubble-illustration.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-bubble-illustration-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
+
+~ `action` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `BUBBLE_ILLUSTRATION_SIZE` constant and `BubbleIllustrationSize` type are now publicly exported and used to type the `size` input.
+
+#### 21.1.4
+
+##### Changed
+
+- `size` no longer accepts an empty string and now defaults to `M`.
+
+##### Fixed
+
+- `illustration` now also accepts a root-relative path (starting with `/`) so locally hosted illustrations are resolved correctly.
+
+#### 21.1.1
+
+##### Added
+
+- `illustration` now accepts an absolute URL in addition to the built-in illustration names.
+
+#### 21.1.0
+
+##### Added
+
+- `lu-bubble-illustration` component (`bubbleIllustration`) with the required `illustration` input plus `palette`, `size` and `action` inputs.