ng2-color-picker
Version:
Simple color picker for Angular 2
82 lines • 4.79 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Input, Self } from '@angular/core';
import { NgModel } from '@angular/forms';
import { ColorPickerConfiguration } from '../models';
var ColorPickerComponent = (function () {
function ColorPickerComponent(cd) {
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.cd = cd;
cd.valueAccessor = this;
this.config = new ColorPickerConfiguration();
}
ColorPickerComponent.prototype.ngOnInit = function () {
this._processOptions(this.pickerConfig);
};
ColorPickerComponent.prototype.writeValue = function (value) { };
ColorPickerComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
ColorPickerComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
ColorPickerComponent.prototype.setColor = function (color) {
this.cd.viewToModelUpdate(color);
this.onTouched();
};
ColorPickerComponent.prototype._processOptions = function (opts) {
if (opts != null) {
var IsNumber = function (val) { return typeof (val) === 'number'; };
var IsArray = function (val) { return Array.isArray(val); };
if (IsNumber(opts.width)) {
this.config.width = opts.width;
}
if (IsNumber(opts.height)) {
this.config.height = opts.height;
}
if (IsNumber(opts.borderRadius)) {
this.config.borderRadius = opts.borderRadius;
}
}
if (this.availableColors == null) {
console.warn('[ng2-color-picker] No available colors provided.');
}
};
return ColorPickerComponent;
}());
__decorate([
Input(),
__metadata("design:type", Object)
], ColorPickerComponent.prototype, "pickerConfig", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], ColorPickerComponent.prototype, "availableColors", void 0);
ColorPickerComponent = __decorate([
Component({
selector: "color-picker[ngModel]",
template: "\n <div class=\"color-picker-container\" dropdown>\n <span class=\"current-color dropdown-toggle\" \n [style.width]=\"config.width + 'px'\" \n [style.height]=\"config.height + 'px'\"\n [style.border-radius]=\"config.borderRadius + 'px'\" \n [style.background-color]=\"cd.viewModel\" \n dropdownToggle>\n </span>\n <ul class=\"dropdown-menu color-picker-dropdown\" \n role=\"menu\" \n *dropdownMenu>\n <li class=\"color-picker-color\" \n *ngFor=\"let color of availableColors\" \n [style.width]=\"config.width + 'px'\" \n [style.height]=\"config.height + 'px'\"\n [style.border-radius]=\"config.borderRadius + 'px'\" \n [style.background-color]=\"color\" \n (click)=\"setColor(color)\" \n [title]=\"color\">\n </li>\n </ul>\n </div>\n ",
styles: [
".color-picker-container {\n display: inline-block; \n position: relative; }",
".current-color {\n display: inline-block;\n background-color: #ff0000;\n cursor: pointer; }",
".color-picker-color {\n display: inline-block;\n margin-left: 4px;\n cursor: pointer; }",
".color-picker-dropdown {\n padding-bottom: 0;\n }"
],
providers: [NgModel]
}),
__param(0, Self()),
__metadata("design:paramtypes", [NgModel])
], ColorPickerComponent);
export { ColorPickerComponent };
//# sourceMappingURL=color-picker.component.js.map