Artem Dzhereleiko
4 years ago
7 changed files with 32 additions and 167 deletions
@ -1,35 +0,0 @@ |
|||
<!-- |
|||
|
|||
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 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 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 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 min="0" max="1" [value]="value?.getAlpha().toString()" (input)="onInputChange($event, 'A')"> |
|||
</mat-form-field> |
|||
</div> |
|||
|
|||
@ -1,86 +0,0 @@ |
|||
///
|
|||
/// 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, |
|||
Component, |
|||
EventEmitter, |
|||
Input, |
|||
OnInit, |
|||
Output |
|||
} from '@angular/core'; |
|||
import { Color } from '@iplab/ngx-color-picker'; |
|||
import { ColorType } from '@shared/components/color-picker/color-picker.component'; |
|||
|
|||
@Component({ |
|||
selector: `tb-color-picker-input-component`, |
|||
templateUrl: `./color-picker-input.component.html`, |
|||
styleUrls: [], |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class ColorPickerInputComponent { |
|||
|
|||
@Input() |
|||
public hue: Color; |
|||
|
|||
@Output() |
|||
public hueChange = new EventEmitter<Color>(false); |
|||
|
|||
@Input() |
|||
public color: Color; |
|||
|
|||
@Output() |
|||
public colorChange = new EventEmitter<Color>(false); |
|||
|
|||
public labelVisible: boolean; |
|||
|
|||
@Input() |
|||
public set label(value) { |
|||
this.labelVisible = true; |
|||
} |
|||
|
|||
@Input() |
|||
public colorFormat: string; |
|||
|
|||
public isAlphaVisible = true; |
|||
|
|||
@Input() |
|||
public set alpha(isVisible: boolean) { |
|||
this.isAlphaVisible = isVisible; |
|||
} |
|||
|
|||
public get value() { |
|||
return this.color ? this.color.getRgba() : null; |
|||
} |
|||
|
|||
constructor() { |
|||
} |
|||
|
|||
public onInputChange(newValue, color: 'R' | 'G' | 'B' | 'A') { |
|||
const value = this.value; |
|||
const red = color === 'R' ? newValue : value.red; |
|||
const green = color === 'G' ? newValue : value.green; |
|||
const blue = color === 'B' ? newValue : value.blue; |
|||
const alpha = color === 'A' ? newValue : value.alpha; |
|||
|
|||
const newColor = new Color().setRgba(red, green, blue, alpha); |
|||
const hue = new Color().setHsva(newColor.getHsva().hue); |
|||
|
|||
this.hueChange.emit(hue); |
|||
this.colorChange.emit(newColor); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue