ngx-colors/esm2020/lib/components/color-picker/color-picker.component.mjs

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)

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: "15.1.2", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i1.ConverterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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()\">\n  <div\n    class=\"saturation-lightness\"\n    *ngIf=\"this.controls != 'only-alpha'\"\n    [slider]\n    [rgX]=\"1\"\n    [rgY]=\"1\"\n    [style.background-color]=\"hueSliderColor\"\n    (newValue)=\"onSliderChange('saturation-lightness', $event)\"\n  >\n    <div class=\"cursor\" [style.top.px]=\"slider?.v\" [style.left.px]=\"slider?.s\">\n      <div></div>\n    </div>\n  </div>\n\n  <div class=\"hue-alpha box\">\n    <div class=\"left\" *ngIf=\"this.controls != 'only-alpha'\">\n      <div class=\"selected-color-background\"></div>\n      <div\n        class=\"selected-color\"\n        [style.background-color]=\"selectedColor\"\n      ></div>\n    </div>\n\n    <div class=\"right\">\n      <div\n        *ngIf=\"this.controls != 'only-alpha'\"\n        #hueSlider\n        class=\"hue\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('hue', $event)\"\n      >\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.h\">\n          <div><div></div></div>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"this.controls != 'no-alpha'\"\n        #alphaSlider\n        class=\"alpha\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('alpha', $event)\"\n      >\n        <div\n          class=\"alpha-gradient\"\n          [ngStyle]=\"getBackgroundColor(alphaSliderColor)\"\n        ></div>\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.a\">\n          <div><div></div></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.SliderDirective, selector: "[slider]", inputs: ["rgX", "rgY", "slider"], outputs: ["dragEnd", "dragStart", "newValue"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: "color-picker", encapsulation: ViewEncapsulation.None, template: "<div #dialogPopup class=\"color-picker\" (click)=\"$event.stopPropagation()\">\n  <div\n    class=\"saturation-lightness\"\n    *ngIf=\"this.controls != 'only-alpha'\"\n    [slider]\n    [rgX]=\"1\"\n    [rgY]=\"1\"\n    [style.background-color]=\"hueSliderColor\"\n    (newValue)=\"onSliderChange('saturation-lightness', $event)\"\n  >\n    <div class=\"cursor\" [style.top.px]=\"slider?.v\" [style.left.px]=\"slider?.s\">\n      <div></div>\n    </div>\n  </div>\n\n  <div class=\"hue-alpha box\">\n    <div class=\"left\" *ngIf=\"this.controls != 'only-alpha'\">\n      <div class=\"selected-color-background\"></div>\n      <div\n        class=\"selected-color\"\n        [style.background-color]=\"selectedColor\"\n      ></div>\n    </div>\n\n    <div class=\"right\">\n      <div\n        *ngIf=\"this.controls != 'only-alpha'\"\n        #hueSlider\n        class=\"hue\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('hue', $event)\"\n      >\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.h\">\n          <div><div></div></div>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"this.controls != 'no-alpha'\"\n        #alphaSlider\n        class=\"alpha\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('alpha', $event)\"\n      >\n        <div\n          class=\"alpha-gradient\"\n          [ngStyle]=\"getBackgroundColor(alphaSliderColor)\"\n        ></div>\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.a\">\n          <div><div></div></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\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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RkQ5QmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLGNBQWMsaUJBR1QsaUJBQWlCLENBQUMsSUFBSTt1SUFNNUIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNO2dCQWdCb0MsU0FBUztzQkFBbkQsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUNJLFdBQVc7c0JBQXZELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgT25Jbml0LFxuICBPbkRlc3Ryb3ksXG4gIEFmdGVyVmlld0luaXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIEVsZW1lbnRSZWYsXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIE9uQ2hhbmdlcyxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgQ215aywgSHNsYSwgSHN2YSwgUmdiYSB9IGZyb20gXCIuLi8uLi9jbGFzZXMvZm9ybWF0c1wiO1xuaW1wb3J0IHsgQ29sb3JGb3JtYXRzIH0gZnJvbSBcIi4uLy4uL2VudW1zL2Zvcm1hdHNcIjtcbmltcG9ydCB7IFNsaWRlckRpbWVuc2lvbiwgU2xpZGVyUG9zaXRpb24gfSBmcm9tIFwiLi4vLi4vY2xhc2VzL3NsaWRlclwiO1xuXG5pbXBvcnQgeyBDb252ZXJ0ZXJTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uL3NlcnZpY2VzL2NvbnZlcnRlci5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJjb2xvci1waWNrZXJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jb2xvci1waWNrZXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2NvbG9yLXBpY2tlci5jb21wb25lbnQuc2Nzc1wiXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQaWNrZXJDb21wb25lbnRcbiAgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzXG57XG4gIC8vSU8gY29sb3JcbiAgQElucHV0KCkgY29sb3I6IEhzdmEgPSBuZXcgSHN2YSgwLCAxLCAxLCAxKTtcbiAgQElucHV0KCkgY29udHJvbHM6IFwiZGVmYXVsdFwiIHwgXCJvbmx5LWFscGhhXCIgfCBcIm5vLWFscGhhXCIgPSBcImRlZmF1bHRcIjtcbiAgQE91dHB1dCgpIHNsaWRlckNoYW5nZTogRXZlbnRFbWl0dGVyPEhzdmE+ID0gbmV3IEV2ZW50RW1pdHRlcjxIc3ZhPihmYWxzZSk7XG4gIEBPdXRwdXQoKSBvbkFscGhhQ2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PihmYWxzZSk7XG4gIC8vRXZlbnQgdHJpZ2dlcmVkIHdoZW4gYW55IHNsaWRlciBjaGFuZ2VcbiAgLy8gQE91dHB1dCgpIGNvbG9yU2VsZWN0ZWRDaGFuZ2U6RXZlbnRFbWl0dGVyPEhzdmE+ID0gbmV3IEV2ZW50RW1pdHRlcjxIc3ZhPihmYWxzZSk7XG5cbiAgcHJpdmF0ZSBoc3ZhOiBIc3ZhID0gbmV3IEhzdmEoMCwgMSwgMSwgMSk7XG4gIHByaXZhdGUgb3V0cHV0Q29sb3I6IEhzdmE7XG4gIHB1YmxpYyBzZWxlY3RlZENvbG9yOiBzdHJpbmcgPSBcIiMwMDAwMDBcIjtcbiAgcHJpdmF0ZSBmYWxsYmFja0NvbG9yOiBzdHJpbmcgPSBcIiMwMDAwMDBcIjtcblxuICAvLyBwcml2YXRlIHNIdWU6IG51bWJlcjtcbiAgcHJpdmF0ZSBzbGlkZXJEaW1NYXg6IFNsaWRlckRpbWVuc2lvbjtcbiAgcHVibGljIHNsaWRlcjogU2xpZGVyUG9zaXRpb247XG5cbiAgcHVibGljIGh1ZVNsaWRlckNvbG9yOiBzdHJpbmc7XG4gIHB1YmxpYyBhbHBoYVNsaWRlckNvbG9yOiBzdHJpbmc7XG5cbiAgQFZpZXdDaGlsZChcImh1ZVNsaWRlclwiLCB7IHN0YXRpYzogZmFsc2UgfSkgaHVlU2xpZGVyOiBFbGVtZW50UmVmO1xuICBAVmlld0NoaWxkKFwiYWxwaGFTbGlkZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIGFscGhhU2xpZGVyOiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgc2VydmljZTogQ29udmVydGVyU2VydmljZSxcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5jb2xvcikge1xuICAgICAgdGhpcy5jb2xvciA9IG5ldyBIc3ZhKDAsIDEsIDEsIDEpO1xuICAgIH1cbiAgICB0aGlzLnNsaWRlciA9IG5ldyBTbGlkZXJQb3NpdGlvbigwLCAwLCAwLCAwKTtcbiAgICB0aGlzLnVwZGF0ZSgpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IGFueSk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLmNvbG9yICYmIHRoaXMuY29sb3IpIHtcbiAgICAgIHRoaXMudXBkYXRlKCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIGNvbnN0IGh1ZVdpZHRoID0gdGhpcy5odWVTbGlkZXI/Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGggfHwgMTQwO1xuICAgIGNvbnN0IGFscGhhV2lkdGggPSB0aGlzLmFscGhhU2xpZGVyPy5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoIHx8IDE0MDtcbiAgICB0aGlzLnNsaWRlckRpbU1heCA9IG5ldyBTbGlkZXJEaW1lbnNpb24oaHVlV2lkdGgsIDIyMCwgMTMwLCBhbHBoYVdpZHRoKTtcbiAgICB0aGlzLnVwZGF0ZSgpO1xuICB9XG5cbiAgcHVibGljIG9uU2xpZGVyQ2hhbmdlKHR5cGU6IHN0cmluZywgZXZlbnQpIHtcbiAgICBzd2l0Y2ggKHR5cGUpIHtcbiAgICAgIGNhc2UgXCJzYXR1cmF0aW9uLWxpZ2h0bmVzc1wiOlxuICAgICAgICB0aGlzLmhzdmEub25Db2xvckNoYW5nZShldmVudCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBcImh1ZVwiOlxuICAgICAgICB0aGlzLmhzdmEub25IdWVDaGFuZ2UoZXZlbnQpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgXCJhbHBoYVwiOlxuICAgICAgICB0aGlzLmhzdmEub25BbHBoYUNoYW5nZShldmVudCk7XG4gICAgICAgIHRoaXMub25BbHBoYUNoYW5nZS5lbWl0KGV2ZW50KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIFwidmFsdWVcIjpcbiAgICAgICAgdGhpcy5oc3ZhLm9uVmFsdWVDaGFuZ2UoZXZlbnQpO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gICAgLy8gdGhpcy5zSHVlID0gdGhpcy5oc3ZhLmg7XG4gICAgdGhpcy51cGRhdGUoKTtcbiAgICB0aGlzLnNldENvbG9yKHRoaXMub3V0cHV0Q29sb3IpO1xuICB9XG5cbiAgc2V0Q29sb3IoY29sb3IpIHtcbiAgICB0aGlzLmNvbG9yID0gY29sb3I7XG4gICAgdGhpcy5zbGlkZXJDaGFuZ2UuZW1pdCh0aGlzLmNvbG9yKTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRCYWNrZ3JvdW5kQ29sb3IoY29sb3IpIHtcbiAgICByZXR1cm4ge1xuICAgICAgYmFja2dyb3VuZDpcbiAgICAgICAgXCJsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEoMzYsMCwwLDApIDAlLCBcIiArIGNvbG9yICsgXCIgMTAwJSlcIixcbiAgICB9O1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGUoKTogdm9pZCB7XG4gICAgdGhpcy5oc3ZhID0gdGhpcy5jb2xvcjtcbiAgICBpZiAodGhpcy5zbGlkZXJEaW1NYXgpIHtcbiAgICAgIGxldCByZ2JhID0gdGhpcy5zZXJ2aWNlLmhzdmFUb1JnYmEodGhpcy5oc3ZhKS5kZW5vcm1hbGl6ZSgpO1xuICAgICAgbGV0IGh1ZSA9IHRoaXMuc2VydmljZVxuICAgICAgICAuaHN2YVRvUmdiYShuZXcgSHN2YSh0aGlzLmhzdmEuaCwgMSwgMSwgMSkpXG4gICAgICAgIC5kZW5vcm1hbGl6ZSgpO1xuXG4gICAgICB0aGlzLmh1ZVNsaWRlckNvbG9yID0gXCJyZ2IoXCIgKyBodWUuciArIFwiLFwiICsgaHVlLmcgKyBcIixcIiArIGh1ZS5iICsgXCIpXCI7XG4gICAgICB0aGlzLmFscGhhU2xpZGVyQ29sb3IgPVxuICAgICAgICBcInJnYihcIiArIHJnYmEuciArIFwiLFwiICsgcmdiYS5nICsgXCIsXCIgKyByZ2JhLmIgKyBcIilcIjtcblxuICAgICAgdGhpcy5vdXRwdXRDb2xvciA9IHRoaXMuaHN2YTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRDb2xvciA9IHRoaXMuc2VydmljZS5oc3ZhVG9SZ2JhKHRoaXMuaHN2YSkudG9TdHJpbmcoKTtcblxuICAgICAgdGhpcy5zbGlkZXIgPSBuZXcgU2xpZGVyUG9zaXRpb24oXG4gICAgICAgIC8vICh0aGlzLnNIdWUgfHwgdGhpcy5oc3ZhLmgpICogdGhpcy5zbGlkZXJEaW1NYXguaCAtIDgsXG4gICAgICAgIHRoaXMuaHN2YS5oICogdGhpcy5zbGlkZXJEaW1NYXguaCAtIDUsXG4gICAgICAgIHRoaXMuaHN2YS5zICogdGhpcy5zbGlkZXJEaW1NYXgucyAtIDgsXG4gICAgICAgICgxIC0gdGhpcy5oc3ZhLnYpICogdGhpcy5zbGlkZXJEaW1NYXgudiAtIDgsXG4gICAgICAgIHRoaXMuaHN2YS5hICogdGhpcy5zbGlkZXJEaW1NYXguYSAtIDVcbiAgICAgICk7XG4gICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2ICNkaWFsb2dQb3B1cCBjbGFzcz1cImNvbG9yLXBpY2tlclwiIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIj5cbiAgPGRpdlxuICAgIGNsYXNzPVwic2F0dXJhdGlvbi1saWdodG5lc3NcIlxuICAgICpuZ0lmPVwidGhpcy5jb250cm9scyAhPSAnb25seS1hbHBoYSdcIlxuICAgIFtzbGlkZXJdXG4gICAgW3JnWF09XCIxXCJcbiAgICBbcmdZXT1cIjFcIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImh1ZVNsaWRlckNvbG9yXCJcbiAgICAobmV3VmFsdWUpPVwib25TbGlkZXJDaGFuZ2UoJ3NhdHVyYXRpb24tbGlnaHRuZXNzJywgJGV2ZW50KVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwiY3Vyc29yXCIgW3N0eWxlLnRvcC5weF09XCJzbGlkZXI/LnZcIiBbc3R5bGUubGVmdC5weF09XCJzbGlkZXI/LnNcIj5cbiAgICAgIDxkaXY+PC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJodWUtYWxwaGEgYm94XCI+XG4gICAgPGRpdiBjbGFzcz1cImxlZnRcIiAqbmdJZj1cInRoaXMuY29udHJvbHMgIT0gJ29ubHktYWxwaGEnXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwic2VsZWN0ZWQtY29sb3ItYmFja2dyb3VuZFwiPjwvZGl2PlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cInNlbGVjdGVkLWNvbG9yXCJcbiAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwic2VsZWN0ZWRDb2xvclwiXG4gICAgICA+PC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwicmlnaHRcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgKm5nSWY9XCJ0aGlzLmNvbnRyb2xzICE9ICdvbmx5LWFscGhhJ1wiXG4gICAgICAgICNodWVTbGlkZXJcbiAgICAgICAgY2xhc3M9XCJodWVcIlxuICAgICAgICBbc2xpZGVyXVxuICAgICAgICBbcmdYXT1cIjFcIlxuICAgICAgICAobmV3VmFsdWUpPVwib25TbGlkZXJDaGFuZ2UoJ2h1ZScsICRldmVudClcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2xpZGVyQ3Vyc29yXCIgW3N0eWxlLmxlZnQucHhdPVwic2xpZGVyPy5oXCI+XG4gICAgICAgICAgPGRpdj48ZGl2PjwvZGl2PjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2XG4gICAgICAgICpuZ0lmPVwidGhpcy5jb250cm9scyAhPSAnbm8tYWxwaGEnXCJcbiAgICAgICAgI2FscGhhU2xpZGVyXG4gICAgICAgIGNsYXNzPVwiYWxwaGFcIlxuICAgICAgICBbc2xpZGVyXVxuICAgICAgICBbcmdYXT1cIjFcIlxuICAgICAgICAobmV3VmFsdWUpPVwib25TbGlkZXJDaGFuZ2UoJ2FscGhhJywgJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cImFscGhhLWdyYWRpZW50XCJcbiAgICAgICAgICBbbmdTdHlsZV09XCJnZXRCYWNrZ3JvdW5kQ29sb3IoYWxwaGFTbGlkZXJDb2xvcilcIlxuICAgICAgICA+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzbGlkZXJDdXJzb3JcIiBbc3R5bGUubGVmdC5weF09XCJzbGlkZXI/LmFcIj5cbiAgICAgICAgICA8ZGl2PjxkaXY+PC9kaXY+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=