ngx-colors
Version:
A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)
387 lines • 73.2 kB
JavaScript
import { Component, ViewChild, HostListener, HostBinding, } from '@angular/core';
import { trigger, transition, query, style, stagger, animate, keyframes, } from '@angular/animations';
import { ColorFormats } from '../../enums/formats';
import { defaultColors } from '../../helpers/default-colors';
import { formats } from '../../helpers/formats';
import { Hsva } from '../../clases/formats';
import { NgxColorsColor } from '../../clases/color';
import * as i0 from "@angular/core";
import * as i1 from "../../services/converter.service";
import * as i2 from "@angular/common";
import * as i3 from "../color-picker/color-picker.component";
export class PanelComponent {
click(event) {
if (this.isOutside(event)) {
this.emitClose('cancel');
}
}
onScroll() {
this.onScreenMovement();
}
onResize() {
this.onScreenMovement();
}
constructor(service, cdr) {
this.service = service;
this.cdr = cdr;
this.color = '#000000';
this.previewColor = '#000000';
this.hsva = new Hsva(0, 1, 1, 1);
this.colorsAnimationEffect = 'slide-in';
this.palette = defaultColors;
this.variants = [];
this.userFormats = [];
this.colorFormats = formats;
this.format = ColorFormats.HEX;
this.formatMap = {
'hex': ColorFormats.HEX,
'rgba': ColorFormats.RGBA,
'hsla': ColorFormats.HSLA,
'cmyk': ColorFormats.CMYK
};
this.canChangeFormat = true;
this.menu = 1;
this.hideColorPicker = false;
this.hideTextInput = false;
this.colorPickerControls = 'default';
this.placeholder = '#FFFFFF';
}
ngOnInit() {
this.setPosition();
this.hsva = this.service.stringToHsva(this.color);
this.indexSeleccionado = this.findIndexSelectedColor(this.palette);
}
ngAfterViewInit() {
this.setPositionY();
}
onScreenMovement() {
this.setPosition();
this.setPositionY();
if (!this.panelRef.nativeElement.style.transition) {
this.panelRef.nativeElement.style.transition = 'transform 0.5s ease-out';
}
}
findIndexSelectedColor(colors) {
let resultIndex = undefined;
if (this.color) {
for (let i = 0; i < colors.length; i++) {
const color = colors[i];
if (typeof color == 'string') {
if (this.service.stringToFormat(this.color, ColorFormats.HEX) ==
this.service.stringToFormat(color, ColorFormats.HEX)) {
resultIndex = i;
}
}
else if (color === undefined) {
this.color = undefined;
}
else {
if (this.findIndexSelectedColor(color.variants) != undefined) {
resultIndex = i;
}
}
}
}
return resultIndex;
}
iniciate(triggerInstance, triggerElementRef, color, palette, animation, format, hideTextInput, hideColorPicker, acceptLabel, cancelLabel, colorPickerControls, position, userFormats = []) {
this.colorPickerControls = colorPickerControls;
this.triggerInstance = triggerInstance;
this.TriggerBBox = triggerElementRef;
this.color = color;
this.hideColorPicker = hideColorPicker;
this.hideTextInput = hideTextInput;
this.acceptLabel = acceptLabel;
this.cancelLabel = cancelLabel;
if (userFormats.length) {
const allFormatsValid = userFormats.every(frt => formats.includes(frt));
if (allFormatsValid) {
this.colorFormats = userFormats;
}
}
if (format) {
if (this.colorFormats.includes(format)) {
this.format = this.colorFormats.indexOf(format.toLowerCase());
this.canChangeFormat = false;
if (this.service.getFormatByString(this.color) != format.toLowerCase()) {
this.setColor(this.service.stringToHsva(this.color));
}
}
else {
console.error('Format provided is invalid, using HEX');
this.format = ColorFormats.HEX;
}
}
else {
this.format = this.colorFormats.indexOf(this.service.getFormatByString(this.color));
if (this.format < 0) {
this.format = 0;
}
}
this.previewColor = this.color;
this.palette = palette ?? defaultColors;
this.colorsAnimationEffect = animation;
if (position == 'top') {
let TriggerBBox = this.TriggerBBox.nativeElement.getBoundingClientRect();
this.positionString =
'transform: translateY(calc( -100% - ' + TriggerBBox.height + 'px ))';
}
}
setPosition() {
if (this.TriggerBBox) {
const panelWidth = 250;
const viewportOffset = this.TriggerBBox.nativeElement.getBoundingClientRect();
this.top = viewportOffset.top + viewportOffset.height;
if (viewportOffset.left + panelWidth > window.innerWidth) {
this.left =
viewportOffset.right < panelWidth
? window.innerWidth / 2 - panelWidth / 2
: viewportOffset.right - panelWidth;
}
else {
this.left = viewportOffset.left;
}
}
}
setPositionY() {
const triggerBBox = this.TriggerBBox.nativeElement.getBoundingClientRect();
const panelBBox = this.panelRef.nativeElement.getBoundingClientRect();
const panelHeight = panelBBox.height;
// Check for space below the trigger
if (triggerBBox.bottom + panelHeight > window.innerHeight) {
// there is no space, move panel over the trigger
this.positionString =
triggerBBox.top < panelBBox.height
? 'transform: translateY(-' + triggerBBox.bottom + 'px );'
: 'transform: translateY(calc( -100% - ' +
triggerBBox.height +
'px ));';
}
else {
this.positionString = '';
}
this.cdr.detectChanges();
}
hasVariant(color) {
if (!this.previewColor) {
return false;
}
return (typeof color != 'string' &&
color.variants.some((v) => v.toUpperCase() == this.previewColor.toUpperCase()));
}
isSelected(color) {
if (!this.previewColor) {
return false;
}
return (typeof color == 'string' &&
color.toUpperCase() == this.previewColor.toUpperCase());
}
getBackgroundColor(color) {
if (typeof color == 'string') {
return { background: color };
}
else {
return { background: color?.preview };
}
}
onAlphaChange(event) {
this.palette = this.ChangeAlphaOnPalette(event, this.palette);
}
ChangeAlphaOnPalette(alpha, colors) {
var result = [];
for (let i = 0; i < colors.length; i++) {
const color = colors[i];
if (typeof color == 'string') {
let newColor = this.service.stringToHsva(color);
newColor.onAlphaChange(alpha);
result.push(this.service.toFormat(newColor, this.format));
}
else {
let newColor = new NgxColorsColor();
let newColorPreview = this.service.stringToHsva(color.preview);
newColorPreview.onAlphaChange(alpha);
newColor.preview = this.service.toFormat(newColorPreview, this.format);
newColor.variants = this.ChangeAlphaOnPalette(alpha, color.variants);
result.push(newColor);
}
}
return result;
}
/**
* Change color from default colors
* @param string color
*/
changeColor(color) {
this.setColor(this.service.stringToHsva(color));
// this.triggerInstance.onChange();
this.emitClose('accept');
}
onChangeColorPicker(event) {
this.temporalColor = event;
this.color = this.service.toFormat(event, this.format);
// this.setColor(event);
this.triggerInstance.sliderChange(this.service.toFormat(event, this.format));
}
changeColorManual(color) {
this.previewColor = color;
this.color = color;
this.hsva = this.service.stringToHsva(color);
this.setPreviewColor(this.hsva);
this.temporalColor = this.hsva;
this.triggerInstance.setColor(this.color, this.previewColor);
// this.triggerInstance.onChange();
}
setColor(value, colorIndex = -1) {
this.hsva = value;
let formatName = this.colorFormats[this.format];
let index = colorIndex;
if (index < 0) {
index = this.formatMap[formatName];
}
this.color = this.service.toFormat(value, index);
this.setPreviewColor(value);
this.triggerInstance.setColor(this.color, this.previewColor);
}
setPreviewColor(value) {
this.previewColor = value
? this.service.hsvaToRgba(value).toString()
: undefined;
}
onChange() {
// this.triggerInstance.onChange();
}
onColorClick(color) {
if (typeof color == 'string' || color === undefined) {
this.changeColor(color);
}
else {
this.variants = color.variants;
this.menu = 2;
}
}
addColor() {
this.menu = 3;
this.backupColor = this.color;
// this.color = "#FF0000";
this.temporalColor = this.service.stringToHsva(this.color);
}
nextFormat() {
if (this.canChangeFormat) {
this.format = (this.format + 1) % this.colorFormats.length;
let formatName = this.colorFormats[this.format];
let index = this.formatMap[formatName];
this.setColor(this.hsva, index);
this.placeholder = this.service.toFormat(new Hsva(0, 0, 1, 1), index);
}
}
emitClose(status) {
if (this.menu == 3) {
if (status == 'cancel') {
}
else if (status == 'accept') {
this.setColor(this.temporalColor);
}
}
this.triggerInstance.closePanel();
}
onClickBack() {
if (this.menu == 3) {
this.color = this.backupColor;
this.hsva = this.service.stringToHsva(this.color);
}
this.indexSeleccionado = this.findIndexSelectedColor(this.palette);
this.menu = 1;
}
isOutside(event) {
return event.target.classList.contains('ngx-colors-overlay');
}
}
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PanelComponent, deps: [{ token: i1.ConverterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PanelComponent, selector: "ngx-colors-panel", host: { listeners: { "document:mousedown": "click($event)", "document:scroll": "onScroll()", "window:resize": "onResize()" }, properties: { "style.top.px": "this.top", "style.left.px": "this.left" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"opened\" [style]=\"positionString\" #dialog>\n <ng-container *ngIf=\"menu == 1\">\n <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n <ng-container *ngFor=\"let color of palette; let i = index\">\n <div class=\"circle wrapper color\">\n <div\n (click)=\"onColorClick(color)\"\n class=\"circle color circle-border\"\n [class.colornull]=\"!color\"\n [ngStyle]=\"getBackgroundColor(color)\"\n >\n <div *ngIf=\"i == this.indexSeleccionado\" class=\"selected\"></div>\n </div>\n </div>\n </ng-container>\n <div\n style=\"background: rgb(245 245 245); position: relative\"\n (click)=\"addColor()\"\n *ngIf=\"!hideColorPicker && this.colorPickerControls != 'only-alpha'\"\n class=\"circle button\"\n >\n <div\n *ngIf=\"this.indexSeleccionado === undefined\"\n style=\"\n position: absolute;\n height: 7px;\n width: 7px;\n border: 1px solid rgba(0, 0, 0, 0.03);\n border-radius: 100%;\n top: 0;\n right: 0;\n \"\n [ngStyle]=\"getBackgroundColor(color)\"\n ></div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#222222\"\n >\n <path d=\"M24 24H0V0h24v24z\" fill=\"none\" opacity=\".87\" />\n <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z\" />\n </svg>\n <!-- <div class=\"add\">\n <icons icon=\"add\"></icons>\n </div> -->\n </div>\n <color-picker\n *ngIf=\"!hideColorPicker && this.colorPickerControls == 'only-alpha'\"\n [controls]=\"colorPickerControls\"\n [color]=\"hsva\"\n (colorChange)=\"onChangeColorPicker($event)\"\n (onAlphaChange)=\"onAlphaChange($event)\"\n ></color-picker>\n </div>\n </ng-container>\n <ng-container *ngIf=\"menu == 2\">\n <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n <div class=\"circle wrapper\">\n <div (click)=\"onClickBack()\" class=\"add\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n />\n </svg>\n </div>\n </div>\n\n <ng-container *ngFor=\"let variant of variants\">\n <div class=\"circle wrapper color\">\n <div\n [class.colornull]=\"!variant\"\n (click)=\"changeColor(variant)\"\n class=\"circle circle-border\"\n [ngStyle]=\"{ background: variant }\"\n >\n <div *ngIf=\"isSelected(variant)\" class=\"selected\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"menu == 3\">\n <div class=\"nav-wrapper\">\n <div\n (click)=\"onClickBack()\"\n class=\"round-button button\"\n style=\"float: left\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n />\n </svg>\n </div>\n <button (click)=\"emitClose('cancel')\" style=\"float: right\">\n {{ cancelLabel }}\n </button>\n <button (click)=\"emitClose('accept')\" style=\"float: right\">\n {{ acceptLabel }}\n </button>\n </div>\n <div class=\"color-picker-wrapper\">\n <!-- <span [(colorPicker)]=\"color\"></span> -->\n <color-picker\n [controls]=\"colorPickerControls\"\n [color]=\"hsva\"\n (sliderChange)=\"onChangeColorPicker($event)\"\n ></color-picker>\n </div>\n </ng-container>\n <div class=\"manual-input-wrapper\" *ngIf=\"!hideTextInput\">\n <p (click)=\"nextFormat()\" style=\"cursor: pointer;\">{{ colorFormats[format] }}</p>\n <div class=\"g-input\">\n <input\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"color\"\n [style.font-size.px]=\"color && color.length > 23 ? 9 : 10\"\n [style.letter-spacing.px]=\"color && color.length > 16 ? 0 : 1.5\"\n (keyup)=\"changeColorManual(paintInput.value)\"\n (keydown.enter)=\"emitClose('accept')\"\n #paintInput\n />\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;z-index:2001}.hidden{display:none}.button{display:flex;align-items:center;justify-content:center}.top{transform:translateY(-100%)}.opened{box-sizing:border-box;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background:#fff;width:250px;border-radius:5px;position:absolute}.opened button{border:none;font-family:inherit;font-size:12px;background-color:unset;-webkit-user-select:none;user-select:none;padding:10px;letter-spacing:1px;color:#222;border-radius:3px;line-height:20px}.opened button:hover,.opened .button:hover{background-color:#0000000d;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1);transition-property:opacity,background-color;transition-duration:.2s,.2s;transition-timing-function:cubic-bezier(.35,0,.25,1),cubic-bezier(.35,0,.25,1);transition-delay:0s,0s}.opened button:focus{outline:none}.opened .colors{display:flex;flex-wrap:wrap;align-items:center;margin:15px}.opened .colors .circle{height:34px;width:34px;box-sizing:border-box;border-radius:100%;cursor:pointer}.opened .colors .circle .add{font-size:20px;line-height:45px;text-align:center}.opened .colors .circle .selected{border:2px solid white;border-radius:100%;height:28px;width:28px;box-sizing:border-box;margin:2px}.opened .colors .circle.colornull{background:linear-gradient(135deg,rgba(236,236,236,.7) 0%,rgba(236,236,236,.7) 45%,#de0f00 50%,rgba(236,236,236,.7) 55%,rgba(236,236,236,.7) 100%)}.opened .colors .circle.wrapper{margin:0 5px 5px;flex:34px 0 0}.opened .colors .circle.button{margin:0 5px 5px}.opened .colors .circle.wrapper.color{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.opened .colors .circle-border{border:1px solid rgba(0,0,0,.03)}.opened .color-picker-wrapper{margin:5px 15px}.opened .nav-wrapper{overflow:hidden;margin:5px}.opened .nav-wrapper .round-button{padding:5px 0;width:40px;height:40px;box-sizing:border-box;border-radius:100%;text-align:center;line-height:45px}.opened .manual-input-wrapper{display:flex;margin:15px;font-family:sans-serif}.opened .manual-input-wrapper p{margin:0;text-align:center;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:48px;width:145px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.opened .manual-input-wrapper .g-input{border:1px solid #e8ebed;height:45px;border-radius:5px;width:100%}.opened .manual-input-wrapper .g-input input{font-size:9px;border:none;width:100%;text-transform:uppercase;outline:none;text-align:center;letter-spacing:1px;color:#595b65;height:100%;border-radius:5px;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ColorPickerComponent, selector: "color-picker", inputs: ["color", "controls"], outputs: ["sliderChange", "onAlphaChange"] }], animations: [
trigger('colorsAnimation', [
transition('void => slide-in', [
// Initially all colors are hidden
query(':enter', style({ opacity: 0 }), { optional: true }),
//slide-in animation
query(':enter', stagger('10ms', [
animate('.3s ease-in', keyframes([
style({ opacity: 0, transform: 'translatex(-50%)', offset: 0 }),
style({
opacity: 0.5,
transform: 'translatex(-10px) scale(1.1)',
offset: 0.3,
}),
style({ opacity: 1, transform: 'translatex(0)', offset: 1 }),
])),
]), { optional: true }),
]),
//popup animation
transition('void => popup', [
query(':enter', style({ opacity: 0, transform: 'scale(0)' }), {
optional: true,
}),
query(':enter', stagger('10ms', [
animate('500ms ease-out', keyframes([
style({ opacity: 0.5, transform: 'scale(.5)', offset: 0.3 }),
style({ opacity: 1, transform: 'scale(1.1)', offset: 0.8 }),
style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
])),
]), { optional: true }),
]),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PanelComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-colors-panel', animations: [
trigger('colorsAnimation', [
transition('void => slide-in', [
// Initially all colors are hidden
query(':enter', style({ opacity: 0 }), { optional: true }),
//slide-in animation
query(':enter', stagger('10ms', [
animate('.3s ease-in', keyframes([
style({ opacity: 0, transform: 'translatex(-50%)', offset: 0 }),
style({
opacity: 0.5,
transform: 'translatex(-10px) scale(1.1)',
offset: 0.3,
}),
style({ opacity: 1, transform: 'translatex(0)', offset: 1 }),
])),
]), { optional: true }),
]),
//popup animation
transition('void => popup', [
query(':enter', style({ opacity: 0, transform: 'scale(0)' }), {
optional: true,
}),
query(':enter', stagger('10ms', [
animate('500ms ease-out', keyframes([
style({ opacity: 0.5, transform: 'scale(.5)', offset: 0.3 }),
style({ opacity: 1, transform: 'scale(1.1)', offset: 0.8 }),
style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
])),
]), { optional: true }),
]),
]),
], template: "<div class=\"opened\" [style]=\"positionString\" #dialog>\n <ng-container *ngIf=\"menu == 1\">\n <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n <ng-container *ngFor=\"let color of palette; let i = index\">\n <div class=\"circle wrapper color\">\n <div\n (click)=\"onColorClick(color)\"\n class=\"circle color circle-border\"\n [class.colornull]=\"!color\"\n [ngStyle]=\"getBackgroundColor(color)\"\n >\n <div *ngIf=\"i == this.indexSeleccionado\" class=\"selected\"></div>\n </div>\n </div>\n </ng-container>\n <div\n style=\"background: rgb(245 245 245); position: relative\"\n (click)=\"addColor()\"\n *ngIf=\"!hideColorPicker && this.colorPickerControls != 'only-alpha'\"\n class=\"circle button\"\n >\n <div\n *ngIf=\"this.indexSeleccionado === undefined\"\n style=\"\n position: absolute;\n height: 7px;\n width: 7px;\n border: 1px solid rgba(0, 0, 0, 0.03);\n border-radius: 100%;\n top: 0;\n right: 0;\n \"\n [ngStyle]=\"getBackgroundColor(color)\"\n ></div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#222222\"\n >\n <path d=\"M24 24H0V0h24v24z\" fill=\"none\" opacity=\".87\" />\n <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z\" />\n </svg>\n <!-- <div class=\"add\">\n <icons icon=\"add\"></icons>\n </div> -->\n </div>\n <color-picker\n *ngIf=\"!hideColorPicker && this.colorPickerControls == 'only-alpha'\"\n [controls]=\"colorPickerControls\"\n [color]=\"hsva\"\n (colorChange)=\"onChangeColorPicker($event)\"\n (onAlphaChange)=\"onAlphaChange($event)\"\n ></color-picker>\n </div>\n </ng-container>\n <ng-container *ngIf=\"menu == 2\">\n <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n <div class=\"circle wrapper\">\n <div (click)=\"onClickBack()\" class=\"add\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n />\n </svg>\n </div>\n </div>\n\n <ng-container *ngFor=\"let variant of variants\">\n <div class=\"circle wrapper color\">\n <div\n [class.colornull]=\"!variant\"\n (click)=\"changeColor(variant)\"\n class=\"circle circle-border\"\n [ngStyle]=\"{ background: variant }\"\n >\n <div *ngIf=\"isSelected(variant)\" class=\"selected\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"menu == 3\">\n <div class=\"nav-wrapper\">\n <div\n (click)=\"onClickBack()\"\n class=\"round-button button\"\n style=\"float: left\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n />\n </svg>\n </div>\n <button (click)=\"emitClose('cancel')\" style=\"float: right\">\n {{ cancelLabel }}\n </button>\n <button (click)=\"emitClose('accept')\" style=\"float: right\">\n {{ acceptLabel }}\n </button>\n </div>\n <div class=\"color-picker-wrapper\">\n <!-- <span [(colorPicker)]=\"color\"></span> -->\n <color-picker\n [controls]=\"colorPickerControls\"\n [color]=\"hsva\"\n (sliderChange)=\"onChangeColorPicker($event)\"\n ></color-picker>\n </div>\n </ng-container>\n <div class=\"manual-input-wrapper\" *ngIf=\"!hideTextInput\">\n <p (click)=\"nextFormat()\" style=\"cursor: pointer;\">{{ colorFormats[format] }}</p>\n <div class=\"g-input\">\n <input\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"color\"\n [style.font-size.px]=\"color && color.length > 23 ? 9 : 10\"\n [style.letter-spacing.px]=\"color && color.length > 16 ? 0 : 1.5\"\n (keyup)=\"changeColorManual(paintInput.value)\"\n (keydown.enter)=\"emitClose('accept')\"\n #paintInput\n />\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;z-index:2001}.hidden{display:none}.button{display:flex;align-items:center;justify-content:center}.top{transform:translateY(-100%)}.opened{box-sizing:border-box;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background:#fff;width:250px;border-radius:5px;position:absolute}.opened button{border:none;font-family:inherit;font-size:12px;background-color:unset;-webkit-user-select:none;user-select:none;padding:10px;letter-spacing:1px;color:#222;border-radius:3px;line-height:20px}.opened button:hover,.opened .button:hover{background-color:#0000000d;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1);transition-property:opacity,background-color;transition-duration:.2s,.2s;transition-timing-function:cubic-bezier(.35,0,.25,1),cubic-bezier(.35,0,.25,1);transition-delay:0s,0s}.opened button:focus{outline:none}.opened .colors{display:flex;flex-wrap:wrap;align-items:center;margin:15px}.opened .colors .circle{height:34px;width:34px;box-sizing:border-box;border-radius:100%;cursor:pointer}.opened .colors .circle .add{font-size:20px;line-height:45px;text-align:center}.opened .colors .circle .selected{border:2px solid white;border-radius:100%;height:28px;width:28px;box-sizing:border-box;margin:2px}.opened .colors .circle.colornull{background:linear-gradient(135deg,rgba(236,236,236,.7) 0%,rgba(236,236,236,.7) 45%,#de0f00 50%,rgba(236,236,236,.7) 55%,rgba(236,236,236,.7) 100%)}.opened .colors .circle.wrapper{margin:0 5px 5px;flex:34px 0 0}.opened .colors .circle.button{margin:0 5px 5px}.opened .colors .circle.wrapper.color{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.opened .colors .circle-border{border:1px solid rgba(0,0,0,.03)}.opened .color-picker-wrapper{margin:5px 15px}.opened .nav-wrapper{overflow:hidden;margin:5px}.opened .nav-wrapper .round-button{padding:5px 0;width:40px;height:40px;box-sizing:border-box;border-radius:100%;text-align:center;line-height:45px}.opened .manual-input-wrapper{display:flex;margin:15px;font-family:sans-serif}.opened .manual-input-wrapper p{margin:0;text-align:center;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:48px;width:145px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.opened .manual-input-wrapper .g-input{border:1px solid #e8ebed;height:45px;border-radius:5px;width:100%}.opened .manual-input-wrapper .g-input input{font-size:9px;border:none;width:100%;text-transform:uppercase;outline:none;text-align:center;letter-spacing:1px;color:#595b65;height:100%;border-radius:5px;margin:0;padding:0}\n"] }]
}], ctorParameters: function () { return [{ type: i1.ConverterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { click: [{
type: HostListener,
args: ['document:mousedown', ['$event']]
}], onScroll: [{
type: HostListener,
args: ['document:scroll']
}], onResize: [{
type: HostListener,
args: ['window:resize']
}], top: [{
type: HostBinding,
args: ['style.top.px']
}], left: [{
type: HostBinding,
args: ['style.left.px']
}], panelRef: [{
type: ViewChild,
args: ['dialog']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbG9ycy9zcmMvbGliL2NvbXBvbmVudHMvcGFuZWwvcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbG9ycy9zcmMvbGliL2NvbXBvbmVudHMvcGFuZWwvcGFuZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFNVCxTQUFTLEVBRVQsWUFBWSxFQUNaLFdBQVcsR0FDWixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsT0FBTyxFQUNQLFVBQVUsRUFDVixLQUFLLEVBQ0wsS0FBSyxFQUNMLE9BQU8sRUFDUCxPQUFPLEVBQ1AsU0FBUyxHQUNWLE1BQU0scUJBQXFCLENBQUM7QUFFN0IsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRW5ELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFaEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7Ozs7QUFzRHBELE1BQU0sT0FBTyxjQUFjO0lBRXpCLEtBQUssQ0FBQyxLQUFLO1FBQ1QsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3pCLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDMUI7SUFDSCxDQUFDO0lBR0QsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIs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Q0YsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQ25COzZCQUNGLENBQUM7eUJBQ0gsQ0FBQztxQkFDSDt1SUFJRCxLQUFLO3NCQURKLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBUTlDLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxpQkFBaUI7Z0JBSy9CLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxlQUFlO2dCQUtPLEdBQUc7c0JBQXRDLFdBQVc7dUJBQUMsY0FBYztnQkFDVSxJQUFJO3NCQUF4QyxXQUFXO3VCQUFDLGVBQWU7Z0JBQ1AsUUFBUTtzQkFBNUIsU0FBUzt1QkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBPbkluaXQsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIFZpZXdDaGlsZCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdExpc3RlbmVyLFxuICBIb3N0QmluZGluZyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICB0cmlnZ2VyLFxuICB0cmFuc2l0aW9uLFxuICBxdWVyeSxcbiAgc3R5bGUsXG4gIHN0YWdnZXIsXG4gIGFuaW1hdGUsXG4gIGtleWZyYW1lcyxcbn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBpc0Rlc2NlbmRhbnRPclNhbWUgfSBmcm9tICcuLi8uLi9oZWxwZXJzL2hlbHBlcnMnO1xuaW1wb3J0IHsgQ29sb3JGb3JtYXRzIH0gZnJvbSAnLi4vLi4vZW51bXMvZm9ybWF0cyc7XG5pbXBvcnQgeyBDb252ZXJ0ZXJTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvY29udmVydGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgZGVmYXVs