LF18.1

.storybook/msw/handlers.ts

@@ -7,12 +7,12 @@ const usersSearchHandler = genericHandler(
 	// Get and parse params from query params
 	{
 		paging: (p) => p,
-		search: (search) => search.toLowerCase(),
+		clue: (clue) => clue.toLowerCase(),
 		id: (ids) => ids.split(',').map((id) => parseInt(id)),
 	},
 	{
 		// Apply filters to items
-		search: applyFilter((user, { search }) => `${user.firstName} ${user.lastName}`.includes(search)),
+		clue: applyFilter((user, { clue }) => `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(clue)),
 		id: applyFilter((user, { id }) => id.includes(user.id)),
 		// Then paging/limiting
 		paging: applyV3Paging,

.vscode/settings.json

@@ -41,4 +41,4 @@
 			"source.fixAll.markdownlint": "explicit"
 		}
 	}
-}
+}

README.md

@@ -97,9 +97,9 @@ To import all components, replace the previous code by the 3 following lines (no
 
 ```
 // Import styles
-@forward '@lucca-front/icons/src/main’;
-@forward '@lucca-front/scss/src/main-all’;
-@forward '@lucca-front/ng/src/main’;
+@forward '@lucca-front/icons/src/main';
+@forward '@lucca-front/scss/src/main-all';
+@forward '@lucca-front/ng/src/main';
 ```
 
 For custom imports, check our [advanced usage documentation](https://prisme.lucca.io/94310e217/p/950783-chargement-des-composants).
@@ -113,9 +113,9 @@ In angular.json, we suggest to add a couple of entries to your paths:
   "build": {
     "options": {
       "stylePreprocessorOptions": {
-        “includePaths": [
+        "includePaths": [
           "src/scss",
-          "node_modules",
+          "node_modules"
         ]
       },
     },

docs/dialog.md

@@ -181,25 +181,25 @@ Dans le cas où vous souhaitez utiliser un formulaire au sein d’une dialog box
 
 ```html
 <lu-dialog>
-		<!--form = new FormGroup({
-			example: new FormControl('', Validators.required)
-		})-->
-		<form [formControl]="form" class="dialog-formOptionnal">
-			<lu-dialog-header>Header with Form inside</lu-dialog-header>
-
-			<lu-dialog-content>
-				<lu-form-field label="Example input">
-					<lu-text-input formControlName="example" placeholder="This will be focused if autoFocus is set to first-input"></lu-text-input>
-				</lu-form-field>
-			</lu-dialog-content>
-
-			<lu-dialog-footer>
-				<div class="footer-content">Optional footer text</div>
-				<div class="footer-actions">
-					<button type="submit" luButton [disabled]="!form.valid" luDialogClose>Submit</button>
-					<button type="button" luButton="text" luDialogDismiss>Cancel</button>
-				</div>
-			</lu-dialog-footer>
-		</form>
-	</lu-dialog>
-```
+  <!--form = new FormGroup({
+    example: new FormControl('', Validators.required)
+  })-->
+  <form [formControl]="form" class="dialog-formOptionnal">
+    <lu-dialog-header>Header with Form inside</lu-dialog-header>
+
+    <lu-dialog-content>
+      <lu-form-field label="Example input">
+        <lu-text-input formControlName="example" placeholder="This will be focused if autoFocus is set to first-input"></lu-text-input>
+      </lu-form-field>
+    </lu-dialog-content>
+
+    <lu-dialog-footer>
+      <div class="footer-content">Optional footer text</div>
+      <div class="footer-actions">
+        <button type="submit" luButton [disabled]="!form.valid" luDialogClose>Submit</button>
+        <button type="button" luButton="text" luDialogDismiss>Cancel</button>
+      </div>
+    </lu-dialog-footer>
+  </form>
+</lu-dialog>
+```

docs/popover2.md

@@ -0,0 +1,63 @@
+# Popover2
+
+Popover2 est la nouvelle version de LuPopover, il a été choisi de partir sur une implémentation différente et donc, afin d'éviter les impacts d'un breaking change,
+une nouvelle directive a vu le jour `luPopover2`, dans un nouveau point d'entrée, `@lucca-front/ng/popover2`.
+
+## Mise en place
+
+Popover2 est fait pour être simple à utiliser, il suffit de l'importer dans votre environement avec `configureLuPopover()` (à placer dans les providers de votre `AppModule` ou lors du bootstrap de `AppComponent` si vous êtes en full standalone).
+
+## Utilisation
+
+Pour utiliser `Popover2` dans un template, il suffit d'appliquer la directive `[luPopover2]` en renseignant en input une référence à un `ng-template`, exemple:
+
+```angular2html
+
+<button luButton [luPopover2]="popoverTpl"></button>
+<ng-template #popoverTpl>
+  Je suis le contenu du popover !
+  <button luButton>Et je suis un bouton accessible au clavier !</button>
+</ng-template>
+```
+
+## Paramètres et position
+
+Seule la référence au `ng-template` est obligatoire, mais la directive propose des paramètres pour divers usages:
+
+- `luPopoverPosition` par défaut à `above`, permet de régler la position voulue du popover, en cas d'espace manquant dans le rendu, le composant tentera de se positionner d'abord à l'opposé de la position demandée, puis les deux autres à tour de rôle.
+- `luPopoverDisabled` permet de désactiver totalement le popover.
+- `customPositions` à utiliser avec précaution, permet de renseigner des `ConnectionPositionPair` pour totalement remplacer la logique de positionnement, très utile pour les menus qui doivent être `below` mais alignés sur un côté plutôt que l'autre.
+
+Les positions custom doivent être déclarées dans le `component.ts` sous forme d'un tableau et passés dans le template en input, exemple pour un menu qui s'ouvre en dessous à gauche (ou au dessus à gauche si pas de place):
+
+component.ts:
+
+```typescript
+import { ConnectionPositionPair } from "@angular/cdk/overlay";
+
+export class ExampleComponent {
+  protected positions: ConnectionPositionPair[] = [
+    // En dessous, aligné à gauche
+    new ConnectionPositionPair(
+      { originX: "left", originY: "bottom" },
+      { overlayX: "left", overlayY: "top" }
+    ),
+    // Au dessus, aligné à gauche
+    new ConnectionPositionPair(
+      { originX: "left", originY: "top" },
+      { overlayX: "left", overlayY: "bottom" }
+    )
+  ]
+}
+```
+
+component.html:
+
+```angular2html
+
+<button luButton [luPopover2]="popoverTpl" [customPositions]="positions"></button>
+<ng-template #popoverTpl>
+  Je suis le contenu du popover !
+  <button luButton>Et je suis un bouton accessible au clavier !</button>
+</ng-template>
+```