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

package/llms/references/components/input-framed/input-framed.md

@@ -0,0 +1,50 @@
+# input-framed
+
+## Import
+
+```typescript
+import { InputFramedComponent } from '@lucca-front/ng/form-field';
+```
+
+## Basic Usage
+
+```html
+<lu-form-field label="Label" errorInlineMessage="Error inline message"> <lu-radio-group-input [(ngModel)]="example" framed required> <lu-radio value="A"> Option A </lu-radio> <lu-radio value="B"> Option B </lu-radio> <lu-radio value="C" disabled> Option C </lu-radio> <lu-radio value="D"> Option D </lu-radio> </lu-radio-group-input> </lu-form-field>
+```
+
+## API Reference
+
+### InputFramedComponent (component)
+
+**Selector:** `lu-input-framed`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `framedPortal` | `framedPortal` | `PortalContent \| null` | `null` | — | — | — |
+| `center` | `center` | `boolean` | `false` | — | `luBooleanAttribute` | Aligne le champ et son illustration verticalement lorsque le label est trop court. |
+| `size` | `size` | `InputFramedSize \| null` | `null` | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `FORM_FIELD_INSTANCE` | `FormFieldComponent` | — |
+| `LU_FORM_FIELD_TRANSLATIONS` | `unknown` | — |
+| `INPUT_FRAMED_INSTANCE` | `InputFramedComponent` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./input-framed.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/input-framed/input-framed.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/input-framed/input-framed.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-input-framed-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
+
+~ `center` : transform booleanAttribute → luBooleanAttribute

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

@@ -0,0 +1,153 @@
+# link — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-actions-link-angular-test--docs)
+
+## Angular
+
+Component selector : `luLink`
+
+### Navigation interne et externe 
+
+On privilégiera l'utilisation du routing Angular pour la navigation **interne** à l'application. Dans ce cas, la route est à passer directement via `luLink`.
+
+Dans le cas d'une navigation **externe** à l'application, l'URL est à renseigner via la propriété `href`.
+
+Dans les deux cas, l'ouverture du lien peut se faire dans la même page ou dans une nouvelle page. Dans le second cas, on utilisera la propriété `external`.
+
+### Testing
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideRouter, RouterOutlet, Routes } from '@angular/router';
+import { LinkComponent } from '@lucca-front/ng/link';
+```
+
+```html
+<div>
+	<a luLink="/first">Go to /first</a>
+	<br />
+	<a luLink="/second">Go to /second</a>
+	<br />
+	<a luLink [href]="url" target="_blank" external>Go to https://example.org</a>
+</div>
+<router-outlet />
+```
+
+### Angular
+
+```js
+import { AsyncPipe } from '@angular/common';
+import { provideRouter, RouterLink } from '@angular/router';
+import { LinkComponent } from '@lucca-front/ng/link';
+import { timer } from 'rxjs';
+```
+
+```html
+Routing :
+<a luLink="./#example">Text link</a>
+<br />
+Routing (nouvelle fenêtre) :
+<a luLink="./#example" external>Text link</a>
+<br />
+Routing (nouvelle fenêtre) uniquement au survol/focus/touch :
+<a luLink="./#example" external hiddenIcon>Text link</a>
+<br />
+<br />
+Lien :
+<a href="https://www.example.org" luLink>Text link</a>
+<br />
+Lien (nouvelle fenêtre) :
+<a href="https://www.example.org" luLink external>Text link</a>
+<br />
+Lien (nouvelle fenêtre) uniquement au survol/focus/touch :
+<a href="https://www.example.org" luLink external hiddenIcon>Text link</a>
+<br />
+```
+
+### Inside table
+
+```js
+import { AsyncPipe } from '@angular/common';
+import { provideRouter, RouterLink } from '@angular/router';
+import { DataTableBodyComponent, DataTableComponent, DataTableHeadComponent, DataTableRowCellComponent, DataTableRowCellHeaderComponent, DataTableRowComponent } from '@lucca-front/ng/data-table';
+import { IndexTableActionComponent, IndexTableBodyComponent, IndexTableComponent, IndexTableHeadComponent, IndexTableRowCellComponent, IndexTableRowCellHeaderComponent, IndexTableRowComponent } from '@lucca-front/ng/index-table';
+import { LinkComponent } from '@lucca-front/ng/link';
+import { timer } from 'rxjs';
+```
+
+```html
+<lu-data-table>
+	<thead luDataTableHead>
+		<tr luDataTableRow>
+			<th luDataTableCell>header</th>
+			<th luDataTableCell>header</th>
+			<th luDataTableCell>header</th>
+		</tr>
+	</thead>
+	<tbody luDataTableBody>
+		<tr luDataTableRow></tr>
+		<tr luDataTableRow>
+			<th luDataTableCell>header</th>
+			<td luDataTableCell><a luLink href="https://www.example.org" external>External link</a></td>
+			<td luDataTableCell>cell</td>
+		</tr>
+		<tr luDataTableRow>
+			<th luDataTableCell>header</th>
+			<td luDataTableCell><a luLink href="https://www.example.org" external>External link</a></td>
+			<td luDataTableCell>cell</td>
+		</tr>
+	</tbody>
+</lu-data-table>
+<br />
+<lu-index-table>
+	<thead luIndexTableHead>
+		<tr luIndexTableRow>
+			<th luIndexTableCell>header</th>
+			<th luIndexTableCell>header</th>
+			<th luIndexTableCell>header</th>
+		</tr>
+	</thead>
+	<tbody luIndexTableBody>
+		<tr luIndexTableRow>
+			<th luIndexTableCell>
+				<a luIndexTableAction href="#">action</a>
+			</th>
+			<td luIndexTableCell><a luLink href="https://www.example.org" external>External link</a></td>
+			<td luIndexTableCell>cell</td>
+		</tr>
+		<tr luIndexTableRow>
+			<th luIndexTableCell>
+				<a luIndexTableAction href="#">action</a>
+			</th>
+			<td luIndexTableCell><a luLink href="https://www.example.org" external>External link</a></td>
+			<td luIndexTableCell>cell</td>
+		</tr>
+	</tbody>
+</lu-index-table>
+```
+
+## HTML/CSS
+
+Classe CSS : `.link`
+
+### Sécurité
+
+Pour des raisons de sécurité il convient de rajouter à nos liens externes, les attributs `rel="noopener noreferrer"`. Ceci évite au navigateur d'ouvrir la ressource cible en donnant au nouveau contexte de navigation l'accès au document précédent. Pour plus de précisions : [https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel/noopener](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel/noopener)
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/link';
+```
+
+```html
+<a href="#" class="link">Text link</a>
+<br />
+<br />
+<a class="link mod-icon" href="#" target="_blank">
+	Text link
+	<!-- no text node here -->
+	<span aria-hidden="true" class="lucca-icon icon-arrowExternal"></span>
+	<span class="pr-u-mask">Open in a new window</span>
+</a>
+```

package/llms/references/components/link/link.md

@@ -0,0 +1,124 @@
+# link
+
+## Import
+
+```typescript
+import { LinkComponent, LuRouterLink } from '@lucca-front/ng/link';
+```
+
+## API Reference
+
+### LinkComponent (component)
+
+**Selectors:** `a[luLink]`, `button[luLink]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `luHref` | `href` | `string` | `''` | — | — | Adresse de la page cible. À n’utiliser qu’en lien externe ou non connu par le routeur. |
+| `routerLinkCommands` | `luLink` | `LuRouterLink['routerLink'] \| null` | `null` | — | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le lien. |
+| `decorationHover` | `decorationHover` | `boolean` | `false` | — | `luBooleanAttribute` | Souligne le lien seulement au survol. |
+| `external` | `external` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `hiddenIcon` | `hiddenIcon` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### LuRouterLink (directive)
+
+**Selector:** `[luRouterLink]`
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_LINK_INSTANCE` | `boolean` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./link.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/link/link.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/link/link.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-actions-link-angular-test--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
+
+`LinkComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+  ~ `decorationHover` : transform booleanAttribute → luBooleanAttribute
+  ~ `external` : transform booleanAttribute → luBooleanAttribute
+  ~ `hiddenIcon` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `external` router links now render an `href` attribute, making them reachable via keyboard navigation and showing their destination on hover.
+
+#### 21.3.0
+
+##### Added
+
+- `hiddenIcon` input to display the external icon only on hover/focus. It is also applied automatically when the link is used inside a `data-table` or `index-table`.
+
+#### 21.2.0
+
+##### Changed
+
+- Reworked component styling: theming now relies on dedicated `--components-link-*` CSS custom properties, with support for a `.link-text` inner element.
+
+#### 21.1.2
+
+##### Fixed
+
+- `external` links now prepare the URL with the application base href before opening, fixing external redirection for array link commands.
+
+#### 21.1.0
+
+##### Added
+
+- `intl` input to override the component's translations.
+
+##### Fixed
+
+- `external` links now honor `navigationExtras` and support `UrlTree` link commands.
+
+#### 20.3.3
+
+##### Fixed
+
+- `external` router links (`external` + `luLink` commands) now open correctly in a new tab.
+
+#### 20.1.1
+
+##### Fixed
+
+- `luLink` no longer breaks with Angular 20.
+
+#### 19.1.6
+
+##### Added
+
+- `button[luLink]` selector support, allowing the directive to be used on `<button>` elements.
+
+##### Removed
+
+- Required `label` input removed; the link content is now projected via `ng-content` instead.
+
+#### 19.1.0
+
+##### Added
+
+- Angular component (`lu-link` / `luLink`).
+
+#### 18.2.1
+
+##### Fixed
+
+- `link` spacing: corrected the spacing and alignment of the external icon.

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

@@ -0,0 +1,11 @@
+# listbox — Code & Implementation
+
+## Angular
+
+Mots-clés : liste, sélectionnable, options
+
+Component selector : `lu-listbox`
+
+## HTML/CSS
+
+Classe CSS : `.listboxOption`

package/llms/references/components/listbox/listbox.md

@@ -0,0 +1,101 @@
+# listbox
+
+## Import
+
+```typescript
+import { ListboxComponent, Treeitem, OptionComponent } from '@lucca-front/ng/listbox';
+```
+
+## API Reference
+
+### ListboxComponent (component)
+
+**Selector:** `lu-listbox`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `multiple` | `multiple` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `tree` | `tree` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `state` | `state` | `ListboxState \| null` | `null` | — | — | — |
+| `statusMsg` | `statusMsg` | `string \| null` | `null` | — | — | — |
+
+### Treeitem (directive)
+
+**Selector:** `[treeitem]`
+
+### OptionComponent (component)
+
+**Selector:** `lu-listbox-option`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `elementId` | `elementId` | `string \| null` | `null` | — | — | — |
+| `checked` | `checked` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `mixed` | `mixed` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `hovered` | `hovered` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `add` | `add` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `group` | `group` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `groupId` | `groupId` | `string \| null` | `null` | — | — | — |
+| `select` | `select` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `selectAll` | `selectAll` | `'string' \| null` | — | — | — | — |
+| `treeitemLevel` | `treeitemLevel` | `number \| null` | `null` | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LISTBOX_INSTANCE` | `ListboxComponent` | — |
+| `OPTION_INSTANCE` | `OptionComponent` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./listbox.component.md)
+
+## 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
+
+`ListboxComponent` :
+  ~ `multiple` : transform booleanAttribute → luBooleanAttribute
+  ~ `tree` : transform booleanAttribute → luBooleanAttribute
+`OptionComponent` :
+  + `elementId` : string | null
+  + `groupId` : string | null
+  + `treeitemLevel` : number | null
+  ~ `checked` : transform booleanAttribute → luBooleanAttribute
+  ~ `mixed` : transform booleanAttribute → luBooleanAttribute
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+  ~ `hovered` : transform booleanAttribute → luBooleanAttribute
+  ~ `add` : transform booleanAttribute → luBooleanAttribute
+  ~ `group` : transform booleanAttribute → luBooleanAttribute
+  ~ `select` : transform booleanAttribute → luBooleanAttribute
++ token `LISTBOX_INSTANCE` : ListboxComponent
++ token `OPTION_INSTANCE` : OptionComponent
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `LISTBOX_STATE` constant and `ListboxState` type are now publicly exported and used to type the `state` input.
+
+#### 20.3.3
+
+##### Fixed
+
+- Host `role` of the listbox and its options.
+
+#### 20.2.0
+
+##### Added
+
+- `lu-listbox` component with the `multiple`, `tree`, `state` (`loading`, `empty`) and `statusMsg` inputs, plus the `LISTBOX_INSTANCE` injection token.
+- `lu-listbox-option` component with the `checked`, `mixed`, `disabled`, `hovered`, `group`, `add`, `select` and `selectAll` inputs, plus the `OPTION_INSTANCE` injection token.