UNPKG

@ux-aspects/ux-aspects

Version:

Open source user interface framework for building modern, responsive, mobile big data applications

45 lines 18.8 kB
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core'; import { HierarchyBarService } from '../hierarchy-bar.service'; import * as i0 from "@angular/core"; import * as i1 from "../../../directives/accessibility/focus-indicator/focus-indicator.directive"; import * as i2 from "../../../directives/accessibility/focus-indicator/focus-indicator-origin/focus-indicator-origin.directive"; import * as i3 from "@angular/common"; import * as i4 from "../../icon/icon.component"; import * as i5 from "../../popover/popover.directive"; export class HierarchyBarNodeComponent { constructor() { this.hierarchyBar = inject(HierarchyBarService); this._elementRef = inject(ElementRef); /** Optionally define the horizontal offset */ this.offset = 0; /** Emit when the node is selected */ this.selected = new EventEmitter(); /** Determine if this node should be hidden due to overflow */ this.visible = true; } /** Get the width of the element */ get width() { return this._elementRef.nativeElement.offsetWidth; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: HierarchyBarNodeComponent, selector: "ux-hierarchy-bar-node", inputs: { node: "node", popoverTemplate: "popoverTemplate", mode: "mode", readonly: "readonly", offset: "offset" }, outputs: { selected: "selected" }, host: { properties: { "style.visibility": "visible ? \"visible\" : \"hidden\"" } }, ngImport: i0, template: "<div class=\"hierarchy-bar-node\"\n [class.hierarchy-bar-node-readonly]=\"readonly\"\n [class.hierarchy-bar-node-child-indicator]=\"node.children\"\n [style.transform]=\"offset ? 'translateX(' + offset + 'px)' : null\">\n\n @if (mode === 'dropdown') {\n <button type=\"button\"\n uxFocusIndicator\n uxFocusIndicatorOrigin\n #popover=\"ux-popover\"\n aria-label=\"Show children\"\n class=\"hierarchy-bar-node-content\"\n [disabled]=\"readonly\"\n [uxPopover]=\"popoverTemplate\"\n [popoverContext]=\"{ node: node, popover: popover }\"\n placement=\"bottom\"\n popoverClass=\"hierarchy-bar-popover\"\n [showTriggers]=\"node.children ? hierarchyBar.popoverShowTriggers : []\"\n [hideTriggers]=\"node.children ? hierarchyBar.popoverHideTriggers : []\"\n tabindex=\"0\"\n [attr.aria-label]=\"node.title\">\n <!-- Show a custom icon if specified -->\n @if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container [ngTemplateOutlet]=\"hierarchyBar.icon\" [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\"></ng-container>\n </div>\n }\n <!-- Show an icon if specified -->\n @if (node.icon && !hierarchyBar.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n }\n <!-- Show the name of the current node -->\n <span class=\"hierarchy-bar-node-title\">{{ node.title }}</span>\n <!-- Show a dropdown arrow if there are children -->\n <div [class.readonly-arrow]=\"readonly\" class=\"hierarchy-bar-node-arrow-icon-dropdown\">\n @if (node.children) {\n <ux-icon name=\"next\"\n class=\"hierarchy-bar-node-arrow-icon\">\n </ux-icon>\n }\n </div>\n </button>\n } @else {\n <button type=\"button\"\n uxFocusIndicator\n class=\"hierarchy-bar-node-content\"\n [disabled]=\"readonly\"\n [attr.aria-label]=\"node.title\"\n (click)=\"selected.emit(node)\">\n <!-- Show a custom icon if specified -->\n @if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container [ngTemplateOutlet]=\"hierarchyBar.icon\" [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\"></ng-container>\n </div>\n }\n <!-- Show an icon if specified -->\n @if (node.icon && !hierarchyBar.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n }\n <!-- Show the name of the current node -->\n <span class=\"hierarchy-bar-node-title\">{{ node.title }}</span>\n </button>\n <!-- Show a dropdown arrow if there are children -->\n @if (node.children) {\n <button type=\"button\"\n uxFocusIndicator\n uxFocusIndicatorOrigin\n #popover=\"ux-popover\"\n aria-label=\"Show children\"\n role=\"button\"\n class=\"hierarchy-bar-node-arrow\"\n [disabled]=\"readonly\"\n [uxPopover]=\"popoverTemplate\"\n [popoverContext]=\"{ node: node, popover: popover }\"\n placement=\"bottom\"\n popoverClass=\"hierarchy-bar-popover\"\n [showTriggers]=\"hierarchyBar.popoverShowTriggers\"\n [hideTriggers]=\"hierarchyBar.popoverHideTriggers\"\n tabindex=\"0\">\n <ux-icon name=\"next\"\n class=\"hierarchy-bar-node-arrow-icon\">\n </ux-icon>\n </button>\n }\n }\n\n</div>\n\n\n", dependencies: [{ kind: "directive", type: i1.FocusIndicatorDirective, selector: "[uxFocusIndicator]", inputs: ["checkChildren", "mouseFocusIndicator", "touchFocusIndicator", "keyboardFocusIndicator", "programmaticFocusIndicator"], outputs: ["indicator"], exportAs: ["ux-focus-indicator"] }, { kind: "directive", type: i2.FocusIndicatorOriginDirective, selector: "[uxFocusIndicatorOrigin]" }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[uxPopover]", inputs: ["uxPopover", "popoverTitle", "popoverDisabled", "popoverClass", "popoverRole", "popoverContext", "popoverDelay", "showTriggers", "hideTriggers"], exportAs: ["ux-popover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarNodeComponent, decorators: [{ type: Component, args: [{ selector: 'ux-hierarchy-bar-node', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.visibility]': 'visible ? "visible" : "hidden"', }, template: "<div class=\"hierarchy-bar-node\"\n [class.hierarchy-bar-node-readonly]=\"readonly\"\n [class.hierarchy-bar-node-child-indicator]=\"node.children\"\n [style.transform]=\"offset ? 'translateX(' + offset + 'px)' : null\">\n\n @if (mode === 'dropdown') {\n <button type=\"button\"\n uxFocusIndicator\n uxFocusIndicatorOrigin\n #popover=\"ux-popover\"\n aria-label=\"Show children\"\n class=\"hierarchy-bar-node-content\"\n [disabled]=\"readonly\"\n [uxPopover]=\"popoverTemplate\"\n [popoverContext]=\"{ node: node, popover: popover }\"\n placement=\"bottom\"\n popoverClass=\"hierarchy-bar-popover\"\n [showTriggers]=\"node.children ? hierarchyBar.popoverShowTriggers : []\"\n [hideTriggers]=\"node.children ? hierarchyBar.popoverHideTriggers : []\"\n tabindex=\"0\"\n [attr.aria-label]=\"node.title\">\n <!-- Show a custom icon if specified -->\n @if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container [ngTemplateOutlet]=\"hierarchyBar.icon\" [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\"></ng-container>\n </div>\n }\n <!-- Show an icon if specified -->\n @if (node.icon && !hierarchyBar.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n }\n <!-- Show the name of the current node -->\n <span class=\"hierarchy-bar-node-title\">{{ node.title }}</span>\n <!-- Show a dropdown arrow if there are children -->\n <div [class.readonly-arrow]=\"readonly\" class=\"hierarchy-bar-node-arrow-icon-dropdown\">\n @if (node.children) {\n <ux-icon name=\"next\"\n class=\"hierarchy-bar-node-arrow-icon\">\n </ux-icon>\n }\n </div>\n </button>\n } @else {\n <button type=\"button\"\n uxFocusIndicator\n class=\"hierarchy-bar-node-content\"\n [disabled]=\"readonly\"\n [attr.aria-label]=\"node.title\"\n (click)=\"selected.emit(node)\">\n <!-- Show a custom icon if specified -->\n @if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container [ngTemplateOutlet]=\"hierarchyBar.icon\" [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\"></ng-container>\n </div>\n }\n <!-- Show an icon if specified -->\n @if (node.icon && !hierarchyBar.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n }\n <!-- Show the name of the current node -->\n <span class=\"hierarchy-bar-node-title\">{{ node.title }}</span>\n </button>\n <!-- Show a dropdown arrow if there are children -->\n @if (node.children) {\n <button type=\"button\"\n uxFocusIndicator\n uxFocusIndicatorOrigin\n #popover=\"ux-popover\"\n aria-label=\"Show children\"\n role=\"button\"\n class=\"hierarchy-bar-node-arrow\"\n [disabled]=\"readonly\"\n [uxPopover]=\"popoverTemplate\"\n [popoverContext]=\"{ node: node, popover: popover }\"\n placement=\"bottom\"\n popoverClass=\"hierarchy-bar-popover\"\n [showTriggers]=\"hierarchyBar.popoverShowTriggers\"\n [hideTriggers]=\"hierarchyBar.popoverHideTriggers\"\n tabindex=\"0\">\n <ux-icon name=\"next\"\n class=\"hierarchy-bar-node-arrow-icon\">\n </ux-icon>\n </button>\n }\n }\n\n</div>\n\n\n" }] }], propDecorators: { node: [{ type: Input }], popoverTemplate: [{ type: Input }], mode: [{ type: Input }], readonly: [{ type: Input }], offset: [{ type: Input }], selected: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGllcmFyY2h5LWJhci1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2hpZXJhcmNoeS1iYXIvaGllcmFyY2h5LWJhci1ub2RlL2hpZXJhcmNoeS1iYXItbm9kZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9oaWVyYXJjaHktYmFyL2hpZXJhcmNoeS1iYXItbm9kZS9oaWVyYXJjaHktYmFyLW5vZGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQ2pJLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7O0FBVy9ELE1BQU0sT0FBTyx5QkFBeUI7SUFSdEM7UUFTYSxpQkFBWSxHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1FBQ25DLGdCQUFXLEdBQUcsTUFBTSxDQUEwQixVQUFVLENBQUMsQ0FBQztRQWMzRSw4Q0FBOEM7UUFDckMsV0FBTSxHQUFXLENBQUMsQ0FBQztRQUU1QixxQ0FBcUM7UUFDM0IsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBRTFELDhEQUE4RDtRQUM5RCxZQUFPLEdBQVksSUFBSSxDQUFDO0tBTTNCO0lBSkcsbUNBQW1DO0lBQ25DLElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDO0lBQ3RELENBQUM7K0dBNUJRLHlCQUF5QjttR0FBekIseUJBQXlCLHdTQ1p0QyxxN0dBeUZBOzs0RkQ3RWEseUJBQXlCO2tCQVJyQyxTQUFTOytCQUNJLHVCQUF1QixtQkFFaEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixvQkFBb0IsRUFBRSxnQ0FBZ0M7cUJBQ3pEOzhCQU9RLElBQUk7c0JBQVosS0FBSztnQkFHRyxlQUFlO3NCQUF2QixLQUFLO2dCQUdHLElBQUk7c0JBQVosS0FBSztnQkFHRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdHLE1BQU07c0JBQWQsS0FBSztnQkFHSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBIaWVyYXJjaHlCYXJTZXJ2aWNlIH0gZnJvbSAnLi4vaGllcmFyY2h5LWJhci5zZXJ2aWNlJztcbmltcG9ydCB7IEhpZXJhcmNoeUJhck5vZGUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL2hpZXJhcmNoeS1iYXItbm9kZS5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LWhpZXJhcmNoeS1iYXItbm9kZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2hpZXJhcmNoeS1iYXItbm9kZS5jb21wb25lbnQuaHRtbCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLnZpc2liaWxpdHldJzogJ3Zpc2libGUgPyBcInZpc2libGVcIiA6IFwiaGlkZGVuXCInLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIEhpZXJhcmNoeUJhck5vZGVDb21wb25lbnQge1xuICAgIHJlYWRvbmx5IGhpZXJhcmNoeUJhciA9IGluamVjdChIaWVyYXJjaHlCYXJTZXJ2aWNlKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0PEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+PihFbGVtZW50UmVmKTtcblxuICAgIC8qKiBTcGVjaWZ5IHRoZSBub2RlIGRhdGEgKi9cbiAgICBASW5wdXQoKSBub2RlOiBIaWVyYXJjaHlCYXJOb2RlO1xuXG4gICAgLyoqIERlZmluZSB0aGUgdGVtcGxhdGUgZm9yIHRoZSBwb3BvdmVyICovXG4gICAgQElucHV0KCkgcG9wb3ZlclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjx2b2lkPjtcblxuICAgIC8qKiBEZXRlcm1pbmUgdGhlIG1vZGUgb2YgdGhlIGhpZXJhcmNoeSBiYXIgKi9cbiAgICBASW5wdXQoKSBtb2RlOiBzdHJpbmc7XG5cbiAgICAvKiogRGV0ZXJtaW5lIHJlYWQgb25seSBzdGF0ZSAqL1xuICAgIEBJbnB1dCgpIHJlYWRvbmx5OiBib29sZWFuO1xuXG4gICAgLyoqIE9wdGlvbmFsbHkgZGVmaW5lIHRoZSBob3Jpem9udGFsIG9mZnNldCAqL1xuICAgIEBJbnB1dCgpIG9mZnNldDogbnVtYmVyID0gMDtcblxuICAgIC8qKiBFbWl0IHdoZW4gdGhlIG5vZGUgaXMgc2VsZWN0ZWQgKi9cbiAgICBAT3V0cHV0KCkgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEhpZXJhcmNoeUJhck5vZGU+KCk7XG5cbiAgICAvKiogRGV0ZXJtaW5lIGlmIHRoaXMgbm9kZSBzaG91bGQgYmUgaGlkZGVuIGR1ZSB0byBvdmVyZmxvdyAqL1xuICAgIHZpc2libGU6IGJvb2xlYW4gPSB0cnVlO1xuXG4gICAgLyoqIEdldCB0aGUgd2lkdGggb2YgdGhlIGVsZW1lbnQgKi9cbiAgICBnZXQgd2lkdGgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlXCJcbiAgW2NsYXNzLmhpZXJhcmNoeS1iYXItbm9kZS1yZWFkb25seV09XCJyZWFkb25seVwiXG4gIFtjbGFzcy5oaWVyYXJjaHktYmFyLW5vZGUtY2hpbGQtaW5kaWNhdG9yXT1cIm5vZGUuY2hpbGRyZW5cIlxuICBbc3R5bGUudHJhbnNmb3JtXT1cIm9mZnNldCA/ICd0cmFuc2xhdGVYKCcgKyBvZmZzZXQgKyAncHgpJyA6IG51bGxcIj5cblxuICBAaWYgKG1vZGUgPT09ICdkcm9wZG93bicpIHtcbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIlxuICAgICAgdXhGb2N1c0luZGljYXRvclxuICAgICAgdXhGb2N1c0luZGljYXRvck9yaWdpblxuICAgICAgI3BvcG92ZXI9XCJ1eC1wb3BvdmVyXCJcbiAgICAgIGFyaWEtbGFiZWw9XCJTaG93IGNoaWxkcmVuXCJcbiAgICAgIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLWNvbnRlbnRcIlxuICAgICAgW2Rpc2FibGVkXT1cInJlYWRvbmx5XCJcbiAgICAgIFt1eFBvcG92ZXJdPVwicG9wb3ZlclRlbXBsYXRlXCJcbiAgICAgIFtwb3BvdmVyQ29udGV4dF09XCJ7IG5vZGU6IG5vZGUsIHBvcG92ZXI6IHBvcG92ZXIgfVwiXG4gICAgICBwbGFjZW1lbnQ9XCJib3R0b21cIlxuICAgICAgcG9wb3ZlckNsYXNzPVwiaGllcmFyY2h5LWJhci1wb3BvdmVyXCJcbiAgICAgIFtzaG93VHJpZ2dlcnNdPVwibm9kZS5jaGlsZHJlbiA/IGhpZXJhcmNoeUJhci5wb3BvdmVyU2hvd1RyaWdnZXJzIDogW11cIlxuICAgICAgW2hpZGVUcmlnZ2Vyc109XCJub2RlLmNoaWxkcmVuID8gaGllcmFyY2h5QmFyLnBvcG92ZXJIaWRlVHJpZ2dlcnMgOiBbXVwiXG4gICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJub2RlLnRpdGxlXCI+XG4gICAgICA8IS0tIFNob3cgYSBjdXN0b20gaWNvbiBpZiBzcGVjaWZpZWQgLS0+XG4gICAgICBAaWYgKGhpZXJhcmNoeUJhci5pY29uKSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJoaWVyYXJjaHktYmFyLW5vZGUtaWNvblwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaGllcmFyY2h5QmFyLmljb25cIiBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyBub2RlOiBub2RlLCAkaW1wbGljaXQ6IG5vZGUgfVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICAgIDwhLS0gU2hvdyBhbiBpY29uIGlmIHNwZWNpZmllZCAtLT5cbiAgICAgIEBpZiAobm9kZS5pY29uICYmICFoaWVyYXJjaHlCYXIuaWNvbikge1xuICAgICAgICA8aW1nIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLWljb25cIiBbc3JjXT1cIm5vZGUuaWNvblwiIGFsdD1cIkhpZXJhcmNoeSBCYXIgSWNvblwiPlxuICAgICAgfVxuICAgICAgPCEtLSBTaG93IHRoZSBuYW1lIG9mIHRoZSBjdXJyZW50IG5vZGUgLS0+XG4gICAgICA8c3BhbiBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS10aXRsZVwiPnt7IG5vZGUudGl0bGUgfX08L3NwYW4+XG4gICAgICA8IS0tIFNob3cgYSBkcm9wZG93biBhcnJvdyBpZiB0aGVyZSBhcmUgY2hpbGRyZW4gLS0+XG4gICAgICA8ZGl2IFtjbGFzcy5yZWFkb25seS1hcnJvd109XCJyZWFkb25seVwiIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLWFycm93LWljb24tZHJvcGRvd25cIj5cbiAgICAgICAgQGlmIChub2RlLmNoaWxkcmVuKSB7XG4gICAgICAgICAgPHV4LWljb24gbmFtZT1cIm5leHRcIlxuICAgICAgICAgICAgY2xhc3M9XCJoaWVyYXJjaHktYmFyLW5vZGUtYXJyb3ctaWNvblwiPlxuICAgICAgICAgIDwvdXgtaWNvbj5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9idXR0b24+XG4gIH0gQGVsc2Uge1xuICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiXG4gICAgICB1eEZvY3VzSW5kaWNhdG9yXG4gICAgICBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS1jb250ZW50XCJcbiAgICAgIFtkaXNhYmxlZF09XCJyZWFkb25seVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIm5vZGUudGl0bGVcIlxuICAgICAgKGNsaWNrKT1cInNlbGVjdGVkLmVtaXQobm9kZSlcIj5cbiAgICAgIDwhLS0gU2hvdyBhIGN1c3RvbSBpY29uIGlmIHNwZWNpZmllZCAtLT5cbiAgICAgIEBpZiAoaGllcmFyY2h5QmFyLmljb24pIHtcbiAgICAgICAgPGRpdiBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS1pY29uXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJoaWVyYXJjaHlCYXIuaWNvblwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IG5vZGU6IG5vZGUsICRpbXBsaWNpdDogbm9kZSB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgICAgPCEtLSBTaG93IGFuIGljb24gaWYgc3BlY2lmaWVkIC0tPlxuICAgICAgQGlmIChub2RlLmljb24gJiYgIWhpZXJhcmNoeUJhci5pY29uKSB7XG4gICAgICAgIDxpbWcgY2xhc3M9XCJoaWVyYXJjaHktYmFyLW5vZGUtaWNvblwiIFtzcmNdPVwibm9kZS5pY29uXCIgYWx0PVwiSGllcmFyY2h5IEJhciBJY29uXCI+XG4gICAgICB9XG4gICAgICA8IS0tIFNob3cgdGhlIG5hbWUgb2YgdGhlIGN1cnJlbnQgbm9kZSAtLT5cbiAgICAgIDxzcGFuIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLXRpdGxlXCI+e3sgbm9kZS50aXRsZSB9fTwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8IS0tIFNob3cgYSBkcm9wZG93biBhcnJvdyBpZiB0aGVyZSBhcmUgY2hpbGRyZW4gLS0+XG4gICAgQGlmIChub2RlLmNoaWxkcmVuKSB7XG4gICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIlxuICAgICAgICB1eEZvY3VzSW5kaWNhdG9yXG4gICAgICAgIHV4Rm9jdXNJbmRpY2F0b3JPcmlnaW5cbiAgICAgICAgI3BvcG92ZXI9XCJ1eC1wb3BvdmVyXCJcbiAgICAgICAgYXJpYS1sYWJlbD1cIlNob3cgY2hpbGRyZW5cIlxuICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJoaWVyYXJjaHktYmFyLW5vZGUtYXJyb3dcIlxuICAgICAgICBbZGlzYWJsZWRdPVwicmVhZG9ubHlcIlxuICAgICAgICBbdXhQb3BvdmVyXT1cInBvcG92ZXJUZW1wbGF0ZVwiXG4gICAgICAgIFtwb3BvdmVyQ29udGV4dF09XCJ7IG5vZGU6IG5vZGUsIHBvcG92ZXI6IHBvcG92ZXIgfVwiXG4gICAgICAgIHBsYWNlbWVudD1cImJvdHRvbVwiXG4gICAgICAgIHBvcG92ZXJDbGFzcz1cImhpZXJhcmNoeS1iYXItcG9wb3ZlclwiXG4gICAgICAgIFtzaG93VHJpZ2dlcnNdPVwiaGllcmFyY2h5QmFyLnBvcG92ZXJTaG93VHJpZ2dlcnNcIlxuICAgICAgICBbaGlkZVRyaWdnZXJzXT1cImhpZXJhcmNoeUJhci5wb3BvdmVySGlkZVRyaWdnZXJzXCJcbiAgICAgICAgdGFiaW5kZXg9XCIwXCI+XG4gICAgICAgIDx1eC1pY29uIG5hbWU9XCJuZXh0XCJcbiAgICAgICAgICBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS1hcnJvdy1pY29uXCI+XG4gICAgICAgIDwvdXgtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIH1cbiAgfVxuXG48L2Rpdj5cblxuXG4iXX0=