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

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

@@ -0,0 +1,114 @@
+# switchfield — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-switchfield-angular--docs)
+
+## Angular
+
+Mots-clés : interrupteur, toggle, on, off, activation
+
+Component selector : `lu-switch-input`
+
+### Field
+
+```js
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FORM_FIELD_SIZE, FormFieldComponent } from '@lucca-front/ng/form-field';
+import { CheckboxInputComponent, SwitchInputComponent } from '@lucca-front/ng/forms';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+```
+
+```html
+<lu-form-field label="Label" tooltip="Tooltip message" inlineMessage="Helper text" inlineMessageState="default">
+	<lu-switch-input [(ngModel)]="model.example" required />
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+## HTML/CSS
+
+Classe CSS : `.switchField`
+
+### Field disabled
+
+```css
+@forward '@lucca-front/scss/src/components/switchField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field">
+	<label class="formLabel" for="ID">Label</label>
+	<span class="switchField">
+		<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" disabled />
+		<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
+	</span>
+	<div class="inlineMessage" id="IDmessage">
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```
+
+### Field invalid
+
+```css
+@forward '@lucca-front/scss/src/components/switchField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field">
+	<label class="formLabel" for="ID">Label</label>
+	<span class="switchField">
+		<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" aria-invalid="true" />
+		<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
+	</span>
+	<div class="inlineMessage" id="IDmessage">
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```
+
+### Field size
+
+```css
+@forward '@lucca-front/scss/src/components/switchField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field mod-S">
+	<label class="formLabel" for="ID">Label</label>
+	<span class="switchField">
+		<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" />
+		<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
+	</span>
+	<div class="inlineMessage" id="IDmessage">
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```
+
+### Field
+
+```css
+@forward '@lucca-front/scss/src/components/switchField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field">
+	<label class="formLabel" for="ID">Label</label>
+	<span class="switchField">
+		<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" />
+		<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
+	</span>
+	<div class="inlineMessage" id="IDmessage">
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```

package/llms/references/components/switchfield/switchfield.md

@@ -0,0 +1,56 @@
+# switchfield
+
+## Import
+
+```typescript
+import { SwitchInputComponent } from '@lucca-front/ng/forms';
+```
+
+## API Reference
+
+### SwitchInputComponent (component)
+
+**Selector:** `lu-switch-input`
+
+## Related files
+
+- 📝 [Code & implementation](./switchfield.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/switchfield/switchfield.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-switchfield-angular--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Added
+
+- `presentation`: when the parent `lu-form-field` is switched to presentation mode, the switch now renders its state as a readable `yes`/`no` value instead of the interactive control.
+
+#### 20.3.3
+
+##### Fixed
+
+- `styles`: corrected the bundled SCSS import to point at the `switchField` styles so the control is displayed correctly.
+
+#### 20.2.3
+
+##### Fixed
+
+- `styles`: the component now imports its own styles through `styleUrl`, so switch styling no longer needs to be pulled in globally.
+
+#### 20.2.0
+
+##### Changed
+
+- `hover`/`active`: updated the hover and active state colors to use darker palette shades.
+
+#### 18.2.4
+
+##### Fixed
+
+- `opacity`: the native input now uses `opacity: 0.0001` instead of `0`, keeping it focusable and announced by screen readers in Safari.

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

@@ -0,0 +1,55 @@
+# tableofcontent — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-tableofcontent-angular-basic--docs)
+
+## Angular
+
+Mots-clés : table des matières, sommaire, ancres
+
+Component selector : `lu-table-of-content`
+
+### Of content
+
+```js
+import { TableOfContentComponent, TableOfContentLinkDirective } from '@lucca-front/ng/table-of-content';
+```
+
+```html
+<lu-table-of-content>
+	<a *luTableOfContentLink class="is-active" href="#" (click)="$event.preventDefault()">Section 1</a>
+	<a *luTableOfContentLink href="#" (click)="$event.preventDefault()">Section 2</a>
+	<a *luTableOfContentLink href="#" (click)="$event.preventDefault()">Section 3</a>
+	<a *luTableOfContentLink href="#" (click)="$event.preventDefault()">Section 4</a>
+</lu-table-of-content>
+```
+
+## HTML/CSS
+
+Classe CSS : `.tableOfContent`
+
+La table des matière est sticky par défaut. Ajoutez une valeur top à `tableOfContent` pour l'activer.
+
+### Of content
+
+```css
+@forward '@lucca-front/scss/src/components/tableOfContent';
+```
+
+```html
+<nav class="tableOfContent">
+	<ul class="tableOfContent-list">
+		<li class="tableOfContent-list-item">
+			<a href="#" class="tableOfContent-list-item-action is-active">Section 1</a>
+		</li>
+		<li class="tableOfContent-list-item">
+			<a href="#" class="tableOfContent-list-item-action">Section 2</a>
+		</li>
+		<li class="tableOfContent-list-item">
+			<a href="#" class="tableOfContent-list-item-action">Section 3</a>
+		</li>
+		<li class="tableOfContent-list-item">
+			<a href="#" class="tableOfContent-list-item-action">Section 4</a>
+		</li>
+	</ul>
+</nav>
+```

package/llms/references/components/tableofcontent/tableofcontent.md

@@ -0,0 +1,41 @@
+# tableofcontent
+
+## Import
+
+```typescript
+import { TableOfContentLinkDirective, TableOfContentComponent } from '@lucca-front/ng/table-of-content';
+```
+
+## API Reference
+
+### TableOfContentLinkDirective (directive)
+
+**Selector:** `[luTableOfContentLink]`
+
+### TableOfContentComponent (component)
+
+**Selector:** `lu-table-of-content`
+
+## Related files
+
+- 📝 [Code & implementation](./tableofcontent.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-tableofcontent-angular-basic--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.0.0
+
+##### Added
+
+- `lu-table-of-content` component (`tableOfContent`) and the `[luTableOfContentLink]` directive to declare each entry.
+
+#### 18.2.0
+
+##### Changed
+
+- Colors of the disabled entries.

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

@@ -0,0 +1,112 @@
+# tags — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-tags-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-tag`
+
+### Tag
+
+```js
+import { TAG_SIZE, TagComponent } from '@lucca-front/ng/tag';
+```
+
+```html
+<lu-tag label="Text" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.tag`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag">Text</span>
+```
+
+### Clickable
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<a href="#" class="tag">Text</a>
+```
+
+### Ia
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag mod-AI">Text</span>
+```
+
+### Icon
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag">
+	<span class="lucca-icon icon-heart" aria-hidden="true"></span>
+	<span class="tag-content">Text</span>
+</span>
+```
+
+### Outlined
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag mod-outlined">Text</span>
+```
+
+### Palettes
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag palette-product">Text</span>
+<span class="tag palette-success">Text</span>
+<span class="tag palette-warning">Text</span>
+<span class="tag palette-error">Text</span>
+<span class="tag palette-kiwi">Text</span>
+<span class="tag palette-lime">Text</span>
+<span class="tag palette-cucumber">Text</span>
+<span class="tag palette-mint">Text</span>
+<span class="tag palette-glacier">Text</span>
+<span class="tag palette-lagoon">Text</span>
+<span class="tag palette-blueberry">Text</span>
+<span class="tag palette-lavender">Text</span>
+<span class="tag palette-grape">Text</span>
+<span class="tag palette-watermelon">Text</span>
+<span class="tag palette-pumpkin">Text</span>
+<span class="tag palette-pineapple">Text</span>
+```
+
+### Sizes
+
+```css
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<span class="tag mod-L">Text</span>
+<span class="tag mod-M">Text</span>
+<!-- 20.3 -->
+<span class="tag mod-S">Text</span>
+```

package/llms/references/components/tags/tags.md

@@ -0,0 +1,115 @@
+# tags
+
+## Import
+
+```typescript
+import { TagComponent } from '@lucca-front/ng/tag';
+```
+
+## API Reference
+
+### TagComponent (component)
+
+**Selectors:** `lu-tag`, `pr-tag`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `string` | — | ✅ | — | Modifie le texte affiché par le composant. |
+| `size` | `size` | `'S' \| 'M' \| 'L'` | `'M'` | — | — | Modifie la taille du tag. |
+| `palette` | `palette` | `Palette \| DecorativePalette` | `'none'` | — | — | — |
+| `outlined` | `outlined` | `boolean` | `false` | — | `booleanAttribute` | Applique un style secondaire au tag. |
+| `link` | `link` | `string` | — | — | — | — |
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | Ajoute une icône au tag. |
+| `withEllipsis` | `withEllipsis` | `boolean` | `false` | — | `booleanAttribute` | [v20.3] Ellipse le texte et ajoute une tooltip lorsque le label est trop long. |
+| `AI` | `AI` | `boolean` | `false` | — | `booleanAttribute` | [v20.3] Applique les couleurs IA. |
+
+## Type definitions
+
+- [`DecorativePalette`](../../types/DecorativePalette.md) — 12 available values
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./tags.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/tags/tags.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/tags/tags.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-tags-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
+
++ selector `pr-tag`
+
+### Notes de release (ZeroHeight)
+
+#### 20.3.0
+
+##### Added
+
+- `AI` input to render the tag with the AI styling (`mod-AI`).
+- `withEllipsis` input to truncate the label with an ellipsis and reveal the full text in a tooltip when it overflows.
+- `size` now supports the `S` (small) value.
+
+#### 20.2.3
+
+##### Fixed
+
+- `position` now defaults to `static` to prevent the tag from creating an unintended stacking context.
+
+#### 19.2.6
+
+##### Changed
+
+- `.tag-content` element is now always rendered around the label, even when no icon is displayed.
+
+##### Fixed
+
+- `cursor` now inherits from the parent instead of being forced to `default`.
+
+#### 19.2.4
+
+##### Fixed
+
+- `icon` display size corrected (default `XS`, and `S` for the large tag).
+
+#### 19.2.1
+
+##### Fixed
+
+- `icon` vertical alignment fixed by centering the tag content.
+
+#### 19.1.5
+
+##### Changed
+
+- `icon` input now accepts `undefined`.
+
+#### 18.3.0
+
+##### Changed
+
+- `size` input replaces the `S` option with `L`.
+- `palette` input now also accepts `DecorativePalette` values.
+
+#### 18.2.1
+
+##### Fixed
+
+- `mod-outlined` text color now uses the palette's 800 shade for correct contrast.
+
+#### 18.1.4
+
+##### Fixed
+
+- `size` no longer produces an invalid `mod-undefined` CSS class when left unset.
+
+#### 18.1.0
+
+##### Added
+
+- `lu-tag` component (selector `lu-tag`) with `label`, `size`, `palette`, `outlined`, `link` and `icon` inputs.

package/llms/references/components/text-flow/text-flow.component.md

@@ -0,0 +1,71 @@
+# text-flow — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-text-flow-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-text-flow`
+
+### Basic
+
+```js
+import { TextFlowComponent } from '@lucca-front/ng/text-flow';
+```
+
+```html
+<lu-text-flow>
+	<h1>Heading 1</h1>
+	<h2>Heading 2</h2>
+	<p>Paragraph</p>
+	<p>Paragraph</p>
+	<h2>Heading 2</h2>
+	<p>Paragraph</p>
+	<ul>
+		<li>List item</li>
+		<li>List item</li>
+		<li>List item</li>
+	</ul>
+	<h3>Heading 3</h3>
+	<p>Paragraph</p>
+	<h4>Heading 4</h4>
+	<ol>
+		<li>List item</li>
+		<li>List item</li>
+		<li>List item</li>
+	</ol>
+</lu-text-flow>
+```
+
+## HTML/CSS
+
+Classe CSS : `.textFlow`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/textFlow';
+```
+
+```html
+<div class="textFlow">
+	<h1>Heading 1</h1>
+	<h2>Heading 2</h2>
+	<p>Paragraph</p>
+	<p>Paragraph</p>
+	<h2>Heading 2</h2>
+	<p>Paragraph</p>
+	<ul>
+		<li>List item</li>
+		<li>List item</li>
+		<li>List item</li>
+	</ul>
+	<h3>Heading 3</h3>
+	<p>Paragraph</p>
+	<h4>Heading 4</h4>
+	<ol>
+		<li>List item</li>
+		<li>List item</li>
+		<li>List item</li>
+	</ol>
+</div>
+```

package/llms/references/components/text-flow/text-flow.md

@@ -0,0 +1,63 @@
+# text-flow
+
+## Import
+
+```typescript
+import { TextFlowComponent } from '@lucca-front/ng/text-flow';
+```
+
+## Basic Usage
+
+```html
+<lu-text-flow> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Paragraph</p> <p>Paragraph</p> <h2>Heading 2</h2> <p>Paragraph</p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> <h3>Heading 3</h3> <p>Paragraph</p> <h4>Heading 4</h4> <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol>
+</lu-text-flow>
+```
+
+## API Reference
+
+### TextFlowComponent (component)
+
+**Selector:** `lu-text-flow`
+
+## Related files
+
+- 📝 [Code & implementation](./text-flow.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/text-flow/text-flow.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/text-flow/text-flow.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-text-flow-angular-basic--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Changed
+
+- Long words now wrap (`overflow-wrap`) instead of overflowing their container.
+
+#### 21.1.0
+
+##### Added
+
+- `lu-text-flow` component (`textFlow`) wrapping the `textFlow` CSS component.
+
+#### 19.3.0
+
+##### Changed
+
+- Margins on both ends of `.textFlow` are removed.
+
+#### 19.2.3
+
+##### Added
+
+- `ol` lists support.
+
+#### 19.2.0
+
+##### Changed
+
+- Titles no longer add their own spacing and inner margins were harmonized.

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

@@ -0,0 +1,69 @@
+# textareafield — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-textareafield-angular--docs)
+
+## Angular
+
+Component selector : `lu-textarea-input`
+
+### Field
+
+```js
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FORM_FIELD_SIZE, FormFieldComponent } from '@lucca-front/ng/form-field';
+import { TextareaInputComponent } from '@lucca-front/ng/forms';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+```
+
+```html
+<lu-form-field
+	label="Label"
+	tooltip="Je suis un message d’aide"
+	inlineMessage="Helper text"
+	inlineMessageState="default"
+	counter="0"
+>
+	<lu-textarea-input
+		autoResizeScrollIntoView="false"
+		autoResize="false"
+		required
+		placeholder="Placeholder"
+		rows="3"
+		[(ngModel)]="model.example"
+	/>
+</lu-form-field>
+```
+
+## HTML/CSS
+
+### Field
+
+```css
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+@forward '@lucca-front/scss/src/components/textField';
+```
+
+```html
+<div class="form-field">
+	<label class="formLabel" id="IDlabel" for="ID">Label</label>
+	<div class="textField">
+		<div class="textField-input">
+			<textarea
+				rows="3"
+				id="ID"
+				class="textField-input-value"
+				aria-labelledby="IDlabel"
+				aria-describedby="IDmessage"
+				placeholder="Placeholder"
+				aria-invalid="false"
+			></textarea>
+		</div>
+	</div>
+	<div class="inlineMessage" id="IDmessage">
+		<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```