@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
119 lines • 16.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, Directive, ElementRef, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';
import { FocusIndicatorService } from '../../directives/accessibility/index';
import * as i0 from "@angular/core";
export class FlippableCardComponent {
constructor() {
this.focusIndicatorService = inject(FocusIndicatorService);
this.elementRef = inject(ElementRef);
/** Determines whether the card should flip horizontally or vertically. */
this.direction = 'horizontal';
/**
* Determines when the card should flip. Possible options are `click`, `hover` and `manual`.
* The manual option should be used if you want complete control over when the card should flip.
*/
this.trigger = 'hover';
/** Sets the width (in pixels) of the card. */
this.width = 280;
/** Sets the height (in pixels) of the card. */
this.height = 200;
/** Determines whether or not the card is flipped. */
this.flipped = false;
/** If two way binding is used this value will be updated when the state of the card changes. */
this.flippedChange = new EventEmitter();
this._focusIndicator = this.focusIndicatorService.monitor(this.elementRef.nativeElement);
}
ngOnDestroy() {
this._focusIndicator.destroy();
}
setFlipped(state) {
this.flipped = state;
this.flippedChange.emit(this.flipped);
}
toggleFlipped() {
this.setFlipped(!this.flipped);
}
clickTrigger() {
// add or remove the class depending on whether or not the card has been flipped
if (this.trigger === 'click') {
this.toggleFlipped();
}
}
hoverEnter() {
// if the trigger is hover then begin to flip
if (this.trigger === 'hover') {
this.setFlipped(true);
}
}
hoverExit() {
if (this.trigger === 'hover') {
this.setFlipped(false);
}
}
onKeyDown(event) {
if (this.trigger !== 'manual') {
this.toggleFlipped();
event.preventDefault();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FlippableCardComponent, selector: "ux-flippable-card", inputs: { direction: "direction", trigger: "trigger", width: "width", height: "height", flipped: "flipped" }, outputs: { flippedChange: "flippedChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "clickTrigger()", "mouseenter": "hoverEnter()", "mouseleave": "hoverExit()", "keydown.enter": "onKeyDown($event)", "keydown.space": "onKeyDown($event)", "keydown.spacebar": "onKeyDown($event)" }, properties: { "class.horizontal": "direction === \"horizontal\"", "class.vertical": "direction === \"vertical\"" } }, exportAs: ["ux-flippable-card"], ngImport: i0, template: "<div class=\"ux-flipper\"\n [class.ux-flip-card]=\"flipped\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\">\n\n <div class=\"ux-flippable-card-front\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n [attr.aria-hidden]=\"flipped\">\n\n <ng-content select=\"ux-flippable-card-front\"></ng-content>\n </div>\n\n <div class=\"ux-flippable-card-back\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n [attr.aria-hidden]=\"!flipped\">\n\n <ng-content select=\"ux-flippable-card-back\"></ng-content>\n </div>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-flippable-card', host: {
'tabindex': '0',
'[class.horizontal]': 'direction === "horizontal"',
'[class.vertical]': 'direction === "vertical"'
}, exportAs: 'ux-flippable-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ux-flipper\"\n [class.ux-flip-card]=\"flipped\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\">\n\n <div class=\"ux-flippable-card-front\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n [attr.aria-hidden]=\"flipped\">\n\n <ng-content select=\"ux-flippable-card-front\"></ng-content>\n </div>\n\n <div class=\"ux-flippable-card-back\"\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n [attr.aria-hidden]=\"!flipped\">\n\n <ng-content select=\"ux-flippable-card-back\"></ng-content>\n </div>\n</div>" }]
}], ctorParameters: () => [], propDecorators: { direction: [{
type: Input
}], trigger: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], flipped: [{
type: Input
}], flippedChange: [{
type: Output
}], clickTrigger: [{
type: HostListener,
args: ['click']
}], hoverEnter: [{
type: HostListener,
args: ['mouseenter']
}], hoverExit: [{
type: HostListener,
args: ['mouseleave']
}], onKeyDown: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}, {
type: HostListener,
args: ['keydown.spacebar', ['$event']]
}] } });
export class FlippableCardFrontDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardFrontDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FlippableCardFrontDirective, selector: "ux-flippable-card-front", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardFrontDirective, decorators: [{
type: Directive,
args: [{
selector: 'ux-flippable-card-front'
}]
}] });
export class FlippableCardBackDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardBackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FlippableCardBackDirective, selector: "ux-flippable-card-back", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FlippableCardBackDirective, decorators: [{
type: Directive,
args: [{
selector: 'ux-flippable-card-back'
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcHBhYmxlLWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxpcHBhYmxlLWNhcmQvZmxpcHBhYmxlLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxpcHBhYmxlLWNhcmQvZmxpcHBhYmxlLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDeEosT0FBTyxFQUFrQixxQkFBcUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDOztBQWE3RixNQUFNLE9BQU8sc0JBQXNCO0lBNkIvQjtRQTVCUywwQkFBcUIsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUV0RCxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRXpDLDBFQUEwRTtRQUNqRSxjQUFTLEdBQThCLFlBQVksQ0FBQztRQUU3RDs7O1dBR0c7UUFDTSxZQUFPLEdBQWlDLE9BQU8sQ0FBQztRQUV6RCw4Q0FBOEM7UUFDckMsVUFBSyxHQUFXLEdBQUcsQ0FBQztRQUU3QiwrQ0FBK0M7UUFDdEMsV0FBTSxHQUFXLEdBQUcsQ0FBQztRQUU5QixxREFBcUQ7UUFDNUMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUVsQyxnR0FBZ0c7UUFDdEYsa0JBQWEsR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQU16RSxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFjO1FBQ3JCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRUQsYUFBYTtRQUNULElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUdELFlBQVk7UUFFUixnRkFBZ0Y7UUFDaEYsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0wsQ0FBQztJQUdELFVBQVU7UUFDTiw2Q0FBNkM7UUFDN0MsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUIsQ0FBQztJQUNMLENBQUM7SUFHRCxTQUFTO1FBQ0wsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDM0IsQ0FBQztJQUNMLENBQUM7SUFLRCxTQUFTLENBQUMsS0FBb0I7UUFDMUIsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQzVCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUNyQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDM0IsQ0FBQztJQUNMLENBQUM7K0dBOUVRLHNCQUFzQjttR0FBdEIsc0JBQXNCLDhtQkNkbkMsOG5CQW9CTTs7NEZETk8sc0JBQXNCO2tCQVhsQyxTQUFTOytCQUNJLG1CQUFtQixRQUV2Qjt3QkFDRixVQUFVLEVBQUUsR0FBRzt3QkFDZixvQkFBb0IsRUFBRSw0QkFBNEI7d0JBQ2xELGtCQUFrQixFQUFFLDBCQUEwQjtxQkFDakQsWUFDUyxtQkFBbUIsbUJBQ1osdUJBQXVCLENBQUMsTUFBTTt3REFRdEMsU0FBUztzQkFBakIsS0FBSztnQkFNRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdHLE1BQU07c0JBQWQsS0FBSztnQkFHRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0ksYUFBYTtzQkFBdEIsTUFBTTtnQkF1QlAsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLE9BQU87Z0JBVXJCLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxZQUFZO2dCQVMxQixTQUFTO3NCQURSLFlBQVk7dUJBQUMsWUFBWTtnQkFVMUIsU0FBUztzQkFIUixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3hDLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDeEMsWUFBWTt1QkFBQyxrQkFBa0IsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7QUFZaEQsTUFBTSxPQUFPLDJCQUEyQjsrR0FBM0IsMkJBQTJCO21HQUEzQiwyQkFBMkI7OzRGQUEzQiwyQkFBMkI7a0JBSHZDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLHlCQUF5QjtpQkFDdEM7O0FBTUQsTUFBTSxPQUFPLDBCQUEwQjsrR0FBMUIsMEJBQTBCO21HQUExQiwwQkFBMEI7OzRGQUExQiwwQkFBMEI7a0JBSHRDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLHdCQUF3QjtpQkFDckMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3IsIEZvY3VzSW5kaWNhdG9yU2VydmljZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvYWNjZXNzaWJpbGl0eS9pbmRleCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtZmxpcHBhYmxlLWNhcmQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9mbGlwcGFibGUtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gICAgaG9zdDoge1xuICAgICAgICAndGFiaW5kZXgnOiAnMCcsXG4gICAgICAgICdbY2xhc3MuaG9yaXpvbnRhbF0nOiAnZGlyZWN0aW9uID09PSBcImhvcml6b250YWxcIicsXG4gICAgICAgICdbY2xhc3MudmVydGljYWxdJzogJ2RpcmVjdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiJ1xuICAgIH0sXG4gICAgZXhwb3J0QXM6ICd1eC1mbGlwcGFibGUtY2FyZCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgRmxpcHBhYmxlQ2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcmVhZG9ubHkgZm9jdXNJbmRpY2F0b3JTZXJ2aWNlID0gaW5qZWN0KEZvY3VzSW5kaWNhdG9yU2VydmljZSk7XG5cbiAgICByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgLyoqIERldGVybWluZXMgd2hldGhlciB0aGUgY2FyZCBzaG91bGQgZmxpcCBob3Jpem9udGFsbHkgb3IgdmVydGljYWxseS4gKi9cbiAgICBASW5wdXQoKSBkaXJlY3Rpb246ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCcgPSAnaG9yaXpvbnRhbCc7XG5cbiAgICAvKipcbiAgICAgKiBEZXRlcm1pbmVzIHdoZW4gdGhlIGNhcmQgc2hvdWxkIGZsaXAuIFBvc3NpYmxlIG9wdGlvbnMgYXJlIGBjbGlja2AsIGBob3ZlcmAgYW5kIGBtYW51YWxgLlxuICAgICAqIFRoZSBtYW51YWwgb3B0aW9uIHNob3VsZCBiZSB1c2VkIGlmIHlvdSB3YW50IGNvbXBsZXRlIGNvbnRyb2wgb3ZlciB3aGVuIHRoZSBjYXJkIHNob3VsZCBmbGlwLlxuICAgICAqL1xuICAgIEBJbnB1dCgpIHRyaWdnZXI6ICdjbGljaycgfCAnaG92ZXInIHwgJ21hbnVhbCcgPSAnaG92ZXInO1xuXG4gICAgLyoqIFNldHMgdGhlIHdpZHRoIChpbiBwaXhlbHMpIG9mIHRoZSBjYXJkLiAqL1xuICAgIEBJbnB1dCgpIHdpZHRoOiBudW1iZXIgPSAyODA7XG5cbiAgICAvKiogU2V0cyB0aGUgaGVpZ2h0IChpbiBwaXhlbHMpIG9mIHRoZSBjYXJkLiAqL1xuICAgIEBJbnB1dCgpIGhlaWdodDogbnVtYmVyID0gMjAwO1xuXG4gICAgLyoqIERldGVybWluZXMgd2hldGhlciBvciBub3QgdGhlIGNhcmQgaXMgZmxpcHBlZC4gKi9cbiAgICBASW5wdXQoKSBmbGlwcGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICAvKiogSWYgdHdvIHdheSBiaW5kaW5nIGlzIHVzZWQgdGhpcyB2YWx1ZSB3aWxsIGJlIHVwZGF0ZWQgd2hlbiB0aGUgc3RhdGUgb2YgdGhlIGNhcmQgY2hhbmdlcy4gKi9cbiAgICBAT3V0cHV0KCkgZmxpcHBlZENoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgLyoqIEZvY3VzIEluZGljYXRvciBpbnN0YW5jZSAqL1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX2ZvY3VzSW5kaWNhdG9yOiBGb2N1c0luZGljYXRvcjtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLl9mb2N1c0luZGljYXRvciA9IHRoaXMuZm9jdXNJbmRpY2F0b3JTZXJ2aWNlLm1vbml0b3IodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9mb2N1c0luZGljYXRvci5kZXN0cm95KCk7XG4gICAgfVxuXG4gICAgc2V0RmxpcHBlZChzdGF0ZTogYm9vbGVhbik6IHZvaWQge1xuICAgICAgICB0aGlzLmZsaXBwZWQgPSBzdGF0ZTtcbiAgICAgICAgdGhpcy5mbGlwcGVkQ2hhbmdlLmVtaXQodGhpcy5mbGlwcGVkKTtcbiAgICB9XG5cbiAgICB0b2dnbGVGbGlwcGVkKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNldEZsaXBwZWQoIXRoaXMuZmxpcHBlZCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxuICAgIGNsaWNrVHJpZ2dlcigpOiB2b2lkIHtcblxuICAgICAgICAvLyBhZGQgb3IgcmVtb3ZlIHRoZSBjbGFzcyBkZXBlbmRpbmcgb24gd2hldGhlciBvciBub3QgdGhlIGNhcmQgaGFzIGJlZW4gZmxpcHBlZFxuICAgICAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnY2xpY2snKSB7XG4gICAgICAgICAgICB0aGlzLnRvZ2dsZUZsaXBwZWQoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxuICAgIGhvdmVyRW50ZXIoKTogdm9pZCB7XG4gICAgICAgIC8vIGlmIHRoZSB0cmlnZ2VyIGlzIGhvdmVyIHRoZW4gYmVnaW4gdG8gZmxpcFxuICAgICAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnaG92ZXInKSB7XG4gICAgICAgICAgICB0aGlzLnNldEZsaXBwZWQodHJ1ZSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJylcbiAgICBob3ZlckV4aXQoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnRyaWdnZXIgPT09ICdob3ZlcicpIHtcbiAgICAgICAgICAgIHRoaXMuc2V0RmxpcHBlZChmYWxzZSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmVudGVyJywgWyckZXZlbnQnXSlcbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnNwYWNlJywgWyckZXZlbnQnXSlcbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnNwYWNlYmFyJywgWyckZXZlbnQnXSkgLy8gSUUgdXNlcyBkaWZmZXJlbnQgbmFtaW5nXG4gICAgb25LZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnRyaWdnZXIgIT09ICdtYW51YWwnKSB7XG4gICAgICAgICAgICB0aGlzLnRvZ2dsZUZsaXBwZWQoKTtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAndXgtZmxpcHBhYmxlLWNhcmQtZnJvbnQnXG59KVxuZXhwb3J0IGNsYXNzIEZsaXBwYWJsZUNhcmRGcm9udERpcmVjdGl2ZSB7IH1cblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICd1eC1mbGlwcGFibGUtY2FyZC1iYWNrJ1xufSlcbmV4cG9ydCBjbGFzcyBGbGlwcGFibGVDYXJkQmFja0RpcmVjdGl2ZSB7IH0iLCI8ZGl2IGNsYXNzPVwidXgtZmxpcHBlclwiXG4gICAgIFtjbGFzcy51eC1mbGlwLWNhcmRdPVwiZmxpcHBlZFwiXG4gICAgIFtzdHlsZS53aWR0aC5weF09XCJ3aWR0aFwiXG4gICAgIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0XCI+XG5cbiAgICA8ZGl2IGNsYXNzPVwidXgtZmxpcHBhYmxlLWNhcmQtZnJvbnRcIlxuICAgICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0XCJcbiAgICAgICAgIFthdHRyLmFyaWEtaGlkZGVuXT1cImZsaXBwZWRcIj5cblxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ1eC1mbGlwcGFibGUtY2FyZC1mcm9udFwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJ1eC1mbGlwcGFibGUtY2FyZC1iYWNrXCJcbiAgICAgICAgIFtzdHlsZS53aWR0aC5weF09XCJ3aWR0aFwiXG4gICAgICAgICBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiXG4gICAgICAgICBbYXR0ci5hcmlhLWhpZGRlbl09XCIhZmxpcHBlZFwiPlxuXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInV4LWZsaXBwYWJsZS1jYXJkLWJhY2tcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=