ngx-input-color
Version:
Angular color input component and color picker (with HSL, HSV, RGB, CMYK, HEX, alpha, eye-dropper, etc)
52 lines • 13.7 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";
export class HslComponent {
set color(c) {
if (c.equals(this.inputColor))
return;
this.inputColor = c;
const hsla = c.toHsl();
this.hue = hsla.h;
this.saturation = hsla.s;
this.luminance = hsla.l;
this.alpha = hsla.a ?? 1;
this.baseColor = c.toHexString(false);
}
constructor() {
this.hue = 0;
this.saturation = 0;
this.luminance = 0;
this.alpha = 1;
this.baseColor = 'rgb(0,0,0)';
this.colorChange = new EventEmitter();
}
ngOnInit() { }
generateColor() {
try {
const hsla = { h: this.hue, s: this.saturation, l: this.luminance, a: this.alpha };
const color = new NgxColor(hsla);
this.baseColor = 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: HslComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HslComponent, selector: "app-hsl", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<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%)\">\r\n <div class=\"slider-title\">\r\n <span>Hue</span>\r\n <input type=\"number\" [(ngModel)]=\"hue\" min=\"0\" max=\"360\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"saturation\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Saturation</span>\r\n <input type=\"number\" [(ngModel)]=\"saturation\" min=\"0\" max=\"100\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"luminance\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n <div class=\"slider-title\">\r\n <span>Luminance</span>\r\n <input type=\"number\" [(ngModel)]=\"luminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n </div>\r\n</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,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Alpha</span>\r\n <input type=\"number\" [(ngModel)]=\"alpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HslComponent, decorators: [{
type: Component,
args: [{ selector: 'app-hsl', template: "<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%)\">\r\n <div class=\"slider-title\">\r\n <span>Hue</span>\r\n <input type=\"number\" [(ngModel)]=\"hue\" min=\"0\" max=\"360\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"saturation\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Saturation</span>\r\n <input type=\"number\" [(ngModel)]=\"saturation\" min=\"0\" max=\"100\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"luminance\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n <div class=\"slider-title\">\r\n <span>Luminance</span>\r\n <input type=\"number\" [(ngModel)]=\"luminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n </div>\r\n</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,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Alpha</span>\r\n <input type=\"number\" [(ngModel)]=\"alpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
}], ctorParameters: () => [], propDecorators: { color: [{
type: Input
}], colorChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHNsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbnB1dC1jb2xvci9zcmMvbGliL2luc3BlY3RvcnMvaHNsL2hzbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaW5wdXQtY29sb3Ivc3JjL2xpYi9pbnNwZWN0b3JzL2hzbC9oc2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7QUFTdkQsTUFBTSxPQUFPLFlBQVk7SUFRdkIsSUFBYSxLQUFLLENBQUMsQ0FBVztRQUM1QixJQUFJLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUFFLE9BQU87UUFDdEMsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7UUFDcEIsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUNsQixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRDtRQWxCQSxRQUFHLEdBQVcsQ0FBQyxDQUFDO1FBQ2hCLGVBQVUsR0FBVyxDQUFDLENBQUM7UUFDdkIsY0FBUyxHQUFXLENBQUMsQ0FBQztRQUN0QixVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxZQUFZLENBQUM7UUFhZixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUF3QixDQUFDO0lBQ2xELENBQUM7SUFFaEIsUUFBUSxLQUFJLENBQUM7SUFFYixhQUFhO1FBQ1gsSUFBSSxDQUFDO1lBQ0gsTUFBTSxJQUFJLEdBQVMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3pGLE1BQU0sS0FBSyxHQUFHLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUMxQyxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDO2dCQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztnQkFDeEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDL0IsQ0FBQztRQUNILENBQUM7UUFBQyxPQUFPLEtBQUssRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDbkMsQ0FBQztJQUNILENBQUM7K0dBbkNVLFlBQVk7bUdBQVosWUFBWSxvSENWekIsOGpEQWlEQTs7NEZEdkNhLFlBQVk7a0JBTHhCLFNBQVM7K0JBQ0UsU0FBUzt3REFZTixLQUFLO3NCQUFqQixLQUFLO2dCQVVJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5neENvbG9yIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvY29sb3ItaGVscGVyJztcclxuaW1wb3J0IHsgSFNMQSB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2ludGVyZmFjZXMnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWhzbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2hzbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaHNsLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIc2xDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIGh1ZTogbnVtYmVyID0gMDtcclxuICBzYXR1cmF0aW9uOiBudW1iZXIgPSAwO1xyXG4gIGx1bWluYW5jZTogbnVtYmVyID0gMDtcclxuICBhbHBoYTogbnVtYmVyID0gMTtcclxuICBiYXNlQ29sb3IgPSAncmdiKDAsMCwwKSc7XHJcbiAgcHJpdmF0ZSBpbnB1dENvbG9yPzogTmd4Q29sb3I7XHJcblxyXG4gIEBJbnB1dCgpIHNldCBjb2xvcihjOiBOZ3hDb2xvcikge1xyXG4gICAgaWYgKGMuZXF1YWxzKHRoaXMuaW5wdXRDb2xvcikpIHJldHVybjtcclxuICAgIHRoaXMuaW5wdXRDb2xvciA9IGM7XHJcbiAgICBjb25zdCBoc2xhID0gYy50b0hzbCgpO1xyXG4gICAgdGhpcy5odWUgPSBoc2xhLmg7XHJcbiAgICB0aGlzLnNhdHVyYXRpb24gPSBoc2xhLnM7XHJcbiAgICB0aGlzLmx1bWluYW5jZSA9IGhzbGEubDtcclxuICAgIHRoaXMuYWxwaGEgPSBoc2xhLmEgPz8gMTtcclxuICAgIHRoaXMuYmFzZUNvbG9yID0gYy50b0hleFN0cmluZyhmYWxzZSk7XHJcbiAgfVxyXG4gIEBPdXRwdXQoKSBjb2xvckNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Tmd4Q29sb3IgfCB1bmRlZmluZWQ+KCk7XHJcbiAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHt9XHJcblxyXG4gIGdlbmVyYXRlQ29sb3IoKSB7XHJcbiAgICB0cnkge1xyXG4gICAgICBjb25zdCBoc2xhOiBIU0xBID0geyBoOiB0aGlzLmh1ZSwgczogdGhpcy5zYXR1cmF0aW9uLCBsOiB0aGlzLmx1bWluYW5jZSwgYTogdGhpcy5hbHBoYSB9O1xyXG4gICAgICBjb25zdCBjb2xvciA9IG5ldyBOZ3hDb2xvcihoc2xhKTtcclxuICAgICAgdGhpcy5iYXNlQ29sb3IgPSBjb2xvci50b0hleFN0cmluZyhmYWxzZSk7XHJcbiAgICAgIGlmIChjb2xvci5lcXVhbHModGhpcy5pbnB1dENvbG9yKSA9PSBmYWxzZSkge1xyXG4gICAgICAgIHRoaXMuaW5wdXRDb2xvciA9IGNvbG9yO1xyXG4gICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChjb2xvcik7XHJcbiAgICAgIH1cclxuICAgIH0gY2F0Y2ggKGVycm9yKSB7XHJcbiAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh1bmRlZmluZWQpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8c2xpZGVyXHJcbiAgWyhuZ01vZGVsKV09XCJodWVcIlxyXG4gIFttaW5dPVwiMFwiXHJcbiAgW21heF09XCIzNjBcIlxyXG4gIFtzdGVwXT1cIjFcIlxyXG4gIChjaGFuZ2UpPVwiZ2VuZXJhdGVDb2xvcigpXCJcclxuICBiYWNrZ3JvdW5kPVwibGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHJlZCAwJSwjZmYwIDE3JSxsaW1lIDMzJSxjeWFuIDUwJSxibHVlIDY2JSwjZjBmIDgzJSxyZWQgMTAwJSlcIj5cclxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXRpdGxlXCI+XHJcbiAgICA8c3Bhbj5IdWU8L3NwYW4+XHJcbiAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFsobmdNb2RlbCldPVwiaHVlXCIgbWluPVwiMFwiIG1heD1cIjM2MFwiIHN0ZXA9XCIxXCIgLz5cclxuICA8L2Rpdj5cclxuPC9zbGlkZXI+XHJcbjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cInNhdHVyYXRpb25cIlxyXG4gIFttaW5dPVwiMFwiXHJcbiAgW21heF09XCIxMDBcIlxyXG4gIFtzdGVwXT1cIjFcIlxyXG4gIChjaGFuZ2UpPVwiZ2VuZXJhdGVDb2xvcigpXCJcclxuICBbYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCM4MDgwODAsJyArIGJhc2VDb2xvciArICcpJ1wiPlxyXG4gIDxkaXYgY2xhc3M9XCJzbGlkZXItdGl0bGVcIj5cclxuICAgIDxzcGFuPlNhdHVyYXRpb248L3NwYW4+XHJcbiAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFsobmdNb2RlbCldPVwic2F0dXJhdGlvblwiIG1pbj1cIjBcIiBtYXg9XCIxMDBcIiBzdGVwPVwiMVwiIC8+XHJcbiAgPC9kaXY+XHJcbjwvc2xpZGVyPlxyXG48c2xpZGVyXHJcbiAgWyhuZ01vZGVsKV09XCJsdW1pbmFuY2VcIlxyXG4gIFttaW5dPVwiMFwiXHJcbiAgW21heF09XCIxMDBcIlxyXG4gIFtzdGVwXT1cIjFcIlxyXG4gIChjaGFuZ2UpPVwiZ2VuZXJhdGVDb2xvcigpXCJcclxuICBbYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LGJsYWNrLCcgKyBiYXNlQ29sb3IgKyAnLHdoaXRlKSdcIj5cclxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXRpdGxlXCI+XHJcbiAgICA8c3Bhbj5MdW1pbmFuY2U8L3NwYW4+XHJcbiAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFsobmdNb2RlbCldPVwibHVtaW5hbmNlXCIgbWluPVwiMFwiIG1heD1cIjEwMFwiIHN0ZXA9XCIxXCIgLz5cclxuICA8L2Rpdj5cclxuPC9zbGlkZXI+XHJcbjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cImFscGhhXCJcclxuICBbbWluXT1cIjBcIlxyXG4gIFttYXhdPVwiMVwiXHJcbiAgW3N0ZXBdPVwiMC4xXCJcclxuICAoY2hhbmdlKT1cImdlbmVyYXRlQ29sb3IoKVwiXHJcbiAgW2lzQmdUcmFuc3BhcmVudF09XCJ0cnVlXCJcclxuICBbYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHRyYW5zcGFyZW50LCcgKyBiYXNlQ29sb3IgKyAnKSdcIj5cclxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXRpdGxlXCI+XHJcbiAgICA8c3Bhbj5BbHBoYTwvc3Bhbj5cclxuICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgWyhuZ01vZGVsKV09XCJhbHBoYVwiIG1pbj1cIjBcIiBtYXg9XCIxXCIgc3RlcD1cIjAuMVwiIC8+XHJcbiAgPC9kaXY+XHJcbjwvc2xpZGVyPlxyXG4iXX0=