ngx-mat-dynamic-form-builder
Version:
Build dynamic forms in Angular Material using Reactive forms.
69 lines • 17.1 kB
JavaScript
import { Component, Input } from '@angular/core';
import { tap } from 'rxjs/operators';
import { DateAdapter } from '@angular/material/core';
export class DynamicFormQuestionComponent {
constructor(adapter) {
this.adapter = adapter;
this.loading = false;
this.adapter.setLocale('en-GB');
}
get isValid() { return this.form.controls[this.question.key].valid; }
ngOnInit() {
if (this.question.selectionFilter) {
console.log('TODO: Do some loading here...');
}
else if (this.question.options$) {
this.loading = true;
this.question.options$ = this.question.options$.pipe(tap(_ => setTimeout(() => {
this.loading = false;
})));
}
}
setMutlipleValues(event) {
if (this.question.customChip) {
this.form.controls[this.question.key].setValue(event);
}
else {
this.form.controls[this.question.key].setValue(this.question.emitObject ? event : event.map(val => val[this.question.selection.key]));
}
}
setSingleValue(event) {
// Clear input of auto complete
if (!event) {
this.form.controls[this.question.key].setValue(undefined);
}
else {
this.form.controls[this.question.key].setValue(this.question.emitObject ? event : event[this.question.selection.key]);
}
}
dateTimeChange(event) {
if (this.question.hourControl.value) {
event.value.setHours(this.question.hourControl.value);
}
if (this.question.minuteControl.value) {
event.value.setMinutes(this.question.minuteControl.value);
}
this.form.controls[this.question.key].setValue(event.value);
}
dateChange(event) {
this.form.controls[this.question.key].setValue(event.value);
}
setFile(file) {
this.form.controls[this.question.key].setValue(file);
}
}
DynamicFormQuestionComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-mat-dynamic-form-question',
template: "<div [formGroup]=\"form\" fxFlex style=\"margin: 5px;\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\r\n\r\n <ng-container [ngSwitch]=\"question.controlType\">\r\n\r\n <span *ngSwitchCase=\"'spacer'\" fxFlex></span>\r\n\r\n <mat-form-field [appearance]=\"question.appearance\" *ngSwitchCase=\"'textbox'\" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <span *ngIf=\"question.prefix\" matPrefix>{{question.prefix}} </span>\r\n <mat-icon *ngIf=\"question.prefixIcon\" matPrefix>{{question.prefixIcon}}</mat-icon>\r\n <input matInput [placeholder]=\"question.placeholder\" [formControlName]=\"question.key\" [type]=\"question.type\">\r\n <mat-hint *ngIf=\"question.hint\">{{question.hint}}</mat-hint>\r\n <mat-icon *ngIf=\"question.suffixIcon\" matSuffix>{{question.suffixIcon}}</mat-icon>\r\n <span *ngIf=\"question.suffix\" matSuffix> {{question.suffix}}</span>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-form-field [appearance]=\"question.appearance\" *ngSwitchCase=\"'textarea'\" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <span *ngIf=\"question.prefix\" matPrefix>{{question.prefix}} </span>\r\n <mat-icon *ngIf=\"question.prefixIcon\" matPrefix>{{question.prefixIcon}}</mat-icon>\r\n <textarea matInput [placeholder]=\"question.placeholder\" [formControlName]=\"question.key\" [type]=\"question.type\"\r\n [cdkAutosizeMinRows]=\"question.minRows\" [cdkAutosizeMaxRows]=\"question.maxRows\"\r\n [cdkTextareaAutosize]=\"question.autoSize\"></textarea>\r\n <mat-hint *ngIf=\"question.hint\">{{question.hint}}</mat-hint>\r\n <mat-icon *ngIf=\"question.suffixIcon\" matSuffix>{{question.suffixIcon}}</mat-icon>\r\n <span *ngIf=\"question.suffix\" matSuffix> {{question.suffix}}</span>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-form-field [appearance]=\"question.appearance\" *ngSwitchCase=\"'dropdown'\" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <mat-select [formControlName]=\"question.key\">\r\n <ng-container *ngIf=\"question.options$\">\r\n <mat-option *ngIf=\"question.defaultValue\">None</mat-option>\r\n <mat-option *ngFor=\"let opt of question.options$ | async\" [value]=\"opt[question.selection.key]\">\r\n {{opt[question.selection.value]}}\r\n </mat-option>\r\n </ng-container>\r\n <ng-container *ngIf=\"question.options\">\r\n <mat-option *ngFor=\"let opt of question.options\" [value]=\"opt[question.selection.key]\">\r\n {{opt[question.selection.value]}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-hint *ngIf=\"question.hint\">{{question.hint}}</mat-hint>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <div *ngSwitchCase=\"'chipSelector'\" fxFlex>\r\n <ngx-mat-chip-selector [options]=\"question.options$ | async\" [defaultOptions]=\"question.value\"\r\n [defaultOptionsKey]=\"question.selection.key\" [placeholder]=\"question.placeholder\" [disabled]=\"question.disabled\"\r\n [label]=\"question.label\" [displayKey]=\"question.selection.value\" [filterKey]=\"question.selection.value\"\r\n [appearance]=\"question.appearance\" [hint]=\"question.hint\" [validators]=\"question.validators\"\r\n [customChip]=\"question.customChip\" (output)=\"setMutlipleValues($event)\" fxFlex>\r\n </ngx-mat-chip-selector>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'autoComplete'\" fxFlex>\r\n <ngx-mat-auto-complete [options]=\"question.options$ | async\" [defaultOption]=\"question.value\"\r\n [defaultOptionKey]=\"question.selection.key\" [placeholder]=\"question.placeholder\" [disabled]=\"question.disabled\"\r\n [label]=\"question.label\" [displayKey]=\"question.selection.value\" [filterKey]=\"question.selection.value\"\r\n [appearance]=\"question.appearance\" [hint]=\"question.hint\" [validators]=\"question.validators\"\r\n (output)=\"setSingleValue($event)\" [autoClear]=\"question.autoClear\" fxFlex>\r\n </ngx-mat-auto-complete>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'date-time'\" fxLayout=\"row wrap\" fxFlex>\r\n <mat-form-field fxFlex.gt-xs fxFlex [appearance]=\"question.appearance\">\r\n <mat-label>{{question.label}}</mat-label>\r\n <input matInput [min]=\"question.minDate\" [max]=\"question.maxDate\" [matDatepicker]=\"picker1\"\r\n (dateChange)=\"dateTimeChange($event)\" [placeholder]=\"question.placeholder\"\r\n [formControl]=\"question.dateControl\" readonly>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker1\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker1 [disabled]=\"question.disabled\"></mat-datepicker>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n <mat-form-field fxFlex.gt-xs=\"20\" fxFlex [appearance]=\"question.appearance\" style=\"margin-left: 5px;\">\r\n <mat-label>Hour</mat-label>\r\n <input type=\"number\" matInput [formControl]=\"question.hourControl\" placeholder=\"Hour\">\r\n </mat-form-field>\r\n <mat-form-field fxFlex.gt-xs=\"20\" fxFlex [appearance]=\"question.appearance\" style=\"margin-left: 5px;\">\r\n <mat-label>Minute</mat-label>\r\n <input type=\"number\" matInput [formControl]=\"question.minuteControl\" placeholder=\"Minute\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'date'\" fxLayout=\"row wrap\" fxFlex>\r\n <mat-form-field fxFlex.gt-xs fxFlex [appearance]=\"question.appearance\">\r\n <mat-label>{{question.label}}</mat-label>\r\n <input matInput [min]=\"question.minDate\" [max]=\"question.maxDate\" [matDatepicker]=\"picker1\"\r\n (dateChange)=\"dateChange($event)\" [placeholder]=\"question.placeholder\" [formControl]=\"question.dateControl\"\r\n readonly>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker1\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker1 [disabled]=\"question.disabled\"></mat-datepicker>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'checkbox'\" fxFlex>\r\n <mat-checkbox [labelPosition]=\"question.labelPosition\" [checked]=\"question.checked\" [color]=\"question.color\"\r\n [formControlName]=\"question.key\">{{question.label}}</mat-checkbox>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]=\"form.controls[question.key]\"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'file-upload'\" fxFlex>\r\n <ngx-mat-file-upload [prefixIcon]=\"question.prefixIcon\" [label]=\"question.label\" [color]=\"question.color\"\r\n [buttonType]=\"question.buttonType\" (file)=\"setFile($event)\">\r\n </ngx-mat-file-upload>\r\n </div>\r\n\r\n </ng-container>\r\n <div *ngIf=\"loading\" style=\"margin-left: 5px;\">\r\n <mat-spinner style=\"zoom:0.24\"></mat-spinner>\r\n </div>\r\n</div>",
styles: [""]
},] }
];
DynamicFormQuestionComponent.ctorParameters = () => [
{ type: DateAdapter }
];
DynamicFormQuestionComponent.propDecorators = {
question: [{ type: Input }],
form: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLXF1ZXN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tYXQtZHluYW1pYy1mb3JtLWJ1aWxkZXIvc3JjL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtZm9ybS1xdWVzdGlvbi9keW5hbWljLWZvcm0tcXVlc3Rpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR3pELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFPckQsTUFBTSxPQUFPLDRCQUE0QjtJQVN2QyxZQUFvQixPQUEwQjtRQUExQixZQUFPLEdBQVAsT0FBTyxDQUFtQjtRQUY5QyxZQUFPLEdBQVksS0FBSyxDQUFDO1FBR3ZCLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFORCxJQUFJLE9BQU8sS0FBSyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQVFyRSxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsRUFBRTtZQUNqQyxPQUFPLENBQUMsR0FBRyxDQUFDLCtCQUErQixDQUFDLENBQUM7U0FDOUM7YUFBTSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFO1lBQ2pDLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FDbEQsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7WUFDdkIsQ0FBQyxDQUFDLENBQUMsQ0FDSixDQUFDO1NBQ0g7SUFDSCxDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBVTtRQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFO1lBQzVCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3ZEO2FBQU07WUFDTCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUN2STtJQUNILENBQUM7SUFFRCxjQUFjLENBQUMsS0FBVTtRQUN2QiwrQkFBK0I7UUFDL0IsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNWLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1NBQzNEO2FBQU07WUFDTCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztTQUN2SDtJQUNILENBQUM7SUFFRCxjQUFjLENBQUMsS0FBb0M7UUFDakQsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUU7WUFDbkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDdkQ7UUFDRCxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRTtZQUNyQyxLQUFLLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUMzRDtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5RCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQW9DO1FBQzdDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5RCxDQUFDO0lBRUQsT0FBTyxDQUFDLElBQVU7UUFDaEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdkQsQ0FBQzs7O1lBaEVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsK0JBQStCO2dCQUN6QywwalBBQXFEOzthQUV0RDs7O1lBTlEsV0FBVzs7O3VCQVVqQixLQUFLO21CQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBNYXREYXRlcGlja2VySW5wdXRFdmVudCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RhdGVwaWNrZXInO1xyXG5pbXBvcnQgeyB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7IERhdGVBZGFwdGVyIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1tYXQtZHluYW1pYy1mb3JtLXF1ZXN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLXF1ZXN0aW9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9keW5hbWljLWZvcm0tcXVlc3Rpb24uY29tcG9uZW50LmNzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEeW5hbWljRm9ybVF1ZXN0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgLy8gQElucHV0KCkgcXVlc3Rpb246IFF1ZXN0aW9uQmFzZTxhbnk+O1xyXG4gIEBJbnB1dCgpIHF1ZXN0aW9uOiBhbnk7XHJcbiAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwO1xyXG4gIGdldCBpc1ZhbGlkKCkgeyByZXR1cm4gdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS52YWxpZDsgfVxyXG5cclxuICBsb2FkaW5nOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYWRhcHRlcjogRGF0ZUFkYXB0ZXI8RGF0ZT4pIHtcclxuICAgIHRoaXMuYWRhcHRlci5zZXRMb2NhbGUoJ2VuLUdCJyk7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICh0aGlzLnF1ZXN0aW9uLnNlbGVjdGlvbkZpbHRlcikge1xyXG4gICAgICBjb25zb2xlLmxvZygnVE9ETzogRG8gc29tZSBsb2FkaW5nIGhlcmUuLi4nKTtcclxuICAgIH0gZWxzZSBpZiAodGhpcy5xdWVzdGlvbi5vcHRpb25zJCkge1xyXG4gICAgICB0aGlzLmxvYWRpbmcgPSB0cnVlO1xyXG4gICAgICB0aGlzLnF1ZXN0aW9uLm9wdGlvbnMkID0gdGhpcy5xdWVzdGlvbi5vcHRpb25zJC5waXBlKFxyXG4gICAgICAgIHRhcChfID0+IHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7XHJcbiAgICAgICAgfSkpXHJcbiAgICAgICk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZXRNdXRsaXBsZVZhbHVlcyhldmVudDogYW55KTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5xdWVzdGlvbi5jdXN0b21DaGlwKSB7XHJcbiAgICAgIHRoaXMuZm9ybS5jb250cm9sc1t0aGlzLnF1ZXN0aW9uLmtleV0uc2V0VmFsdWUoZXZlbnQpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS5zZXRWYWx1ZSh0aGlzLnF1ZXN0aW9uLmVtaXRPYmplY3QgPyBldmVudCA6IGV2ZW50Lm1hcCh2YWwgPT4gdmFsW3RoaXMucXVlc3Rpb24uc2VsZWN0aW9uLmtleV0pKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNldFNpbmdsZVZhbHVlKGV2ZW50OiBhbnkpOiB2b2lkIHtcclxuICAgIC8vIENsZWFyIGlucHV0IG9mIGF1dG8gY29tcGxldGVcclxuICAgIGlmICghZXZlbnQpIHtcclxuICAgICAgdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS5zZXRWYWx1ZSh1bmRlZmluZWQpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS5zZXRWYWx1ZSh0aGlzLnF1ZXN0aW9uLmVtaXRPYmplY3QgPyBldmVudCA6IGV2ZW50W3RoaXMucXVlc3Rpb24uc2VsZWN0aW9uLmtleV0pO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZGF0ZVRpbWVDaGFuZ2UoZXZlbnQ6IE1hdERhdGVwaWNrZXJJbnB1dEV2ZW50PERhdGU+KTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5xdWVzdGlvbi5ob3VyQ29udHJvbC52YWx1ZSkge1xyXG4gICAgICBldmVudC52YWx1ZS5zZXRIb3Vycyh0aGlzLnF1ZXN0aW9uLmhvdXJDb250cm9sLnZhbHVlKTtcclxuICAgIH1cclxuICAgIGlmICh0aGlzLnF1ZXN0aW9uLm1pbnV0ZUNvbnRyb2wudmFsdWUpIHtcclxuICAgICAgZXZlbnQudmFsdWUuc2V0TWludXRlcyh0aGlzLnF1ZXN0aW9uLm1pbnV0ZUNvbnRyb2wudmFsdWUpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS5zZXRWYWx1ZShldmVudC52YWx1ZSk7XHJcbiAgfVxyXG5cclxuICBkYXRlQ2hhbmdlKGV2ZW50OiBNYXREYXRlcGlja2VySW5wdXRFdmVudDxEYXRlPik6IHZvaWQge1xyXG4gICAgdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24ua2V5XS5zZXRWYWx1ZShldmVudC52YWx1ZSk7XHJcbiAgfVxyXG5cclxuICBzZXRGaWxlKGZpbGU6IEZpbGUpOiB2b2lkIHtcclxuICAgIHRoaXMuZm9ybS5jb250cm9sc1t0aGlzLnF1ZXN0aW9uLmtleV0uc2V0VmFsdWUoZmlsZSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==