UNPKG

@asoftwareworld/form-builder-pro

Version:

ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b

52 lines 16.9 kB
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Constants } from '@asoftwareworld/form-builder-pro/common'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; export class AswColorPicker { isEditor = false; textColor; backgroundColor; colorChange = new EventEmitter(); constants = Constants; colorsName = []; constructor() { } ngOnInit() { this.colorsName = Object.keys(this.constants.colors); } /** * Change color from default colors */ onChange(color, where) { if (where === 'textColor') { this.textColor = color; } else { this.backgroundColor = color; } this.colorChange.emit({ colorCode: color, where }); } /** * Change color from input */ changeColorManual(color, where) { const isValid = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color); if (isValid) { this.onChange(color, where); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswColorPicker, selector: "asw-color-picker", inputs: { isEditor: "isEditor", textColor: "textColor", backgroundColor: "backgroundColor" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<ng-container *ngIf=\"isEditor; else normalPicker\">\r\n <div class=\"asw-color-picker\">\r\n <div class=\"opened asw-opened\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-6\">\r\n <span>Background color</span>\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"backgroundColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'backgroundColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"backgroundColor\"\r\n (keyup)=\"changeColorManual(paintBackgroundColor.value, 'backgroundColor')\"\r\n #paintBackgroundColor />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <span>Text color</span>\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"textColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'textColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"textColor\"\r\n (keyup)=\"changeColorManual(paintTextColor.value, 'textColor')\" #paintTextColor />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<ng-template #normalPicker>\r\n <div class=\"asw-color-picker\">\r\n <div class=\"opened-menu asw-opened-menu\">\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"backgroundColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'backgroundColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"backgroundColor\"\r\n (keyup)=\"changeColorManual(paintColor.value, 'backgroundColor')\" #paintColor />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswColorPicker, decorators: [{ type: Component, args: [{ selector: 'asw-color-picker', template: "<ng-container *ngIf=\"isEditor; else normalPicker\">\r\n <div class=\"asw-color-picker\">\r\n <div class=\"opened asw-opened\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-6\">\r\n <span>Background color</span>\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"backgroundColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'backgroundColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"backgroundColor\"\r\n (keyup)=\"changeColorManual(paintBackgroundColor.value, 'backgroundColor')\"\r\n #paintBackgroundColor />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <span>Text color</span>\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"textColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'textColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"textColor\"\r\n (keyup)=\"changeColorManual(paintTextColor.value, 'textColor')\" #paintTextColor />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<ng-template #normalPicker>\r\n <div class=\"asw-color-picker\">\r\n <div class=\"opened-menu asw-opened-menu\">\r\n <div class=\"colors\">\r\n <div [ngClass]=\"colorName\" [class.selected]=\"backgroundColor == constants.colors[colorName]\"\r\n (click)=\"onChange(constants.colors[colorName], 'backgroundColor')\"\r\n *ngFor=\"let colorName of colorsName\" class=\"circle\"\r\n [style.background]=\"constants.colors[colorName]\"></div>\r\n </div>\r\n <div class=\"asw-hex-code\">\r\n <p>Hex Code</p>\r\n <div class=\"asw-input\">\r\n <input type=\"text\" maxlength=\"7\" [value]=\"backgroundColor\"\r\n (keyup)=\"changeColorManual(paintColor.value, 'backgroundColor')\" #paintColor />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }] }], ctorParameters: () => [], propDecorators: { isEditor: [{ type: Input }], textColor: [{ type: Input }], backgroundColor: [{ type: Input }], colorChange: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvY29sb3ItcGlja2VyL2NvbG9yLXBpY2tlci50cyIsIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9jb2xvci1waWNrZXIuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQzs7O0FBTXBFLE1BQU0sT0FBTyxjQUFjO0lBQ2QsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNqQixTQUFTLENBQVU7SUFDbkIsZUFBZSxDQUFVO0lBQ3hCLFdBQVcsR0FBdUQsSUFBSSxZQUFZLEVBQXdDLENBQUM7SUFDckksU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUNmLFVBQVUsR0FBYSxFQUFFLENBQUM7SUFFakMsZ0JBQWUsQ0FBQztJQUVoQixRQUFRO1FBQ0osSUFBSSxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDekQsQ0FBQztJQUVEOztPQUVHO0lBQ0ksUUFBUSxDQUFDLEtBQWEsRUFBRSxLQUFhO1FBQ3hDLElBQUksS0FBSyxLQUFLLFdBQVcsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1FBQzNCLENBQUM7YUFBTSxDQUFDO1lBQ0osSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDakMsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFFRDs7T0FFRztJQUNJLGlCQUFpQixDQUFDLEtBQWEsRUFBRSxLQUFhO1FBQ2pELE1BQU0sT0FBTyxHQUFHLG9DQUFvQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqRSxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNMLENBQUM7dUdBbENRLGNBQWM7MkZBQWQsY0FBYywrTENQM0IsaXZHQTJEYzs7MkZEcERELGNBQWM7a0JBSjFCLFNBQVM7K0JBQ0ksa0JBQWtCO3dEQUluQixRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29uc3RhbnRzIH0gZnJvbSAnQGFzb2Z0d2FyZXdvcmxkL2Zvcm0tYnVpbGRlci1wcm8vY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhc3ctY29sb3ItcGlja2VyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vY29sb3ItcGlja2VyLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFzd0NvbG9yUGlja2VyIGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKSBpc0VkaXRvciA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHRleHRDb2xvciE6IHN0cmluZztcbiAgICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3IhOiBzdHJpbmc7XG4gICAgQE91dHB1dCgpIGNvbG9yQ2hhbmdlOiBFdmVudEVtaXR0ZXI8eyBjb2xvckNvZGU6IHN0cmluZzsgd2hlcmU6IHN0cmluZyB9PiA9IG5ldyBFdmVudEVtaXR0ZXI8eyBjb2xvckNvZGU6IHN0cmluZzsgd2hlcmU6IHN0cmluZyB9PigpO1xuICAgIGNvbnN0YW50cyA9IENvbnN0YW50cztcbiAgICBwdWJsaWMgY29sb3JzTmFtZTogc3RyaW5nW10gPSBbXTtcblxuICAgIGNvbnN0cnVjdG9yKCkge31cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNvbG9yc05hbWUgPSBPYmplY3Qua2V5cyh0aGlzLmNvbnN0YW50cy5jb2xvcnMpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIENoYW5nZSBjb2xvciBmcm9tIGRlZmF1bHQgY29sb3JzXG4gICAgICovXG4gICAgcHVibGljIG9uQ2hhbmdlKGNvbG9yOiBzdHJpbmcsIHdoZXJlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgaWYgKHdoZXJlID09PSAndGV4dENvbG9yJykge1xuICAgICAgICAgICAgdGhpcy50ZXh0Q29sb3IgPSBjb2xvcjtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMuYmFja2dyb3VuZENvbG9yID0gY29sb3I7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KHsgY29sb3JDb2RlOiBjb2xvciwgd2hlcmUgfSk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQ2hhbmdlIGNvbG9yIGZyb20gaW5wdXRcbiAgICAgKi9cbiAgICBwdWJsaWMgY2hhbmdlQ29sb3JNYW51YWwoY29sb3I6IHN0cmluZywgd2hlcmU6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICBjb25zdCBpc1ZhbGlkID0gLyheI1swLTlBLUZdezZ9JCl8KF4jWzAtOUEtRl17M30kKS9pLnRlc3QoY29sb3IpO1xuICAgICAgICBpZiAoaXNWYWxpZCkge1xuICAgICAgICAgICAgdGhpcy5vbkNoYW5nZShjb2xvciwgd2hlcmUpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzRWRpdG9yOyBlbHNlIG5vcm1hbFBpY2tlclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImFzdy1jb2xvci1waWNrZXJcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwib3BlbmVkIGFzdy1vcGVuZWRcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1yb3dcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhc3ctY29sLW1kLTZcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3Bhbj5CYWNrZ3JvdW5kIGNvbG9yPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb2xvcnNcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBbbmdDbGFzc109XCJjb2xvck5hbWVcIiBbY2xhc3Muc2VsZWN0ZWRdPVwiYmFja2dyb3VuZENvbG9yID09IGNvbnN0YW50cy5jb2xvcnNbY29sb3JOYW1lXVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DaGFuZ2UoY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdLCAnYmFja2dyb3VuZENvbG9yJylcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGNvbG9yTmFtZSBvZiBjb2xvcnNOYW1lXCIgY2xhc3M9XCJjaXJjbGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1oZXgtY29kZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8cD5IZXggQ29kZTwvcD5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1pbnB1dFwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgbWF4bGVuZ3RoPVwiN1wiIFt2YWx1ZV09XCJiYWNrZ3JvdW5kQ29sb3JcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChrZXl1cCk9XCJjaGFuZ2VDb2xvck1hbnVhbChwYWludEJhY2tncm91bmRDb2xvci52YWx1ZSwgJ2JhY2tncm91bmRDb2xvcicpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAjcGFpbnRCYWNrZ3JvdW5kQ29sb3IgLz5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhc3ctY29sLW1kLTZcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3Bhbj5UZXh0IGNvbG9yPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb2xvcnNcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBbbmdDbGFzc109XCJjb2xvck5hbWVcIiBbY2xhc3Muc2VsZWN0ZWRdPVwidGV4dENvbG9yID09IGNvbnN0YW50cy5jb2xvcnNbY29sb3JOYW1lXVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DaGFuZ2UoY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdLCAndGV4dENvbG9yJylcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGNvbG9yTmFtZSBvZiBjb2xvcnNOYW1lXCIgY2xhc3M9XCJjaXJjbGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1oZXgtY29kZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8cD5IZXggQ29kZTwvcD5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1pbnB1dFwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgbWF4bGVuZ3RoPVwiN1wiIFt2YWx1ZV09XCJ0ZXh0Q29sb3JcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChrZXl1cCk9XCJjaGFuZ2VDb2xvck1hbnVhbChwYWludFRleHRDb2xvci52YWx1ZSwgJ3RleHRDb2xvcicpXCIgI3BhaW50VGV4dENvbG9yIC8+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvbmctY29udGFpbmVyPlxyXG48bmctdGVtcGxhdGUgI25vcm1hbFBpY2tlcj5cclxuICAgIDxkaXYgY2xhc3M9XCJhc3ctY29sb3ItcGlja2VyXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm9wZW5lZC1tZW51IGFzdy1vcGVuZWQtbWVudVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29sb3JzXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IFtuZ0NsYXNzXT1cImNvbG9yTmFtZVwiIFtjbGFzcy5zZWxlY3RlZF09XCJiYWNrZ3JvdW5kQ29sb3IgPT0gY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DaGFuZ2UoY29uc3RhbnRzLmNvbG9yc1tjb2xvck5hbWVdLCAnYmFja2dyb3VuZENvbG9yJylcIlxyXG4gICAgICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBjb2xvck5hbWUgb2YgY29sb3JzTmFtZVwiIGNsYXNzPVwiY2lyY2xlXCJcclxuICAgICAgICAgICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZF09XCJjb25zdGFudHMuY29sb3JzW2NvbG9yTmFtZV1cIj48L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhc3ctaGV4LWNvZGVcIj5cclxuICAgICAgICAgICAgICAgIDxwPkhleCBDb2RlPC9wPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFzdy1pbnB1dFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIG1heGxlbmd0aD1cIjdcIiBbdmFsdWVdPVwiYmFja2dyb3VuZENvbG9yXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgKGtleXVwKT1cImNoYW5nZUNvbG9yTWFudWFsKHBhaW50Q29sb3IudmFsdWUsICdiYWNrZ3JvdW5kQ29sb3InKVwiICNwYWludENvbG9yIC8+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT4iXX0=