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

package/llms/references/components/filterbar/filterbar.md

@@ -0,0 +1,134 @@
+# filterbar
+
+## Import
+
+```typescript
+import { FilterPillComponent, FilterBarComponent, FilterViewSelectorComponent, FilterPillAddonBeforeDirective, FilterPillAddonAfterDirective, FilterPillDisplayerDirective, FilterPillLabelDirective } from '@lucca-front/ng/filter-pills';
+```
+
+## API Reference
+
+### FilterPillComponent (component)
+
+**Selector:** `lu-filter-pill`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `name` | `name` | `string` | — | — | — | — |
+| `optional` | `optional` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `label` | `label` | `string` | — | ✅ | — | — |
+| `placeholderOverride` | `placeholder` | `string \| null` | `null` | — | — | — |
+| `icon` | `icon` | `LuccaIcon` | — | — | — | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `displayed` | `unknown` | — | — |
+
+### FilterBarComponent (component)
+
+**Selector:** `lu-filter-bar`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### FilterViewSelectorComponent (component)
+
+**Selector:** `lu-filter-view-selector`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `views` | `views` | `T[]` | — | ✅ | — | — |
+| `viewLabel` | `viewLabel` | `(view: T) => string` | `(view) => (view as { name: string }).name` | — | — | — |
+| `optionComparer` | `optionComparer` | `(a: T, b: T) => boolean` | `filterViewDefaultOptionComparer` | — | — | — |
+| `optionKey` | `optionKey` | `(view: T) => unknown` | `filterViewDefaultOptionKey` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `renameView` | `renameView` | `T` | — |
+| `deleteView` | `deleteView` | `T` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `selectedView` | `T \| null` | — | — |
+
+### FilterPillAddonBeforeDirective (directive)
+
+**Selector:** `[luFilterPillAddonBefore]`
+
+### FilterPillAddonAfterDirective (directive)
+
+**Selector:** `[luFilterPillAddonAfter]`
+
+### FilterPillDisplayerDirective (directive)
+
+**Selector:** `[luFilterPillDisplayer]`
+
+### FilterPillLabelDirective (directive)
+
+**Selector:** `[luFilterPillLabel]`
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_FILTER_BAR_INSTANCE` | `FilterBarComponent` | — |
+| `FILTER_PILL_INPUT_COMPONENT` | `FilterPillInputComponent` | — |
+| `FILTER_PILL_HOST_COMPONENT` | `FilterPillComponent` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./filterbar.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/filterbar/filterbar.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/filterbar/filterbar.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-filterbar-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
+
++ component `FilterViewSelectorComponent` (lu-filter-view-selector)
+`FilterPillComponent` :
+  ~ `optional` : transform booleanAttribute → luBooleanAttribute
++ token `LU_FILTER_BAR_INSTANCE` : FilterBarComponent
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 20.1.0
+
+##### Changed
+
+- The bar relies on `lu-scroll-box` to scroll its pills, with the matching shadows.
+
+#### 19.2.0
+
+##### Added
+
+- `lu-filter-bar` component (`filterBar`) with the `intl` input, laying out a collection of `lu-filter-pill`.
+- `[luFilterPillAddonBefore]` and `[luFilterPillAddonAfter]` directives to project content before and after the pills.

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

@@ -0,0 +1,60 @@
+# filterpills — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-filterpills-angular--docs)
+
+## Angular
+
+🧩 Les Filter Pills sont conçus pour être utilisés au sein d'une Filter Bar. Cette dernière couvre notamment les besoins d'ajout de filtre et de recherche.
+
+Component selector : `lu-filter-pill`
+
+### Pills
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuCoreSelectTotalCountDirective } from '@lucca-front/ng/core-select';
+import { LuCoreSelectDepartmentsDirective } from '@lucca-front/ng/core-select/department';
+import { DateInputComponent, DateRangeInputComponent } from '@lucca-front/ng/date2';
+import { FilterPillComponent } from '@lucca-front/ng/filter-pills';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { CheckboxInputComponent, TextInputComponent } from '@lucca-front/ng/forms';
+import { LuMultiSelectInputComponent, LuMultiSelectWithSelectAllDirective } from '@lucca-front/ng/multi-select';
+import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
+import { TreeSelectDirective } from '@lucca-front/ng/tree-select';
+```
+
+```html
+<lu-filter-pill label="Inclure les collaborateurs partis">
+	<lu-checkbox-input [ngModel]="false"></lu-checkbox-input>
+</lu-filter-pill>
+<lu-filter-pill label="Légume (multi)" name="legume">
+	<lu-multi-select
+		[ngModel]="[]"
+		[options]="legumes | filterLegumes: clue"
+		[totalCount]="legumes.length"
+		(clueChange)="clue = $event"
+		filterPillLabelPlural="légumes"
+	/>
+</lu-filter-pill>
+<lu-filter-pill label="Legume (simple)" name="department">
+	<lu-simple-select [ngModel]="null" [options]="legumes | filterLegumes: clue" />
+</lu-filter-pill>
+<lu-filter-pill label="Départements" name="departments">
+	<lu-multi-select [ngModel]="[]" filterPillLabelPlural="départements" departments />
+</lu-filter-pill>
+<lu-filter-pill label="Tree (simple)">
+	<lu-simple-select [ngModel]="null" [treeSelect]="groupingFn" [options]="legumes" />
+</lu-filter-pill>
+<lu-filter-pill label="Tree (multi)">
+	<lu-multi-select [ngModel]="[]" filterPillLabelPlural="légumes" [treeSelect]="groupingFn" [options]="legumes" />
+</lu-filter-pill>
+<lu-filter-pill label="Date de début">
+	<lu-date-input [ngModel]="null" />
+</lu-filter-pill>
+<lu-filter-pill label="Période">
+	<lu-date-range-input [ngModel]="null" [(ngModel)]="dateRange" />
+</lu-filter-pill>
+```

package/llms/references/components/filterpills/filterpills.md

@@ -0,0 +1,180 @@
+# filterpills
+
+## Import
+
+```typescript
+import { FilterPillComponent, FilterBarComponent, FilterViewSelectorComponent, FilterPillAddonBeforeDirective, FilterPillAddonAfterDirective, FilterPillDisplayerDirective, FilterPillLabelDirective } from '@lucca-front/ng/filter-pills';
+```
+
+## API Reference
+
+### FilterPillComponent (component)
+
+**Selector:** `lu-filter-pill`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `name` | `name` | `string` | — | — | — | Dans le cas d’un filtre optionnel, permet de faire le lien entre la liste de filtres disponible et l’affichage du filtre… |
+| `optional` | `optional` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `label` | `label` | `string` | — | ✅ | — | Modifie le label du filtre. |
+| `placeholderOverride` | `placeholder` | `string \| null` | `null` | — | — | — |
+| `icon` | `icon` | `LuccaIcon` | — | — | — | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `displayed` | `unknown` | — | — |
+
+### FilterBarComponent (component)
+
+**Selector:** `lu-filter-bar`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### FilterViewSelectorComponent (component)
+
+**Selector:** `lu-filter-view-selector`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `views` | `views` | `T[]` | — | ✅ | — | — |
+| `viewLabel` | `viewLabel` | `(view: T) => string` | `(view) => (view as { name: string }).name` | — | — | — |
+| `optionComparer` | `optionComparer` | `(a: T, b: T) => boolean` | `filterViewDefaultOptionComparer` | — | — | — |
+| `optionKey` | `optionKey` | `(view: T) => unknown` | `filterViewDefaultOptionKey` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `renameView` | `renameView` | `T` | — |
+| `deleteView` | `deleteView` | `T` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `selectedView` | `T \| null` | — | — |
+
+### FilterPillAddonBeforeDirective (directive)
+
+**Selector:** `[luFilterPillAddonBefore]`
+
+### FilterPillAddonAfterDirective (directive)
+
+**Selector:** `[luFilterPillAddonAfter]`
+
+### FilterPillDisplayerDirective (directive)
+
+**Selector:** `[luFilterPillDisplayer]`
+
+### FilterPillLabelDirective (directive)
+
+**Selector:** `[luFilterPillLabel]`
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_FILTER_BAR_INSTANCE` | `FilterBarComponent` | — |
+| `FILTER_PILL_INPUT_COMPONENT` | `FilterPillInputComponent` | — |
+| `FILTER_PILL_HOST_COMPONENT` | `FilterPillComponent` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./filterpills.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/filterpills/filterpills.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/filterpills/filterpills.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-filterpills-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
+
++ component `FilterViewSelectorComponent` (lu-filter-view-selector)
+`FilterPillComponent` :
+  ~ `optional` : transform booleanAttribute → luBooleanAttribute
++ token `LU_FILTER_BAR_INSTANCE` : FilterBarComponent
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Fixed
+
+- Accessibility of the pill: labelling and keyboard handling of the trigger.
+
+#### 21.1.0
+
+##### Added
+
+- `placeholder` input to replace the default placeholder of the pill.
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 20.3.0
+
+##### Fixed
+
+- The checkbox layout is no longer applied when the projected select already displays checkboxes.
+
+#### 20.1.3
+
+##### Fixed
+
+- Default value handling: `isEmpty` detection and `clearable` behaviour.
+
+#### 20.1.1
+
+##### Fixed
+
+- `displayed` model is now kept in sync with the pill value.
+
+#### 20.1.0
+
+##### Changed
+
+- Tooltip behaviour and `max-inline-size` of the pill adjusted.
+
+#### 19.3.2
+
+##### Fixed
+
+- Handling of nested select inputs inside a pill.
+
+#### 19.2.6
+
+##### Fixed
+
+- `clearable` behaviour of the pill.
+
+#### 19.2.4
+
+##### Fixed
+
+- API v4 initialization logic no longer triggers useless API calls.
+
+#### 19.2.0
+
+##### Added
+
+- `lu-filter-pill` component (`filterPill`) with the required `label` input plus `name`, `icon`, `optional` and `intl`, and the `displayed` model.
+- `[luFilterPillLabel]` and `[luFilterPillDisplayer]` directives to customize the label and the displayed value.

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

@@ -0,0 +1,66 @@
+# footer — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-cards-footer--docs)
+
+## Angular
+
+Component selector : `lu-footer`
+
+### Basic
+
+```js
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { FOOTER_CONTAINER_MAX, FOOTER_NARROW_AT_MEDIA_MAX, FooterComponent } from '@lucca-front/ng/footer';
+```
+
+```html
+<lu-footer narrowAtMediaMax="XXS">
+	<ng-container footerContent>Content</ng-container>
+	<button type="button" luButton>Button</button>
+	<button type="button" luButton="outlined">Button</button>
+</lu-footer>
+```
+
+## HTML/CSS
+
+Classe CSS : `.footer`
+
+### Footer
+
+```css
+@forward '@lucca-front/scss/src/components/footer';
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/card';
+```
+
+```html
+<div class="card">
+	<div class="card-content">
+		<h3 class="card-title">Titre de la carte</h3>
+		<p>Contenu de la carte</p>
+	</div>
+	<footer class="card-footer">
+		<div class="card-footer-right">
+			<button type="button" class="button palette-product">Confirmer</button>
+			<button type="button" class="button mod-ghost">Annuler</button>
+		</div>
+	</footer>
+</div>
+```
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/footer';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<footer class="footer">
+	<div class="footer-content">Content</div>
+	<div class="footer-actions">
+		<button type="button" class="button">Button</button>
+		<button type="button" class="button mod-outlined">Button</button>
+	</div>
+</footer>
+```

package/llms/references/components/footer/footer.md

@@ -0,0 +1,115 @@
+# footer
+
+## Import
+
+```typescript
+import { FooterComponent } from '@lucca-front/ng/footer';
+```
+
+## Basic Usage
+
+```html
+<lu-footer narrowAtMediaMax=XXS> <ng-container footerContent> Content </ng-container> <button type="button" luButton>Button</button> <button type="button" luButton="outlined">Button</button>
+</lu-footer>
+```
+
+## API Reference
+
+### FooterComponent (component)
+
+**Selector:** `lu-footer`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `sticky` | `sticky` | `boolean` | `false` | — | `luBooleanAttribute` | Fige le footer lors du défilement vertical. |
+| `container` | `container` | `boolean` | `false` | — | `luBooleanAttribute` | Applique un container autour du contenu du footer. |
+| `containerMax` | `containerMax` | `FooterContainerMax \| null` | — | — | — | Définit la largeur maximale du container. |
+| `forceNarrow` | `forceNarrow` | `boolean` | `false` | — | `luBooleanAttribute` | Force le mode narrow (responsive) du footer. |
+| `dialog` | `dialog` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `narrowAtMediaMax` | `narrowAtMediaMax` | `'XXS' \| 'XS' \| 'S' \| 'M'` | `'XXS'` | — | — | Définit le breakpoint pour lequel le mode narrow (responsive) est appliqué. |
+
+## Related files
+
+- 📝 [Code & implementation](./footer.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/footer/footer.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/footer/footer.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-cards-footer--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
+
+~ `sticky` : transform booleanAttribute → luBooleanAttribute
+~ `container` : transform booleanAttribute → luBooleanAttribute
+~ `forceNarrow` : transform booleanAttribute → luBooleanAttribute
+~ `dialog` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `FOOTER_CONTAINER_MAX` and `FOOTER_NARROW_AT_MEDIA_MAX` constants, together with the `FooterContainerMax` and `FooterNarrowAtMediaMax` types, are now publicly exported and used to type the `containerMax` and `narrowAtMediaMax` inputs.
+
+#### 21.2.1
+
+##### Fixed
+
+- Padding of the footer inside a `mod-fancy` dialog.
+
+#### 21.2.0
+
+##### Added
+
+- `containerMax` input to cap the width of the footer container.
+
+#### 20.1.3
+
+##### Fixed
+
+- `sticky` footer now stays sticky even when the wrapper does not use `display: contents`.
+
+#### 20.1.0
+
+##### Added
+
+- The footer content can be aligned with the page container.
+
+#### 19.3.4
+
+##### Fixed
+
+- The Angular wrapper uses `display: contents` so it does not break the footer layout.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-footer` component (`footer`) with the `container`, `dialog`, `sticky`, `forceNarrow` and `narrowAtMediaMax` inputs.
+
+##### Fixed
+
+- Footer buttons now wrap instead of overflowing on narrow screens.
+
+#### 18.2.1
+
+##### Fixed
+
+- Container width of the footer.
+
+#### 18.1.1
+
+##### Fixed
+
+- `sticky` footer position and margins.
+
+#### 18.1.0
+
+##### Added
+
+- Responsive footer with container support and `--components-footer-*` CSS custom properties.

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

@@ -0,0 +1,37 @@
+# form
+
+## Import
+
+```typescript
+import { FormComponent } from '@lucca-front/ng/form';
+```
+
+## API Reference
+
+### FormComponent (component)
+
+**Selector:** `form[luForm]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `maxWidth` | `maxWidth` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `presentation` | `presentation` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_FORM_INSTANCE` | `FormComponent` | — |
+
+## 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
+
+~ `maxWidth` : transform booleanAttribute → luBooleanAttribute
+~ `presentation` : transform booleanAttribute → luBooleanAttribute

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

@@ -0,0 +1,46 @@
+# form-field — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-form-field--docs)
+
+## Angular
+
+Mots-clés : champ, formulaire, form-field, input
+
+Component selector : `lu-form-field`
+
+### Field
+
+```js
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FORM_FIELD_WIDTH, FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+```
+
+```html
+<lu-form-field
+	extraDescribedBy="extra-message"
+	label="Label"
+	inlineMessage="Helper text"
+	errorInlineMessage="Error helper text"
+	inlineMessageState="default"
+	tooltip="You expected me to be helpful but this is a story!"
+>
+	<div class="textField">
+		<div class="textField-input">
+			<textarea
+				type="text"
+				luInput
+				class="textField-input-value"
+				required
+				[(ngModel)]="model.example"
+				placeholder="Placeholder"
+			></textarea>
+		</div>
+	</div>
+</lu-form-field>
+```
+
+## HTML/CSS
+
+Classe CSS : `.form-field`