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

package/llms/references/components/callout-popover/callout-popover.md

@@ -0,0 +1,201 @@
+# callout-popover
+
+## Import
+
+```typescript
+import { CalloutPopoverComponent } from '@lucca-front/ng/callout';
+```
+
+## API Reference
+
+### CalloutPopoverComponent (component)
+
+**Selector:** `lu-callout-popover`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `openDelay` | `openDelay` | `number` | `50` | — | `luNumberAttribute` | — |
+| `closeDelay` | `closeDelay` | `number` | `500` | — | `luNumberAttribute` | — |
+| `buttonLabel` | `buttonLabel` | `string \| number` | — | — | — | Label du bouton. |
+| `buttonAlt` | `buttonAlt` | `string` | `''` | — | — | Information restituée par le bouton. |
+| `headingHiddenIfSingleItem` | `headingHiddenIfSingleItem` | `boolean` | `false` | — | `luBooleanAttribute` | Masque le titre si le popover ne contient qu’un élément. |
+| `popoverTrigger` | `popoverTrigger` | `'click' \| 'click+hover' \| 'hover+focus'` | `'click+hover'` | — | — | — |
+| `palette` | `palette` | `Palette` | `'none'` | — | — | — |
+| `size` | `size` | `'M' \| 'S' \| 'XS'` | — | — | — | — |
+| `icon` | `icon` | `LuccaIcon` | — | — | — | Ajoute une icône au callout. |
+| `state` | `state` | `'success' \| 'warning' \| 'error'` | — | — | — | État du callout. |
+| `heading` | `heading` | `PortalContent` | — | — | — | Ajoute un titre au popover. [PortalContent] |
+| `popoverPosition` | `popoverPosition` | `PopoverPosition` | `'above'` | — | — | Position du popover par rapport au bouton de déclenchement. |
+| `customPopoverPositions` | `customPopoverPositions` | `ConnectionPositionPair[]` | — | — | — | — |
+| `popoverDisabled` | `popoverDisabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_CALLOUT_TRANSLATIONS` | `unknown` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./callout-popover.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/callout-popover/callout-popover.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/callout-popover/callout-popover.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-callout-popover-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
+
+~ `openDelay` : transform numberAttribute → luNumberAttribute
+~ `closeDelay` : transform numberAttribute → luNumberAttribute
+~ `headingHiddenIfSingleItem` : transform booleanAttribute → luBooleanAttribute
+~ `popoverDisabled` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `CALLOUT_SIZE`, `CALLOUT_POPOVER_SIZE` and `CALLOUT_HX` constants, together with the `CalloutSize`, `CalloutPopoverSize` and `CalloutHx` types, are now publicly exported and used to type the `size` and `hx` inputs.
+- `AI` palette support for the AI callout styling.
+
+#### 21.2.4
+
+##### Added
+
+- `buttonLabel` on `lu-callout-popover` now also accepts a `number`.
+
+#### 21.2.2
+
+##### Added
+
+- `popoverDisabled` input on `lu-callout-popover` to render the trigger without opening a popover.
+
+##### Fixed
+
+- The callout margin no longer remains visible once the callout has been removed.
+
+#### 21.2.1
+
+##### Fixed
+
+- Button alignment inside a `size="S"` callout.
+
+#### 21.2.0
+
+##### Added
+
+- `popoverPosition` input on `lu-callout-popover` (`above` by default) and `customPopoverPositions` to provide your own connected positions.
+
+#### 21.1.4
+
+##### Added
+
+- `hx` input to set the heading level used by the callout heading.
+- `popoverTrigger` input on `lu-callout-popover` (`click`, `click+hover`, `hover+focus`).
+
+##### Fixed
+
+- Status of the actions displayed inside a callout.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.3
+
+##### Fixed
+
+- Callout descriptions are now rendered inside paragraphs to keep a valid DOM structure with inline actions.
+
+#### 21.0.0
+
+##### Added
+
+- `buttonAlt` and `heading` inputs on `lu-callout-popover`, plus `headingHiddenIfSingleItem` on `lu-callout-feedback-list`.
+
+##### Changed
+
+- `lu-callout-popover` is now based on the `popover2` directives.
+
+##### Removed
+
+- Elements deprecated in 18.1.
+
+#### 20.3.0
+
+##### Added
+
+- `AI` input to render the callout with the AI styling (`mod-AI`).
+- `iconAlt` input to provide an alternative text for the callout icon.
+
+#### 20.2.3
+
+##### Fixed
+
+- Padding and font size of the `size="S"` callout.
+
+#### 20.1.3
+
+##### Fixed
+
+- Size of the `XS` callout popover.
+
+#### 20.1.2
+
+##### Fixed
+
+- `lu-callout-popover` no longer loses the icon deduced from its `state` when no `icon` is provided.
+
+#### 20.1.1
+
+##### Added
+
+- `CalloutState` type is now publicly exported.
+
+#### 19.1.0
+
+##### Changed
+
+- Callout actions now use the `neutral` palette by default.
+
+#### 18.3.2
+
+##### Fixed
+
+- Disclosure icon of `lu-callout-disclosure`.
+
+#### 18.2.3
+
+##### Fixed
+
+- `state` input is now taken into account when set several times.
+
+#### 18.1.4
+
+##### Fixed
+
+- `size` no longer produces an invalid `mod-undefined` CSS class when left unset.
+
+#### 18.1.1
+
+##### Fixed
+
+- Close icon size and position.
+
+#### 18.1.0
+
+##### Changed
+
+- Actions are now wrapped in a dedicated container.

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

@@ -0,0 +1,62 @@
+# card — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-table-card--docs)
+
+## HTML/CSS
+
+### Card
+
+```css
+@forward '@lucca-front/scss/src/components/card';
+```
+
+```html
+<div class="card">
+	<table class="table mod-card">
+		<thead class="table-head">
+			<tr class="table-head-row">
+				<th class="table-head-row-cell">Table head</th>
+				<th class="table-head-row-cell">Table head</th>
+			</tr>
+		</thead>
+		<tbody class="table-body">
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">Table cell</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">Table cell</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">Table cell</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+<div class="card">
+	<table class="table mod-card mod-clickable">
+		<tbody class="table-body">
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">
+					<a href="#" class="table-body-row-cell-action">Table cell</a>
+				</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">
+					<a href="#" class="table-body-row-cell-action">Table cell</a>
+				</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="table-body-row">
+				<td class="table-body-row-cell">
+					<a href="#" class="table-body-row-cell-action">Table cell</a>
+				</td>
+				<td class="table-body-row-cell">Table cell</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+```

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

@@ -0,0 +1,8 @@
+# card
+
+## Related files
+
+- 📝 [Code & implementation](./card.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/card/card.design.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-table-card--docs)

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

@@ -0,0 +1,50 @@
+# checkbox — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-checkbox-basic--docs)
+
+## Angular
+
+Component selector : `lu-checkbox-input`
+
+## HTML/CSS
+
+Classe CSS : `.checkboxField`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/checkboxField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field pr-u-marginBlockEnd200">
+	<label class="formLabel" for="field1">
+		Label @if (required) {
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+		} @if (help) {
+		<span class="formLabel-info">
+			<span aria-hidden="true" class="lucca-icon icon-signHelp"></span>
+			<span class="pr-u-mask">?</span>
+		</span>
+		}
+	</label>
+	<span class="checkboxField">
+		<input
+			type="checkbox"
+			class="checkboxField-input"
+			id="field1"
+			aria-labelledby="field1label"
+			aria-describedby="field1message"
+		/>
+		<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
+	</span>
+	@if (message) {
+	<div class="inlineMessage" id="field1message">
+		<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+	}
+</div>
+```

package/llms/references/components/checkbox/checkbox.md

@@ -0,0 +1,74 @@
+# checkbox
+
+## Import
+
+```typescript
+import { CheckboxInputComponent } from '@lucca-front/ng/forms';
+```
+
+## API Reference
+
+### CheckboxInputComponent (component)
+
+**Selector:** `lu-checkbox-input`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `checklist` | `checklist` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `mixed` | `mixed` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./checkbox.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/checkbox/checkbox.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/checkbox/checkbox.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-checkbox-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
+
+~ `checklist` : transform booleanAttribute → luBooleanAttribute
+~ `mixed` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Added
+
+- `presentation display`: when the parent `lu-form-field` is set to presentation mode, the checkbox now renders its value as a localized "yes"/"no" label through the `*luPresentationDisplayDefault` directive.
+
+#### 20.3.0
+
+##### Fixed
+
+- `filter pill layout`: the checkable checkbox layout is no longer displayed when the parent select already contains a checkbox.
+
+#### 20.2.0
+
+##### Added
+
+- `checklist`: new boolean input that applies the `mod-checklist` modifier to display the checkbox in the checklist style.
+
+#### 20.1.1
+
+##### Added
+
+- `color override`: the checked, hover and active colors can now be overridden through the `--palettes-*` CSS custom properties (falling back to `--palettes-product-*`).
+
+#### 20.1.0
+
+##### Added
+
+- `input framed`: when placed inside an `lu-input-framed`, the checkbox applies the framed header layout classes to its input and icon.
+
+#### 18.3.2
+
+##### Added
+
+- `mixed state styling`: interactive states (hover, active, disabled, invalid and their combinations) are now styled for the indeterminate (`aria-checked="mixed"`) checkbox.

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

@@ -0,0 +1,131 @@
+# chip — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-chip-angular-basic--docs)
+
+## Angular
+
+Mots-clés : étiquette, filtres
+
+Component selector : `lu-chip`
+
+### Basic
+
+```js
+import { CHIP_STATE, ChipComponent } from '@lucca-front/ng/chip';
+import { LuccaIcon } from '@lucca-front/icons';
+```
+
+```html
+<lu-chip>Label</lu-chip>
+```
+
+## HTML/CSS
+
+Classe CSS : `.chip`
+
+### Ellipse
+
+Il est nécessaire d'ajouter une balise `span` avec l'utilitaire `u-ellipsis` ainsi qu'une largeur autour du label afin d'obtenir une ellipse.
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip">
+	Label
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+```
+
+### Disabled
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip is-disabled">
+	Label
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+```
+
+### Feedback
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip palette-warning">
+	<span aria-hidden="true" class="chip-icon lucca-icon icon-signWarning"></span>
+	John Doe
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+<div class="chip palette-critical">
+	<span aria-hidden="true" class="chip-icon lucca-icon icon-signError"></span>
+	John Doe
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+```
+
+### Focusable
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<button type="button" class="chip">Label</button>
+```
+
+### Palettes
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip mod-product">
+	Label
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+```
+
+### Small
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip mod-S">
+	Label
+	<button type="button" class="chip-kill">
+		<span class="pr-u-mask">delete</span>
+	</button>
+</div>
+```
+
+### Unkillable
+
+```css
+@forward '@lucca-front/scss/src/components/chip';
+```
+
+```html
+<div class="chip">Label</div>
+```

package/llms/references/components/chip/chip.md

@@ -0,0 +1,95 @@
+# chip
+
+## Import
+
+```typescript
+import { ChipComponent } from '@lucca-front/ng/chip';
+```
+
+## Basic Usage
+
+```html
+<lu-chip>Label</lu-chip>
+```
+
+## API Reference
+
+### ChipComponent (component)
+
+**Selectors:** `lu-chip`, `button[luChip]`, `a[luChip]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `withEllipsis` | `withEllipsis` | `boolean` | `false` | — | `luBooleanAttribute` | [20.1] Ellipse le texte et ajoute une tooltip lorsque le label est trop long. |
+| `unkillable` | `unkillable` | `boolean` | `false` | — | `luBooleanAttribute` | Rend le chip non supprimable. |
+| `palette` | `palette` | `string` | — | — | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le composant. |
+| `size` | `size` | `ChipSize \| null` | `null` | — | — | — |
+| `state` | `state` | `ChipState \| null` | `null` | — | — | — |
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | Ajoute une icône au chip. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `kill` | `kill` | `Event` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./chip.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/chip/chip.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-chip-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
+
+~ `withEllipsis` : transform booleanAttribute → luBooleanAttribute
+~ `unkillable` : transform booleanAttribute → luBooleanAttribute
+~ `disabled` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.1
+
+##### Fixed
+
+- `palette` now correctly applies the `product` palette colors (background, text and kill button).
+
+#### 21.1.0
+
+##### Added
+
+- `intl` new input to override the component's translations.
+
+#### 21.0.0
+
+##### Added
+
+- `button[luChip], a[luChip]` new selectors to use the chip on `button` and `a` elements.
+- `icon` new input to display a `LuccaIcon` inside the chip.
+- `state` new input (`warning` | `critical`) that applies the recommended icon and palette.
+- `size` new input (`S`) to render a small chip.
+- `withEllipsis` new input to truncate the content with an ellipsis and show a tooltip when it overflows.
+
+#### 20.1.1
+
+##### Added
+
+- `kill` new output emitted when the delete button is clicked.
+
+#### 19.2.0
+
+##### Added
+
+- `lu-chip` new Angular component wrapping the chip, with `unkillable`, `palette` and `disabled` inputs.

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

@@ -0,0 +1,38 @@
+# clear — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-clear-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-clear`
+
+### Clear
+
+```js
+import { CLEAR_SIZE, ClearComponent } from '@lucca-front/ng/clear';
+import { PALETTE } from '@lucca/prisme/core';
+```
+
+```html
+<lu-clear>Clear</lu-clear>
+```
+
+## HTML/CSS
+
+Classe CSS : `.clear`
+
+Le clear est construit avec un faux lien car il se retrouve parfois imbriqué dans un label et activé par erreur quand on l’actionne.
+
+Son ancre ne doit pas être activée et on assure ainsi la navigation clavier.
+
+### Clear
+
+```css
+@forward '@lucca-front/scss/src/components/clear';
+```
+
+```html
+<button class="clear">
+	<span class="pr-u-mask">Clear</span>
+</button>
+```