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

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

@@ -0,0 +1,237 @@
+# select — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-api-select--docs)
+
+## Angular
+
+### Api select
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuApiSelectInputComponent } from '@lucca-front/ng/api';
+```
+
+```html
+<label class="textfield">
+	<lu-api-select data-testid="lu-select" class="textfield-input" [api]="apiV3" />
+	<span class="textfield-label">Api V3 Select</span>
+</label>
+
+<label class="textfield pr-u-marginBlockStart300">
+	<lu-api-select class="textfield-input" standard="v4" [api]="apiV4" sort="job.name,level.position" />
+	<span class="textfield-label">Api V4 Select</span>
+</label>
+
+<label class="textfield pr-u-marginBlockStart300">
+	<lu-api-select class="textfield-input" [disabled]="true" standard="v4" [api]="apiV4" sort="job.name,level.position" />
+	<span class="textfield-label">Api V4 Select</span>
+</label>
+```
+
+### Date select
+
+```js
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ALuDateAdapter, ELuDateGranularity, LuStringDateAdapter } from '@lucca-front/ng/core';
+import { LuDateSelectInputComponent } from '@lucca-front/ng/date';
+import { LuInputDisplayerDirective } from '@lucca-front/ng/input';
+import { ALuDateAdapter, LuStringDateAdapter } from '@lucca-front/ng/core';
+```
+
+```html
+<label class="textfield">
+	<lu-date-select
+		class="textfield-input"
+		[(ngModel)]="selectedDate"
+		[granularity]="granularity"
+		[min]="min"
+		[max]="max"
+		[placeholder]="placeholder"
+		[startOn]="startOn"
+		[disabled]="disabled"
+		[hideClearer]="hideClearer"
+		[pickerOverlap]="pickerOverlap"
+	></lu-date-select>
+	<span class="textfield-label">Label</span>
+</label>
+```
+
+```html
+<label class="textfield">
+	<lu-date-select class="textfield-input" [(ngModel)]="selectedDate" />
+	<span class="textfield-label">Label</span>
+</label>
+```
+
+```html
+<label class="textfield">
+	<lu-date-select
+		class="textfield-input"
+		[(ngModel)]="selectedDate"
+		[max]="secondSelectedDate"
+		[placeholder]="secondSelectedDate ? 'max : ' + secondSelectedDate : undefined"
+	></lu-date-select>
+	<span class="textfield-label">Start</span>
+</label>
+<label class="textfield">
+	<lu-date-select
+		class="textfield-input"
+		[(ngModel)]="secondSelectedDate"
+		[min]="selectedDate"
+		[startOn]="selectedDate"
+		[placeholder]="selectedDate ? 'min : ' + selectedDate : undefined"
+	></lu-date-select>
+	<span class="textfield-label">End</span>
+</label>
+```
+
+```html
+<label class="textfield">
+	<lu-date-select class="textfield-input" [(ngModel)]="selectedDate">
+		<ng-container *luDisplayer="let value">Birthday: {{ value | date: "LL" }}</ng-container>
+	</lu-date-select>
+	<span class="textfield-label">Label</span>
+</label>
+```
+
+```html
+<label class="textfield">
+	<lu-date-select class="textfield-input" [(ngModel)]="selectedDate" [granularity]="granularity">
+		<ng-container *luDisplayer="let value">start of {{ value | date: "MM/yyyy" }}</ng-container>
+	</lu-date-select>
+	<span class="textfield-label">Label</span>
+</label>
+```
+
+### Filter pill
+
+```js
+import { JsonPipe } from '@angular/common';
+import { provideHttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuCoreSelectUsersDirective, provideCoreSelectCurrentUserId } from '@lucca-front/ng/core-select/user';
+import { FilterPillComponent } from '@lucca-front/ng/filter-pills';
+import { LuMultiSelectInputComponent } from '@lucca-front/ng/multi-select';
+import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
+```
+
+```html
+<lu-filter-pill label="Légume" name="legume">
+	<lu-simple-select [(ngModel)]="example" [options]="legumes | filterLegumes: clue" (clueChange)="clue = $event" />
+</lu-filter-pill>
+
+<pr-story-model-display>{{ example | json }}</pr-story-model-display>
+
+<hr class="divider pr-u-marginBlock400" />
+
+<lu-filter-pill label="Légume" name="legume">
+	<lu-multi-select
+		[(ngModel)]="examples"
+		[options]="legumes | filterLegumes: clue"
+		(clueChange)="clue = $event"
+		filterPillLabelPlural="légumes"
+	/>
+</lu-filter-pill>
+
+<pr-story-model-display>{{ examples | json }}</pr-story-model-display>
+
+<hr class="divider pr-u-marginBlock400" />
+
+<lu-filter-pill label="Utilisateur" name="user">
+	<lu-simple-select [(ngModel)]="user" users enableFormerEmployees />
+</lu-filter-pill>
+
+<pr-story-model-display>{{ user | json }}</pr-story-model-display>
+```
+
+### Select
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuInputDisplayerDirective } from '@lucca-front/ng/input';
+import { LuOptionItemComponent, LuOptionPickerComponent } from '@lucca-front/ng/option';
+import { LuSelectInputComponent } from '@lucca-front/ng/select';
+```
+
+```html
+<div class="pr-u-displayFlex">
+	<label class="textfield pr-u-marginInlineEnd200">
+		<lu-select class="textfield-input" placeholder="Select an item">
+			<ng-container *luDisplayer="let value">{{ value }}</ng-container>
+			<lu-option-picker>
+				<lu-option [value]="1">1</lu-option>
+				<lu-option [value]="2">2</lu-option>
+				<lu-option [value]="3">3</lu-option>
+			</lu-option-picker>
+		</lu-select>
+		<span class="textfield-label">Select</span>
+	</label>
+	<label class="textfield pr-u-marginInlineEnd200">
+		<lu-select class="textfield-input" placeholder="Select an item" [multiple]="true">
+			<ng-container *luDisplayer="let value">{{ value }}</ng-container>
+			<lu-option-picker>
+				<lu-option [value]="1">1</lu-option>
+				<lu-option [value]="2">2</lu-option>
+				<lu-option [value]="3">3</lu-option>
+			</lu-option-picker>
+		</lu-select>
+		<span class="textfield-label">Multiple Select</span>
+	</label>
+	<label class="textfield pr-u-marginInlineEnd200">
+		<lu-select [(ngModel)]="item" class="textfield-input">
+			<ng-container *luDisplayer="let value">{{ value.name }}</ng-container>
+			<lu-option-picker>
+				<lu-option [value]="green">{{ green.name }}</lu-option>
+				<lu-option [value]="red">{{ red.name }}</lu-option>
+				<lu-option [value]="yellow" [disabled]="true">{{ yellow.name }}</lu-option>
+				<lu-option [value]="blue" [disabled]="true">{{ blue.name }}</lu-option>
+				<lu-option [value]="purple">{{ purple.name }}</lu-option>
+				<lu-option [value]="orange">{{ orange.name }}</lu-option>
+				<lu-option [value]="cyan" [disabled]="true">{{ cyan.name }}</lu-option>
+				<lu-option [value]="grey">{{ grey.name }}</lu-option>
+			</lu-option-picker>
+		</lu-select>
+		<span class="textfield-label">Disabled options</span>
+	</label>
+	<label class="textfield">
+		<lu-select [(ngModel)]="item" class="textfield-input" [disabled]="true">
+			<ng-container *luDisplayer="let value">{{ value.name }}</ng-container>
+			<lu-option-picker>
+				<lu-option [value]="green">{{ green.name }}</lu-option>
+				<lu-option [value]="red">{{ red.name }}</lu-option>
+				<lu-option [value]="yellow">{{ yellow.name }}</lu-option>
+				<lu-option [value]="blue">{{ blue.name }}</lu-option>
+			</lu-option-picker>
+		</lu-select>
+		<span class="textfield-label">Disabled field</span>
+	</label>
+</div>
+```
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/clear';
+@forward '@lucca-front/scss/src/components/filterPill';
+```
+
+```html
+<div class="filterPillWrapper">
+	<button type="button" class="filterPill is-filled" aria-expanded="false" aria-controls="panel">
+		<span class="filterPill-label">Lorem ipsum:</span>
+		<span class="filterPill-value">Lorem ipsum</span>
+		<span class="filterPill-toggle">
+			<span class="lucca-icon icon-arrowChevronBottom mod-S"></span>
+		</span>
+	</button>
+	<button type="button" class="filterPill_clear clear"><span class="pr-u-mask">Vider ce champ</span></button>
+</div>
+```

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

@@ -0,0 +1,57 @@
+# select
+
+## Import
+
+```typescript
+import { LuSelectInputComponent } from '@lucca-front/ng/select';
+```
+
+## API Reference
+
+### LuSelectInputComponent (component)
+
+**Selector:** `lu-select`
+
+> ⚠️ **Déprécié** : prefer SimpleSelect or MultipleSelect
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `pickerOverlap` | `pickerOverlap` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `placeholderInput` | `placeholder` | `string` | `''` | — | — | — |
+| `multipleInput` | `multiple` | `boolean \| string` | `false` | — | — | — |
+| `disabledInput` | `disabled` | `boolean` | `false` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `onOpenOutput` | `onOpenOutput` | `void` | — |
+| `onCloseOutput` | `onCloseOutput` | `void` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuSelectModule` — prefer SimpleSelect or MultipleSelect
+- ⚠️ `LuSelectInputModule` — prefer SimpleSelect or MultipleSelect
+
+## Related files
+
+- 📝 [Code & implementation](./select.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-api-select--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
+
+~ `pickerOverlap` : défaut ∅ → false, transform ∅ → luBooleanAttribute
+~ `placeholder` : défaut ∅ → ''
+~ `multiple` : défaut ∅ → false
+~ `disabled` : défaut ∅ → false
++ (output) `onOpenOutput` : void
++ (output) `onCloseOutput` : void
+- (output) `onOpen`
+- (output) `onClose`

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

@@ -0,0 +1,117 @@
+# select-templating
+
+## Import
+
+```typescript
+import { LuCoreSelectTotalCountDirective, LuCoreSelectNoClueDirective, LuDisabledOptionDirective, LuOptionGroupDirective, LuOptionDirective, LuCoreSelectPanelHeaderDirective } from '@lucca-front/ng/core-select';
+```
+
+## API Reference
+
+### LuCoreSelectTotalCountDirective (directive)
+
+**Selectors:** `lu-simple-select[totalCount]`, `lu-multi-select[totalCount]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `totalCount` | `totalCount` | `number` | — | ✅ | — | — |
+
+### LuCoreSelectNoClueDirective (directive)
+
+**Selectors:** `lu-simple-select[noClue]`, `lu-multi-select[noClue]`
+
+### LuDisabledOptionDirective (directive)
+
+**Selector:** `[luDisabledOption]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `isDisabled` | `luDisabledOption` | `boolean` | `undefined` | — | — | — |
+
+### LuOptionGroupDirective (directive)
+
+**Selector:** `[luOptionGroup]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `select` | `luOptionGroupSelect` | `ALuSelectInputComponent<TOption, TValue>` | — | ✅ | — | — |
+| `selector` | `luOptionGroupBy` | `(option: TOption) => TGroup` | — | ✅ | — | — |
+
+### LuOptionDirective (directive)
+
+**Selector:** `[luOption]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `select` | `luOptionSelect` | `ALuSelectInputComponent<TOption, TValue>` | `undefined` | — | — | — |
+
+### LuCoreSelectPanelHeaderDirective (directive)
+
+**Selector:** `[luSelectPanelHeader]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `select` | `luSelectPanelHeader` | `ALuSelectInputComponent<unknown, unknown> \| ALuSelectInputComponent<unknown, unknown[]>` | — | ✅ | — | — |
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuSelectLabelsAndIds` | `(): Provider[]` | — |
+| `provideOptionContext` | `(): Provider` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_OPTION_CONTEXT` | `ILuOptionContext<unknown>` | — |
+| `SELECT_PANEL_INSTANCE` | `CoreSelectPanelInstance` | — |
+| `SELECT_ID` | `number` | — |
+| `SELECT_LABEL` | `HTMLLabelElement \| undefined` | — |
+| `SELECT_LABEL_ID` | `string` | — |
+| `CORE_SELECT_API_TOTAL_COUNT_PROVIDER` | `CoreSelectApiTotalCountProvider` | — |
+| `LU_CORE_SELECT_TRANSLATIONS` | `unknown` | — |
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luTreeDisplay` | `TreeDisplayPipe` | `(items: T[], treeGenerator: TreeGenerator<T, TreeNode<T>>): TreeNode<T>[]` | — |
+| `luOptionGroup` | `LuOptionGroupPipe` | `(options: T[], selector: (option: T) => TGroup)` | — |
+| `luIsOptionSelected` | `LuIsOptionSelectedPipe` | `(option: T, comparer: LuOptionComparer<T>, selectedOptions: T[]): boolean` | — |
+
+### Services
+
+#### CoreSelectKeyManager
+
+- `init(options: CoreSelectKeyManagerOptions<T>): void`
+- `onKeydown(event: KeyboardEvent): void`
+- `setActiveItem(index: number): void`
+- `setActiveItemByElement(item: CoreSelectPanelElement<T>): void`
+- `highlightOption(option: T): void`
+
+## 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
+
+`LuDisabledOptionDirective` :
+  ~ `luDisabledOption` : boolean | null → boolean, défaut ∅ → undefined
+`LuOptionGroupDirective` :
+  ~ `luOptionGroupSelect` : devient requis
+  ~ `luOptionGroupBy` : (option: TOption) → (option: TOption) => TGroup, devient requis, défaut > TGroup → ∅
+`LuOptionDirective` :
+  ~ `luOptionSelect` : défaut ∅ → undefined

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

@@ -0,0 +1,56 @@
+# sidepanel — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-sidepanel--docs)
+
+## Angular
+
+### Navigation sidepanel
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ILuModalContent } from '@lucca-front/ng/modal';
+import { LuSidepanel, LuSidepanelModule } from '@lucca-front/ng/sidepanel';
+import { ILuSidepanelContent, LuSidepanel, LuSidepanelModule } from '@lucca-front/ng/sidepanel';
+```
+
+```html
+<p>General Kenobi</p>
+```
+
+```html
+<h1>Sidepanels</h1>
+
+<button type="button" class="button" (click)="openSidepanel()">Open sidepanel</button>
+```
+
+### Overlays sidepanel
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ILuModalContent, LuModal, LuModalModule } from '@lucca-front/ng/modal';
+import { LuSidepanel, LuSidepanelModule } from '@lucca-front/ng/sidepanel';
+import { LuToastsModule, LuToastsService } from '@lucca-front/ng/toast';
+import { map, shareReplay, timer } from 'rxjs';
+import { LuSidepanelModule } from '@lucca-front/ng/sidepanel';
+```
+
+```html
+<p>General Kenobi</p>
+```
+
+```html
+<lu-toasts [sources]="[]" />
+<div class="pr-u-marginBlockEnd200">
+	<button type="button" class="button" (click)="openSidepanel()">Open</button>
+	<button type="button" class="button" (click)="openDynamicContentSidepanel()">Open (Dynamic)</button>
+	<button type="button" class="button" (click)="openUndismissableSidepanel()">Open (Backdrop event)</button>
+</div>
+<div>
+	<button type="button" class="button mod-outlined" (click)="openLegacySidepanel()">Open (Legacy)</button>
+	<button type="button" class="button mod-outlined" (click)="openLegacyDynamicContentSidepanel()">
+		Open (Legacy & dynamic)
+	</button>
+</div>
+```

package/llms/references/components/sidepanel/sidepanel.md

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

package/llms/references/components/simple-select/simple-select.component.md

@@ -0,0 +1,39 @@
+# simple-select — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-simple-select-angular--docs)
+
+## Angular
+
+Component selector : `lu-simple-select`
+
+### Appeler une API
+
+Pour un format de retour V3 ou V4 sans customisation de l'affichage (l'entité doit avoir une propriété `name`), il suffit de donner l'API à appeler :
+
+### Personnaliser l'affichage
+
+Dans le cas d'une personnalisation de l'option et/ou de la valeur affichée, il est nécessaire de créer votre propre directive en s'aidant de `LuCoreSelectApiV4Directive` ou de `LuCoreSelectApiV3Directive` :
+
+### API non conventionnelle (sans id)
+
+Dans le cas d'un appel API ne rentrant pas dans le moule habituel, il est nécessaire de créer votre propre directive en s'aidant de `ALuCoreSelectApiDirective` :
+
+### Select
+
+```js
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
+```
+
+```html
+<lu-form-field label="Label" tooltip="Tooltip message" inlineMessage="Helper text" inlineMessageState="default">
+	<lu-simple-select
+		placeholder="Placeholder"
+		clearable
+		[options]="legumes | filterLegumes: clue"
+		(clueChange)="clue = $event"
+		[(ngModel)]="model.example"
+	></lu-simple-select>
+</lu-form-field>
+<pr-story-model-display>{{ model.example | json }}</pr-story-model-display>
+```