@lucca-front/ng 16.4.2 → 16.4.3

package/src/definitions/tooltip/_tooltip.scss

@@ -1,36 +1,36 @@
-@mixin tooltipStyle {
-	.lu-tooltip-panel {
-		--components-tooltip-background-color: var(--palettes-grey-900);
-		--components-tooltip-color: var(--colors-white-color);
-		--components-tooltip-max-width: 15rem;
-
-		background: var(--components-tooltip-background-color);
-		color: var(--components-tooltip-color);
-		padding: var(--spacings-XXS) var(--spacings-XS);
-		max-width: var(--components-tooltip-max-width);
-		border-radius: var(--commons-borderRadius-M);
-		font-size: var(--sizes-XS-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-		display: block;
-		text-align: center;
-
-		&.is-above {
-			transform-origin: bottom center;
-		}
-
-		&.is-below {
-			transform-origin: top center;
-			margin-top: 2px;
-		}
-
-		&.is-before {
-			transform-origin: center right;
-			margin-right: 5px;
-		}
-
-		&.is-after {
-			transform-origin: center left;
-			margin-left: 5px;
-		}
-	}
-}
+@mixin tooltipStyle {
+	.lu-tooltip-panel {
+		--components-tooltip-background-color: var(--palettes-grey-900);
+		--components-tooltip-color: var(--colors-white-color);
+		--components-tooltip-max-width: 15rem;
+
+		background: var(--components-tooltip-background-color);
+		color: var(--components-tooltip-color);
+		padding: var(--spacings-XXS) var(--spacings-XS);
+		max-width: var(--components-tooltip-max-width);
+		border-radius: var(--commons-borderRadius-M);
+		font-size: var(--sizes-XS-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+		display: block;
+		text-align: center;
+
+		&.is-above {
+			transform-origin: bottom center;
+		}
+
+		&.is-below {
+			transform-origin: top center;
+			margin-top: 2px;
+		}
+
+		&.is-before {
+			transform-origin: center right;
+			margin-right: 5px;
+		}
+
+		&.is-after {
+			transform-origin: center left;
+			margin-left: 5px;
+		}
+	}
+}

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

@@ -1,100 +1,100 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin userPictureVars {
-	--components-userPicture-XS-image: 1.5rem;
-	--components-userPicture-XS-fontSize: var(--sizes-XS-fontSize);
-	--components-userPicture-XS-placeholder: 0.75rem;
-	--components-userPicture-S-image: 2rem;
-	--components-userPicture-S-fontSize: var(--sizes-S-fontSize);
-	--components-userPicture-S-placeholder: var(--sizes-XS-lineHeight);
-	--components-userPicture-M-image: 2.5rem;
-	--components-userPicture-M-fontSize: var(--sizes-M-fontSize);
-	--components-userPicture-M-placeholder: var(--sizes-S-lineHeight);
-	--components-userPicture-L-image: 3rem;
-	--components-userPicture-L-fontSize: var(--sizes-L-fontSize);
-	--components-userPicture-L-placeholder: var(--sizes-M-lineHeight);
-
-	// deprecated
-	--components-userPicture-XXS-image: 1rem;
-	--components-userPicture-XXS-fontSize: 0.5625rem;
-	--components-userPicture-XL-image: 4.5rem;
-	--components-userPicture-XL-fontSize: 1.8rem;
-	--components-userPicture-XXL-image: 7.5rem;
-	--components-userPicture-XXL-fontSize: 3rem;
-}
-
-@mixin userPictureStyle {
-	display: inline-block;
-	vertical-align: middle;
-
-	.picture {
-		align-items: center;
-		aspect-ratio: 1;
-		border-radius: 50%;
-		background-color: var(--palettes-grey-50);
-		background-position: center;
-		background-size: cover;
-		background-repeat: no-repeat;
-		color: var(--colors-white-color);
-		display: flex;
-		font-size: var(--components-user-picture-font-size, var(--components-userPicture-M-fontSize));
-		font-weight: 600;
-		line-height: 1;
-		justify-content: center;
-		width: var(--components-user-picture-image-size, var(--components-userPicture-M-image));
-	}
-
-	&.mod-XXS {
-		--components-user-picture-image-size: var(--components-userPicture-XXS-image);
-		--components-user-picture-font-size: var(--components-userPicture-XXS-fontSize);
-	}
-
-	&.mod-XS {
-		--components-user-picture-image-size: var(--components-userPicture-XS-image);
-		--components-user-picture-font-size: var(--components-userPicture-XS-fontSize);
-		--components-user-picture-placeholder: var(--components-userPicture-XS-placeholder);
-	}
-
-	&.mod-S {
-		--components-user-picture-image-size: var(--components-userPicture-S-image);
-		--components-user-picture-font-size: var(--components-userPicture-S-fontSize);
-		--components-user-picture-placeholder: var(--components-userPicture-S-placeholder);
-	}
-
-	&.mod-L {
-		--components-user-picture-image-size: var(--components-userPicture-L-image);
-		--components-user-picture-font-size: var(--components-userPicture-L-fontSize);
-		--components-user-picture-placeholder: var(--components-userPicture-L-placeholder);
-	}
-
-	&.mod-XL {
-		--components-user-picture-image-size: var(--components-userPicture-XL-image);
-		--components-user-picture-font-size: var(--components-userPicture-XL-fontSize);
-	}
-
-	&.mod-XXL {
-		--components-user-picture-image-size: var(--components-userPicture-XXL-image);
-		--components-user-picture-font-size: var(--components-userPicture-XXL-fontSize);
-	}
-
-	&.mod-border {
-		box-shadow: 0 0 0 2px var(--colors-white-color);
-	}
-
-	&.mod-placeholder {
-		.picture {
-			background: var(--palettes-grey-200) !important;
-
-			&::before {
-				@include icon.generate('people_person');
-				color: var(--palettes-grey-600);
-				font-weight: 400;
-				font-size: var(--components-user-picture-placeholder, var(--components-userPicture-M-placeholder));
-			}
-		}
-
-		.userPicture-initials {
-			display: none;
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@mixin userPictureVars {
+	--components-userPicture-XS-image: 1.5rem;
+	--components-userPicture-XS-fontSize: var(--sizes-XS-fontSize);
+	--components-userPicture-XS-placeholder: 0.75rem;
+	--components-userPicture-S-image: 2rem;
+	--components-userPicture-S-fontSize: var(--sizes-S-fontSize);
+	--components-userPicture-S-placeholder: var(--sizes-XS-lineHeight);
+	--components-userPicture-M-image: 2.5rem;
+	--components-userPicture-M-fontSize: var(--sizes-M-fontSize);
+	--components-userPicture-M-placeholder: var(--sizes-S-lineHeight);
+	--components-userPicture-L-image: 3rem;
+	--components-userPicture-L-fontSize: var(--sizes-L-fontSize);
+	--components-userPicture-L-placeholder: var(--sizes-M-lineHeight);
+
+	// deprecated
+	--components-userPicture-XXS-image: 1rem;
+	--components-userPicture-XXS-fontSize: 0.5625rem;
+	--components-userPicture-XL-image: 4.5rem;
+	--components-userPicture-XL-fontSize: 1.8rem;
+	--components-userPicture-XXL-image: 7.5rem;
+	--components-userPicture-XXL-fontSize: 3rem;
+}
+
+@mixin userPictureStyle {
+	display: inline-block;
+	vertical-align: middle;
+
+	.picture {
+		align-items: center;
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background-color: var(--palettes-grey-50);
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+		color: var(--colors-white-color);
+		display: flex;
+		font-size: var(--components-user-picture-font-size, var(--components-userPicture-M-fontSize));
+		font-weight: 600;
+		line-height: 1;
+		justify-content: center;
+		width: var(--components-user-picture-image-size, var(--components-userPicture-M-image));
+	}
+
+	&.mod-XXS {
+		--components-user-picture-image-size: var(--components-userPicture-XXS-image);
+		--components-user-picture-font-size: var(--components-userPicture-XXS-fontSize);
+	}
+
+	&.mod-XS {
+		--components-user-picture-image-size: var(--components-userPicture-XS-image);
+		--components-user-picture-font-size: var(--components-userPicture-XS-fontSize);
+		--components-user-picture-placeholder: var(--components-userPicture-XS-placeholder);
+	}
+
+	&.mod-S {
+		--components-user-picture-image-size: var(--components-userPicture-S-image);
+		--components-user-picture-font-size: var(--components-userPicture-S-fontSize);
+		--components-user-picture-placeholder: var(--components-userPicture-S-placeholder);
+	}
+
+	&.mod-L {
+		--components-user-picture-image-size: var(--components-userPicture-L-image);
+		--components-user-picture-font-size: var(--components-userPicture-L-fontSize);
+		--components-user-picture-placeholder: var(--components-userPicture-L-placeholder);
+	}
+
+	&.mod-XL {
+		--components-user-picture-image-size: var(--components-userPicture-XL-image);
+		--components-user-picture-font-size: var(--components-userPicture-XL-fontSize);
+	}
+
+	&.mod-XXL {
+		--components-user-picture-image-size: var(--components-userPicture-XXL-image);
+		--components-user-picture-font-size: var(--components-userPicture-XXL-fontSize);
+	}
+
+	&.mod-border {
+		box-shadow: 0 0 0 2px var(--colors-white-color);
+	}
+
+	&.mod-placeholder {
+		.picture {
+			background: var(--palettes-grey-200) !important;
+
+			&::before {
+				@include icon.generate('people_person');
+				color: var(--palettes-grey-600);
+				font-weight: 400;
+				font-size: var(--components-user-picture-placeholder, var(--components-userPicture-M-placeholder));
+			}
+		}
+
+		.userPicture-initials {
+			display: none;
+		}
+	}
+}

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

@@ -1,82 +1,82 @@
-@mixin userTileStyle {
-	display: flex;
-	align-items: center;
-	padding: var(--spacings-XS);
-	gap: var(--spacings-XS);
-
-	.user-tile-title {
-		font-size: var(--sizes-M-fontSize);
-		line-height: var(--sizes-M-lineHeight);
-		font-weight: 600;
-		margin: 0;
-	}
-
-	.user-tile-label {
-    font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-    color: var(--palettes-grey-600);
-	}
-
-	.user-tile-footnote {
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-	}
-
-	.user-info {
-		margin: auto 0;
-	}
-
-	&.mod-wordBreak {
-		word-break: break-all;
-	}
-
-	&.mod-nameOnly {
-		.user-tile-label,
-		.user-tile-footnote {
-			display: none;
-		}
-	}
-
-	&.mod-vertical {
-		flex-direction: column;
-
-		lu-user-picture {
-			margin-right: 0;
-			margin-bottom: 0.8em;
-		}
-
-		.user-info {
-			text-align: center;
-		}
-	}
-
-  &.mod-XXS {
-		--components-user-picture-image-size: var(--components-userPicture-XXS-image);
-		--components-user-picture-font-size: var(--components-userPicture-XXS-fontSize);
-  }
-
-  &.mod-XS {
-		--components-user-picture-image-size: var(--components-userPicture-XS-image);
-		--components-user-picture-font-size: var(--components-userPicture-XS-fontSize);
-  }
-
-  &.mod-S {
-		--components-user-picture-image-size: var(--components-userPicture-S-image);
-		--components-user-picture-font-size: var(--components-userPicture-S-fontSize);
-  }
-
-  &.mod-L {
-		--components-user-picture-image-size: var(--components-userPicture-L-image);
-		--components-user-picture-font-size: var(--components-userPicture-L-fontSize);
-  }
-
-  &.mod-XL {
-		--components-user-picture-image-size: var(--components-userPicture-XL-image);
-		--components-user-picture-font-size: var(--components-userPicture-XL-fontSize);
-  }
-
-  &.mod-XXL {
-		--components-user-picture-image-size: var(--components-userPicture-XXL-image);
-		--components-user-picture-font-size: var(--components-userPicture-XXL-fontSize);
-  }
-}
+@mixin userTileStyle {
+	display: flex;
+	align-items: center;
+	padding: var(--spacings-XS);
+	gap: var(--spacings-XS);
+
+	.user-tile-title {
+		font-size: var(--sizes-M-fontSize);
+		line-height: var(--sizes-M-lineHeight);
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.user-tile-label {
+    font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+    color: var(--palettes-grey-600);
+	}
+
+	.user-tile-footnote {
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+	}
+
+	.user-info {
+		margin: auto 0;
+	}
+
+	&.mod-wordBreak {
+		word-break: break-all;
+	}
+
+	&.mod-nameOnly {
+		.user-tile-label,
+		.user-tile-footnote {
+			display: none;
+		}
+	}
+
+	&.mod-vertical {
+		flex-direction: column;
+
+		lu-user-picture {
+			margin-right: 0;
+			margin-bottom: 0.8em;
+		}
+
+		.user-info {
+			text-align: center;
+		}
+	}
+
+  &.mod-XXS {
+		--components-user-picture-image-size: var(--components-userPicture-XXS-image);
+		--components-user-picture-font-size: var(--components-userPicture-XXS-fontSize);
+  }
+
+  &.mod-XS {
+		--components-user-picture-image-size: var(--components-userPicture-XS-image);
+		--components-user-picture-font-size: var(--components-userPicture-XS-fontSize);
+  }
+
+  &.mod-S {
+		--components-user-picture-image-size: var(--components-userPicture-S-image);
+		--components-user-picture-font-size: var(--components-userPicture-S-fontSize);
+  }
+
+  &.mod-L {
+		--components-user-picture-image-size: var(--components-userPicture-L-image);
+		--components-user-picture-font-size: var(--components-userPicture-L-fontSize);
+  }
+
+  &.mod-XL {
+		--components-user-picture-image-size: var(--components-userPicture-XL-image);
+		--components-user-picture-font-size: var(--components-userPicture-XL-fontSize);
+  }
+
+  &.mod-XXL {
+		--components-user-picture-image-size: var(--components-userPicture-XXL-image);
+		--components-user-picture-font-size: var(--components-userPicture-XXL-fontSize);
+  }
+}

package/src/main.scss

@@ -1,2 +1,2 @@
-@import 'definitions';
-@import 'components';
+@import 'definitions';
+@import 'components';

package/title/README.md

@@ -1,114 +1,114 @@
-# Page titles
-
-## Usage
-
-Add `title` properties in your routes config:
-
-```typescript
-const routes: Routes = [
-	{
-		path: '',
-		data: {
-			title: 'Parent title',
-		},
-		children: [
-			{
-				path: ':requestId',
-				data: {
-					title: 'Sub route title',
-				},
-			},
-		],
-	},
-];
-```
-
-The service should now be able to collect all `title` properties defined for the current url. Each time a new `title` is found for a child, it will be translated and prepended, ending with `YourAppName - Lucca`.
-
-ex: `Sub route title - Parent title - YourAppName - Lucca`
-
-For dynamic titles, the `prependTitle` method from `LuTitleService` 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);
-```
-
-You can also replace the first fragment using:
-
-```typescript
-const userName: string = this.userService.getOtherUser();
-this.luTitleService.overrideFirstTitlePart(userName);
-```
-
-Both `prependTitle` and `overrideFirstTitlePart` can also be called using `Observable<string>` :
-
-```typescript
-const selectedUser$ = this.userStore.selected$;
-this.luTitleService.prependTitle(selectedUser$);
-```
-
-## Quickstart
-
-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`
-
-### Let's start by creating the service
-
-`YourAppNameTranslateService` be used in combination with the token `LU_TITLE_TRANSLATE_SERVICE`.
-
-This service should implement the `ILuTitleTranslateService` interface. It allows you to use any translation service (`ngx-translate`, `transloco`, ...etc).
-
-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);
-	}
-}
-```
-
-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);
-	}
-}
-```
-
-### 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` :
-
-```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**');
-```
+# Page titles
+
+## Usage
+
+Add `title` properties in your routes config:
+
+```typescript
+const routes: Routes = [
+	{
+		path: '',
+		data: {
+			title: 'Parent title',
+		},
+		children: [
+			{
+				path: ':requestId',
+				data: {
+					title: 'Sub route title',
+				},
+			},
+		],
+	},
+];
+```
+
+The service should now be able to collect all `title` properties defined for the current url. Each time a new `title` is found for a child, it will be translated and prepended, ending with `YourAppName - Lucca`.
+
+ex: `Sub route title - Parent title - YourAppName - Lucca`
+
+For dynamic titles, the `prependTitle` method from `LuTitleService` 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);
+```
+
+You can also replace the first fragment using:
+
+```typescript
+const userName: string = this.userService.getOtherUser();
+this.luTitleService.overrideFirstTitlePart(userName);
+```
+
+Both `prependTitle` and `overrideFirstTitlePart` can also be called using `Observable<string>` :
+
+```typescript
+const selectedUser$ = this.userStore.selected$;
+this.luTitleService.prependTitle(selectedUser$);
+```
+
+## Quickstart
+
+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`
+
+### Let's start by creating the service
+
+`YourAppNameTranslateService` be used in combination with the token `LU_TITLE_TRANSLATE_SERVICE`.
+
+This service should implement the `ILuTitleTranslateService` interface. It allows you to use any translation service (`ngx-translate`, `transloco`, ...etc).
+
+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);
+	}
+}
+```
+
+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);
+	}
+}
+```
+
+### 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` :
+
+```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**');
+```