@one-paragon/angular-utilities 0.1.30 → 0.1.32-beta

package/esm2020/table-builder/components/gen-col-displayer/gen-col-displayer.component.mjs

@@ -1,45 +1,45 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { map } from 'rxjs/operators';
-import { orderViewableMetaData } from '../../classes/table-store';
-import * as i0 from "@angular/core";
-import * as i1 from "../../classes/table-store";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/material/button";
-import * as i4 from "@angular/material/tooltip";
-import * as i5 from "@angular/material/menu";
-import * as i6 from "@angular/material/icon";
-import * as i7 from "@angular/cdk/drag-drop";
-import * as i8 from "../../../utilities/directives/stop-propagation.directive";
-import * as i9 from "../../../utilities/pipes/space-case.pipes";
-export class GenColDisplayerComponent {
-    constructor(tableState) {
-        this.tableState = tableState;
-        this.columns$ = this.tableState.state$.pipe(map(state => orderViewableMetaData(state)
-            .map(md => ({
-            key: md.key,
-            displayName: md.displayName,
-            isVisible: !state.hiddenKeys.includes(md.key)
-        }))));
-    }
-    reset(displayCols) {
-        displayCols.forEach(c => c.isVisible = true);
-        this.emit(displayCols);
-    }
-    drop(event) {
-        this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
-    }
-    unset(displayCols) {
-        displayCols.forEach(c => c.isVisible = false);
-        this.emit(displayCols);
-    }
-    emit(displayCols) {
-        this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
-    }
-}
-GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: i1.TableStore }], target: i0.ɵɵFactoryTarget.Component });
-GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\r\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\r\n        *ngFor=\"let col of displayCols\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\r\n            <mat-icon color=\"primary\">check_box</mat-icon>\r\n          </button>\r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n          <ng-template #hidden>\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </mat-menu>\r\n</ng-container>", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\r\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\r\n        *ngFor=\"let col of displayCols\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\r\n            <mat-icon color=\"primary\">check_box</mat-icon>\r\n          </button>\r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n          <ng-template #hidden>\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </mat-menu>\r\n</ng-container>", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.TableStore }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuLWNvbC1kaXNwbGF5ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci11dGlsaXRpZXMvc3JjL3RhYmxlLWJ1aWxkZXIvY29tcG9uZW50cy9nZW4tY29sLWRpc3BsYXllci9nZW4tY29sLWRpc3BsYXllci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXV0aWxpdGllcy9zcmMvdGFibGUtYnVpbGRlci9jb21wb25lbnRzL2dlbi1jb2wtZGlzcGxheWVyL2dlbi1jb2wtZGlzcGxheWVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHbEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxxQkFBcUIsRUFBYyxNQUFNLDJCQUEyQixDQUFDOzs7Ozs7Ozs7OztBQVM5RSxNQUFNLE9BQU8sd0JBQXdCO0lBRW5DLFlBQXFCLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDekMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ3pDLEdBQUcsQ0FBRSxLQUFLLENBQUMsRUFBRSxDQUNYLHFCQUFxQixDQUFDLEtBQUssQ0FBQzthQUN6QixHQUFHLENBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ1gsR0FBRyxFQUFFLEVBQUUsQ0FBQyxHQUFHO1lBQ1gsV0FBVyxFQUFFLEVBQUUsQ0FBQyxXQUFXO1lBQzNCLFNBQVMsRUFBRSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUM7U0FDOUMsQ0FBQyxDQUFDLENBQ04sQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELEtBQUssQ0FBQyxXQUF5QjtRQUM3QixXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFDRCxJQUFJLENBQUMsS0FBNEI7UUFDL0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsQ0FBQyxFQUFDLFFBQVEsRUFBQyxLQUFLLENBQUMsWUFBWSxFQUFDLFFBQVEsRUFBQyxLQUFLLENBQUMsYUFBYSxFQUFDLENBQUMsQ0FBQTtJQUNqRyxDQUFDO0lBQ0QsS0FBSyxDQUFDLFdBQXlCO1FBQzdCLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELElBQUksQ0FBQyxXQUF5QjtRQUM1QixJQUFJLENBQUMsVUFBVSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxHQUFHLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQyxTQUFTLEVBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNoRyxDQUFDOztxSEE3QlUsd0JBQXdCO3lHQUF4Qix3QkFBd0Isd0RDYnJDLG1pRUFtRGU7MkZEdENGLHdCQUF3QjtrQkFOcEMsU0FBUzsrQkFDRSxrQkFBa0IsbUJBR1gsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3l9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEaXNwbGF5Q29sIH0gZnJvbSAnLi4vLi4vY2xhc3Nlcy9kaXNwbGF5LWNvbCc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5pbXBvcnQgeyBvcmRlclZpZXdhYmxlTWV0YURhdGEsIFRhYmxlU3RvcmUgfSBmcm9tICcuLi8uLi9jbGFzc2VzL3RhYmxlLXN0b3JlJztcclxuaW1wb3J0IHtDZGtEcmFnRHJvcH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2RyYWctZHJvcCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3RiLWNvbC1kaXNwbGF5ZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9nZW4tY29sLWRpc3BsYXllci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZ2VuLWNvbC1kaXNwbGF5ZXIuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgR2VuQ29sRGlzcGxheWVyQ29tcG9uZW50IHtcclxuICBjb2x1bW5zJDogT2JzZXJ2YWJsZTwgRGlzcGxheUNvbFtdPjtcclxuICBjb25zdHJ1Y3RvciggcHJpdmF0ZSB0YWJsZVN0YXRlOiBUYWJsZVN0b3JlICkge1xyXG4gICAgdGhpcy5jb2x1bW5zJCA9IHRoaXMudGFibGVTdGF0ZS5zdGF0ZSQucGlwZShcclxuICAgICAgbWFwKCBzdGF0ZSA9PlxyXG4gICAgICAgIG9yZGVyVmlld2FibGVNZXRhRGF0YShzdGF0ZSlcclxuICAgICAgICAgIC5tYXAoIG1kID0+ICh7XHJcbiAgICAgICAgICAgIGtleTogbWQua2V5LFxyXG4gICAgICAgICAgICBkaXNwbGF5TmFtZTogbWQuZGlzcGxheU5hbWUsXHJcbiAgICAgICAgICAgIGlzVmlzaWJsZTogIXN0YXRlLmhpZGRlbktleXMuaW5jbHVkZXMobWQua2V5KVxyXG4gICAgICAgICAgfSkpXHJcbiAgICAgICksXHJcbiAgICApO1xyXG4gIH1cclxuXHJcbiAgcmVzZXQoZGlzcGxheUNvbHM6IERpc3BsYXlDb2xbXSkge1xyXG4gICAgZGlzcGxheUNvbHMuZm9yRWFjaChjID0+IGMuaXNWaXNpYmxlID0gdHJ1ZSk7XHJcbiAgICB0aGlzLmVtaXQoZGlzcGxheUNvbHMpO1xyXG4gIH1cclxuICBkcm9wKGV2ZW50OiBDZGtEcmFnRHJvcDxzdHJpbmdbXT4pIHtcclxuICAgIHRoaXMudGFibGVTdGF0ZS5zZXRVc2VyRGVmaW5lZE9yZGVyKHtuZXdPcmRlcjpldmVudC5jdXJyZW50SW5kZXgsb2xkT3JkZXI6ZXZlbnQucHJldmlvdXNJbmRleH0pXHJcbiAgfVxyXG4gIHVuc2V0KGRpc3BsYXlDb2xzOiBEaXNwbGF5Q29sW10pIHtcclxuICAgIGRpc3BsYXlDb2xzLmZvckVhY2goYyA9PiBjLmlzVmlzaWJsZSA9IGZhbHNlKTtcclxuICAgIHRoaXMuZW1pdChkaXNwbGF5Q29scyk7XHJcbiAgfVxyXG5cclxuICBlbWl0KGRpc3BsYXlDb2xzOiBEaXNwbGF5Q29sW10pIHtcclxuICAgIHRoaXMudGFibGVTdGF0ZS5zZXRIaWRkZW5Db2x1bW5zKGRpc3BsYXlDb2xzLm1hcCggYyA9PiAoe2tleTogYy5rZXksIHZpc2libGU6IGMuaXNWaXNpYmxlfSkpKTtcclxuICB9XHJcbn1cclxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbHVtbnMkIHwgYXN5bmMgYXMgZGlzcGxheUNvbHNcIj5cclxuICA8c3BhbiBtYXRUb29sdGlwPVwiU2hvdy9oaWRlIGNvbHVtbnNcIj5cclxuICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIFttYXRNZW51VHJpZ2dlckZvcl09XCJtZW51XCI+XHJcbiAgICAgIDxtYXQtaWNvbiBjb2xvcj1cInByaW1hcnlcIj52aXNpYmlsaXR5X29mZjwvbWF0LWljb24+XHJcbiAgICA8L2J1dHRvbj5cclxuICA8L3NwYW4+XHJcbiAgPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiIGNsYXNzPVwibXktbWF0LW1lbnVcIj5cclxuXHJcbiAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0+XHJcbiAgICAgIDxzcGFuIG1hdFRvb2x0aXA9XCJDbG9zZVwiPlxyXG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJmaWx0ZXItYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uPlxyXG4gICAgICAgICAgPG1hdC1pY29uPmNsb3NlPC9tYXQtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9zcGFuPlxyXG4gICAgPC9idXR0b24+XHJcblxyXG4gICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtIHN0b3AtcHJvcGFnYXRpb24+XHJcbiAgICAgIDxzcGFuIG1hdFRvb2x0aXA9XCJTaG93IGFsbCBjb2x1bW5zXCI+XHJcbiAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cInJlc2V0KGRpc3BsYXlDb2xzKVwiPlxyXG4gICAgICAgICAgPG1hdC1pY29uIGNvbG9yPVwicHJpbWFyeVwiPmRvbmVfYWxsPC9tYXQtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9zcGFuPlxyXG5cclxuICAgICAgPHNwYW4gbWF0VG9vbHRpcD1cIkhpZGUgYWxsIGNvbHVtbnNcIj5cclxuICAgICAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiAoY2xpY2spPVwidW5zZXQoZGlzcGxheUNvbHMpXCI+XHJcbiAgICAgICAgICA8bWF0LWljb24gY29sb3I9XCJwcmltYXJ5XCI+Y2FuY2VsPC9tYXQtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9zcGFuPlxyXG4gICAgPC9idXR0b24+XHJcblxyXG4gICAgPGRpdiBjZGtEcm9wTGlzdCAoY2RrRHJvcExpc3REcm9wcGVkKT1cImRyb3AoJGV2ZW50KVwiIHN0b3AtcHJvcGFnYXRpb24gY2RrRHJvcExpc3RMb2NrQXhpcz0neSc+XHJcbiAgICAgIDxidXR0b24gW2NsYXNzLmlzSGlkZGVuXT1cIiFjb2wuaXNWaXNpYmxlXCIgc3RvcC1wcm9wYWdhdGlvbiBtYXQtbWVudS1pdGVtIGNka0RyYWcgW2Nka0RyYWdEYXRhXT1cImNvbFwiXHJcbiAgICAgICAgKm5nRm9yPVwibGV0IGNvbCBvZiBkaXNwbGF5Q29sc1wiPlxyXG4gICAgICAgIDxkaXYgKGNsaWNrKT1cImNvbC5pc1Zpc2libGUgPSAhY29sLmlzVmlzaWJsZTsgZW1pdChkaXNwbGF5Q29scylcIiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7XCI+XHJcbiAgICAgICAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBtYXRUb29sdGlwPVwiSGlkZSBDb2x1bW5cIiBjbGFzcz1cInNob3ctaGlkZVwiICpuZ0lmPVwiY29sLmlzVmlzaWJsZTsgZWxzZSBoaWRkZW5cIj5cclxuICAgICAgICAgICAgPG1hdC1pY29uIGNvbG9yPVwicHJpbWFyeVwiPmNoZWNrX2JveDwvbWF0LWljb24+XHJcbiAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICAgIDxwIGNsYXNzPVwibGFiZWxcIj5cclxuICAgICAgICAgICAge3tjb2wuZGlzcGxheU5hbWUgfHwgKGNvbC5rZXkgfCBzcGFjZUNhc2UpIH19XHJcbiAgICAgICAgICA8L3A+XHJcblxyXG4gICAgICAgICAgPG5nLXRlbXBsYXRlICNoaWRkZW4+XHJcbiAgICAgICAgICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIG1hdFRvb2x0aXA9XCJTaG93IENvbHVtblwiIGNsYXNzPVwic2hvdy1oaWRlXCI+XHJcbiAgICAgICAgICAgICAgPG1hdC1pY29uPmluZGV0ZXJtaW5hdGVfY2hlY2tfYm94PC9tYXQtaWNvbj5cclxuICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L21hdC1tZW51PlxyXG48L25nLWNvbnRhaW5lcj4iXX0=
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { orderViewableMetaData } from '../../classes/table-store';
+import * as i0 from "@angular/core";
+import * as i1 from "../../classes/table-store";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/tooltip";
+import * as i5 from "@angular/material/menu";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/cdk/drag-drop";
+import * as i8 from "../../../utilities/directives/stop-propagation.directive";
+import * as i9 from "../../../utilities/pipes/space-case.pipes";
+export class GenColDisplayerComponent {
+    constructor(tableState) {
+        this.tableState = tableState;
+        this.columns$ = this.tableState.state$.pipe(map(state => orderViewableMetaData(state)
+            .map(md => ({
+            key: md.key,
+            displayName: md.displayName,
+            isVisible: !state.hiddenKeys.includes(md.key)
+        }))));
+    }
+    reset(displayCols) {
+        displayCols.forEach(c => c.isVisible = true);
+        this.emit(displayCols);
+    }
+    drop(event) {
+        this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
+    }
+    unset(displayCols) {
+        displayCols.forEach(c => c.isVisible = false);
+        this.emit(displayCols);
+    }
+    emit(displayCols) {
+        this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
+    }
+}
+GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: i1.TableStore }], target: i0.ɵɵFactoryTarget.Component });
+GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <button mat-menu-item stop-propagation>\n      <span matTooltip=\"Show all columns\">\n        <button mat-icon-button (click)=\"reset(displayCols)\">\n          <mat-icon color=\"primary\">done_all</mat-icon>\n        </button>\n      </span>\n\n      <span matTooltip=\"Hide all columns\">\n        <button mat-icon-button (click)=\"unset(displayCols)\">\n          <mat-icon color=\"primary\">cancel</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n        *ngFor=\"let col of displayCols\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n          <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n            <mat-icon color=\"primary\">check_box</mat-icon>\n          </button>\n          <p class=\"label\">\n            {{col.displayName || (col.key | spaceCase) }}\n          </p>\n\n          <ng-template #hidden>\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n              <mat-icon>indeterminate_check_box</mat-icon>\n            </button>\n          </ng-template>\n\n        </div>\n      </button>\n    </div>\n  </mat-menu>\n</ng-container>", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <button mat-menu-item stop-propagation>\n      <span matTooltip=\"Show all columns\">\n        <button mat-icon-button (click)=\"reset(displayCols)\">\n          <mat-icon color=\"primary\">done_all</mat-icon>\n        </button>\n      </span>\n\n      <span matTooltip=\"Hide all columns\">\n        <button mat-icon-button (click)=\"unset(displayCols)\">\n          <mat-icon color=\"primary\">cancel</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n        *ngFor=\"let col of displayCols\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n          <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n            <mat-icon color=\"primary\">check_box</mat-icon>\n          </button>\n          <p class=\"label\">\n            {{col.displayName || (col.key | spaceCase) }}\n          </p>\n\n          <ng-template #hidden>\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n              <mat-icon>indeterminate_check_box</mat-icon>\n            </button>\n          </ng-template>\n\n        </div>\n      </button>\n    </div>\n  </mat-menu>\n</ng-container>", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TableStore }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuLWNvbC1kaXNwbGF5ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci11dGlsaXRpZXMvc3JjL3RhYmxlLWJ1aWxkZXIvY29tcG9uZW50cy9nZW4tY29sLWRpc3BsYXllci9nZW4tY29sLWRpc3BsYXllci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXV0aWxpdGllcy9zcmMvdGFibGUtYnVpbGRlci9jb21wb25lbnRzL2dlbi1jb2wtZGlzcGxheWVyL2dlbi1jb2wtZGlzcGxheWVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHbEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxxQkFBcUIsRUFBYyxNQUFNLDJCQUEyQixDQUFDOzs7Ozs7Ozs7OztBQVM5RSxNQUFNLE9BQU8sd0JBQXdCO0lBRW5DLFlBQXFCLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDekMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ3pDLEdBQUcsQ0FBRSxLQUFLLENBQUMsRUFBRSxDQUNYLHFCQUFxQixDQUFDLEtBQUssQ0FBQzthQUN6QixHQUFHLENBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ1gsR0FBRyxFQUFFLEVBQUUsQ0FBQyxHQUFHO1lBQ1gsV0FBVyxFQUFFLEVBQUUsQ0FBQyxXQUFXO1lBQzNCLFNBQVMsRUFBRSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUM7U0FDOUMsQ0FBQyxDQUFDLENBQ04sQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELEtBQUssQ0FBQyxXQUF5QjtRQUM3QixXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFDRCxJQUFJLENBQUMsS0FBNEI7UUFDL0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsQ0FBQyxFQUFDLFFBQVEsRUFBQyxLQUFLLENBQUMsWUFBWSxFQUFDLFFBQVEsRUFBQyxLQUFLLENBQUMsYUFBYSxFQUFDLENBQUMsQ0FBQTtJQUNqRyxDQUFDO0lBQ0QsS0FBSyxDQUFDLFdBQXlCO1FBQzdCLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELElBQUksQ0FBQyxXQUF5QjtRQUM1QixJQUFJLENBQUMsVUFBVSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxHQUFHLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQyxTQUFTLEVBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNoRyxDQUFDOztxSEE3QlUsd0JBQXdCO3lHQUF4Qix3QkFBd0Isd0RDYnJDLDY3REFtRGU7MkZEdENGLHdCQUF3QjtrQkFOcEMsU0FBUzsrQkFDRSxrQkFBa0IsbUJBR1gsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3l9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGlzcGxheUNvbCB9IGZyb20gJy4uLy4uL2NsYXNzZXMvZGlzcGxheS1jb2wnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgb3JkZXJWaWV3YWJsZU1ldGFEYXRhLCBUYWJsZVN0b3JlIH0gZnJvbSAnLi4vLi4vY2xhc3Nlcy90YWJsZS1zdG9yZSc7XG5pbXBvcnQge0Nka0RyYWdEcm9wfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGItY29sLWRpc3BsYXllcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9nZW4tY29sLWRpc3BsYXllci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2dlbi1jb2wtZGlzcGxheWVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEdlbkNvbERpc3BsYXllckNvbXBvbmVudCB7XG4gIGNvbHVtbnMkOiBPYnNlcnZhYmxlPCBEaXNwbGF5Q29sW10+O1xuICBjb25zdHJ1Y3RvciggcHJpdmF0ZSB0YWJsZVN0YXRlOiBUYWJsZVN0b3JlICkge1xuICAgIHRoaXMuY29sdW1ucyQgPSB0aGlzLnRhYmxlU3RhdGUuc3RhdGUkLnBpcGUoXG4gICAgICBtYXAoIHN0YXRlID0+XG4gICAgICAgIG9yZGVyVmlld2FibGVNZXRhRGF0YShzdGF0ZSlcbiAgICAgICAgICAubWFwKCBtZCA9PiAoe1xuICAgICAgICAgICAga2V5OiBtZC5rZXksXG4gICAgICAgICAgICBkaXNwbGF5TmFtZTogbWQuZGlzcGxheU5hbWUsXG4gICAgICAgICAgICBpc1Zpc2libGU6ICFzdGF0ZS5oaWRkZW5LZXlzLmluY2x1ZGVzKG1kLmtleSlcbiAgICAgICAgICB9KSlcbiAgICAgICksXG4gICAgKTtcbiAgfVxuXG4gIHJlc2V0KGRpc3BsYXlDb2xzOiBEaXNwbGF5Q29sW10pIHtcbiAgICBkaXNwbGF5Q29scy5mb3JFYWNoKGMgPT4gYy5pc1Zpc2libGUgPSB0cnVlKTtcbiAgICB0aGlzLmVtaXQoZGlzcGxheUNvbHMpO1xuICB9XG4gIGRyb3AoZXZlbnQ6IENka0RyYWdEcm9wPHN0cmluZ1tdPikge1xuICAgIHRoaXMudGFibGVTdGF0ZS5zZXRVc2VyRGVmaW5lZE9yZGVyKHtuZXdPcmRlcjpldmVudC5jdXJyZW50SW5kZXgsb2xkT3JkZXI6ZXZlbnQucHJldmlvdXNJbmRleH0pXG4gIH1cbiAgdW5zZXQoZGlzcGxheUNvbHM6IERpc3BsYXlDb2xbXSkge1xuICAgIGRpc3BsYXlDb2xzLmZvckVhY2goYyA9PiBjLmlzVmlzaWJsZSA9IGZhbHNlKTtcbiAgICB0aGlzLmVtaXQoZGlzcGxheUNvbHMpO1xuICB9XG5cbiAgZW1pdChkaXNwbGF5Q29sczogRGlzcGxheUNvbFtdKSB7XG4gICAgdGhpcy50YWJsZVN0YXRlLnNldEhpZGRlbkNvbHVtbnMoZGlzcGxheUNvbHMubWFwKCBjID0+ICh7a2V5OiBjLmtleSwgdmlzaWJsZTogYy5pc1Zpc2libGV9KSkpO1xuICB9XG59XG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1ucyQgfCBhc3luYyBhcyBkaXNwbGF5Q29sc1wiPlxuICA8c3BhbiBtYXRUb29sdGlwPVwiU2hvdy9oaWRlIGNvbHVtbnNcIj5cbiAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBbbWF0TWVudVRyaWdnZXJGb3JdPVwibWVudVwiPlxuICAgICAgPG1hdC1pY29uIGNvbG9yPVwicHJpbWFyeVwiPnZpc2liaWxpdHlfb2ZmPC9tYXQtaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9zcGFuPlxuICA8bWF0LW1lbnUgI21lbnU9XCJtYXRNZW51XCIgY2xhc3M9XCJteS1tYXQtbWVudVwiPlxuXG4gICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtPlxuICAgICAgPHNwYW4gbWF0VG9vbHRpcD1cIkNsb3NlXCI+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJmaWx0ZXItYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uPlxuICAgICAgICAgIDxtYXQtaWNvbj5jbG9zZTwvbWF0LWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuXG4gICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtIHN0b3AtcHJvcGFnYXRpb24+XG4gICAgICA8c3BhbiBtYXRUb29sdGlwPVwiU2hvdyBhbGwgY29sdW1uc1wiPlxuICAgICAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiAoY2xpY2spPVwicmVzZXQoZGlzcGxheUNvbHMpXCI+XG4gICAgICAgICAgPG1hdC1pY29uIGNvbG9yPVwicHJpbWFyeVwiPmRvbmVfYWxsPC9tYXQtaWNvbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L3NwYW4+XG5cbiAgICAgIDxzcGFuIG1hdFRvb2x0aXA9XCJIaWRlIGFsbCBjb2x1bW5zXCI+XG4gICAgICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJ1bnNldChkaXNwbGF5Q29scylcIj5cbiAgICAgICAgICA8bWF0LWljb24gY29sb3I9XCJwcmltYXJ5XCI+Y2FuY2VsPC9tYXQtaWNvbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L3NwYW4+XG4gICAgPC9idXR0b24+XG5cbiAgICA8ZGl2IGNka0Ryb3BMaXN0IChjZGtEcm9wTGlzdERyb3BwZWQpPVwiZHJvcCgkZXZlbnQpXCIgc3RvcC1wcm9wYWdhdGlvbiBjZGtEcm9wTGlzdExvY2tBeGlzPSd5Jz5cbiAgICAgIDxidXR0b24gW2NsYXNzLmlzSGlkZGVuXT1cIiFjb2wuaXNWaXNpYmxlXCIgc3RvcC1wcm9wYWdhdGlvbiBtYXQtbWVudS1pdGVtIGNka0RyYWcgW2Nka0RyYWdEYXRhXT1cImNvbFwiXG4gICAgICAgICpuZ0Zvcj1cImxldCBjb2wgb2YgZGlzcGxheUNvbHNcIj5cbiAgICAgICAgPGRpdiAoY2xpY2spPVwiY29sLmlzVmlzaWJsZSA9ICFjb2wuaXNWaXNpYmxlOyBlbWl0KGRpc3BsYXlDb2xzKVwiIHN0eWxlPVwiZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjtcIj5cbiAgICAgICAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBtYXRUb29sdGlwPVwiSGlkZSBDb2x1bW5cIiBjbGFzcz1cInNob3ctaGlkZVwiICpuZ0lmPVwiY29sLmlzVmlzaWJsZTsgZWxzZSBoaWRkZW5cIj5cbiAgICAgICAgICAgIDxtYXQtaWNvbiBjb2xvcj1cInByaW1hcnlcIj5jaGVja19ib3g8L21hdC1pY29uPlxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgIDxwIGNsYXNzPVwibGFiZWxcIj5cbiAgICAgICAgICAgIHt7Y29sLmRpc3BsYXlOYW1lIHx8IChjb2wua2V5IHwgc3BhY2VDYXNlKSB9fVxuICAgICAgICAgIDwvcD5cblxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjaGlkZGVuPlxuICAgICAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gbWF0VG9vbHRpcD1cIlNob3cgQ29sdW1uXCIgY2xhc3M9XCJzaG93LWhpZGVcIj5cbiAgICAgICAgICAgICAgPG1hdC1pY29uPmluZGV0ZXJtaW5hdGVfY2hlY2tfYm94PC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgPC9tYXQtbWVudT5cbjwvbmctY29udGFpbmVyPiJdfQ==