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

package/llms/references/components/form-field/form-field.md

@@ -0,0 +1,231 @@
+# form-field
+
+## Import
+
+```typescript
+import { FormFieldComponent, InputDirective, PresentationDisplayDirective } from '@lucca-front/ng/form-field';
+```
+
+## API Reference
+
+### FormFieldComponent (component)
+
+**Selector:** `lu-form-field`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `label` | `label` | `PortalContent` | — | ✅ | — | Modifie le label de l’input. [PortalContent] |
+| `hiddenLabel` | `hiddenLabel` | `boolean` | `false` | — | `luBooleanAttribute` | Masque le label en le conservant dans le DOM pour les lecteurs d’écran |
+| `inline` | `inline` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `statusControl` | `statusControl` | `AbstractControl \| null` | `null` | — | — | — |
+| `tooltip` | `tooltip` | `string \| SafeHtml \| null` | `null` | — | — | Affiche une icône (?) associée à une info-bulle. |
+| `tag` | `tag` | `string \| null` | `null` | — | — | — |
+| `AI` | `AI` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `iconAItooltip` | `iconAItooltip` | `string \| null` | `null` | — | — | — |
+| `iconAIalt` | `iconAIalt` | `string \| null` | `null` | — | — | — |
+| `width` | `width` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `invalid` | `invalid` | `unknown` | `null` | — | `luNullableBooleanAttribute` | Applique l’état invalide au champ. |
+| `inlineMessage` | `inlineMessage` | `PortalContent \| null` | `null` | — | — | Ajoute un texte indicatif sous le champ de formulaire. [PortalContent] |
+| `errorInlineMessage` | `errorInlineMessage` | `PortalContent \| null` | `null` | — | — | Ajoute un texte d’erreur sous le champ de formulaire lorsque celui-ci est en erreur. [PortalContent] |
+| `inlineMessageState` | `inlineMessageState` | `InlineMessageState \| null` | `null` | — | — | Modifie l’état de l’inline message. |
+| `size` | `size` | `FormFieldSize \| null` | `null` | — | — | — |
+| `extraDescribedBy` | `extraDescribedBy` | `string` | `''` | — | — | — |
+| `counter` | `counter` | `number` | `0` | — | `luNumberAttribute` | — |
+| `presentation` | `presentation` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `rolePresentationLabel` | `unknown` | — | — |
+| `layout` | `FormFieldLayout` | — | — |
+
+### InputDirective (directive)
+
+**Selector:** `[luInput]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `standalone` | `luInputStandalone` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### PresentationDisplayDirective (directive)
+
+**Selector:** `[luPresentationDisplay]`
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `FORM_FIELD_INSTANCE` | `FormFieldComponent` | — |
+| `LU_FORM_FIELD_TRANSLATIONS` | `unknown` | — |
+| `INPUT_FRAMED_INSTANCE` | `InputFramedComponent` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./form-field.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/form-field/form-field.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-form-field--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
+
+`FormFieldComponent` :
+  ~ `hiddenLabel` : transform booleanAttribute → luBooleanAttribute
+  ~ `inline` : transform booleanAttribute → luBooleanAttribute
+  ~ `AI` : transform booleanAttribute → luBooleanAttribute
+  ~ `width` : FormFieldWidth, FormFieldWidth | `${FormFieldWidth}` | null → unknown, transform numberAttribute → luNullableNumberAttribute
+  ~ `invalid` : boolean | null, boolean → unknown, transform booleanAttribute → luNullableBooleanAttribute
+  ~ `counter` : transform ∅ → luNumberAttribute
+  ~ `presentation` : transform booleanAttribute → luBooleanAttribute
+`InputDirective` :
+  ~ `luInputStandalone` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `signal forms` support: required-state detection now accounts for Angular signal-form fields (`@angular/forms/signals`) declared inside the field.
+
+#### 21.1.4
+
+##### Fixed
+
+- `aria-labelledby`: resolve NG0950 error caused by incorrect label id filtering.
+
+#### 21.1.0
+
+##### Added
+
+- `presentation`: display fields in a read-only presentation mode through the `presentation` input, the `lu-data-presentation` component, and the `luPresentationDisplay` / `luPresentationDisplayDefault` directives.
+- `intl`: allow overriding the component translations through the `intl` input.
+- `data-presentation`: show an em dash placeholder when the presentation value is empty.
+
+#### 21.0.4
+
+##### Fixed
+
+- `counter`: correctly detect content input changes for the character counter.
+
+#### 21.0.0
+
+##### Added
+
+- `size`: new `size` input (`'L'`) on `lu-input-framed`; the former styling is now applied via `mod-L`.
+
+##### Changed
+
+- `lu-input-framed`: renamed from `lu-framed-input` (`InputFramedComponent`, formerly `FramedInputComponent`).
+
+#### 20.3.0
+
+##### Added
+
+- `center`: new `center` input to horizontally center the content of `lu-input-framed`.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-framed-input`: new framed input component (`FramedInputComponent`) with a `framedPortal` input.
+
+##### Changed
+
+- No longer force the inline layout automatically when an arrow is displayed.
+
+#### 19.3.4
+
+##### Fixed
+
+- Prevent a null reference exception during control detection.
+
+#### 19.2.6
+
+##### Added
+
+- `extraDescribedBy`: new input to append extra ids to the input's `aria-describedby` attribute.
+
+#### 19.2.2
+
+##### Fixed
+
+- Improve detection of the required and invalid states.
+
+#### 19.2.1
+
+##### Changed
+
+- `width`: the `width` input now also accepts string values.
+
+##### Fixed
+
+- Correct the handling of the invalid-state override.
+
+#### 19.2.0
+
+##### Added
+
+- `width`: new `width` input (`20 | 30 | 40 | 50 | 60`) to constrain the field width.
+
+#### 19.1.3
+
+##### Fixed
+
+- Filter out entries with no control during control detection.
+
+#### 19.1.1
+
+##### Fixed
+
+- Support asynchronously loaded controls during control detection.
+
+#### 18.3.2
+
+##### Fixed
+
+- Correct the change detection of the label id.
+
+#### 18.3.1
+
+##### Fixed
+
+- Only apply the box arrow style when a box is actually present.
+
+#### 18.3.0
+
+##### Added
+
+- `inline`: new `inline` input to render the field with an inline layout.
+
+#### 18.2.0
+
+##### Fixed
+
+- `aria-labelledby`: prevent the label id from being appended repeatedly.
+
+#### 18.1.4
+
+##### Fixed
+
+- `invalid`: correctly handle the invalid-state override input.
+- Avoid emitting a `mod-undefined` class.
+
+#### 18.1.0
+
+##### Added
+
+- `rolePresentationLabel`: new input to set the label's role to presentation.
+
+##### Fixed
+
+- Add a focus-visible outline for the tooltip info icons in labels.

package/llms/references/components/form-header/form-header.md

@@ -0,0 +1,29 @@
+# form-header
+
+## Import
+
+```typescript
+import { FormHeaderComponent } from '@lucca-front/ng/form-header';
+```
+
+## API Reference
+
+### FormHeaderComponent (component)
+
+**Selector:** `lu-form-header`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `headingLevel` | `headingLevel` | `number` | `1` | — | `luNumberAttribute` | — |
+
+## Related files
+
+## 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
+
+~ `headingLevel` : 1 | 2 | 3 | 4 | 5 | 6 → number, transform ∅ → luNumberAttribute

package/llms/references/components/form-label/form-label.component.md

@@ -0,0 +1,106 @@
+# form-label — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-form-label-angular-basic--docs)
+
+## Angular
+
+Mots-clés : label, legend, intitulé
+
+Component selector : `luFormLabel`
+
+### Label basic
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { FORM_LABEL_SIZE, FormLabelComponent } from '@lucca-front/ng/form-label';
+```
+
+```html
+<label luFormLabel for="inputID">Label</label>
+```
+
+## HTML/CSS
+
+Classe CSS : `.formLabel`
+
+### Label basic
+
+```css
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/tag';
+```
+
+```html
+<label class="formLabel">
+	Label
+	<sup class="formLabel-required" aria-hidden="true">*</sup>
+	<span class="formLabel-info">
+		<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+		<span class="pr-u-mask">?</span>
+	</span>
+	<span class="formLabel-tag tag">Tag</span>
+</label>
+```
+
+### Label counter
+
+```css
+@forward '@lucca-front/scss/src/components/formLabel';
+```
+
+```html
+<label class="formLabel mod-counter" id="IDlabel" for="ID">
+	Label
+	<sup class="formLabel-required" aria-hidden="true">*</sup>
+	<span class="formLabel-info">
+		<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+		<span class="pr-u-mask">?</span>
+	</span>
+	<span class="formLabel-counter" id="IDcounter" aria-live="polite">
+		<span aria-hidden="true">7/77</span>
+		<span class="pr-u-mask">7 sur 77 caractères autorisés.</span>
+	</span>
+</label>
+```
+
+### Label error
+
+```css
+@forward '@lucca-front/scss/src/components/formLabel';
+```
+
+```html
+<label class="formLabel is-error">
+	Label
+	<sup class="formLabel-required" aria-hidden="true">*</sup>
+	<span class="formLabel-info">
+		<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+		<span class="pr-u-mask">?</span>
+	</span>
+</label>
+```
+
+### Label size
+
+```css
+@forward '@lucca-front/scss/src/components/formLabel';
+```
+
+```html
+<label class="formLabel mod-S">
+	Label
+	<sup class="formLabel-required" aria-hidden="true">*</sup>
+	<span class="formLabel-info">
+		<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+		<span class="pr-u-mask">?</span>
+	</span>
+</label>
+<label class="formLabel mod-XS">
+	Label
+	<sup class="formLabel-required" aria-hidden="true">*</sup>
+	<span class="formLabel-info">
+		<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+		<span class="pr-u-mask">?</span>
+	</span>
+</label>
+```

package/llms/references/components/form-label/form-label.md

@@ -0,0 +1,98 @@
+# form-label
+
+## Import
+
+```typescript
+import { FormLabelComponent } from '@lucca-front/ng/form-label';
+```
+
+## Basic Usage
+
+```html
+<label luFormLabel for="inputID">Label</label>
+```
+
+## API Reference
+
+### FormLabelComponent (component)
+
+**Selectors:** `label[luFormLabel]`, `legend[luFormLabel]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `required` | `required` | `boolean` | `false` | — | `luBooleanAttribute` | Marque le champ comme obligatoire. |
+| `error` | `error` | `boolean` | `false` | — | `luBooleanAttribute` | Applique l’état d’erreur au label. |
+| `tooltip` | `tooltip` | `string \| SafeHtml \| null` | `null` | — | — | Affiche une icône (?) associée à une info-bulle. |
+| `tag` | `tag` | `string \| null` | `null` | — | — | Ajoute un tag associé au label. |
+| `size` | `size` | `FormLabelSize \| null` | `null` | — | — | Modifie la taille du composant. |
+| `counterStatus` | `counterStatus` | `number` | `0` | — | `luNumberAttribute` | Nombre de caractères actuellement saisis. |
+| `counterMax` | `counterMax` | `number` | `0` | — | `luNumberAttribute` | Définit la valeur maximale du compteur de caractères. |
+| `counterId` | `counterId` | `string \| null` | `null` | — | — | — |
+
+## Related files
+
+- 📝 [Code & implementation](./form-label.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-form-label-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
+
+~ `required` : transform booleanAttribute → luBooleanAttribute
+~ `error` : transform booleanAttribute → luBooleanAttribute
+~ `counterStatus` : transform numberAttribute → luNumberAttribute
+~ `counterMax` : transform numberAttribute → luNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `pl` translations for the Polish locale.
+
+#### 21.3.0
+
+##### Added
+
+- `FormLabelSize` type and `FORM_LABEL_SIZE` constant listing the available sizes (`XS`, `S`), exported from the public API.
+
+##### Changed
+
+- The counter accessible label now resolves plural forms through `Intl.PluralRules`, adding support for locales with more than two plural forms (e.g. Polish).
+
+#### 21.2.0
+
+##### Added
+
+- `label[luFormLabel], legend[luFormLabel]` Angular component (`FormLabelComponent`) exposing the `required`, `error`, `tooltip`, `tag`, `size`, `counterStatus`, `counterMax` and `counterId` inputs.
+
+#### 20.1.0
+
+##### Added
+
+- `tag` styling to render a product `lu-tag` inside the label.
+
+#### 19.1.6
+
+##### Fixed
+
+- Vertical alignment of the info tooltip icon.
+
+#### 18.2.3
+
+##### Fixed
+
+- Layout of long labels: the character counter is now positioned independently so it no longer breaks the label alignment.
+
+#### 18.1.0
+
+##### Fixed
+
+- `focus-visible` outline on the info tooltip icon for keyboard navigation.

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

@@ -0,0 +1,55 @@
+# gauge — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-gauge-angular-basic--docs)
+
+## Angular
+
+Mots-clés : jauge, score
+
+Component selector : `lu-gauge`
+
+### Basic
+
+```js
+import { GaugeComponent } from '@lucca-front/ng/gauge';
+import { PALETTE } from '@lucca/prisme/core';
+```
+
+```html
+<lu-gauge size="40" value="33" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.gauge`
+
+Pour un chargement de données, préférez l'utilisation de [progression](https://zeroheight.com/94310e217/p/916abd-progression).
+
+### Circular
+
+```css
+@forward '@lucca-front/scss/src/components/gauge';
+```
+
+```html
+<svg
+	class="gauge"
+	width="40"
+	height="40"
+	viewBox="0 0 40 40"
+	[attr.style]="'--components-gauge-value: 33; --components-gauge-circleR: 16px'"
+>
+	<circle class="gauge-circleBackground" cx="20" cy="20" r="16"></circle>
+	<circle class="gauge-circleBar" cx="20" cy="20" r="16"></circle>
+</svg>
+```
+
+### Horizontal
+
+```css
+@forward '@lucca-front/scss/src/components/gauge';
+```
+
+```html
+<div class="gauge" [attr.style]="'--components-gauge-value: 33%'"></div>
+```

package/llms/references/components/gauge/gauge.md

@@ -0,0 +1,73 @@
+# gauge
+
+## Import
+
+```typescript
+import { GaugeComponent } from '@lucca-front/ng/gauge';
+```
+
+## Basic Usage
+
+```html
+<lu-gauge size="40" value="33" />
+```
+
+## API Reference
+
+### GaugeComponent (component)
+
+**Selector:** `lu-gauge`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `value` | `value` | `number` | `0` | — | `luNumberAttribute` | Valeur en pourcentage. |
+| `thin` | `thin` | `boolean` | `false` | — | `luBooleanAttribute` | Diminue l’épaisseur de la jauge. |
+| `circular` | `circular` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche la jauge sous une forme circulaire. |
+| `animated` | `animated` | `boolean` | `false` | — | `luBooleanAttribute` | Ajoute une animation au chargement ou lorsque la valeur est modifiée. |
+| `noAlt` | `noAlt` | `boolean` | `false` | — | `luBooleanAttribute` | Empêche la restitution par le lecteur d’écran. À n’utiliser que si l’information est déjà présente. |
+| `palette` | `palette` | `Palette` | `'none'` | — | — | Applique une palette de couleurs à la jauge. |
+| `alt` | `alt` | `string` | `''` | — | — | Information restituée par le lecteur d’écran. |
+| `size` | `size` | `number` | `40` | — | `luNumberAttribute` | Taille du composant pour sa forme circulaire. |
+
+## Related files
+
+- 📝 [Code & implementation](./gauge.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/gauge/gauge.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-gauge-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
+
+~ `value` : transform numberAttribute → luNumberAttribute
+~ `thin` : transform booleanAttribute → luBooleanAttribute
+~ `circular` : transform booleanAttribute → luBooleanAttribute
+~ `animated` : transform booleanAttribute → luBooleanAttribute
+~ `noAlt` : transform booleanAttribute → luBooleanAttribute
+~ `size` : transform numberAttribute → luNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 20.3.1
+
+##### Fixed
+
+- SCSS import of the component.
+
+#### 20.3.0
+
+##### Added
+
+- `lu-gauge` component (`gauge`) with the `value`, `size`, `palette`, `thin`, `animated`, `circular`, `alt` and `noAlt` inputs.
+- `mod-circular` CSS variant to display the gauge as a circle.
+
+#### 18.2.3
+
+##### Fixed
+
+- `border-radius` of the gauge bar.

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

@@ -0,0 +1,15 @@
+# grid — Code & Implementation
+
+## Angular
+
+Mots-clés : grille, colonnes, layout
+
+Component selector : `lu-grid`
+
+Un exemple de formulaire complet utilisant `mode="form"` est présent sur la page Form layout.
+
+## HTML/CSS
+
+Classe CSS : `.grid`
+
+Un exemple de formulaire complet utilisant `mode="form"` est présent sur la page Form layout.