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

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

@@ -0,0 +1,236 @@
+# verticalnavigation — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-verticalnavigation-angular-disabled--docs)
+
+## Angular
+
+Component selector : `lu-vertical-navigation`
+
+### Navigation disabled
+
+```js
+import { VerticalNavigationComponent, VerticalNavigationGroupComponent, VerticalNavigationItemComponent, VerticalNavigationLinkComponent } from '@lucca-front/ng/vertical-navigation';
+```
+
+```html
+<lu-vertical-navigation heading="Section">
+	<lu-vertical-navigation-item>
+		<span luVerticalNavigationLink icon="heart" disabled>Item</span>
+	</lu-vertical-navigation-item>
+	<lu-vertical-navigation-group label="Group" icon="star">
+		<lu-vertical-navigation-item>
+			<span luVerticalNavigationLink icon="heart" disabled>Item</span>
+		</lu-vertical-navigation-item>
+		<lu-vertical-navigation-item>
+			<span luVerticalNavigationLink icon="heart" disabled>Item</span>
+		</lu-vertical-navigation-item>
+	</lu-vertical-navigation-group>
+	<lu-vertical-navigation-group label="Group" expanded="false" icon="heartFilled" disabled>
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 4</a>
+		</lu-vertical-navigation-item>
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 5</a>
+		</lu-vertical-navigation-item>
+	</lu-vertical-navigation-group>
+</lu-vertical-navigation>
+```
+
+### Navigation iconless
+
+```js
+import { VerticalNavigationComponent, VerticalNavigationGroupComponent, VerticalNavigationItemComponent, VerticalNavigationLinkComponent } from '@lucca-front/ng/vertical-navigation';
+```
+
+```html
+<lu-vertical-navigation heading="Section">
+	<lu-vertical-navigation-item>
+		<a luVerticalNavigationLink href="#">Item 1</a>
+	</lu-vertical-navigation-item>
+	<lu-vertical-navigation-group label="Group">
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 2</a>
+		</lu-vertical-navigation-item>
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 3</a>
+		</lu-vertical-navigation-item>
+	</lu-vertical-navigation-group>
+</lu-vertical-navigation>
+```
+
+### Navigation
+
+```js
+import { VerticalNavigationComponent, VerticalNavigationGroupComponent, VerticalNavigationItemComponent, VerticalNavigationLinkComponent } from '@lucca-front/ng/vertical-navigation';
+```
+
+```html
+<lu-vertical-navigation heading="Section">
+	<lu-vertical-navigation-group label="Group 1" icon="heart">
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 1</a>
+		</lu-vertical-navigation-item>
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#" aria-current="page">Item 2</a>
+		</lu-vertical-navigation-item>
+		<lu-vertical-navigation-item>
+			<a luVerticalNavigationLink href="#">Item 3</a>
+		</lu-vertical-navigation-item>
+	</lu-vertical-navigation-group>
+	<lu-vertical-navigation-item>
+		<a luVerticalNavigationLink href="#" icon="heartFilled">Item 4</a>
+	</lu-vertical-navigation-item>
+</lu-vertical-navigation>
+```
+
+## HTML/CSS
+
+Classe CSS : `.verticalNavigation`
+
+### Navigation disabled
+
+```css
+@forward '@lucca-front/scss/src/components/verticalNavigation';
+```
+
+```html
+<div class="verticalNavigation">
+	<h3 class="verticalNavigation-sectionTitle">Section title</h3>
+	<ul class="verticalNavigation-list">
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="false">
+				<span aria-hidden="true" class="verticalNavigation-list-item-link-icon lucca-icon icon-heart"></span>
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<span class="verticalNavigation-list-item-link">Item</span>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<span class="verticalNavigation-list-item-link">Item</span>
+				</li>
+			</ul>
+		</li>
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="true">
+				<span aria-hidden="true" class="verticalNavigation-list-item-link-icon lucca-icon icon-heart"></span>
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<span class="verticalNavigation-list-item-link">Item</span>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<span class="verticalNavigation-list-item-link">Item</span>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+```
+
+### Navigation iconless
+
+```css
+@forward '@lucca-front/scss/src/components/verticalNavigation';
+```
+
+```html
+<div class="verticalNavigation mod-iconless">
+	<h3 class="verticalNavigation-sectionTitle">Section title</h3>
+	<ul class="verticalNavigation-list">
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="false">
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+			</ul>
+		</li>
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="true">
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link" aria-current="page">Item</a>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+```
+
+### Navigation
+
+```css
+@forward '@lucca-front/scss/src/components/verticalNavigation';
+```
+
+```html
+<div class="verticalNavigation">
+	<h3 class="verticalNavigation-sectionTitle">Section title</h3>
+	<ul class="verticalNavigation-list">
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="false">
+				<span aria-hidden="true" class="verticalNavigation-list-item-link-icon lucca-icon icon-heart"></span>
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+			</ul>
+		</li>
+		<li class="verticalNavigation-list-item">
+			<button class="verticalNavigation-list-item-link" aria-expanded="true">
+				<span aria-hidden="true" class="verticalNavigation-list-item-link-icon lucca-icon icon-heart"></span>
+				Item
+				<span
+					aria-hidden="true"
+					class="lucca-icon icon-arrowChevronBottom verticalNavigation-list-item-link-arrow"
+				></span>
+			</button>
+			<ul class="verticalNavigation-list mod-child">
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link" aria-current="page">Item</a>
+				</li>
+				<li class="verticalNavigation-list-item">
+					<a href="#" class="verticalNavigation-list-item-link">Item</a>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+```

package/llms/references/components/verticalnavigation/verticalnavigation.md

@@ -0,0 +1,115 @@
+# verticalnavigation
+
+## Import
+
+```typescript
+import { VerticalNavigationLinkComponent, VerticalNavigationComponent, VerticalNavigationGroupComponent, VerticalNavigationItemComponent } from '@lucca-front/ng/vertical-navigation';
+```
+
+## API Reference
+
+### VerticalNavigationLinkComponent (component)
+
+**Selectors:** `span[luVerticalNavigationLink]`, `a[luVerticalNavigationLink]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le composant. |
+
+### VerticalNavigationComponent (component)
+
+**Selector:** `lu-vertical-navigation`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `heading` | `heading` | `PortalContent \| null` | `null` | — | — | Titre de la section. [PortalContent] |
+| `level` | `level` | `number` | `3` | — | `luNumberAttribute` | — |
+
+### VerticalNavigationGroupComponent (component)
+
+**Selector:** `lu-vertical-navigation-group`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `PortalContent` | — | ✅ | — | — |
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le composant. |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `expanded` | `unknown` | — | — |
+
+### VerticalNavigationItemComponent (component)
+
+**Selector:** `lu-vertical-navigation-item`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `string \| null` | `null` | — | — | — |
+| `icon` | `icon` | `LuccaIcon \| null` | `null` | — | — | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le composant. |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `expanded` | `unknown` | — | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./verticalnavigation.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/verticalnavigation/verticalnavigation.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-verticalnavigation-angular-disabled--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
+
+`VerticalNavigationLinkComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`VerticalNavigationComponent` :
+  ~ `level` : transform ∅ → luNumberAttribute
+`VerticalNavigationGroupComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`VerticalNavigationItemComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Changed
+
+- `heading` input is now optional.
+
+#### 21.0.0
+
+##### Added
+
+- `lu-vertical-navigation` component (`verticalNavigation`) with the `heading` input.
+- `lu-vertical-navigation-group` and `lu-vertical-navigation-item` components, with the `label`, `icon`, `level`, `expanded` and `disabled` inputs.
+- `[luVerticalNavigationLink]` directive for `a` and `span` elements.
+
+#### 18.2.0
+
+##### Changed
+
+- Colors of the disabled entries.

package/llms/references/migrations.md

@@ -0,0 +1,32 @@
+# Migrations Lucca Front — jusqu'à v22.0.0
+
+> Codemods exécutables via `ng generate @lucca-front/ng:<nom>`. Ils réécrivent automatiquement le code (templates, SCSS, imports) pour absorber un changement d'API, là où le changelog par composant ne fait que **décrire** le changement.
+> Source : `packages/ng/schematics/collection.json` au tag v22.0.0. Liste cumulative.
+> Guidance prose (étapes manuelles, contexte) : `https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/documentation/deprecated/deprecated.md`.
+
+_Catalogue de base de la branche 21.x (pas de diff de prédécesseur)._
+
+## Catalogue complet (cumulatif ≤ v22.0.0)
+
+| Codemod | Commande | Effet | Introduit |
+|---------|----------|-------|-----------|
+| action-icon | `ng generate @lucca-front/ng:action-icon` | Replace actionIcon usages with button mod-onlyIcon | — |
+| alignment-utilities | `ng generate @lucca-front/ng:alignment-utilities` | Replace alignment utilities tokens. | — |
+| cdn-urls | `ng generate @lucca-front/ng:cdn-urls` | Replace cdn urls with their new location | — |
+| class-prefix | `ng generate @lucca-front/ng:class-prefix` | Add pr- prefix to all utility classes | — |
+| color-text | `ng generate @lucca-front/ng:color-text` | Replace color text tokens. | — |
+| component-path | `ng generate @lucca-front/ng:component-path` | Update path component import | — |
+| deprecated-resolver | `ng generate @lucca-front/ng:deprecated-resolver` | Migrate deprecated NgModules, types and input output. | — |
+| lu-button | `ng generate @lucca-front/ng:lu-button` | Migrate CSS-only buttons to the new luButton component | — |
+| lu-container | `ng generate @lucca-front/ng:lu-container` | Migrate HTML container to the new lu-container component | — |
+| lu-grid | `ng generate @lucca-front/ng:lu-grid` | Migrate HTML grid to the new lu-grid component | — |
+| lu-icon | `ng generate @lucca-front/ng:lu-icon` | Migrate HTML icons to the new lu-icon component | — |
+| lu-loading | `ng generate @lucca-front/ng:lu-loading` | Migrate HTML loading to the new lu-loading component | — |
+| lu-select | `ng generate @lucca-front/ng:lu-select` | Migrate lu-select into lu-simple-select and lu-multiple-select where possible. | — |
+| lu-text-input | `ng generate @lucca-front/ng:lu-text-input` | Migrate deprecated textfield into lu-text-input where possible. | — |
+| new-icons | `ng generate @lucca-front/ng:new-icons` | Replace old icon names with new ones. | — |
+| palettes | `ng generate @lucca-front/ng:palettes` | Replace palettes with new names. | — |
+| tokens-radius | `ng generate @lucca-front/ng:tokens-radius` | Replace radius tokens with new names. | — |
+| tokens-spacings | `ng generate @lucca-front/ng:tokens-spacings` | Replace spacing tokens with new names. | — |
+| tokens-typo | `ng generate @lucca-front/ng:tokens-typo` | Replace typography tokens with new names. | — |
+