From 8b34653c40deae9c089b62843d229acf51405f30 Mon Sep 17 00:00:00 2001
From: Serge <dasilvasoa@gmail.com>
Date: Tue, 23 Jul 2024 12:17:46 +0200
Subject: [PATCH] chore(ngx-core): use ngx- selectors chore(ngx-message-box):
 use ngx- selectors chore(ngx-message-box-dialog): use ngx- selectors
 chore(ngx-layout): use ngx- selectors chore(ngx-list-loader): use ngx-
 selectors chore(ngx-numeric-stepper): use ngx- selectors chore(ngx-overlay):
 use ngx- selectors chore(ngx-search-container): use ngx- selectors
 chore(ngx-sidenav): use ngx- selectors chore(ngx-snackbar): use ngx-
 selectors chore(ngx-splitter): use ngx- selectors chore(ngx-status): use ngx-
 selectors chore(ngx-time-picker): use ngx- selectors chore(ngx-tooltip): use
 ngx- selectors chore(ngx-user-card): use ngx- selectors
 chore(ngx-user-tooltip): use ngx- selectors

---
 projects/core/src/cache.ts                    |  6 +-
 projects/core/src/custom-array.module.ts      |  2 +-
 projects/core/src/directives/destroy.ts       |  2 +-
 .../directives/input-autosize.directive.ts    |  8 +-
 .../src/directives/single-click.directive.ts  |  6 +-
 projects/core/src/services/dialog.service.ts  |  4 +-
 .../core/src/services/lazy-loader.service.ts  |  2 +-
 projects/core/src/services/media.service.ts   | 12 +--
 .../core/src/styles/mixins/_menu-theme.scss   |  2 +-
 projects/core/src/styles/mixins/_menu.scss    |  6 +-
 .../datepicker-buttons.component.html         |  6 +-
 .../datepicker-buttons.component.scss         |  6 +-
 .../datepicker-buttons.component.ts           | 10 +--
 .../datepicker-mask-validator.service.ts      |  2 +-
 .../datepicker-mask.directive.ts              | 12 +--
 .../datepicker-with-time.component.html       |  4 +-
 .../datepicker-with-time.component.scss       | 10 +--
 .../datepicker-with-time.component.ts         |  8 +-
 .../message-box-demo.component.html           | 34 ++++-----
 .../message-box-demo.component.scss           |  2 +-
 .../message-box/message-box-demo.component.ts |  4 +-
 .../numeric-stepper-demo.component.html       | 36 ++++-----
 .../numeric-stepper-demo.component.ts         |  6 +-
 .../app/overlay/overlay-demo.component.html   | 46 +++++------
 .../app/overlay/overlay-demo.component.scss   |  4 +-
 .../app/snackbar/snackbar-demo.component.html | 46 +++++------
 .../app/splitter/splitter-demo.component.html | 76 +++++++++----------
 .../app/splitter/splitter-demo.component.scss |  4 +-
 .../time-picker-demo.component.html           | 18 ++---
 .../time-picker-demo.component.scss           |  4 +-
 projects/layout/src/_layout-theme.scss        |  4 +-
 projects/layout/src/layout.component.scss     |  2 +-
 projects/layout/src/layout.component.ts       |  8 +-
 .../list-loader/src/_list-loader-theme.scss   |  2 +-
 .../src/list-loader.component.scss            |  2 +-
 .../list-loader/src/list-loader.component.ts  |  2 +-
 .../src/_message-box-dialog-theme.scss        |  4 +-
 .../src/message-box-dialog.component.scss     |  2 +-
 .../src/message-box-dialog.component.ts       |  2 +-
 .../src/message-box-dialog.service.ts         |  4 +-
 .../message-box/src/_message-box-theme.scss   |  2 +-
 .../src/message-box.component.scss            |  2 +-
 .../message-box/src/message-box.component.ts  |  2 +-
 .../src/_numeric-stepper-theme.scss           |  8 +-
 .../src/numeric-stepper.component.scss        | 20 ++---
 .../src/numeric-stepper.component.ts          | 16 ++--
 projects/overlay/src/overlay.component.ts     |  6 +-
 .../src/_search-container-theme.scss          |  8 +-
 .../src/search-container.component.html       |  4 +-
 .../src/search-container.component.scss       |  6 +-
 .../src/search-container.component.ts         | 12 +--
 projects/sidenav/src/sidenav.service.ts       |  4 +-
 projects/snackbar/src/snackbar.component.ts   |  8 +-
 projects/splitter/src/_splitter-theme.scss    |  4 +-
 projects/splitter/src/split-area.directive.ts |  2 +-
 projects/splitter/src/splitter.component.html |  2 +-
 projects/splitter/src/splitter.component.scss | 14 ++--
 projects/splitter/src/splitter.component.ts   |  6 +-
 projects/status/src/_status-theme.scss        | 14 ++--
 .../status-detail-dialog.service.ts           |  6 +-
 .../status-detail.component.html              |  4 +-
 .../status-detail.component.scss              |  6 +-
 .../status-detail/status-detail.component.ts  |  2 +-
 projects/status/src/status.component.html     |  4 +-
 projects/status/src/status.component.scss     |  4 +-
 projects/status/src/status.component.ts       |  8 +-
 projects/status/src/status.service.ts         |  6 +-
 .../src/time-picker.component.html            |  4 +-
 .../src/time-picker.component.scss            |  4 +-
 .../time-picker/src/time-picker.component.ts  |  6 +-
 projects/tooltip/src/tooltip.directive.ts     | 20 ++---
 projects/tooltip/src/tooltip.service.ts       | 14 ++--
 projects/user-card/src/_user-card-theme.scss  |  2 +-
 .../user-card/src/user-card.component.html    |  6 +-
 .../user-card/src/user-card.component.scss    |  6 +-
 projects/user-card/src/user-card.component.ts |  2 +-
 .../src/user-tooltip.component.html           |  2 +-
 .../src/user-tooltip.component.ts             |  2 +-
 .../user-tooltip/src/user-tooltip.service.ts  |  4 +-
 79 files changed, 336 insertions(+), 336 deletions(-)

diff --git a/projects/core/src/cache.ts b/projects/core/src/cache.ts
index 132b093c..b3328d16 100644
--- a/projects/core/src/cache.ts
+++ b/projects/core/src/cache.ts
@@ -1,11 +1,11 @@
 import { catchError, Observable, throwError } from 'rxjs';
 
-export interface CacheEntry<T> {
+export interface NgxCacheEntry<T> {
     timeStamp: number;
     data$: T;
 }
 
-export class Cache<T, K = string> extends Map<K, CacheEntry<T>> {
+export class NgxCache<T, K = string> extends Map<K, NgxCacheEntry<T>> {
     public constructor(public duty = 86400000) {
         super();
     }
@@ -44,7 +44,7 @@ export class Cache<T, K = string> extends Map<K, CacheEntry<T>> {
     }
 }
 
-export class ObservableCache<T, K = string> extends Cache<Observable<T>, K> {
+export class NgxObservableCache<T, K = string> extends NgxCache<Observable<T>, K> {
     // eslint-disable-next-line rxjs/finnish
     public override getCache(key: K, defaultValueFn?: (timeStamp: number) => Observable<T>): Observable<T> {
         const data$ = super.getCache(key, defaultValueFn);
diff --git a/projects/core/src/custom-array.module.ts b/projects/core/src/custom-array.module.ts
index 16fb71d9..c37f87a6 100644
--- a/projects/core/src/custom-array.module.ts
+++ b/projects/core/src/custom-array.module.ts
@@ -20,7 +20,7 @@ declare global {
 }
 
 @NgModule()
-export class CustomArrayModule {
+export class NgxCustomArrayModule {
     public constructor() {
         (Array.prototype as void[]).filterMap = function <T, U>(this: T[], predicate: (value: T, index: number, _array: T[]) => U | undefined): TruthyTypesOf<U>[] {
             return this.map(predicate).filter(v => v !== undefined);
diff --git a/projects/core/src/directives/destroy.ts b/projects/core/src/directives/destroy.ts
index 6ec29b81..8a4b901e 100644
--- a/projects/core/src/directives/destroy.ts
+++ b/projects/core/src/directives/destroy.ts
@@ -2,7 +2,7 @@ import { Directive, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Directive()
-export class Destroy implements OnDestroy {
+export class NgxDestroy implements OnDestroy {
     protected destroyed$ = new Subject<void>();
 
     public ngOnDestroy(): void {
diff --git a/projects/core/src/directives/input-autosize.directive.ts b/projects/core/src/directives/input-autosize.directive.ts
index 512fad40..e3942cc6 100644
--- a/projects/core/src/directives/input-autosize.directive.ts
+++ b/projects/core/src/directives/input-autosize.directive.ts
@@ -2,14 +2,14 @@ import { Directive, ElementRef, inject, NgZone, OnInit } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 import { debounceTime, fromEvent, mergeWith, of, startWith, takeUntil } from 'rxjs';
 
-import { Destroy } from './destroy';
+import { NgxDestroy } from './destroy';
 
 @Directive({
-    selector: '[inputAutosize][matInput], [inputAutosize] [matInput]',
-    exportAs: 'inputAutosize',
+    selector: '[ngx-input-autosize][matInput], [ngx-input-autosize] [matInput]',
+    exportAs: 'ngx-input-autosize',
     standalone: true
 })
-export class InputAutosizeDirective extends Destroy implements OnInit {
+export class NgxInputAutosizeDirective extends NgxDestroy implements OnInit {
     private elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
     private ngZone = inject(NgZone);
     private matInput = inject(MatInput);
diff --git a/projects/core/src/directives/single-click.directive.ts b/projects/core/src/directives/single-click.directive.ts
index 884f833f..15c23501 100644
--- a/projects/core/src/directives/single-click.directive.ts
+++ b/projects/core/src/directives/single-click.directive.ts
@@ -2,13 +2,13 @@ import { Directive, EventEmitter, HostListener, Input, OnInit, Output } from '@a
 import { ReplaySubject } from 'rxjs';
 import { takeUntil, throttleTime } from 'rxjs/operators';
 
-import { Destroy } from './destroy';
+import { NgxDestroy } from './destroy';
 
 @Directive({
-    selector: '[singleClick]',
+    selector: '[ngx-single-click]',
     standalone: true
 })
-export class SingleClickDirective extends Destroy implements OnInit {
+export class NgxSingleClickDirective extends NgxDestroy implements OnInit {
     @Input()
     public throttleTime = 2000;
 
diff --git a/projects/core/src/services/dialog.service.ts b/projects/core/src/services/dialog.service.ts
index eb140ed2..f7a426c4 100644
--- a/projects/core/src/services/dialog.service.ts
+++ b/projects/core/src/services/dialog.service.ts
@@ -2,7 +2,7 @@ import { Type } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { Observable, ReplaySubject, switchMap, take, throttleTime } from 'rxjs';
 
-import { AbstractLazyModule, LazyLoaderService } from './lazy-loader.service';
+import { AbstractLazyModule, NgxLazyLoaderService } from './lazy-loader.service';
 
 export abstract class DialogService<ReturnType, DataType> {
     protected openDialogSub$ = new ReplaySubject<MatDialogConfig<DataType>>(1);
@@ -10,7 +10,7 @@ export abstract class DialogService<ReturnType, DataType> {
     protected dialogRef!: MatDialogRef<unknown, ReturnType>;
 
     public constructor(
-        private lazyLoaderService: LazyLoaderService,
+        private lazyLoaderService: NgxLazyLoaderService,
         private dialog: MatDialog,
         matDialogConfig?: MatDialogConfig<DataType>
     ) {
diff --git a/projects/core/src/services/lazy-loader.service.ts b/projects/core/src/services/lazy-loader.service.ts
index e76aff34..3b4195a9 100644
--- a/projects/core/src/services/lazy-loader.service.ts
+++ b/projects/core/src/services/lazy-loader.service.ts
@@ -16,7 +16,7 @@ export abstract class AbstractLazyModule<Component> {
 @Injectable({
     providedIn: 'root'
 })
-export class LazyLoaderService {
+export class NgxLazyLoaderService {
     public constructor(
         private injector: Injector
     ) {}
diff --git a/projects/core/src/services/media.service.ts b/projects/core/src/services/media.service.ts
index 60d46345..009f700b 100644
--- a/projects/core/src/services/media.service.ts
+++ b/projects/core/src/services/media.service.ts
@@ -1,13 +1,13 @@
 import { Inject, Injectable, InjectionToken, NgZone, OnDestroy, Optional } from '@angular/core';
 import { BehaviorSubject, distinctUntilChanged, map, Observable, shareReplay } from 'rxjs';
 
-export interface MediaQueryDefinition {
+export interface NgxMediaQueryDefinition {
     alias: string;
     mediaQuery: string;
     overlapping?: boolean;
 }
 
-export const mediaQueryDefinitions = new InjectionToken<MediaQueryDefinition[]>('MEDIA_QUERY_DEFINITIONS');
+export const mediaQueryDefinitions = new InjectionToken<NgxMediaQueryDefinition[]>('MEDIA_QUERY_DEFINITIONS');
 
 export const defaultMediaQueryDefinitions = [
     {
@@ -70,7 +70,7 @@ export const defaultMediaQueryDefinitions = [
         alias: 'xl',
         mediaQuery: '(min-width: 1920px) and (max-width: 5000px)'
     }
-] as MediaQueryDefinition[];
+] as NgxMediaQueryDefinition[];
 
 export const simplifiedMediaQueryDefinitions = [
     {
@@ -86,12 +86,12 @@ export const simplifiedMediaQueryDefinitions = [
         alias: 'lg',
         mediaQuery: '(min-width: 1280px)'
     }
-] as MediaQueryDefinition[];
+] as NgxMediaQueryDefinition[];
 
 @Injectable({
     providedIn: 'root'
 })
-export class MediaService implements OnDestroy {
+export class NgxMediaService implements OnDestroy {
     public readonly isHandset$: Observable<boolean>;
     public readonly isMobile$: Observable<boolean>;
     public mediaChanged$ = new BehaviorSubject('lg');
@@ -99,7 +99,7 @@ export class MediaService implements OnDestroy {
 
     public constructor(
         private zone: NgZone,
-        @Optional() @Inject(mediaQueryDefinitions) mediaDefinitions?: MediaQueryDefinition[]
+        @Optional() @Inject(mediaQueryDefinitions) mediaDefinitions?: NgxMediaQueryDefinition[]
     ) {
         if (!mediaDefinitions) {
             mediaDefinitions = simplifiedMediaQueryDefinitions;
diff --git a/projects/core/src/styles/mixins/_menu-theme.scss b/projects/core/src/styles/mixins/_menu-theme.scss
index 455161c2..fbabf6c9 100644
--- a/projects/core/src/styles/mixins/_menu-theme.scss
+++ b/projects/core/src/styles/mixins/_menu-theme.scss
@@ -5,7 +5,7 @@
 
     .ngx-menu,
     [ngx-menu] {
-        .menu-content {
+        .ngx-menu-content {
             background-color: #fff;
             border-color: rgba(0, 0, 0, 0.3);
 
diff --git a/projects/core/src/styles/mixins/_menu.scss b/projects/core/src/styles/mixins/_menu.scss
index 08d36591..92148937 100644
--- a/projects/core/src/styles/mixins/_menu.scss
+++ b/projects/core/src/styles/mixins/_menu.scss
@@ -5,7 +5,7 @@
             display: flex;
             flex-direction: column;
 
-            .menu-content {
+            .ngx-menu-content {
                 overflow-x: hidden;
                 overflow-y: auto;
                 display: block;
@@ -17,8 +17,8 @@
                     0 1px 5px 0 rgba(0, 0, 0, 0.12);
                 height: 100%;
 
-                .menu-header,
-                .menu-footer {
+                .ngx-menu-header,
+                .ngx-menu-footer {
                     flex: 0 0 auto;
                     padding: 0.5rem;
                 }
diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.html b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.html
index e2aed2b9..e0662a08 100644
--- a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.html
+++ b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.html
@@ -1,9 +1,9 @@
-<button *ngIf="!hideClear" data-cy="dtp-clear" [disabled]="forInput.disabled" mat-icon-button class="date-picker-button" matTooltip="effacer" type="button" (click)="setValue($event, false)">
+<button *ngIf="!hideClear" data-cy="dtp-clear" [disabled]="forInput.disabled" mat-icon-button class="ngx-date-picker-button" matTooltip="effacer" type="button" (click)="setValue($event, false)">
     <mat-icon>close</mat-icon>
 </button>
-<button *ngIf="!hideToday" data-cy="dtp-today" [disabled]="forInput.disabled" mat-icon-button class="date-picker-button" matTooltip="aujourd'hui" type="button" (click)="setValue($event, true)">
+<button *ngIf="!hideToday" data-cy="dtp-today" [disabled]="forInput.disabled" mat-icon-button class="ngx-date-picker-button" matTooltip="aujourd'hui" type="button" (click)="setValue($event, true)">
     <mat-icon>today</mat-icon>
 </button>
-<button data-cy="dtp-open" [disabled]="forInput.disabled" mat-icon-button class="date-picker-button" matTooltip="ouvrir le calendrier" type="button" (click)="openCalendar()">
+<button data-cy="dtp-open" [disabled]="forInput.disabled" mat-icon-button class="ngx-date-picker-button" matTooltip="ouvrir le calendrier" type="button" (click)="openCalendar()">
     <mat-icon>date_range</mat-icon>
 </button>
diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss
index f77a43bb..cbe6d303 100644
--- a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss
+++ b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.scss
@@ -1,7 +1,7 @@
-datepicker-buttons {
+ngx-datepicker-buttons {
     font-size: 80%;
 
-    .date-picker-button {
+    .ngx-date-picker-button {
         max-width: 20px;
         max-height: 20px;
 
@@ -21,7 +21,7 @@ datepicker-buttons {
 .mat-form-field.mat-form-field-appearance-legacy {
     font-size: inherit;
 
-    datepicker-buttons {
+    ngx-datepicker-buttons {
         .mat-icon-button {
             font-size: 130%;
         }
diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts
index c064616a..5783feb7 100644
--- a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts
+++ b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts
@@ -4,16 +4,16 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, In
 import { AbstractControl } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter } from '@angular/material/core';
-import { MatDatepicker, MatDateRangeInput, MatDateRangePicker } from '@angular/material/datepicker';
+import { MatDateRangeInput, MatDateRangePicker, MatDatepicker } from '@angular/material/datepicker';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { set } from 'date-fns';
-import { filter, ReplaySubject, switchMap, takeUntil, tap } from 'rxjs';
+import { ReplaySubject, filter, switchMap, takeUntil, tap } from 'rxjs';
 
 @Component({
-    selector: 'datepicker-buttons',
+    selector: 'ngx-datepicker-buttons',
     templateUrl: './datepicker-buttons.component.html',
     styleUrls: ['./datepicker-buttons.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,7 +26,7 @@ import { filter, ReplaySubject, switchMap, takeUntil, tap } from 'rxjs';
         MatTooltipModule
     ]
 })
-export class DatepickerButtonsComponent extends Destroy implements OnInit {
+export class NgxDatepickerButtonsComponent extends NgxDestroy implements OnInit {
     @Output() public readonly dateChange = new EventEmitter<Date>();
 
     @Input() public forInput!: MatFormFieldControl<unknown>;
diff --git a/projects/date-picker/src/datepicker-mask/datepicker-mask-validator.service.ts b/projects/date-picker/src/datepicker-mask/datepicker-mask-validator.service.ts
index e2483d11..a6ccbd0b 100644
--- a/projects/date-picker/src/datepicker-mask/datepicker-mask-validator.service.ts
+++ b/projects/date-picker/src/datepicker-mask/datepicker-mask-validator.service.ts
@@ -3,7 +3,7 @@ import { FormControl, ValidationErrors, Validator } from '@angular/forms';
 import { isValid } from 'date-fns';
 
 @Injectable()
-export class DatepickerMaskValidatorService implements Validator {
+export class NgxDatepickerMaskValidatorService implements Validator {
     private invalid = false;
 
     public validate({ value }: FormControl<Date>): ValidationErrors | null {
diff --git a/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts b/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts
index fb3aba07..71c7fa63 100644
--- a/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts
+++ b/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts
@@ -2,26 +2,26 @@
 import { Directive, ElementRef, forwardRef, Inject, Input, OnInit, Optional, Renderer2 } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
-import { Destroy, filterMap, KeyCodes, subscribeWith } from '@hug/ngx-core';
+import { filterMap, KeyCodes, NgxDestroy, subscribeWith } from '@hug/ngx-core';
 import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, isValid, parse, set } from 'date-fns';
 import { isNil } from 'lodash-es';
 import { delay, EMPTY, filter, fromEvent, mergeWith, of, startWith, switchMap, takeUntil, tap, timeInterval } from 'rxjs';
 
-import { DatepickerMaskValidatorService } from './datepicker-mask-validator.service';
+import { NgxDatepickerMaskValidatorService } from './datepicker-mask-validator.service';
 
 
 @Directive({
     selector: '[matDatepicker][dateFormat],[matDatepicker][dateTimeFormat],[matStartDate][dateFormat],[matEndDate][dateFormat],[matStartDate][dateTimeFormat],[matEndDate][dateTimeFormat]',
     providers: [
-        DatepickerMaskValidatorService,
+        NgxDatepickerMaskValidatorService,
         {
             provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => DatepickerMaskValidatorService),
+            useExisting: forwardRef(() => NgxDatepickerMaskValidatorService),
             multi: true
         }
     ]
 })
-export class DatepickerMaskDirective extends Destroy implements OnInit {
+export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('dateTimeFormat')
     public set dateTimeFormat(value: string) {
@@ -57,7 +57,7 @@ export class DatepickerMaskDirective extends Destroy implements OnInit {
         private elementRef: ElementRef<HTMLInputElement>,
         private ngControl: NgControl,
         private renderer: Renderer2,
-        private validator: DatepickerMaskValidatorService,
+        private validator: NgxDatepickerMaskValidatorService,
         private dateAdapter: DateAdapter<unknown>
     ) {
         super();
diff --git a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.html b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.html
index 37c529c1..7ae3382b 100644
--- a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.html
+++ b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.html
@@ -1,6 +1,6 @@
 <ng-template>
-    <time-picker #timepicker class="datepicker-with-time" [(time)]="time"></time-picker>
-    <div class="datepicker-with-time action-buttons">
+    <ngx-time-picker #timepicker class="ngx-datepicker-with-time" [(time)]="time"></ngx-time-picker>
+    <div class="ngx-datepicker-with-time action-buttons">
         <button mat-raised-button color="primary" matDatepickerApply (click)="onDateTimeClosed()">OK</button>
     </div>
 </ng-template>
diff --git a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.scss b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.scss
index 75160528..545b6a76 100644
--- a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.scss
+++ b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.scss
@@ -1,16 +1,16 @@
-deja-time-picker.datepicker-with-time {
+ngx-time-picker.ngx-datepicker-with-time {
     .time-range {
         display: flex;
         align-items: center;
 
-        .time-picker-separator {
+        .ngx-time-picker-separator {
             text-align: center;
             margin: 0 0.5rem;
         }
     }
 }
 
-.datepicker-with-time.action-buttons {
+.ngx-datepicker-with-time.action-buttons {
     padding: 1.5rem 0 1rem 0;
     display: flex;
     justify-content: center;
@@ -30,11 +30,11 @@ deja-time-picker.datepicker-with-time {
     }
 
     .mat-calendar,
-    deja-time-picker.datepicker-with-time {
+    ngx-time-picker.ngx-datepicker-with-time {
         flex: 0 0 auto;
     }
 
-    .datepicker-with-time.action-buttons {
+    .ngx-datepicker-with-time.action-buttons {
         flex: 1 0 100%;
         padding: 0 0 1rem 0;
     }
diff --git a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts
index 0cdd9b55..c9fc4410 100644
--- a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts
+++ b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts
@@ -2,8 +2,8 @@ import { TemplatePortal } from '@angular/cdk/portal';
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Inject, OnDestroy, Optional, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter } from '@angular/material/core';
-import { MatDatepicker, MatDatepickerInput, MatDateSelectionModel } from '@angular/material/datepicker';
-import { Destroy } from '@hug/ngx-core';
+import { MatDateSelectionModel, MatDatepicker, MatDatepickerInput } from '@angular/material/datepicker';
+import { NgxDestroy } from '@hug/ngx-core';
 import { DateOrDuration, TimePickerComponent } from '@hug/ngx-time-picker';
 import { cloneDeep } from 'lodash-es';
 import { delay, filter, map, takeUntil, tap } from 'rxjs';
@@ -12,7 +12,7 @@ import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-ad
 
 
 @Component({
-    selector: 'datepicker-with-time',
+    selector: 'ngx-datepicker-with-time',
     templateUrl: './datepicker-with-time.component.html',
     styleUrls: ['./datepicker-with-time.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,7 +23,7 @@ import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-ad
         TimePickerComponent
     ]
 })
-export class DatepickerWithTimeComponent extends Destroy implements AfterViewInit, OnDestroy {
+export class NgxDatepickerWithTimeComponent extends NgxDestroy implements AfterViewInit, OnDestroy {
     @ViewChild(TemplateRef)
     private template?: TemplateRef<unknown>;
 
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.html b/projects/demo-app/src/app/message-box/message-box-demo.component.html
index 45749231..5398af5b 100644
--- a/projects/demo-app/src/app/message-box/message-box-demo.component.html
+++ b/projects/demo-app/src/app/message-box/message-box-demo.component.html
@@ -11,33 +11,33 @@
     <mat-card class="demo-card">
         <mat-toolbar color="primary">MessageBox</mat-toolbar>
         <mat-card-content>
-            <message-box type="primary" title="Title" [actions]="closeAction">
+            <ngx-message-box type="primary" title="Title" [actions]="closeAction">
                 Du texte dans la
                 <b>message box</b>
-            </message-box>
+            </ngx-message-box>
 
-            <message-box type="primary" title="Title" horizontal [actions]="closeAction">
+            <ngx-message-box type="primary" title="Title" horizontal [actions]="closeAction">
                 Du texte dans la
                 <b>message box</b>
-            </message-box>
+            </ngx-message-box>
 
-            <message-box type="warn" horizontal title="Title" [actions]="closeAction">
+            <ngx-message-box type="warn" horizontal title="Title" [actions]="closeAction">
                 Un message "warn"
                 <b>horizontal</b>
                 avec titre
-            </message-box>
+            </ngx-message-box>
 
-            <message-box type="info" horizontal>
+            <ngx-message-box type="info" horizontal>
                 Un message "info"
                 <b>horizontal</b>
-            </message-box>
+            </ngx-message-box>
 
-            <message-box type="warn" horizontal [actions]="closeAction">
+            <ngx-message-box type="warn" horizontal [actions]="closeAction">
                 Un message "warn"
                 <b>horizontal</b>
-            </message-box>
+            </ngx-message-box>
 
-            <message-box type="danger" horizontal title="Title">
+            <ngx-message-box type="danger" horizontal title="Title">
                 Un message "danger"
                 <b>horizontal</b>
                 avec une action au format template
@@ -46,14 +46,14 @@
                         <mat-icon>clear</mat-icon>
                     </button>
                 </ng-template>
-            </message-box>
+            </ngx-message-box>
 
-            <message-box horizontal>Un message horizontal sans type ni titre</message-box>
+            <ngx-message-box horizontal>Un message horizontal sans type ni titre</ngx-message-box>
 
-            <message-box type="danger" horizontal light [actions]="closeAction">Un message horizontal sans type ni titre</message-box>
-            <message-box type="success" horizontal light>Un message horizontal sans type ni titre</message-box>
-            <message-box type="warn" horizontal light>Un message horizontal sans type ni titre</message-box>
-            <message-box type="info" horizontal light>Un message horizontal sans type ni titre</message-box>
+            <ngx-message-box type="danger" horizontal light [actions]="closeAction">Un message horizontal sans type ni titre</ngx-message-box>
+            <ngx-message-box type="success" horizontal light>Un message horizontal sans type ni titre</ngx-message-box>
+            <ngx-message-box type="warn" horizontal light>Un message horizontal sans type ni titre</ngx-message-box>
+            <ngx-message-box type="info" horizontal light>Un message horizontal sans type ni titre</ngx-message-box>
 
             <button mat-raised-button (click)="openDialog$.next()">Open dialog</button>
         </mat-card-content>
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.scss b/projects/demo-app/src/app/message-box/message-box-demo.component.scss
index 5427390b..559ea269 100644
--- a/projects/demo-app/src/app/message-box/message-box-demo.component.scss
+++ b/projects/demo-app/src/app/message-box/message-box-demo.component.scss
@@ -1,5 +1,5 @@
 :host {
-    message-box {
+    ngx-message-box {
         margin-bottom: 1rem;
     }
 }
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.ts b/projects/demo-app/src/app/message-box/message-box-demo.component.ts
index f0ea203f..e3213c25 100644
--- a/projects/demo-app/src/app/message-box/message-box-demo.component.ts
+++ b/projects/demo-app/src/app/message-box/message-box-demo.component.ts
@@ -5,7 +5,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { MessageBoxAction, MessageBoxComponent } from '@hug/ngx-message-box';
 import { MessageBoxDialogButtons, MessageBoxDialogService } from '@hug/ngx-message-box-dialog';
 import { Subject, switchMap, takeUntil } from 'rxjs';
@@ -26,7 +26,7 @@ import { Subject, switchMap, takeUntil } from 'rxjs';
         NgIf
     ]
 })
-export class MessageBoxDemoComponent extends Destroy {
+export class MessageBoxDemoComponent extends NgxDestroy {
     protected tabIndex = 1;
 
     protected closeAction = [
diff --git a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.html b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.html
index 84253ce6..76abd030 100644
--- a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.html
+++ b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.html
@@ -4,40 +4,40 @@
 </mat-tab-group>
 
 <mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">
-    <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/v2/numeric-stepper/readme.md'"></markdown> -->
+    <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/v2/ngx-numeric-stepper/readme.md'"></markdown> -->
 </mat-card>
 
 <div *ngIf="tabIndex === 1" class="demo-content">
     <mat-card class="demo-card">
         <mat-toolbar color="primary">Numeric Stepper in Material Form Field with different appearances</mat-toolbar>
         <mat-card-content>
-            <div numeric-stepper-container>
+            <div ngx-numeric-stepper-container>
                 <mat-form-field appearance="outline" FormField>
                     <mat-label>Outline</mat-label>
                     <input matInput type="number" [ngModel]="value1 | number: '3.'" (change)="onInput1Change$.next($event)" #numericStepper="ngModel" />
                     <span class="unit">cm</span>
-                    <numeric-stepper showOnInit (increment)="value1 = value1 + 20" (decrement)="value1 = value1 - 20"></numeric-stepper>
+                    <ngx-numeric-stepper showOnInit (increment)="value1 = value1 + 20" (decrement)="value1 = value1 - 20"></ngx-numeric-stepper>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field appearance="legacy">
                     <mat-label>Legacy</mat-label>
                     <input matInput type="number" [ngModel]="value1" (change)="onInput1Change$.next($event)" #numericStepper="ngModel" #model4n="matInput" />
-                    <numeric-stepper [input]="model4n"></numeric-stepper>
+                    <ngx-numeric-stepper [input]="model4n"></ngx-numeric-stepper>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field appearance="standard">
                     <mat-label>Standard</mat-label>
                     <input matInput type="text" [ngModel]="value1 | number: '.1-2'" (change)="onInput1Change$.next($event)" />
-                    <numeric-stepper (increment)="value1 = value1 + 5" (decrement)="value1 = value1 - 5"></numeric-stepper>
+                    <ngx-numeric-stepper (increment)="value1 = value1 + 5" (decrement)="value1 = value1 - 5"></ngx-numeric-stepper>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field appearance="fill">
                     <mat-label>Fill</mat-label>
                     <input matInput type="text" [(ngModel)]="value1" #numericStepper="ngModel" />
-                    <numeric-stepper (increment)="value1 = value1 + 5" (decrement)="value1 = value1 - 5"></numeric-stepper>
+                    <ngx-numeric-stepper (increment)="value1 = value1 + 5" (decrement)="value1 = value1 - 5"></ngx-numeric-stepper>
                 </mat-form-field>
             </div>
         </mat-card-content>
@@ -48,7 +48,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="outline" [style.width.px]="130">
                     <mat-label>Outline appearance</mat-label>
-                    <numeric-stepper (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue3" />
                     <span class="unit">cm</span>
                     <mat-error *ngIf="numberForm.controls.numberValue3.errors?.[0] as error">{{ error }}</mat-error>
@@ -58,7 +58,7 @@
                 <mat-form-field appearance="legacy" [style.width.px]="80">
                     <mat-label>Legacy</mat-label>
                     <!-- Increment/Decrement are linked to ngControl -->
-                    <numeric-stepper [input]="model4"></numeric-stepper>
+                    <ngx-numeric-stepper [input]="model4"></ngx-numeric-stepper>
                     <input matInput required type="number" formControlName="numberValue4" #model4="matInput" />
                     <mat-error *ngIf="numberForm.controls.numberValue4.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -66,7 +66,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="standard" [style.width.px]="80">
                     <mat-label>Standard</mat-label>
-                    <numeric-stepper (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue5" />
                     <mat-error *ngIf="numberForm.controls.numberValue5.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -74,7 +74,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="fill" [style.width.px]="160">
                     <mat-label>min/max with disabled arrows</mat-label>
-                    <numeric-stepper [input]="model6"></numeric-stepper>
+                    <ngx-numeric-stepper [input]="model6"></ngx-numeric-stepper>
                     <!-- Binding angular not woorking here if min or max is 0 -->
                     <input type="number" min="{{ value6min }}" max="{{ value6max }}" matInput formControlName="numberValue6" #model6="matInput" />
                     <mat-error *ngIf="numberForm.controls.numberValue6.errors?.[0] as error">{{ error }}</mat-error>
@@ -88,7 +88,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="outline" [style.width.px]="130">
                     <mat-label>Outline appearance</mat-label>
-                    <numeric-stepper layout="horizontal" (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal" (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue3" />
                     <span class="unit">cm</span>
                     <mat-error *ngIf="numberForm.controls.numberValue3.errors?.[0] as error">{{ error }}</mat-error>
@@ -97,7 +97,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="legacy" [style.width.px]="80">
                     <mat-label>Legacy</mat-label>
-                    <numeric-stepper layout="horizontal" [input]="model4h"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal" [input]="model4h"></ngx-numeric-stepper>
                     <input matInput type="number" formControlName="numberValue4" #model4h="matInput" />
                     <mat-error *ngIf="numberForm.controls.numberValue4.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -105,7 +105,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="standard" [style.width.px]="80">
                     <mat-label>Standard</mat-label>
-                    <numeric-stepper layout="horizontal" (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal" (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue5" />
                     <mat-error *ngIf="numberForm.controls.numberValue5.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -113,7 +113,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="fill">
                     <mat-label>Fill</mat-label>
-                    <numeric-stepper layout="horizontal" (increment)="changeValue6(2)" (decrement)="changeValue6(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal" (increment)="changeValue6(2)" (decrement)="changeValue6(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue6" />
                     <mat-error *ngIf="numberForm.controls.numberValue6.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -126,7 +126,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="outline">
                     <mat-label>Outline</mat-label>
-                    <numeric-stepper layout="horizontal-inlay" (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal-inlay" (increment)="changeValue3(2)" (decrement)="changeValue3(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue3" />
                     <span class="unit">cm</span>
                     <mat-error *ngIf="numberForm.controls.numberValue3.errors?.[0] as error">{{ error }}</mat-error>
@@ -135,7 +135,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="legacy">
                     <mat-label>Legacy</mat-label>
-                    <numeric-stepper layout="horizontal-inlay" [input]="model4h"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal-inlay" [input]="model4h"></ngx-numeric-stepper>
                     <input matInput type="number" formControlName="numberValue4" #model4h="matInput" />
                     <mat-error *ngIf="numberForm.controls.numberValue4.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -143,7 +143,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="standard">
                     <mat-label>Standard</mat-label>
-                    <numeric-stepper layout="horizontal-inlay" (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal-inlay" (increment)="changeValue5(2)" (decrement)="changeValue5(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue5" />
                     <mat-error *ngIf="numberForm.controls.numberValue5.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
@@ -151,7 +151,7 @@
             <div [formGroup]="numberForm">
                 <mat-form-field appearance="fill">
                     <mat-label>Fill</mat-label>
-                    <numeric-stepper layout="horizontal-inlay" (increment)="changeValue6(2)" (decrement)="changeValue6(-2)"></numeric-stepper>
+                    <ngx-numeric-stepper layout="horizontal-inlay" (increment)="changeValue6(2)" (decrement)="changeValue6(-2)"></ngx-numeric-stepper>
                     <input matInput type="text" formControlName="numberValue6" />
                     <mat-error *ngIf="numberForm.controls.numberValue6.errors?.[0] as error">{{ error }}</mat-error>
                 </mat-form-field>
diff --git a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts
index 9cfb77f1..4485ea37 100644
--- a/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts
+++ b/projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts
@@ -6,9 +6,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { NumericStepperComponent } from '@hug/ngx-numeric-stepper';
-import { debounceTime, distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs';
 
 interface NumberFormControls {
     numberValue3: FormControl<number>;
@@ -46,7 +46,7 @@ const numberValidator = (control: AbstractControl): string[] | null => {
         DecimalPipe
     ]
 })
-export class NumericStepperDemoComponent extends Destroy {
+export class NumericStepperDemoComponent extends NgxDestroy {
     protected tabIndex = 1;
 
     protected value1 = 90;
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.html b/projects/demo-app/src/app/overlay/overlay-demo.component.html
index bc42e7ad..8c48ad96 100644
--- a/projects/demo-app/src/app/overlay/overlay-demo.component.html
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.html
@@ -6,45 +6,45 @@
 <mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">TODO</mat-card>
 
 <div *ngIf="tabIndex === 1" (contextmenu)="onContextMenu($event)" class="demo-content">
-    <overlay #contextMenu overlayContainerClass="ngx-menu">
-        <div class="menu-content">
+    <ngx-overlay #contextMenu overlayContainerClass="ngx-menu">
+        <div class="ngx-menu-content">
             <ul>
-                <li class="menu-item" (click)="contextMenu.close()">
+                <li class="ngx-menu-item" (click)="contextMenu.close()">
                     <mat-icon>delete_sweep</mat-icon>
                     Context menu
                 </li>
-                <li class="menu-item" (click)="contextMenu.close()">
+                <li class="ngx-menu-item" (click)="contextMenu.close()">
                     <mat-icon>content_copy</mat-icon>
                     Dupliquer
                 </li>
-                <li class="menu-item" (click)="contextMenu.close()">
+                <li class="ngx-menu-item" (click)="contextMenu.close()">
                     <mat-icon>edit</mat-icon>
                     Editer
                 </li>
             </ul>
         </div>
-    </overlay>
+    </ngx-overlay>
     <mat-card class="demo-card">
         <mat-toolbar color="primary">Overlay</mat-toolbar>
         <mat-card-content>
-            <overlay #posYMenu overlayContainerClass="ngx-menu" positions="end bottom end top">
-                <div class="menu-content">
+            <ngx-overlay #posYMenu overlayContainerClass="ngx-menu" positions="end bottom end top">
+                <div class="ngx-menu-content">
                     <ul>
-                        <li class="menu-item" (click)="posYMenu.close()">
+                        <li class="ngx-menu-item" (click)="posYMenu.close()">
                             <mat-icon>delete_sweep</mat-icon>
                             Supprimer
                         </li>
-                        <li class="menu-item" (click)="posYMenu.close()">
+                        <li class="ngx-menu-item" (click)="posYMenu.close()">
                             <mat-icon>content_copy</mat-icon>
                             Dupliquer
                         </li>
-                        <li class="menu-item" (click)="posYMenu.close()">
+                        <li class="ngx-menu-item" (click)="posYMenu.close()">
                             <mat-icon>edit</mat-icon>
                             Editer
                         </li>
                     </ul>
                 </div>
-            </overlay>
+            </ngx-overlay>
 
             <div id="demo-overlay">
                 <div class="section">
@@ -56,13 +56,13 @@
                         </button>
                     </mat-toolbar>
 
-                    <overlay #menu overlayContainerClass="ngx-menu">
-                        <div class="menu-content button-menu">
-                            <button mat-button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
+                    <ngx-overlay #menu overlayContainerClass="ngx-menu">
+                        <div class="ngx-menu-content button-menu">
+                            <button mat-button class="ngx-menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
                                 {{ item.text }}
                             </button>
                         </div>
-                    </overlay>
+                    </ngx-overlay>
                 </div>
                 <div class="section">
                     <p>Clicking these will navigate: "</p>
@@ -72,13 +72,13 @@
                         </button>
                     </mat-toolbar>
 
-                    <overlay #anchorMenu overlayContainerClass="ngx-menu" positions="start top start bottom">
-                        <div class="menu-content anchor-menu">
-                            <a class="menu-item" *ngFor="let item of items" href="http://www.google.com">
+                    <ngx-overlay #anchorMenu overlayContainerClass="ngx-menu" positions="start top start bottom">
+                        <div class="ngx-menu-content anchor-menu">
+                            <a class="ngx-menu-item" *ngFor="let item of items" href="http://www.google.com">
                                 {{ item.text }}
                             </a>
                         </div>
-                    </overlay>
+                    </ngx-overlay>
                 </div>
                 <div class="section">
                     <p>With Lorem ipsum</p>
@@ -88,14 +88,14 @@
                         </button>
                     </mat-toolbar>
 
-                    <overlay #ipsum overlayContainerClass="ngx-menu">
-                        <div class="menu-content">
+                    <ngx-overlay #ipsum overlayContainerClass="ngx-menu">
+                        <div class="ngx-menu-content">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, lacus nec imperdiet pretium, purus nisi hendrerit velit, non laoreet est velit sit amet arcu. Cras eget malesuada tortor. Aliquam vitae libero tellus. Quisque at velit sed arcu feugiat imperdiet ut quis augue. Cras laoreet eleifend tellus varius laoreet. Vestibulum vulputate sagittis sapien, eget euismod metus. Sed ut lacus at risus tristique blandit. Cras at nibh augue. Nam felis felis, facilisis sed fringilla a, porta id magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eget velit a enim pharetra volutpat quis eget lacus. Donec imperdiet magna metus, auctor pretium nibh dictum eu. Sed pharetra tristique sodales. Nam dapibus porta imperdiet. Pellentesque elementum
                             tristique molestie. Sed at dolor et mauris vehicula vestibulum. Maecenas cursus vulputate convallis. Quisque eu imperdiet nunc. Nunc ut feugiat eros. Integer aliquam nibh nec est sollicitudin dictum at et diam. Aliquam neque magna, condimentum non dolor in, faucibus malesuada mauris. Sed dictum massa neque, quis venenatis justo consequat sed. Fusce imperdiet purus nec neque vestibulum, vel placerat enim porta. Duis turpis purus, suscipit vitae scelerisque sed, sollicitudin a sem. Nullam orci risus, suscipit non mollis non, semper sit amet enim. In vel eros justo. Etiam gravida dolor vitae commodo tincidunt. Ut consequat id odio ac scelerisque. Phasellus fringilla et nisi at convallis. Nunc efficitur est in luctus interdum. Curabitur risus turpis, gravida in ex
                             id, elementum convallis augue. Duis laoreet condimentum purus, sit amet vulputate dolor finibus ac. Proin consectetur ullamcorper orci ut ullamcorper. Vivamus ornare leo vel urna molestie porta. Vivamus malesuada velit eros, non rutrum urna elementum ut. Pellentesque sed lorem tempor, consectetur sem in, condimentum justo. Vivamus eu nunc interdum, mattis turpis nec, accumsan neque. Integer convallis porttitor turpis feugiat placerat. Nulla sodales ex in neque lobortis, vel mollis turpis interdum. Mauris pharetra ex a justo maximus, at semper metus feugiat. Nullam aliquet tortor nec tortor auctor venenatis. Proin id laoreet eros, id sodales mi. Vestibulum mollis orci nec orci posuere dapibus. Integer placerat, nisl id aliquam interdum, diam est vestibulum purus,
                             non venenatis turpis lacus in felis. Vestibulum pulvinar velit tortor, ut convallis turpis condimentum ut. Nunc auctor hendrerit augue, sed malesuada quam. Etiam varius interdum risus, eget gravida libero convallis sed. Aliquam tempor orci at ex ullamcorper mollis. Fusce imperdiet ut ex in gravida. Curabitur iaculis non diam vel consequat. Praesent a magna posuere, feugiat mauris nec, sollicitudin ligula. Sed faucibus viverra velit eget porttitor. Suspendisse a sem gravida, tincidunt lacus vitae, lobortis ante. Nulla nisl quam, ultrices non nunc eget, commodo luctus metus. Curabitur nulla erat, gravida in nulla vel, commodo vestibulum ligula. Quisque quis lectus vel urna luctus gravida eget id risus.
                         </div>
-                    </overlay>
+                    </ngx-overlay>
                 </div>
 
                 <div class="section">
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
index 147e2d54..1b6091b1 100644
--- a/projects/demo-app/src/app/overlay/overlay-demo.component.scss
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
@@ -18,13 +18,13 @@ app-overlay-demo {
 }
 
 .ngx-menu {
-    .menu-content {
+    .ngx-menu-content {
         display: flex;
         flex-direction: column;
 
         &.anchor-menu,
         &.button-menu {
-            .menu-item {
+            .ngx-menu-item {
                 white-space: nowrap;
                 padding: 0.5rem 2rem;
             }
diff --git a/projects/demo-app/src/app/snackbar/snackbar-demo.component.html b/projects/demo-app/src/app/snackbar/snackbar-demo.component.html
index 6cc45be0..d9173c07 100644
--- a/projects/demo-app/src/app/snackbar/snackbar-demo.component.html
+++ b/projects/demo-app/src/app/snackbar/snackbar-demo.component.html
@@ -49,9 +49,9 @@
             </div>
 
             <!-- simple use case, single snackbar -->
-            <snackbar *ngIf="simpleGate" alignment="top left" [duration]="2000" (onAnimationDone)="simpleGate = false">
-                <message-box type="primary" horizontal>Hello world ! I'm a simple snackbar.</message-box>
-            </snackbar>
+            <ngx-snackbar *ngIf="simpleGate" alignment="top left" [duration]="2000" (onAnimationDone)="simpleGate = false">
+                <ngx-message-box type="primary" horizontal>Hello world ! I'm a simple snackbar.</ngx-message-box>
+            </ngx-snackbar>
 
             <!-- event driven from UI -->
             <!-- this behavior is to be used to react to user behavior on the UI, snackbars MUST be disposed using user interraction -->
@@ -59,57 +59,57 @@
             <!--inside a container-->
             <section #containerEl class="container" [style.position]="'relative'">
                 <ng-template ngFor let-message [ngForOf]="infos$ | async">
-                    <snackbar *ngIf="message.gate" alignment="right" [outerContainerElement]="containerEl">
-                        <message-box type="primary" horizontal>
+                    <ngx-snackbar *ngIf="message.gate" alignment="right" [outerContainerElement]="containerEl">
+                        <ngx-message-box type="primary" horizontal>
                             {{ message.content }}
                             <ng-template #actionsTemplate>
                                 <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
                                     <mat-icon>clear</mat-icon>
                                 </button>
                             </ng-template>
-                        </message-box>
-                    </snackbar>
+                        </ngx-message-box>
+                    </ngx-snackbar>
                 </ng-template>
             </section>
 
             <!--on the viewport-->
             <ng-template ngFor let-message [ngForOf]="successes$ | async">
-                <snackbar *ngIf="message.gate" alignment="bottom left">
-                    <message-box type="success" horizontal>
+                <ngx-snackbar *ngIf="message.gate" alignment="bottom left">
+                    <ngx-message-box type="success" horizontal>
                         {{ message.content }}
                         <ng-template #actionsTemplate>
                             <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
                                 <mat-icon>clear</mat-icon>
                             </button>
                         </ng-template>
-                    </message-box>
-                </snackbar>
+                    </ngx-message-box>
+                </ngx-snackbar>
             </ng-template>
 
             <ng-template ngFor let-message [ngForOf]="warnings$ | async">
-                <snackbar *ngIf="message.gate" alignment="bottom">
-                    <message-box type="warn" horizontal>
+                <ngx-snackbar *ngIf="message.gate" alignment="bottom">
+                    <ngx-message-box type="warn" horizontal>
                         {{ message.content }}
                         <ng-template #actionsTemplate>
                             <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
                                 <mat-icon>clear</mat-icon>
                             </button>
                         </ng-template>
-                    </message-box>
-                </snackbar>
+                    </ngx-message-box>
+                </ngx-snackbar>
             </ng-template>
 
             <ng-template ngFor let-message [ngForOf]="dangers$ | async">
-                <snackbar *ngIf="message.gate" alignment="bottom right">
-                    <message-box type="danger" horizontal>
+                <ngx-snackbar *ngIf="message.gate" alignment="bottom right">
+                    <ngx-message-box type="danger" horizontal>
                         {{ message.content }}
                         <ng-template #actionsTemplate>
                             <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
                                 <mat-icon>clear</mat-icon>
                             </button>
                         </ng-template>
-                    </message-box>
-                </snackbar>
+                    </ngx-message-box>
+                </ngx-snackbar>
             </ng-template>
 
             <section class="push-section">
@@ -117,11 +117,11 @@
                 <!-- this behavior is to be used to push message to the client for example, snackbars MUST be displosed by themself -->
                 <!-- to do so, define duration @Input and negate flag used for disposal using the onAnimationDone @Output -->
                 <ng-template ngFor let-message [ngForOf]="messages$ | async">
-                    <snackbar *ngIf="message.gate" alignment="left" [duration]="5000" (onAnimationDone)="message.gate = false">
-                        <message-box type="primary" horizontal>
+                    <ngx-snackbar *ngIf="message.gate" alignment="left" [duration]="5000" (onAnimationDone)="message.gate = false">
+                        <ngx-message-box type="primary" horizontal>
                             {{ message.content }}
-                        </message-box>
-                    </snackbar>
+                        </ngx-message-box>
+                    </ngx-snackbar>
                 </ng-template>
             </section>
         </mat-card-content>
diff --git a/projects/demo-app/src/app/splitter/splitter-demo.component.html b/projects/demo-app/src/app/splitter/splitter-demo.component.html
index 70a7ff5c..f96da3b0 100644
--- a/projects/demo-app/src/app/splitter/splitter-demo.component.html
+++ b/projects/demo-app/src/app/splitter/splitter-demo.component.html
@@ -9,14 +9,14 @@
             <mat-toolbar color="primary">Horizontal splitter</mat-toolbar>
             <mat-card-content class="no-padding">
                 <div class="container">
-                    <splitter direction="horizontal" order="1">
-                        <split-area size="25" minSizePixel="100">
+                    <ngx-splitter direction="horizontal" order="1">
+                        <ngx-split-area size="25" minSizePixel="100">
                             <p>Lorem ipsum dolor sit amet...</p>
-                        </split-area>
-                        <split-area size="75" minSizePixel="100">
+                        </ngx-split-area>
+                        <ngx-split-area size="75" minSizePixel="100">
                             <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
-                        </split-area>
-                    </splitter>
+                        </ngx-split-area>
+                    </ngx-splitter>
                 </div>
             </mat-card-content>
         </mat-card>
@@ -25,14 +25,14 @@
             <mat-toolbar color="primary">Vertical splitter</mat-toolbar>
             <mat-card-content class="no-padding">
                 <div class="container">
-                    <splitter direction="vertical">
-                        <split-area size="25">
+                    <ngx-splitter direction="vertical">
+                        <ngx-split-area size="25">
                             <p>Lorem ipsum dolor sit amet...</p>
-                        </split-area>
-                        <split-area size="75">
+                        </ngx-split-area>
+                        <ngx-split-area size="75">
                             <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
-                        </split-area>
-                    </splitter>
+                        </ngx-split-area>
+                    </ngx-splitter>
                 </div>
             </mat-card-content>
         </mat-card>
@@ -41,31 +41,31 @@
             <mat-toolbar color="primary">Multiple splitter</mat-toolbar>
             <mat-card-content class="no-padding">
                 <div class="container">
-                    <splitter direction="horizontal">
-                        <split-area size="40">
-                            <splitter direction="vertical">
-                                <split-area size="30">
+                    <ngx-splitter direction="horizontal">
+                        <ngx-split-area size="40">
+                            <ngx-splitter direction="vertical">
+                                <ngx-split-area size="30">
                                     <p>Lorem ipsum dolor sit amet...</p>
-                                </split-area>
-                                <split-area size="40">
+                                </ngx-split-area>
+                                <ngx-split-area size="40">
                                     <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
-                                </split-area>
-                                <split-area size="30">
+                                </ngx-split-area>
+                                <ngx-split-area size="30">
                                     <p>Lorem ipsum dolor sit amet...</p>
-                                </split-area>
-                            </splitter>
-                        </split-area>
-                        <split-area size="60">
-                            <splitter direction="vertical">
-                                <split-area size="50">
+                                </ngx-split-area>
+                            </ngx-splitter>
+                        </ngx-split-area>
+                        <ngx-split-area size="60">
+                            <ngx-splitter direction="vertical">
+                                <ngx-split-area size="50">
                                     <p>Lorem ipsum dolor sit amet...</p>
-                                </split-area>
-                                <split-area size="50">
+                                </ngx-split-area>
+                                <ngx-split-area size="50">
                                     <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
-                                </split-area>
-                            </splitter>
-                        </split-area>
-                    </splitter>
+                                </ngx-split-area>
+                            </ngx-splitter>
+                        </ngx-split-area>
+                    </ngx-splitter>
                 </div>
             </mat-card-content>
         </mat-card>
@@ -74,12 +74,12 @@
         <mat-card class="demo-card">
             <mat-toolbar color="primary">Vertical splitter</mat-toolbar>
             <mat-card-content class="no-padding">
-                <splitter direction="vertical">
-                    <split-area size="1" minSizePixel="58">Test 1</split-area>
-                    <split-area size="48" minSizePixel="0">Test 2</split-area>
-                    <split-area size="1" minSizePixel="30">Test 3</split-area>
-                    <split-area size="50" minSizePixel="0">Test 4</split-area>
-                </splitter>
+                <ngx-splitter direction="vertical">
+                    <ngx-split-area size="1" minSizePixel="58">Test 1</ngx-split-area>
+                    <ngx-split-area size="48" minSizePixel="0">Test 2</ngx-split-area>
+                    <ngx-split-area size="1" minSizePixel="30">Test 3</ngx-split-area>
+                    <ngx-split-area size="50" minSizePixel="0">Test 4</ngx-split-area>
+                </ngx-splitter>
             </mat-card-content>
         </mat-card>
     </mat-tab>
diff --git a/projects/demo-app/src/app/splitter/splitter-demo.component.scss b/projects/demo-app/src/app/splitter/splitter-demo.component.scss
index bb105bdb..ea9d7915 100644
--- a/projects/demo-app/src/app/splitter/splitter-demo.component.scss
+++ b/projects/demo-app/src/app/splitter/splitter-demo.component.scss
@@ -4,7 +4,7 @@ app-splitter-demo {
         height: 300px;
         width: 100%;
 
-        splitter {
+        ngx-splitter {
             width: 100%;
             height: 100%;
         }
@@ -44,7 +44,7 @@ app-splitter-demo {
                             .mat-card-content {
                                 flex: 1;
 
-                                splitter {
+                                ngx-splitter {
                                     display: flex;
                                     width: 100%;
                                     height: 100%;
diff --git a/projects/demo-app/src/app/time-picker/time-picker-demo.component.html b/projects/demo-app/src/app/time-picker/time-picker-demo.component.html
index cc5c720d..9ea79869 100644
--- a/projects/demo-app/src/app/time-picker/time-picker-demo.component.html
+++ b/projects/demo-app/src/app/time-picker/time-picker-demo.component.html
@@ -4,7 +4,7 @@
 </mat-tab-group>
 
 <mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">
-    <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/time-picker/readme.md'"></markdown> -->
+    <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/ngx-time-picker/readme.md'"></markdown> -->
 </mat-card>
 
 <div *ngIf="tabIndex === 1">
@@ -15,14 +15,14 @@
                 <div>
                     <h3>Without initial hours and minutes (null)</h3>
                     <div class="flex-layout-center">
-                        <time-picker [ngModel]="date0" (ngModelChange)="date0Changed($event)" mode="fullTime"></time-picker>
+                        <ngx-time-picker [ngModel]="date0" (ngModelChange)="date0Changed($event)" mode="fullTime"></ngx-time-picker>
                     </div>
                     <p>Selected : {{ date0 | date: 'HH:mm' }}</p>
                 </div>
                 <div>
                     <h3>With initial hours and minutes (09:05)</h3>
                     <div class="flex-layout-center">
-                        <time-picker appearance="legacy" [ngModel]="date1" (ngModelChange)="date1Changed($event)" mode="fullTime"></time-picker>
+                        <ngx-time-picker appearance="legacy" [ngModel]="date1" (ngModelChange)="date1Changed($event)" mode="fullTime"></ngx-time-picker>
                     </div>
                     <p>Selected : {{ date1 | date: 'HH:mm' }}</p>
                 </div>
@@ -36,28 +36,28 @@ <h3>With initial hours and minutes (09:05)</h3>
                 <div>
                     <h3>With hours disabled</h3>
                     <div class="flex-layout-center">
-                        <time-picker [ngModel]="date2" (ngModelChange)="date2Changed($event)" [step]="5" mode="fullTimeWithHoursDisabled"></time-picker>
+                        <ngx-time-picker [ngModel]="date2" (ngModelChange)="date2Changed($event)" [step]="5" mode="fullTimeWithHoursDisabled"></ngx-time-picker>
                     </div>
                     <p>Selected date : {{ date2 | date: 'HH:mm' }}</p>
                 </div>
                 <div>
                     <h3>With minutes disabled</h3>
                     <div class="flex-layout-center">
-                        <time-picker [ngModel]="date3" (ngModelChange)="date3Changed($event)" mode="fullTimeWithMinutesDisabled"></time-picker>
+                        <ngx-time-picker [ngModel]="date3" (ngModelChange)="date3Changed($event)" mode="fullTimeWithMinutesDisabled"></ngx-time-picker>
                     </div>
                     <p>Selected date : {{ date3 | date: 'HH:mm' }}</p>
                 </div>
                 <div>
                     <h3>With hours displayed only</h3>
                     <div class="flex-layout-center">
-                        <time-picker [ngModel]="date4" (ngModelChange)="date4Changed($event)" mode="hoursOnly"></time-picker>
+                        <ngx-time-picker [ngModel]="date4" (ngModelChange)="date4Changed($event)" mode="hoursOnly"></ngx-time-picker>
                     </div>
                     <p>Selected date : {{ date4 | date: 'HH:mm' }}</p>
                 </div>
                 <div>
                     <h3>With minutes displayed only inline in a form</h3>
                     <div class="flex-layout-center">
-                        <time-picker inform [ngModel]="date5" (ngModelChange)="date5Changed($event)" mode="minutesOnly"></time-picker>
+                        <ngx-time-picker inform [ngModel]="date5" (ngModelChange)="date5Changed($event)" mode="minutesOnly"></ngx-time-picker>
                         <mat-form-field appearance="outline">
                             <input matInput name="fakeInput" [(ngModel)]="fakeInput" />
                         </mat-form-field>
@@ -74,7 +74,7 @@ <h3>With minutes displayed only inline in a form</h3>
                 <div>
                     <h3>Time Picker disabled</h3>
                     <div class="flex-layout-center">
-                        <time-picker [ngModel]="date6" (ngModelChange)="date6Changed($event)" [disabled]="disable6"></time-picker>
+                        <ngx-time-picker [ngModel]="date6" (ngModelChange)="date6Changed($event)" [disabled]="disable6"></ngx-time-picker>
                     </div>
                     <p>
                         <mat-checkbox name="disable-checkbox" [(ngModel)]="disable6">Disable time-picker</mat-checkbox>
@@ -91,7 +91,7 @@ <h3>Time Picker disabled</h3>
                 <form [formGroup]="dateForm">
                     <h3>Time Picker form control</h3>
                     <div class="flex-layout-center">
-                        <time-picker formControlName="date7"></time-picker>
+                        <ngx-time-picker formControlName="date7"></ngx-time-picker>
                     </div>
                     <p>Selected date : {{ dateForm.controls.date7.value | date: 'HH:mm' }}</p>
                 </form>
diff --git a/projects/demo-app/src/app/time-picker/time-picker-demo.component.scss b/projects/demo-app/src/app/time-picker/time-picker-demo.component.scss
index 341baf4f..79325ec5 100644
--- a/projects/demo-app/src/app/time-picker/time-picker-demo.component.scss
+++ b/projects/demo-app/src/app/time-picker/time-picker-demo.component.scss
@@ -15,7 +15,7 @@ app-time-picker-demo {
         align-items: center;
     }
 
-    .time-picker-actions {
+    .ngx-time-picker-actions {
         height: 100%;
         display: flex;
         flex-direction: column;
@@ -36,7 +36,7 @@ app-time-picker-demo {
         margin-left: 64px !important;
     }
 
-    time-picker[inform] {
+    ngx-time-picker[inform] {
         padding-right: 1rem;
     }
 }
diff --git a/projects/layout/src/_layout-theme.scss b/projects/layout/src/_layout-theme.scss
index 7040d44d..54cd1712 100644
--- a/projects/layout/src/_layout-theme.scss
+++ b/projects/layout/src/_layout-theme.scss
@@ -6,7 +6,7 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    layout > .mat-toolbar.mat-primary {
+    ngx-layout > .mat-toolbar.mat-primary {
         background-color: mat.get-color-from-palette($primary, darker);
         color: mat.get-color-from-palette($primary, darker-contrast);
 
@@ -24,7 +24,7 @@
         }
     }
 
-    layout {
+    ngx-layout {
         mat-drawer {
             &.right {
                 [filters-title] {
diff --git a/projects/layout/src/layout.component.scss b/projects/layout/src/layout.component.scss
index 70eb9436..c36d008c 100644
--- a/projects/layout/src/layout.component.scss
+++ b/projects/layout/src/layout.component.scss
@@ -1,4 +1,4 @@
-layout {
+ngx-layout {
     display: flex;
     flex-direction: column;
     position: absolute;
diff --git a/projects/layout/src/layout.component.ts b/projects/layout/src/layout.component.ts
index 16c3547a..ff7b779b 100644
--- a/projects/layout/src/layout.component.ts
+++ b/projects/layout/src/layout.component.ts
@@ -6,11 +6,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MediaService } from '@hug/ngx-core';
+import { NgxMediaService } from '@hug/ngx-core';
 import { SidenavService } from '@hug/ngx-sidenav';
 
 @Component({
-    selector: 'layout',
+    selector: 'ngx-layout',
     templateUrl: './layout.component.html',
     styleUrls: ['./layout.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -25,7 +25,7 @@ import { SidenavService } from '@hug/ngx-sidenav';
         MatTooltipModule
     ]
 })
-export class LayoutComponent {
+export class NgxLayoutComponent {
     @Input() public toolbarColor = 'primary';
     @Input() public editorToolbarId = 'editor-toolbar';
 
@@ -140,7 +140,7 @@ export class LayoutComponent {
     }
 
     public constructor(
-        protected mediaService: MediaService,
+        protected mediaService: NgxMediaService,
         protected sidenavService: SidenavService
     ) {
     }
diff --git a/projects/list-loader/src/_list-loader-theme.scss b/projects/list-loader/src/_list-loader-theme.scss
index d22ea679..f3f116c7 100644
--- a/projects/list-loader/src/_list-loader-theme.scss
+++ b/projects/list-loader/src/_list-loader-theme.scss
@@ -5,7 +5,7 @@
     $accent: map-get($theme, accent);
     $foreground: map-get($theme, foreground);
 
-    list-loader > .container {
+    ngx-list-loader > .container {
         > .spinner {
             > .bounce1 {
                 background-color: mat.get-color-from-palette($foreground, disabled);
diff --git a/projects/list-loader/src/list-loader.component.scss b/projects/list-loader/src/list-loader.component.scss
index bffe4e61..d20084ed 100644
--- a/projects/list-loader/src/list-loader.component.scss
+++ b/projects/list-loader/src/list-loader.component.scss
@@ -1,4 +1,4 @@
-list-loader {
+ngx-list-loader {
     display: flex;
     flex: 1 1 auto;
     height: 100%;
diff --git a/projects/list-loader/src/list-loader.component.ts b/projects/list-loader/src/list-loader.component.ts
index 986db88a..eeb81733 100644
--- a/projects/list-loader/src/list-loader.component.ts
+++ b/projects/list-loader/src/list-loader.component.ts
@@ -2,7 +2,7 @@ import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector: 'list-loader',
+    selector: 'ngx-list-loader',
     templateUrl: './list-loader.component.html',
     styleUrls: ['./list-loader.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/message-box-dialog/src/_message-box-dialog-theme.scss b/projects/message-box-dialog/src/_message-box-dialog-theme.scss
index 96479545..182b79a3 100644
--- a/projects/message-box-dialog/src/_message-box-dialog-theme.scss
+++ b/projects/message-box-dialog/src/_message-box-dialog-theme.scss
@@ -6,7 +6,7 @@
     .cdk-overlay-container {
         .cdk-overlay-pane {
             &.warning {
-                app-message-box-dialog {
+                ngx-message-box-dialog {
                     .mat-toolbar {
                         background-color: mat.get-color-from-palette(mat.$orange-palette, 500);
                     }
@@ -18,7 +18,7 @@
             }
 
             &.error {
-                app-message-box-dialog {
+                ngx-message-box-dialog {
                     .mat-toolbar {
                         background-color: mat.get-color-from-palette($warn);
                     }
diff --git a/projects/message-box-dialog/src/message-box-dialog.component.scss b/projects/message-box-dialog/src/message-box-dialog.component.scss
index 85faca5d..1aa5441a 100644
--- a/projects/message-box-dialog/src/message-box-dialog.component.scss
+++ b/projects/message-box-dialog/src/message-box-dialog.component.scss
@@ -1,4 +1,4 @@
-app-message-box-dialog {
+ngx-message-box-dialog {
     padding-top: 1rem;
 
     .dialog-container {
diff --git a/projects/message-box-dialog/src/message-box-dialog.component.ts b/projects/message-box-dialog/src/message-box-dialog.component.ts
index 0f929da9..a87501f9 100644
--- a/projects/message-box-dialog/src/message-box-dialog.component.ts
+++ b/projects/message-box-dialog/src/message-box-dialog.component.ts
@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MessageBoxDialogButtons, MessageBoxDialogData } from './message-box-dialog.model';
 
 @Component({
-    selector: 'app-message-box-dialog',
+    selector: 'ngx-message-box-dialog',
     templateUrl: './message-box-dialog.component.html',
     styleUrls: ['./message-box-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/message-box-dialog/src/message-box-dialog.service.ts b/projects/message-box-dialog/src/message-box-dialog.service.ts
index 21215105..4d4d486f 100644
--- a/projects/message-box-dialog/src/message-box-dialog.service.ts
+++ b/projects/message-box-dialog/src/message-box-dialog.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, Type } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { AbstractLazyModule, DialogService, LazyLoaderService } from '@hug/ngx-core';
+import { AbstractLazyModule, DialogService, NgxLazyLoaderService } from '@hug/ngx-core';
 import { Observable, take } from 'rxjs';
 
 import { MessageBoxDialogButtons, MessageBoxDialogData, MessageBoxDialogResponse } from './message-box-dialog.model';
@@ -10,7 +10,7 @@ import { MessageBoxDialogButtons, MessageBoxDialogData, MessageBoxDialogResponse
 })
 export class MessageBoxDialogService extends DialogService<MessageBoxDialogResponse, MessageBoxDialogData | string> {
     public constructor(
-        lazyLoaderService: LazyLoaderService,
+        lazyLoaderService: NgxLazyLoaderService,
         dialog: MatDialog
     ) {
         super(lazyLoaderService, dialog, {
diff --git a/projects/message-box/src/_message-box-theme.scss b/projects/message-box/src/_message-box-theme.scss
index 88165559..abfbd364 100644
--- a/projects/message-box/src/_message-box-theme.scss
+++ b/projects/message-box/src/_message-box-theme.scss
@@ -47,7 +47,7 @@
     $warning: mat.define-palette(mat.$orange-palette);
     $success: mat.define-palette(mat.$green-palette);
 
-    message-box {
+    ngx-message-box {
         &[horizontal] {
             #msgbox {
                 &.info,
diff --git a/projects/message-box/src/message-box.component.scss b/projects/message-box/src/message-box.component.scss
index a874f6b4..35836567 100644
--- a/projects/message-box/src/message-box.component.scss
+++ b/projects/message-box/src/message-box.component.scss
@@ -1,4 +1,4 @@
-message-box {
+ngx-message-box {
     display: block;
     border-radius: 3px;
     overflow: hidden;
diff --git a/projects/message-box/src/message-box.component.ts b/projects/message-box/src/message-box.component.ts
index d1668411..8cc18e00 100644
--- a/projects/message-box/src/message-box.component.ts
+++ b/projects/message-box/src/message-box.component.ts
@@ -10,7 +10,7 @@ import { MessageBoxAction, MessageBoxType } from './message-box.model';
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    selector: 'message-box',
+    selector: 'ngx-message-box',
     styleUrls: ['./message-box.component.scss'],
     templateUrl: './message-box.component.html',
     standalone: true,
diff --git a/projects/numeric-stepper/src/_numeric-stepper-theme.scss b/projects/numeric-stepper/src/_numeric-stepper-theme.scss
index b5bc19d3..a928d4cb 100644
--- a/projects/numeric-stepper/src/_numeric-stepper-theme.scss
+++ b/projects/numeric-stepper/src/_numeric-stepper-theme.scss
@@ -5,8 +5,8 @@
     $warn: map-get($theme, warn);
     $background: map-get($theme, background);
 
-    [numeric-stepper-form-field] {
-        numeric-stepper {
+    [ngx-numeric-stepper-form-field] {
+        ngx-numeric-stepper {
             .arrow {
                 color: mat.get-color-from-palette($primary);
 
@@ -22,7 +22,7 @@
 
         &:not(.disabled) {
             &.mat-form-field-invalid {
-                numeric-stepper {
+                ngx-numeric-stepper {
                     .arrow:not([disabled]) {
                         color: mat.get-color-from-palette($warn);
                     }
@@ -45,7 +45,7 @@
         }
 
         &.mat-form-field-appearance-fill {
-            numeric-stepper {
+            ngx-numeric-stepper {
                 .shadow::after {
                     background-color: rgba(0, 0, 0, 0.04);
                 }
diff --git a/projects/numeric-stepper/src/numeric-stepper.component.scss b/projects/numeric-stepper/src/numeric-stepper.component.scss
index 87d9df01..d101c121 100644
--- a/projects/numeric-stepper/src/numeric-stepper.component.scss
+++ b/projects/numeric-stepper/src/numeric-stepper.component.scss
@@ -1,12 +1,12 @@
-[numeric-stepper-container] .mat-form-field,
-[numeric-stepper-form-field] {
+[ngx-numeric-stepper-container] .mat-form-field,
+[ngx-numeric-stepper-form-field] {
     .mat-form-field-infix {
         display: inline-flex;
         justify-content: center;
         align-items: center;
     }
 
-    &[numeric-stepper-form-field='vertical'] {
+    &[ngx-numeric-stepper-form-field='vertical'] {
         &:not(.disabled) {
             &:hover {
                 .mat-form-field-label-wrapper {
@@ -22,9 +22,9 @@
         }
     }
 
-    &[numeric-stepper-form-field='horizontal-inlay'] {
+    &[ngx-numeric-stepper-form-field='horizontal-inlay'] {
         &:not(.disabled) {
-            input:not([inputAutosize]) {
+            input:not([ngx-input-autosize]) {
                 width: calc(100% - 64px);
             }
 
@@ -35,7 +35,7 @@
                     }
                 }
 
-                &[inputAutosizeFormField] {
+                &[ngx-input-autosize-form-field] {
                     .mat-form-field-infix {
                         padding: 1em 23px;
                     }
@@ -47,7 +47,7 @@
                     }
                 }
 
-                &:not([inputAutosizeFormField]) {
+                &:not([ngx-input-autosize-form-field]) {
                     &.mat-form-field-appearance-fill {
                         input {
                             margin: 0 18px;
@@ -121,7 +121,7 @@
         }
     }
 
-    numeric-stepper {
+    ngx-numeric-stepper {
         position: relative;
         z-index: 10002;
 
@@ -160,8 +160,8 @@
             border-radius: 0 0 4px 4px;
         }
 
-        &[layout='horizontal'],
-        &[layout='horizontal-inlay'] {
+        &[ngx-layout='horizontal'],
+        &[ngx-layout='horizontal-inlay'] {
             .increment {
                 border-radius: 0 4px 4px 0;
             }
diff --git a/projects/numeric-stepper/src/numeric-stepper.component.ts b/projects/numeric-stepper/src/numeric-stepper.component.ts
index 05b75dbf..048e569d 100644
--- a/projects/numeric-stepper/src/numeric-stepper.component.ts
+++ b/projects/numeric-stepper/src/numeric-stepper.component.ts
@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { Destroy, filterMap, KeyCodes } from '@hug/ngx-core';
+import { filterMap, KeyCodes, NgxDestroy } from '@hug/ngx-core';
 import { combineLatestWith, debounceTime, delay, filter, fromEvent, map, mergeWith, ReplaySubject, shareReplay, startWith, Subject, switchMap, takeUntil, tap, timer, withLatestFrom } from 'rxjs';
 
 export type NumericStepperLayout = 'vertical' | 'horizontal' | 'horizontal-inlay';
@@ -13,7 +13,7 @@ export type NumericStepperLayout = 'vertical' | 'horizontal' | 'horizontal-inlay
 // TODO sdil refactor rxjs flows
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'numeric-stepper',
+    selector: 'ngx-numeric-stepper',
     styleUrls: ['./numeric-stepper.component.scss'],
     templateUrl: './numeric-stepper.component.html',
     standalone: true,
@@ -27,7 +27,7 @@ export type NumericStepperLayout = 'vertical' | 'horizontal' | 'horizontal-inlay
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class NumericStepperComponent extends Destroy implements OnInit {
+export class NumericStepperComponent extends NgxDestroy implements OnInit {
     private static TYPE_ERROR = 'Input element on the same mat-form-field must be type="number". With other input type, use increment or decrement events and implement your proper functions to change the value.';
     private static STEP_FN_ERROR = 'Input element on the same mat-form-field must implement stepDown/stepUp functions.';
     private static INPUT_ERROR = 'To use the automatic binding, you must specify the input field with a matInput reference. [input]="matInputRef"';
@@ -160,10 +160,10 @@ export class NumericStepperComponent extends Destroy implements OnInit {
 
                 // eslint-disable-next-line no-loops/no-loops
                 while (parentElement) {
-                    if (parentElement.tagName === 'MAT-FORM-FIELD' || parentElement.hasAttribute('numeric-stepper-form-field')) {
+                    if (parentElement.tagName === 'MAT-FORM-FIELD' || parentElement.hasAttribute('ngx-numeric-stepper-form-field')) {
                         formFieldElement = parentElement;
                     }
-                    if (parentElement.hasAttribute('numeric-stepper-container')) {
+                    if (parentElement.hasAttribute('ngx-numeric-stepper-container')) {
                         containerElement = parentElement;
                     }
                     if (containerElement && formFieldElement) {
@@ -173,17 +173,17 @@ export class NumericStepperComponent extends Destroy implements OnInit {
                 }
 
                 if (formFieldElement) {
-                    formFieldElement.setAttribute('numeric-stepper-form-field', this.layout);
+                    formFieldElement.setAttribute('ngx-numeric-stepper-form-field', this.layout);
                     this.parentAppearance = formFieldElement.getAttribute('appearance')?.toUpperCase();
                 }
 
                 if (!formFieldElement) {
-                    console.error('numeric-stepper work only inside a mat-form-field or a [numeric-stepper-form-field] element');
+                    console.error('ngx-numeric-stepper work only inside a mat-form-field or a [ngx-numeric-stepper-form-field] element');
                 } else {
                     inputElement = formFieldElement.getElementsByTagName('INPUT')?.[0] as HTMLInputElement || null;
 
                     if (!inputElement) {
-                        console.error('numeric-stepper work only inside a mat-form-field or a [numeric-stepper-form-field] element containing an input element');
+                        console.error('ngx-numeric-stepper work only inside a mat-form-field or a [ngx-numeric-stepper-form-field] element containing an input element');
                     }
                 }
 
diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts
index 84e7b18c..a2feba0c 100644
--- a/projects/overlay/src/overlay.component.ts
+++ b/projects/overlay/src/overlay.component.ts
@@ -2,7 +2,7 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MediaService } from '@hug/ngx-core';
+import { NgxMediaService } from '@hug/ngx-core';
 import { BehaviorSubject, combineLatestWith, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap, take } from 'rxjs';
 
 import { defaultConnectionPositionPair, OverlayConnectionPositionPair } from './connection-position-pair';
@@ -25,7 +25,7 @@ interface OverlayInfos {
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    selector: 'overlay',
+    selector: 'ngx-overlay',
     styleUrls: ['./overlay.component.scss'],
     templateUrl: './overlay.component.html',
     standalone: true,
@@ -83,7 +83,7 @@ export class OverlayComponent implements OnChanges {
     private _positions = defaultConnectionPositionPair;
     private _positionsForMobile?: OverlayConnectionPositionPair[];
 
-    public constructor(private elementRef: ElementRef, private overlayContainer: OverlayContainer, mediaService: MediaService) {
+    public constructor(private elementRef: ElementRef, private overlayContainer: OverlayContainer, mediaService: NgxMediaService) {
         const containerElement = this.overlayContainer.getContainerElement();
         containerElement.addEventListener('contextmenu', (event: Event) => {
             event.preventDefault();
diff --git a/projects/search-container/src/_search-container-theme.scss b/projects/search-container/src/_search-container-theme.scss
index 5623ae73..be878927 100644
--- a/projects/search-container/src/_search-container-theme.scss
+++ b/projects/search-container/src/_search-container-theme.scss
@@ -6,8 +6,8 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    search-container {
-        .search-container {
+    ngx-search-container {
+        .ngx-search-container {
             background-color: mat.get-color-from-palette($background, background, 0.2);
 
             &:hover {
@@ -52,13 +52,13 @@
             }
         }
 
-        .search-container-mobile {
+        .ngx-search-container-mobile {
             &.active {
                 background-color: mat.get-color-from-palette($background, background);
                 color: mat.get-color-from-palette($foreground, text);
             }
 
-            .search-container {
+            .ngx-search-container {
                 &::placeholder {
                     color: mat.get-color-from-palette($foreground, secondary-text);
                 }
diff --git a/projects/search-container/src/search-container.component.html b/projects/search-container/src/search-container.component.html
index 2ace217d..b798eabb 100644
--- a/projects/search-container/src/search-container.component.html
+++ b/projects/search-container/src/search-container.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="mediaService.isHandset$ | async; else noHandsetTpl" class="search-container-mobile mobile" [class.active]="activeSearch$ | async" #mobileSearch>
+<div *ngIf="mediaService.isHandset$ | async; else noHandsetTpl" class="ngx-search-container-mobile mobile" [class.active]="activeSearch$ | async" #mobileSearch>
     <ng-container *ngIf="activeSearch$ | async; else noActiveSearchTpl">
         <mat-icon (click)="activeSearch$.next(false)">arrow_back</mat-icon>
         <ng-container *ngTemplateOutlet="searchContainerTpl"></ng-container>
@@ -13,7 +13,7 @@
 </ng-template>
 
 <ng-template #searchContainerTpl>
-    <div class="search-container">
+    <div class="ngx-search-container">
         <mat-icon>search</mat-icon>
         <ng-content></ng-content>
         <mat-icon *ngIf="searchInputValue$ | async" class="icon-clear" [matTooltip]="clearTooltip" (click)="reset()">close</mat-icon>
diff --git a/projects/search-container/src/search-container.component.scss b/projects/search-container/src/search-container.component.scss
index d7d6c128..0e902fa4 100644
--- a/projects/search-container/src/search-container.component.scss
+++ b/projects/search-container/src/search-container.component.scss
@@ -1,9 +1,9 @@
-search-container {
+ngx-search-container {
     display: flex;
     flex: 1 1 auto;
     padding-left: 0.5rem;
 
-    .search-container {
+    .ngx-search-container {
         width: 100%;
 
         &.mobile {
@@ -41,7 +41,7 @@ search-container {
         }
     }
 
-    .search-container-mobile {
+    .ngx-search-container-mobile {
         width: 100%;
         display: flex;
         justify-content: flex-end;
diff --git a/projects/search-container/src/search-container.component.ts b/projects/search-container/src/search-container.component.ts
index 1702683e..1b0d7482 100644
--- a/projects/search-container/src/search-container.component.ts
+++ b/projects/search-container/src/search-container.component.ts
@@ -1,10 +1,10 @@
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Self, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { Destroy, MediaService } from '@hug/ngx-core';
-import { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, takeUntil, tap } from 'rxjs';
+import { NgxDestroy, NgxMediaService } from '@hug/ngx-core';
+import { BehaviorSubject, Observable, distinctUntilChanged, first, shareReplay, switchMap, takeUntil, tap } from 'rxjs';
 
 @Directive({
-    selector: '[searchInput]'
+    selector: '[ngx-search-input]'
 })
 export class SearchInputDirective {
     public constructor(
@@ -20,13 +20,13 @@ export class SearchInputDirective {
 }
 
 @Component({
-    selector: 'search-container',
+    selector: 'ngx-search-container',
     templateUrl: './search-container.component.html',
     styleUrls: ['./search-container.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SearchContainerComponent extends Destroy implements AfterContentInit {
+export class SearchContainerComponent extends NgxDestroy implements AfterContentInit {
 
     @Output()
     public readonly cleared = new EventEmitter<void>();
@@ -66,7 +66,7 @@ export class SearchContainerComponent extends Destroy implements AfterContentIni
     }
 
     public constructor(
-        protected mediaService: MediaService,
+        protected mediaService: NgxMediaService,
         private zone: NgZone
     ) {
         super();
diff --git a/projects/sidenav/src/sidenav.service.ts b/projects/sidenav/src/sidenav.service.ts
index 5ae08edd..cfe70dc9 100644
--- a/projects/sidenav/src/sidenav.service.ts
+++ b/projects/sidenav/src/sidenav.service.ts
@@ -1,5 +1,5 @@
 import { inject, Injectable } from '@angular/core';
-import { MediaService } from '@hug/ngx-core';
+import { NgxMediaService } from '@hug/ngx-core';
 import { mergeWith, Observable, ReplaySubject, shareReplay, switchMap, take } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -13,7 +13,7 @@ export class SidenavService {
     public readonly modeChanged$: Observable<SidenavMode>;
     public readonly hiddenChanged$: Observable<boolean>;
 
-    protected mediaService = inject(MediaService);
+    protected mediaService = inject(NgxMediaService);
 
     private readonly opened$ = new ReplaySubject<boolean>(1);
     private readonly mode$ = new ReplaySubject<SidenavMode>(1);
diff --git a/projects/snackbar/src/snackbar.component.ts b/projects/snackbar/src/snackbar.component.ts
index d47516ec..87f87618 100644
--- a/projects/snackbar/src/snackbar.component.ts
+++ b/projects/snackbar/src/snackbar.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Destroy } from '@hug/ngx-core';
-import { debounce, delay, Subject, Subscription, take, takeUntil, tap, timer } from 'rxjs';
+import { NgxDestroy } from '@hug/ngx-core';
+import { Subject, Subscription, debounce, delay, take, takeUntil, tap, timer } from 'rxjs';
 
 interface Animation {
     before: CSSStyleDeclaration;
@@ -13,12 +13,12 @@ interface Animation {
 // TODO sdil refactor rxjs flows
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'snackbar',
+    selector: 'ngx-snackbar',
     styleUrls: ['./snackbar.component.scss'],
     template: '<ng-content></ng-content>',
     standalone: true
 })
-export class SnackbarComponent extends Destroy implements OnInit, AfterViewInit, OnDestroy {
+export class SnackbarComponent extends NgxDestroy implements OnInit, AfterViewInit, OnDestroy {
     /**
      * all snackbar instances
      */
diff --git a/projects/splitter/src/_splitter-theme.scss b/projects/splitter/src/_splitter-theme.scss
index 03660134..0ba7c0cc 100644
--- a/projects/splitter/src/_splitter-theme.scss
+++ b/projects/splitter/src/_splitter-theme.scss
@@ -3,8 +3,8 @@
 @mixin theme($theme) {
     $background: map-get($theme, background);
 
-    splitter {
-        .split-gutter {
+    ngx-splitter {
+        .ngx-split-gutter {
             background-color: mat.get-color-from-palette($background, app-bar);
         }
     }
diff --git a/projects/splitter/src/split-area.directive.ts b/projects/splitter/src/split-area.directive.ts
index 5d398d35..7f1b1509 100644
--- a/projects/splitter/src/split-area.directive.ts
+++ b/projects/splitter/src/split-area.directive.ts
@@ -10,7 +10,7 @@ import { SplitterDirection } from './splitter-direction-type';
  * Directive representing a panel in a Splitter Component
  */
 @Directive({
-    selector: 'split-area',
+    selector: 'ngx-split-area',
     standalone: true
 })
 export class SplitAreaDirective {
diff --git a/projects/splitter/src/splitter.component.html b/projects/splitter/src/splitter.component.html
index d9dd7646..cb7cffcc 100644
--- a/projects/splitter/src/splitter.component.html
+++ b/projects/splitter/src/splitter.component.html
@@ -1,4 +1,4 @@
 <ng-content></ng-content>
 <ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
-    <div class="split-gutter" *ngIf="last === false" [style.order]="index * 2 + 1" [style.flex-basis.px]="gutterSize" (mousedown)="startDragging$.next({ event: $event, index: index * 2 + 1 })" (touchstart)="startDragging$.next({ event: $event, index: index * 2 + 1 })"></div>
+    <div class="ngx-split-gutter" *ngIf="last === false" [style.order]="index * 2 + 1" [style.flex-basis.px]="gutterSize" (mousedown)="startDragging$.next({ event: $event, index: index * 2 + 1 })" (touchstart)="startDragging$.next({ event: $event, index: index * 2 + 1 })"></div>
 </ng-template>
diff --git a/projects/splitter/src/splitter.component.scss b/projects/splitter/src/splitter.component.scss
index f3da5a91..d83f2f13 100644
--- a/projects/splitter/src/splitter.component.scss
+++ b/projects/splitter/src/splitter.component.scss
@@ -1,10 +1,10 @@
-splitter {
+ngx-splitter {
     display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: hidden;
 
-    split-area {
+    ngx-split-area {
         flex: 1 1 auto;
         overflow: hidden;
 
@@ -13,7 +13,7 @@ splitter {
         }
     }
 
-    .split-gutter {
+    .ngx-split-gutter {
         flex-grow: 0;
         flex-shrink: 0;
         background-position: 50%;
@@ -24,12 +24,12 @@ splitter {
     }
 
     &[direction='horizontal'] {
-        split-area {
+        ngx-split-area {
             width: 100%;
         }
 
         &:not([disabled]) {
-            .split-gutter {
+            .ngx-split-gutter {
                 cursor: col-resize;
                 content: ' ';
                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
@@ -38,12 +38,12 @@ splitter {
     }
 
     &[direction='vertical'] {
-        split-area {
+        ngx-split-area {
             height: 100%;
         }
 
         &:not([disabled]) {
-            .split-gutter {
+            .ngx-split-gutter {
                 cursor: row-resize;
                 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC');
             }
diff --git a/projects/splitter/src/splitter.component.ts b/projects/splitter/src/splitter.component.ts
index 90c94bb0..72168246 100644
--- a/projects/splitter/src/splitter.component.ts
+++ b/projects/splitter/src/splitter.component.ts
@@ -1,7 +1,7 @@
 import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
 import { NgFor, NgForOf, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, inject, Input, Output, QueryList, ViewEncapsulation } from '@angular/core';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { filter, fromEvent, map, mergeWith, of, shareReplay, Subject, switchMap, take, takeUntil, tap } from 'rxjs';
 
 import { SplitAreaDirective } from './split-area.directive';
@@ -20,7 +20,7 @@ interface DraggingEvent {
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    selector: 'splitter',
+    selector: 'ngx-splitter',
     styleUrls: ['./splitter.component.scss'],
     templateUrl: './splitter.component.html',
     standalone: true,
@@ -30,7 +30,7 @@ interface DraggingEvent {
         NgForOf
     ]
 })
-export class SplitterComponent extends Destroy {
+export class SplitterComponent extends NgxDestroy {
     /**
      * Event triggered when the user start to drag the cursor
      */
diff --git a/projects/status/src/_status-theme.scss b/projects/status/src/_status-theme.scss
index a0a4160a..efd15978 100644
--- a/projects/status/src/_status-theme.scss
+++ b/projects/status/src/_status-theme.scss
@@ -9,33 +9,33 @@
     $success: mat.define-palette(mat.$green-palette);
     $warn: mat.define-palette(mat.$orange-palette);
 
-    app-status {
-        .snackbar {
+    ngx-status {
+        .ngx-snackbar {
             color: mat.get-color-from-palette($primary, default-contrast);
 
-            &.snackbar-success {
+            &.ngx-snackbar-success {
                 background: mat.get-color-from-palette($success);
                 box-shadow:
                     0 4px 20px 0 rgba(0, 0, 0, 0.14),
                     0 7px 10px -5px rgba(mat.get-color-from-palette($success), 0.4);
             }
 
-            &.snackbar-primary,
-            &.snackbar-info {
+            &.ngx-snackbar-primary,
+            &.ngx-snackbar-info {
                 background: mat.get-color-from-palette($primary);
                 box-shadow:
                     0 4px 20px 0 rgba(0, 0, 0, 0.14),
                     0 7px 10px -5px rgba(mat.get-color-from-palette($primary), 0.4);
             }
 
-            &.snackbar-warn {
+            &.ngx-snackbar-warn {
                 background: mat.get-color-from-palette($warn);
                 box-shadow:
                     0 4px 20px 0 rgba(0, 0, 0, 0.14),
                     0 7px 10px -5px rgba(mat.get-color-from-palette($warn), 0.4);
             }
 
-            &.snackbar-danger {
+            &.ngx-snackbar-danger {
                 background: mat.get-color-from-palette($danger);
                 box-shadow:
                     0 4px 20px 0 rgba(0, 0, 0, 0.14),
diff --git a/projects/status/src/status-detail/status-detail-dialog.service.ts b/projects/status/src/status-detail/status-detail-dialog.service.ts
index f8bf1523..1a5ed6ed 100644
--- a/projects/status/src/status-detail/status-detail-dialog.service.ts
+++ b/projects/status/src/status-detail/status-detail-dialog.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, Type } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { AbstractLazyModule, DialogService, LazyLoaderService } from '@hug/ngx-core';
+import { AbstractLazyModule, DialogService, NgxLazyLoaderService } from '@hug/ngx-core';
 
 import { Status } from '../status.model';
 
@@ -9,7 +9,7 @@ import { Status } from '../status.model';
 })
 export class StatusDetailDialogService extends DialogService<void, Status> {
     public constructor(
-        lazyLoaderService: LazyLoaderService,
+        lazyLoaderService: NgxLazyLoaderService,
         dialog: MatDialog
     ) {
         super(lazyLoaderService, dialog, {
@@ -17,7 +17,7 @@ export class StatusDetailDialogService extends DialogService<void, Status> {
             hasBackdrop: true,
             height: '500px',
             width: '700px',
-            panelClass: 'status-panel'
+            panelClass: 'ngx-status-panel'
         } as MatDialogConfig<Status>);
     }
 
diff --git a/projects/status/src/status-detail/status-detail.component.html b/projects/status/src/status-detail/status-detail.component.html
index 6472f076..2cad3bb0 100644
--- a/projects/status/src/status-detail/status-detail.component.html
+++ b/projects/status/src/status-detail/status-detail.component.html
@@ -1,4 +1,4 @@
-<message-box *ngIf="status" [type]="messageBoxType" [title]="status.title || ''" showCloseIcon="true" (close)="dialogRef.close()">
+<ngx-message-box *ngIf="status" [type]="messageBoxType" [title]="status.title || ''" showCloseIcon="true" (close)="dialogRef.close()">
     <p>{{ status.text }}</p>
 
     <p class="detail-error-title">Détails de l'erreur:</p>
@@ -12,4 +12,4 @@
             <mat-icon>content_copy</mat-icon>
         </button>
     </ng-template>
-</message-box>
+</ngx-message-box>
diff --git a/projects/status/src/status-detail/status-detail.component.scss b/projects/status/src/status-detail/status-detail.component.scss
index 9ba67e08..1687abf7 100644
--- a/projects/status/src/status-detail/status-detail.component.scss
+++ b/projects/status/src/status-detail/status-detail.component.scss
@@ -1,9 +1,9 @@
-app-status-detail {
+ngx-status-detail {
     display: flex;
     flex: 1 1 auto;
     height: 100%;
 
-    message-box {
+    ngx-message-box {
         overflow: hidden;
         width: 100%;
 
@@ -43,7 +43,7 @@ app-status-detail {
     }
 }
 
-.status-panel {
+.ngx-status-panel {
     .mat-dialog-container {
         padding: 0;
     }
diff --git a/projects/status/src/status-detail/status-detail.component.ts b/projects/status/src/status-detail/status-detail.component.ts
index c7a4c92d..e0fb67d8 100644
--- a/projects/status/src/status-detail/status-detail.component.ts
+++ b/projects/status/src/status-detail/status-detail.component.ts
@@ -5,7 +5,7 @@ import { MessageBoxType } from '@hug/ngx-message-box';
 import { Status } from '../status.model';
 
 @Component({
-    selector: 'app-status-detail',
+    selector: 'ngx-status-detail',
     styleUrls: ['./status-detail.component.scss'],
     templateUrl: './status-detail.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/status/src/status.component.html b/projects/status/src/status.component.html
index a846406e..d019991c 100644
--- a/projects/status/src/status.component.html
+++ b/projects/status/src/status.component.html
@@ -1,4 +1,4 @@
-<snackbar *ngIf="status" alignment="bottom right" [class.hasInfo]="!!status.technicalText" class="snackbar snackbar-{{ status.type }} {{ status.className }}">
+<ngx-snackbar *ngIf="status" alignment="bottom right" [class.hasInfo]="!!status.technicalText" class="ngx-snackbar ngx-snackbar-{{ status.type }} {{ status.className }}">
     <mat-icon *ngIf="statusIcon">{{ statusIcon }}</mat-icon>
     <span>
         <b>{{ status.title }}</b>
@@ -11,4 +11,4 @@
             <mat-icon class="close" inline (click)="close.next()">close</mat-icon>
         </span>
     </span>
-</snackbar>
+</ngx-snackbar>
diff --git a/projects/status/src/status.component.scss b/projects/status/src/status.component.scss
index 65d5e272..855682b2 100644
--- a/projects/status/src/status.component.scss
+++ b/projects/status/src/status.component.scss
@@ -1,5 +1,5 @@
-app-status {
-    .snackbar {
+ngx-status {
+    .ngx-snackbar {
         border: 0;
         border-radius: 3px;
         line-height: 20px;
diff --git a/projects/status/src/status.component.ts b/projects/status/src/status.component.ts
index 46f57365..de181e3d 100644
--- a/projects/status/src/status.component.ts
+++ b/projects/status/src/status.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, ViewEncapsulation } from '@angular/core';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { catchError, EMPTY, Subject, switchMap, takeUntil, throttleTime } from 'rxjs';
 
-import { Status, StatusAction, StatusType } from './status.model';
 import { StatusDetailDialogService } from './status-detail/status-detail-dialog.service';
+import { Status, StatusAction, StatusType } from './status.model';
 
 @Component({
-    selector: 'app-status',
+    selector: 'ngx-status',
     styleUrls: ['./status.component.scss'],
     templateUrl: './status.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class StatusComponent extends Destroy {
+export class StatusComponent extends NgxDestroy {
 
     public get status(): Status | undefined {
         return this._status;
diff --git a/projects/status/src/status.service.ts b/projects/status/src/status.service.ts
index 4202189e..5ffa1f8b 100644
--- a/projects/status/src/status.service.ts
+++ b/projects/status/src/status.service.ts
@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Inject, Injectable, Injector } from '@angular/core';
-import { Destroy, LazyLoaderService } from '@hug/ngx-core';
+import { NgxDestroy, NgxLazyLoaderService } from '@hug/ngx-core';
 import { mergeWith, switchMap, take, takeUntil, tap, timer } from 'rxjs';
 
 import { Status, StatusAction } from './status.model';
@@ -19,11 +19,11 @@ const durationShort = 8_000;
 @Injectable({
     providedIn: 'root'
 })
-export class StatusService extends Destroy {
+export class StatusService extends NgxDestroy {
 
     public constructor(
         @Inject(DOCUMENT) private document: Document,
-        private lazyLoaderService: LazyLoaderService,
+        private lazyLoaderService: NgxLazyLoaderService,
         private injector: Injector,
         private resolver: ComponentFactoryResolver
     ) {
diff --git a/projects/time-picker/src/time-picker.component.html b/projects/time-picker/src/time-picker.component.html
index 7aa35b4e..42282659 100644
--- a/projects/time-picker/src/time-picker.component.html
+++ b/projects/time-picker/src/time-picker.component.html
@@ -1,7 +1,7 @@
 <!-- Hours -->
 <mat-form-field [appearance]="appearance" class="hours" [class.disabled]="disabled || mode === 'fullTimeWithHoursDisabled'" [style.display]="mode === 'minutesOnly' ? 'none' : 'block'" floatLabel="never">
     <input #hours matInput type="text" [ngModel]="hoursValue | number: '2.'" (change)="onHoursChange$.next($event)" (keydown)="onKeyDown($event, 'hours')" [disabled]="disabled || mode === 'fullTimeWithHoursDisabled'" [maxLength]="2" autocomplete="off" [placeholder]="defaultPlaceholderHours" (click)="onClick('hours')" />
-    <numeric-stepper (increment)="incrementValue('hours')" (decrement)="decrementValue('hours')"></numeric-stepper>
+    <ngx-numeric-stepper (increment)="incrementValue('hours')" (decrement)="decrementValue('hours')"></ngx-numeric-stepper>
 </mat-form-field>
 
 <!-- Separator -->
@@ -10,5 +10,5 @@
 <!-- Minutes -->
 <mat-form-field [appearance]="appearance" class="minutes" [class.disabled]="disabled || mode === 'fullTimeWithMinutesDisabled'" [style.display]="mode === 'hoursOnly' ? 'none' : 'block'" floatLabel="never">
     <input #minutes matInput type="text" [ngModel]="minutesValue | number: '2.'" (change)="onMinutesChange$.next($event)" (keydown)="onKeyDown($event, 'minutes')" [disabled]="disabled || mode === 'fullTimeWithMinutesDisabled'" [maxLength]="2" autocomplete="off" [placeholder]="defaultPlaceholderMinutes" (click)="onClick('minutes')" />
-    <numeric-stepper (increment)="incrementValue('minutes')" (decrement)="decrementValue('minutes')"></numeric-stepper>
+    <ngx-numeric-stepper (increment)="incrementValue('minutes')" (decrement)="decrementValue('minutes')"></ngx-numeric-stepper>
 </mat-form-field>
diff --git a/projects/time-picker/src/time-picker.component.scss b/projects/time-picker/src/time-picker.component.scss
index 7d5ffbf9..992e304b 100644
--- a/projects/time-picker/src/time-picker.component.scss
+++ b/projects/time-picker/src/time-picker.component.scss
@@ -1,4 +1,4 @@
-time-picker {
+ngx-time-picker {
     display: flex;
     flex-direction: row;
     align-items: baseline;
@@ -14,7 +14,7 @@ time-picker {
         }
     }
 
-    mat-form-field[numeric-stepper-form-field] {
+    mat-form-field[ngx-numeric-stepper-form-field] {
         width: 48px;
     }
 
diff --git a/projects/time-picker/src/time-picker.component.ts b/projects/time-picker/src/time-picker.component.ts
index e82d14c7..6e874d7a 100644
--- a/projects/time-picker/src/time-picker.component.ts
+++ b/projects/time-picker/src/time-picker.component.ts
@@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Even
 import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
 import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Destroy } from '@hug/ngx-core';
+import { NgxDestroy } from '@hug/ngx-core';
 import { NumericStepperComponent } from '@hug/ngx-numeric-stepper';
 import { isSameHour, set } from 'date-fns';
 import { debounce, distinctUntilChanged, map, Subject, takeUntil, timer } from 'rxjs';
@@ -20,7 +20,7 @@ type FieldType = 'hours' | 'minutes';
 // TODO sdil refactor rxjs flows
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'time-picker',
+    selector: 'ngx-time-picker',
     styleUrls: ['./time-picker.component.scss'],
     templateUrl: './time-picker.component.html',
     encapsulation: ViewEncapsulation.None,
@@ -33,7 +33,7 @@ type FieldType = 'hours' | 'minutes';
         NumericStepperComponent
     ]
 })
-export class TimePickerComponent extends Destroy implements ControlValueAccessor {
+export class TimePickerComponent extends NgxDestroy implements ControlValueAccessor {
     @ViewChild('hours') public hours?: ElementRef<HTMLInputElement>;
     @ViewChild('minutes') public minutes?: ElementRef<HTMLInputElement>;
 
diff --git a/projects/tooltip/src/tooltip.directive.ts b/projects/tooltip/src/tooltip.directive.ts
index c9f054b8..b78489e6 100644
--- a/projects/tooltip/src/tooltip.directive.ts
+++ b/projects/tooltip/src/tooltip.directive.ts
@@ -1,16 +1,16 @@
 import { Directive, ElementRef, Input } from '@angular/core';
-import { Destroy } from '@hug/ngx-core';
-import { fromEvent, Observable, of, switchMap, take, takeUntil, timer } from 'rxjs';
+import { NgxDestroy } from '@hug/ngx-core';
+import { Observable, fromEvent, of, switchMap, take, takeUntil, timer } from 'rxjs';
 
 @Directive({
-    selector: '[app-tooltip]',
+    selector: '[ngx-tooltip]',
     standalone: true
 })
-export class TooltipDirective extends Destroy {
+export class TooltipDirective extends NgxDestroy {
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    @Input('tooltip-delay') public delay = 300;
+    @Input('ngx-tooltip-delay') public delay = 300;
 
-    @Input('app-tooltip') public openTooltip$?: (element: HTMLElement) => Observable<void>;
+    @Input('ngx-tooltip') public openTooltip$?: (element: HTMLElement) => Observable<void>;
 
     public constructor(elementRef: ElementRef<HTMLElement>) {
         super();
@@ -19,15 +19,15 @@ export class TooltipDirective extends Destroy {
 
         // Install global CSS if not already present
         const docEl = triggerElement.ownerDocument;
-        if (!docEl.head.querySelector('style[data-ngx-tooltip]')) {
+        if (!docEl.head.querySelector('style[data-tooltip]')) {
             const styleEl = docEl.createElement('style');
-            styleEl.setAttribute('data-ngx-tooltip', '');
-            styleEl.textContent = `.tooltip-opening {
+            styleEl.setAttribute('data-tooltip', '');
+            styleEl.textContent = `.ngx-tooltip-opening {
                 opacity: 0;
                 visibility: hidden;
                 transition: opacity 200ms linear;
             }
-            .tooltip-opening.tooltip-opened {
+            .ngx-tooltip-opening.ngx-tooltip-opened {
                 opacity: 1;
                 visibility: visible;
             }`;
diff --git a/projects/tooltip/src/tooltip.service.ts b/projects/tooltip/src/tooltip.service.ts
index 4e3e2b8c..1a08ac67 100644
--- a/projects/tooltip/src/tooltip.service.ts
+++ b/projects/tooltip/src/tooltip.service.ts
@@ -1,12 +1,12 @@
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { Type } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
-import { AbstractLazyModule, LazyLoaderService, subscribeWith } from '@hug/ngx-core';
+import { AbstractLazyModule, NgxLazyLoaderService, subscribeWith } from '@hug/ngx-core';
 import { merge } from 'lodash-es';
-import { debounceTime, delay, EMPTY, filter, fromEvent, map, mergeWith, Observable, shareReplay, Subject, switchMap, tap, withLatestFrom } from 'rxjs';
+import { EMPTY, Observable, Subject, debounceTime, delay, filter, fromEvent, map, mergeWith, shareReplay, switchMap, tap, withLatestFrom } from 'rxjs';
 
-import { TooltipConfig } from './tooltip.model';
 import { TooltipComponentInterface } from './tooltip-component.interface';
+import { TooltipConfig } from './tooltip.model';
 
 export abstract class TooltipService<D> {
     protected close$ = new Subject<void>();
@@ -77,7 +77,7 @@ export abstract class TooltipService<D> {
     ];
 
     public constructor(
-        private lazyLoaderService: LazyLoaderService,
+        private lazyLoaderService: NgxLazyLoaderService,
         private dialog: MatDialog,
         private tooltipConfig?: MatDialogConfig<D>
     ) {
@@ -95,7 +95,7 @@ export abstract class TooltipService<D> {
 
         const config = merge(tooltipConfig, {
             hasBackdrop: false,
-            panelClass: ['tooltip-overlay', 'no-padding-dialog', 'tooltip-opening', ...additionalPanelClass]
+            panelClass: ['ngx-tooltip-overlay', 'no-padding-dialog', 'ngx-tooltip-opening', ...additionalPanelClass]
         } as TooltipConfig<D>);
 
 
@@ -131,7 +131,7 @@ export abstract class TooltipService<D> {
         const close$ = checkClose$.pipe(
             mergeWith(this.close$),
             withLatestFrom(dialogRef$),
-            tap(([_, dialogRef]) => dialogRef.removePanelClass('tooltip-opened')),
+            tap(([_, dialogRef]) => dialogRef.removePanelClass('ngx-tooltip-opened')),
             delay(300),
             tap(([response, dialogRef]) => dialogRef.close(response))
         );
@@ -243,7 +243,7 @@ export abstract class TooltipService<D> {
                             left: `${left}px`,
                             top: `${top}px`
                         });
-                        dialogRef.addPanelClass('tooltip-opened');
+                        dialogRef.addPanelClass('ngx-tooltip-opened');
 
                         return true;
                     });
diff --git a/projects/user-card/src/_user-card-theme.scss b/projects/user-card/src/_user-card-theme.scss
index 9384997e..e0d523b2 100644
--- a/projects/user-card/src/_user-card-theme.scss
+++ b/projects/user-card/src/_user-card-theme.scss
@@ -4,7 +4,7 @@
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    user-card {
+    ngx-user-card {
         background-color: mat.get-color-from-palette($background, card);
         @include mat.elevation(3);
 
diff --git a/projects/user-card/src/user-card.component.html b/projects/user-card/src/user-card.component.html
index beaebd8e..b3c64f80 100644
--- a/projects/user-card/src/user-card.component.html
+++ b/projects/user-card/src/user-card.component.html
@@ -1,4 +1,4 @@
-<div class="user-card-header">
+<div class="ngx-user-card-header">
     <span class="header-badge" *ngIf="userCard.badgeColor as badgeColor" [ngClass]="badgeColor + '-badge'"></span>
     <div class="header-infos">
         <div class="header-fullname">
@@ -8,9 +8,9 @@
         <div class="header-function">{{ userCard.function }}{{ userCard.specialty ? ' - ' + userCard.specialty : '' }}</div>
     </div>
 </div>
-<div class="user-card-wrapper" *ngIf="expanded">
+<div class="ngx-user-card-wrapper" *ngIf="expanded">
     <hr />
-    <div class="user-card-content">
+    <div class="ngx-user-card-content">
         <div class="content-service">
             <div class="label">Service</div>
             <div class="value">{{ userCard.service ?? '-' }}</div>
diff --git a/projects/user-card/src/user-card.component.scss b/projects/user-card/src/user-card.component.scss
index 510f4294..62fb4bc8 100644
--- a/projects/user-card/src/user-card.component.scss
+++ b/projects/user-card/src/user-card.component.scss
@@ -5,7 +5,7 @@ user-card {
     width: 350px;
     word-break: break-word;
 
-    > .user-card-header {
+    > .ngx-user-card-header {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -63,7 +63,7 @@ user-card {
         }
     }
 
-    > .user-card-wrapper {
+    > .ngx-user-card-wrapper {
         overflow: hidden;
     }
 
@@ -72,7 +72,7 @@ user-card {
         margin: 1rem 0;
     }
 
-    .user-card-content {
+    .ngx-user-card-content {
         display: grid;
         grid-template-columns: 3fr 2fr;
         grid-template-rows: auto;
diff --git a/projects/user-card/src/user-card.component.ts b/projects/user-card/src/user-card.component.ts
index 00e6e97b..11e01708 100644
--- a/projects/user-card/src/user-card.component.ts
+++ b/projects/user-card/src/user-card.component.ts
@@ -26,7 +26,7 @@ interface DisplayableUserCard {
 }
 
 @Component({
-    selector: 'user-card',
+    selector: 'ngx-user-card',
     styleUrls: ['./user-card.component.scss'],
     templateUrl: './user-card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/user-tooltip/src/user-tooltip.component.html b/projects/user-tooltip/src/user-tooltip.component.html
index 4cea73d7..879bca42 100644
--- a/projects/user-tooltip/src/user-tooltip.component.html
+++ b/projects/user-tooltip/src/user-tooltip.component.html
@@ -1 +1 @@
-<user-card [user]="user"></user-card>
+<ngx-user-card [user]="user"></ngx-user-card>
diff --git a/projects/user-tooltip/src/user-tooltip.component.ts b/projects/user-tooltip/src/user-tooltip.component.ts
index 884bd516..74368094 100644
--- a/projects/user-tooltip/src/user-tooltip.component.ts
+++ b/projects/user-tooltip/src/user-tooltip.component.ts
@@ -4,7 +4,7 @@ import { TooltipComponentInterface } from '@hug/ngx-tooltip';
 import { UserCard } from '@hug/ngx-user-card';
 
 @Component({
-    selector: 'app-user-tooltip',
+    selector: 'ngx-user-tooltip',
     templateUrl: './user-tooltip.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/projects/user-tooltip/src/user-tooltip.service.ts b/projects/user-tooltip/src/user-tooltip.service.ts
index 26e407da..57d53c70 100644
--- a/projects/user-tooltip/src/user-tooltip.service.ts
+++ b/projects/user-tooltip/src/user-tooltip.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, Type } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { AbstractLazyModule, LazyLoaderService } from '@hug/ngx-core';
+import { AbstractLazyModule, NgxLazyLoaderService } from '@hug/ngx-core';
 import { TooltipComponentInterface, TooltipService } from '@hug/ngx-tooltip';
 import { UserCard } from '@hug/ngx-user-card';
 
@@ -9,7 +9,7 @@ import { UserCard } from '@hug/ngx-user-card';
 })
 export class UserTooltipService extends TooltipService<UserCard> {
     public constructor(
-        lazyLoaderService: LazyLoaderService,
+        lazyLoaderService: NgxLazyLoaderService,
         dialog: MatDialog
     ) {
         super(lazyLoaderService, dialog, {