@lucca-front/ng 19.3.0-rc.3 → 19.3.0-rc.4

package/src/components/_popup.scss

@@ -38,6 +38,41 @@
 	&.mod-XL {
 		inline-size: var(--components-popup-XL);
 	}
+
+	&.mod-commInApp {
+		inline-size: 30rem;
+
+		.lu-modal-content {
+			text-align: center;
+
+			&::after {
+				content: none;
+			}
+		}
+
+		.lu-modal-content-title {
+			color: var(--palettes-neutral-800);
+			font-size: var(--sizes-XL-fontSize);
+			margin-block-start: 2.5rem;
+		}
+
+		.button {
+			margin-block-end: 2.5rem;
+		}
+
+		.modal-visual {
+			margin-block: 4.5rem 0;
+			margin-inline: calc(var(--pr-t-spacings-400) * -1);
+		}
+
+		.modal-visual-illustration {
+			vertical-align: bottom;
+		}
+
+		.lu-modal-footer {
+			display: none;
+		}
+	}
 }
 
 .lu-modal-panel-inner {
@@ -64,6 +99,7 @@
 
 .lu-modal-header-title {
 	@include title.h2;
+
 	margin: 0;
 	padding: 0;
 }
@@ -83,7 +119,7 @@
 	&.mod-noPadding {
 		padding: 0;
 
-		&:after {
+		&::after {
 			padding-block-end: 0;
 		}
 	}
@@ -122,40 +158,6 @@
 	}
 }
 
-.lu-popup-panel {
-	&.mod-commInApp {
-		inline-size: 30rem;
-
-		.lu-modal-content {
-			text-align: center;
-
-			&::after {
-				content: none;
-			}
-		}
-		.lu-modal-content-title {
-			color: var(--palettes-neutral-800);
-			font-size: var(--sizes-XL-fontSize);
-			margin-block-start: 2.5rem;
-		}
-		.button {
-			margin-block-end: 2.5rem;
-		}
-		.modal-visual {
-			margin-block: 4.5rem 0;
-			margin-inline: calc(var(--pr-t-spacings-400) * -1);
-		}
-
-		.modal-visual-illustration {
-			vertical-align: bottom;
-		}
-
-		.lu-modal-footer {
-			display: none;
-		}
-	}
-}
-
 @keyframes popup {
 	0% {
 		transform: scale(0.7);

package/src/components/cdk/_dragDrop.scss

@@ -3,6 +3,7 @@
 .cdk-drag-placeholder {
 	box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));
 	background-color: var(--palettes-neutral-100);
+
 	* {
 		opacity: 0;
 	}
@@ -23,20 +24,24 @@
 
 .dragDrop-item {
 	cursor: grab;
+
 	&:not(.cdk-drag-placeholder) {
 		&:first-of-type {
 			border-start-start-radius: var(--commons-borderRadius-M);
 			border-start-end-radius: var(--commons-borderRadius-M);
 		}
+
 		&:last-of-type {
 			border-end-start-radius: var(--commons-borderRadius-M);
 			border-end-end-radius: var(--commons-borderRadius-M);
 		}
 	}
+
 	&:active {
 		cursor: grabbing;
 	}
 }
+
 .dragDrop-item-content {
 	padding: var(--pr-t-spacings-100);
 }
@@ -54,6 +59,7 @@
 	.dragDrop-item {
 		cursor: grabbing;
 	}
+
 	.cdk-drag:not(.cdk-drag-placeholder) {
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}

package/src/components/cdk/_overlay.scss

@@ -34,6 +34,11 @@
 	> * {
 		flex-grow: 1;
 	}
+
+	&.mod-optionPicker {
+		min-inline-size: 13rem;
+		max-inline-size: 30rem;
+	}
 }
 
 .cdk-overlay-backdrop {
@@ -51,6 +56,7 @@
 	&.cdk-overlay-dark-backdrop {
 		background-color: color.transparentize(var(--palettes-neutral-900), 0.6);
 	}
+
 	&.cdk-overlay-transparent-backdrop {
 		background: 0 0;
 	}
@@ -61,15 +67,3 @@
 
 	@include keyframe.fadeIn;
 }
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.cdk-overlay-pane {
-	// Option picker
-
-	&.mod-optionPicker {
-		min-inline-size: 13rem;
-		max-inline-size: 30rem;
-	}
-}

package/src/definitions/option/_option-item.scss

@@ -36,7 +36,7 @@
 		&.is-selected {
 			background-color: var(--palettes-product-50);
 
-			&:before {
+			&::before {
 				content: '';
 				position: absolute;
 				inset-block: 0;
@@ -161,6 +161,7 @@
 
 				&.is-selected {
 					--components-options-checkbox-color: var(--commons-disabled-background);
+
 					background-color: transparent;
 
 					&::after {
@@ -180,9 +181,7 @@
 			.optionItem-value {
 				position: relative;
 				padding-inline-start: calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2);
-			}
 
-			.optionItem-value {
 				&::before,
 				&::after {
 					inset-inline-start: var(--pr-t-spacings-100);

package/src/definitions/select/_select-input.scss

@@ -239,6 +239,7 @@
 				color: var(--palettes-neutral-400);
 			}
 		}
+
 		// Error
 		:host-context(.textfield-input.is-error) {
 			&::after {

package/src/definitions/user/user-picture.scss

@@ -102,6 +102,7 @@
 
 			&::before {
 				@include icon.generate('people_person');
+
 				color: var(--palettes-neutral-600);
 				font-weight: 400;
 				font-size: var(--components-user-picture-placeholder, var(--components-userPicture-M-placeholder));

package/title/README.md

@@ -6,20 +6,20 @@ Add `title` properties in your routes config:
 
 ```typescript
 const routes: Routes = [
-	{
-		path: '',
-		data: {
-			title: 'Parent title',
-		},
-		children: [
-			{
-				path: ':requestId',
-				data: {
-					title: 'Sub route title',
-				},
-			},
-		],
-	},
+  {
+    path: '',
+    data: {
+      title: 'Parent title',
+    },
+    children: [
+      {
+        path: ':requestId',
+        data: {
+          title: 'Sub route title',
+        },
+      },
+    ],
+  },
 ];
 ```
 
@@ -27,26 +27,26 @@ The service should now be able to collect all `title` properties defined for the
 
 ex: `Sub route title - Parent title - YourAppName - Lucca`
 
-For dynamic titles, the `prependTitle` method from `LuTitleService` enables you to add a custom title.
+For dynamic titles, the `prependTitle` method from `LuTitleStrategy` enables you to add a custom title.
 In a component, you could do the following:
 
 ```typescript
 const userName: string = this.userService.getCurrentUser();
-this.luTitleService.prependTitle(userName);
+this.luTitleStrategy.prependTitle(userName);
 ```
 
 You can also replace the first fragment using:
 
 ```typescript
 const userName: string = this.userService.getOtherUser();
-this.luTitleService.overrideFirstTitlePart(userName);
+this.luTitleStrategy.overrideFirstTitlePart(userName);
 ```
 
 Both `prependTitle` and `overrideFirstTitlePart` can also be called using `Observable<string>` :
 
 ```typescript
 const selectedUser$ = this.userStore.selected$;
-this.luTitleService.prependTitle(selectedUser$);
+this.luTitleStrategy.prependTitle(selectedUser$);
 ```
 
 ## Quickstart
@@ -55,8 +55,14 @@ You will need to:
 
 - Install `@lucca-front/ng`
 - Create a service (`YourAppNameTranslateService`) that implements the `ILuTitleTranslateService`
-- Provide this service in the `app.module.ts` and import `LuTitleModule`
-- Init the `LuTitleService` in your `app.component.ts`
+- Call `provideLuTitleStrategy` in your `app.module.ts` / `app.config.ts`
+
+```ts
+provideLuTitleStrategy({
+  appName: () => 'YourAppName',
+  translateService: () => inject(YourAppNameTranslateService),
+}),
+```
 
 ### Let's start by creating the service
 
@@ -69,10 +75,10 @@ You should end up with the following if you are using `ngx-translate`:
 ```typescript
 @Injectable({ providedIn: 'root' })
 export class CoreRhTranslateService implements ILuTitleTranslateService {
-	constructor(private translateService: TranslateService) {}
-	translate(key: string, args: unknown): string {
-		return this.translateService.instant(key, args);
-	}
+  constructor(private translateService: TranslateService) {}
+  translate(key: string, args: unknown): string {
+    return this.translateService.instant(key, args);
+  }
 }
 ```
 
@@ -81,34 +87,22 @@ or if you are using `transloco`:
 ```typescript
 @Injectable({ providedIn: 'root' })
 export class CoreRhTranslateService implements ILuTitleTranslateService {
-	constructor(private translateService: TranslocoService) {}
-	translate(key: string, args: HashMap): string {
-		return this.translateService.translate(key, args);
-	}
+  constructor(private translateService: TranslocoService) {}
+  translate(key: string, args: HashMap): string {
+    return this.translateService.translate(key, args);
+  }
 }
 ```
 
 ### Adapt `app.module.ts` config
 
-Import the `LuTitleModule` and provide the service you just created to the token `LU_TITLE_TRANSLATE_SERVICE` in the `app.module.ts` :
+In the `app.module.ts`, you need to call `provideLuTitleStrategy` in the `providers` array:
 
 ```typescript
 @NgModule({
- imports: [
-  LuTitleModule
- ],
- provide: [
-  {
-   provide: LU_TITLE_TRANSLATE_SERVICE,
-   useExisting: YourAppNameTranslateService
-  }
- ]
-```
-
-### Init the `LuTitleService`
-
-In the the `app.component.ts`, init the LuTitleService by passing the name of you app:
-
-```typescript
-this.luTitleService.init('**YourAppName**');
+  providers: [
+    provideLuTitleStrategy({ translateService: () => inject(YourAppNameTranslateService) }),
+  ]
+})
+export class AppModule {}
 ```

package/title/title-translate.service.d.ts

@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
 export declare const LU_TITLE_TRANSLATE_SERVICE: InjectionToken<ILuTitleTranslateService>;
 export interface ILuTitleTranslateService {
-    translate(key: string, args?: Record<string, unknown>): string;
+    translate(key: string, args?: Record<string, unknown>): string | Observable<string>;
 }

package/title/title.strategy.d.ts

@@ -1,22 +1,30 @@
-import { InjectionToken } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { InjectionToken, Provider } from '@angular/core';
 import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
-import { ObservableInput } from 'rxjs';
+import { Observable, ObservableInput } from 'rxjs';
 import { ILuTitleTranslateService } from './title-translate.service';
 import * as i0 from "@angular/core";
-export declare const APP_TITLE: InjectionToken<unknown>;
+export declare const ɵAPP_TITLE: InjectionToken<string | Observable<string>>;
+/**
+ * @deprecated Use `provideLuTitleStrategy` instead.
+ */
+export declare const APP_TITLE: InjectionToken<string | Observable<string>>;
 export declare class LuTitleStrategy extends TitleStrategy {
     #private;
     private title;
     private translateService;
     private appTitle;
     private titlePartsSubject;
-    titleParts$: import("rxjs").Observable<(string | ObservableInput<string>)[]>;
-    title$: import("rxjs").Observable<string>;
-    constructor(title: Title, translateService: ILuTitleTranslateService, appTitle: string);
+    titleParts$: Observable<(string | ObservableInput<string>)[]>;
+    title$: Observable<string>;
+    constructor();
     updateTitle(routerState: RouterStateSnapshot): void;
     prependTitle(title: string | ObservableInput<string>): void;
     overrideFirstTitlePart(title: string | ObservableInput<string>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuTitleStrategy, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<LuTitleStrategy>;
 }
+export interface LuTitleStrategyOptions {
+    appTitle?: () => string | Observable<string>;
+    translateService?: () => ILuTitleTranslateService;
+}
+export declare function provideLuTitleStrategy(options: LuTitleStrategyOptions): Provider[];