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

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

@@ -0,0 +1,146 @@
+# main-layout — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-main-layout-angular-basic--docs)
+
+## Angular
+
+### Basic
+
+```js
+import { AppLayoutComponent } from '@lucca-front/ng/app-layout';
+import { ContainerComponent } from '@lucca-front/ng/container';
+import { MAIN_LAYOUT_ILLUSTRATION_END_START, MAIN_LAYOUT_ILLUSTRATION_START_END, MainLayoutBlockComponent, MainLayoutComponent } from '@lucca-front/ng/main-layout';
+```
+
+```html
+<lu-main-layout>
+	<ng-container mainLayoutHeader>
+		<lu-container>
+			<div class="fakeContent">header</div>
+		</lu-container>
+	</ng-container>
+
+	<lu-main-layout-block>
+		<lu-container>
+			<div class="fakeContent">content</div>
+		</lu-container>
+	</lu-main-layout-block>
+
+	<ng-container mainLayoutFooter>
+		<lu-container>
+			<div class="fakeContent">footer</div>
+		</lu-container>
+	</ng-container>
+</lu-main-layout>
+```
+
+### InAppLayout
+
+```js
+import { AppLayoutComponent } from '@lucca-front/ng/app-layout';
+import { ContainerComponent } from '@lucca-front/ng/container';
+import { MAIN_LAYOUT_ILLUSTRATION_END_START, MAIN_LAYOUT_ILLUSTRATION_START_END, MainLayoutBlockComponent, MainLayoutComponent } from '@lucca-front/ng/main-layout';
+```
+
+```html
+<lu-app-layout>
+	<ng-container appLayoutBanner>banner</ng-container>
+	<ng-container appLayoutNavSide>navSide</ng-container>
+	<lu-main-layout footerSticky>
+		<ng-container mainLayoutHeader>
+			<div class="fakeContent">
+				header
+				<!-- <lu-page-header container /> -->
+			</div>
+		</ng-container>
+
+		<lu-main-layout-block>
+			<lu-container>
+				<div class="fakeContent">content</div>
+			</lu-container>
+		</lu-main-layout-block>
+
+		<ng-container mainLayoutFooter>
+			<div class="fakeContent">
+				footer
+				<!-- <lu-footer container /> -->
+			</div>
+		</ng-container>
+	</lu-main-layout>
+</lu-app-layout>
+<!-- <lu-toasts /> -->
+```
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/mainLayout';
+@forward '@lucca-front/scss/src/components/container';
+```
+
+```html
+<main role="main" class="mainLayout">
+	<div class="mainLayout-content">
+		<div class="mainLayout-content-inside">
+			<div class="mainLayout-content-inside-header">
+				<div class="container">
+					<div class="fakeContent">header</div>
+				</div>
+			</div>
+			<div class="mainLayout-content-inside-block">
+				<div class="container">
+					<div class="fakeContent">content</div>
+				</div>
+			</div>
+			<div class="mainLayout-content-inside-footer">
+				<div class="container">
+					<div class="fakeContent">footer</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</main>
+```
+
+### InAppLayout
+
+```css
+@forward '@lucca-front/scss/src/components/mainLayout';
+@forward '@lucca-front/scss/src/components/appLayout';
+@forward '@lucca-front/scss/src/components/container';
+```
+
+```html
+<div class="appLayout">
+	<div class="appLayout-banner">banner</div>
+	<div class="appLayout-navSide">navSide</div>
+	<div class="appLayout-main">
+		<main role="main" class="mainLayout">
+			<div class="mainLayout-content">
+				<div class="mainLayout-content-inside">
+					<div class="mainLayout-content-inside-header">
+						<div class="fakeContent">
+							header
+							<!-- .pageHeader container -->
+						</div>
+					</div>
+					<div class="mainLayout-content-inside-block">
+						<div class="container">
+							<div class="fakeContent">content</div>
+						</div>
+					</div>
+					<div class="mainLayout-content-inside-footer mod-sticky">
+						<div class="fakeContent">
+							header
+							<!-- .footer container -->
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+	</div>
+</div>
+<!-- <lu-toasts /> -->
+```

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

@@ -0,0 +1,78 @@
+# main-layout
+
+## Import
+
+```typescript
+import { MainLayoutBlockComponent, MainLayoutComponent } from '@lucca-front/ng/main-layout';
+```
+
+## Basic Usage
+
+```html
+<lu-main-layout> <ng-container mainLayoutHeader> <lu-container> <div class="fakeContent">header</div> </lu-container> </ng-container> <lu-main-layout-block> <lu-container> <div class="fakeContent">content</div> </lu-container> </lu-main-layout-block> <ng-container mainLayoutFooter> <lu-container> <div class="fakeContent">footer</div> </lu-container> </ng-container> </lu-main-layout>
+```
+
+## API Reference
+
+### MainLayoutBlockComponent (component)
+
+**Selector:** `lu-main-layout-block`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `overflow` | `overflow` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### MainLayoutComponent (component)
+
+**Selector:** `lu-main-layout`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `headerSticky` | `headerSticky` | `boolean` | `false` | — | `luBooleanAttribute` | Conserve le header visible en haut du layout. |
+| `footerSticky` | `footerSticky` | `boolean` | `false` | — | `luBooleanAttribute` | Conserve le footer visible en bas du layout. |
+| `bubblesStartEnd` | `bubblesStartEnd` | `1 \| 2 \| 3 \| null` | `null` | — | `bubblesCountAttribute` | Affiche des bulles décoratives dans le coin supérieur gauche. |
+| `bubblesEndStart` | `bubblesEndStart` | `1 \| 2 \| 3 \| null` | `null` | — | `bubblesCountAttribute` | Affiche des bulles décoratives dans le coin inférieur droit. |
+| `illustrationStartEnd` | `illustrationStartEnd` | `MainLayoutIllustrationStartEnd \| null` | `null` | — | — | Affiche une illustration dans le coin supérieur gauche. |
+| `illustrationEndStart` | `illustrationEndStart` | `MainLayoutIllustrationEndStart \| null` | `null` | — | — | Affiche une illustration dans le coin inférieur droit. |
+| `palette` | `palette` | `'success' \| 'warning' \| 'error' \| 'product' \| 'neutral' \| 'none' \| 'brand'` | `'none'` | — | — | Applique une palette de couleurs au layout. |
+| `responsive` | `responsive` | `'wideM' \| null` | `null` | — | — | Modifie le comportement responsive du layout. |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_MAIN_LAYOUT_INSTANCE` | `MainLayoutIllustrations` | — |
+
+## Type definitions
+
+- [`MainLayoutIllustrationStartEnd`](../../types/MainLayoutIllustrationStartEnd.md) — 11 available values
+- [`MainLayoutIllustrationEndStart`](../../types/MainLayoutIllustrationEndStart.md) — 34 available values
+
+## Related files
+
+- 📝 [Code & implementation](./main-layout.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-main-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
+
+`MainLayoutBlockComponent` :
+  ~ `overflow` : transform booleanAttribute → luBooleanAttribute
+`MainLayoutComponent` :
+  + `bubblesStartEnd` : 1 | 2 | 3 | null
+  + `bubblesEndStart` : 1 | 2 | 3 | null
+  + `illustrationStartEnd` : MainLayoutIllustrationStartEnd | null
+  + `illustrationEndStart` : MainLayoutIllustrationEndStart | null
+  + `palette` : 'success' | 'warning' | 'error' | 'product' | 'neutral' | 'none' | 'brand'
+  + `responsive` : 'wideM' | null
+  ~ `headerSticky` : transform booleanAttribute → luBooleanAttribute
+  ~ `footerSticky` : transform booleanAttribute → luBooleanAttribute
++ token `LU_MAIN_LAYOUT_INSTANCE` : MainLayoutIllustrations

package/llms/references/components/mobile-push/mobile-push.component.md

@@ -0,0 +1,62 @@
+# mobile-push — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-mobile-push-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-mobile-push`
+
+### Push basic
+
+```js
+import { IconComponent } from '@lucca-front/ng/icon';
+import { MobilePushComponent } from '@lucca-front/ng/mobile-push';
+```
+
+```html
+<lu-mobile-push>Posez une absence depuis n’importe où avec l’application Lucca.</lu-mobile-push>
+```
+
+## HTML/CSS
+
+Classe CSS : `.mobilePush`
+
+### Push basic
+
+```css
+@forward '@lucca-front/scss/src/components/mobilePush';
+```
+
+```html
+<div class="mobilePush-containerWrapper">
+	<div class="mobilePush">
+		<div class="mobilePush-icons">
+			<span aria-hidden="true" class="mobilePush-icons-front lucca-icon icon-deviceMobile mod-S"></span>
+			<img
+				class="mobilePush-icons-back"
+				alt=""
+				src="https://cdn.lucca.fr/transverse/prisme/visuals/plg-push/shape.svg"
+			/>
+		</div>
+		<div class="mobilePush-content">
+			<div class="mobilePush-content-description">Posez une absence depuis n’importe où avec l’application Lucca.</div>
+			<div class="mobilePush-content-downloadApps">
+				<a href="#" class="mobilePush-content-downloadApps-link">
+					<img
+						class="mobilePush-content-downloadApps-link-badge"
+						alt="Download on the App Store"
+						src="https://cdn.lucca.fr/transverse/prisme/visuals/mobile-push/badge-app-store-us-uk.svg"
+					/>
+				</a>
+				<a href="#" class="mobilePush-content-downloadApps-link">
+					<img
+						class="mobilePush-content-downloadApps-link-badge"
+						alt="Get it on Google"
+						src="https://cdn.lucca.fr/transverse/prisme/visuals/mobile-push/badge-google-play-store-us-uk.svg"
+					/>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
+```

package/llms/references/components/mobile-push/mobile-push.md

@@ -0,0 +1,70 @@
+# mobile-push
+
+## Import
+
+```typescript
+import { MobilePushComponent } from '@lucca-front/ng/mobile-push';
+```
+
+## Basic Usage
+
+```html
+<lu-mobile-push > Posez une absence depuis n’importe où avec l’application Lucca.
+</lu-mobile-push>
+```
+
+## API Reference
+
+### MobilePushComponent (component)
+
+**Selector:** `lu-mobile-push`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `appStoreLinkClicked` | `appStoreLinkClicked` | `void` | — |
+| `googlePlayLinkClicked` | `googlePlayLinkClicked` | `void` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./mobile-push.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/mobile-push/mobile-push.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-mobile-push-angular-basic--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.3
+
+##### Changed
+
+- Store links now warn assistive technologies that they open in a new tab.
+
+#### 20.1.1
+
+##### Added
+
+- `appStoreLinkClicked` and `googlePlayLinkClicked` outputs, emitted when the corresponding store link is clicked.
+
+#### 20.1.0
+
+##### Added
+
+- `lu-mobile-push` component (`mobilePush`) with the `intl` input, to promote the mobile application.

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

@@ -0,0 +1,31 @@
+# mobileheader — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-mobileheader-basic--docs)
+
+## HTML/CSS
+
+### Header basic
+
+```css
+@forward '@lucca-front/scss/src/components/mobileHeader';
+```
+
+```html
+<div class="mobileHeader">
+	<a href="#" class="link mod-decorationHover">Text link</a>
+	<div class="mobileHeader-title">
+		<h1 class="mobileHeader-title-main">Title</h1>
+		<div class="mobileHeader-title-sub">Subtitle</div>
+	</div>
+	<div class="mobileHeader-actions">
+		<button type="button" class="button mod-onlyIcon mod-ghost palette-product" luTooltip="Action">
+			<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+			<span class="pr-u-mask">Action</span>
+		</button>
+		<button type="button" class="button mod-onlyIcon mod-ghost palette-product" luTooltip="Action">
+			<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+			<span class="pr-u-mask">Action</span>
+		</button>
+	</div>
+</div>
+```

package/llms/references/components/mobileheader/mobileheader.md

@@ -0,0 +1,8 @@
+# mobileheader
+
+## Related files
+
+- 📝 [Code & implementation](./mobileheader.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/mobileheader/mobileheader.design.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-mobileheader-basic--docs)

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

@@ -0,0 +1,43 @@
+# mobilenavigation — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-mobilenavigation-basic--docs)
+
+## HTML/CSS
+
+### Navigation basic
+
+```css
+@forward '@lucca-front/scss/src/components/mobileNavigation';
+```
+
+```html
+<nav class="mobileNavigation">
+	<ul class="mobileNavigation-list">
+		<li class="mobileNavigation-list-item">
+			<a href="#" class="mobileNavigation-list-item-link" aria-current="page">
+				<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+				Label
+			</a>
+		</li>
+		<li class="mobileNavigation-list-item">
+			<a href="#" class="mobileNavigation-list-item-link">
+				<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+				Label
+			</a>
+		</li>
+		<li class="mobileNavigation-list-item">
+			<a href="#" class="mobileNavigation-list-item-link">
+				<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+				Label
+				<span class="mobileNavigation-list-item-link-counter numericBadge mod-XS">2</span>
+			</a>
+		</li>
+		<li class="mobileNavigation-list-item">
+			<a href="#" class="mobileNavigation-list-item-link">
+				<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+				Label
+			</a>
+		</li>
+	</ul>
+</nav>
+```

package/llms/references/components/mobilenavigation/mobilenavigation.md

@@ -0,0 +1,8 @@
+# mobilenavigation
+
+## Related files
+
+- 📝 [Code & implementation](./mobilenavigation.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/mobilenavigation/mobilenavigation.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/mobilenavigation/mobilenavigation.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-mobilenavigation-basic--docs)

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

@@ -0,0 +1,37 @@
+# modal — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-modal--docs)
+
+## Angular
+
+🚧 Modal utilise aujourd'hui le nouveau service Dialog par défaut. Il est prévu de la conserver en tant qu'outil permettant de créer rapidement une fenêtre de dialogue et sera ainsi renommée dans le futur.
+
+### Modal
+
+```js
+import { ChangeDetectionStrategy, Component, inject, input, Type } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { ILuModalContent, LU_MODAL_DATA, LuModal, LuModalConfig, LuModalModule } from '@lucca-front/ng/modal';
+import { LuToastsModule, LuToastsService } from '@lucca-front/ng/toast';
+import { map, shareReplay, timer } from 'rxjs';
+import { ILuModalContent } from '@lucca-front/ng/modal';
+import { ILuModalContent, LU_MODAL_DATA } from '@lucca-front/ng/modal';
+```
+
+```html
+<p>General Kenobi</p>
+```
+
+```html
+<p>{{ message }}</p>
+```
+
+```html
+<lu-toasts [sources]="[]" />
+<button type="button" luButton (click)="openModal()">Open</button>
+```
+
+```html
+<p>{{ data.message }}</p>
+```

package/llms/references/components/modal/modal.md

@@ -0,0 +1,61 @@
+# modal
+
+## Import
+
+```typescript
+import { LuModalPanelComponent, LuModalPanelComponentDefaultCD } from '@lucca-front/ng/modal';
+```
+
+## API Reference
+
+### LuModalPanelComponent (component)
+
+**Selector:** `lu-modal-panel`
+
+### LuModalPanelComponentDefaultCD (component)
+
+**Selector:** `lu-modal-panel-default`
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `provideLuModal` | `(): Provider[]` | Provide LuModal. Note that OverlayModule should be imported in one of the EnvironmentInjectors (AppModule, lazy-loaded route) using `providers: [importProvidersFrom(OverlayModule)]`. |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_MODAL_DATA` | `unknown` | Injection token that can be used to access the data that was passed in to a dialog. |
+| `LU_MODAL_CONFIG` | `LuModalConfig` | — |
+| `LU_MODAL_REF_FACTORY` | `IModalRefFactory` | — |
+| `LU_MODAL_TRANSLATIONS` | `unknown` | — |
+
+### Services
+
+#### LuModalRefFactory
+
+- `forge<T extends ILuModalContent, C extends LuModalConfig, D, R>(component: ComponentType<T>, config: C)`
+#### LuModal
+
+- `open<T extends ILuModalContent, D>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`
+- `legacyOpen<T extends ILuModalContent, D>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`
+
+### Modules dépréciés
+
+- ⚠️ `LuModalModule` — use `OverlayModule, DialogModule` imports && provide `provideLuModal(), LuDialogService` instead
+
+## Related files
+
+- 📝 [Code & implementation](./modal.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/modal/modal.design.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-modal--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
+
+~ service `LuModal` : + `open<T extends ILuModalContent, D>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`, + `legacyOpen<T extends ILuModalContent, D>(component: ComponentType<T>, data: D | undefined = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`, - `open<T extends ILuModalContent, D>(component: ComponentType<T>, data: D = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`, - `legacyOpen<T extends ILuModalContent, D>(component: ComponentType<T>, data: D = undefined, config: Partial<LuModalConfig> = {}): ILuModalRef<D, LuModalContentResult<T>>`

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

@@ -0,0 +1,39 @@
+# multi-select — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-multi-select-angular--docs)
+
+## Angular
+
+Component selector : `lu-multi-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 { LuMultiSelectInputComponent } from '@lucca-front/ng/multi-select';
+```
+
+```html
+<lu-form-field label="Label" tooltip="Tooltip message" inlineMessage="Helper text" inlineMessageState="default">
+	<lu-multi-select
+		[(ngModel)]="model.example"
+		[options]="legumes | filterLegumes: clue"
+		(clueChange)="clue = $event"
+		placeholder="Placeholder"
+		clearable
+	/>
+</lu-form-field>
+<pr-story-model-display>{{ model.example | json }}</pr-story-model-display>
+```