Angular 18 migration

ui-ngx/package.json

@@ -28,6 +28,7 @@
     "@date-io/date-fns": "1.3.7",
     "@flowjs/flow.js": "^2.14.1",
     "@flowjs/ngx-flow": "~0.8.1",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@geoman-io/leaflet-geoman-free": "2.14.2",
     "@iplab/ngx-color-picker": "^18.0.1",
     "@mat-datetimepicker/core": "~14.0.0",

ui-ngx/src/app/core/services/dynamic-component-factory.service.ts

@@ -18,6 +18,7 @@ import { Component, Injectable, Type, ɵComponentDef, ɵNG_COMP_DEF } from '@ang
 import { from, Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { mergeMap } from 'rxjs/operators';
+import { guid } from '@core/utils';
 
 @Injectable({
     providedIn: 'root'
@@ -60,7 +61,8 @@ export class DynamicComponentFactoryService {
       imports,
       preserveWhitespaces,
       styles,
-      standalone: true
+      standalone: true,
+      selector: 'tb-dynamic-component#' + guid()
     })(componentType);
     // Trigger component compilation
     return comp[ɵNG_COMP_DEF];

ui-ngx/src/app/core/translate/translate-default-compiler.ts

@@ -33,7 +33,7 @@ export class TranslateDefaultCompiler extends TranslateMessageFormatCompiler {
     super(config);
   }
 
-  public compile(value: string, lang: string): (params: any) => string {
+  public compile(value: string, lang: string): any {
     return this.defaultCompile(value, lang);
   }
 

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html

@@ -16,5 +16,5 @@
 
 -->
 <button mat-icon-button #showNotificationButton (click)="showNotification($event, showNotificationButton)">
-  <mat-icon class="material-icons" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
+  <mat-icon class="material-icons" aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
 </button>

ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts

@@ -310,7 +310,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange
           }
         }),
         filter((value) => typeof value === 'string'),
-        map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+        map((value) => value ? value : ''),
         mergeMap(name => this.fetchKeys(name) ),
         share()
       );

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts

@@ -107,9 +107,9 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   }
   let lowerLeft: number[];
   if (offset !== 0 && isNumeric(value)) {
-    lowerLeft = api.coord([startTime, value >= 0 ? Number(value) + offset : offset]);
+    lowerLeft = api.coord([startTime, Number(value) >= 0 ? Number(value) + offset : offset]);
   } else {
-    lowerLeft = api.coord([startTime, value >= 0 ? value : 0]);
+    lowerLeft = api.coord([startTime, value]);
   }
   const size = api.size([delta, value]);
   const width = size[0];
@@ -140,7 +140,7 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
 
   if (renderCtx.labelOption.show) {
     let position = renderCtx.labelOption.position;
-    if (value < 0) {
+    if (Number(value) < 0) {
       if (position === 'top') {
         position = 'bottom';
       } else if (position === 'bottom') {
@@ -164,7 +164,7 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   }
 
   let borderRadius: number[];
-  if (value < 0) {
+  if (Number(value) < 0) {
     borderRadius = [0, 0, renderCtx.visualSettings.borderRadius, renderCtx.visualSettings.borderRadius];
   } else {
     borderRadius = [renderCtx.visualSettings.borderRadius, renderCtx.visualSettings.borderRadius, 0, 0];

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts

@@ -1012,7 +1012,6 @@ export const createTimeSeriesXAxis = (id: string,
       mainType: 'xAxis',
       show: settings.show,
       type: 'time',
-      scale: true,
       position: settings.position,
       id,
       name: utils.customTranslation(settings.label, settings.label),

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@@ -54,7 +54,7 @@ import {
   TbFlotTicksFormatterFunction,
   TooltipValueFormatFunction
 } from './flot-widget.models';
-import * as moment_ from 'moment';
+import moment_ from 'moment';
 import tinycolor from 'tinycolor2';
 import { AggregationType, IntervalMath } from '@shared/models/time/time.models';
 import { CancelAnimationFrame } from '@core/services/raf.service';

ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { UtilsService } from '@core/services/utils.service';
@@ -55,11 +55,11 @@ interface SwitchSettings {
   templateUrl: './switch.component.html',
   styleUrls: ['./switch.component.scss']
 })
-export class SwitchComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy {
+export class SwitchComponent extends PageComponent implements AfterViewInit, OnDestroy {
 
   @ViewChild('switch', {static: false}) switchElementRef: ElementRef<HTMLElement>;
   @ViewChild('switchContainer', {static: false}) switchContainerRef: ElementRef<HTMLElement>;
-  @ViewChild('matSlideToggle', {static: false}) matSlideToggleRef: MatSlideToggle;
+  @ViewChild('matSlideToggle', {static: false, read: ElementRef}) matSlideToggleRef: ElementRef<HTMLElement>;
   @ViewChild('onoffContainer', {static: false}) onoffContainerRef: ElementRef<HTMLElement>;
   @ViewChild('onLabel', {static: false}) onLabelRef: ElementRef<HTMLElement>;
   @ViewChild('offLabel', {static: false}) offLabelRef: ElementRef<HTMLElement>;
@@ -119,14 +119,11 @@ export class SwitchComponent extends PageComponent implements OnInit, AfterViewI
     super(store);
   }
 
-  ngOnInit(): void {
-  }
-
   ngAfterViewInit() {
     if (this.switchType === 'switch') {
       this.switchElement = $(this.switchElementRef.nativeElement);
       this.switchContainer = $(this.switchContainerRef.nativeElement);
-      this.matSlideToggle = $(this.matSlideToggleRef._elementRef.nativeElement);
+      this.matSlideToggle = $(this.matSlideToggleRef.nativeElement);
       this.onoffContainer = $(this.onoffContainerRef.nativeElement);
       this.onLabel = $(this.onLabelRef.nativeElement);
       this.offLabel = $(this.offLabelRef.nativeElement);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.ts

@@ -194,7 +194,7 @@ export class DataKeyInputComponent implements ControlValueAccessor, OnInit, OnCh
         }
       }),
       filter((value) => typeof value === 'string'),
-      map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+      map((value) => value ? value : ''),
       mergeMap(name => this.fetchKeys(name) ),
       share()
     );

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss

@@ -97,6 +97,9 @@
         line-height: 24px;
         font-size: 16px;
         font-weight: 500;
+        .mat-pseudo-checkbox {
+          display: none;
+        }
       }
 
       .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {

ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss

@@ -63,6 +63,9 @@
       font-size: 14px;
       font-weight: 500;
       letter-spacing: .25px;
+      .mat-pseudo-checkbox {
+        display: none;
+      }
     }
 
     .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {

ui-ngx/src/app/shared/components/cheatsheet.component.ts

@@ -17,7 +17,7 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { MousetrapInstance } from 'mousetrap';
-import * as Mousetrap from 'mousetrap';
+import Mousetrap from 'mousetrap';
 
 @Component({
   selector : 'tb-hotkeys-cheatsheet',

ui-ngx/src/app/shared/components/color-picker/color-picker.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="color-input-container">
-  <saturation-component class="saturation-component" [hue]="control.hue" [(color)]="control.value"></saturation-component>
+  <saturation-component class="saturation-component" [(color)]="control.value"></saturation-component>
 
   <div class="control-input-container">
     <div class="control-component">
@@ -25,7 +25,7 @@
                            [color]="control.value">
       </indicator-component>
       <div class="hue-alpha-range">
-        <hue-component [(hue)]="control.hue" [(color)]="control.value"></hue-component>
+        <hue-component [(color)]="control.value"></hue-component>
         <alpha-component [(color)]="control.value"></alpha-component>
       </div>
     </div>
@@ -38,9 +38,9 @@
       </mat-select>
       <div class="color-input" [ngSwitch]="presentations[presentationControl.value]">
         <rgba-input-component *ngSwitchCase="'rgba'" label
-                              [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>
+                              [(color)]="control.value"></rgba-input-component>
         <hsla-input-component *ngSwitchCase="'hsla'" label
-                              [(color)]="control.value" [(hue)]="control.hue"></hsla-input-component>
+                              [(color)]="control.value"></hsla-input-component>
         <tb-hex-input *ngSwitchCase="'hex'" [(color)]="control.value"></tb-hex-input>
       </div>
     </div>
@@ -48,5 +48,5 @@
 </div>
 
 <div class="color-presets-block">
-  <color-presets-component class="color-presets-component" [columns]="6" [colorPresets]="colorPresets" [(color)]="control.value" [(hue)]="control.hue"></color-presets-component>
+  <color-presets-component class="color-presets-component" [columns]="6" [colorPresets]="colorPresets" [(color)]="control.value"></color-presets-component>
 </div>

ui-ngx/src/app/shared/components/dialog.component.ts

@@ -19,7 +19,7 @@ import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { MatDialogRef } from '@angular/material/dialog';
-import { NavigationStart, Router, RouterEvent } from '@angular/router';
+import { NavigationStart, Router, Event } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -34,7 +34,7 @@ export abstract class DialogComponent<T, R = any> extends PageComponent implemen
     super(store);
     this.routerSubscription = this.router.events
       .pipe(
-        filter((event: RouterEvent) => event instanceof NavigationStart),
+        filter((event: Event) => event instanceof NavigationStart),
         filter(() => !!this.dialogRef)
       )
       .subscribe(() => {

ui-ngx/src/app/shared/components/entity/entity-list.component.ts

@@ -158,7 +158,7 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV
         }
       }),
       filter((value) => typeof value === 'string'),
-      map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+      map((value) => value ? value : ''),
       mergeMap(name => this.fetchEntities(name) ),
       share()
     );

ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts

@@ -177,7 +177,7 @@ export class EntityTypeListComponent implements ControlValueAccessor, OnInit, Af
           }
         }),
         filter((value) => typeof value === 'string'),
-        map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+        map((value) => value ? value : ''),
         mergeMap(name => this.fetchEntityTypes(name) ),
         share()
       );

ui-ngx/src/app/shared/components/marked-options.service.ts

@@ -19,7 +19,7 @@ import { Inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
-import { Tokenizer, marked } from 'marked';
+import { Tokens, marked, TokenizerObject } from 'marked';
 import { Clipboard } from '@angular/cdk/clipboard';
 
 const copyCodeBlock = '{:copy-code}';
@@ -31,7 +31,7 @@ const targetBlankBlock = '{:target="_blank"}';
 @Injectable({
   providedIn: 'root'
 })
-export class MarkedOptionsService extends MarkedOptions {
+export class MarkedOptionsService implements MarkedOptions {
 
   renderer = new MarkedRenderer();
   headerIds = true;
@@ -50,10 +50,9 @@ export class MarkedOptionsService extends MarkedOptions {
               private clipboardService: Clipboard,
               @Inject(WINDOW) private readonly window: Window,
               @Inject(DOCUMENT) private readonly document: Document) {
-    super();
     // @ts-ignore
-    const tokenizer: Tokenizer = {
-      autolink(src: string, mangle: (cap: string) => string): marked.Tokens.Link {
+    const tokenizer: TokenizerObject = {
+      autolink(src: string): Tokens.Link {
         if (src.endsWith(copyCodeBlock)) {
           return undefined;
         } else {
@@ -61,7 +60,7 @@ export class MarkedOptionsService extends MarkedOptions {
           return false;
         }
       },
-      url(src: string, mangle: (cap: string) => string): marked.Tokens.Link {
+      url(src: string): Tokens.Link {
         if (src.endsWith(copyCodeBlock)) {
           return undefined;
         } else {

ui-ngx/src/app/shared/components/socialshare-panel.component.html

@@ -26,7 +26,7 @@
     <mat-icon svgIcon="mdi:facebook"></mat-icon>
   </button>
   <button mat-mini-fab color="primary"
-          shareButton="twitter"
+          shareButton="x"
           title="{{ shareTitle }}"
           tags="{{ shareHashTags }}"
           url="{{ shareLink }}"

ui-ngx/src/app/shared/components/socialshare-panel.component.ts

@@ -16,7 +16,6 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { isLocalUrl } from '@core/utils';
-import { ShareButtonDirective } from 'ngx-sharebuttons';
 
 @Component({
   selector: 'tb-social-share-panel',

ui-ngx/src/app/shared/components/toggle-header.component.scss

@@ -97,6 +97,9 @@
           font-weight: 400;
           font-size: 14px;
           letter-spacing: 0.2px;
+          .mat-pseudo-checkbox {
+            display: none;
+          }
         }
       }
       &.mat-button-toggle-checked {

ui-ngx/src/styles.scss

@@ -705,6 +705,12 @@ mat-icon {
     table-layout: auto;
     border-collapse: separate;
     margin: 0;
+    .mat-mdc-header-row {
+      height: 56px;
+    }
+    .mat-mdc-footer-row, .mat-mdc-row {
+      height: 52px;
+    }
   }
 
   .tb-table-widget {
@@ -730,14 +736,6 @@ mat-icon {
     content: none;
   }
 
-  .mat-mdc-header-row {
-    height: 60px;
-  }
-
-  .mat-mdc-footer-row, .mat-mdc-row {
-    height: 52px;
-  }
-
   .mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row {
     min-height: auto;
   }

ui-ngx/src/theme-overwrites.scss

@@ -18,6 +18,7 @@
 @mixin theme-overwrites($primary, $config-or-theme) {
   @include _mat-form-field-overwrites($primary, $config-or-theme);
   @include _mat-button-overwrites($primary, $config-or-theme);
+  @include _mat-icon-overwrites();
 }
 
 @mixin _mat-form-field-overwrites($primary, $config-or-theme) {
@@ -64,8 +65,14 @@
     .mat-mdc-outlined-button {
       --mdc-outlined-button-outline-color: inherit;
       &:not(:disabled) {
-        border-color: var(--mdc-outlined-button-outline-color, inherit);
+        border-color: inherit;
       }
     }
   }
 }
+
+@mixin _mat-icon-overwrites() {
+  .mat-icon, .mat-icon.mat-primary, .mat-icon.mat-accent, .mat-icon.mat-warn {
+    color: var(--mat-icon-color);
+  }
+}

ui-ngx/yarn.lock

@@ -1657,6 +1657,18 @@
   dependencies:
     tslib "^2.2.0"
 
+"@fortawesome/fontawesome-common-types@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
+  integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
+
+"@fortawesome/fontawesome-svg-core@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
+  integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
 "@geoman-io/leaflet-geoman-free@2.14.2":
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.14.2.tgz#c84c2115c263f34d11dc0b43859551639fe3d56b"
@@ -5285,9 +5297,9 @@ eslint-plugin-import@latest:
     tsconfig-paths "^3.15.0"
 
 eslint-plugin-jsdoc@latest:
-  version "50.2.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.2.5.tgz#a0bd16b44ac1df000a17655b7e306b495024a511"
-  integrity sha512-o3pVL19dSO3et+env3uV2WjrMX8oEqZjBF8lZBpLl9/CgqaRAIx5UaSPfrbHKB/JlHldWOFFGrUeZWmpWUds6g==
+  version "50.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.3.0.tgz#2a4d1ac7f45b2b62de42389ba8006fd00b7f08dd"
+  integrity sha512-P7qDB/RckdKETpBM4CtjHRQ5qXByPmFhRi86sN3E+J+tySchq+RSOGGhI2hDIefmmKFuTi/1ACjqsnDJDDDfzg==
   dependencies:
     "@es-joy/jsdoccomment" "~0.48.0"
     are-docs-informative "^0.0.2"