From 4022f4a8c36fe94773c2278d340a6b1a2fb77729 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 31 Mar 2023 11:40:04 +0300
Subject: [PATCH] UI: color-picker

---
 .../color-picker-input.component.html         | 25 ++++++++++++++++---
 .../color-picker-input.component.ts           | 16 ++++++++++++
 .../color-picker/color-picker.component.html  | 19 ++++++++++++++
 .../color-picker/color-picker.component.scss  | 15 +++++++++++
 .../color-picker/color-picker.component.ts    | 16 ++++++++++++
 .../dialog/color-picker-dialog.component.html |  2 +-
 6 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html
index 564f1d64f2..c135369793 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html
@@ -1,18 +1,35 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
 <div fxLayoutAlign="row">
   <div fxLayoutAlign="row">
     <mat-form-field class="mat-block">
-      <input matInput type="number" pattern="[0-9]*" min="0" max="255" [value]="value?.getRed().toString()" (input)="onInputChange($event, 'R')">
+      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getRed().toString()" (input)="onInputChange($event, 'R')">
     </mat-form-field>
     <mat-form-field class="mat-block">
-      <input matInput type="number" pattern="[0-9]*" min="0" max="255" [value]="value?.getGreen().toString()" (input)="onInputChange($event, 'G')">
+      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getGreen().toString()" (input)="onInputChange($event, 'G')">
     </mat-form-field>
     <mat-form-field class="mat-block">
-      <input matInput type="number" pattern="[0-9]*" min="0" max="255" [value]="value?.getBlue().toString()" (input)="onInputChange($event, 'B')">
+      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getBlue().toString()" (input)="onInputChange($event, 'B')">
     </mat-form-field>
   </div>
 
   <mat-form-field class="mat-block">
-    <input matInput type="number" min="0" max="1" [value]="value?.getAlpha().toString()" (input)="onInputChange($event, 'A')">
+    <input matInput min="0" max="1" [value]="value?.getAlpha().toString()" (input)="onInputChange($event, 'A')">
   </mat-form-field>
 </div>
 
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts
index 22ce2c0849..445b65a969 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts
@@ -1,3 +1,19 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
index dba4605736..4751d498f2 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
@@ -1,3 +1,20 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
 <saturation-component class="saturation-component" [hue]="control.hue" [(color)]="control.value"></saturation-component>
 
 <div class="controls">
@@ -11,6 +28,7 @@
     </div>
   </div>
 
+  <div fxLayoutAlign="row">
   <mat-form-field class="mat-block">
     <mat-select [(value)]="this.control.initType" (valueChange)="changeColorFormat($event)">
       <mat-option *ngFor="let type of presentations" [value]="type">
@@ -32,6 +50,7 @@
 <!--      <span class="type-btn" (click)="changePresentation()"></span>-->
 <!--    </div>-->
 <!--  </div>-->
+  </div>
 </div>
 
 <!--<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>-->
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
index 39a0c7444c..24fd427576 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
@@ -1,3 +1,18 @@
+/**
+ * Copyright © 2016-2023 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 :host {
   display: block;
   width: 100%;
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
index e11d11f880..f2140e02a5 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
@@ -1,3 +1,19 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
diff --git a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
index 4ea0a5f8c5..8de970de65 100644
--- a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="colorPickerFormGroup" (ngSubmit)="select()">
-  <div mat-dialog-content fxLayout="row" fxLayoutAlign="center">
+  <div mat-dialog-content style="padding: 16px" fxLayout="row" fxLayoutAlign="center">
 <!--    <span [style.background]="colorPickerFormGroup.get('color').value"-->
 <!--          [cpToggle]="true"-->
 <!--          [cpDialogDisplay]="'inline'"-->