ngx-input-color
Version:
Angular color input component and color picker (with HSL, HSV, RGB, CMYK, HEX, alpha, eye-dropper, etc)
62 lines • 15 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgxColor } from '../../../utils/color-helper';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../../slider/slider.component";
export class RgbComponent {
set color(c) {
if (c.equals(this.inputColor))
return;
this.inputColor = c;
const rgba = c.toRgb();
this.red = rgba.r;
this.green = rgba.g;
this.blue = rgba.b;
this.alpha = rgba.a ?? 1;
this.updateRgbSliderColor(rgba);
}
constructor() {
this.redSliderBackground = '';
this.greenSliderBackground = '';
this.blueSliderBackground = '';
this.baseColor = 'rgb(0,0,0)';
this.red = 0;
this.green = 0;
this.blue = 0;
this.alpha = 1;
this.colorChange = new EventEmitter();
}
ngOnInit() { }
generateColor() {
try {
const rgba = { r: this.red, g: this.green, b: this.blue, a: this.alpha };
const color = new NgxColor(rgba);
this.updateRgbSliderColor(rgba);
if (color.equals(this.inputColor) == false) {
this.inputColor = color;
this.colorChange.emit(color);
}
}
catch (error) {
this.colorChange.emit(undefined);
}
}
updateRgbSliderColor(rgba) {
const { r, g, b } = rgba;
this.redSliderBackground = `linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`;
this.greenSliderBackground = `linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`;
this.blueSliderBackground = `linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`;
this.baseColor = `rgb(${r}, ${g}, ${b})`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RgbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RgbComponent, selector: "app-rgb", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\r\n [(ngModel)]=\"red\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"redSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Red</span>\r\n <input type=\"number\" [(ngModel)]=\"red\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"green\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"greenSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Green</span>\r\n <input type=\"number\" [(ngModel)]=\"green\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"blue\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"blueSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Blue</span>\r\n <input type=\"number\" [(ngModel)]=\"blue\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"alpha\"\r\n [min]=\"0\"\r\n [max]=\"1\"\r\n [step]=\"0.1\"\r\n (change)=\"generateColor()\"\r\n [isBgTransparent]=\"true\"\r\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Alpha</span>\r\n <input type=\"number\" [(ngModel)]=\"alpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RgbComponent, decorators: [{
type: Component,
args: [{ selector: 'app-rgb', template: "<slider\r\n [(ngModel)]=\"red\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"redSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Red</span>\r\n <input type=\"number\" [(ngModel)]=\"red\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"green\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"greenSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Green</span>\r\n <input type=\"number\" [(ngModel)]=\"green\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"blue\"\r\n [min]=\"0\"\r\n [max]=\"255\"\r\n [step]=\"1\"\r\n (change)=\"generateColor()\"\r\n [background]=\"blueSliderBackground\">\r\n <div class=\"slider-title\">\r\n <span>Blue</span>\r\n <input type=\"number\" [(ngModel)]=\"blue\" min=\"0\" max=\"255\" step=\"1\" />\r\n </div>\r\n</slider>\r\n<slider\r\n [(ngModel)]=\"alpha\"\r\n [min]=\"0\"\r\n [max]=\"1\"\r\n [step]=\"0.1\"\r\n (change)=\"generateColor()\"\r\n [isBgTransparent]=\"true\"\r\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n <div class=\"slider-title\">\r\n <span>Alpha</span>\r\n <input type=\"number\" [(ngModel)]=\"alpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
}], ctorParameters: () => [], propDecorators: { color: [{
type: Input
}], colorChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmdiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbnB1dC1jb2xvci9zcmMvbGliL2luc3BlY3RvcnMvcmdiL3JnYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaW5wdXQtY29sb3Ivc3JjL2xpYi9pbnNwZWN0b3JzL3JnYi9yZ2IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7QUFRdkQsTUFBTSxPQUFPLFlBQVk7SUFZdkIsSUFBYSxLQUFLLENBQUMsQ0FBVztRQUM1QixJQUFJLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUFFLE9BQU87UUFDdEMsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7UUFDcEIsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUNsQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDcEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQVcsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRDtRQXRCQSx3QkFBbUIsR0FBRyxFQUFFLENBQUM7UUFDekIsMEJBQXFCLEdBQUcsRUFBRSxDQUFDO1FBQzNCLHlCQUFvQixHQUFHLEVBQUUsQ0FBQztRQUUxQixjQUFTLEdBQUcsWUFBWSxDQUFDO1FBQ3pCLFFBQUcsR0FBVyxDQUFDLENBQUM7UUFDaEIsVUFBSyxHQUFXLENBQUMsQ0FBQztRQUNsQixTQUFJLEdBQVcsQ0FBQyxDQUFDO1FBQ2pCLFVBQUssR0FBVyxDQUFDLENBQUM7UUFhUixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUF3QixDQUFDO0lBQ2xELENBQUM7SUFFaEIsUUFBUSxLQUFJLENBQUM7SUFFYixhQUFhO1FBQ1gsSUFBSSxDQUFDO1lBQ0gsTUFBTSxJQUFJLEdBQVMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQy9FLE1BQU0sS0FBSyxHQUFHLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUNoQyxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDO2dCQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztnQkFDeEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDL0IsQ0FBQztRQUNILENBQUM7UUFBQyxPQUFPLEtBQUssRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDbkMsQ0FBQztJQUNILENBQUM7SUFFTyxvQkFBb0IsQ0FBQyxJQUFVO1FBQ3JDLE1BQU0sRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsbUJBQW1CLEdBQUcsb0NBQW9DLENBQUMsS0FBSyxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO1FBQ2pHLElBQUksQ0FBQyxxQkFBcUIsR0FBRyxpQ0FBaUMsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUM7UUFDbkcsSUFBSSxDQUFDLG9CQUFvQixHQUFHLGlDQUFpQyxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUNsRyxJQUFJLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQztJQUMzQyxDQUFDOytHQS9DVSxZQUFZO21HQUFaLFlBQVksb0hDVHpCLDA1Q0FpREE7OzRGRHhDYSxZQUFZO2tCQUx4QixTQUFTOytCQUNFLFNBQVM7d0RBZ0JOLEtBQUs7c0JBQWpCLEtBQUs7Z0JBVUksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmd4Q29sb3IgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb2xvci1oZWxwZXInO1xyXG5pbXBvcnQgeyBSR0JBIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvaW50ZXJmYWNlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1yZ2InLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yZ2IuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3JnYi5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUmdiQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICByZWRTbGlkZXJCYWNrZ3JvdW5kID0gJyc7XHJcbiAgZ3JlZW5TbGlkZXJCYWNrZ3JvdW5kID0gJyc7XHJcbiAgYmx1ZVNsaWRlckJhY2tncm91bmQgPSAnJztcclxuXHJcbiAgYmFzZUNvbG9yID0gJ3JnYigwLDAsMCknO1xyXG4gIHJlZDogbnVtYmVyID0gMDtcclxuICBncmVlbjogbnVtYmVyID0gMDtcclxuICBibHVlOiBudW1iZXIgPSAwO1xyXG4gIGFscGhhOiBudW1iZXIgPSAxO1xyXG5cclxuICBwcml2YXRlIGlucHV0Q29sb3I/OiBOZ3hDb2xvcjtcclxuICBASW5wdXQoKSBzZXQgY29sb3IoYzogTmd4Q29sb3IpIHtcclxuICAgIGlmIChjLmVxdWFscyh0aGlzLmlucHV0Q29sb3IpKSByZXR1cm47XHJcbiAgICB0aGlzLmlucHV0Q29sb3IgPSBjO1xyXG4gICAgY29uc3QgcmdiYSA9IGMudG9SZ2IoKTtcclxuICAgIHRoaXMucmVkID0gcmdiYS5yO1xyXG4gICAgdGhpcy5ncmVlbiA9IHJnYmEuZztcclxuICAgIHRoaXMuYmx1ZSA9IHJnYmEuYjtcclxuICAgIHRoaXMuYWxwaGEgPSByZ2JhLmEgPz8gMTtcclxuICAgIHRoaXMudXBkYXRlUmdiU2xpZGVyQ29sb3IocmdiYSBhcyBhbnkpO1xyXG4gIH1cclxuICBAT3V0cHV0KCkgY29sb3JDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPE5neENvbG9yIHwgdW5kZWZpbmVkPigpO1xyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgbmdPbkluaXQoKSB7fVxyXG5cclxuICBnZW5lcmF0ZUNvbG9yKCkge1xyXG4gICAgdHJ5IHtcclxuICAgICAgY29uc3QgcmdiYTogUkdCQSA9IHsgcjogdGhpcy5yZWQsIGc6IHRoaXMuZ3JlZW4sIGI6IHRoaXMuYmx1ZSwgYTogdGhpcy5hbHBoYSB9O1xyXG4gICAgICBjb25zdCBjb2xvciA9IG5ldyBOZ3hDb2xvcihyZ2JhKTtcclxuICAgICAgdGhpcy51cGRhdGVSZ2JTbGlkZXJDb2xvcihyZ2JhKTtcclxuICAgICAgaWYgKGNvbG9yLmVxdWFscyh0aGlzLmlucHV0Q29sb3IpID09IGZhbHNlKSB7XHJcbiAgICAgICAgdGhpcy5pbnB1dENvbG9yID0gY29sb3I7XHJcbiAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGNvbG9yKTtcclxuICAgICAgfVxyXG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcclxuICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KHVuZGVmaW5lZCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHVwZGF0ZVJnYlNsaWRlckNvbG9yKHJnYmE6IFJHQkEpIHtcclxuICAgIGNvbnN0IHsgciwgZywgYiB9ID0gcmdiYTtcclxuICAgIHRoaXMucmVkU2xpZGVyQmFja2dyb3VuZCA9IGBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYigwLCAke2d9LCAke2J9KSwgcmdiKDI1NSwgJHtnfSwgJHtifSkpYDtcclxuICAgIHRoaXMuZ3JlZW5TbGlkZXJCYWNrZ3JvdW5kID0gYGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgcmdiKCR7cn0sIDAsICR7Yn0pLCByZ2IoJHtyfSwgMjU1LCAke2J9KSlgO1xyXG4gICAgdGhpcy5ibHVlU2xpZGVyQmFja2dyb3VuZCA9IGBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYigke3J9LCAke2d9LCAwKSwgcmdiKCR7cn0sICR7Z30sIDI1NSkpYDtcclxuICAgIHRoaXMuYmFzZUNvbG9yID0gYHJnYigke3J9LCAke2d9LCAke2J9KWA7XHJcbiAgfVxyXG59XHJcbiIsIjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cInJlZFwiXHJcbiAgW21pbl09XCIwXCJcclxuICBbbWF4XT1cIjI1NVwiXHJcbiAgW3N0ZXBdPVwiMVwiXHJcbiAgKGNoYW5nZSk9XCJnZW5lcmF0ZUNvbG9yKClcIlxyXG4gIFtiYWNrZ3JvdW5kXT1cInJlZFNsaWRlckJhY2tncm91bmRcIj5cclxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXRpdGxlXCI+XHJcbiAgICA8c3Bhbj5SZWQ8L3NwYW4+XHJcbiAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFsobmdNb2RlbCldPVwicmVkXCIgbWluPVwiMFwiIG1heD1cIjI1NVwiIHN0ZXA9XCIxXCIgLz5cclxuICA8L2Rpdj5cclxuPC9zbGlkZXI+XHJcbjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cImdyZWVuXCJcclxuICBbbWluXT1cIjBcIlxyXG4gIFttYXhdPVwiMjU1XCJcclxuICBbc3RlcF09XCIxXCJcclxuICAoY2hhbmdlKT1cImdlbmVyYXRlQ29sb3IoKVwiXHJcbiAgW2JhY2tncm91bmRdPVwiZ3JlZW5TbGlkZXJCYWNrZ3JvdW5kXCI+XHJcbiAgPGRpdiBjbGFzcz1cInNsaWRlci10aXRsZVwiPlxyXG4gICAgPHNwYW4+R3JlZW48L3NwYW4+XHJcbiAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFsobmdNb2RlbCldPVwiZ3JlZW5cIiBtaW49XCIwXCIgbWF4PVwiMjU1XCIgc3RlcD1cIjFcIiAvPlxyXG4gIDwvZGl2PlxyXG48L3NsaWRlcj5cclxuPHNsaWRlclxyXG4gIFsobmdNb2RlbCldPVwiYmx1ZVwiXHJcbiAgW21pbl09XCIwXCJcclxuICBbbWF4XT1cIjI1NVwiXHJcbiAgW3N0ZXBdPVwiMVwiXHJcbiAgKGNoYW5nZSk9XCJnZW5lcmF0ZUNvbG9yKClcIlxyXG4gIFtiYWNrZ3JvdW5kXT1cImJsdWVTbGlkZXJCYWNrZ3JvdW5kXCI+XHJcbiAgPGRpdiBjbGFzcz1cInNsaWRlci10aXRsZVwiPlxyXG4gICAgPHNwYW4+Qmx1ZTwvc3Bhbj5cclxuICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgWyhuZ01vZGVsKV09XCJibHVlXCIgbWluPVwiMFwiIG1heD1cIjI1NVwiIHN0ZXA9XCIxXCIgLz5cclxuICA8L2Rpdj5cclxuPC9zbGlkZXI+XHJcbjxzbGlkZXJcclxuICBbKG5nTW9kZWwpXT1cImFscGhhXCJcclxuICBbbWluXT1cIjBcIlxyXG4gIFttYXhdPVwiMVwiXHJcbiAgW3N0ZXBdPVwiMC4xXCJcclxuICAoY2hhbmdlKT1cImdlbmVyYXRlQ29sb3IoKVwiXHJcbiAgW2lzQmdUcmFuc3BhcmVudF09XCJ0cnVlXCJcclxuICBbYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHRyYW5zcGFyZW50LCcgKyBiYXNlQ29sb3IgKyAnKSdcIj5cclxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXRpdGxlXCI+XHJcbiAgICA8c3Bhbj5BbHBoYTwvc3Bhbj5cclxuICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgWyhuZ01vZGVsKV09XCJhbHBoYVwiIG1pbj1cIjBcIiBtYXg9XCIxXCIgc3RlcD1cIjAuMVwiIC8+XHJcbiAgPC9kaXY+XHJcbjwvc2xpZGVyPlxyXG4iXX0=