feature: add tooltip module

CSETWebNg/package.json

@@ -33,7 +33,6 @@
         "@angular/platform-browser-dynamic": "^18.2.11",
         "@angular/platform-server": "^18.2.11",
         "@angular/router": "^18.2.11",
-        "@cloudfactorydk/ng2-tooltip-directive": "^18.0.0",
         "@fortawesome/angular-fontawesome": "^0.15.0",
         "@fortawesome/fontawesome-free": "^6.6.0",
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
@@ -66,8 +65,8 @@
         "ngx-ellipsis": "^5.0.1",
         "pdfmake": "^0.2.18",
         "rxjs": "^7.8.1",
-        "sass": "^1.83.4",
         "sanitize-html": "^2.14.0",
+        "sass": "^1.83.4",
         "screenfull": "^5.2.0",
         "style-loader": "^4.0.0",
         "swiper": "^8.4.7",

CSETWebNg/src/app/app.module.ts

@@ -337,7 +337,7 @@ import { CisCommentsmarkedComponent } from './reports/cis-commentsmarked/cis-com
 import { MaturityQuestionsAcetComponent } from './assessment/questions/maturity-questions/maturity-questions-acet.component';
 import { MaturityQuestionsIseComponent } from './assessment/questions/maturity-questions/maturity-questions-ise.component';
 import { EdmComponent } from './reports/edm/edm.component';
-import { TooltipModule } from '@cloudfactorydk/ng2-tooltip-directive';
+import { TooltipModule } from './tooltip/tooltip.module';
 import { QuestionTextComponent } from './assessment/questions/question-text/question-text.component';
 import { QuestionTextCpgComponent } from './assessment/questions/question-text/question-text-cpg/question-text-cpg.component';
 import { AcetFilteringService } from './services/filtering/maturity-filtering/acet-filtering.service';

CSETWebNg/src/app/tooltip/options.interface.ts

@@ -0,0 +1,37 @@
+export interface TooltipOptions {
+    'placement'?: string;
+    'autoPlacement'?: boolean;
+    'content-type'?: 'string' | 'html' | 'template';
+    'contentType'?: 'string' | 'html' | 'template';
+    'delay'?: number;
+    'show-delay'?: number;
+    'showDelay'?: number;
+    'hide-delay'?: number;
+    'hideDelay'?: number;
+    'hide-delay-mobile'?: number;
+    'hideDelayMobile'?: number;
+    'hideDelayTouchscreen'?: number;
+    'z-index'?: number;
+    'zIndex'?: number;
+    'animation-duration'?: number;
+    'animationDuration'?: number;
+    'animation-duration-default'?: number;
+    'animationDurationDefault'?: number;
+    'trigger'?: string;
+    'tooltip-class'?: string;
+    'tooltipClass'?: string;
+    'display'?: boolean;
+    'display-mobile'?: boolean;
+    'displayMobile'?: boolean;
+    'displayTouchscreen'?: boolean;
+    'shadow'?: boolean;
+    'theme'?: "dark" | "light";
+    'offset'?: number;
+    'width'?: string;
+    'max-width'?: string;
+    'maxWidth'?: string;
+    'id'?: string | number;
+    'hideDelayAfterClick'?: number;
+    'pointerEvents'?: 'auto' | 'none';
+    'position'?: {top: number, left: number};
+}

CSETWebNg/src/app/tooltip/options.service.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { TooltipOptions } from './options.interface';
+
+/**
+ * This is not a real service, but it looks like it from the outside.
+ * It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
+ */
+export const TooltipOptionsService = new InjectionToken<TooltipOptions>('TooltipOptions');

CSETWebNg/src/app/tooltip/options.ts

@@ -0,0 +1,38 @@
+export const defaultOptions = {
+	'placement': 'top',
+	'autoPlacement': true,
+	'contentType': 'string',
+	'showDelay': 0,
+	'hideDelay': 300,
+	'hideDelayMobile': 0,
+	'hideDelayTouchscreen': 0,
+	'zIndex': 0,
+	'animationDuration': 300,
+	'animationDurationDefault': 300,
+	'trigger': 'hover',
+	'tooltipClass': '',
+	'display': true,
+	'displayMobile': true,
+	'displayTouchscreen': true,
+	'shadow': true,
+	'theme': 'dark',
+	'offset': 8,
+	'maxWidth': '',
+	'id': false,
+	'hideDelayAfterClick': 2000
+}
+
+export const backwardCompatibilityOptions:any = {
+    'delay': 'showDelay',
+    'show-delay': 'showDelay',
+    'hide-delay': 'hideDelay',
+    'hide-delay-mobile': 'hideDelayTouchscreen',
+    'hideDelayMobile': 'hideDelayTouchscreen',
+    'z-index': 'zIndex',
+    'animation-duration': 'animationDuration',
+    'animation-duration-default': 'animationDurationDefault',
+    'tooltip-class': 'tooltipClass',
+    'display-mobile': 'displayTouchscreen',
+    'displayMobile': 'displayTouchscreen',
+    'max-width': 'maxWidth'
+}

CSETWebNg/src/app/tooltip/tooltip.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+
+<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
+
+	<ng-container *ngTemplateOutlet="value"></ng-container>
+</div>
+
+<ng-template #htmlOrStringTemplate>
+	<div [innerHTML]="value"></div>
+</ng-template>

CSETWebNg/src/app/tooltip/tooltip.component.sass

@@ -0,0 +1,126 @@
+\:host
+  max-width: 200px
+  background-color: black
+  color: #fff
+  text-align: center
+  border-radius: 6px
+  padding: 5px 8px
+  position: absolute
+  pointer-events: none
+  z-index: 1000
+  display: block
+  opacity: 0
+  -webkit-transition: opacity 300ms
+  -moz-transition: opacity 300ms
+  -o-transition: opacity 300ms
+  transition: opacity 300ms
+  top: 0
+  left: 0
+
+\:host.tooltip-show
+  opacity: 1
+
+\:host.tooltip-shadow
+  box-shadow: 0 7px 15px -5px rgba(0, 0, 0, 0.4)
+\:host.tooltip-light.tooltip-shadow
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.4)
+
+\:host.tooltip::after
+  content: ""
+  position: absolute
+  border-style: solid
+
+\:host.tooltip-top::after 
+  top: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: black transparent transparent transparent
+
+\:host.tooltip-bottom::after
+  bottom: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent black transparent
+
+\:host.tooltip-left::after
+  top: 50%
+  left: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent transparent transparent black
+
+\:host.tooltip-right::after 
+  top: 50%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent black transparent transparent
+
+// Light
+\:host.tooltip-light::after
+  display: none 
+
+\:host.tooltip-light
+  border: 1px solid rgba(0,0,0,.06)
+  background-color: #fff 
+  color: black
+  .tooltip-arrow
+    position: absolute
+    width: 10px
+    height: 10px
+    transform: rotate(135deg)
+    background-color: rgba(0,0,0,.07)
+  .tooltip-arrow::after 
+    background-color: #fff 
+    content: ''
+    display: block 
+    position: absolute
+    width: 10px
+    height: 10px
+
+\:host.tooltip-top.tooltip-light
+  margin-top: -2px
+  .tooltip-arrow
+    top: 100%
+    left: 50%
+    margin-top: -4px
+    margin-left: -5px
+    background: linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)
+  .tooltip-arrow::after 
+    top: 1px
+    right: 1px
+
+\:host.tooltip-bottom.tooltip-light
+  .tooltip-arrow
+    bottom: 100%
+    left: 50%
+    margin-bottom: -4px
+    margin-left: -5px
+    background: linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)
+  .tooltip-arrow::after 
+    top: -1px
+    right: -1px
+
+\:host.tooltip-left.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    left: 100%
+    margin-top: -5px
+    margin-left: -4px
+    background: linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)
+  .tooltip-arrow::after 
+    top: 1px
+    right: -1px
+
+\:host.tooltip-right.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    right: 100%
+    margin-top: -5px
+    margin-right: -4px 
+    background: linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)
+  .tooltip-arrow::after 
+    top: -1px
+    right: 1px