ng-cw-v12
Version:
Angular UI component library
543 lines (533 loc) • 38.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/color-picker', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["color-picker"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators));
})(this, (function (exports, i0, i1, i3, rxjs, operators) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
var ClickOutsideDirective = /** @class */ (function () {
function ClickOutsideDirective(_elementRef) {
this._elementRef = _elementRef;
this.ncClickOut = new i0.EventEmitter();
}
ClickOutsideDirective.prototype.onClick = function (event, targetElement) {
if (!targetElement) {
return;
}
var clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.ncClickOut.emit(event);
}
};
return ClickOutsideDirective;
}());
ClickOutsideDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ClickOutsideDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
ClickOutsideDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ClickOutsideDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncClickOutside]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { ncClickOut: [{
type: i0.Output
}], onClick: [{
type: i0.HostListener,
args: ['document:click', ['$event', '$event.target']]
}] } });
var ColorPickerComponent = /** @class */ (function () {
function ColorPickerComponent(ele) {
this.ele = ele;
this.ncSize = 'default';
this.ncFormat = 'hexa';
this.ncValue = '#ff0000ff'; //#ff0000ff #ff0000 rgba(255,0,0,1) rgb(255,0,0,1) rgb(255,0,0)
this.ncValueChange = new i0.EventEmitter();
this.ncOnchange = new i0.EventEmitter();
this.$ncValueChangeSubject = new rxjs.Subject();
this.panelShow = false;
//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;
}
ColorPickerComponent.prototype.ngOnInit = function () {
var _this = this;
this.$ncValueChangeSubject.pipe(operators.debounceTime(500), operators.distinctUntilChanged(function (n, o) {
return n === o;
})).subscribe(function (_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();
};
//绑定点击、移动事件
ColorPickerComponent.prototype.bindEvent = function () {
var _this = this;
//色相柱
this.setHueSlider = this.setHueSlider.bind(this);
var colorBar = this.ele.nativeElement.querySelector('#colorBar');
var divSlider = this.ele.nativeElement.querySelector('#divSlider');
colorBar.addEventListener('mousedown', function (e) {
_this.setHueSlider(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setHueSlider);
});
divSlider.addEventListener('mousedown', function (e) {
_this.setHueSlider(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setHueSlider);
});
this.ele.nativeElement.addEventListener('mouseup', function () {
_this.ele.nativeElement.removeEventListener('mousemove', _this.setHueSlider);
});
//透明柱状
this.setAlpha = this.setAlpha.bind(this);
var alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
var divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
alphaBar.addEventListener('mousedown', function (e) {
_this.setAlpha(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setAlpha);
});
divAlphaSlider.addEventListener('mousedown', function (e) {
_this.setAlpha(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setAlpha);
});
this.ele.nativeElement.addEventListener('mouseup', function () {
_this.ele.nativeElement.removeEventListener('mousemove', _this.setAlpha);
});
//颜色面板
this.setSaturationAndValue = this.setSaturationAndValue.bind(this);
var colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
var divPicker = this.ele.nativeElement.querySelector('#divPicker');
colorPanel.addEventListener('mousedown', function (e) {
_this.setSaturationAndValue(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setSaturationAndValue);
});
divPicker.addEventListener('mousedown', function (e) {
_this.setSaturationAndValue(e);
_this.ele.nativeElement.addEventListener('mousemove', _this.setSaturationAndValue);
});
this.ele.nativeElement.addEventListener('mouseup', function () {
_this.ele.nativeElement.removeEventListener('mousemove', _this.setSaturationAndValue);
});
};
//根据默认值初始化面板
ColorPickerComponent.prototype.setPanel = function () {
if (this.ncValue.charAt(0) == '#') {
var rgba = this.hexaToRgba(this.ncValue);
this.rgb = [rgba[0], rgba[1], rgba[2]];
this.alpha = rgba[3];
}
else {
var 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)
}
var red = parseInt(match[1], 10);
var green = parseInt(match[2], 10);
var blue = parseInt(match[3], 10);
var alpha = parseFloat(match[4]);
this.rgb = [red, green, blue];
if (Number.isNaN(alpha)) {
this.alpha = 1;
}
else {
this.alpha = alpha;
}
}
this.alphaChange();
this.rgbChange();
};
//设置ncValue
ColorPickerComponent.prototype.setNcValue = function () {
var _this = this;
setTimeout(function () {
if (_this.ncFormat == 'hexa') {
_this.ncValue = _this.hexa;
}
else {
_this.ncValue = "rgba(" + _this.rgb[0] + "," + _this.rgb[1] + "," + _this.rgb[2] + "," + _this.alpha + ")";
}
_this.ncValueChange.emit(_this.ncValue); //双向绑定
_this.$ncValueChangeSubject.next(_this.ncValue); //触发值改变回调
});
};
//触发器点击
ColorPickerComponent.prototype.blockClick = function () {
var _this = this;
var blockDom = this.ele.nativeElement.querySelector('.nc-color-picker-block'); //触发器
var clientRect = blockDom.getBoundingClientRect(); //触发器位置
var panelDom = this.ele.nativeElement.querySelector('.nc-color-picker-panel'); //弹出面板
//触发器大小
var blockWidth = 0;
var blockHeight = 0;
if (this.ncSize == 'small') {
blockWidth = 16;
blockHeight = 16;
}
else if (this.ncSize == 'large') {
blockWidth = 32;
blockHeight = 32;
}
else {
blockWidth = 24;
blockHeight = 24;
}
var panelHeight = 290; //弹出面板高
var panelWidth = 282; //弹出面板宽
var gap = 20; //预留间隙
var windowHeight = window.innerHeight;
var 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'); //添加三角形
}
setTimeout(function () {
//加延迟让clickOut先触发
_this.panelShow = true;
});
};
//点击色相柱，计算色相H(hue)
ColorPickerComponent.prototype.setHueSlider = function (event) {
var colorBar = this.ele.nativeElement.querySelector('#colorBar');
var divSlider = this.ele.nativeElement.querySelector('#divSlider');
var colorBarWIDTH = colorBar.clientWidth;
var clientRect = colorBar.getBoundingClientRect();
// 获取位置信息
var 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();
};
//点击透明柱，计算透明度
ColorPickerComponent.prototype.setAlpha = function (event) {
var alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
var divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
var alphaBarWIDTH = alphaBar.clientWidth;
var clientRect = alphaBar.getBoundingClientRect();
// 获取位置信息
var 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)
ColorPickerComponent.prototype.setSaturationAndValue = function (event) {
var colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
var divPicker = this.ele.nativeElement.querySelector('#divPicker');
var panelWIDTH = colorPanel.clientWidth;
var panelHEIGHT = colorPanel.clientHeight;
// 计算鼠标移动位置，面板宽度panelWIDTH，高度panelHEIGHT
var clientRect = colorPanel.getBoundingClientRect();
var yDiff = event.clientY - clientRect.top;
var 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)
ColorPickerComponent.prototype.hsvToRgb = function (hue, saturation, value) {
saturation = saturation * 255 / 100 | 0;
value = value * 255 / 100 | 0;
if (saturation === 0) {
return [value, value, value];
}
else {
var satVal = (255 - saturation) * value / 255 | 0;
var 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)
ColorPickerComponent.prototype.rgbToHsv = function (r, g, b) {
(r /= 255), (g /= 255), (b /= 255);
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;
var 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
ColorPickerComponent.prototype.rgbaToHexa = function (red, green, blue, alpha) {
red = this.getHex(red);
green = this.getHex(green);
blue = this.getHex(blue);
alpha = Math.round(alpha * 255);
alpha = this.getHex(alpha);
return '#' + red + green + blue + alpha;
};
ColorPickerComponent.prototype.getHex = function (num) {
var val = num.toString(16);
val = (val.length === 1) ? ('0' + val) : val;
return val;
};
//hex转rgba
ColorPickerComponent.prototype.hexaToRgba = function (color) {
var value = color.slice(color.indexOf('#') + 1);
var isShort = value.length === 3 || value.length === 4;
var hasAlpha = value.length === 4 || value.length === 8;
var r = isShort ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2);
var g = isShort ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4);
var b = isShort ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6);
var 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
ColorPickerComponent.prototype.rgbChange = function () {
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
var 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(',');
//调整色相中按钮位置
var colorBar = this.ele.nativeElement.querySelector('#colorBar');
var divSlider = this.ele.nativeElement.querySelector('#divSlider');
var colorBarWIDTH = colorBar.clientWidth;
divSlider.style.left = colorBarWIDTH * hsv[0] * 0.01 - 6 + 'px';
//调整颜色面板中按钮位置
var colorPanel = this.ele.nativeElement.querySelector('#colorPanel');
var divPicker = this.ele.nativeElement.querySelector('#divPicker');
var panelWIDTH = colorPanel.clientWidth;
var panelHEIGHT = colorPanel.clientHeight;
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();
};
//输入a
ColorPickerComponent.prototype.alphaChange = function () {
this.hexa = this.rgbaToHexa(this.rgb[0], this.rgb[1], this.rgb[2], this.alpha);
//调整透明带中按钮位置
var alphaBar = this.ele.nativeElement.querySelector('#alphaBar');
var divAlphaSlider = this.ele.nativeElement.querySelector('#divAlphaSlider');
var alphaBarWIDTH = alphaBar.clientWidth;
divAlphaSlider.style.left = alphaBarWIDTH * this.alpha - 6 + 'px';
this.setNcValue();
};
//输入hex
ColorPickerComponent.prototype.hexChange = function () {
if (this.hexa.charAt(0) != '#') {
return;
}
if (this.hexa.length != 7 && this.hexa.length != 9) {
return;
}
var rgba = this.hexaToRgba(this.hexa);
this.rgb = [rgba[0], rgba[1], rgba[2]];
this.alpha = rgba[3];
this.rgbChange();
this.alphaChange();
};
ColorPickerComponent.prototype.clickOut = function () {
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);
}
};
return ColorPickerComponent;
}());
ColorPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ColorPickerComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
ColorPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ColorPickerComponent, selector: "nc-color-picker", inputs: { ncSize: "ncSize", ncFormat: "ncFormat", ncValue: "ncValue" }, outputs: { ncValueChange: "ncValueChange", ncOnchange: "ncOnchange" }, ngImport: i0__namespace, template: "<div class=\"nc-color-picker\">\r\n <!--\u89E6\u53D1\u5668-->\r\n <div class=\"nc-color-picker-block\" [ngClass]=\"'block-' + ncSize\" (click)=\"blockClick()\">\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\">\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\">\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\">RGBA</div>\r\n <div class=\"result-input\">\r\n <input class=\"nc-input-number\" style=\"width: 42px;\" type=\"number\" [(ngModel)]=\"rgb[0]\" [min]=\"0\"\r\n [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input class=\"nc-input-number\" style=\"width: 42px;\" type=\"number\" [(ngModel)]=\"rgb[1]\" [min]=\"0\"\r\n [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input class=\"nc-input-number\" style=\"width: 42px;\" type=\"number\" [(ngModel)]=\"rgb[2]\" [min]=\"0\"\r\n [max]=\"255\" step=\"1\" (ngModelChange)=\"rgbChange()\">\r\n\r\n <input class=\"nc-input-number\" style=\"width: 42px;\" type=\"number\" [(ngModel)]=\"alpha\" [min]=\"0\"\r\n [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\">HEXA</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{position:relative}.nc-color-picker .nc-color-picker-block{cursor:pointer;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:50% 50%;overflow:hidden}.nc-color-picker .nc-color-picker-block .nc-color-picker-block-inner{width:100%;height:100%}.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:white 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 white 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 white 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 white}.nc-color-picker .nc-color-picker-panel{position:absolute;z-index:1001;width:-moz-fit-content;width:fit-content;padding:12px 16px;background-color:#fff;background-clip:padding-box;border-radius:2px;box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d}.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(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 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(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:50% 50%;overflow:hidden;border-radius:2px}.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}.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}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: ClickOutsideDirective, selector: "[ncClickOutside]", outputs: ["ncClickOut"] }, { type: i3__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3__namespace.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3__namespace.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ColorPickerComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-color-picker',
templateUrl: './color-picker.component.html',
styleUrls: ['./color-picker.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { ncSize: [{
type: i0.Input
}], ncFormat: [{
type: i0.Input
}], ncValue: [{
type: i0.Input
}], ncValueChange: [{
type: i0.Output
}], ncOnchange: [{
type: i0.Output
}] } });
var NcColorPickerModule = /** @class */ (function () {
function NcColorPickerModule() {
}
return NcColorPickerModule;
}());
NcColorPickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorPickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcColorPickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorPickerModule, declarations: [ColorPickerComponent,
ClickOutsideDirective], imports: [i1.CommonModule,
i3.FormsModule], exports: [ColorPickerComponent] });
NcColorPickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorPickerModule, imports: [[
i1.CommonModule,
i3.FormsModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcColorPickerModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
ColorPickerComponent,
ClickOutsideDirective
],
imports: [
i1.CommonModule,
i3.FormsModule
],
exports: [
ColorPickerComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.ColorPickerComponent = ColorPickerComponent;
exports.NcColorPickerModule = NcColorPickerModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-color-picker.umd.js.map