angular-dropdown-select
Version:
<p>Multiple Dropdown Select - <b>You can use this angular-dropdown-select apart from data tables as well.</b></p> <br/>
85 lines • 17.2 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class AngularDropdownSelectComponent {
constructor() {
this.onCheckBoxStatusChanged = new EventEmitter();
this.onUnselectAll = new EventEmitter();
this.dropdownOpen = false;
this.selectedCount = 0;
this.selectAll = false;
this.uncheckAllStatus = false;
this.dropdownButtonText = '';
}
onDocumentClick(event) {
const target = event.target;
if (!target.nextElementSibling?.classList.contains('show')) {
this.dropdownOpen = false;
}
}
ngOnInit() {
this.items = this.headings;
this.extra = this.extras;
this.uncheckAllStatus = this.extra.uncheckAllStatus;
this.dropdownButtonText = this.extra.dropdownButtonText ? this.extra.dropdownButtonText : 'Table Columns';
this.countOfSelectedCheckboxes();
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
iterateForSelectAllChecked() {
this.selectAll = Object.values(this.items).every((item) => item.checked === true);
}
iterateForSelectAllUnChecked() {
this.uncheckAllStatus = Object.values(this.headings).every((item) => item.checked === false);
if (this.uncheckAllStatus === true) {
this.onUnselectAll.emit(true);
}
else {
this.onUnselectAll.emit(false);
}
}
countOfSelectedCheckboxes() {
this.selectedCount = 0;
this.items.forEach((element) => {
element.checked === true ? this.selectedCount++ : null;
});
}
toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
}
onSelectAll(event) {
const checkbox = event.target;
this.items.forEach((item) => {
item.checked = checkbox.checked;
this.onCheckBoxStatusChanged.emit(item);
});
this.countOfSelectedCheckboxes();
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
onItemSelected(item) {
this.countOfSelectedCheckboxes();
this.onCheckBoxStatusChanged.emit(item);
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AngularDropdownSelectComponent, selector: "lib-angular-dropdown-select", inputs: { headings: "headings", extras: "extras" }, outputs: { onCheckBoxStatusChanged: "onCheckBoxStatusChanged", onUnselectAll: "onUnselectAll" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dropdown\" (click)=\"toggleDropdown()\" tabindex=\"0\">\r\n <button class=\"dropdown-toggle\">\r\n {{ dropdownButtonText }} <span class=\"count-background-color\">{{ selectedCount }}</span>\r\n </button>\r\n <div class=\"dropdown-menu\" [class.show]=\"dropdownOpen\">\r\n <div class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" (change)=\"onSelectAll($event)\" [(ngModel)]=\"selectAll\">\r\n <span class=\"checkbox-label\">Select All</span>\r\n </div>\r\n <div *ngFor=\"let item of items\" class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" [(ngModel)]=\"item.checked\" (change)=\"onItemSelected(item)\">\r\n <span class=\"checkbox-label\">{{ item.name }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown{position:relative;display:inline-block;font-family:Arial,sans-serif}.dropdown-toggle{color:#000;border:1px solid grey;background-color:#fff;padding:10px;border-radius:4px;cursor:pointer;outline:none;transition:background-color .3s}.dropdown-toggle:hover{background-color:#ecececa6}.dropdown-menu{position:absolute;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px;display:none;margin-top:5px;min-width:200px}.dropdown-menu.show{display:block}.dropdown-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;transition:background-color .3s}.dropdown-item:hover{background-color:#f8f9fa}.checkbox-label{margin-left:10px;font-size:14px;color:#333}.checkbox-input{margin-right:10px;width:18px;height:18px;border:1px solid #ced4da;border-radius:3px;cursor:pointer;transition:background-color .3s}.checkbox-input:checked{background-color:#007bff}.checkbox-input:checked:after{content:\"\\2713\";font-size:12px;color:#fff;position:absolute;top:1px;left:5px}.dropdown-toggle:focus,.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #007bff80}.count-background-color{background-color:#000;color:#fff;padding:4px;border-radius:20px;border:.25px solid grey}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-angular-dropdown-select', template: "<div class=\"dropdown\" (click)=\"toggleDropdown()\" tabindex=\"0\">\r\n <button class=\"dropdown-toggle\">\r\n {{ dropdownButtonText }} <span class=\"count-background-color\">{{ selectedCount }}</span>\r\n </button>\r\n <div class=\"dropdown-menu\" [class.show]=\"dropdownOpen\">\r\n <div class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" (change)=\"onSelectAll($event)\" [(ngModel)]=\"selectAll\">\r\n <span class=\"checkbox-label\">Select All</span>\r\n </div>\r\n <div *ngFor=\"let item of items\" class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" [(ngModel)]=\"item.checked\" (change)=\"onItemSelected(item)\">\r\n <span class=\"checkbox-label\">{{ item.name }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown{position:relative;display:inline-block;font-family:Arial,sans-serif}.dropdown-toggle{color:#000;border:1px solid grey;background-color:#fff;padding:10px;border-radius:4px;cursor:pointer;outline:none;transition:background-color .3s}.dropdown-toggle:hover{background-color:#ecececa6}.dropdown-menu{position:absolute;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px;display:none;margin-top:5px;min-width:200px}.dropdown-menu.show{display:block}.dropdown-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;transition:background-color .3s}.dropdown-item:hover{background-color:#f8f9fa}.checkbox-label{margin-left:10px;font-size:14px;color:#333}.checkbox-input{margin-right:10px;width:18px;height:18px;border:1px solid #ced4da;border-radius:3px;cursor:pointer;transition:background-color .3s}.checkbox-input:checked{background-color:#007bff}.checkbox-input:checked:after{content:\"\\2713\";font-size:12px;color:#fff;position:absolute;top:1px;left:5px}.dropdown-toggle:focus,.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #007bff80}.count-background-color{background-color:#000;color:#fff;padding:4px;border-radius:20px;border:.25px solid grey}\n"] }]
}], ctorParameters: () => [], propDecorators: { headings: [{
type: Input
}], extras: [{
type: Input
}], onCheckBoxStatusChanged: [{
type: Output
}], onUnselectAll: [{
type: Output
}], onDocumentClick: [{
type: HostListener,
args: ['document:click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kcm9wZG93bi1zZWxlY3Qvc3JjL2xpYi9hbmd1bGFyLWRyb3Bkb3duLXNlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWRyb3Bkb3duLXNlbGVjdC9zcmMvbGliL2FuZ3VsYXItZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3JGLE1BQU0sT0FBTyw4QkFBOEI7SUFlekM7UUFYVSw0QkFBdUIsR0FBRyxJQUFJLFlBQVksRUFBb0MsQ0FBQztRQUMvRSxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdEQsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFFckIsa0JBQWEsR0FBVyxDQUFDLENBQUM7UUFDMUIsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUUzQixxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFDbEMsdUJBQWtCLEdBQVksRUFBRSxDQUFDO0lBRW5CLENBQUM7SUFHZixlQUFlLENBQUMsS0FBaUI7UUFDL0IsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDM0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsRUFBRSxTQUFTLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDM0QsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDNUIsQ0FBQztJQUNILENBQUM7SUFFRCxRQUFRO1FBQ1AsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO1FBQzNCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQztRQUNwRCxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDO1FBQzFHLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQywwQkFBMEIsRUFBRSxDQUFDO1FBQ2xDLElBQUksQ0FBQyw0QkFBNEIsRUFBRSxDQUFDO0lBQ3JDLENBQUM7SUFFRCwwQkFBMEI7UUFDeEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFRLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLEtBQUssSUFBSSxDQUFDLENBQUE7SUFDdkYsQ0FBQztJQUVELDRCQUE0QjtRQUMxQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBUSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxLQUFLLEtBQUssQ0FBQyxDQUFBO1FBQ2hHLElBQUcsSUFBSSxDQUFDLGdCQUFnQixLQUFLLElBQUksRUFBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2hDLENBQUM7YUFBSSxDQUFDO1lBQ0osSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDakMsQ0FBQztJQUNILENBQUM7SUFFRCx5QkFBeUI7UUFDdkIsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUM7UUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFZLEVBQUUsRUFBRTtZQUNsQyxPQUFPLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDekQsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQ3pDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBWTtRQUN0QixNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsTUFBMEIsQ0FBQztRQUVsRCxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQVEsRUFBRSxFQUFFO1lBQzlCLElBQUksQ0FBQyxPQUFPLEdBQUcsUUFBUSxDQUFDLE9BQU8sQ0FBQztZQUNoQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzFDLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLDBCQUEwQixFQUFFLENBQUM7UUFDbEMsSUFBSSxDQUFDLDRCQUE0QixFQUFFLENBQUM7SUFDdEMsQ0FBQztJQUVELGNBQWMsQ0FBQyxJQUFTO1FBQ3RCLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEMsSUFBSSxDQUFDLDBCQUEwQixFQUFFLENBQUM7UUFDbEMsSUFBSSxDQUFDLDRCQUE0QixFQUFFLENBQUM7SUFDdEMsQ0FBQzsrR0E3RVUsOEJBQThCO21HQUE5Qiw4QkFBOEIsOFJDUDNDLHcxQkFjTTs7NEZEUE8sOEJBQThCO2tCQUwxQyxTQUFTOytCQUNFLDZCQUE2Qjt3REFNOUIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksdUJBQXVCO3NCQUFoQyxNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBYVAsZUFBZTtzQkFEZCxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItYW5ndWxhci1kcm9wZG93bi1zZWxlY3QnLFxyXG4gIHRlbXBsYXRlVXJsOicuL2FuZ3VsYXItZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vYW5ndWxhci1kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEFuZ3VsYXJEcm9wZG93blNlbGVjdENvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIGhlYWRpbmdzOiBhbnk7XHJcbiAgQElucHV0KCkgZXh0cmFzOiBhbnk7XHJcbiAgQE91dHB1dCgpIG9uQ2hlY2tCb3hTdGF0dXNDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjx7IGlkOiBudW1iZXIsIGNoZWNrZWQ6IGJvb2xlYW4gfT4oKTtcclxuICBAT3V0cHV0KCkgb25VbnNlbGVjdEFsbCA9IG5ldyBFdmVudEVtaXR0ZXI8Qm9vbGVhbj4oKTtcclxuXHJcbiAgZHJvcGRvd25PcGVuID0gZmFsc2U7XHJcbiAgaXRlbXM6IGFueTtcclxuICBzZWxlY3RlZENvdW50OiBudW1iZXIgPSAwO1xyXG4gIHNlbGVjdEFsbDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIGV4dHJhOiBhbnk7XHJcbiAgdW5jaGVja0FsbFN0YXR1czogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIGRyb3Bkb3duQnV0dG9uVGV4dCA6IHN0cmluZyA9ICcnO1xyXG5cclxuICBjb25zdHJ1Y3Rvcigpe31cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxyXG4gIG9uRG9jdW1lbnRDbGljayhldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50OyAgICBcclxuICAgIGlmICghdGFyZ2V0Lm5leHRFbGVtZW50U2libGluZz8uY2xhc3NMaXN0LmNvbnRhaW5zKCdzaG93JykpIHtcclxuICAgICAgdGhpcy5kcm9wZG93bk9wZW4gPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCl7XHJcbiAgIHRoaXMuaXRlbXMgPSB0aGlzLmhlYWRpbmdzO1xyXG4gICB0aGlzLmV4dHJhID0gdGhpcy5leHRyYXM7XHJcbiAgIHRoaXMudW5jaGVja0FsbFN0YXR1cyA9IHRoaXMuZXh0cmEudW5jaGVja0FsbFN0YXR1cztcclxuICAgdGhpcy5kcm9wZG93bkJ1dHRvblRleHQgPSB0aGlzLmV4dHJhLmRyb3Bkb3duQnV0dG9uVGV4dCA/IHRoaXMuZXh0cmEuZHJvcGRvd25CdXR0b25UZXh0IDogJ1RhYmxlIENvbHVtbnMnO1xyXG4gICB0aGlzLmNvdW50T2ZTZWxlY3RlZENoZWNrYm94ZXMoKTtcclxuICAgdGhpcy5pdGVyYXRlRm9yU2VsZWN0QWxsQ2hlY2tlZCgpO1xyXG4gICB0aGlzLml0ZXJhdGVGb3JTZWxlY3RBbGxVbkNoZWNrZWQoKTtcclxuICB9XHJcblxyXG4gIGl0ZXJhdGVGb3JTZWxlY3RBbGxDaGVja2VkKCl7XHJcbiAgICB0aGlzLnNlbGVjdEFsbCA9IE9iamVjdC52YWx1ZXModGhpcy5pdGVtcykuZXZlcnkoKGl0ZW06YW55KSA9PiBpdGVtLmNoZWNrZWQgPT09IHRydWUpXHJcbiAgfVxyXG5cclxuICBpdGVyYXRlRm9yU2VsZWN0QWxsVW5DaGVja2VkKCl7XHJcbiAgICB0aGlzLnVuY2hlY2tBbGxTdGF0dXMgPSBPYmplY3QudmFsdWVzKHRoaXMuaGVhZGluZ3MpLmV2ZXJ5KChpdGVtOmFueSkgPT4gaXRlbS5jaGVja2VkID09PSBmYWxzZSlcclxuICAgIGlmKHRoaXMudW5jaGVja0FsbFN0YXR1cyA9PT0gdHJ1ZSl7XHJcbiAgICAgIHRoaXMub25VbnNlbGVjdEFsbC5lbWl0KHRydWUpO1xyXG4gICAgfWVsc2V7XHJcbiAgICAgIHRoaXMub25VbnNlbGVjdEFsbC5lbWl0KGZhbHNlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNvdW50T2ZTZWxlY3RlZENoZWNrYm94ZXMoKXtcclxuICAgIHRoaXMuc2VsZWN0ZWRDb3VudCA9IDA7XHJcbiAgICB0aGlzLml0ZW1zLmZvckVhY2goKGVsZW1lbnQ6IGFueSkgPT4ge1xyXG4gICAgICBlbGVtZW50LmNoZWNrZWQgPT09IHRydWUgPyB0aGlzLnNlbGVjdGVkQ291bnQrKyA6IG51bGw7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIHRvZ2dsZURyb3Bkb3duKCk6IHZvaWQge1xyXG4gICAgdGhpcy5kcm9wZG93bk9wZW4gPSAhdGhpcy5kcm9wZG93bk9wZW47XHJcbiAgfVxyXG5cclxuICBvblNlbGVjdEFsbChldmVudDogRXZlbnQpOiB2b2lkIHsgICBcclxuICAgIGNvbnN0IGNoZWNrYm94ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XHJcbiAgICBcclxuICAgIHRoaXMuaXRlbXMuZm9yRWFjaCgoaXRlbTphbnkpID0+IHtcclxuICAgICAgaXRlbS5jaGVja2VkID0gY2hlY2tib3guY2hlY2tlZDtcclxuICAgICAgdGhpcy5vbkNoZWNrQm94U3RhdHVzQ2hhbmdlZC5lbWl0KGl0ZW0pO1xyXG4gICAgfSk7XHJcblxyXG4gICAgdGhpcy5jb3VudE9mU2VsZWN0ZWRDaGVja2JveGVzKCk7XHJcbiAgICB0aGlzLml0ZXJhdGVGb3JTZWxlY3RBbGxDaGVja2VkKCk7XHJcbiAgICB0aGlzLml0ZXJhdGVGb3JTZWxlY3RBbGxVbkNoZWNrZWQoKTtcclxuICB9XHJcblxyXG4gIG9uSXRlbVNlbGVjdGVkKGl0ZW06IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5jb3VudE9mU2VsZWN0ZWRDaGVja2JveGVzKCk7XHJcbiAgICB0aGlzLm9uQ2hlY2tCb3hTdGF0dXNDaGFuZ2VkLmVtaXQoaXRlbSk7XHJcbiAgICB0aGlzLml0ZXJhdGVGb3JTZWxlY3RBbGxDaGVja2VkKCk7XHJcbiAgICB0aGlzLml0ZXJhdGVGb3JTZWxlY3RBbGxVbkNoZWNrZWQoKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImRyb3Bkb3duXCIgKGNsaWNrKT1cInRvZ2dsZURyb3Bkb3duKClcIiB0YWJpbmRleD1cIjBcIj5cclxuICAgIDxidXR0b24gY2xhc3M9XCJkcm9wZG93bi10b2dnbGVcIj5cclxuICAgICAgICB7eyBkcm9wZG93bkJ1dHRvblRleHQgfX0gPHNwYW4gY2xhc3M9XCJjb3VudC1iYWNrZ3JvdW5kLWNvbG9yXCI+e3sgc2VsZWN0ZWRDb3VudCB9fTwvc3Bhbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duLW1lbnVcIiBbY2xhc3Muc2hvd109XCJkcm9wZG93bk9wZW5cIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24taXRlbVwiPlxyXG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgY2xhc3M9XCJjaGVja2JveC1pbnB1dFwiIChjaGFuZ2UpPVwib25TZWxlY3RBbGwoJGV2ZW50KVwiIFsobmdNb2RlbCldPVwic2VsZWN0QWxsXCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2hlY2tib3gtbGFiZWxcIj5TZWxlY3QgQWxsPC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIiBjbGFzcz1cImRyb3Bkb3duLWl0ZW1cIj5cclxuICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIGNsYXNzPVwiY2hlY2tib3gtaW5wdXRcIiBbKG5nTW9kZWwpXT1cIml0ZW0uY2hlY2tlZFwiIChjaGFuZ2UpPVwib25JdGVtU2VsZWN0ZWQoaXRlbSlcIj5cclxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJjaGVja2JveC1sYWJlbFwiPnt7IGl0ZW0ubmFtZSB9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=