ng-cw-v12
Version:
Angular UI Component Library
633 lines (627 loc) • 40.2 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, HostListener, Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
class ClickOutsideDirective {
constructor(_elementRef) {
this._elementRef = _elementRef;
this.ncClickOut = new EventEmitter();
}
onClick(event, targetElement) {
if (!targetElement || !(targetElement instanceof HTMLElement)) {
return;
}
// targetElement is now narrowed to HTMLElement ✓
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.ncClickOut.emit(event);
}
}
}
ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: ClickOutsideDirective, selector: "[ncClickOutside]", outputs: { ncClickOut: "ncClickOut" }, host: { listeners: { "document:click": "onClick($event,$event.target)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ClickOutsideDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncClickOutside]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncClickOut: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['document:click', ['$event', '$event.target']]
}] } });
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: 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
}] } });
class NcColorPickerModule {
}
NcColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcColorPickerModule, declarations: [ColorPickerComponent,
ClickOutsideDirective], imports: [CommonModule,
FormsModule], exports: [ColorPickerComponent] });
NcColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcColorPickerModule, imports: [[
CommonModule,
FormsModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcColorPickerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ColorPickerComponent,
ClickOutsideDirective
],
imports: [
CommonModule,
FormsModule
],
exports: [
ColorPickerComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ColorPickerComponent, NcColorPickerModule };
//# sourceMappingURL=ng-cw-v12-color-picker.js.map