[FIX TRTL-454] Fix toggle label

[US TRTL-461] custom tooltip

[US TRTL-461] new tooltip

ui/ui-frontend-common/src/app/modules/components/common-tooltip/TooltipType.enum.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+export enum TooltipType {
+  TOP = 'TOP',
+  BOTTOM = 'BOTTOM',
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT',
+}

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html

+  <div class="d-flex">
+    <div class="tooltip-custom {{className}}" [class.outline]="outline" @tooltip>{{ text }}</div>
+  </div>

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.scss

+:host {
+  --color: var(--vitamui-secondary-900);
+  --color-font: var(--vitamui-secondary-900-font);
+
+  .tooltip-custom {
+    display: inline-flex;
+    padding: 4px;
+    border: 1px solid var(--vitamui-secondary-900);
+    background-color: var(--color);
+    border-radius: 5px;
+    position: relative;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    color: var(--color-font);
+    left: 4px;
+    bottom: 0px;
+    max-width: 100px;
+
+    &:before {
+      content: "";
+      position: absolute;
+      background-color: var(--color);
+
+      border-style: solid;
+      width: 8px;
+      height: 8px;
+      transform: rotate(-45deg);
+      border-color: var(--vitamui-secondary-900);
+    }
+
+    &.BOTTOM {
+      margin-top: 1rem;
+      &:before {
+        top: 0;
+        margin-top: -5px;
+        border-width: 1px 1px 0 0;
+        border-radius: 0 2px 0 0;
+        margin-left: 4px;
+      }
+    }
+    &.TOP {
+      margin-bottom: 1rem;
+      &:before {
+        bottom: 0;
+        margin-bottom: -5px;
+        border-width: 0 0 1px 1px;
+        border-radius: 0 0 0 2px;
+        margin-left: 4px;
+      }
+    }
+    &.LEFT {
+      margin-right: 1rem;
+      &:before {
+        right: 0;
+        margin-right: -5px;
+        border-width: 0 1px 1px 0;
+        border-radius: 0 0 2px 0;
+        margin-top: 4px;
+      }
+    }
+    &.RIGHT {
+      margin-left: 1rem;
+      &:before {
+        left: 0;
+        margin-left: -5px;
+        border-width: 1px 0 0 1px;
+        border-radius: 2px 0 0 0;
+        margin-top: 4px;
+      }
+    }
+  }
+  .tooltip-custom.outline {
+    --color: white;
+    --color-font: var(--vitamui-secondary-900);
+  }
+}

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'vitamui-common-tooltip',
+  templateUrl: './common-tooltip.component.html',
+  styleUrls: ['./common-tooltip.component.scss'],
+  animations: [
+    trigger('tooltip', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate(300, style({ opacity: 1 })),
+      ]),
+      transition(':leave', [
+        animate(300, style({ opacity: 0 })),
+      ]),
+    ]),
+  ],
+})
+export class CommonTooltipComponent implements OnInit {
+
+  constructor() { }
+
+ public text = '';
+ public className: string;
+public outline: boolean;
+
+  ngOnInit() {
+  }
+
+
+
+}

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.directive.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import {
+  ConnectedPosition,
+  Overlay,
+  OverlayPositionBuilder,
+  OverlayRef,
+} from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import {
+  ComponentRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { CommonTooltipComponent } from './common-tooltip.component';
+import { TooltipType } from './TooltipType.enum';
+
+@Directive({
+  selector: '[vitamuiCommonToolTip]',
+})
+export class CommonTooltipDirective implements OnInit {
+  @Input('vitamuiCommonToolTip') text = '';
+  @Input() type = 'BOTTOM';
+  @Input() outline = false;
+
+  private overlayRef: OverlayRef;
+
+  constructor(
+    private overlay: Overlay,
+    private overlayPositionBuilder: OverlayPositionBuilder,
+    private elementRef: ElementRef
+  ) {}
+
+  ngOnInit(): void {
+    const position = this.buildPosition(this.type);
+    const positionStrategy = this.overlayPositionBuilder
+      .flexibleConnectedTo(this.elementRef)
+      .withPositions([position]);
+
+    this.overlayRef = this.overlay.create({ positionStrategy });
+  }
+
+  @HostListener('mouseenter')
+  show() {
+    const tooltipPortal = new ComponentPortal(CommonTooltipComponent);
+    const tooltipRef: ComponentRef<CommonTooltipComponent> = this.overlayRef.attach(
+      tooltipPortal
+    );
+    tooltipRef.instance.text = this.text;
+    tooltipRef.instance.className = this.type;
+    tooltipRef.instance.outline = this.outline;
+  }
+
+  @HostListener('mouseout')
+  hide() {
+     this.overlayRef.detach();
+  }
+
+  private buildPosition(type: string): ConnectedPosition {
+    switch (type) {
+      case TooltipType.TOP: {
+        return {
+          originX: 'center',
+          originY: 'top',
+          overlayX: 'center',
+          overlayY: 'bottom',
+        };
+      }
+      case TooltipType.BOTTOM:
+        return {
+          originX: 'center',
+          originY: 'bottom',
+          overlayX: 'center',
+          overlayY: 'top',
+        };
+      case TooltipType.LEFT:
+        return {
+          originX: 'start',
+          originY: 'center',
+          overlayX: 'end',
+          overlayY: 'center',
+        };
+
+      case TooltipType.RIGHT:
+        return {
+          originX: 'end',
+          originY: 'center',
+          overlayX: 'start',
+          overlayY: 'center',
+        };
+    }
+  }
+}

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.module.ts

+import { CommonTooltipDirective } from './common-tooltip.directive';
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommonProgressBarComponent } from './../common-progress-bar/common-progress-bar.component';
+import { CommonTooltipComponent } from './common-tooltip.component';
+
+@NgModule({
+  imports: [CommonModule, MatTooltipModule],
+  declarations: [CommonTooltipComponent, CommonTooltipDirective],
+  exports: [CommonTooltipComponent, CommonTooltipDirective, MatTooltipModule],
+  entryComponents: [CommonTooltipComponent],
+})
+export class CommonTooltipModule {}

ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts

@@ -39,6 +39,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { CommonTooltipModule } from './components/common-tooltip/common-tooltip.module';
 import { SelectTenantModule } from './components/header/select-tenant/select-tenant.module';
 import { VitamuiBodyModule } from './components/vitamui-body/vitamui-body.module';
 import { VitamUIDisplayNodeModule } from './components/vitamui-display-node/vitamui-display-node.module';
@@ -158,7 +159,6 @@ export function startupServiceFactory(startupService: StartupService) {
     ScrollTopModule,
     FooterModule,
     VitamuiBodyModule,
-    TranslateVitamModule,
     VitamuiContentBreadcrumbModule,
     VitamuiCommonBannerModule,
     VitamuiCommonMoreButtonModule,
@@ -210,12 +210,12 @@ export function startupServiceFactory(startupService: StartupService) {
     FooterModule,
     VitamuiBodyModule,
     PipesModule,
-    TranslateVitamModule,
     VitamuiContentBreadcrumbModule,
     VitamuiCommonBannerModule,
     VitamuiCommonMoreButtonModule,
     UserPhotoModule,
     CommonProgressBarModule,
+    CommonTooltipModule,
 
   ],
   providers: [

ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts

@@ -42,6 +42,7 @@ import { ButtonsComponent } from './components/buttons/buttons.component';
 import { InputsComponent } from './components/inputs/inputs.component';
 import { ProgressBarComponent } from './components/progress-bar/progress-bar.component';
 import { SwitchComponent } from './components/switch/switch.component';
+import { TooltipComponent } from './components/tooltip/tooltip.component';
 import { StarterKitComponent } from './starter-kit/starter-kit.component';
 
 const routes: Routes = [
@@ -55,6 +56,8 @@ const routes: Routes = [
   { path: 'buttons', component: ButtonsComponent },
   { path: 'switchs', component: SwitchComponent },
   { path: 'progress-bar', component: ProgressBarComponent },
+  { path: 'tooltip', component: TooltipComponent },
+
   { path: '**', redirectTo: '' },
 ];
 

ui/ui-frontend/projects/starter-kit/src/app/app.component.html

@@ -13,6 +13,8 @@
         <mat-list-item routerLink="/inputs">Inputs</mat-list-item>
         <mat-list-item routerLink="/breadcrumbs">Breadcrumb</mat-list-item>
         <mat-list-item routerLink="/progress-bar">Progress Bar</mat-list-item>
+        <mat-list-item routerLink="/tooltip">Tooltip</mat-list-item>
+
         <mat-list-item routerLink="">
             <i class="material-icons">help</i>
         </mat-list-item>

ui/ui-frontend/projects/starter-kit/src/app/app.module.ts

@@ -52,8 +52,8 @@ import { ButtonsModule } from './components/buttons/buttons.module';
 import { InputsModule } from './components/inputs/inputs.module';
 import { ProgressBarModule } from './components/progress-bar/progress-bar.module';
 import { SwitchModule } from './components/switch/switch.module';
+import { TooltipModule } from './components/tooltip/tooltip.module';
 import { StarterKitModule } from './starter-kit/starter-kit.module';
-
 registerLocaleData(localeFr, 'fr');
 
 @NgModule({
@@ -71,16 +71,15 @@ registerLocaleData(localeFr, 'fr');
     StarterKitModule,
     LoggerModule.forRoot(),
     QuicklinkModule,
-
     ButtonsModule,
     BreadcrumbModule,
     SwitchModule,
     InputsModule,
     ProgressBarModule,
+    TooltipModule,
     MatCardModule,
     MatSidenavModule,
     MatListModule,
-    VitamUICommonModule
   ],
   providers: [
     Title,

ui/ui-frontend/projects/starter-kit/src/app/components/tooltip/tooltip.component.html

+<div>
+  <h1>Dark tooltip</h1>
+  <button  vitamuiCommonToolTip="TOP" type="TOP">Tooltip TOP DARK</button>
+  <button  vitamuiCommonToolTip="BOTTOM" type="BOTTOM">Tooltip BOTTOM DARK</button>
+  <button  vitamuiCommonToolTip="LEFT" type="LEFT">Tooltip LEFT DARK</button>
+  <button  vitamuiCommonToolTip="RIGHT" type="RIGHT">Tooltip RIGHT DARK</button>
+  <button  vitamuiCommonToolTip="DEFAULT">DEFAULT DARK</button>
+</div>
+
+
+<div>
+  <h1>Outline Tooltip : </h1>
+  <button  vitamuiCommonToolTip="TOP" type="TOP" outline="true">Tooltip TOP LIGHT</button>
+  <button  vitamuiCommonToolTip="BOTTOM" type="BOTTOM"outline="true">Tooltip BOTTOM LIGHT</button>
+  <button  vitamuiCommonToolTip="LEFT" type="LEFT"outline="true">Tooltip LEFT LIGHT</button>
+  <button  vitamuiCommonToolTip="RIGHT" type="RIGHT"outline="true">Tooltip RIGHT LIGHT</button>
+  <button  vitamuiCommonToolTip="DEFAULT"outline="true">DEFAULT LIGHT</button>
+</div>

ui/ui-frontend/projects/starter-kit/src/app/components/tooltip/tooltip.component.scss

+button {
+  margin: 3rem;
+}

ui/ui-frontend/projects/starter-kit/src/app/components/tooltip/tooltip.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tooltip',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.scss']
+})
+export class TooltipComponent implements OnInit {
+
+public progressValue: number;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+
+}

ui/ui-frontend/projects/starter-kit/src/app/components/tooltip/tooltip.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { VitamUICommonModule } from 'ui-frontend-common';
+import { TooltipComponent } from './tooltip.component';
+
+@NgModule({
+  declarations: [TooltipComponent],
+  imports: [CommonModule, VitamUICommonModule, ReactiveFormsModule],
+  exports: [TooltipComponent],
+})
+export class TooltipModule {}