connect-admin/src/app/pages/customization/Color.component.ts

import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';


@Component({
  selector: 'color',
  template: `
    <div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker uk-flex uk-flex-middle'">
      <div class=" uk-flex">
        <div class="">
          <input class="uk-margin-small-left uk-width-small" color-picker [colorPicker]="color"   [style.background]="color"
                 (colorPickerChange)="color=$event; colorChanged();"/>
        </div>
        <div class="uk-margin-small-left"> {{label}}</div>
      </div>
      <span class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</span>
    </div>
  `
})

export class ColorComponent implements OnInit {
  @Input() color = 'white';
  @Input() label = 'Color';
  @Input() addMargin: boolean = false;
  @Output() colorChange = new EventEmitter();
  @Input() light:boolean;
  public warningForContrast(color:string){
    return (this.light &&  CustomizationOptions.isForLightBackground(color)) || (!this.light && !CustomizationOptions.isForLightBackground(color));
  }

  constructor() {
  }


  ngOnInit() {
  }

  colorChanged() {
    this.colorChange.emit(this.color);
  }


}