angular-color-picker-fixed
Version:
Radial Color Picker - Angular
102 lines • 10.3 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';
let ColorPreviewComponent = class ColorPreviewComponent {
constructor(sanitizer, el) {
this.sanitizer = sanitizer;
this.el = el;
this.confirm = new EventEmitter();
}
get width() {
return (this.size && this.size < 200) ? '36px' : '70px';
}
get height() {
return (this.size && this.size < 200) ? '36px' : '70px';
}
onClick() {
this.buttonState = {
value: true,
params: {
scale: this.relation
}
};
this.rippleState = {
value: true,
params: {
scale: this.relation
}
};
}
ngOnInit() {
}
ngAfterViewInit() {
// console.log(this.size);
const rect = this.el.nativeElement.getBoundingClientRect();
const innerCircle = this.size * this.coefficient;
this.relation = innerCircle / rect.width;
// console.log('relation', relation);
}
ngOnChanges(changes) {
if (changes.color && changes.color.currentValue) {
this.background = this.sanitizer.bypassSecurityTrustStyle(this.color);
}
}
rippleAnimationDone($event) {
// console.log($event);
if ($event.toState) {
this.rippleState = false;
this.confirm.emit({
color: this.color
});
}
}
buttonAnimationDone($event) {
// console.log($event);
if ($event.toState) {
this.buttonState = false;
}
}
ngOnDestroy() {
// console.log('color preview destroy');
}
};
ColorPreviewComponent.ctorParameters = () => [
{ 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);
export { ColorPreviewComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AcmFkaWFsLWNvbG9yLXBpY2tlci9hbmd1bGFyLWNvbG9yLXBpY2tlci8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2NvbG9yLXByZXZpZXcvY29sb3ItcHJldmlldy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLDJDQUEyQztBQUMzQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzSixPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQVd0RCxJQUFhLHFCQUFxQixHQUFsQyxNQUFhLHFCQUFxQjtJQXVDaEMsWUFDVSxTQUF1QixFQUN2QixFQUFjO1FBRGQsY0FBUyxHQUFULFNBQVMsQ0FBYztRQUN2QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBN0JkLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBaUM1QyxDQUFDO0lBL0IyQixJQUFJLEtBQUs7UUFDbkMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDMUQsQ0FBQztJQUU0QixJQUFJLE1BQU07UUFDckMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDMUQsQ0FBQztJQUVzQixPQUFPO1FBQzVCLElBQUksQ0FBQyxXQUFXLEdBQUc7WUFDakIsS0FBSyxFQUFFLElBQUk7WUFDWCxNQUFNLEVBQUU7Z0JBQ04sS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRO2FBQ3JCO1NBQ0YsQ0FBQztRQUNGLElBQUksQ0FBQyxXQUFXLEdBQUc7WUFDakIsS0FBSyxFQUFFLElBQUk7WUFDWCxNQUFNLEVBQUU7Z0JBQ04sS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRO2FBQ3JCO1NBQ0YsQ0FBQztJQUdKLENBQUM7SUFVRCxRQUFRO0lBRVIsQ0FBQztJQUVELGVBQWU7UUFDYiwwQkFBMEI7UUFDMUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUMzRCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7UUFDakQsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUN6QyxxQ0FBcUM7SUFDdkMsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFPO1FBQ2pCLElBQUksT0FBTyxDQUFDLEtBQUssSUFBSSxPQUFPLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRTtZQUMvQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsd0JBQXdCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3ZFO0lBQ0gsQ0FBQztJQUVNLG1CQUFtQixDQUFDLE1BQU07UUFDL0IsdUJBQXVCO1FBQ3ZCLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRTtZQUNsQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztnQkFDaEIsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO2FBQ2xCLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVNLG1CQUFtQixDQUFDLE1BQU07UUFDL0IsdUJBQXVCO1FBQ3ZCLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRTtZQUNsQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztTQUMxQjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1Qsd0NBQXdDO0lBQzFDLENBQUM7Q0FDRixDQUFBOztZQTdDc0IsWUFBWTtZQUNuQixVQUFVOztBQWpDZjtJQUFSLEtBQUssRUFBRTswREFBcUI7QUFDcEI7SUFBUixLQUFLLEVBQUU7b0RBQWU7QUFDZDtJQUFSLEtBQUssRUFBRTttREFBYztBQUVaO0lBQVQsTUFBTSxFQUFFO3NEQUFtQztBQUVoQjtJQUEzQixXQUFXLENBQUMsYUFBYSxDQUFDO2tEQUUxQjtBQUU0QjtJQUE1QixXQUFXLENBQUMsY0FBYyxDQUFDO21EQUUzQjtBQUVzQjtJQUF0QixZQUFZLENBQUMsT0FBTyxDQUFDO29EQWVyQjtBQXJDVSxxQkFBcUI7SUFUakMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLG1CQUFtQjtRQUM3QixpVkFBNkM7UUFFN0MsVUFBVSxFQUFFO1lBQ1YsVUFBVSxDQUFDLGVBQWU7WUFDMUIsVUFBVSxDQUFDLGVBQWU7U0FDM0I7O0tBQ0YsQ0FBQztHQUNXLHFCQUFxQixDQXFGakM7U0FyRlkscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOm1heC1saW5lLWxlbmd0aFxuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZVN0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQgeyBBbmltYXRpb25zIH0gZnJvbSAnLi4vLi4vaGVscGVycy9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncmNwLWNvbG9yLXByZXZpZXcnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sb3ItcHJldmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvbG9yLXByZXZpZXcuY29tcG9uZW50LnNjc3MnXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIEFuaW1hdGlvbnMucmlwcGxlQW5pbWF0aW9uLFxuICAgIEFuaW1hdGlvbnMuYnV0dG9uQW5pbWF0aW9uXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQcmV2aWV3Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIHB1YmxpYyBiYWNrZ3JvdW5kOiBTYWZlU3R5bGU7XG5cbiAgcHVibGljIHJpcHBsZVN0YXRlOiBhbnk7XG4gIHB1YmxpYyBidXR0b25TdGF0ZTogYW55O1xuXG4gIHB1YmxpYyByZWxhdGlvbjogbnVtYmVyO1xuXG4gIEBJbnB1dCgpIGNvZWZmaWNpZW50OiBudW1iZXI7XG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNpemU6IG51bWJlcjtcblxuICBAT3V0cHV0KCkgY29uZmlybSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIEBIb3N0QmluZGluZygnc3R5bGUud2lkdGgnKSBnZXQgd2lkdGgoKSB7XG4gICAgcmV0dXJuICh0aGlzLnNpemUgJiYgdGhpcy5zaXplIDwgMjAwKSA/ICczNnB4JyA6ICc3MHB4JztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnc3R5bGUuaGVpZ2h0JykgZ2V0IGhlaWdodCgpIHtcbiAgICByZXR1cm4gKHRoaXMuc2l6ZSAmJiB0aGlzLnNpemUgPCAyMDApID8gJzM2cHgnIDogJzcwcHgnO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKSBvbkNsaWNrKCkge1xuICAgIHRoaXMuYnV0dG9uU3RhdGUgPSB7XG4gICAgICB2YWx1ZTogdHJ1ZSxcbiAgICAgIHBhcmFtczoge1xuICAgICAgICBzY2FsZTogdGhpcy5yZWxhdGlvblxuICAgICAgfVxuICAgIH07XG4gICAgdGhpcy5yaXBwbGVTdGF0ZSA9IHtcbiAgICAgIHZhbHVlOiB0cnVlLFxuICAgICAgcGFyYW1zOiB7XG4gICAgICAgIHNjYWxlOiB0aGlzLnJlbGF0aW9uXG4gICAgICB9XG4gICAgfTtcblxuXG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyLFxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWZcbiAgKSB7XG5cblxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG5cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAvLyBjb25zb2xlLmxvZyh0aGlzLnNpemUpO1xuICAgIGNvbnN0IHJlY3QgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgY29uc3QgaW5uZXJDaXJjbGUgPSB0aGlzLnNpemUgKiB0aGlzLmNvZWZmaWNpZW50O1xuICAgIHRoaXMucmVsYXRpb24gPSBpbm5lckNpcmNsZSAvIHJlY3Qud2lkdGg7XG4gICAgLy8gY29uc29sZS5sb2coJ3JlbGF0aW9uJywgcmVsYXRpb24pO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLmNvbG9yICYmIGNoYW5nZXMuY29sb3IuY3VycmVudFZhbHVlKSB7XG4gICAgICB0aGlzLmJhY2tncm91bmQgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0U3R5bGUodGhpcy5jb2xvcik7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJpcHBsZUFuaW1hdGlvbkRvbmUoJGV2ZW50KSB7XG4gICAgLy8gY29uc29sZS5sb2coJGV2ZW50KTtcbiAgICBpZiAoJGV2ZW50LnRvU3RhdGUpIHtcbiAgICAgIHRoaXMucmlwcGxlU3RhdGUgPSBmYWxzZTtcbiAgICAgIHRoaXMuY29uZmlybS5lbWl0KHtcbiAgICAgICAgY29sb3I6IHRoaXMuY29sb3JcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBidXR0b25BbmltYXRpb25Eb25lKCRldmVudCkge1xuICAgIC8vIGNvbnNvbGUubG9nKCRldmVudCk7XG4gICAgaWYgKCRldmVudC50b1N0YXRlKSB7XG4gICAgICB0aGlzLmJ1dHRvblN0YXRlID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgLy8gY29uc29sZS5sb2coJ2NvbG9yIHByZXZpZXcgZGVzdHJveScpO1xuICB9XG59XG4iXX0=