UNPKG

@ux-aspects/ux-aspects

Version:

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

100 lines 14.1 kB
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, TemplateRef } from '@angular/core'; import { Subject } from 'rxjs'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "@angular/cdk/observers"; let uniqueTooltipId = 0; export class TooltipComponent { constructor() { this._changeDetectorRef = inject(ChangeDetectorRef); /** Define a unique id for each tooltip */ this.id = `ux-tooltip-${++uniqueTooltipId}`; /** Define the tooltip role */ this.role = 'tooltip'; /** Allow a custom class to be added to the tooltip to allow custom styling */ this.customClass = ''; /** Emit when the tooltip need to update it's position */ this.reposition$ = new Subject(); /** The name of the css class to use for the tooltip direction */ this._positionClass = ''; } /** Indicates whether or not the content is a string or a TemplateRef */ get isTemplateRef() { return this.content instanceof TemplateRef; } get positionClass() { return this._positionClass; } set positionClass(positionClass) { this._positionClass = positionClass; this._changeDetectorRef.detectChanges(); } /** Cleanup after the component is destroyed */ ngOnDestroy() { this.reposition$.complete(); } /** Inform the parent directive that it needs to recalulate the position */ reposition() { this.reposition$.next(); } /** This will update the content of the tooltip and trigger change detection */ setContent(content) { this.content = content; this._changeDetectorRef.markForCheck(); } /** This will update the tooltip placement and trigger change detection */ setPlacement(placement) { if (!placement) { return; } this.placement = placement; this._changeDetectorRef.markForCheck(); } /** This will update the tooltip alignment and trigger change detection */ setAlignment(alignment) { if (!alignment) { return; } this.alignment = alignment; this._changeDetectorRef.markForCheck(); } /** This will set a custom class on the tooltip and trigger change detection */ setClass(customClass) { if (!customClass) { return; } this.customClass = customClass; this._changeDetectorRef.markForCheck(); } /** Updates the context used by the TemplateRef */ setContext(context) { if (!context) { return; } this.context = context; this._changeDetectorRef.markForCheck(); } /** Specify the tooltip role attribute */ setRole(role) { if (!role) { return; } this.role = role; this._changeDetectorRef.markForCheck(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TooltipComponent, selector: "ux-tooltip", inputs: { content: "content", context: "context", placement: "placement", alignment: "alignment" }, ngImport: i0, template: "<div class=\"tooltip in\" [id]=\"id\" [attr.role]=\"role\" [ngClass]=\"[positionClass, customClass]\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\" (cdkObserveContent)=\"reposition()\">\n @if (!isTemplateRef) {\n {{ content }}\n }\n @if (isTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"$any(content)\" [ngTemplateOutletContext]=\"context\"></ng-container>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TooltipComponent, decorators: [{ type: Component, args: [{ selector: 'ux-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tooltip in\" [id]=\"id\" [attr.role]=\"role\" [ngClass]=\"[positionClass, customClass]\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\" (cdkObserveContent)=\"reposition()\">\n @if (!isTemplateRef) {\n {{ content }}\n }\n @if (isTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"$any(content)\" [ngTemplateOutletContext]=\"context\"></ng-container>\n }\n </div>\n</div>\n" }] }], propDecorators: { content: [{ type: Input }], context: [{ type: Input }], placement: [{ type: Input }], alignment: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBYSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0gsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7OztBQUcvQixJQUFJLGVBQWUsR0FBRyxDQUFDLENBQUM7QUFReEIsTUFBTSxPQUFPLGdCQUFnQjtJQU43QjtRQU91Qix1QkFBa0IsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUVsRSwwQ0FBMEM7UUFDMUMsT0FBRSxHQUFXLGNBQWUsRUFBRSxlQUFnQixFQUFFLENBQUM7UUFFakQsOEJBQThCO1FBQzlCLFNBQUksR0FBVyxTQUFTLENBQUM7UUFjekIsOEVBQThFO1FBQzlFLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBRXpCLHlEQUF5RDtRQUN6RCxnQkFBVyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFPbEMsaUVBQWlFO1FBQ2pFLG1CQUFjLEdBQVcsRUFBRSxDQUFDO0tBa0YvQjtJQXhGRyx3RUFBd0U7SUFDeEUsSUFBSSxhQUFhO1FBQ2IsT0FBTyxJQUFJLENBQUMsT0FBTyxZQUFZLFdBQVcsQ0FBQztJQUMvQyxDQUFDO0lBS0QsSUFBSSxhQUFhO1FBQ2IsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQy9CLENBQUM7SUFFRCxJQUFJLGFBQWEsQ0FBQyxhQUFxQjtRQUNuQyxJQUFJLENBQUMsY0FBYyxHQUFHLGFBQWEsQ0FBQztRQUNwQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDNUMsQ0FBQztJQUVELCtDQUErQztJQUMvQyxXQUFXO1FBQ1AsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsMkVBQTJFO0lBQzNFLFVBQVU7UUFDTixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCwrRUFBK0U7SUFFL0UsVUFBVSxDQUFDLE9BQWtDO1FBQ3pDLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsMEVBQTBFO0lBQzFFLFlBQVksQ0FBQyxTQUEwQjtRQUVuQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDYixPQUFPO1FBQ1gsQ0FBQztRQUVELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQzNCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsMEVBQTBFO0lBQzFFLFlBQVksQ0FBQyxTQUEwQjtRQUVuQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDYixPQUFPO1FBQ1gsQ0FBQztRQUVELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQzNCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsK0VBQStFO0lBQy9FLFFBQVEsQ0FBQyxXQUFtQjtRQUV4QixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDZixPQUFPO1FBQ1gsQ0FBQztRQUVELElBQUksQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDO1FBQy9CLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsa0RBQWtEO0lBQ2xELFVBQVUsQ0FBQyxPQUFVO1FBRWpCLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNYLE9BQU87UUFDWCxDQUFDO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7UUFDdkIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzNDLENBQUM7SUFFRCx5Q0FBeUM7SUFDekMsT0FBTyxDQUFDLElBQVk7UUFFaEIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ1IsT0FBTztRQUNYLENBQUM7UUFFRCxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDM0MsQ0FBQzsrR0FsSFEsZ0JBQWdCO21HQUFoQixnQkFBZ0Isc0pDWjdCLG1iQVdBOzs0RkRDYSxnQkFBZ0I7a0JBTjVCLFNBQVM7K0JBQ0ksWUFBWSxtQkFFTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQWF0QyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csT0FBTztzQkFBZixLQUFLO2dCQUdHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBBbmNob3JBbGlnbm1lbnQsIEFuY2hvclBsYWNlbWVudCB9IGZyb20gJy4uLy4uL2NvbW1vbi9vdmVybGF5L2luZGV4JztcblxubGV0IHVuaXF1ZVRvb2x0aXBJZCA9IDA7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtdG9vbHRpcCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuIFxuZXhwb3J0IGNsYXNzIFRvb2x0aXBDb21wb25lbnQ8VCA9IGFueT4gaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBfY2hhbmdlRGV0ZWN0b3JSZWYgPSBpbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpO1xuXG4gICAgLyoqIERlZmluZSBhIHVuaXF1ZSBpZCBmb3IgZWFjaCB0b29sdGlwICovXG4gICAgaWQ6IHN0cmluZyA9IGB1eC10b29sdGlwLSR7ICsrdW5pcXVlVG9vbHRpcElkIH1gO1xuXG4gICAgLyoqIERlZmluZSB0aGUgdG9vbHRpcCByb2xlICovXG4gICAgcm9sZTogc3RyaW5nID0gJ3Rvb2x0aXAnO1xuXG4gICAgLyoqIFRoZSBjb250ZW50IG9mIHRoZSB0b29sdGlwLCBlaXRoZXIgYSBzdHJpbmcgb3IgYSBUZW1wbGF0ZVJlZiBmb3IgZnVydGhlciBjdXN0b21pemF0aW9uICovXG4gICAgQElucHV0KCkgY29udGVudDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8VD47XG5cbiAgICAvKiogQWxsb3cgdGhlIHVzZXIgdG8gc3VwcGx5IGEgY29udGV4dCBmb3IgdGhlIHRvb2x0aXAgVGVtcGxhdGVSZWYgKi9cbiAgICBASW5wdXQoKSBjb250ZXh0OiBUO1xuXG4gICAgLyoqIFRoZSBwb3NpdGlvbiB0aGUgdG9vbHRpcCBzaG91bGQgZGlzcGxheSByZWxhdGl2ZSB0byB0aGUgYXNzb2NpYXRlZCBlbGVtZW50ICovXG4gICAgQElucHV0KCkgcGxhY2VtZW50OiBBbmNob3JQbGFjZW1lbnQ7XG5cbiAgICAvKiogVGhlIHBvc2l0aW9uIHRoZSBjYWxsb3V0IHNob3VsZCBkaXNwbGF5IHJlbGF0aXZlIHRvIHRoZSBwb3BvdmVyIGVsZW1lbnQgKi9cbiAgICBASW5wdXQoKSBhbGlnbm1lbnQ6IEFuY2hvckFsaWdubWVudDtcblxuICAgIC8qKiBBbGxvdyBhIGN1c3RvbSBjbGFzcyB0byBiZSBhZGRlZCB0byB0aGUgdG9vbHRpcCB0byBhbGxvdyBjdXN0b20gc3R5bGluZyAqL1xuICAgIGN1c3RvbUNsYXNzOiBzdHJpbmcgPSAnJztcblxuICAgIC8qKiBFbWl0IHdoZW4gdGhlIHRvb2x0aXAgbmVlZCB0byB1cGRhdGUgaXQncyBwb3NpdGlvbiAqL1xuICAgIHJlcG9zaXRpb24kID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIC8qKiBJbmRpY2F0ZXMgd2hldGhlciBvciBub3QgdGhlIGNvbnRlbnQgaXMgYSBzdHJpbmcgb3IgYSBUZW1wbGF0ZVJlZiAqL1xuICAgIGdldCBpc1RlbXBsYXRlUmVmKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5jb250ZW50IGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG4gICAgfVxuXG4gICAgLyoqIFRoZSBuYW1lIG9mIHRoZSBjc3MgY2xhc3MgdG8gdXNlIGZvciB0aGUgdG9vbHRpcCBkaXJlY3Rpb24gKi9cbiAgICBfcG9zaXRpb25DbGFzczogc3RyaW5nID0gJyc7XG5cbiAgICBnZXQgcG9zaXRpb25DbGFzcygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5fcG9zaXRpb25DbGFzcztcbiAgICB9XG5cbiAgICBzZXQgcG9zaXRpb25DbGFzcyhwb3NpdGlvbkNsYXNzOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy5fcG9zaXRpb25DbGFzcyA9IHBvc2l0aW9uQ2xhc3M7XG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICB9XG5cbiAgICAvKiogQ2xlYW51cCBhZnRlciB0aGUgY29tcG9uZW50IGlzIGRlc3Ryb3llZCAqL1xuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnJlcG9zaXRpb24kLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgLyoqIEluZm9ybSB0aGUgcGFyZW50IGRpcmVjdGl2ZSB0aGF0IGl0IG5lZWRzIHRvIHJlY2FsdWxhdGUgdGhlIHBvc2l0aW9uICovXG4gICAgcmVwb3NpdGlvbigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5yZXBvc2l0aW9uJC5uZXh0KCk7XG4gICAgfVxuXG4gICAgLyoqIFRoaXMgd2lsbCB1cGRhdGUgdGhlIGNvbnRlbnQgb2YgdGhlIHRvb2x0aXAgYW5kIHRyaWdnZXIgY2hhbmdlIGRldGVjdGlvbiAqL1xuICAgICBcbiAgICBzZXRDb250ZW50KGNvbnRlbnQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jb250ZW50ID0gY29udGVudDtcbiAgICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuXG4gICAgLyoqIFRoaXMgd2lsbCB1cGRhdGUgdGhlIHRvb2x0aXAgcGxhY2VtZW50IGFuZCB0cmlnZ2VyIGNoYW5nZSBkZXRlY3Rpb24gKi9cbiAgICBzZXRQbGFjZW1lbnQocGxhY2VtZW50OiBBbmNob3JQbGFjZW1lbnQpIHtcblxuICAgICAgICBpZiAoIXBsYWNlbWVudCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5wbGFjZW1lbnQgPSBwbGFjZW1lbnQ7XG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cblxuICAgIC8qKiBUaGlzIHdpbGwgdXBkYXRlIHRoZSB0b29sdGlwIGFsaWdubWVudCBhbmQgdHJpZ2dlciBjaGFuZ2UgZGV0ZWN0aW9uICovXG4gICAgc2V0QWxpZ25tZW50KGFsaWdubWVudDogQW5jaG9yQWxpZ25tZW50KSB7XG5cbiAgICAgICAgaWYgKCFhbGlnbm1lbnQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYWxpZ25tZW50ID0gYWxpZ25tZW50O1xuICAgICAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG5cbiAgICAvKiogVGhpcyB3aWxsIHNldCBhIGN1c3RvbSBjbGFzcyBvbiB0aGUgdG9vbHRpcCBhbmQgdHJpZ2dlciBjaGFuZ2UgZGV0ZWN0aW9uICovXG4gICAgc2V0Q2xhc3MoY3VzdG9tQ2xhc3M6IHN0cmluZyk6IHZvaWQge1xuXG4gICAgICAgIGlmICghY3VzdG9tQ2xhc3MpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY3VzdG9tQ2xhc3MgPSBjdXN0b21DbGFzcztcbiAgICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuXG4gICAgLyoqIFVwZGF0ZXMgdGhlIGNvbnRleHQgdXNlZCBieSB0aGUgVGVtcGxhdGVSZWYgKi9cbiAgICBzZXRDb250ZXh0KGNvbnRleHQ6IFQpOiB2b2lkIHtcblxuICAgICAgICBpZiAoIWNvbnRleHQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY29udGV4dCA9IGNvbnRleHQ7XG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cblxuICAgIC8qKiBTcGVjaWZ5IHRoZSB0b29sdGlwIHJvbGUgYXR0cmlidXRlICovXG4gICAgc2V0Um9sZShyb2xlOiBzdHJpbmcpOiB2b2lkIHtcblxuICAgICAgICBpZiAoIXJvbGUpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMucm9sZSA9IHJvbGU7XG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0b29sdGlwIGluXCIgW2lkXT1cImlkXCIgW2F0dHIucm9sZV09XCJyb2xlXCIgW25nQ2xhc3NdPVwiW3Bvc2l0aW9uQ2xhc3MsIGN1c3RvbUNsYXNzXVwiPlxuICA8ZGl2IGNsYXNzPVwidG9vbHRpcC1hcnJvd1wiPjwvZGl2PlxuICA8ZGl2IGNsYXNzPVwidG9vbHRpcC1pbm5lclwiIChjZGtPYnNlcnZlQ29udGVudCk9XCJyZXBvc2l0aW9uKClcIj5cbiAgICBAaWYgKCFpc1RlbXBsYXRlUmVmKSB7XG4gICAgICB7eyBjb250ZW50IH19XG4gICAgfVxuICAgIEBpZiAoaXNUZW1wbGF0ZVJlZikge1xuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCIkYW55KGNvbnRlbnQpXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cImNvbnRleHRcIj48L25nLWNvbnRhaW5lcj5cbiAgICB9XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=