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

package/llms/references/components/activity-feed/activity-feed.component.md

@@ -0,0 +1,292 @@
+# activity-feed — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-activity-feed-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-activity-feed`
+
+### Basic
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { ActivityFeedComponent, ActivityFeedStepComponent, ActivityFeedUpdateComponent, ActivityFeedUpdateItemComponent } from '@lucca-front/ng/activity-feed';
+import { CommentComponent } from '@lucca-front/ng/comment';
+import { FileEntryComponent } from '@lucca-front/ng/file-upload';
+import { ReadMoreComponent } from '@lucca-front/ng/read-more';
+import { StatusBadgeComponent } from '@lucca-front/ng/status-badge';
+import { ButtonComponent } from '@lucca/prisme/button';
+```
+
+```html
+<lu-activity-feed>
+	<lu-activity-feed-step [user]="user" [date]="date" label="Lorem ipsum dolor." />
+	<lu-activity-feed-step [user]="user" [date]="date" label="Lorem ipsum dolor." />
+</lu-activity-feed>
+```
+
+## HTML/CSS
+
+Classe CSS : `.activityFeed`
+
+### Add
+
+```css
+@forward '@lucca-front/scss/src/components/activityFeed';
+@forward '@lucca-front/scss/src/components/avatar';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<ol class="activityFeed">
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-content">
+			<button type="button" class="activityFeed-step-add button mod-outlined">Afficher plus</button>
+		</div>
+	</li>
+</ol>
+```
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/activityFeed';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ol class="activityFeed">
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+</ol>
+```
+
+### States
+
+```css
+@forward '@lucca-front/scss/src/components/activityFeed';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ol class="activityFeed">
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-state mod-success"></div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">Demande approuvée.</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-state mod-critical"></div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">Demande refusée.</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+		</div>
+	</li>
+	<li class="activityFeed-step mod-pending">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">En attente d'approbation.</p>
+		</div>
+	</li>
+</ol>
+```
+
+### Updated
+
+```css
+@forward '@lucca-front/scss/src/components/activityFeed';
+@forward '@lucca-front/scss/src/components/avatar';
+@forward '@lucca-front/scss/src/components/statusBadge';
+```
+
+```html
+<ol class="activityFeed">
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+			<div class="activityFeed-content">
+				<ul class="activityFeed-content-update">
+					<li class="activityFeed-content-update-item">
+						<div class="activityFeed-content-update-item-before">1000 €</div>
+						<span
+							class="activityFeed-content-update-item-icon lucca-icon icon-arrowRight mod-XS"
+							aria-hidden="true"
+						></span>
+						<span class="pr-u-mask">a été remplacé par</span>
+						<div class="activityFeed-content-update-item-after">800 €</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+			<div class="activityFeed-content">
+				<ul class="activityFeed-content-update">
+					<li class="activityFeed-content-update-item">
+						<div class="activityFeed-content-update-item-object">Lorem ipsum :</div>
+						<div class="activityFeed-content-update-item-before">Oui</div>
+						<span
+							class="activityFeed-content-update-item-icon lucca-icon icon-arrowRight mod-XS"
+							aria-hidden="true"
+						></span>
+						<span class="pr-u-mask">a été remplacé par</span>
+						<div class="activityFeed-content-update-item-after">Non</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">
+				Daniel Hernandez a transmis la facture au service comptabilité.
+			</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+			<div class="activityFeed-content">
+				<ul class="activityFeed-content-update">
+					<li class="activityFeed-content-update-item">
+						<div class="activityFeed-content-update-item-object">Sit amet :</div>
+						<div class="activityFeed-content-update-item-before">Oui</div>
+						<span
+							class="activityFeed-content-update-item-icon lucca-icon icon-arrowRight mod-XS"
+							aria-hidden="true"
+						></span>
+						<span class="pr-u-mask">a été remplacé par</span>
+						<div class="activityFeed-content-update-item-after">Non</div>
+					</li>
+					<li class="activityFeed-content-update-item">
+						<div class="activityFeed-content-update-item-object">Dolor :</div>
+						<div class="activityFeed-content-update-item-before">1000 €</div>
+						<span
+							class="activityFeed-content-update-item-icon lucca-icon icon-arrowRight mod-XS"
+							aria-hidden="true"
+						></span>
+						<span class="pr-u-mask">a été remplacé par</span>
+						<div class="activityFeed-content-update-item-after">500 €</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</li>
+	<li class="activityFeed-step">
+		<div class="activityFeed-step-avatar avatar mod-placeholder" translate="no">
+			<span class="avatar-picture"></span>
+		</div>
+		<div class="activityFeed-step-description">
+			<p class="activityFeed-step-description-content">Daniel Hernandez a modifié une demande.</p>
+			<time datetime="2025-07-15 08:56" class="activityFeed-step-description-time">
+				<abbr>Mar.</abbr>
+				15 juillet 2025 à 08:56
+			</time>
+			<div class="activityFeed-content">
+				<ul class="activityFeed-content-update">
+					<li class="activityFeed-content-update-item">
+						<div class="activityFeed-content-update-item-object">Statut :</div>
+						<div class="activityFeed-content-update-item-before">
+							<div class="statusBadge palette-critical">Refusé</div>
+						</div>
+						<span
+							class="activityFeed-content-update-item-icon lucca-icon icon-arrowRight mod-XS"
+							aria-hidden="true"
+						></span>
+						<span class="pr-u-mask">a été remplacé par</span>
+						<div class="activityFeed-content-update-item-after">
+							<div class="statusBadge palette-success">Approuvé</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</li>
+</ol>
+```

package/llms/references/components/activity-feed/activity-feed.md

@@ -0,0 +1,90 @@
+# activity-feed
+
+## Import
+
+```typescript
+import { ActivityFeedStepComponent, ActivityFeedUpdateItemComponent, ActivityFeedUpdateComponent, ActivityFeedComponent } from '@lucca-front/ng/activity-feed';
+```
+
+## Basic Usage
+
+```html
+<lu-activity-feed> <lu-activity-feed-step [user]="user" [date]="date" label="Lorem ipsum dolor." /> <lu-activity-feed-step [user]="user" [date]="date" label="Lorem ipsum dolor." />
+</lu-activity-feed>
+```
+
+## API Reference
+
+### ActivityFeedStepComponent (component)
+
+**Selector:** `lu-activity-feed-step`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `label` | `label` | `PortalContent \| null` | `null` | — | — | — |
+| `user` | `user` | `ILuUser \| null` | `null` | — | — | Permet de définir l’utilisateur présenté dans l’avatar |
+| `status` | `status` | `ActivityFeedStepStatus \| null` | `null` | — | — | — |
+| `date` | `date` | `Date \| string \| null` | `null` | — | — | — |
+| `datePipeFormat` | `datePipeFormat` | `string` | — | — | — | — |
+
+### ActivityFeedUpdateItemComponent (component)
+
+**Selector:** `lu-activity-feed-update-item`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `label` | `label` | `string` | — | ✅ | — | — |
+
+### ActivityFeedUpdateComponent (component)
+
+**Selector:** `lu-activity-feed-update`
+
+### ActivityFeedComponent (component)
+
+**Selector:** `lu-activity-feed`
+
+## Related files
+
+- 📝 [Code & implementation](./activity-feed.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/activity-feed/activity-feed.design.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-activity-feed-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
+
++ component `ActivityFeedUpdateItemComponent` (lu-activity-feed-update-item)
+`ActivityFeedUpdateComponent` :
+  - `intl`
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `ACTIVITY_FEED_STEP_STATUS` constant and `ActivityFeedStepStatus` type are now publicly exported and used to type the `status` input.
+
+#### 21.2.1
+
+##### Fixed
+
+- `date` formatting no longer relies on a literal unsupported by Safari.
+
+#### 21.2.0
+
+##### Added
+
+- `lu-activity-feed` component, along with `lu-activity-feed-step` and `lu-activity-feed-update`, to display a chronological feed of activities.
+- `lu-activity-feed-step` inputs: `label`, `user`, `status` (`success`, `critical`, `pending`), `date` and `datePipeFormat`.
+- `intl` input on `lu-activity-feed` and `lu-activity-feed-update` to override the component's translations.
+- Load-more button to fetch additional entries of the feed.

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

@@ -0,0 +1,11 @@
+# animations — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-toolbox-animations-css--docs)
+
+## HTML/CSS
+
+### Basic
+
+```html
+<div class="demo"></div>
+```

package/llms/references/components/animations/animations.md

@@ -0,0 +1,7 @@
+# animations
+
+## Related files
+
+- 📝 [Code & implementation](./animations.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-toolbox-animations-css--docs)

package/llms/references/components/api-select/api-select.md

@@ -0,0 +1,40 @@
+# api-select
+
+## Import
+
+```typescript
+import { LuApiSelectInputComponent } from '@lucca-front/ng/api';
+```
+
+## API Reference
+
+### LuApiSelectInputComponent (component)
+
+**Selector:** `lu-api-select`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `standard` | `standard` | `'v3' \| 'v4'` | `'v3'` | — | — | — |
+| `api` | `api` | `string` | — | — | — | — |
+| `fields` | `fields` | `string` | — | — | — | — |
+| `filters` | `filters` | `string[]` | — | — | — | — |
+| `orderBy` | `orderBy` | `string` | — | — | — | — |
+| `sort` | `sort` | `string` | — | — | — | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuApiModule` — use `LuApiFeederComponent, LuApiPagedSearcherComponent, LuApiSearcherComponent, LuApiPagerComponent, LuApiSelectInputComponent` instead
+- ⚠️ `LuApiSelectModule` — use `LuApiFeederComponent, LuApiPagedSearcherComponent, LuApiSearcherComponent, LuApiPagerComponent, LuApiSelectInputComponent` instead
+- ⚠️ `LuApiSelectInputModule` — use `LuApiSelectInputComponent` instead
+
+## 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
+
+~ `standard` : ApiSelectStandard → 'v3' | 'v4'

package/llms/references/components/app-layout/app-layout.component.md

@@ -0,0 +1,65 @@
+# app-layout — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-app-layout-angular-basic--docs)
+
+## Angular
+
+Components selectors : `lu-app-layout`, `lu-main-layout`
+
+L'option `sidebar` n'est pour le moment pas compatible avec Container et Empty state. Il est prévu de faire évoluer Main Layout de manière à proposer différents layouts usuels et adapter ces composants en fonction. En attendant, ils doivent être overridés manuellement.
+
+### Architecture produit
+
+App layout est à utiliser à la racine du projet pour centraliser la configuration des éléments communs (Banner, Side navigation), tandis que Main layout est à utiliser au niveau de la page pour configurer les éléments spécifiques (Page header, Footer, etc.).
+
+### Usage de main-layout-block
+
+`main-layout-block` permet de structurer le contenu de la page courante entre les sections header et footer. Une marge est appliquée automatiquement au dessus et en dessous de cette section.
+
+`lu-container` peut-être ajouté pour restreindre la largeur des contenus.
+
+Pour les contenus larges, il est possible d'ajouter l'option `contentOverflowing` pour rendre le rendre le bloc scrollable (dans les faits, cette option va rendre `main-layout` scrollable, en fixant tous les autres éléments).
+
+Si seulement une section de la page doit scroller, il est possible d'utiliser plusieurs `main-layout-block`. Dans ce cas, les marges seront appliquées seulement au dessus du premier bloc et en dessous du dernier.
+
+### Utilisation de webComponents
+
+Si App Layout importe des webComponents (comme Lucca Banner), il est nécessaire d'autoriser leur utilisation :
+
+### Ancres et scroll
+
+Angular repose actuellement sur `window.scrollTo()` pour accéder au contenu cible d'une ancre. Le scroll d'App layout n'étant pas positionné sur le `body`, il est nécessaire de surcharger ce comportement pour retrouver le fonctionnement natif.
+
+### Basic
+
+```js
+import { AppLayoutComponent } from '@lucca-front/ng/app-layout';
+```
+
+```html
+<lu-app-layout>
+	<ng-container appLayoutBanner>banner</ng-container>
+	<ng-container appLayoutNavSide>navSide</ng-container>
+	main
+</lu-app-layout>
+```
+
+## HTML/CSS
+
+Classes CSS : `.appLayout`, `.mainLayout`
+
+L'ajout manuel d'un ID `main-content` sur `<lu-main-layout>` est nécessaire afin de s'assurer du bon fonctionnement de Skip links.
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/appLayout';
+```
+
+```html
+<div class="appLayout">
+	<div class="appLayout-banner">banner</div>
+	<div class="appLayout-navSide">navSide</div>
+	<div class="appLayout-main">main</div>
+</div>
+```

package/llms/references/components/app-layout/app-layout.md

@@ -0,0 +1,81 @@
+# app-layout
+
+## Import
+
+```typescript
+import { AppLayoutComponent } from '@lucca-front/ng/app-layout';
+```
+
+## Basic Usage
+
+```html
+<lu-app-layout> <ng-container appLayoutBanner>banner</ng-container> <ng-container appLayoutNavSide>navSide</ng-container> main
+</lu-app-layout>
+```
+
+## API Reference
+
+### AppLayoutComponent (component)
+
+**Selector:** `lu-app-layout`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `mobileNavSideBottom` | `mobileNavSideBottom` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./app-layout.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/app-layout/app-layout.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/app-layout/app-layout.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-app-layout-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
+
+~ `mobileNavSideBottom` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `--components-appLayout-navSide-overflowX` and `--components-appLayout-navSide-overflowY` custom properties were applied to the opposite axes.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-app-layout` component (`appLayout`) to lay out an application shell, with the `[appLayoutBanner]` and `[appLayoutNavSide]` content slots.
+- `mobileNavSideBottom` input to move the navigation side to the bottom of the screen on mobile (`mod-mobileNavSideBottom`).
+
+#### 21.1.2
+
+##### Fixed
+
+- Sticky header and footer positioning inside the layout.
+
+#### 21.1.1
+
+##### Fixed
+
+- Focus is no longer lost when scrolling inside the layout.
+
+#### 21.1.0
+
+##### Added
+
+- Background on the sticky elements so the scrolled content no longer shows through.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-main-layout` component (`mainLayout`) with the `headerSticky`, `footerSticky` and `overflow` inputs.
+- `lu-main-layout-block` component to declare the blocks of the layout.