ngx-colors-v
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)
34 lines • 8.25 kB
JavaScript
import { Component, Host } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./directives/ngx-colors-trigger.directive";
import * as i2 from "@angular/common";
export class NgxColorsComponent {
constructor(cdRef, triggerDirective) {
this.cdRef = cdRef;
this.triggerDirective = triggerDirective;
this.triggerDirectiveColorChangeSubscription = null;
//IO color
this.color = this.triggerDirective.color;
}
ngOnInit() {
this.triggerDirectiveColorChangeSubscription =
this.triggerDirective.change.subscribe((color) => {
this.color = color;
this.cdRef.markForCheck();
});
}
ngOnDestroy() {
if (this.triggerDirectiveColorChangeSubscription) {
this.triggerDirectiveColorChangeSubscription.unsubscribe();
}
}
}
NgxColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NgxColorsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgxColorsTriggerDirective, host: true }], target: i0.ɵɵFactoryTarget.Component });
NgxColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NgxColorsComponent, selector: "ngx-colors", ngImport: i0, template: "<div class=\"app-color-picker\">\r\n <div class=\"preview\">\r\n <div class=\"preview-background\">\r\n <div\r\n class=\"circle\"\r\n [class.colornull]=\"!color\"\r\n [ngStyle]=\"{ background: color }\"\r\n ></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host .app-color-picker{line-height:1px;font-family:sans-serif}:host .app-color-picker .preview{margin:2px;display:inline-block;box-sizing:border-box;border-radius:100%;background:white;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f}:host .app-color-picker .preview .preview-background{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;border-radius:100%}:host .app-color-picker .preview .circle{height:20px;width:20px;box-sizing:border-box;border-radius:100%;cursor:pointer}:host .app-color-picker .preview .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%)}:host .app-color-picker .preview .noselected{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}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NgxColorsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-colors', template: "<div class=\"app-color-picker\">\r\n <div class=\"preview\">\r\n <div class=\"preview-background\">\r\n <div\r\n class=\"circle\"\r\n [class.colornull]=\"!color\"\r\n [ngStyle]=\"{ background: color }\"\r\n ></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host .app-color-picker{line-height:1px;font-family:sans-serif}:host .app-color-picker .preview{margin:2px;display:inline-block;box-sizing:border-box;border-radius:100%;background:white;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f}:host .app-color-picker .preview .preview-background{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;border-radius:100%}:host .app-color-picker .preview .circle{height:20px;width:20px;box-sizing:border-box;border-radius:100%;cursor:pointer}:host .app-color-picker .preview .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%)}:host .app-color-picker .preview .noselected{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}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgxColorsTriggerDirective, decorators: [{
type: Host
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9ycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29sb3JzL3NyYy9saWIvbmd4LWNvbG9ycy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29sb3JzL3NyYy9saWIvbmd4LWNvbG9ycy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBd0MsTUFBTSxlQUFlLENBQUM7Ozs7QUFTdEYsTUFBTSxPQUFPLGtCQUFrQjtJQUc3QixZQUNVLEtBQXdCLEVBQ2hCLGdCQUEyQztRQURuRCxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUNoQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQTJCO1FBSnJELDRDQUF1QyxHQUF3QixJQUFJLENBQUM7UUFxQjVFLFVBQVU7UUFDVixVQUFLLEdBQVcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQztJQWpCekMsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsdUNBQXVDO1lBQzFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQy9DLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO2dCQUNuQixJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyx1Q0FBdUMsRUFBRTtZQUNoRCxJQUFJLENBQUMsdUNBQXVDLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDNUQ7SUFDSCxDQUFDOzsrR0FwQlUsa0JBQWtCO21HQUFsQixrQkFBa0Isa0RDVC9CLG1TQVdBOzJGREZhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxZQUFZOzswQkFTbkIsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdCwgT25Jbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBOZ3hDb2xvcnNUcmlnZ2VyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL25neC1jb2xvcnMtdHJpZ2dlci5kaXJlY3RpdmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtY29sb3JzJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LWNvbG9ycy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LWNvbG9ycy5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4Q29sb3JzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIHByaXZhdGUgdHJpZ2dlckRpcmVjdGl2ZUNvbG9yQ2hhbmdlU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb24gfCBudWxsID0gbnVsbDtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGNkUmVmOiBDaGFuZ2VEZXRlY3RvclJlZixcclxuICAgIEBIb3N0KCkgcHJpdmF0ZSB0cmlnZ2VyRGlyZWN0aXZlOiBOZ3hDb2xvcnNUcmlnZ2VyRGlyZWN0aXZlXHJcbiAgKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMudHJpZ2dlckRpcmVjdGl2ZUNvbG9yQ2hhbmdlU3Vic2NyaXB0aW9uID1cclxuICAgICAgdGhpcy50cmlnZ2VyRGlyZWN0aXZlLmNoYW5nZS5zdWJzY3JpYmUoKGNvbG9yKSA9PiB7XHJcbiAgICAgICAgdGhpcy5jb2xvciA9IGNvbG9yO1xyXG4gICAgICAgIHRoaXMuY2RSZWYubWFya0ZvckNoZWNrKCk7XHJcbiAgICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy50cmlnZ2VyRGlyZWN0aXZlQ29sb3JDaGFuZ2VTdWJzY3JpcHRpb24pIHtcclxuICAgICAgdGhpcy50cmlnZ2VyRGlyZWN0aXZlQ29sb3JDaGFuZ2VTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8vSU8gY29sb3JcclxuICBjb2xvcjogc3RyaW5nID0gdGhpcy50cmlnZ2VyRGlyZWN0aXZlLmNvbG9yO1xyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJhcHAtY29sb3ItcGlja2VyXCI+XHJcbiAgPGRpdiBjbGFzcz1cInByZXZpZXdcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJwcmV2aWV3LWJhY2tncm91bmRcIj5cclxuICAgICAgPGRpdlxyXG4gICAgICAgIGNsYXNzPVwiY2lyY2xlXCJcclxuICAgICAgICBbY2xhc3MuY29sb3JudWxsXT1cIiFjb2xvclwiXHJcbiAgICAgICAgW25nU3R5bGVdPVwieyBiYWNrZ3JvdW5kOiBjb2xvciB9XCJcclxuICAgICAgPjwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=