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

package/llms/references/components/radiofield/radiofield.md

@@ -0,0 +1,122 @@
+# radiofield
+
+## Import
+
+```typescript
+import { RadioGroupInputComponent, RadioComponent } from '@lucca-front/ng/forms';
+```
+
+## API Reference
+
+### RadioGroupInputComponent (component)
+
+**Selector:** `lu-radio-group-input`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `size` | `size` | `'S' \| 'M'` | — | — | — | Modifie la taille du radio. |
+| `framed` | `framed` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `framedCenter` | `framedCenter` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `framedSize` | `framedSize` | `RadioGroupInputFramedSize \| null` | `null` | — | — | — |
+| `arrow` | `arrow` | `'neutral' \| 'default'` | — | — | — | — |
+
+### RadioComponent (component)
+
+**Selector:** `lu-radio`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `value` | `value` | `T` | — | ✅ | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `inlineMessage` | `inlineMessage` | `PortalContent` | — | — | — | Ajoute un texte descriptif (aide, erreur, etc.) sous le champ de formulaire. |
+| `tag` | `tag` | `string` | — | — | — | — |
+| `framedPortal` | `framedPortal` | `PortalContent` | — | — | — | — |
+
+## Related files
+
+- 📝 [Code & implementation](./radiofield.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/radiofield/radiofield.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/radiofield/radiofield.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-radiofield-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
+
+`RadioGroupInputComponent` :
+  ~ `framed` : transform booleanAttribute → luBooleanAttribute
+  ~ `framedCenter` : transform booleanAttribute → luBooleanAttribute
+`RadioComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Added
+
+- `presentation` display: the selected `lu-radio` now renders its projected content through the field's presentation display mode.
+
+#### 21.0.0
+
+##### Added
+
+- `framedSize`: input on `lu-radio-group-input` to set the framed cards size (`'L'`).
+
+#### 20.3.0
+
+##### Added
+
+- `framedCenter`: input on `lu-radio-group-input` to vertically center the content of framed cards.
+
+#### 20.1.0
+
+##### Added
+
+- `framed`: input on `lu-radio-group-input` to display the radios as framed input cards, along with the per-radio `tag` and `framedPortal` inputs and the `illustration` / `info` content slots.
+
+##### Changed
+
+- `arrow` no longer forces the field into an inline layout automatically.
+
+#### 19.3.3
+
+##### Changed
+
+- `inlineMessage`: now accepts a `PortalContent` instead of a plain string.
+
+#### 18.3.0
+
+##### Added
+
+- `arrow`: input on `lu-radio-group-input` (`'neutral'` | `'default'`) to display a box arrow on each radio.
+
+#### 18.2.4
+
+##### Fixed
+
+- Radio input size no longer renders incorrectly in Safari.
+
+#### 18.1.4
+
+##### Fixed
+
+- Avoid applying a `mod-undefined` class when no `size` is set.
+
+#### 18.1.2
+
+##### Fixed
+
+- Add the missing `name` attribute on the radio input.
+
+#### 18.1.0
+
+##### Fixed
+
+- Add the `name` attribute on the radio input for keyboard navigation in Firefox.

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

@@ -0,0 +1,60 @@
+# readmore — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-readmore-angular-ai--docs)
+
+## Angular
+
+Component selector : `lu-read-more`
+
+### More ai
+
+```js
+import { ReadMoreComponent } from '@lucca-front/ng/read-more';
+import { TagComponent } from '@lucca-front/ng/tag';
+```
+
+```html
+<div class="box">
+	<h3 class="mod-elementAfterText pr-u-marginBlockEnd150">
+		Ce qu’il faut retenir
+		<lu-tag AI label="Généré par IA" icon="weatherStars" />
+	</h3>
+	<lu-read-more textFlow lineClamp="2">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ullamcorper blandit. Vestibulum neque
+			nisi, gravida ac dictum in, finibus at lorem. Mauris fringilla viverra ornare. Proin bibendum, tortor sed
+			fringilla ullamcorper, nulla purus mollis tellus, at facilisis sapien sem id orci. Fusce ac nibh convallis,
+			fermentum orci in, lobortis arcu.
+		</p>
+		<p>
+			Praesent id purus ac eros maximus ultricies. Nam vulputate, nisl vel porta mattis, elit eros ornare leo, ut
+			faucibus leo ligula malesuada nulla. Ut imperdiet, mi sit amet ultrices vehicula, massa ligula mattis dolor, a
+			vehicula libero ligula eget orci. Maecenas mi diam, facilisis id leo dictum, malesuada finibus mi. Quisque tempus
+			at est eget euismod. Integer eget mattis magna, commodo vulputate erat.
+		</p>
+	</lu-read-more>
+</div>
+```
+
+### More
+
+```js
+import { READ_MORE_SURFACE, ReadMoreComponent } from '@lucca-front/ng/read-more';
+```
+
+```html
+<lu-read-more lineClamp="3" surface="default">
+	<p>
+		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos ut maiores ullam facere voluptatum odio eum?
+		Debitis natus nulla fugit
+		<a href="#">deleniti</a>
+		esse ipsum sint voluptatibus! Debitis voluptates impedit blanditiis natus.
+	</p>
+	<p>
+		Vitae veritatis non aliquam obcaecati illum voluptatum, voluptas dignissimos perspiciatis velit odit, magnam
+		<a href="#">aspernatur</a>
+		culpa totam nemo, magni cum? Magni sapiente voluptatibus temporibus. Quas reprehenderit deleniti sit veniam,
+		molestias obcaecati.
+	</p>
+</lu-read-more>
+```

package/llms/references/components/readmore/readmore.md

@@ -0,0 +1,88 @@
+# readmore
+
+## Import
+
+```typescript
+import { ReadMoreComponent } from '@lucca-front/ng/read-more';
+```
+
+## API Reference
+
+### ReadMoreComponent (component)
+
+**Selector:** `lu-read-more`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `lineClamp` | `lineClamp` | `number` | `5` | — | `luNumberAttribute` | Modifie le nombre de lignes affichées à l’état replié. |
+| `openOnly` | `openOnly` | `boolean` | `false` | — | `luBooleanAttribute` | Empêche la fermeture du composant en masquant le bouton "Lire moins" |
+| `plainText` | `plainText` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `textFlow` | `textFlow` | `boolean` | `false` | — | `luBooleanAttribute` | Applique les espacements du composant Text flow |
+| `surface` | `surface` | `ReadMoreSurface \| string \| null` | `null` | — | — | Modifie la couleur de fond sous le bouton "Lire plus / moins" |
+| `innerContent` | `innerContent` | `null \| string` | `null` | — | — | Permet de passer le contenu via un innerHTML |
+
+## Related files
+
+- 📝 [Code & implementation](./readmore.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/readmore/readmore.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-readmore-angular-ai--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
+
+~ `lineClamp` : transform ∅ → luNumberAttribute
+~ `openOnly` : transform booleanAttribute → luBooleanAttribute
+~ `plainText` : transform booleanAttribute → luBooleanAttribute
+~ `textFlow` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `READ_MORE_SURFACE` constant and `ReadMoreSurface` type are now publicly exported and used to type the `surface` input.
+
+#### 21.2.1
+
+##### Fixed
+
+- Content projected after the component is taken into account when the clamp state is recomputed.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.0
+
+##### Added
+
+- `innerContent` input to pass the collapsible content directly to the component instead of projecting it.
+
+#### 20.3.1
+
+##### Fixed
+
+- `ResizeObserver` no longer triggers unnecessary recomputations, and the expanded state is no longer set when the content is not clamped.
+
+#### 20.2.1
+
+##### Fixed
+
+- Clamp detection for contents containing lists or headings.
+- Line break of the disabled state.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-read-more` component (`readMore`) with the `lineClamp`, `openOnly`, `surface`, `textFlow` and `intl` inputs.

package/llms/references/components/resource-card/resource-card.component.md

@@ -0,0 +1,216 @@
+# resource-card — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-resource-card-angular-basic--docs)
+
+## Angular
+
+Mots-clés : carte, fiche, tuile, ressource
+
+Component selector : `lu-resource-card`
+
+### Basis
+
+```js
+import { provideRouter } from '@angular/router';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { LinkComponent } from '@lucca-front/ng/link';
+import { RESOURCE_CARD_SIZE, ResourceCardButtonComponent, ResourceCardComponent, ResourceCardLinkComponent, ResourceCardWrapperComponent } from '@lucca-front/ng/resource-card';
+import { StatusBadgeComponent } from '@lucca-front/ng/status-badge';
+import { TagComponent } from '@lucca-front/ng/tag';
+import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+```
+
+```html
+<lu-resource-card>
+	<a href="#" luResourceCardAction luTooltip luTooltipWhenEllipsis>Lorem ipsum dolor</a>
+</lu-resource-card>
+```
+
+### Dnd
+
+```js
+import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
+import { provideRouter } from '@angular/router';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { LinkComponent } from '@lucca-front/ng/link';
+import { RESOURCE_CARD_SIZE, ResourceCardButtonComponent, ResourceCardComponent, ResourceCardLinkComponent, ResourceCardWrapperComponent } from '@lucca-front/ng/resource-card';
+import { StatusBadgeComponent } from '@lucca-front/ng/status-badge';
+import { TagComponent } from '@lucca-front/ng/tag';
+import { LuTooltipModule } from '@lucca-front/ng/tooltip';
+```
+
+```html
+<lu-resource-card-wrapper cdkDropList draggable>
+	<lu-resource-card cdkDrag>
+		<a href="#" luResourceCardAction>Lorem ipsum dolor</a>
+		<ng-container resourceCardInfos>
+			<lu-status-badge label="Status" />
+			<lu-status-badge label="Status" />
+		</ng-container>
+		<ng-container resourceCardIllustration>
+			<div
+				class="pr-u-inlineSize100% pr-u-blockSize100% pr-u-borderRadiusDefault"
+				style="background-color: var(--palettes-lavender-100)"
+			></div>
+		</ng-container>
+		<ng-container resourceCardAction>
+			<button type="button" luButton>Lorem ipsum</button>
+		</ng-container>
+		<ng-container resourceCardContent>
+			Lorem
+			<a href="#" luLink>ipsum</a>
+			dolor sit amet, consectetur adipiscing elit, sed do.
+		</ng-container>
+	</lu-resource-card>
+	<lu-resource-card cdkDrag>
+		<a href="#" luResourceCardAction>Lorem ipsum dolor</a>
+		<ng-container resourceCardInfos>
+			<lu-status-badge label="Status" />
+			<lu-status-badge label="Status" />
+		</ng-container>
+		<ng-container resourceCardIllustration>
+			<div
+				class="pr-u-inlineSize100% pr-u-blockSize100% pr-u-borderRadiusDefault"
+				style="background-color: var(--palettes-lavender-100)"
+			></div>
+		</ng-container>
+		<ng-container resourceCardAction>
+			<button type="button" luButton>Lorem ipsum</button>
+		</ng-container>
+		<ng-container resourceCardContent>
+			Lorem
+			<a href="#" luLink>ipsum</a>
+			dolor sit amet, consectetur adipiscing elit, sed do.
+		</ng-container>
+	</lu-resource-card>
+	<lu-resource-card cdkDrag>
+		<a href="#" luResourceCardAction>Lorem ipsum dolor</a>
+		<ng-container resourceCardInfos>
+			<lu-status-badge label="Status" />
+			<lu-status-badge label="Status" />
+		</ng-container>
+		<ng-container resourceCardIllustration>
+			<div
+				class="pr-u-inlineSize100% pr-u-blockSize100% pr-u-borderRadiusDefault"
+				style="background-color: var(--palettes-lavender-100)"
+			></div>
+		</ng-container>
+		<ng-container resourceCardAction>
+			<button type="button" luButton>Lorem ipsum</button>
+		</ng-container>
+		<ng-container resourceCardContent>
+			Lorem
+			<a href="#" luLink>ipsum</a>
+			dolor sit amet, consectetur adipiscing elit, sed do.
+		</ng-container>
+	</lu-resource-card>
+</lu-resource-card-wrapper>
+```
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/resourceCard';
+```
+
+```html
+<section class="resourceCard" #resourceCard1>
+	<div class="resourceCard-layout">
+		<header class="resourceCard-layout-header">
+			<h3 class="resourceCard-layout-header-title">
+				<a
+					href="#"
+					luTooltip
+					luTooltipWhenEllipsis
+					[luTooltipAnchor]="resourceCard1"
+					class="resourceCard-layout-header-title-action"
+				>
+					Lorem ipsum dolor
+				</a>
+			</h3>
+		</header>
+	</div>
+</section>
+```
+
+### Dnd
+
+```css
+@forward '@lucca-front/scss/src/components/resourceCard';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<div class="resourceCardWrapper">
+	<section class="resourceCard" #resourceCard1>
+		<div class="resourceCard-layout">
+			<div class="resourceCard-layout-before">
+				<div class="button resourceCard-layout-before-button">
+					<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span>
+				</div>
+			</div>
+			<header class="resourceCard-layout-header">
+				<h3 class="resourceCard-layout-header-title">
+					<a
+						href="#"
+						luTooltip
+						luTooltipWhenEllipsis
+						[luTooltipAnchor]="resourceCard1"
+						class="resourceCard-layout-header-title-action"
+					>
+						Lorem ipsum dolor
+					</a>
+				</h3>
+			</header>
+		</div>
+	</section>
+	<section class="resourceCard cdk-drag-preview" #resourceCard1>
+		<div class="resourceCard-layout">
+			<div class="resourceCard-layout-before">
+				<div class="button resourceCard-layout-before-button">
+					<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span>
+				</div>
+			</div>
+			<header class="resourceCard-layout-header">
+				<h3 class="resourceCard-layout-header-title">
+					<a
+						href="#"
+						luTooltip
+						luTooltipWhenEllipsis
+						[luTooltipAnchor]="resourceCard1"
+						class="resourceCard-layout-header-title-action"
+					>
+						Lorem ipsum dolor
+					</a>
+				</h3>
+			</header>
+		</div>
+	</section>
+	<section class="resourceCard cdk-drag-placeholder" #resourceCard1>
+		<div class="resourceCard-layout">
+			<div class="resourceCard-layout-before">
+				<div class="button resourceCard-layout-before-button">
+					<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span>
+				</div>
+			</div>
+			<header class="resourceCard-layout-header">
+				<h3 class="resourceCard-layout-header-title">
+					<a
+						href="#"
+						luTooltip
+						luTooltipWhenEllipsis
+						[luTooltipAnchor]="resourceCard1"
+						class="resourceCard-layout-header-title-action"
+					>
+						Lorem ipsum dolor
+					</a>
+				</h3>
+			</header>
+		</div>
+	</section>
+</div>
+```

package/llms/references/components/resource-card/resource-card.md

@@ -0,0 +1,106 @@
+# resource-card
+
+## Import
+
+```typescript
+import { ResourceCardButtonComponent, ResourceCardLinkComponent, ResourceCardComponent, ResourceCardWrapperComponent } from '@lucca-front/ng/resource-card';
+```
+
+## API Reference
+
+### ResourceCardButtonComponent (component)
+
+**Selector:** `button[luResourceCardAction]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### ResourceCardLinkComponent (component)
+
+**Selector:** `a[luResourceCardAction]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### ResourceCardComponent (component)
+
+**Selector:** `lu-resource-card`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `draggable` | `draggable` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `grid` | `grid` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `headingLevel` | `headingLevel` | `'1' \| '2' \| '3' \| '4' \| '5' \| '6'` | `'3'` | — | — | — |
+| `size` | `size` | `ResourceCardSize \| null` | `null` | — | — | — |
+
+### ResourceCardWrapperComponent (component)
+
+**Selector:** `lu-resource-card-wrapper`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `grid` | `grid` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `draggable` | `draggable` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `size` | `size` | `ResourceCardSize \| null` | `null` | — | — | — |
+
+## Related files
+
+- 📝 [Code & implementation](./resource-card.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/resource-card/resource-card.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-resource-card-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
+
+`ResourceCardButtonComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`ResourceCardLinkComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`ResourceCardComponent` :
+  ~ `draggable` : transform booleanAttribute → luBooleanAttribute
+  ~ `grid` : transform booleanAttribute → luBooleanAttribute
+`ResourceCardWrapperComponent` :
+  ~ `grid` : transform booleanAttribute → luBooleanAttribute
+  ~ `draggable` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `RESOURCE_CARD_HEADING_LEVEL` and `RESOURCE_CARD_SIZE` constants, together with the `ResourceCardHeadingLevel` and `ResourceCardSize` types, are now publicly exported and used to type the `headingLevel` and `size` inputs.
+
+#### 21.1.4
+
+##### Fixed
+
+- Misspelled host attribute of the card.
+
+#### 21.1.3
+
+##### Fixed
+
+- Action rendering with the `critical` palette (`mod-critical`).
+
+#### 21.0.0
+
+##### Added
+
+- `lu-resource-card` component (`resourceCard`) with the `size`, `headingLevel`, `grid`, `draggable` and `disabled` inputs.
+- `lu-resource-card-wrapper` component to lay out a collection of cards, along with the `LU_RESOURCE_CARD_WRAPPER_INSTANCE` injection token.
+- `[luResourceCardAction]` directive for `a` and `button` elements, to turn the whole card into an actionable element.