UI: color-picker

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>
 

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,

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>-->

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%;

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,

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'"-->