UI: Update label widget to use gallery images.

ui-ngx/src/app/core/http/widget.service.ts

@@ -204,6 +204,12 @@ export class WidgetService {
       defaultHttpOptionsFromConfig(config));
   }
 
+  public exportWidgetType(widgetTypeId: string,
+                          config?: RequestConfig): Observable<WidgetTypeDetails> {
+    return this.http.get<WidgetTypeDetails>(`/api/widgetType/${widgetTypeId}?inlineImages=true`,
+      defaultHttpOptionsFromConfig(config));
+  }
+
   public getWidgetTypeInfoById(widgetTypeId: string,
                                config?: RequestConfig): Observable<WidgetTypeInfo> {
     return this.http.get<WidgetTypeInfo>(`/api/widgetTypeInfo/${widgetTypeId}`,

ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts

@@ -298,7 +298,7 @@ export class ImportExportService {
   }
 
   public exportWidgetType(widgetTypeId: string) {
-    this.widgetService.getWidgetTypeById(widgetTypeId).subscribe(
+    this.widgetService.exportWidgetType(widgetTypeId).subscribe(
       (widgetTypeDetails) => {
         let name = widgetTypeDetails.name;
         name = name.toLowerCase().replace(/\W/g, '_');
@@ -313,7 +313,7 @@ export class ImportExportService {
   public exportWidgetTypes(widgetTypeIds: string[]): Observable<void> {
     const widgetTypesObservables: Array<Observable<WidgetTypeDetails>> = [];
     for (const id of widgetTypeIds) {
-      widgetTypesObservables.push(this.widgetService.getWidgetTypeById(id));
+      widgetTypesObservables.push(this.widgetService.exportWidgetType(id));
     }
     return forkJoin(widgetTypesObservables).pipe(
       map((widgetTypes) =>

ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts

@@ -48,6 +48,7 @@ import { Router } from '@angular/router';
 import { TbInject } from '@shared/decorators/tb-inject';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import { UserSettingsService } from '@core/http/user-settings.service';
+import { ImagePipe } from '@shared/pipe/image.pipe';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -87,6 +88,7 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
     this.ctx.userSettingsService = $injector.get(UserSettingsService);
     this.ctx.telemetryWsService = $injector.get(TelemetryWebsocketService);
     this.ctx.date = $injector.get(DatePipe);
+    this.ctx.imagePipe = $injector.get(ImagePipe);
     this.ctx.milliSecondsToTimeString = $injector.get(MillisecondsToTimeStringPipe);
     this.ctx.translate = $injector.get(TranslateService);
     this.ctx.http = $injector.get(HttpClient);

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html

@@ -16,10 +16,10 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
-  <tb-image-input required
+  <tb-gallery-image-input required
                   label="{{ 'widgets.label-widget.background-image' | translate }}"
                   formControlName="backgroundImageUrl">
-  </tb-image-input>
+  </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.label-widget.labels</legend>
     <div fxLayout="column">

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -91,7 +91,7 @@ import * as RxJSOperators from 'rxjs/operators';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AlarmQuery, AlarmSearchStatus, AlarmStatus } from '@app/shared/models/alarm.models';
-import { MillisecondsToTimeStringPipe, TelemetrySubscriber } from '@app/shared/public-api';
+import { ImagePipe, MillisecondsToTimeStringPipe, TelemetrySubscriber } from '@app/shared/public-api';
 import { UserId } from '@shared/models/id/user-id';
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { DynamicComponentModule } from '@core/services/dynamic-component-factory.service';
@@ -189,6 +189,7 @@ export class WidgetContext {
   telemetryWsService: TelemetryWebsocketService;
   telemetrySubscribers?: TelemetrySubscriber[];
   date: DatePipe;
+  imagePipe: ImagePipe;
   milliSecondsToTimeString: MillisecondsToTimeStringPipe;
   translate: TranslateService;
   http: HttpClient;