ngx-picture
Version:
An Angular library to properly size, lazy load images, and use next generation formats
83 lines • 15 kB
JavaScript
import { isPlatformServer } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Inject, Input, Optional, Output, PLATFORM_ID, } from '@angular/core';
import { WINDOW } from 'ngx-window-token';
import { NGX_PICTURE_CONFIG } from '../ngx-picture-config.token';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class PictureComponent {
constructor(platformId, ngxPictureConfig, window, elementRef, changeDetectorRef) {
this.platformId = platformId;
this.ngxPictureConfig = ngxPictureConfig;
this.window = window;
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.imageFormats = this.ngxPictureConfig.imageFormats;
this.breakpoints = this.ngxPictureConfig.breakpoints;
this.lazyLoad = false;
this.srcInterpolator = this.ngxPictureConfig.srcInterpolator;
this.loaded = new EventEmitter();
this.show = false;
}
ngOnInit() {
if (isPlatformServer(this.platformId)) {
this.show = true;
}
}
ngAfterViewInit() {
if (this.lazyLoad && this.window && 'IntersectionObserver' in this.window) {
this.intersectionObserver = new IntersectionObserver((entries) => {
if (entries.find((entry) => {
return (entry.isIntersecting &&
entry.target === this.elementRef.nativeElement);
})) {
this.showLazyPicture();
}
}, {});
this.intersectionObserver.observe(this.elementRef.nativeElement);
}
else {
this.show = true;
this.changeDetectorRef.detectChanges();
}
}
showLazyPicture() {
this.intersectionObserver?.unobserve(this.elementRef.nativeElement);
this.show = true;
this.changeDetectorRef.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PictureComponent, deps: [{ token: PLATFORM_ID }, { token: NGX_PICTURE_CONFIG }, { token: WINDOW, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PictureComponent, selector: "ngx-picture", inputs: { src: "src", imageFormats: "imageFormats", breakpoints: "breakpoints", alt: "alt", lazyLoad: "lazyLoad", srcInterpolator: "srcInterpolator" }, outputs: { loaded: "loaded" }, queries: [{ propertyName: "imgTemplate", first: true, predicate: ["imgTemplate"], descendants: true }], ngImport: i0, template: "<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n <source\r\n *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n [srcset]=\"\r\n srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n \"\r\n [media]=\"breakpoint.key\"\r\n type=\"image/{{ imageFormat }}\"\r\n />\r\n </ng-container>\r\n <ng-container\r\n [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n >\r\n </ng-container>\r\n <ng-template #defaultImageTemplate>\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n (load)=\"loaded.emit($event)\"\r\n class=\"ngx-picture__picture__img\"\r\n loading=\"lazy\"\r\n #img\r\n />\r\n </ng-template>\r\n</picture>\r\n", styles: [":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PictureComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-picture', changeDetection: ChangeDetectionStrategy.OnPush, template: "<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n <source\r\n *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n [srcset]=\"\r\n srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n \"\r\n [media]=\"breakpoint.key\"\r\n type=\"image/{{ imageFormat }}\"\r\n />\r\n </ng-container>\r\n <ng-container\r\n [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n >\r\n </ng-container>\r\n <ng-template #defaultImageTemplate>\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n (load)=\"loaded.emit($event)\"\r\n class=\"ngx-picture__picture__img\"\r\n loading=\"lazy\"\r\n #img\r\n />\r\n </ng-template>\r\n</picture>\r\n", styles: [":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}\n"] }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [NGX_PICTURE_CONFIG]
}] }, { type: Window, decorators: [{
type: Optional
}, {
type: Inject,
args: [WINDOW]
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imgTemplate: [{
type: ContentChild,
args: ['imgTemplate']
}], src: [{
type: Input
}], imageFormats: [{
type: Input
}], breakpoints: [{
type: Input
}], alt: [{
type: Input
}], lazyLoad: [{
type: Input
}], srcInterpolator: [{
type: Input
}], loaded: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGljdHVyZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcGljdHVyZS9zcmMvbGliL3BpY3R1cmUvcGljdHVyZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcGljdHVyZS9zcmMvbGliL3BpY3R1cmUvcGljdHVyZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNuRCxPQUFPLEVBRUwsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBRVosWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsUUFBUSxFQUNSLE1BQU0sRUFDTixXQUFXLEdBRVosTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRTFDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7QUFvQmpFLE1BQU0sT0FBTyxnQkFBZ0I7SUFpQjNCLFlBQytCLFVBQWUsRUFDUixnQkFBa0MsRUFDbEMsTUFBYyxFQUMxQyxVQUFzQixFQUN0QixpQkFBb0M7UUFKZixlQUFVLEdBQVYsVUFBVSxDQUFLO1FBQ1IscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNsQyxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQzFDLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQWpCckMsaUJBQVksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDO1FBQ2xELGdCQUFXLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQztRQUVoRCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLG9CQUFlLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQztRQUN2RCxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUU3QyxTQUFJLEdBQUcsS0FBSyxDQUFDO0lBVVYsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLGdCQUFnQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNyQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNsQjtJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksc0JBQXNCLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUN6RSxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxvQkFBb0IsQ0FDbEQsQ0FBQyxPQUF5QyxFQUFFLEVBQUU7Z0JBQzVDLElBQ0UsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQWdDLEVBQUUsRUFBRTtvQkFDaEQsT0FBTyxDQUNMLEtBQUssQ0FBQyxjQUFjO3dCQUNwQixLQUFLLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUMvQyxDQUFDO2dCQUNKLENBQUMsQ0FBQyxFQUNGO29CQUNBLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztpQkFDeEI7WUFDSCxDQUFDLEVBQ0QsRUFBRSxDQUNILENBQUM7WUFFRixJQUFJLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDbEU7YUFBTTtZQUNMLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN4QztJQUNILENBQUM7SUFFTyxlQUFlO1FBQ3JCLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNwRSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekMsQ0FBQzs4R0E1RFUsZ0JBQWdCLGtCQWtCakIsV0FBVyxhQUNYLGtCQUFrQixhQUNOLE1BQU07a0dBcEJqQixnQkFBZ0Isa1ZDdkM3Qiw2MkJBMkJBOzsyRkRZYSxnQkFBZ0I7a0JBTjVCLFNBQVM7K0JBQ0UsYUFBYSxtQkFHTix1QkFBdUIsQ0FBQyxNQUFNOzswQkFvQjVDLE1BQU07MkJBQUMsV0FBVzs7MEJBQ2xCLE1BQU07MkJBQUMsa0JBQWtCOzswQkFDekIsUUFBUTs7MEJBQUksTUFBTTsyQkFBQyxNQUFNO3FHQW5CQyxXQUFXO3NCQUF2QyxZQUFZO3VCQUFDLGFBQWE7Z0JBR2xCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsZUFBZTtzQkFBdkIsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpc1BsYXRmb3JtU2VydmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHtcclxuICBBZnRlclZpZXdJbml0LFxyXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gIENoYW5nZURldGVjdG9yUmVmLFxyXG4gIENvbXBvbmVudCxcclxuICBDb250ZW50Q2hpbGQsXHJcbiAgRWxlbWVudFJlZixcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgSW5qZWN0LFxyXG4gIElucHV0LFxyXG4gIE9uSW5pdCxcclxuICBPcHRpb25hbCxcclxuICBPdXRwdXQsXHJcbiAgUExBVEZPUk1fSUQsXHJcbiAgVGVtcGxhdGVSZWYsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFdJTkRPVyB9IGZyb20gJ25neC13aW5kb3ctdG9rZW4nO1xyXG5pbXBvcnQgeyBOZ3hQaWN0dXJlQ29uZmlnIH0gZnJvbSAnLi4vbmd4LXBpY3R1cmUtY29uZmlnJztcclxuaW1wb3J0IHsgTkdYX1BJQ1RVUkVfQ09ORklHIH0gZnJvbSAnLi4vbmd4LXBpY3R1cmUtY29uZmlnLnRva2VuJztcclxuXHJcbmV4cG9ydCB0eXBlIEltYWdlRm9ybWF0ID1cclxuICB8ICdhcG5nJ1xyXG4gIHwgJ2JtcCdcclxuICB8ICdnaWYnXHJcbiAgfCAnanBlZydcclxuICB8ICdwbmcnXHJcbiAgfCAnc3ZnJ1xyXG4gIHwgJ3RpZmYnXHJcbiAgfCAnd2VicCdcclxuICB8ICdqcDInXHJcbiAgfCAnanhyJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LXBpY3R1cmUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9waWN0dXJlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9waWN0dXJlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQaWN0dXJlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuICBAQ29udGVudENoaWxkKCdpbWdUZW1wbGF0ZScpIGltZ1RlbXBsYXRlOlxyXG4gICAgfCBUZW1wbGF0ZVJlZjxIVE1MSW1hZ2VFbGVtZW50PlxyXG4gICAgfCB1bmRlZmluZWQ7XHJcbiAgQElucHV0KCkgc3JjOiBzdHJpbmcgfCB1bmRlZmluZWQ7XHJcbiAgQElucHV0KCkgaW1hZ2VGb3JtYXRzID0gdGhpcy5uZ3hQaWN0dXJlQ29uZmlnLmltYWdlRm9ybWF0cztcclxuICBASW5wdXQoKSBicmVha3BvaW50cyA9IHRoaXMubmd4UGljdHVyZUNvbmZpZy5icmVha3BvaW50cztcclxuICBASW5wdXQoKSBhbHQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKSBsYXp5TG9hZCA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKSBzcmNJbnRlcnBvbGF0b3IgPSB0aGlzLm5neFBpY3R1cmVDb25maWcuc3JjSW50ZXJwb2xhdG9yO1xyXG4gIEBPdXRwdXQoKSBsb2FkZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xyXG5cclxuICBzaG93ID0gZmFsc2U7XHJcblxyXG4gIHByaXZhdGUgaW50ZXJzZWN0aW9uT2JzZXJ2ZXI6IEludGVyc2VjdGlvbk9ic2VydmVyIHwgdW5kZWZpbmVkO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIEBJbmplY3QoUExBVEZPUk1fSUQpIHByaXZhdGUgcGxhdGZvcm1JZDogYW55LFxyXG4gICAgQEluamVjdChOR1hfUElDVFVSRV9DT05GSUcpIHByaXZhdGUgbmd4UGljdHVyZUNvbmZpZzogTmd4UGljdHVyZUNvbmZpZyxcclxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoV0lORE9XKSBwcml2YXRlIHdpbmRvdzogV2luZG93LFxyXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxyXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcclxuICApIHt9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgaWYgKGlzUGxhdGZvcm1TZXJ2ZXIodGhpcy5wbGF0Zm9ybUlkKSkge1xyXG4gICAgICB0aGlzLnNob3cgPSB0cnVlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgaWYgKHRoaXMubGF6eUxvYWQgJiYgdGhpcy53aW5kb3cgJiYgJ0ludGVyc2VjdGlvbk9ic2VydmVyJyBpbiB0aGlzLndpbmRvdykge1xyXG4gICAgICB0aGlzLmludGVyc2VjdGlvbk9ic2VydmVyID0gbmV3IEludGVyc2VjdGlvbk9ic2VydmVyKFxyXG4gICAgICAgIChlbnRyaWVzOiBBcnJheTxJbnRlcnNlY3Rpb25PYnNlcnZlckVudHJ5PikgPT4ge1xyXG4gICAgICAgICAgaWYgKFxyXG4gICAgICAgICAgICBlbnRyaWVzLmZpbmQoKGVudHJ5OiBJbnRlcnNlY3Rpb25PYnNlcnZlckVudHJ5KSA9PiB7XHJcbiAgICAgICAgICAgICAgcmV0dXJuIChcclxuICAgICAgICAgICAgICAgIGVudHJ5LmlzSW50ZXJzZWN0aW5nICYmXHJcbiAgICAgICAgICAgICAgICBlbnRyeS50YXJnZXQgPT09IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50XHJcbiAgICAgICAgICAgICAgKTtcclxuICAgICAgICAgICAgfSlcclxuICAgICAgICAgICkge1xyXG4gICAgICAgICAgICB0aGlzLnNob3dMYXp5UGljdHVyZSgpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH0sXHJcbiAgICAgICAge31cclxuICAgICAgKTtcclxuXHJcbiAgICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNob3cgPSB0cnVlO1xyXG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgc2hvd0xhenlQaWN0dXJlKCkge1xyXG4gICAgdGhpcy5pbnRlcnNlY3Rpb25PYnNlcnZlcj8udW5vYnNlcnZlKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcclxuICAgIHRoaXMuc2hvdyA9IHRydWU7XHJcbiAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcclxuICB9XHJcbn1cclxuIiwiPHBpY3R1cmUgY2xhc3M9XCJuZ3gtcGljdHVyZV9fcGljdHVyZVwiICpuZ0lmPVwic2hvd1wiPlxyXG4gIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGltYWdlRm9ybWF0IG9mIGltYWdlRm9ybWF0c1wiPlxyXG4gICAgPHNvdXJjZVxyXG4gICAgICAqbmdGb3I9XCJsZXQgYnJlYWtwb2ludCBvZiBicmVha3BvaW50cyB8IGtleXZhbHVlXCJcclxuICAgICAgW3NyY3NldF09XCJcclxuICAgICAgICBzcmNJbnRlcnBvbGF0b3Ioc3JjLCBpbWFnZUZvcm1hdCwgYnJlYWtwb2ludC5rZXksIGJyZWFrcG9pbnQudmFsdWUpXHJcbiAgICAgIFwiXHJcbiAgICAgIFttZWRpYV09XCJicmVha3BvaW50LmtleVwiXHJcbiAgICAgIHR5cGU9XCJpbWFnZS97eyBpbWFnZUZvcm1hdCB9fVwiXHJcbiAgICAvPlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG4gIDxuZy1jb250YWluZXJcclxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImltZ1RlbXBsYXRlIHx8IGRlZmF1bHRJbWFnZVRlbXBsYXRlXCJcclxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogeyBzcmM6IHNyYywgYWx0OiBhbHQgfSB9XCJcclxuICA+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcbiAgPG5nLXRlbXBsYXRlICNkZWZhdWx0SW1hZ2VUZW1wbGF0ZT5cclxuICAgIDxpbWdcclxuICAgICAgW3NyY109XCJzcmNcIlxyXG4gICAgICBbYWx0XT1cImFsdFwiXHJcbiAgICAgIChsb2FkKT1cImxvYWRlZC5lbWl0KCRldmVudClcIlxyXG4gICAgICBjbGFzcz1cIm5neC1waWN0dXJlX19waWN0dXJlX19pbWdcIlxyXG4gICAgICBsb2FkaW5nPVwibGF6eVwiXHJcbiAgICAgICNpbWdcclxuICAgIC8+XHJcbiAgPC9uZy10ZW1wbGF0ZT5cclxuPC9waWN0dXJlPlxyXG4iXX0=