angular-color-picker-fixed
Version:
Radial Color Picker - Angular
111 lines • 11.2 kB
JavaScript
import { __decorate } from "tslib";
// tslint:disable-next-line:max-line-length
import { AfterViewInit, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnInit, Output, OnDestroy } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Animations } from '../../helpers/animations';
var ColorPreviewComponent = /** @class */ (function () {
function ColorPreviewComponent(sanitizer, el) {
this.sanitizer = sanitizer;
this.el = el;
this.confirm = new EventEmitter();
}
Object.defineProperty(ColorPreviewComponent.prototype, "width", {
get: function () {
return (this.size && this.size < 200) ? '36px' : '70px';
},
enumerable: true,
configurable: true
});
Object.defineProperty(ColorPreviewComponent.prototype, "height", {
get: function () {
return (this.size && this.size < 200) ? '36px' : '70px';
},
enumerable: true,
configurable: true
});
ColorPreviewComponent.prototype.onClick = function () {
this.buttonState = {
value: true,
params: {
scale: this.relation
}
};
this.rippleState = {
value: true,
params: {
scale: this.relation
}
};
};
ColorPreviewComponent.prototype.ngOnInit = function () {
};
ColorPreviewComponent.prototype.ngAfterViewInit = function () {
// console.log(this.size);
var rect = this.el.nativeElement.getBoundingClientRect();
var innerCircle = this.size * this.coefficient;
this.relation = innerCircle / rect.width;
// console.log('relation', relation);
};
ColorPreviewComponent.prototype.ngOnChanges = function (changes) {
if (changes.color && changes.color.currentValue) {
this.background = this.sanitizer.bypassSecurityTrustStyle(this.color);
}
};
ColorPreviewComponent.prototype.rippleAnimationDone = function ($event) {
// console.log($event);
if ($event.toState) {
this.rippleState = false;
this.confirm.emit({
color: this.color
});
}
};
ColorPreviewComponent.prototype.buttonAnimationDone = function ($event) {
// console.log($event);
if ($event.toState) {
this.buttonState = false;
}
};
ColorPreviewComponent.prototype.ngOnDestroy = function () {
// console.log('color preview destroy');
};
ColorPreviewComponent.ctorParameters = function () { return [
{ type: DomSanitizer },
{ type: ElementRef }
]; };
__decorate([
Input()
], ColorPreviewComponent.prototype, "coefficient", void 0);
__decorate([
Input()
], ColorPreviewComponent.prototype, "color", void 0);
__decorate([
Input()
], ColorPreviewComponent.prototype, "size", void 0);
__decorate([
Output()
], ColorPreviewComponent.prototype, "confirm", void 0);
__decorate([
HostBinding('style.width')
], ColorPreviewComponent.prototype, "width", null);
__decorate([
HostBinding('style.height')
], ColorPreviewComponent.prototype, "height", null);
__decorate([
HostListener('click')
], ColorPreviewComponent.prototype, "onClick", null);
ColorPreviewComponent = __decorate([
Component({
selector: 'rcp-color-preview',
template: "\n<div class=\"color\" [style.background-color]=\"background\" [@buttonAnimation]=\"buttonState\" (@buttonAnimation.done)=\"buttonAnimationDone($event)\"></div>\n<div class=\"color-shadow\" [style.border-color]=\"background\" [@rippleAnimation]=\"rippleState\" (@rippleAnimation.done)=\"rippleAnimationDone($event)\"></div>\n",
animations: [
Animations.rippleAnimation,
Animations.buttonAnimation
],
styles: ["*{box-sizing:border-box}:host{box-sizing:border-box;position:relative;z-index:10}:host *{box-sizing:border-box}:host .color{position:absolute;z-index:12;display:block;width:100%;height:100%;border:6px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #b2b2b2}:host .color-shadow{position:absolute;z-index:11;width:100%;height:100%;border-width:10px;border-style:solid;border-radius:50%}:host.final-state-1{-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1);box-shadow:0 0 1px 6px #fff,0 0 0 7px #b2b2b2}"]
})
], ColorPreviewComponent);
return ColorPreviewComponent;
}());
export { ColorPreviewComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AcmFkaWFsLWNvbG9yLXBpY2tlci9hbmd1bGFyLWNvbG9yLXBpY2tlci8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2NvbG9yLXByZXZpZXcvY29sb3ItcHJldmlldy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLDJDQUEyQztBQUMzQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzSixPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQVd0RDtJQXVDRSwrQkFDVSxTQUF1QixFQUN2QixFQUFjO1FBRGQsY0FBUyxHQUFULFNBQVMsQ0FBYztRQUN2QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBN0JkLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBaUM1QyxDQUFDO0lBL0IyQixzQkFBSSx3Q0FBSzthQUFUO1lBQzFCLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1FBQzFELENBQUM7OztPQUFBO0lBRTRCLHNCQUFJLHlDQUFNO2FBQVY7WUFDM0IsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFDMUQsQ0FBQzs7O09BQUE7SUFFc0IsdUNBQU8sR0FBUDtRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHO1lBQ2pCLEtBQUssRUFBRSxJQUFJO1lBQ1gsTUFBTSxFQUFFO2dCQUNOLEtBQUssRUFBRSxJQUFJLENBQUMsUUFBUTthQUNyQjtTQUNGLENBQUM7UUFDRixJQUFJLENBQUMsV0FBVyxHQUFHO1lBQ2pCLEtBQUssRUFBRSxJQUFJO1lBQ1gsTUFBTSxFQUFFO2dCQUNOLEtBQUssRUFBRSxJQUFJLENBQUMsUUFBUTthQUNyQjtTQUNGLENBQUM7SUFHSixDQUFDO0lBVUQsd0NBQVEsR0FBUjtJQUVBLENBQUM7SUFFRCwrQ0FBZSxHQUFmO1FBQ0UsMEJBQTBCO1FBQzFCLElBQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFDM0QsSUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBQ2pELElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDekMscUNBQXFDO0lBQ3ZDLENBQUM7SUFFRCwyQ0FBVyxHQUFYLFVBQVksT0FBTztRQUNqQixJQUFJLE9BQU8sQ0FBQyxLQUFLLElBQUksT0FBTyxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUU7WUFDL0MsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLHdCQUF3QixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUN2RTtJQUNILENBQUM7SUFFTSxtREFBbUIsR0FBMUIsVUFBMkIsTUFBTTtRQUMvQix1QkFBdUI7UUFDdkIsSUFBSSxNQUFNLENBQUMsT0FBTyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1lBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO2dCQUNoQixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7YUFDbEIsQ0FBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDO0lBRU0sbURBQW1CLEdBQTFCLFVBQTJCLE1BQU07UUFDL0IsdUJBQXVCO1FBQ3ZCLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRTtZQUNsQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztTQUMxQjtJQUNILENBQUM7SUFFRCwyQ0FBVyxHQUFYO1FBQ0Usd0NBQXdDO0lBQzFDLENBQUM7O2dCQTVDb0IsWUFBWTtnQkFDbkIsVUFBVTs7SUFqQ2Y7UUFBUixLQUFLLEVBQUU7OERBQXFCO0lBQ3BCO1FBQVIsS0FBSyxFQUFFO3dEQUFlO0lBQ2Q7UUFBUixLQUFLLEVBQUU7dURBQWM7SUFFWjtRQUFULE1BQU0sRUFBRTswREFBbUM7SUFFaEI7UUFBM0IsV0FBVyxDQUFDLGFBQWEsQ0FBQztzREFFMUI7SUFFNEI7UUFBNUIsV0FBVyxDQUFDLGNBQWMsQ0FBQzt1REFFM0I7SUFFc0I7UUFBdEIsWUFBWSxDQUFDLE9BQU8sQ0FBQzt3REFlckI7SUFyQ1UscUJBQXFCO1FBVGpDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxtQkFBbUI7WUFDN0IsaVZBQTZDO1lBRTdDLFVBQVUsRUFBRTtnQkFDVixVQUFVLENBQUMsZUFBZTtnQkFDMUIsVUFBVSxDQUFDLGVBQWU7YUFDM0I7O1NBQ0YsQ0FBQztPQUNXLHFCQUFxQixDQXFGakM7SUFBRCw0QkFBQztDQUFBLEFBckZELElBcUZDO1NBckZZLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbIi8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTptYXgtbGluZS1sZW5ndGhcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVTdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgQW5pbWF0aW9ucyB9IGZyb20gJy4uLy4uL2hlbHBlcnMvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JjcC1jb2xvci1wcmV2aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbG9yLXByZXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jb2xvci1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICBBbmltYXRpb25zLnJpcHBsZUFuaW1hdGlvbixcbiAgICBBbmltYXRpb25zLmJ1dHRvbkFuaW1hdGlvblxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yUHJldmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBwdWJsaWMgYmFja2dyb3VuZDogU2FmZVN0eWxlO1xuXG4gIHB1YmxpYyByaXBwbGVTdGF0ZTogYW55O1xuICBwdWJsaWMgYnV0dG9uU3RhdGU6IGFueTtcblxuICBwdWJsaWMgcmVsYXRpb246IG51bWJlcjtcblxuICBASW5wdXQoKSBjb2VmZmljaWVudDogbnVtYmVyO1xuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nO1xuICBASW5wdXQoKSBzaXplOiBudW1iZXI7XG5cbiAgQE91dHB1dCgpIGNvbmZpcm0gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLndpZHRoJykgZ2V0IHdpZHRoKCkge1xuICAgIHJldHVybiAodGhpcy5zaXplICYmIHRoaXMuc2l6ZSA8IDIwMCkgPyAnMzZweCcgOiAnNzBweCc7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodCcpIGdldCBoZWlnaHQoKSB7XG4gICAgcmV0dXJuICh0aGlzLnNpemUgJiYgdGhpcy5zaXplIDwgMjAwKSA/ICczNnB4JyA6ICc3MHB4JztcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJykgb25DbGljaygpIHtcbiAgICB0aGlzLmJ1dHRvblN0YXRlID0ge1xuICAgICAgdmFsdWU6IHRydWUsXG4gICAgICBwYXJhbXM6IHtcbiAgICAgICAgc2NhbGU6IHRoaXMucmVsYXRpb25cbiAgICAgIH1cbiAgICB9O1xuICAgIHRoaXMucmlwcGxlU3RhdGUgPSB7XG4gICAgICB2YWx1ZTogdHJ1ZSxcbiAgICAgIHBhcmFtczoge1xuICAgICAgICBzY2FsZTogdGhpcy5yZWxhdGlvblxuICAgICAgfVxuICAgIH07XG5cblxuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBzYW5pdGl6ZXI6IERvbVNhbml0aXplcixcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmXG4gICkge1xuXG5cbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuXG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgLy8gY29uc29sZS5sb2codGhpcy5zaXplKTtcbiAgICBjb25zdCByZWN0ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IGlubmVyQ2lyY2xlID0gdGhpcy5zaXplICogdGhpcy5jb2VmZmljaWVudDtcbiAgICB0aGlzLnJlbGF0aW9uID0gaW5uZXJDaXJjbGUgLyByZWN0LndpZHRoO1xuICAgIC8vIGNvbnNvbGUubG9nKCdyZWxhdGlvbicsIHJlbGF0aW9uKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlcy5jb2xvciAmJiBjaGFuZ2VzLmNvbG9yLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgdGhpcy5iYWNrZ3JvdW5kID0gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFN0eWxlKHRoaXMuY29sb3IpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByaXBwbGVBbmltYXRpb25Eb25lKCRldmVudCkge1xuICAgIC8vIGNvbnNvbGUubG9nKCRldmVudCk7XG4gICAgaWYgKCRldmVudC50b1N0YXRlKSB7XG4gICAgICB0aGlzLnJpcHBsZVN0YXRlID0gZmFsc2U7XG4gICAgICB0aGlzLmNvbmZpcm0uZW1pdCh7XG4gICAgICAgIGNvbG9yOiB0aGlzLmNvbG9yXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgYnV0dG9uQW5pbWF0aW9uRG9uZSgkZXZlbnQpIHtcbiAgICAvLyBjb25zb2xlLmxvZygkZXZlbnQpO1xuICAgIGlmICgkZXZlbnQudG9TdGF0ZSkge1xuICAgICAgdGhpcy5idXR0b25TdGF0ZSA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIC8vIGNvbnNvbGUubG9nKCdjb2xvciBwcmV2aWV3IGRlc3Ryb3knKTtcbiAgfVxufVxuIl19