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

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

@@ -0,0 +1,366 @@
+# listing — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-listing-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-listing`
+
+### Basic
+
+```js
+import { ListingComponent, ListingItemComponent } from '@lucca-front/ng/listing';
+```
+
+```html
+<lu-listing>
+	<lu-listing-item>item</lu-listing-item>
+	<lu-listing-item>item</lu-listing-item>
+	<lu-listing-item>
+		item
+		<lu-listing>
+			<lu-listing-item>item</lu-listing-item>
+			<lu-listing-item>item</lu-listing-item>
+			<lu-listing-item critical>item</lu-listing-item>
+		</lu-listing>
+	</lu-listing-item>
+	<lu-listing-item>item</lu-listing-item>
+</lu-listing>
+```
+
+### Inline
+
+```js
+import { ListingComponent, ListingItemComponent } from '@lucca-front/ng/listing';
+```
+
+```html
+<lu-listing inline>
+	<lu-listing-item>Lorem ipsum</lu-listing-item>
+	<lu-listing-item>Lorem ipsum dolor sit amet</lu-listing-item>
+	<lu-listing-item>Lorem ipsum dolor sit</lu-listing-item>
+	<lu-listing-item>Lorem</lu-listing-item>
+	<lu-listing-item>Lorem ipsum dolor</lu-listing-item>
+	<lu-listing-item>Lorem ipsum dolor sit amet</lu-listing-item>
+</lu-listing>
+```
+
+## HTML/CSS
+
+Classe CSS : `.listing`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ul class="listing">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">
+			item
+			<ul class="listing">
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+			</ul>
+		</div>
+	</li>
+</ul>
+```
+
+### Checklist
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ul class="listing mod-checklist">
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+		<div class="listing-item-content">
+			item
+			<ul class="listing mod-checklist palette-success">
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon icon-signClose palette-critical" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+			</ul>
+		</div>
+	</li>
+</ul>
+```
+
+### Divider
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ul class="listing mod-inline mod-divider">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+</ul>
+```
+
+### Icons
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ul class="listing mod-icons">
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon icon-foodCroissant" aria-hidden="true"></span>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon icon-foodBurger" aria-hidden="true"></span>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<span class="listing-item-icon lucca-icon icon-foodCoffee" aria-hidden="true"></span>
+		<div class="listing-item-content">
+			item
+			<ul
+				class="listing palette-product mod-icons"
+				style="--components-listing-item-icon-before-content: &quot;&quot;"
+			>
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<span class="listing-item-icon lucca-icon" aria-hidden="true"></span>
+					<div class="listing-item-content">item</div>
+				</li>
+			</ul>
+		</div>
+	</li>
+</ul>
+```
+
+### Inline
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ul class="listing mod-inline">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+</ul>
+```
+
+### Fancy
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ol class="listing mod-fancy">
+	<li class="listing-item">
+		<div class="listing-item-number" aria-hidden="true"></div>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-number" aria-hidden="true"></div>
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-number" aria-hidden="true"></div>
+		<div class="listing-item-content">
+			item
+			<ol class="listing mod-fancy">
+				<li class="listing-item">
+					<div class="listing-item-number" aria-hidden="true"></div>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-number" aria-hidden="true"></div>
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-number" aria-hidden="true"></div>
+					<div class="listing-item-content">item</div>
+				</li>
+			</ol>
+		</div>
+	</li>
+</ol>
+```
+
+### Ordered
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ol class="listing">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">
+			item
+			<ol class="listing">
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+			</ol>
+		</div>
+	</li>
+</ol>
+```
+
+### Reversed
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ol class="listing" reversed="reversed">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">
+			item
+			<ol class="listing" reversed="reversed">
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+			</ol>
+		</div>
+	</li>
+</ol>
+```
+
+### Start
+
+```css
+@forward '@lucca-front/scss/src/components/listing';
+```
+
+```html
+<ol class="listing" start="3">
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">item</div>
+	</li>
+	<li class="listing-item">
+		<div class="listing-item-content">
+			item
+			<ol class="listing" start="3">
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+				<li class="listing-item">
+					<div class="listing-item-content">item</div>
+				</li>
+			</ol>
+		</div>
+	</li>
+</ol>
+```

package/llms/references/components/listing/listing.md

@@ -0,0 +1,105 @@
+# listing
+
+## Import
+
+```typescript
+import { ListingItemComponent, ListingComponent } from '@lucca-front/ng/listing';
+```
+
+## Basic Usage
+
+```html
+<lu-listing> <lu-listing-item>item</lu-listing-item> <lu-listing-item>item</lu-listing-item> <lu-listing-item> item <lu-listing> <lu-listing-item>item</lu-listing-item> <lu-listing-item>item</lu-listing-item> <lu-listing-item critical>item</lu-listing-item> </lu-listing> </lu-listing-item> <lu-listing-item>item</lu-listing-item>
+</lu-listing>
+```
+
+## API Reference
+
+### ListingItemComponent (component)
+
+**Selector:** `lu-listing-item`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | Modifie l’icône d’un élément de la liste. |
+| `critical` | `critical` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### ListingComponent (component)
+
+**Selector:** `lu-listing`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `ordered` | `ordered` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `orderedFancy` | `orderedFancy` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `checklist` | `checklist` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `icons` | `icons` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `defaultIcon` | `defaultIcon` | `LuccaIcon` | `'signConfirm'` | — | — | Modifie l’icône par défaut. |
+| `palette` | `palette` | `Palette` | `'none'` | — | — | Modifie la couleur des icônes. |
+| `start` | `start` | `number` | `1` | — | `luNumberAttribute` | Modifie la valeur initiale de la liste. |
+| `inline` | `inline` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `divider` | `divider` | `boolean` | `false` | — | `luBooleanAttribute` | Ajoute un séparateur vertical entre les éléments. |
+| `reversed` | `reversed` | `boolean` | `false` | — | `luBooleanAttribute` | Présente la liste sous forme décroissante. |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./listing.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/listing/listing.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/listing/listing.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-listing-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
+
+`ListingItemComponent` :
+  ~ `critical` : transform booleanAttribute → luBooleanAttribute
+`ListingComponent` :
+  ~ `ordered` : transform booleanAttribute → luBooleanAttribute
+  ~ `orderedFancy` : transform booleanAttribute → luBooleanAttribute
+  ~ `checklist` : transform booleanAttribute → luBooleanAttribute
+  ~ `icons` : transform booleanAttribute → luBooleanAttribute
+  ~ `start` : transform numberAttribute → luNumberAttribute
+  ~ `inline` : transform booleanAttribute → luBooleanAttribute
+  ~ `divider` : transform booleanAttribute → luBooleanAttribute
+  ~ `reversed` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.2.0
+
+##### Added
+
+- `critical` input to render an item with the critical styling.
+- `orderedFancy` input, replacing `fancy`, to render an ordered list with fancy numbers.
+
+##### Removed
+
+- `fancy` input — use `orderedFancy` instead.
+
+#### 21.0.0
+
+##### Added
+
+- `inline` input to lay out the items on a single line.
+- `divider`, `reversed` and `start` inputs.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-listing` component (`listing`) and `lu-listing-item`, with the `ordered`, `checklist`, `palette`, `icons` and `defaultIcon` inputs, the item-level `icon` input and the `LU_LISTING_INSTANCE` injection token.
+
+##### Fixed
+
+- Default icon of the items.

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

@@ -0,0 +1,37 @@
+# loading — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-loading-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-loading`
+
+### Basic
+
+```js
+import { LoadingComponent } from '@lucca-front/ng/loading';
+```
+
+```html
+<lu-loading hiddenLabel>Chargement…</lu-loading>
+```
+
+## HTML/CSS
+
+Classe CSS : `.loading`
+
+La classe `mod-fullPage` permettent de centrer un loading dans une page entière.
+
+Les classes `mod-popin` et `mod-drawer` permettent de centrer un loading dans une fenêtre de dialogue en version classique ou drawer.
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/loading';
+```
+
+```html
+<div class="loading mod-hiddenLabel">
+	<span class="loading-label">Chargement…</span>
+</div>
+```

package/llms/references/components/loading/loading.md

@@ -0,0 +1,91 @@
+# loading
+
+## Import
+
+```typescript
+import { LoadingComponent } from '@lucca-front/ng/loading';
+```
+
+## Basic Usage
+
+```html
+<lu-loading hiddenLabel>Chargement…</lu-loading>
+```
+
+## API Reference
+
+### LoadingComponent (component)
+
+**Selector:** `lu-loading`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `size` | `size` | `LoadingSize \| null` | `null` | — | — | — |
+| `invert` | `invert` | `boolean` | `false` | — | `luBooleanAttribute` | Modifie les couleurs du loading pour un usage sur fond foncé. |
+| `block` | `block` | `boolean` | `false` | — | `luBooleanAttribute` | Centre le loading dans son conteneur pour une utilisation en pleine page, dialog, section, etc. |
+| `hiddenLabel` | `hiddenLabel` | `boolean` | `false` | — | `luBooleanAttribute` | Masque le label en le conservant dans le DOM pour les lecteurs d’écrans. |
+| `template` | `template` | `DisplayMode \| null` | `null` | — | — | Applique une mise en forme adaptée à certains contextes (pleine page, dialog, etc.). |
+
+## Related files
+
+- 📝 [Code & implementation](./loading.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/loading/loading.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/loading/loading.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-loading-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
+
+~ `invert` : transform booleanAttribute → luBooleanAttribute
+~ `block` : transform booleanAttribute → luBooleanAttribute
+~ `hiddenLabel` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `LOADING_SIZE` constant and `LoadingSize` type are now publicly exported and used to type the `size` input.
+
+#### 21.2.0
+
+##### Added
+
+- `hiddenLabel` input to visually hide the loading label while keeping it available to screen readers (`mod-hiddenLabel`).
+
+#### 20.1.1
+
+##### Added
+
+- The spinner color can be overridden through a CSS custom property.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-loading` component (`loading`) with the `size`, `block`, `invert` and `template` inputs.
+
+#### 18.3.1
+
+##### Fixed
+
+- `mod-page` centering.
+
+#### 18.2.3
+
+##### Fixed
+
+- The loader no longer forces a `100%` inline size.
+- Outer margins of the loader.
+
+#### 18.1.0
+
+##### Changed
+
+- Component reworked: simplified markup and CSS custom properties.