2019-10-07 16:36:53 +02:00
|
|
|
import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'color',
|
|
|
|
template: `
|
|
|
|
<div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker'">
|
2019-10-11 00:40:15 +02:00
|
|
|
<div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">
|
2019-10-07 16:36:53 +02:00
|
|
|
<div class="uk-width-2-3"> {{label}}:</div>
|
|
|
|
<div class="uk-width-1-3 uk-padding-remove-left">
|
2019-10-11 00:40:15 +02:00
|
|
|
<button [(colorPicker)]="color" [style.background]="color"
|
|
|
|
id="color" class="uk-margin-small-left uk-icon-button"
|
|
|
|
(colorPickerChange)="color=$event; colorChanged();">
|
|
|
|
</button>
|
|
|
|
<!--<input class="uk-margin-small-left uk-width-small " color-picker [colorPicker]="color" [style.background]="color"
|
|
|
|
(colorPickerChange)="color=$event; colorChanged();"/>-->
|
2019-10-07 16:36:53 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`
|
|
|
|
})
|
|
|
|
|
|
|
|
export class ColorComponent implements OnInit {
|
|
|
|
@Input() color = 'white';
|
|
|
|
@Input() label = 'Color';
|
|
|
|
@Input() addMargin: boolean = false;
|
|
|
|
@Output() colorChange = new EventEmitter();
|
|
|
|
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
}
|
|
|
|
|
|
|
|
colorChanged() {
|
|
|
|
this.colorChange.emit(this.color);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|