From 369390fa913455fce7402edb7931713f06600a5d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 27 Nov 2023 19:29:22 +0200
Subject: [PATCH] UI: Replace image inputs to image gallery inputs.

---
 .../lib/multiple-input-widget.component.html   | 18 +++++++++---------
 .../lib/multiple-input-widget.component.ts     |  6 +++---
 ...iple-attributes-key-settings.component.html |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 3a817ff40e..a88c9e4e3e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -36,7 +36,7 @@
                    type="text"
                    (focus)="key.isFocused = true; focusInputElement($event)"
                    (blur)="key.isFocused = false; inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@@ -56,7 +56,7 @@
                    max="{{key.settings.maxValue}}"
                    (focus)="key.isFocused = true; focusInputElement($event)"
                    (blur)="key.isFocused = false; inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@@ -82,7 +82,7 @@
               (focus)="key.isFocused = true; focusInputElement($event)"
               (blur)="key.isFocused = false; inputChanged(source, key)"
             />
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
@@ -131,7 +131,7 @@
                 {{ getCustomTranslationText(option.label ? option.label : option.value) }}
               </mat-option>
             </mat-select>
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@@ -148,7 +148,7 @@
                    [readonly]="key.settings.isEditable === 'readonly'"
                    type="text"
                    (keydown)="$event.preventDefault();">
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <tb-color-input #colorInput asBoxInput matSuffix
@@ -166,7 +166,7 @@
           <mat-checkbox *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"
                         formControlName="{{key.formId}}"
                         (change)="inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <span class="label-wrapper">{{key.label}}</span>
@@ -175,7 +175,7 @@
                             formControlName="{{key.formId}}"
                             [labelPosition]="key.settings.slideToggleLabelPosition"
                             (change)="inputChanged(source, key)">
-            <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
+            <ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
               <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
             </ng-container>
             <span class="label-wrapper">{{key.label}}</span>
@@ -207,8 +207,8 @@
   </div>
 </form>
 <ng-template #iconPrefix let-key="key">
-  <tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon>
+  <tb-icon *ngIf="!key.settings.customIconUrl; else customToggleIcon">{{key.settings.icon}}</tb-icon>
   <ng-template #customToggleIcon>
-    <img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
+    <img class="mat-icon" [src]="key.settings.customIconUrl | image | async" alt="icon">
   </ng-template>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index eb3b0c9abf..64fb98b386 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -103,8 +103,8 @@ interface MultipleInputWidgetDataKeySettings {
   invalidJsonErrorMessage?: string;
   useCustomIcon: boolean;
   icon: string;
-  customIcon: string ;
-  safeCustomIcon?: SafeUrl;
+  customIcon: string;
+  customIconUrl?: string;
   inputTypeNumber?: boolean;
   readOnly?: boolean;
   disabledOnCondition?: boolean;
@@ -312,7 +312,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
             }
 
             if (dataKey.settings.useCustomIcon && isDefinedAndNotNull(dataKey.settings.customIcon)) {
-              dataKey.settings.safeCustomIcon = this.sanitizer.bypassSecurityTrustUrl(dataKey.settings.customIcon);
+              dataKey.settings.customIconUrl = dataKey.settings.customIcon;
             }
 
             if (dataKey.settings.useGetValueFunction && dataKey.settings.getValueFunctionBody.length) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 22571baab4..f3c745a665 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -245,10 +245,10 @@
                              iconClearButton
                              formControlName="icon">
     </tb-material-icon-select>
-    <tb-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-gallery-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                     label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                     formControlName="customIcon">
-    </tb-image-input>
+    </tb-gallery-image-input>
   </fieldset>
   <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.value-conversion-settings</legend>