fix: various fixes and improvments

package.json

@@ -35,8 +35,8 @@
     "ajv": "8.8.2",
     "ajv-keywords": "5.1.0",
     "ang-jsoneditor": "3.1.0",
-    "arlas-wui-toolkit": "27.0.0-rc.8",
-    "arlas-maplibre": "27.0.0-rc.6",
+    "arlas-wui-toolkit": "27.0.0-rc.10",
+    "arlas-maplibre": "27.0.0-rc.7",
     "file-saver": "^2.0.2",
     "jsoneditor": "9.10.2",
     "moment": "^2.29.4",

src/app/modules/analytics-config/components/edit-group/edit-group-add-widget.component.scss

@@ -33,15 +33,17 @@
       cursor: pointer;
       // Fix size to avoid too big variations when selecting widget
       box-sizing: border-box;
-      width: 118px;
       height: 48px;
+      min-width: 150px;
 
       ::ng-deep.mdc-radio {
          display: none;
       }
       &.mat-mdc-radio-checked {
          color: white;
          border-color: mat.m2-get-color-from-palette($app-accent);
+         background-color: rgba(mat.m2-get-color-from-palette($app-accent), 0.6);
+
          svg path {
             fill: white !important;
          }
@@ -66,6 +68,7 @@
          align-items: center;
          gap: 5px;
          margin-left: 0 !important;
+         font-size: 16px;
       }
    }
 }

src/app/modules/analytics-config/components/edit-group/edit-group.component.ts

@@ -16,35 +16,38 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { AnalyticsImportService } from '@analytics-config/services/analytics-import/analytics-import.service';
+import { AnalyticsInitService } from '@analytics-config/services/analytics-init/analytics-init.service';
+import { ShortcutsService } from '@analytics-config/services/shortcuts/shortcuts.service';
+import { CdkDragDrop, CdkDragEnter, CdkDragMove } from '@angular/cdk/drag-drop';
 import {
-  Component, OnInit, Input, Output, EventEmitter,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
 } from '@angular/core';
-import { FormGroup, FormArray } from '@angular/forms';
-import { WIDGET_TYPE } from './models';
-import { MatDialog } from '@angular/material/dialog';
-import { EditWidgetDialogComponent } from '../edit-widget-dialog/edit-widget-dialog.component';
-import { EditWidgetDialogData } from '../edit-widget-dialog/models';
-import { AnalyticsInitService } from '@analytics-config/services/analytics-init/analytics-init.service';
-import { OperationEnum } from 'arlas-web-core';
+import { FormArray, FormGroup } from '@angular/forms';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
 import { ConfigExportHelper } from '@services/main-form-manager/config-export-helper';
-import { MatDialogRef } from '@angular/material/dialog';
-import { ConfirmModalComponent } from '@shared-components/confirm-modal/confirm-modal.component';
-import { Subject } from 'rxjs/internal/Subject';
-import { Subscription } from 'rxjs';
-import { OnDestroy, ViewChild, ElementRef } from '@angular/core';
-import { CdkDragDrop, CdkDragEnter, CdkDragMove } from '@angular/cdk/drag-drop';
-import { moveInFormArray } from '@utils/tools';
-import { AnalyticsImportService } from '@analytics-config/services/analytics-import/analytics-import.service';
-import { ImportWidgetDialogComponent } from '../import-widget-dialog/import-widget-dialog.component';
+import { MainFormService } from '@services/main-form/main-form.service';
 import { ConfigFormGroupComponent } from '@shared-components/config-form-group/config-form-group.component';
+import { ConfirmModalComponent } from '@shared-components/confirm-modal/confirm-modal.component';
 import { ConfigFormGroup } from '@shared-models/config-form';
-import { MainFormService } from '@services/main-form/main-form.service';
-import { ShortcutsService } from '@analytics-config/services/shortcuts/shortcuts.service';
 import { WidgetConfigFormGroup } from '@shared-models/widget-config-form';
-import { marker } from '@colsen1991/ngx-translate-extract-marker';
-import { IconService } from '@services/icon-service/icon.service';
-import { MatIconRegistry } from '@angular/material/icon';
+import { moveInFormArray } from '@utils/tools';
+import { OperationEnum } from 'arlas-web-core';
+import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs/internal/Subject';
+import { EditWidgetDialogComponent } from '../edit-widget-dialog/edit-widget-dialog.component';
+import { EditWidgetDialogData } from '../edit-widget-dialog/models';
+import { ImportWidgetDialogComponent } from '../import-widget-dialog/import-widget-dialog.component';
+import { WIDGET_TYPE } from './models';
 
 @Component({
   selector: 'arlas-add-widget-dialog',
@@ -107,12 +110,12 @@ export class EditGroupComponent implements OnInit, OnDestroy {
   private afterClosedconfirmSub: Subscription;
 
   public constructor(
-    private dialog: MatDialog,
-    private cdr: ChangeDetectorRef,
-    private analyticsImportService: AnalyticsImportService,
-    private analyticsInitService: AnalyticsInitService,
-    private main: MainFormService,
-    private shortcutsService: ShortcutsService
+    private readonly dialog: MatDialog,
+    private readonly cdr: ChangeDetectorRef,
+    private readonly analyticsImportService: AnalyticsImportService,
+    private readonly analyticsInitService: AnalyticsInitService,
+    private readonly main: MainFormService,
+    private readonly shortcutsService: ShortcutsService
   ) { }
 
   public ngOnInit() {
@@ -140,11 +143,11 @@ export class EditGroupComponent implements OnInit, OnDestroy {
   }
 
   public addWidget() {
-    this.afterClosedAddSub = this.dialog.open(AddWidgetDialogComponent, { width: '350px' })
+    this.afterClosedAddSub = this.dialog.open(AddWidgetDialogComponent, { width: '440px' })
       .afterClosed().subscribe(result => {
         if (result) {
           // add the new widget to the previous ones if they exist
-          if (!!this.contentTypeValue) {
+          if (this.contentTypeValue) {
             this.contentTypeValue.push(result);
           }
           const finalResult = this.contentTypeValue ? this.contentTypeValue : [result];
@@ -155,12 +158,12 @@ export class EditGroupComponent implements OnInit, OnDestroy {
   }
 
   public importWidget() {
-    this.dialog.open(ImportWidgetDialogComponent, { width: '800px' })
+    this.dialog.open(ImportWidgetDialogComponent, { width: '550px' })
       .afterClosed().subscribe(result => {
-        if (!!result) {
+        if (result) {
           result[0].forEach(r => {
             const type = r.componentType;
-            if (!!this.contentTypeValue) {
+            if (this.contentTypeValue) {
               this.contentTypeValue.push(type);
             }
             const finalResult = this.contentTypeValue ? this.contentTypeValue : [type];
@@ -214,13 +217,11 @@ export class EditGroupComponent implements OnInit, OnDestroy {
             all: false
           });
           this.cdr.detectChanges();
-        } else {
-          if (newWidget) {
-            // delete a new created widget after clicking on cancel
-            this.content.removeAt(this.content.length - 1);
-            this.contentTypeValue.pop();
-            this.formGroup.controls.contentType.setValue(this.contentTypeValue);
-          }
+        } else if (newWidget) {
+          // delete a new created widget after clicking on cancel
+          this.content.removeAt(this.content.length - 1);
+          this.contentTypeValue.pop();
+          this.formGroup.controls.contentType.setValue(this.contentTypeValue);
         }
       });
   }

src/app/modules/analytics-config/components/import-widget-dialog/import-widget-dialog.component.html

@@ -10,7 +10,7 @@
     </mat-form-field>
 
     <div *ngIf="this.importWidgetFormGroup.get('dashboard').valid">
-        <div mat-dialog-title> {{'Choose of the following widgets' | translate}}</div>
+        <div mat-dialog-title class="import__widgets"> {{'Choose of the following widgets' | translate}}</div>
             <div *ngFor="let tab of analytics | keyvalue">
                 <div class="tab">{{tab.key}}</div>
                 <mat-card appearance="outlined" class="group" *ngFor="let analytic of tab.value">
@@ -24,10 +24,10 @@
                                 <span>{{contributors.get(comp.contributorId)}}</span>
                                 <div class="type" >
                                     <div>(</div>
-                                    <div><mat-icon [color]="'primary'">{{comp.componentType === 'histogram' ? 'bar_chart': 
-                                        (comp.componentType === 'donut' ? 'donut_small' : 
+                                    <div><mat-icon [color]="'primary'">{{comp.componentType === 'histogram' ? 'bar_chart':
+                                        (comp.componentType === 'donut' ? 'donut_small' :
                                         (comp.componentType === 'powerbars' ? 'sort' :
-                                        (comp.componentType === 'metric' ? 'functions' : 
+                                        (comp.componentType === 'metric' ? 'functions' :
                                         (comp.componentType === 'resultlist' ? 'table_chart' :'waves'))))}}</mat-icon></div>
                                     <div>{{comp.componentType | translate}})</div>
                                 </div>
@@ -38,7 +38,7 @@
                     <div *ngIf="analytic.components?.length === 0" class="not-importable">
                         {{'This Tab doesn\'t contain an importable widget' | translate}}
                     </div>
-    
+
                 </mat-card>
             </div>
 

src/app/modules/analytics-config/components/import-widget-dialog/import-widget-dialog.component.scss

@@ -19,6 +19,11 @@
 .import {
   display: block;
 
+  &__widgets {
+    border-top: 1px dashed #0000003d;
+    padding: 0 0 10px;
+  }
+
   .tab {
     display: flex;
     font-size: 0.9em;

src/app/modules/analytics-config/services/donut-form-builder/donut-form-builder.service.ts

@@ -148,7 +148,7 @@ export class DonutConfigForm extends WidgetConfigFormGroup {
                     sub.unsubscribe();
                   });
               }),
-            'A field is required to manage colors',
+            marker('A field is required to manage colors'),
             {
               optional: true,
               dependsOn: () => [

src/app/modules/map-config/components/dialog-palette-selector/dialog-palette-selector.component.scss

@@ -93,6 +93,14 @@ h1 {
       display: flex;
       align-items: center;
       justify-content: space-around;
+
+      .slider-input {
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none;
+        }
+
+        max-width: 170px;
+      }
     }
   }
 }

src/app/modules/map-config/components/dialog-palette-selector/dialog-palette-selector.component.ts

@@ -42,7 +42,7 @@ export class DialogPaletteSelectorComponent implements OnInit {
 
   public ngOnInit() {
     this.dialogRef.disableClose = true;
-    this.dialogRef.updateSize('900px');
+    this.dialogRef.updateSize('80vw');
     this.prepareDefaultPalettes();
   }
 

src/app/shared/components/config-form-control/config-form-control.component.scss

@@ -314,3 +314,9 @@ mat-option {
     font-size: 14px;
   }
 }
+
+.title-field-form-control {
+  ::ng-deep.mat-mdc-text-field-wrapper {
+    width: 300px;
+  }
+}