ng-cw-v12
Version:
Angular UI Component Library
567 lines • 106 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./click-outside.directive";
import * as i3 from "@angular/forms";
export class ColorPickerComponent {
constructor(ele) {
this.ele = ele;
/** 颜色选择器尺寸 */
this.ncSize = 'default';
/** 颜色格式 */
this.ncFormat = 'hex';
/** 主题 */
this.ncTheme = 'light';
/** 触发方式 */
this.ncTrigger = 'click';
/** 颜色值 */
this.ncValue = '#ff0000';
/** 是否显示透明度选择器 */
this._alpha = true;
/** 是否显示棋盘格背景 */
this._checker = true;
/** 是否禁用 */
this._disabled = false;
/** 颜色值改变时触发 */
this.ncValueChange = new EventEmitter();
/** 颜色改变时触发 */
this.ncOnchange = new EventEmitter();
this.$ncValueChangeSubject = new Subject();
this.panelShow = false;
this._closeTimer = null; // hover 模式延迟关闭计时器
//HSV是基于色相H(hue)、饱和度S(saturation)、明度V(Value)
this.hsv = {
hue: 360,
saturation: 100,
value: 100
};
this.hueColor = '255,0,0'; //用于颜色面板、色相按钮
this.rgb = [];
this.alpha = 1;
this.hexa = '';
this.init = true;
}
set ncAlpha(val) {
this._alpha = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncAlpha() {
return this._alpha;
}
set ncChecker(val) {
this._checker = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncChecker() {
return this._checker;
}
set ncDisabled(val) {
this._disabled = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncDisabled() {
return this._disabled;
}
ngOnInit() {
this.$ncValueChangeSubject.pipe(debounceTime(500), distinctUntilChanged((n, o) => {
return n === o;
})).subscribe((_value) => {
//初始时执行两次setNcValue，防抖后执行一次这里
//由于init为true，初始时不触发ncOnchange而是将init改为false
//后续执行setNcValue时init为false，触发ncOnchange
if (!this.init) {
this.ncOnchange.emit(_value);
}
else {
this.init = false;
}
});
//根据初始值设置面板
this.setPanel();
//绑定点击事件
this.bindEvent();
}
ngOnChanges(changes) {
if (changes['ncValue'] && !changes['ncValue'].firstChange) {
this.setPanel(true);
}
}
//绑定点击、移动事件
bindEvent() {
//色相柱
this.setHueSlider = this.setHueSlider.bind(this);
let colorBar = this.ele.nativeElement.querySelector('#colorBar');
let divSlider = this.ele.nativeElement.querySelector('#divSlider');
colorBar.addEventListener('mousedown', (e) => {
this.setHueSlider(e);
this.ele.nativeElement.addEventListener('mousemove', this.setHueSlider);
});
divSlider.addEventListener('mousedown', (e) => {
this.setHueSlider(e);
this.ele.nativeElement.addEventListener('mousemove', this.setHueSlider);
});
this.ele.nativeElement.addEventListener('mouseup', () => {
this.ele.nativeElement.removeEventListener('mousemove', this.setHueSlider);
});
//透明柱状
if (this.ncAlpha) {
this.setAlpha = this.setAlpha.bind(this);
let alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
let divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
if (alphaBar && divAlphaSlider) {
alphaBar.addEventListener('mousedown', (e) => {
this.setAlpha(e);
this.ele.nativeElement.addEventListener('mousemove', this.setAlpha);
});
divAlphaSlider.addEventListener('mousedown', (e) => {
this.setAlpha(e);
this.ele.nativeElement.addEventListener('mousemove', this.setAlpha);
});
this.ele.nativeElement.addEventListener('mouseup', () => {
this.ele.nativeElement.removeEventListener('mousemove', this.setAlpha);
});
}
}
//颜色面板
this.setSaturationAndValue = this.setSaturationAndValue.bind(this);
let colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
let divPicker = this.ele.nativeElement.querySelector('#divPicker');
colorPanel.addEventListener('mousedown', (e) => {
this.setSaturationAndValue(e);
this.ele.nativeElement.addEventListener('mousemove', this.setSaturationAndValue);
});
divPicker.addEventListener('mousedown', (e) => {
this.setSaturationAndValue(e);
this.ele.nativeElement.addEventListener('mousemove', this.setSaturationAndValue);
});
this.ele.nativeElement.addEventListener('mouseup', () => {
this.ele.nativeElement.removeEventListener('mousemove', this.setSaturationAndValue);
});
}
//根据默认值初始化面板
setPanel(isExternalChange = false) {
if (this.ncValue.charAt(0) == '#') {
let rgba = this.hexaToRgba(this.ncValue);
this.rgb = [rgba[0], rgba[1], rgba[2]];
this.alpha = rgba[3];
}
else {
let match = this.ncValue.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/); //rgba(255,0,0,1)
if (!match) {
match = this.ncValue.match(/^rgb\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/); //rgb(255,0,0,1)
}
if (!match) {
match = this.ncValue.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); //rgb(255,0,0)
}
let red = parseInt(match[1], 10);
let green = parseInt(match[2], 10);
let blue = parseInt(match[3], 10);
let alpha = parseFloat(match[4]);
this.rgb = [red, green, blue];
if (Number.isNaN(alpha)) {
this.alpha = 1;
}
else {
this.alpha = alpha;
}
}
if (!this.ncAlpha) {
this.alpha = 1;
}
this.alphaChange(isExternalChange);
this.rgbChange(isExternalChange);
}
//设置ncValue
setNcValue(isExternalChange = false) {
setTimeout(() => {
if (this.ncFormat == 'hex') {
this.ncValue = this.hexa;
}
else {
if (this.ncAlpha) {
this.ncValue = `rgba(${this.rgb[0]},${this.rgb[1]},${this.rgb[2]},${this.alpha})`;
}
else {
this.ncValue = `rgb(${this.rgb[0]},${this.rgb[1]},${this.rgb[2]})`;
}
}
this.ncValueChange.emit(this.ncValue); //双向绑定
if (!isExternalChange) {
this.$ncValueChangeSubject.next(this.ncValue); //触发值改变回调
}
});
}
//定位弹出面板
positionPanel() {
let blockDom = this.ele.nativeElement.querySelector('.nc-color-picker-block'); //触发器
const clientRect = blockDom.getBoundingClientRect(); //触发器位置
let panelDom = this.ele.nativeElement.querySelector('.nc-color-picker-panel'); //弹出面板
//触发器大小
let blockWidth = 0;
let blockHeight = 0;
if (this.ncSize == 'small') {
blockWidth = 16;
blockHeight = 16;
}
else if (this.ncSize == 'large') {
blockWidth = 32;
blockHeight = 32;
}
else {
blockWidth = 24;
blockHeight = 24;
}
let panelHeight = 290; //弹出面板高
let panelWidth = 282; //弹出面板宽
let gap = 20; //预留间隙
let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
//清除三角形
panelDom.classList.remove('topTriangle');
panelDom.classList.remove('bottomTriangle');
panelDom.classList.remove('leftTriangle');
panelDom.classList.remove('rightTriangle');
if (clientRect.left < (panelWidth / 2 - blockWidth / 2) && clientRect.top < (panelHeight / 2 - blockHeight / 2)) {
//右下弹出(触发器位于窗口左上角)
panelDom.style.left = blockWidth + gap / 2 + 'px';
panelDom.style.top = blockHeight + gap / 2 + 'px';
}
else if (windowWidth - clientRect.right < (panelWidth / 2 - blockWidth / 2) && windowHeight - clientRect.bottom < (panelHeight / 2 - blockHeight / 2)) {
//左上弹出(触发器位于窗口右下角)
panelDom.style.right = blockWidth + gap / 2 + 'px';
panelDom.style.bottom = blockHeight + gap / 2 + 'px';
}
else if (clientRect.left < (panelWidth / 2 - blockWidth / 2) && windowHeight - clientRect.bottom < (panelHeight / 2 - blockHeight / 2)) {
//右上弹出(触发器位于窗口左下角)
panelDom.style.left = blockWidth + gap / 2 + 'px';
panelDom.style.bottom = blockHeight + gap / 2 + 'px';
}
else if (clientRect.top < (panelHeight / 2 - blockHeight / 2) && windowWidth - clientRect.right < (panelWidth / 2 - blockWidth / 2)) {
//左下弹出(触发器位于窗口右上角)
panelDom.style.right = blockWidth + gap / 2 + 'px';
panelDom.style.top = blockHeight + gap / 2 + 'px';
}
else if (clientRect.left >= (panelWidth / 2 - blockWidth / 2) && windowWidth - clientRect.right >= (panelWidth / 2 - blockWidth / 2) && windowHeight - clientRect.bottom >= panelHeight + gap) {
//下弹出(左右下空间足够)
panelDom.style.left = -(panelWidth / 2 - blockWidth / 2) + 'px';
panelDom.style.top = blockHeight + gap + 'px';
panelDom.classList.add('topTriangle'); //添加三角形
}
else if (clientRect.left >= (panelWidth / 2 - blockWidth / 2) && windowWidth - clientRect.right >= (panelWidth / 2 - blockWidth / 2) && clientRect.top >= panelHeight + gap) {
//上弹出(左右上空间足够)
panelDom.style.left = -(panelWidth / 2 - blockWidth / 2) + 'px';
panelDom.style.bottom = blockHeight + gap + 'px';
panelDom.classList.add('bottomTriangle'); //添加三角形
}
else if (clientRect.top >= (panelHeight / 2 - blockHeight / 2) && windowHeight - clientRect.bottom >= (panelHeight / 2 - blockHeight / 2) && windowWidth - clientRect.right >= panelWidth + gap) {
//右弹出(上下右空间足够)
panelDom.style.left = blockHeight + gap + 'px';
panelDom.style.bottom = -(panelHeight / 2 - blockHeight / 2) + 'px';
panelDom.classList.add('leftTriangle'); //添加三角形
}
else if (clientRect.top >= (panelHeight / 2 - blockHeight / 2) && windowHeight - clientRect.bottom >= (panelHeight / 2 - blockHeight / 2) && clientRect.left >= panelWidth + gap) {
//左弹出(上下左空间足够)
panelDom.style.right = blockHeight + gap + 'px';
panelDom.style.bottom = -(panelHeight / 2 - blockHeight / 2) + 'px';
panelDom.classList.add('rightTriangle'); //添加三角形
}
}
//触发器点击（click 模式）
blockClick() {
if (this.ncDisabled)
return;
if (this.ncTrigger !== 'click')
return;
this.positionPanel();
setTimeout(() => {
//加延迟让clickOut先触发
this.panelShow = true;
});
}
//触发器悬停（hover 模式）
blockHover() {
if (this.ncDisabled)
return;
if (this.ncTrigger !== 'hover')
return;
this.cancelCloseTimer();
this.positionPanel();
this.panelShow = true;
}
//整体进入（hover 模式 — 取消延迟关闭）
triggerMouseEnter() {
if (this.ncTrigger === 'hover') {
this.cancelCloseTimer();
}
}
//整体离开（hover 模式 — 延迟关闭面板）
triggerMouseLeave() {
if (this.ncTrigger !== 'hover')
return;
this._closeTimer = setTimeout(() => {
if (this.panelShow) {
this.panelShow = false;
this.ele.nativeElement.removeEventListener('mousemove', this.setHueSlider);
this.ele.nativeElement.removeEventListener('mousemove', this.setAlpha);
this.ele.nativeElement.removeEventListener('mousemove', this.setSaturationAndValue);
}
}, 100);
}
cancelCloseTimer() {
if (this._closeTimer) {
clearTimeout(this._closeTimer);
this._closeTimer = null;
}
}
//点击色相柱，计算色相H(hue)
setHueSlider(event) {
let colorBar = this.ele.nativeElement.querySelector('#colorBar');
let divSlider = this.ele.nativeElement.querySelector('#divSlider');
let colorBarWIDTH = colorBar.clientWidth;
const clientRect = colorBar.getBoundingClientRect();
// 获取位置信息
let xDiff = event.clientX - clientRect.left;
xDiff = xDiff > colorBarWIDTH ? colorBarWIDTH : (xDiff < 0 ? 0 : xDiff); //0-200
// 设置滑块的位置，保证滑块至少一半在面板内
divSlider.style.left = xDiff - 6 + 'px';
// 色相在360度以内，计算对应的比例值， 0 - 360
this.hsv.hue = Math.round((xDiff / colorBarWIDTH) * 360 * 100) / 100 | 0;
//转换
this.rgb = this.hsvToRgb(this.hsv.hue, this.hsv.saturation, this.hsv.value);
this.hueColor = this.hsvToRgb(this.hsv.hue, 100, 100).join(',');
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
this.setNcValue();
}
//点击透明柱，计算透明度
setAlpha(event) {
let alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
let divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
let alphaBarWIDTH = alphaBar.clientWidth;
const clientRect = alphaBar.getBoundingClientRect();
// 获取位置信息
let xDiff = event.clientX - clientRect.left;
xDiff = xDiff > alphaBarWIDTH ? alphaBarWIDTH : (xDiff < 0 ? 0 : xDiff); //0-200
// 设置滑块的位置，保证滑块至少一半在面板内
divAlphaSlider.style.left = xDiff - 6 + 'px';
//透明度取值在0-1
this.alpha = (100 - Math.round(100 - xDiff / alphaBarWIDTH * 100)) / 100;
//转换
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
this.setNcValue();
}
//点击颜色面板，计算饱和度S(saturation)、明度V(Value)
setSaturationAndValue(event) {
let colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
let divPicker = this.ele.nativeElement.querySelector('#divPicker');
let panelWIDTH = colorPanel.clientWidth;
let panelHEIGHT = colorPanel.clientHeight;
// 计算鼠标移动位置，面板宽度panelWIDTH，高度panelHEIGHT
const clientRect = colorPanel.getBoundingClientRect();
let yDiff = event.clientY - clientRect.top;
let xDiff = event.clientX - clientRect.left;
xDiff = xDiff > panelWIDTH ? panelWIDTH : (xDiff < 0 ? 0 : xDiff);
yDiff = yDiff > panelHEIGHT ? panelHEIGHT : (yDiff < 0 ? 0 : yDiff);
// 设置滑块位置，保证滑块至少一半在面板内
divPicker.style.top = yDiff - 8 + 'px';
divPicker.style.left = xDiff - 8 + 'px';
// 饱和度和明度，这里没有取百分比的值，后续转换时需要注意
this.hsv.saturation = Math.round(xDiff / panelWIDTH * 100);
this.hsv.value = Math.round((1 - yDiff / panelHEIGHT) * 100);
//转换
this.rgb = this.hsvToRgb(this.hsv.hue, this.hsv.saturation, this.hsv.value);
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
this.setNcValue();
}
//hsv转rgb (h：0-360 s: 0-100 v: 0-100)
hsvToRgb(hue, saturation, value) {
saturation = saturation * 255 / 100 | 0;
value = value * 255 / 100 | 0;
if (saturation === 0) {
return [value, value, value];
}
else {
let satVal = (255 - saturation) * value / 255 | 0;
let ligVal = (value - satVal) * (hue % 60) / 60 | 0;
if (hue === 360) {
return [value, satVal + ligVal, satVal];
}
else if (hue < 60) {
return [value, satVal + ligVal, satVal];
}
else if (hue < 120) {
return [value - ligVal, value, satVal];
}
else if (hue < 180) {
return [satVal, value, satVal + ligVal];
}
else if (hue < 240) {
return [satVal, value - ligVal, value];
}
else if (hue < 300) {
return [satVal + ligVal, satVal, value];
}
else if (hue < 360) {
return [value, satVal, value - ligVal];
}
else {
return [0, 0, 0];
}
}
}
//rgb转hsv (h：0-100 s: 0-100 v: 0-100)
rgbToHsv(r, g, b) {
(r /= 255), (g /= 255), (b /= 255);
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, v = max;
let d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0; // achromatic
}
else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [Math.round(h * 100), Math.round(s * 100), Math.round(v * 100)];
}
//rgba转hexa
rgbaToHexa(red, green, blue, alpha) {
red = this.getHex(red);
green = this.getHex(green);
blue = this.getHex(blue);
if (!this.ncAlpha) {
return '#' + red + green + blue;
}
alpha = Math.round(alpha * 255);
alpha = this.getHex(alpha);
return '#' + red + green + blue + alpha;
}
getHex(num) {
let val = num.toString(16);
val = (val.length === 1) ? ('0' + val) : val;
return val;
}
//hex转rgba
hexaToRgba(color) {
const value = color.slice(color.indexOf('#') + 1);
const isShort = value.length === 3 || value.length === 4;
const hasAlpha = value.length === 4 || value.length === 8;
const r = isShort ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2);
const g = isShort ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4);
const b = isShort ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6);
let a = hasAlpha ? (isShort ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF';
a = parseFloat((parseInt(a, 16) / 255).toFixed(2));
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), a];
}
//输入rgb
rgbChange(isExternalChange = false) {
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
let hsv = this.rgbToHsv(this.rgb[0], this.rgb[1], this.rgb[2]); //hsv(rgb转,h:0-100)
//更改this.hsv(选取,h:0-360)值
//防止接着选取色相时setHueSlider使用默认的saturation和value
//或选取颜色面板时setSaturationAndValue使用默认的hue
this.hsv.hue = Math.round(360 * hsv[0] * 0.01); //0-100转0-360
this.hsv.saturation = hsv[1];
this.hsv.value = hsv[2];
this.hueColor = this.hsvToRgb(this.hsv.hue, 100, 100).join(',');
//调整色相中按钮位置
let colorBar = this.ele.nativeElement.querySelector('#colorBar');
let divSlider = this.ele.nativeElement.querySelector('#divSlider');
if (colorBar && divSlider) {
let colorBarWIDTH = colorBar.clientWidth || 214;
divSlider.style.left = colorBarWIDTH * hsv[0] * 0.01 - 6 + 'px';
}
//调整颜色面板中按钮位置
let colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
let divPicker = this.ele.nativeElement.querySelector('#divPicker');
if (colorPanel && divPicker) {
let panelWIDTH = colorPanel.clientWidth || 250;
let panelHEIGHT = colorPanel.clientHeight || 160;
divPicker.style.left = panelWIDTH * hsv[1] * 0.01 - 8 + 'px';
// divPicker.style.bottom = panelHEIGHT * hsv[2] * 0.01 - 8 + 'px';
divPicker.style.top = panelHEIGHT * (100 - hsv[2]) * 0.01 - 8 + 'px';
}
this.setNcValue(isExternalChange);
}
//输入a
alphaChange(isExternalChange = false) {
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
//调整透明带中按钮位置
if (this.ncAlpha) {
let alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
let divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
if (alphaBar && divAlphaSlider) {
let alphaBarWIDTH = alphaBar.clientWidth || 214;
divAlphaSlider.style.left = alphaBarWIDTH * this.alpha - 6 + 'px';
}
}
this.setNcValue(isExternalChange);
}
//输入hex
hexChange(isExternalChange = false) {
if (this.hexa.charAt(0) != '#') {
return;
}
if (this.hexa.length != 7 && this.hexa.length != 9) {
return;
}
let rgba = this.hexaToRgba(this.hexa);
this.rgb = [rgba[0], rgba[1], rgba[2]];
this.alpha = rgba[3];
if (!this.ncAlpha) {
this.alpha = 1;
}
this.rgbChange(isExternalChange);
this.alphaChange(isExternalChange);
}
clickOut() {
if (this.ncTrigger !== 'click')
return;
if (this.panelShow) {
this.panelShow = false;
this.ele.nativeElement.removeEventListener('mousemove', this.setHueSlider);
this.ele.nativeElement.removeEventListener('mousemove', this.setAlpha);
this.ele.nativeElement.removeEventListener('mousemove', this.setSaturationAndValue);
}
}
}
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ColorPickerComponent, selector: "nc-color-picker", inputs: { ncSize: "ncSize", ncFormat: "ncFormat", ncTheme: "ncTheme", ncTrigger: "ncTrigger", ncValue: "ncValue", ncAlpha: "ncAlpha", ncChecker: "ncChecker", ncDisabled: "ncDisabled" }, outputs: { ncValueChange: "ncValueChange", ncOnchange: "ncOnchange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nc-color-picker\" [ngClass]=\"'theme-' + ncTheme\" (mouseenter)=\"triggerMouseEnter()\" (mouseleave)=\"triggerMouseLeave()\">\r\n <!--\u89E6\u53D1\u5668-->\r\n <div class=\"nc-color-picker-block\" [ngClass]=\"'block-' + ncSize\" [class.no-checker]=\"!ncChecker\"\r\n [class.nc-disabled]=\"ncDisabled\" (click)=\"blockClick()\" (mouseenter)=\"blockHover()\">\r\n <div class=\"nc-color-picker-block-inner\" [ngStyle]=\"{'background-color': ncValue}\"></div>\r\n </div>\r\n\r\n <!--\u5F39\u51FA\u9762\u677F-->\r\n <div class=\"nc-color-picker-panel\" [hidden]=\"!panelShow\" ncClickOutside (ncClickOut)=\"clickOut()\">\r\n <!-- \u989C\u8272\u9762\u677F -->\r\n <div class=\"div-panel\">\r\n <div id=\"colorPanel\" class=\"color-panel\" [ngStyle]=\"{'background-color': 'rgb(' + hueColor + ')'}\"></div>\r\n <div id=\"divPicker\" class=\"div-picker\"></div>\r\n </div>\r\n <!--\u67F1\u72B6\u6761-->\r\n <div class=\"slider-panel\">\r\n <div>\r\n <!-- \u8272\u76F8\u67F1 -->\r\n <div class=\"div-color\">\r\n <div id=\"colorBar\" class=\"color-bar\"></div>\r\n <div id=\"divSlider\" class=\"div-slider\" [ngStyle]=\"{'background-color': 'rgb(' + hueColor + ')'}\">\r\n </div>\r\n </div>\r\n <!-- \u900F\u660E\u67F1\u72B6 -->\r\n <div class=\"div-alpha\" [hidden]=\"!ncAlpha\">\r\n <div id=\"alphaBar\" class=\"alpha-bar\"\r\n [ngStyle]=\"{'background': 'linear-gradient(to right, rgba(255, 0, 4, 0), rgb(' + rgb[0] + ',' + rgb[1] + ','+ rgb[2] + '))'}\">\r\n </div>\r\n <div id=\"divAlphaSlider\" class=\"div-slider\"\r\n [ngStyle]=\"{'background-color': 'rgba(' + rgb[0] + ',' + rgb[1] + ','+ rgb[2] + ',' + alpha + ')'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <!--color\u5C55\u793A-->\r\n <div class=\"color-show\" [class.no-checker]=\"!ncChecker\">\r\n <div class=\"color-show-block\"\r\n [ngStyle]=\"{'background-color': 'rgba(' + rgb[0] + ',' + rgb[1] + ','+ rgb[2] + ',' + alpha + ')'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <!--\u503C\u5C55\u793A-->\r\n <div class=\"result-panel\">\r\n <div class=\"result-row\">\r\n <div class=\"result-title\">{{ncAlpha ? 'RGBA' : 'RGB'}}</div>\r\n <div class=\"result-input\">\r\n <input class=\"nc-input-number\" [style]=\"{width: ncAlpha ? '42px' : '56px'}\" type=\"number\"\r\n [(ngModel)]=\"rgb[0]\" [min]=\"0\" [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input class=\"nc-input-number\" [style]=\"{width: ncAlpha ? '42px' : '56px'}\" type=\"number\"\r\n [(ngModel)]=\"rgb[1]\" [min]=\"0\" [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input class=\"nc-input-number\" [style]=\"{width: ncAlpha ? '42px' : '56px'}\" type=\"number\"\r\n [(ngModel)]=\"rgb[2]\" [min]=\"0\" [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input *ngIf=\"ncAlpha\" class=\"nc-input-number\" style=\"width: 42px;\" type=\"number\"\r\n [(ngModel)]=\"alpha\" [min]=\"0\" [max]=\"1\" step=\"0.01\" (ngModelChange)=\"alphaChange()\">\r\n </div>\r\n </div>\r\n <div class=\"result-row\">\r\n <div class=\"result-title\">{{ncAlpha ? 'HEXA' : 'HEX'}}</div>\r\n <div class=\"result-input\">\r\n <input class=\"nc-input nc-input-sm\" placeholder=\"Basic usage\" [(ngModel)]=\"hexa\"\r\n (ngModelChange)=\"hexChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!--\u8C03\u8BD5\u4EE3\u7801-->\r\n <!-- <div style=\"margin-top: 20px;\">rgba:{{rgb[0] + ',' + rgb[1] + ','+ rgb[2] + ',' + alpha}}</div>\r\n <div>hexa:{{hexa}}</div>\r\n <div>hsv(\u9009\u53D6,h:0-360):{{hsv.hue + ',' + hsv.saturation + ',' + hsv.value}}</div>\r\n <div>hsv(rgb\u8F6C,h:0-100):{{rgbToHsv(rgb[0],rgb[1],rgb[2])}}</div> -->\r\n </div>\r\n</div>", styles: [".nc-color-picker.theme-light{--nc-cp-block-border: rgba(0, 0, 0, .06);--nc-cp-panel-bg: #ffffff;--nc-cp-panel-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--nc-cp-triangle-color: #ffffff;--nc-cp-checker-color: rgba(0, 0, 0, .06);--nc-cp-text-color: rgba(0, 0, 0, .65);--nc-cp-input-bg: #ffffff;--nc-cp-input-border: #d9d9d9;--nc-cp-input-color: rgba(0, 0, 0, .85)}.nc-color-picker.theme-dark{--nc-cp-block-border: #303030;--nc-cp-panel-bg: #1f1f1f;--nc-cp-panel-shadow: 0 3px 6px -4px rgba(0, 0, 0, .48), 0 6px 16px rgba(0, 0, 0, .32), 0 9px 28px 8px rgba(0, 0, 0, .2);--nc-cp-triangle-color: #1f1f1f;--nc-cp-checker-color: rgba(255, 255, 255, .08);--nc-cp-text-color: rgba(255, 255, 255, .65);--nc-cp-input-bg: #212121;--nc-cp-input-border: #434343;--nc-cp-input-color: rgba(255, 255, 255, .85)}.nc-color-picker{position:relative}.nc-color-picker .no-checker{background-image:none!important}.nc-color-picker .nc-color-picker-block{cursor:pointer;background-image:conic-gradient(var(--nc-cp-checker-color) 0 25%,transparent 0 50%,var(--nc-cp-checker-color) 0 75%,transparent 0);background-size:50% 50%;overflow:hidden;border-radius:2px}.nc-color-picker .nc-color-picker-block.nc-disabled{cursor:not-allowed}.nc-color-picker .nc-color-picker-block.nc-disabled .nc-color-picker-block-inner{opacity:.5}.nc-color-picker .nc-color-picker-block .nc-color-picker-block-inner{width:100%;height:100%;border:1px solid var(--nc-cp-block-border)}.nc-color-picker .block-default{width:24px;height:24px}.nc-color-picker .block-small{width:16px;height:16px}.nc-color-picker .block-large{width:32px;height:32px}.nc-color-picker .bottomTriangle:before{content:\"\";display:block;position:absolute;left:131px;top:290px;border-width:10px;border-style:solid dashed dashed dashed;border-color:var(--nc-cp-triangle-color) transparent transparent transparent}.nc-color-picker .leftTriangle:before{content:\"\";display:block;position:absolute;left:-20px;top:135px;border-width:10px;border-style:dashed solid dashed dashed;border-color:transparent var(--nc-cp-triangle-color) transparent transparent}.nc-color-picker .topTriangle:before{content:\"\";display:block;position:absolute;left:131px;top:-20px;border-width:10px;border-style:dashed dashed solid dashed;border-color:transparent transparent var(--nc-cp-triangle-color) transparent}.nc-color-picker .rightTriangle:before{content:\"\";display:block;position:absolute;right:-20px;top:135px;border-width:10px;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent var(--nc-cp-triangle-color)}.nc-color-picker .nc-color-picker-panel{position:absolute;z-index:1001;width:-moz-fit-content;width:fit-content;padding:12px 16px;background-color:var(--nc-cp-panel-bg);background-clip:padding-box;border-radius:2px;box-shadow:var(--nc-cp-panel-shadow)}.nc-color-picker .nc-color-picker-panel .div-panel{position:relative;width:250px;height:160px;cursor:pointer;overflow:hidden;margin-bottom:10px}.nc-color-picker .nc-color-picker-panel .color-panel{position:relative;height:100%;width:100%;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#FFF,transparent)}.nc-color-picker .nc-color-picker-panel .div-picker{width:16px;height:16px;position:absolute;left:242px;top:-8px;border-radius:50%;border:1px solid white}.nc-color-picker .nc-color-picker-panel .slider-panel{display:flex;align-items:center;justify-content:space-between}.nc-color-picker .nc-color-picker-panel .slider-panel .div-color{position:relative;width:214px;height:8px;margin-bottom:10px;cursor:pointer}.nc-color-picker .nc-color-picker-panel .slider-panel .color-bar{background:linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00);width:100%;height:100%;border-radius:2px}.nc-color-picker .nc-color-picker-panel .slider-panel .div-slider{position:absolute;bottom:-2px;left:208px;width:12px;height:12px;border-radius:50%;border:1px solid white}.nc-color-picker .nc-color-picker-panel .slider-panel .div-alpha{position:relative;width:214px;height:8px;cursor:pointer;background-image:conic-gradient(var(--nc-cp-checker-color) 0 25%,transparent 0 50%,var(--nc-cp-checker-color) 0 75%,transparent 0);background-size:8px 8px}.nc-color-picker .nc-color-picker-panel .slider-panel .alpha-bar{width:100%;height:100%;border-radius:2px}.nc-color-picker .nc-color-picker-panel .slider-panel .color-show{width:28px;height:28px;background-image:conic-gradient(var(--nc-cp-checker-color) 0 25%,transparent 0 50%,var(--nc-cp-checker-color) 0 75%,transparent 0);background-size:50% 50%;overflow:hidden;border-radius:2px;border:1px solid var(--nc-cp-block-border)}.nc-color-picker .nc-color-picker-panel .slider-panel .color-show .color-show-block{width:100%;height:100%}.nc-color-picker .nc-color-picker-panel .result-panel .result-row{margin-top:10px;display:flex;align-items:center;justify-content:space-between}.nc-color-picker .nc-color-picker-panel .result-panel .result-row .result-title{width:50px;color:var(--nc-cp-text-color)}.nc-color-picker .nc-color-picker-panel .result-panel .result-row .result-input{width:calc(100% - 50px);display:flex;align-items:center;justify-content:space-between}.nc-color-picker .nc-color-picker-panel .result-panel .result-row .result-input .nc-input-number,.nc-color-picker .nc-color-picker-panel .result-panel .result-row .result-input .nc-input{background-color:var(--nc-cp-input-bg);border-color:var(--nc-cp-input-border);color:var(--nc-cp-input-color)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.ClickOutsideDirective, selector: "[ncClickOutside]", outputs: ["ncClickOut"] }, { type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-color-picker',
templateUrl: './color-picker.component.html',
styleUrls: ['./color-picker.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncSize: [{
type: Input
}], ncFormat: [{
type: Input
}], ncTheme: [{
type: Input
}], ncTrigger: [{
type: Input
}], ncValue: [{
type: Input
}], ncAlpha: [{
type: Input
}], ncChecker: [{
type: Input
}], ncDisabled: [{
type: Input
}], ncValueChange: [{
type: Output
}], ncOnchange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvY29sb3ItcGlja2VyL2NvbG9yLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9jb2xvci1waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFlBQVksRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQVlwRSxNQUFNLE9BQU8sb0JBQW9CO0lBMkQvQixZQUFvQixHQUFlO1FBQWYsUUFBRyxHQUFILEdBQUcsQ0FBWTtRQTFEbkMsY0FBYztRQUNMLFdBQU0sR0FBZSxTQUFTLENBQUM7UUFDeEMsV0FBVztRQUNGLGFBQVEsR0FBaUIsS0FBSyxDQUFDO1FBQ3hDLFNBQVM7UUFDQSxZQUFPLEdBQWdCLE9BQU8sQ0FBQztRQUN4QyxXQUFXO1FBQ0YsY0FBUyxHQUFrQixPQUFPLENBQUM7UUFDNUMsVUFBVTtRQUNELFlBQU8sR0FBVyxTQUFTLENBQUM7UUFDckMsaUJBQWlCO1FBQ1QsV0FBTSxHQUFZLElBQUksQ0FBQztRQVEvQixnQkFBZ0I7UUFDUixhQUFRLEdBQVksSUFBSSxDQUFDO1FBUWpDLFdBQVc7UUFDSCxjQUFTLEdBQVksS0FBSyxDQUFDO1FBUW5DLGVBQWU7UUFDTCxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDN0MsY0FBYztRQUNKLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTFDLDBCQUFxQixHQUFHLElBQUksT0FB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