@bixi/theme/color-doc/color.component.ts

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

interface IColor {
  name: string;
  value: string;
  color: string;
  main?: boolean;
}

@Component({
  selector: 'bixi-color',
  exportAs: 'bixiColor',
  templateUrl: './color.component.html',
  styleUrls: ['./color.component.less']
})

export class BixiColorComponent {
  constructor(
    // tslint:disable-next-line:no-any
    @Inject(DOCUMENT) private dom: any,
    private message: NzMessageService) { }

  colorList: IColor[][] = [
    [
      {
        name: '@bixi-blue-lighter',
        value: '#CBDEF3',
        color: '#2E3440'
      }, {
        name: '@bixi-blue-light',
        value: '#3FA9FF',
        color: '#2E3440'
      }, {
        name: '@bixi-blue',
        value: '#107CEE',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-blue-dark',
        value: '#086DD9',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-green-lighter',
        value: '#CEEACF',
        color: '#2E3440'
      }, {
        name: '@bixi-green-light',
        value: '#9AE396',
        color: '#2E3440'
      }, {
        name: '@bixi-green',
        value: '#21BC29',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-green-dark',
        value: '#14961E',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-orange-lighter',
        value: '#F6E4CE',
        color: '#2E3440'
      }, {
        name: '@bixi-orange-light',
        value: '#FFD078',
        color: '#2E3440'
      }, {
        name: '@bixi-orange',
        value: '#FF9D1F',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-orange-dark',
        value: '#D97B0F',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-red-lighter',
        value: '#F3D7D4',
        color: '#2E3440'
      }, {
        name: '@bixi-red-light',
        value: '#FF7876',
        color: '#2E3440'
      }, {
        name: '@bixi-red',
        value: '#EE5144',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-red-dark',
        value: '#DA373F',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-gray-lighter',
        value: '#F6FBFF',
        color: '#2E3440'
      }, {
        name: '@bixi-gray-light',
        value: '#E4EBF2',
        color: '#2E3440'
      }, {
        name: '@bixi-gray',
        value: '#D8DFE6',
        main: true,
        color: '#2E3440'
      }, {
        name: '@bixi-gray-dark',
        value: '#C0CCDA',
        color: '#2E3440'
      }
    ],
    [
      {
        name: '@bixi-black-lighter',
        value: '#B7B7B7',
        color: '#2E3440'
      }, {
        name: '@bixi-black-light',
        value: '#868686',
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-black',
        value: '#555555',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-black-dark',
        value: '#242424',
        color: 'rgba(255,255,255,0.9)'
      }
    ]
  ];

  onColorClick(color: IColor): void {
    const copiedString = `${color.name}`;
    this.message.remove();
    this._copy(copiedString).then(() => {
      this.message.create('success', `${color.name}     ${color.value}`);
    });
  }

  private _copy(value: string): Promise<string> {
    const promise = new Promise<string>((resolve): void => {
      let copyTextArea = (null as any) as HTMLTextAreaElement; // tslint:disable-line:no-any
      try {
        copyTextArea = this.dom.createElement('textarea');
        copyTextArea.style.height = '0px';
        copyTextArea.style.opacity = '0';
        copyTextArea.style.width = '0px';
        this.dom.body.appendChild(copyTextArea);
        copyTextArea.value = value;
        copyTextArea.select();
        this.dom.execCommand('copy');
        resolve(value);
      } finally {
        if (copyTextArea && copyTextArea.parentNode) {
          copyTextArea.parentNode.removeChild(copyTextArea);
        }
      }
    });

    return promise;
  }

}