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)
110 lines • 28.2 kB
JavaScript
import { Component, ViewChild, ViewEncapsulation, Input, Output, EventEmitter, } from "@angular/core";
import { Hsva } from "../../clases/formats";
import { SliderDimension, SliderPosition } from "../../clases/slider";
import * as i0 from "@angular/core";
import * as i1 from "../../services/converter.service";
import * as i2 from "@angular/common";
import * as i3 from "../../directives/slider.directive";
export class ColorPickerComponent {
constructor(service, cdr) {
this.service = service;
this.cdr = cdr;
//IO color
this.color = new Hsva(0, 1, 1, 1);
this.controls = "default";
this.sliderChange = new EventEmitter(false);
this.onAlphaChange = new EventEmitter(false);
//Event triggered when any slider change
// @Output() colorSelectedChange:EventEmitter<Hsva> = new EventEmitter<Hsva>(false);
this.hsva = new Hsva(0, 1, 1, 1);
this.selectedColor = "#000000";
this.fallbackColor = "#000000";
}
ngOnInit() {
if (!this.color) {
this.color = new Hsva(0, 1, 1, 1);
}
this.slider = new SliderPosition(0, 0, 0, 0);
this.update();
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (changes.color && this.color) {
this.update();
}
}
ngAfterViewInit() {
const hueWidth = this.hueSlider?.nativeElement.offsetWidth || 140;
const alphaWidth = this.alphaSlider?.nativeElement.offsetWidth || 140;
this.sliderDimMax = new SliderDimension(hueWidth, 220, 130, alphaWidth);
this.update();
}
onSliderChange(type, event) {
switch (type) {
case "saturation-lightness":
this.hsva.onColorChange(event);
break;
case "hue":
this.hsva.onHueChange(event);
break;
case "alpha":
this.hsva.onAlphaChange(event);
this.onAlphaChange.emit(event);
break;
case "value":
this.hsva.onValueChange(event);
break;
}
// this.sHue = this.hsva.h;
this.update();
this.setColor(this.outputColor);
}
setColor(color) {
this.color = color;
this.sliderChange.emit(this.color);
}
getBackgroundColor(color) {
return {
background: "linear-gradient(90deg, rgba(36,0,0,0) 0%, " + color + " 100%)",
};
}
update() {
this.hsva = this.color;
if (this.sliderDimMax) {
let rgba = this.service.hsvaToRgba(this.hsva).denormalize();
let hue = this.service
.hsvaToRgba(new Hsva(this.hsva.h, 1, 1, 1))
.denormalize();
this.hueSliderColor = "rgb(" + hue.r + "," + hue.g + "," + hue.b + ")";
this.alphaSliderColor =
"rgb(" + rgba.r + "," + rgba.g + "," + rgba.b + ")";
this.outputColor = this.hsva;
this.selectedColor = this.service.hsvaToRgba(this.hsva).toString();
this.slider = new SliderPosition(
// (this.sHue || this.hsva.h) * this.sliderDimMax.h - 8,
this.hsva.h * this.sliderDimMax.h - 5, this.hsva.s * this.sliderDimMax.s - 8, (1 - this.hsva.v) * this.sliderDimMax.v - 8, this.hsva.a * this.sliderDimMax.a - 5);
this.cdr.detectChanges();
}
}
}
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i1.ConverterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: ColorPickerComponent, selector: "color-picker", inputs: { color: "color", controls: "controls" }, outputs: { sliderChange: "sliderChange", onAlphaChange: "onAlphaChange" }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dialogPopup class=\"color-picker\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n class=\"saturation-lightness\"\r\n *ngIf=\"this.controls != 'only-alpha'\"\r\n [slider]\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n [style.background-color]=\"hueSliderColor\"\r\n (newValue)=\"onSliderChange('saturation-lightness', $event)\"\r\n >\r\n <div class=\"cursor\" [style.top.px]=\"slider?.v\" [style.left.px]=\"slider?.s\">\r\n <div></div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"hue-alpha box\">\r\n <div class=\"left\" *ngIf=\"this.controls != 'only-alpha'\">\r\n <div class=\"selected-color-background\"></div>\r\n <div\r\n class=\"selected-color\"\r\n [style.background-color]=\"selectedColor\"\r\n ></div>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div\r\n *ngIf=\"this.controls != 'only-alpha'\"\r\n #hueSlider\r\n class=\"hue\"\r\n [slider]\r\n [rgX]=\"1\"\r\n (newValue)=\"onSliderChange('hue', $event)\"\r\n >\r\n <div class=\"sliderCursor\" [style.left.px]=\"slider?.h\">\r\n <div><div></div></div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.controls != 'no-alpha'\"\r\n #alphaSlider\r\n class=\"alpha\"\r\n [slider]\r\n [rgX]=\"1\"\r\n (newValue)=\"onSliderChange('alpha', $event)\"\r\n >\r\n <div\r\n class=\"alpha-gradient\"\r\n [ngStyle]=\"getBackgroundColor(alphaSliderColor)\"\r\n ></div>\r\n <div class=\"sliderCursor\" [style.left.px]=\"slider?.a\">\r\n <div><div></div></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;z-index:1000;width:220px;height:auto;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}.color-picker *{box-sizing:border-box;margin:0;font-size:11px}.color-picker input{width:0;height:26px;min-width:0;font-size:13px;text-align:center;color:#000}.color-picker input:invalid,.color-picker input:-moz-ui-invalid,.color-picker input:-moz-submit-invalid{box-shadow:none}.color-picker input::-webkit-inner-spin-button,.color-picker input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.color-picker .sliderCursor{width:10px;border-radius:5px;position:absolute;margin-top:-3px;border:1px solid black}.color-picker .sliderCursor>div{border:2px solid white;border-radius:5px}.color-picker .sliderCursor>div>div{border-radius:5px;border:1px solid black;height:24px}.color-picker .cursor{position:absolute;width:21px;border:3px solid black;border-radius:100%;margin:-2px 0 0 -2px}.color-picker .cursor>div{height:15px;border:3px solid white;border-radius:100%}.color-picker .box{display:flex;padding:4px 8px}.color-picker .left{position:relative;padding:16px 8px}.color-picker .right{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:12px 8px}.color-picker .hue-alpha{display:flex;align-items:center;margin-bottom:3px}.color-picker .hue{direction:ltr;width:100%;height:24px;border:none;border-radius:5px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)}.color-picker .alpha{direction:ltr;position:relative;width:100%;height:24px;border:none;border-radius:5px;cursor:pointer;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}.color-picker .alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.color-picker .selected-color{position:absolute;top:16px;left:8px;width:40px;height:40px;box-shadow:0 1px 1px 1px #00000026;border-radius:50%}.color-picker .selected-color-background{width:40px;height:40px;border-radius:50%;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}.color-picker .saturation-lightness{direction:ltr;cursor:crosshair;width:100%;position:relative;height:130px;border:none;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.SliderDirective, selector: "[slider]", inputs: ["rgX", "rgY", "slider"], outputs: ["dragEnd", "dragStart", "newValue"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ColorPickerComponent, decorators: [{
type: Component,
args: [{ selector: "color-picker", encapsulation: ViewEncapsulation.None, template: "<div #dialogPopup class=\"color-picker\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n class=\"saturation-lightness\"\r\n *ngIf=\"this.controls != 'only-alpha'\"\r\n [slider]\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n [style.background-color]=\"hueSliderColor\"\r\n (newValue)=\"onSliderChange('saturation-lightness', $event)\"\r\n >\r\n <div class=\"cursor\" [style.top.px]=\"slider?.v\" [style.left.px]=\"slider?.s\">\r\n <div></div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"hue-alpha box\">\r\n <div class=\"left\" *ngIf=\"this.controls != 'only-alpha'\">\r\n <div class=\"selected-color-background\"></div>\r\n <div\r\n class=\"selected-color\"\r\n [style.background-color]=\"selectedColor\"\r\n ></div>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div\r\n *ngIf=\"this.controls != 'only-alpha'\"\r\n #hueSlider\r\n class=\"hue\"\r\n [slider]\r\n [rgX]=\"1\"\r\n (newValue)=\"onSliderChange('hue', $event)\"\r\n >\r\n <div class=\"sliderCursor\" [style.left.px]=\"slider?.h\">\r\n <div><div></div></div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.controls != 'no-alpha'\"\r\n #alphaSlider\r\n class=\"alpha\"\r\n [slider]\r\n [rgX]=\"1\"\r\n (newValue)=\"onSliderChange('alpha', $event)\"\r\n >\r\n <div\r\n class=\"alpha-gradient\"\r\n [ngStyle]=\"getBackgroundColor(alphaSliderColor)\"\r\n ></div>\r\n <div class=\"sliderCursor\" [style.left.px]=\"slider?.a\">\r\n <div><div></div></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;z-index:1000;width:220px;height:auto;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}.color-picker *{box-sizing:border-box;margin:0;font-size:11px}.color-picker input{width:0;height:26px;min-width:0;font-size:13px;text-align:center;color:#000}.color-picker input:invalid,.color-picker input:-moz-ui-invalid,.color-picker input:-moz-submit-invalid{box-shadow:none}.color-picker input::-webkit-inner-spin-button,.color-picker input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.color-picker .sliderCursor{width:10px;border-radius:5px;position:absolute;margin-top:-3px;border:1px solid black}.color-picker .sliderCursor>div{border:2px solid white;border-radius:5px}.color-picker .sliderCursor>div>div{border-radius:5px;border:1px solid black;height:24px}.color-picker .cursor{position:absolute;width:21px;border:3px solid black;border-radius:100%;margin:-2px 0 0 -2px}.color-picker .cursor>div{height:15px;border:3px solid white;border-radius:100%}.color-picker .box{display:flex;padding:4px 8px}.color-picker .left{position:relative;padding:16px 8px}.color-picker .right{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:12px 8px}.color-picker .hue-alpha{display:flex;align-items:center;margin-bottom:3px}.color-picker .hue{direction:ltr;width:100%;height:24px;border:none;border-radius:5px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)}.color-picker .alpha{direction:ltr;position:relative;width:100%;height:24px;border:none;border-radius:5px;cursor:pointer;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}.color-picker .alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.color-picker .selected-color{position:absolute;top:16px;left:8px;width:40px;height:40px;box-shadow:0 1px 1px 1px #00000026;border-radius:50%}.color-picker .selected-color-background{width:40px;height:40px;border-radius:50%;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}.color-picker .saturation-lightness{direction:ltr;cursor:crosshair;width:100%;position:relative;height:130px;border:none;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}\n"] }]
}], ctorParameters: function () { return [{ type: i1.ConverterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { color: [{
type: Input
}], controls: [{
type: Input
}], sliderChange: [{
type: Output
}], onAlphaChange: [{
type: Output
}], hueSlider: [{
type: ViewChild,
args: ["hueSlider", { static: false }]
}], alphaSlider: [{
type: ViewChild,
args: ["alphaSlider", { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1jb2xvcnMvc3JjL2xpYi9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9jb2xvci1waWNrZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbG9ycy9zcmMvbGliL2NvbXBvbmVudHMvY29sb3ItcGlja2VyL2NvbG9yLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUlULFNBQVMsRUFDVCxpQkFBaUIsRUFHakIsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEdBRWIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFjLElBQUksRUFBUSxNQUFNLHNCQUFzQixDQUFDO0FBRTlELE9BQU8sRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLE1BQU0scUJBQXFCLENBQUM7Ozs7O0FBVXRFLE1BQU0sT0FBTyxvQkFBb0I7SUEwQi9CLFlBQ1UsT0FBeUIsRUFDekIsR0FBc0I7UUFEdEIsWUFBTyxHQUFQLE9BQU8sQ0FBa0I7UUFDekIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUF6QmhDLFVBQVU7UUFDRCxVQUFLLEdBQVMsSUFBSSxJQUFJLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDbkMsYUFBUSxHQUEwQyxTQUFTLENBQUM7UUFDM0QsaUJBQVksR0FBdUIsSUFBSSxZQUFZLENBQU8sS0FBSyxDQUFDLENBQUM7UUFDakUsa0JBQWEsR0FBc0IsSUFBSSxZQUFZLENBQU0sS0FBSyxDQUFDLENBQUM7UUFDMUUsd0NBQXdDO1FBQ3hDLG9GQUFvRjtRQUU1RSxTQUFJLEdBQVMsSUFBSSxJQUFJLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxD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RkQ5QmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLGNBQWMsaUJBR1QsaUJBQWlCLENBQUMsSUFBSTt1SUFNNUIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNO2dCQWdCb0MsU0FBUztzQkFBbkQsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUNJLFdBQVc7c0JBQXZELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIE9uSW5pdCxcclxuICBPbkRlc3Ryb3ksXHJcbiAgQWZ0ZXJWaWV3SW5pdCxcclxuICBWaWV3Q2hpbGQsXHJcbiAgVmlld0VuY2Fwc3VsYXRpb24sXHJcbiAgRWxlbWVudFJlZixcclxuICBDaGFuZ2VEZXRlY3RvclJlZixcclxuICBJbnB1dCxcclxuICBPdXRwdXQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIE9uQ2hhbmdlcyxcclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuaW1wb3J0IHsgQ215aywgSHNsYSwgSHN2YSwgUmdiYSB9IGZyb20gXCIuLi8uLi9jbGFzZXMvZm9ybWF0c1wiO1xyXG5pbXBvcnQgeyBDb2xvckZvcm1hdHMgfSBmcm9tIFwiLi4vLi4vZW51bXMvZm9ybWF0c1wiO1xyXG5pbXBvcnQgeyBTbGlkZXJEaW1lbnNpb24sIFNsaWRlclBvc2l0aW9uIH0gZnJvbSBcIi4uLy4uL2NsYXNlcy9zbGlkZXJcIjtcclxuXHJcbmltcG9ydCB7IENvbnZlcnRlclNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvY29udmVydGVyLnNlcnZpY2VcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBcImNvbG9yLXBpY2tlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vY29sb3ItcGlja2VyLmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2NvbG9yLXBpY2tlci5jb21wb25lbnQuc2Nzc1wiXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29sb3JQaWNrZXJDb21wb25lbnRcclxuICBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXNcclxue1xyXG4gIC8vSU8gY29sb3JcclxuICBASW5wdXQoKSBjb2xvcjogSHN2YSA9IG5ldyBIc3ZhKDAsIDEsIDEsIDEpO1xyXG4gIEBJbnB1dCgpIGNvbnRyb2xzOiBcImRlZmF1bHRcIiB8IFwib25seS1hbHBoYVwiIHwgXCJuby1hbHBoYVwiID0gXCJkZWZhdWx0XCI7XHJcbiAgQE91dHB1dCgpIHNsaWRlckNoYW5nZTogRXZlbnRFbWl0dGVyPEhzdmE+ID0gbmV3IEV2ZW50RW1pdHRlcjxIc3ZhPihmYWxzZSk7XHJcbiAgQE91dHB1dCgpIG9uQWxwaGFDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KGZhbHNlKTtcclxuICAvL0V2ZW50IHRyaWdnZXJlZCB3aGVuIGFueSBzbGlkZXIgY2hhbmdlXHJcbiAgLy8gQE91dHB1dCgpIGNvbG9yU2VsZWN0ZWRDaGFuZ2U6RXZlbnRFbWl0dGVyPEhzdmE+ID0gbmV3IEV2ZW50RW1pdHRlcjxIc3ZhPihmYWxzZSk7XHJcblxyXG4gIHByaXZhdGUgaHN2YTogSHN2YSA9IG5ldyBIc3ZhKDAsIDEsIDEsIDEpO1xyXG4gIHByaXZhdGUgb3V0cHV0Q29sb3I6IEhzdmE7XHJcbiAgcHVibGljIHNlbGVjdGVkQ29sb3I6IHN0cmluZyA9IFwiIzAwMDAwMFwiO1xyXG4gIHByaXZhdGUgZmFsbGJhY2tDb2xvcjogc3RyaW5nID0gXCIjMDAwMDAwXCI7XHJcblxyXG4gIC8vIHByaXZhdGUgc0h1ZTogbnVtYmVyO1xyXG4gIHByaXZhdGUgc2xpZGVyRGltTWF4OiBTbGlkZXJEaW1lbnNpb247XHJcbiAgcHVibGljIHNsaWRlcjogU2xpZGVyUG9zaXRpb247XHJcblxyXG4gIHB1YmxpYyBodWVTbGlkZXJDb2xvcjogc3RyaW5nO1xyXG4gIHB1YmxpYyBhbHBoYVNsaWRlckNvbG9yOiBzdHJpbmc7XHJcblxyXG4gIEBWaWV3Q2hpbGQoXCJodWVTbGlkZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIGh1ZVNsaWRlcjogRWxlbWVudFJlZjtcclxuICBAVmlld0NoaWxkKFwiYWxwaGFTbGlkZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIGFscGhhU2xpZGVyOiBFbGVtZW50UmVmO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgc2VydmljZTogQ29udmVydGVyU2VydmljZSxcclxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxyXG4gICkge31cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuY29sb3IpIHtcclxuICAgICAgdGhpcy5jb2xvciA9IG5ldyBIc3ZhKDAsIDEsIDEsIDEpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5zbGlkZXIgPSBuZXcgU2xpZGVyUG9zaXRpb24oMCwgMCwgMCwgMCk7XHJcbiAgICB0aGlzLnVwZGF0ZSgpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7fVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBhbnkpOiB2b2lkIHtcclxuICAgIGlmIChjaGFuZ2VzLmNvbG9yICYmIHRoaXMuY29sb3IpIHtcclxuICAgICAgdGhpcy51cGRhdGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIGNvbnN0IGh1ZVdpZHRoID0gdGhpcy5odWVTbGlkZXI/Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGggfHwgMTQwO1xyXG4gICAgY29uc3QgYWxwaGFXaWR0aCA9IHRoaXMuYWxwaGFTbGlkZXI/Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGggfHwgMTQwO1xyXG4gICAgdGhpcy5zbGlkZXJEaW1NYXggPSBuZXcgU2xpZGVyRGltZW5zaW9uKGh1ZVdpZHRoLCAyMjAsIDEzMCwgYWxwaGFXaWR0aCk7XHJcbiAgICB0aGlzLnVwZGF0ZSgpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uU2xpZGVyQ2hhbmdlKHR5cGU6IHN0cmluZywgZXZlbnQpIHtcclxuICAgIHN3aXRjaCAodHlwZSkge1xyXG4gICAgICBjYXNlIFwic2F0dXJhdGlvbi1saWdodG5lc3NcIjpcclxuICAgICAgICB0aGlzLmhzdmEub25Db2xvckNoYW5nZShldmVudCk7XHJcbiAgICAgICAgYnJlYWs7XHJcbiAgICAgIGNhc2UgXCJodWVcIjpcclxuICAgICAgICB0aGlzLmhzdmEub25IdWVDaGFuZ2UoZXZlbnQpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgICBjYXNlIFwiYWxwaGFcIjpcclxuICAgICAgICB0aGlzLmhzdmEub25BbHBoYUNoYW5nZShldmVudCk7XHJcbiAgICAgICAgdGhpcy5vbkFscGhhQ2hhbmdlLmVtaXQoZXZlbnQpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgICBjYXNlIFwidmFsdWVcIjpcclxuICAgICAgICB0aGlzLmhzdmEub25WYWx1ZUNoYW5nZShldmVudCk7XHJcbiAgICAgICAgYnJlYWs7XHJcbiAgICB9XHJcbiAgICAvLyB0aGlzLnNIdWUgPSB0aGlzLmhzdmEuaDtcclxuICAgIHRoaXMudXBkYXRlKCk7XHJcbiAgICB0aGlzLnNldENvbG9yKHRoaXMub3V0cHV0Q29sb3IpO1xyXG4gIH1cclxuXHJcbiAgc2V0Q29sb3IoY29sb3IpIHtcclxuICAgIHRoaXMuY29sb3IgPSBjb2xvcjtcclxuICAgIHRoaXMuc2xpZGVyQ2hhbmdlLmVtaXQodGhpcy5jb2xvcik7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgZ2V0QmFja2dyb3VuZENvbG9yKGNvbG9yKSB7XHJcbiAgICByZXR1cm4ge1xyXG4gICAgICBiYWNrZ3JvdW5kOlxyXG4gICAgICAgIFwibGluZWFyLWdyYWRpZW50KDkwZGVnLCByZ2JhKDM2LDAsMCwwKSAwJSwgXCIgKyBjb2xvciArIFwiIDEwMCUpXCIsXHJcbiAgICB9O1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSB1cGRhdGUoKTogdm9pZCB7XHJcbiAgICB0aGlzLmhzdmEgPSB0aGlzLmNvbG9yO1xyXG4gICAgaWYgKHRoaXMuc2xpZGVyRGltTWF4KSB7XHJcbiAgICAgIGxldCByZ2JhID0gdGhpcy5zZXJ2aWNlLmhzdmFUb1JnYmEodGhpcy5oc3ZhKS5kZW5vcm1hbGl6ZSgpO1xyXG4gICAgICBsZXQgaHVlID0gdGhpcy5zZXJ2aWNlXHJcbiAgICAgICAgLmhzdmFUb1JnYmEobmV3IEhzdmEodGhpcy5oc3ZhLmgsIDEsIDEsIDEpKVxyXG4gICAgICAgIC5kZW5vcm1hbGl6ZSgpO1xyXG5cclxuICAgICAgdGhpcy5odWVTbGlkZXJDb2xvciA9IFwicmdiKFwiICsgaHVlLnIgKyBcIixcIiArIGh1ZS5nICsgXCIsXCIgKyBodWUuYiArIFwiKVwiO1xyXG4gICAgICB0aGlzLmFscGhhU2xpZGVyQ29sb3IgPVxyXG4gICAgICAgIFwicmdiKFwiICsgcmdiYS5yICsgXCIsXCIgKyByZ2JhLmcgKyBcIixcIiArIHJnYmEuYiArIFwiKVwiO1xyXG5cclxuICAgICAgdGhpcy5vdXRwdXRDb2xvciA9IHRoaXMuaHN2YTtcclxuICAgICAgdGhpcy5zZWxlY3RlZENvbG9yID0gdGhpcy5zZXJ2aWNlLmhzdmFUb1JnYmEodGhpcy5oc3ZhKS50b1N0cmluZygpO1xyXG5cclxuICAgICAgdGhpcy5zbGlkZXIgPSBuZXcgU2xpZGVyUG9zaXRpb24oXHJcbiAgICAgICAgLy8gKHRoaXMuc0h1ZSB8fCB0aGlzLmhzdmEuaCkgKiB0aGlzLnNsaWRlckRpbU1heC5oIC0gOCxcclxuICAgICAgICB0aGlzLmhzdmEuaCAqIHRoaXMuc2xpZGVyRGltTWF4LmggLSA1LFxyXG4gICAgICAgIHRoaXMuaHN2YS5zICogdGhpcy5zbGlkZXJEaW1NYXgucyAtIDgsXHJcbiAgICAgICAgKDEgLSB0aGlzLmhzdmEudikgKiB0aGlzLnNsaWRlckRpbU1heC52IC0gOCxcclxuICAgICAgICB0aGlzLmhzdmEuYSAqIHRoaXMuc2xpZGVyRGltTWF4LmEgLSA1XHJcbiAgICAgICk7XHJcbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiPGRpdiAjZGlhbG9nUG9wdXAgY2xhc3M9XCJjb2xvci1waWNrZXJcIiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCI+XHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJzYXR1cmF0aW9uLWxpZ2h0bmVzc1wiXHJcbiAgICAqbmdJZj1cInRoaXMuY29udHJvbHMgIT0gJ29ubHktYWxwaGEnXCJcclxuICAgIFtzbGlkZXJdXHJcbiAgICBbcmdYXT1cIjFcIlxyXG4gICAgW3JnWV09XCIxXCJcclxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImh1ZVNsaWRlckNvbG9yXCJcclxuICAgIChuZXdWYWx1ZSk9XCJvblNsaWRlckNoYW5nZSgnc2F0dXJhdGlvbi1saWdodG5lc3MnLCAkZXZlbnQpXCJcclxuICA+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY3Vyc29yXCIgW3N0eWxlLnRvcC5weF09XCJzbGlkZXI/LnZcIiBbc3R5bGUubGVmdC5weF09XCJzbGlkZXI/LnNcIj5cclxuICAgICAgPGRpdj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG5cclxuICA8ZGl2IGNsYXNzPVwiaHVlLWFscGhhIGJveFwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImxlZnRcIiAqbmdJZj1cInRoaXMuY29udHJvbHMgIT0gJ29ubHktYWxwaGEnXCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJzZWxlY3RlZC1jb2xvci1iYWNrZ3JvdW5kXCI+PC9kaXY+XHJcbiAgICAgIDxkaXZcclxuICAgICAgICBjbGFzcz1cInNlbGVjdGVkLWNvbG9yXCJcclxuICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJzZWxlY3RlZENvbG9yXCJcclxuICAgICAgPjwvZGl2PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cInJpZ2h0XCI+XHJcbiAgICAgIDxkaXZcclxuICAgICAgICAqbmdJZj1cInRoaXMuY29udHJvbHMgIT0gJ29ubHktYWxwaGEnXCJcclxuICAgICAgICAjaHVlU2xpZGVyXHJcbiAgICAgICAgY2xhc3M9XCJodWVcIlxyXG4gICAgICAgIFtzbGlkZXJdXHJcbiAgICAgICAgW3JnWF09XCIxXCJcclxuICAgICAgICAobmV3VmFsdWUpPVwib25TbGlkZXJDaGFuZ2UoJ2h1ZScsICRldmVudClcIlxyXG4gICAgICA+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInNsaWRlckN1cnNvclwiIFtzdHlsZS5sZWZ0LnB4XT1cInNsaWRlcj8uaFwiPlxyXG4gICAgICAgICAgPGRpdj48ZGl2PjwvZGl2PjwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxkaXZcclxuICAgICAgICAqbmdJZj1cInRoaXMuY29udHJvbHMgIT0gJ25vLWFscGhhJ1wiXHJcbiAgICAgICAgI2FscGhhU2xpZGVyXHJcbiAgICAgICAgY2xhc3M9XCJhbHBoYVwiXHJcbiAgICAgICAgW3NsaWRlcl1cclxuICAgICAgICBbcmdYXT1cIjFcIlxyXG4gICAgICAgIChuZXdWYWx1ZSk9XCJvblNsaWRlckNoYW5nZSgnYWxwaGEnLCAkZXZlbnQpXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxkaXZcclxuICAgICAgICAgIGNsYXNzPVwiYWxwaGEtZ3JhZGllbnRcIlxyXG4gICAgICAgICAgW25nU3R5bGVdPVwiZ2V0QmFja2dyb3VuZENvbG9yKGFscGhhU2xpZGVyQ29sb3IpXCJcclxuICAgICAgICA+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInNsaWRlckN1cnNvclwiIFtzdHlsZS5sZWZ0LnB4XT1cInNsaWRlcj8uYVwiPlxyXG4gICAgICAgICAgPGRpdj48ZGl2PjwvZGl2PjwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19