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)
34 lines • 8.08 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: "15.1.2", ngImport: i0, type: NgxColorsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgxColorsTriggerDirective, host: true }], target: i0.ɵɵFactoryTarget.Component });
NgxColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NgxColorsComponent, selector: "ngx-colors", ngImport: i0, template: "<div class=\"app-color-picker\">\n <div class=\"preview\">\n <div class=\"preview-background\">\n <div\n class=\"circle\"\n [class.colornull]=\"!color\"\n [ngStyle]=\"{ background: color }\"\n ></div>\n </div>\n </div>\n</div>\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"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxColorsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-colors', template: "<div class=\"app-color-picker\">\n <div class=\"preview\">\n <div class=\"preview-background\">\n <div\n class=\"circle\"\n [class.colornull]=\"!color\"\n [ngStyle]=\"{ background: color }\"\n ></div>\n </div>\n </div>\n</div>\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9ycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29sb3JzL3NyYy9saWIvbmd4LWNvbG9ycy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29sb3JzL3NyYy9saWIvbmd4LWNvbG9ycy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBd0MsTUFBTSxlQUFlLENBQUM7Ozs7QUFTdEYsTUFBTSxPQUFPLGtCQUFrQjtJQUc3QixZQUNVLEtBQXdCLEVBQ2hCLGdCQUEyQztRQURuRCxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUNoQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQTJCO1FBSnJELDRDQUF1QyxHQUF3QixJQUFJLENBQUM7UUFxQjVFLFVBQVU7UUFDVixVQUFLLEdBQVcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQztJQWpCekMsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsdUNBQXVDO1lBQzFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQy9DLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO2dCQUNuQixJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyx1Q0FBdUMsRUFBRTtZQUNoRCxJQUFJLENBQUMsdUNBQXVDLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDNUQ7SUFDSCxDQUFDOzsrR0FwQlUsa0JBQWtCO21HQUFsQixrQkFBa0Isa0RDVC9CLDZRQVdBOzJGREZhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxZQUFZOzswQkFTbkIsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdCwgT25Jbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IE5neENvbG9yc1RyaWdnZXJEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvbmd4LWNvbG9ycy10cmlnZ2VyLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1jb2xvcnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LWNvbG9ycy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1jb2xvcnMuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4Q29sb3JzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBwcml2YXRlIHRyaWdnZXJEaXJlY3RpdmVDb2xvckNoYW5nZVN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uIHwgbnVsbCA9IG51bGw7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQEhvc3QoKSBwcml2YXRlIHRyaWdnZXJEaXJlY3RpdmU6IE5neENvbG9yc1RyaWdnZXJEaXJlY3RpdmVcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMudHJpZ2dlckRpcmVjdGl2ZUNvbG9yQ2hhbmdlU3Vic2NyaXB0aW9uID1cbiAgICAgIHRoaXMudHJpZ2dlckRpcmVjdGl2ZS5jaGFuZ2Uuc3Vic2NyaWJlKChjb2xvcikgPT4ge1xuICAgICAgICB0aGlzLmNvbG9yID0gY29sb3I7XG4gICAgICAgIHRoaXMuY2RSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnRyaWdnZXJEaXJlY3RpdmVDb2xvckNoYW5nZVN1YnNjcmlwdGlvbikge1xuICAgICAgdGhpcy50cmlnZ2VyRGlyZWN0aXZlQ29sb3JDaGFuZ2VTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICAvL0lPIGNvbG9yXG4gIGNvbG9yOiBzdHJpbmcgPSB0aGlzLnRyaWdnZXJEaXJlY3RpdmUuY29sb3I7XG59XG4iLCI8ZGl2IGNsYXNzPVwiYXBwLWNvbG9yLXBpY2tlclwiPlxuICA8ZGl2IGNsYXNzPVwicHJldmlld1wiPlxuICAgIDxkaXYgY2xhc3M9XCJwcmV2aWV3LWJhY2tncm91bmRcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjaXJjbGVcIlxuICAgICAgICBbY2xhc3MuY29sb3JudWxsXT1cIiFjb2xvclwiXG4gICAgICAgIFtuZ1N0eWxlXT1cInsgYmFja2dyb3VuZDogY29sb3IgfVwiXG4gICAgICA+PC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=