@bimeister/pupakit.calendar
Version:
PupaKit Calendar
68 lines • 15.8 kB
JavaScript
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewChild, ViewEncapsulation, } from '@angular/core';
import { isNil } from '@bimeister/utilities';
import 'rxjs';
import { map } from 'rxjs/operators';
import { CalendarTextKey } from '../../declarations/enums/calendar-text-key.enum';
import '../../declarations/interfaces/calendar-translation.interface';
import { CalendarConfigService } from '../../services/calendar-config.service';
import { CalendarTranslationService } from '../../services/calendar-translation.service';
import * as i0 from "@angular/core";
import * as i1 from "../../services/calendar-translation.service";
import * as i2 from "../../services/calendar-config.service";
import * as i3 from "@angular/common";
import * as i4 from "@bimeister/pupakit.kit";
import * as i5 from "@angular/cdk/scrolling";
import * as i6 from "../calendar-header/calendar-header.component";
import * as i7 from "../calendar-selector-button/calendar-selector-button.component";
const YEARS_IN_ROW = 3;
const ROW_HEIGHT_PX = 48;
function createYearsTable(startYear, endYear) {
return Array.from({
length: Math.ceil((endYear - startYear) / YEARS_IN_ROW),
}).map((_, rowIndex) => Array.from({
length: YEARS_IN_ROW,
})
.map((__, colIndex) => startYear + rowIndex * YEARS_IN_ROW + colIndex)
.filter((year) => year < endYear));
}
export class CalendarYearSelectorComponent {
constructor(calendarTranslationService, calendarConfigService) {
this.calendarTranslationService = calendarTranslationService;
this.calendarConfigService = calendarConfigService;
this.select = new EventEmitter();
this.headerTitle$ = this.calendarTranslationService.translation$.pipe(map((translation) => translation.texts[CalendarTextKey.SelectYear]));
this.rowHeightPx = ROW_HEIGHT_PX;
this.currentYear = new Date().getFullYear();
this.startYear = this.calendarConfigService.startYear;
this.endYear = this.calendarConfigService.endYear;
this.yearsTable = createYearsTable(this.startYear, this.endYear);
}
ngAfterViewInit() {
this.scrollToCurrentYear();
}
selectYear(year) {
this.select.emit(year);
}
scrollToCurrentYear() {
if (isNil(this.virtualScrollViewport)) {
return;
}
const currentYearIndex = Math.floor((this.currentYear - this.startYear) / YEARS_IN_ROW);
requestAnimationFrame(() => {
this.virtualScrollViewport.scrollToIndex(currentYearIndex);
});
}
}
CalendarYearSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CalendarYearSelectorComponent, deps: [{ token: i1.CalendarTranslationService }, { token: i2.CalendarConfigService }], target: i0.ɵɵFactoryTarget.Component });
CalendarYearSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CalendarYearSelectorComponent, selector: "pupa-calendar-year-selector", outputs: { select: "select" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<pupa-calendar-header>\n <h4 class=\"header-content\">\n {{ headerTitle$ | async }}\n </h4>\n</pupa-calendar-header>\n\n<div class=\"scroller-wrapper\">\n <cdk-virtual-scroll-viewport pupaScrollableContent class=\"scroller\" [itemSize]=\"rowHeightPx\">\n <div class=\"scroller__row\" *cdkVirtualFor=\"let yearsRow of yearsTable; templateCacheSize: 10\">\n <pupa-calendar-selector-button\n *ngFor=\"let year of yearsRow\"\n [isCurrent]=\"year === currentYear\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </pupa-calendar-selector-button>\n </div>\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--semantic-color_surface-primary),var(--semantic-color-alpha_surface-primary))}.header-content{display:flex;align-items:center;box-sizing:border-box;height:12rem;padding:0 4rem;margin:0}.scroller-wrapper{width:100%;height:100%;box-sizing:border-box;display:block}.scroller{width:100%;height:100%;display:block;box-sizing:border-box}.scroller__row{display:grid;grid-template-columns:repeat(3,1fr);box-sizing:border-box;width:100%;padding:2rem 4rem;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.ScrollableContentDirective, selector: "[pupaScrollableContent]" }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i6.CalendarHeaderComponent, selector: "pupa-calendar-header" }, { kind: "component", type: i7.CalendarSelectorButtonComponent, selector: "pupa-calendar-selector-button", inputs: ["isCurrent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CalendarYearSelectorComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-calendar-year-selector', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<pupa-calendar-header>\n <h4 class=\"header-content\">\n {{ headerTitle$ | async }}\n </h4>\n</pupa-calendar-header>\n\n<div class=\"scroller-wrapper\">\n <cdk-virtual-scroll-viewport pupaScrollableContent class=\"scroller\" [itemSize]=\"rowHeightPx\">\n <div class=\"scroller__row\" *cdkVirtualFor=\"let yearsRow of yearsTable; templateCacheSize: 10\">\n <pupa-calendar-selector-button\n *ngFor=\"let year of yearsRow\"\n [isCurrent]=\"year === currentYear\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </pupa-calendar-selector-button>\n </div>\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--semantic-color_surface-primary),var(--semantic-color-alpha_surface-primary))}.header-content{display:flex;align-items:center;box-sizing:border-box;height:12rem;padding:0 4rem;margin:0}.scroller-wrapper{width:100%;height:100%;box-sizing:border-box;display:block}.scroller{width:100%;height:100%;display:block;box-sizing:border-box}.scroller__row{display:grid;grid-template-columns:repeat(3,1fr);box-sizing:border-box;width:100%;padding:2rem 4rem;gap:1rem}\n"] }]
}], ctorParameters: function () { return [{ type: i1.CalendarTranslationService }, { type: i2.CalendarConfigService }]; }, propDecorators: { select: [{
type: Output
}], virtualScrollViewport: [{
type: ViewChild,
args: [CdkVirtualScrollViewport]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kYXIteWVhci1zZWxlY3Rvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9jYWxlbmRhci15ZWFyLXNlbGVjdG9yL2NhbGVuZGFyLXllYXItc2VsZWN0b3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvY2FsZW5kYXIteWVhci1zZWxlY3Rvci9jYWxlbmRhci15ZWFyLXNlbGVjdG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2xFLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixNQUFNLEVBQ04sU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDN0MsT0FBMkIsTUFBTSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0saURBQWlELENBQUM7QUFDbEYsT0FBb0MsOERBQThELENBQUM7QUFDbkcsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7Ozs7Ozs7OztBQUV6RixNQUFNLFlBQVksR0FBVyxDQUFDLENBQUM7QUFDL0IsTUFBTSxhQUFhLEdBQVcsRUFBRSxDQUFDO0FBRWpDLFNBQVMsZ0JBQWdCLENBQUMsU0FBaUIsRUFBRSxPQUFlO0lBQzFELE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQztRQUNoQixNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sR0FBRyxTQUFTLENBQUMsR0FBRyxZQUFZLENBQUM7S0FDeEQsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQVUsRUFBRSxRQUFnQixFQUFFLEVBQUUsQ0FDdEMsS0FBSyxDQUFDLElBQUksQ0FBQztRQUNULE1BQU0sRUFBRSxZQUFZO0tBQ3JCLENBQUM7U0FDQyxHQUFHLENBQUMsQ0FBQyxFQUFXLEVBQUUsUUFBZ0IsRUFBRSxFQUFFLENBQUMsU0FBUyxHQUFHLFFBQVEsR0FBRyxZQUFZLEdBQUcsUUFBUSxDQUFDO1NBQ3RGLE1BQU0sQ0FBQyxDQUFDLElBQVksRUFBRSxFQUFFLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQyxDQUM1QyxDQUFDO0FBQ0osQ0FBQztBQVNELE1BQU0sT0FBTyw2QkFBNkI7SUFvQnhDLFlBQ21CLDBCQUFzRCxFQUN0RCxxQkFBNEM7UUFENUMsK0JBQTBCLEdBQTFCLDBCQUEwQixDQUE0QjtRQUN0RCwwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO1FBcEIvQyxXQUFNLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7UUFLMUQsaUJBQVksR0FBdUIsSUFBSSxDQUFDLDBCQUEwQixDQUFDLFlBQVksQ0FBQyxJQUFJLENBQ2xHLEdBQUcsQ0FBQyxDQUFDLFdBQWdDLEVBQUUsRUFBRSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsZUFBZSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQ3pGLENBQUM7UUFFYyxnQkFBVyxHQUFXLGFBQWEsQ0FBQztRQUVwQyxnQkFBVyxHQUFXLElBQUksSUFBSSxFQUFFLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFOUMsY0FBUyxHQUFXLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxTQUFTLENBQUM7UUFDekQsWUFBTyxHQUFXLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUM7UUFFdEQsZUFBVSxHQUFlLGdCQUFnQixDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBS3JGLENBQUM7SUFFRyxlQUFlO1FBQ3BCLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFTSxVQUFVLENBQUMsSUFBWTtRQUM1QixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRU8sbUJBQW1CO1FBQ3pCLElBQUksS0FBSyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxFQUFFO1lBQ3JDLE9BQU87U0FDUjtRQUVELE1BQU0sZ0JBQWdCLEdBQVcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLFlBQVksQ0FBQyxDQUFDO1FBRWhHLHFCQUFxQixDQUFDLEdBQUcsRUFBRTtZQUN6QixJQUFJLENBQUMscUJBQXFCLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDN0QsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzsySEEzQ1UsNkJBQTZCOytHQUE3Qiw2QkFBNkIseUpBSTdCLHdCQUF3QixnREM1Q3JDLDRvQkFtQkE7NEZEcUJhLDZCQUE2QjtrQkFQekMsU0FBUzsrQkFDRSw2QkFBNkIsaUJBR3hCLGlCQUFpQixDQUFDLFFBQVEsbUJBQ3hCLHVCQUF1QixDQUFDLE1BQU07cUpBSS9CLE1BQU07c0JBRHJCLE1BQU07Z0JBSVUscUJBQXFCO3NCQURyQyxTQUFTO3VCQUFDLHdCQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zY3JvbGxpbmcnO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgaXNOaWwgfSBmcm9tICdAYmltZWlzdGVyL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBDYWxlbmRhclRleHRLZXkgfSBmcm9tICcuLi8uLi9kZWNsYXJhdGlvbnMvZW51bXMvY2FsZW5kYXItdGV4dC1rZXkuZW51bSc7XG5pbXBvcnQgeyBDYWxlbmRhclRyYW5zbGF0aW9uIH0gZnJvbSAnLi4vLi4vZGVjbGFyYXRpb25zL2ludGVyZmFjZXMvY2FsZW5kYXItdHJhbnNsYXRpb24uaW50ZXJmYWNlJztcbmltcG9ydCB7IENhbGVuZGFyQ29uZmlnU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2NhbGVuZGFyLWNvbmZpZy5zZXJ2aWNlJztcbmltcG9ydCB7IENhbGVuZGFyVHJhbnNsYXRpb25TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvY2FsZW5kYXItdHJhbnNsYXRpb24uc2VydmljZSc7XG5cbmNvbnN0IFlFQVJTX0lOX1JPVzogbnVtYmVyID0gMztcbmNvbnN0IFJPV19IRUlHSFRfUFg6IG51bWJlciA9IDQ4O1xuXG5mdW5jdGlvbiBjcmVhdGVZZWFyc1RhYmxlKHN0YXJ0WWVhcjogbnVtYmVyLCBlbmRZZWFyOiBudW1iZXIpOiBudW1iZXJbXVtdIHtcbiAgcmV0dXJuIEFycmF5LmZyb20oe1xuICAgIGxlbmd0aDogTWF0aC5jZWlsKChlbmRZZWFyIC0gc3RhcnRZZWFyKSAvIFlFQVJTX0lOX1JPVyksXG4gIH0pLm1hcCgoXzogdW5rbm93biwgcm93SW5kZXg6IG51bWJlcikgPT5cbiAgICBBcnJheS5mcm9tKHtcbiAgICAgIGxlbmd0aDogWUVBUlNfSU5fUk9XLFxuICAgIH0pXG4gICAgICAubWFwKChfXzogdW5rbm93biwgY29sSW5kZXg6IG51bWJlcikgPT4gc3RhcnRZZWFyICsgcm93SW5kZXggKiBZRUFSU19JTl9ST1cgKyBjb2xJbmRleClcbiAgICAgIC5maWx0ZXIoKHllYXI6IG51bWJlcikgPT4geWVhciA8IGVuZFllYXIpXG4gICk7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3B1cGEtY2FsZW5kYXIteWVhci1zZWxlY3RvcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYWxlbmRhci15ZWFyLXNlbGVjdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2FsZW5kYXIteWVhci1zZWxlY3Rvci5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5FbXVsYXRlZCxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIENhbGVuZGFyWWVhclNlbGVjdG9yQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgcmVhZG9ubHkgc2VsZWN0OiBFdmVudEVtaXR0ZXI8bnVtYmVyPiA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIEBWaWV3Q2hpbGQoQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0KVxuICBwcml2YXRlIHJlYWRvbmx5IHZpcnR1YWxTY3JvbGxWaWV3cG9ydDogQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0O1xuXG4gIHB1YmxpYyByZWFkb25seSBoZWFkZXJUaXRsZSQ6IE9ic2VydmFibGU8c3RyaW5nPiA9IHRoaXMuY2FsZW5kYXJUcmFuc2xhdGlvblNlcnZpY2UudHJhbnNsYXRpb24kLnBpcGUoXG4gICAgbWFwKCh0cmFuc2xhdGlvbjogQ2FsZW5kYXJUcmFuc2xhdGlvbikgPT4gdHJhbnNsYXRpb24udGV4dHNbQ2FsZW5kYXJUZXh0S2V5LlNlbGVjdFllYXJdKVxuICApO1xuXG4gIHB1YmxpYyByZWFkb25seSByb3dIZWlnaHRQeDogbnVtYmVyID0gUk9XX0hFSUdIVF9QWDtcblxuICBwdWJsaWMgcmVhZG9ubHkgY3VycmVudFllYXI6IG51bWJlciA9IG5ldyBEYXRlKCkuZ2V0RnVsbFllYXIoKTtcblxuICBwcml2YXRlIHJlYWRvbmx5IHN0YXJ0WWVhcjogbnVtYmVyID0gdGhpcy5jYWxlbmRhckNvbmZpZ1NlcnZpY2Uuc3RhcnRZZWFyO1xuICBwcml2YXRlIHJlYWRvbmx5IGVuZFllYXI6IG51bWJlciA9IHRoaXMuY2FsZW5kYXJDb25maWdTZXJ2aWNlLmVuZFllYXI7XG5cbiAgcHVibGljIHJlYWRvbmx5IHllYXJzVGFibGU6IG51bWJlcltdW10gPSBjcmVhdGVZZWFyc1RhYmxlKHRoaXMuc3RhcnRZZWFyLCB0aGlzLmVuZFllYXIpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVhZG9ubHkgY2FsZW5kYXJUcmFuc2xhdGlvblNlcnZpY2U6IENhbGVuZGFyVHJhbnNsYXRpb25TZXJ2aWNlLFxuICAgIHByaXZhdGUgcmVhZG9ubHkgY2FsZW5kYXJDb25maWdTZXJ2aWNlOiBDYWxlbmRhckNvbmZpZ1NlcnZpY2VcbiAgKSB7fVxuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zY3JvbGxUb0N1cnJlbnRZZWFyKCk7XG4gIH1cblxuICBwdWJsaWMgc2VsZWN0WWVhcih5ZWFyOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdC5lbWl0KHllYXIpO1xuICB9XG5cbiAgcHJpdmF0ZSBzY3JvbGxUb0N1cnJlbnRZZWFyKCk6IHZvaWQge1xuICAgIGlmIChpc05pbCh0aGlzLnZpcnR1YWxTY3JvbGxWaWV3cG9ydCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBjdXJyZW50WWVhckluZGV4OiBudW1iZXIgPSBNYXRoLmZsb29yKCh0aGlzLmN1cnJlbnRZZWFyIC0gdGhpcy5zdGFydFllYXIpIC8gWUVBUlNfSU5fUk9XKTtcblxuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICB0aGlzLnZpcnR1YWxTY3JvbGxWaWV3cG9ydC5zY3JvbGxUb0luZGV4KGN1cnJlbnRZZWFySW5kZXgpO1xuICAgIH0pO1xuICB9XG59XG4iLCI8cHVwYS1jYWxlbmRhci1oZWFkZXI+XG4gIDxoNCBjbGFzcz1cImhlYWRlci1jb250ZW50XCI+XG4gICAge3sgaGVhZGVyVGl0bGUkIHwgYXN5bmMgfX1cbiAgPC9oND5cbjwvcHVwYS1jYWxlbmRhci1oZWFkZXI+XG5cbjxkaXYgY2xhc3M9XCJzY3JvbGxlci13cmFwcGVyXCI+XG4gIDxjZGstdmlydHVhbC1zY3JvbGwtdmlld3BvcnQgcHVwYVNjcm9sbGFibGVDb250ZW50IGNsYXNzPVwic2Nyb2xsZXJcIiBbaXRlbVNpemVdPVwicm93SGVpZ2h0UHhcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2Nyb2xsZXJfX3Jvd1wiICpjZGtWaXJ0dWFsRm9yPVwibGV0IHllYXJzUm93IG9mIHllYXJzVGFibGU7IHRlbXBsYXRlQ2FjaGVTaXplOiAxMFwiPlxuICAgICAgPHB1cGEtY2FsZW5kYXItc2VsZWN0b3ItYnV0dG9uXG4gICAgICAgICpuZ0Zvcj1cImxldCB5ZWFyIG9mIHllYXJzUm93XCJcbiAgICAgICAgW2lzQ3VycmVudF09XCJ5ZWFyID09PSBjdXJyZW50WWVhclwiXG4gICAgICAgIChjbGljayk9XCJzZWxlY3RZZWFyKHllYXIpXCJcbiAgICAgID5cbiAgICAgICAge3sgeWVhciB9fVxuICAgICAgPC9wdXBhLWNhbGVuZGFyLXNlbGVjdG9yLWJ1dHRvbj5cbiAgICA8L2Rpdj5cbiAgPC9jZGstdmlydHVhbC1zY3JvbGwtdmlld3BvcnQ+XG48L2Rpdj5cbiJdfQ==