fix(geo, common): Integrate ngx color

package.json

@@ -110,6 +110,7 @@
     "@turf/helpers": "^6.5.0",
     "@turf/line-intersect": "^6.5.0",
     "@turf/point-on-feature": "^6.5.0",
+    "@types/tinycolor2": "^1.4.4",
     "angular-shepherd": "16.0.0",
     "bowser": "^2.10.0",
     "core-js": "^3.32.2",
@@ -122,6 +123,7 @@
     "jszip": "^3.10.1",
     "jwt-decode": "^2.2.0",
     "moment": "^2.29.4",
+    "ngx-color": "^9.0.0",
     "ngx-indexed-db": "^11.0.2",
     "ngx-toastr": "^17.0.0",
     "nosleep.js": "^0.12.0",
@@ -157,7 +159,6 @@
     "@types/jasmine": "~4.3.0",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.6.2",
-    "@types/tinycolor2": "^1.4.4",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "angular-cli-ghpages": "^1.0.3",

packages/common/package.json

@@ -32,11 +32,15 @@
     "angular-shepherd": "16.0.0",
     "scroll-into-view-if-needed": "^3.0.0",
     "typy": "^3.3.0",
+    "ngx-color": "^9.0.0",
     "tinycolor2": "^1.6.0"
   },
   "dependencies": {
     "tslib": "^2.6.0"
   },
+  "devDependencies": {
+    "@types/tinycolor2": "^1.4.4"
+  },
   "engines": {
     "node": ">=18.10.0"
   }

packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html

@@ -4,14 +4,34 @@
   tooltip-position="below"
   matTooltipShowDelay="500"
   subscriptSizing="dynamic"
+  cdkOverlayOrigin
+  #trigger="cdkOverlayOrigin"
+  (click)="isOpen = !isOpen"
 >
-  <mat-label>{{ value }}</mat-label>
+  <mat-label>{{ colorPicker }}</mat-label>
   <input
+    type="text"
     matInput
     [readonly]="true"
-    (click)="open.emit(true)"
-    (blur)="closePicker()"
-    [(ngModel)]="hexColor"
-    type="color"
+    [style.background]="colorPicker"
   />
 </mat-form-field>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="trigger"
+  [cdkConnectedOverlayOpen]="isOpen"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  (backdropClick)="isOpen = false"
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+>
+  <div class="picker">
+    <color-chrome (onChange)="handleChange($event)" [color]="colorPicker">
+    </color-chrome>
+    <div class="buttons">
+      <button mat-flat-button color="primary" (click)="handleClick($event)">
+        {{ 'igo.common.confirmDialog.applyBtn' | translate }}
+      </button>
+    </div>
+  </div>
+</ng-template>

packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+
+.picker {
+  left: 100%;
+  position: absolute;
+  top: 100%;
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  @include mat.elevation(2);
+
+  ::ng-deep .chrome-picker {
+    box-shadow: none;
+  }
+
+  .buttons {
+    padding: 4px 12px 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}