ngx-input-color
Version:
Angular color input component and color picker (with HSL, HSV, RGB, CMYK, HEX, alpha, eye-dropper, etc)
59 lines • 11.5 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgxColor } from '../../../utils/color-helper';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../../slider/slider.component";
import * as i3 from "../../../saturation/saturation.component";
export class PickerComponent {
set color(c) {
if (c.equals(this.inputColor))
return;
this.inputColor = c;
const shva = c.toHsv();
this.hue = shva.h;
this.board = { x: shva.s, y: 100 - shva.v };
this.alpha = shva.a ?? 1;
const pureColor = new NgxColor({ h: this.hue, s: 100, v: 100, a: 1 });
this.baseColor = pureColor.toHexString(false);
this.alphaBgColor = this.inputColor.toHexString(false);
}
constructor() {
this.hue = 300;
this.baseColor = 'rgb(0,0,0)';
this.alphaBgColor = '#000';
this.board = { x: 1, y: 0 };
this.alpha = 1;
this.simpleMode = false;
this.colorChange = new EventEmitter();
}
ngOnInit() { }
generateColor() {
try {
const hsva = { h: this.hue, s: this.board.x, v: 100 - this.board.y, a: this.alpha };
const color = new NgxColor(hsva);
const pureColor = new NgxColor({ h: this.hue, s: 100, v: 100, a: 1 });
this.baseColor = pureColor.toHexString(false);
this.alphaBgColor = color.toHexString(false);
if (color.equals(this.inputColor) == false) {
this.inputColor = color;
this.colorChange.emit(color);
}
}
catch (error) {
this.colorChange.emit(undefined);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickerComponent, selector: "app-picker", inputs: { simpleMode: "simpleMode", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<saturation\r\n [height]=\"simpleMode ? 150 : 160\"\r\n [(ngModel)]=\"board\"\r\n [min]=\"{ x: 0, y: 0 }\"\r\n [max]=\"{ x: 100, y: 100 }\"\r\n [step]=\"1\"\r\n [color]=\"baseColor\"\r\n (change)=\"generateColor()\"></saturation>\r\n<slider\r\n [(ngModel)]=\"hue\"\r\n [min]=\"0\"\r\n [max]=\"360\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\"></slider>\r\n<slider\r\n [(ngModel)]=\"alpha\"\r\n [min]=\"0\"\r\n [max]=\"1\"\r\n [step]=\"0.1\"\r\n (change)=\"generateColor()\"\r\n [isBgTransparent]=\"true\"\r\n [background]=\"'linear-gradient(to right,transparent,' + alphaBgColor + ')'\"></slider>\r\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }, { kind: "component", type: i3.SaturationComponent, selector: "saturation", inputs: ["width", "height", "color", "step", "min", "max"], outputs: ["change"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, decorators: [{
type: Component,
args: [{ selector: 'app-picker', template: "<saturation\r\n [height]=\"simpleMode ? 150 : 160\"\r\n [(ngModel)]=\"board\"\r\n [min]=\"{ x: 0, y: 0 }\"\r\n [max]=\"{ x: 100, y: 100 }\"\r\n [step]=\"1\"\r\n [color]=\"baseColor\"\r\n (change)=\"generateColor()\"></saturation>\r\n<slider\r\n [(ngModel)]=\"hue\"\r\n [min]=\"0\"\r\n [max]=\"360\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\"></slider>\r\n<slider\r\n [(ngModel)]=\"alpha\"\r\n [min]=\"0\"\r\n [max]=\"1\"\r\n [step]=\"0.1\"\r\n (change)=\"generateColor()\"\r\n [isBgTransparent]=\"true\"\r\n [background]=\"'linear-gradient(to right,transparent,' + alphaBgColor + ')'\"></slider>\r\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"] }]
}], ctorParameters: () => [], propDecorators: { simpleMode: [{
type: Input
}], color: [{
type: Input
}], colorChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbnB1dC1jb2xvci9zcmMvbGliL2luc3BlY3RvcnMvcGlja2VyL3BpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaW5wdXQtY29sb3Ivc3JjL2xpYi9pbnNwZWN0b3JzL3BpY2tlci9waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7O0FBU3ZELE1BQU0sT0FBTyxlQUFlO0lBVTFCLElBQWEsS0FBSyxDQUFDLENBQVc7UUFDNUIsSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7WUFBRSxPQUFPO1FBQ3RDLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLE1BQU0sSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDbEIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxHQUFHLEdBQUcsSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekIsTUFBTSxTQUFTLEdBQUcsSUFBSSxRQUFRLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdEUsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekQsQ0FBQztJQUdEO1FBdEJBLFFBQUcsR0FBRyxHQUFHLENBQUM7UUFDVixjQUFTLEdBQUcsWUFBWSxDQUFDO1FBQ3pCLGlCQUFZLEdBQUcsTUFBTSxDQUFDO1FBRXRCLFVBQUssR0FBYyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDO1FBQ2xDLFVBQUssR0FBRyxDQUFDLENBQUM7UUFFRCxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBYWxCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQXdCLENBQUM7SUFFbEQsQ0FBQztJQUVoQixRQUFRLEtBQUksQ0FBQztJQUViLGFBQWE7UUFDWCxJQUFJLENBQUM7WUFDSCxNQUFNLElBQUksR0FBUyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDMUYsTUFBTSxLQUFLLEdBQUcsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDakMsTUFBTSxTQUFTLEdBQUcsSUFBSSxRQUFRLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDdEUsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzlDLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUU3QyxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDO2dCQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztnQkFDeEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDL0IsQ0FBQztRQUNILENBQUM7UUFBQyxPQUFPLEtBQUssRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDbkMsQ0FBQztJQUNILENBQUM7K0dBMUNVLGVBQWU7bUdBQWYsZUFBZSxpSkNWNUIsOHRCQXVCQTs7NEZEYmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZO3dEQVliLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRU8sS0FBSztzQkFBakIsS0FBSztnQkFXSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ3hDb2xvciB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NvbG9yLWhlbHBlcic7XHJcbmltcG9ydCB7IElQb3NpdGlvbiB9IGZyb20gJy4uLy4uLy4uL21vZGVscy9JUG9zaXRpb24nO1xyXG5pbXBvcnQgeyBIU1ZBIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvaW50ZXJmYWNlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1waWNrZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9waWNrZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3BpY2tlci5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUGlja2VyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBodWUgPSAzMDA7XHJcbiAgYmFzZUNvbG9yID0gJ3JnYigwLDAsMCknO1xyXG4gIGFscGhhQmdDb2xvciA9ICcjMDAwJztcclxuXHJcbiAgYm9hcmQ6IElQb3NpdGlvbiA9IHsgeDogMSwgeTogMCB9O1xyXG4gIGFscGhhID0gMTtcclxuICBwcml2YXRlIGlucHV0Q29sb3I/OiBOZ3hDb2xvcjtcclxuICBASW5wdXQoKSBzaW1wbGVNb2RlID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIHNldCBjb2xvcihjOiBOZ3hDb2xvcikge1xyXG4gICAgaWYgKGMuZXF1YWxzKHRoaXMuaW5wdXRDb2xvcikpIHJldHVybjtcclxuICAgIHRoaXMuaW5wdXRDb2xvciA9IGM7XHJcbiAgICBjb25zdCBzaHZhID0gYy50b0hzdigpO1xyXG4gICAgdGhpcy5odWUgPSBzaHZhLmg7XHJcbiAgICB0aGlzLmJvYXJkID0geyB4OiBzaHZhLnMsIHk6IDEwMCAtIHNodmEudiB9O1xyXG4gICAgdGhpcy5hbHBoYSA9IHNodmEuYSA/PyAxO1xyXG4gICAgY29uc3QgcHVyZUNvbG9yID0gbmV3IE5neENvbG9yKHsgaDogdGhpcy5odWUsIHM6IDEwMCwgdjogMTAwLCBhOiAxIH0pO1xyXG4gICAgdGhpcy5iYXNlQ29sb3IgPSBwdXJlQ29sb3IudG9IZXhTdHJpbmcoZmFsc2UpO1xyXG4gICAgdGhpcy5hbHBoYUJnQ29sb3IgPSB0aGlzLmlucHV0Q29sb3IudG9IZXhTdHJpbmcoZmFsc2UpO1xyXG4gIH1cclxuICBAT3V0cHV0KCkgY29sb3JDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPE5neENvbG9yIHwgdW5kZWZpbmVkPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG5nT25Jbml0KCkge31cclxuXHJcbiAgZ2VuZXJhdGVDb2xvcigpIHtcclxuICAgIHRyeSB7XHJcbiAgICAgIGNvbnN0IGhzdmE6IEhTVkEgPSB7IGg6IHRoaXMuaHVlLCBzOiB0aGlzLmJvYXJkLngsIHY6IDEwMCAtIHRoaXMuYm9hcmQueSwgYTogdGhpcy5hbHBoYSB9O1xyXG4gICAgICBjb25zdCBjb2xvciA9IG5ldyBOZ3hDb2xvcihoc3ZhKTtcclxuICAgICAgY29uc3QgcHVyZUNvbG9yID0gbmV3IE5neENvbG9yKHsgaDogdGhpcy5odWUsIHM6IDEwMCwgdjogMTAwLCBhOiAxIH0pO1xyXG4gICAgICB0aGlzLmJhc2VDb2xvciA9IHB1cmVDb2xvci50b0hleFN0cmluZyhmYWxzZSk7XHJcbiAgICAgIHRoaXMuYWxwaGFCZ0NvbG9yID0gY29sb3IudG9IZXhTdHJpbmcoZmFsc2UpO1xyXG5cclxuICAgICAgaWYgKGNvbG9yLmVxdWFscyh0aGlzLmlucHV0Q29sb3IpID09IGZhbHNlKSB7XHJcbiAgICAgICAgdGhpcy5pbnB1dENvbG9yID0gY29sb3I7XHJcbiAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGNvbG9yKTtcclxuICAgICAgfVxyXG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcclxuICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KHVuZGVmaW5lZCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxzYXR1cmF0aW9uXHJcbiAgW2hlaWdodF09XCJzaW1wbGVNb2RlID8gMTUwIDogMTYwXCJcclxuICBbKG5nTW9kZWwpXT1cImJvYXJkXCJcclxuICBbbWluXT1cInsgeDogMCwgeTogMCB9XCJcclxuICBbbWF4XT1cInsgeDogMTAwLCB5OiAxMDAgfVwiXHJcbiAgW3N0ZXBdPVwiMVwiXHJcbiAgW2NvbG9yXT1cImJhc2VDb2xvclwiXHJcbiAgKGNoYW5nZSk9XCJnZW5lcmF0ZUNvbG9yKClcIj48L3NhdHVyYXRpb24+XHJcbjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cImh1ZVwiXHJcbiAgW21pbl09XCIwXCJcclxuICBbbWF4XT1cIjM2MFwiXHJcbiAgW3N0ZXBdPVwiMVwiXHJcbiAgKGNoYW5nZSk9XCJnZW5lcmF0ZUNvbG9yKClcIlxyXG4gIGJhY2tncm91bmQ9XCJsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQscmVkIDAlLCNmZjAgMTclLGxpbWUgMzMlLGN5YW4gNTAlLGJsdWUgNjYlLCNmMGYgODMlLHJlZCAxMDAlKVwiPjwvc2xpZGVyPlxyXG48c2xpZGVyXHJcbiAgWyhuZ01vZGVsKV09XCJhbHBoYVwiXHJcbiAgW21pbl09XCIwXCJcclxuICBbbWF4XT1cIjFcIlxyXG4gIFtzdGVwXT1cIjAuMVwiXHJcbiAgKGNoYW5nZSk9XCJnZW5lcmF0ZUNvbG9yKClcIlxyXG4gIFtpc0JnVHJhbnNwYXJlbnRdPVwidHJ1ZVwiXHJcbiAgW2JhY2tncm91bmRdPVwiJ2xpbmVhci1ncmFkaWVudCh0byByaWdodCx0cmFuc3BhcmVudCwnICsgYWxwaGFCZ0NvbG9yICsgJyknXCI+PC9zbGlkZXI+XHJcbiJdfQ==