UNPKG

@vendasta/store

Version:

Components and data for Store

163 lines 19.6 kB
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { ImageTransformationService } from '@vendasta/image-transformation'; import * as i0 from "@angular/core"; import * as i1 from "@vendasta/image-transformation"; import * as i2 from "@angular/material/card"; import * as i3 from "@vendasta/uikit"; import * as i4 from "./pricing/pricing.component"; import * as i5 from "@angular/material/button"; import * as i6 from "@angular/common"; import * as i7 from "@vendasta/galaxy/tooltip"; import * as i8 from "@ngx-translate/core"; export class StoreCardComponent { constructor(imageTransformationService) { this.imageTransformationService = imageTransformationService; this.showAllPrices = false; this.purchasedClicked = new EventEmitter(); this.cardClicked = new EventEmitter(); this.descriptionClicked = new EventEmitter(); this.bannerClicked = new EventEmitter(); } getBannerColorForName() { // determine an icon color for a product with no icon by using the product name const COLOR_CODES = [ '#EF5350', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC', '#FFCA28', '#EC407A', '#26C6DA', '#FF7B57', ]; let nameSum = 0; const defaultColor = '#808080'; if (!this.item.name) { return defaultColor; } for (let i = 0; i < this.item.name.length; i++) { nameSum += this.item.name[i].charCodeAt(0); } const index = nameSum % COLOR_CODES.length; return COLOR_CODES[index]; } getSrcsetHeaderUrls(imageUrl) { return this.imageTransformationService.getSrcSetForImage(imageUrl, [680, 1360, 2720]); } } StoreCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoreCardComponent, deps: [{ token: i1.ImageTransformationService }], target: i0.ɵɵFactoryTarget.Component }); StoreCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: StoreCardComponent, selector: "app-store-card", inputs: { item: "item", showAllPrices: "showAllPrices" }, outputs: { purchasedClicked: "purchasedClicked", cardClicked: "cardClicked", descriptionClicked: "descriptionClicked", bannerClicked: "bannerClicked" }, ngImport: i0, template: ` <mat-card class="hover-card" *ngIf="item" (click)="cardClicked.emit(item)"> <div class="hover-area"> <div class="product-banner" (click)="bannerClicked.emit(item)" [style.background-color]="item.headerImageUrl ? '' : getBannerColorForName()" > <img class="img-container" *ngIf="item.headerImageUrl" [src]="item.headerImageUrl" [srcset]="getSrcsetHeaderUrls(item.headerImageUrl)" /> </div> <div class="description" (click)="descriptionClicked.emit(item)"> <mat-card-header class="store-card-header"> <va-icon mat-card-avatar [diameter]="40" [name]="item.name" [iconUrl]="item.iconUrl"></va-icon> <mat-card-title [glxyTooltip]="item.name">{{ item.name }}</mat-card-title> <mat-card-subtitle> <ng-container *ngIf="item.pricing; else formatted"> <app-pricing [pricing]="item.pricing" [highlightPrice]="false" [showAllPrices]="showAllPrices" ></app-pricing> </ng-container> <ng-template #formatted>{{ item.formattedPrice }}</ng-template> </mat-card-subtitle> </mat-card-header> <mat-card-content>{{ item.tagline }}</mat-card-content> </div> <button *ngIf="item.purchased !== undefined" mat-button color="primary" class="enabled-indicator" (click)="purchasedClicked.emit(item)" [disabled]="item.purchased" > <i *ngIf="!item.purchased" class="material-icons">add</i> <i *ngIf="item.purchased" class="material-icons" style="color: #39B74A">check</i> <span> {{ (item.purchased ? 'FRONTEND.STORE.ENABLED_UPPER' : 'FRONTEND.STORE.ENABLE_UPPER') | translate }} </span> </button> </div> </mat-card> `, isInline: true, styles: [":host{position:relative}::ng-deep .store-card-header .mat-card-header-text{width:100%}mat-card.hover-card{overflow:hidden;padding:0;margin-bottom:0}mat-card.hover-card mat-card-title,mat-card.hover-card mat-card-subtitle{margin:0 80px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}mat-card.hover-card mat-card-subtitle{font-size:12px;margin-top:4px}.hover-area{position:relative;cursor:pointer}@media screen and (min-width: 480px){.hover-area{padding-top:55%}.hover-area:hover .description{top:0}.hover-area:hover .enabled-indicator span{width:70px}}.product-banner{max-height:133px;overflow:hidden;display:flex;width:100%;height:100px;align-items:center;justify-content:center}.product-banner img{max-width:100%}@media screen and (min-width: 480px){.product-banner{max-height:none;position:absolute;height:60%;top:0}}.description{box-sizing:border-box;padding:10px 16px 0;overflow:hidden;background:#ffffff;color:#212121;transition:.3s ease all}.description:after{content:\"\";display:block;width:100%;height:40%;position:absolute;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,0) 40%,white 70%)}@media screen and (min-width: 480px){.description{position:absolute;top:60%;width:100%;height:100%}.description:after{height:70%}}mat-card-header{box-sizing:border-box;padding-bottom:16px;margin:0;height:40%;display:flex;align-items:center}mat-card-content{min-height:40px;max-height:80px;padding:16px;margin:0 -16px;border-top:1px solid #e0e0e0;font-size:12px}@media screen and (min-width: 480px){mat-card-content{min-height:0;max-height:none}}.enabled-indicator{position:absolute;right:8px;bottom:8px}.enabled-indicator span{display:inline-block;width:70px;overflow:hidden;transition:.3s ease all}@media screen and (min-width: 480px){.enabled-indicator span{width:0}}button[mat-button]{padding:0 8px;min-width:0}mat-card-actions{position:relative;padding:8px!important;margin:0!important;text-align:right;border-top:1px solid #e0e0e0;background-color:#fff;color:#212121}.status{font-size:14px}.img-container{height:100%;width:100%}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.IconComponent, selector: "va-icon", inputs: ["iconUrl", "name", "diameter", "backgroundColor", "borderColor", "fontColor"] }, { type: i4.VaPricingComponent, selector: "app-pricing" }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i7.GalaxyTooltip, selector: "[glxyTooltip]", inputs: ["glxyTooltip", "tooltipTitle", "tooltipPositions", "highContrast"], exportAs: ["glxyTooltip"] }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }], pipes: { "translate": i8.TranslatePipe } }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoreCardComponent, decorators: [{ type: Component, args: [{ selector: 'app-store-card', template: ` <mat-card class="hover-card" *ngIf="item" (click)="cardClicked.emit(item)"> <div class="hover-area"> <div class="product-banner" (click)="bannerClicked.emit(item)" [style.background-color]="item.headerImageUrl ? '' : getBannerColorForName()" > <img class="img-container" *ngIf="item.headerImageUrl" [src]="item.headerImageUrl" [srcset]="getSrcsetHeaderUrls(item.headerImageUrl)" /> </div> <div class="description" (click)="descriptionClicked.emit(item)"> <mat-card-header class="store-card-header"> <va-icon mat-card-avatar [diameter]="40" [name]="item.name" [iconUrl]="item.iconUrl"></va-icon> <mat-card-title [glxyTooltip]="item.name">{{ item.name }}</mat-card-title> <mat-card-subtitle> <ng-container *ngIf="item.pricing; else formatted"> <app-pricing [pricing]="item.pricing" [highlightPrice]="false" [showAllPrices]="showAllPrices" ></app-pricing> </ng-container> <ng-template #formatted>{{ item.formattedPrice }}</ng-template> </mat-card-subtitle> </mat-card-header> <mat-card-content>{{ item.tagline }}</mat-card-content> </div> <button *ngIf="item.purchased !== undefined" mat-button color="primary" class="enabled-indicator" (click)="purchasedClicked.emit(item)" [disabled]="item.purchased" > <i *ngIf="!item.purchased" class="material-icons">add</i> <i *ngIf="item.purchased" class="material-icons" style="color: #39B74A">check</i> <span> {{ (item.purchased ? 'FRONTEND.STORE.ENABLED_UPPER' : 'FRONTEND.STORE.ENABLE_UPPER') | translate }} </span> </button> </div> </mat-card> `, styles: [":host{position:relative}::ng-deep .store-card-header .mat-card-header-text{width:100%}mat-card.hover-card{overflow:hidden;padding:0;margin-bottom:0}mat-card.hover-card mat-card-title,mat-card.hover-card mat-card-subtitle{margin:0 80px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}mat-card.hover-card mat-card-subtitle{font-size:12px;margin-top:4px}.hover-area{position:relative;cursor:pointer}@media screen and (min-width: 480px){.hover-area{padding-top:55%}.hover-area:hover .description{top:0}.hover-area:hover .enabled-indicator span{width:70px}}.product-banner{max-height:133px;overflow:hidden;display:flex;width:100%;height:100px;align-items:center;justify-content:center}.product-banner img{max-width:100%}@media screen and (min-width: 480px){.product-banner{max-height:none;position:absolute;height:60%;top:0}}.description{box-sizing:border-box;padding:10px 16px 0;overflow:hidden;background:#ffffff;color:#212121;transition:.3s ease all}.description:after{content:\"\";display:block;width:100%;height:40%;position:absolute;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,0) 40%,white 70%)}@media screen and (min-width: 480px){.description{position:absolute;top:60%;width:100%;height:100%}.description:after{height:70%}}mat-card-header{box-sizing:border-box;padding-bottom:16px;margin:0;height:40%;display:flex;align-items:center}mat-card-content{min-height:40px;max-height:80px;padding:16px;margin:0 -16px;border-top:1px solid #e0e0e0;font-size:12px}@media screen and (min-width: 480px){mat-card-content{min-height:0;max-height:none}}.enabled-indicator{position:absolute;right:8px;bottom:8px}.enabled-indicator span{display:inline-block;width:70px;overflow:hidden;transition:.3s ease all}@media screen and (min-width: 480px){.enabled-indicator span{width:0}}button[mat-button]{padding:0 8px;min-width:0}mat-card-actions{position:relative;padding:8px!important;margin:0!important;text-align:right;border-top:1px solid #e0e0e0;background-color:#fff;color:#212121}.status{font-size:14px}.img-container{height:100%;width:100%}\n"] }] }], ctorParameters: function () { return [{ type: i1.ImageTransformationService }]; }, propDecorators: { item: [{ type: Input }], showAllPrices: [{ type: Input }], purchasedClicked: [{ type: Output }], cardClicked: [{ type: Output }], descriptionClicked: [{ type: Output }], bannerClicked: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3N0b3JlL3NyYy9saWIvc3RvcmUtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUd2RSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7Ozs7Ozs7OztBQXVENUUsTUFBTSxPQUFPLGtCQUFrQjtJQVE3QixZQUFvQiwwQkFBc0Q7UUFBdEQsK0JBQTBCLEdBQTFCLDBCQUEwQixDQUE0QjtRQU5qRSxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUNyQixxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO1FBQ2pELGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztRQUM1Qyx1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO1FBQ25ELGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUVxQixDQUFDO0lBRTlFLHFCQUFxQjtRQUNuQiwrRUFBK0U7UUFDL0UsTUFBTSxXQUFXLEdBQUc7WUFDbEIsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1NBQ1YsQ0FBQztRQUNGLElBQUksT0FBTyxHQUFHLENBQUMsQ0FBQztRQUNoQixNQUFNLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ25CLE9BQU8sWUFBWSxDQUFDO1NBQ3JCO1FBQ0QsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUM5QyxPQUFPLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQzVDO1FBQ0QsTUFBTSxLQUFLLEdBQUcsT0FBTyxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUM7UUFDM0MsT0FBTyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVELG1CQUFtQixDQUFDLFFBQWdCO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLDBCQUEwQixDQUFDLGlCQUFpQixDQUFDLFFBQVEsRUFBRSxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUN4RixDQUFDOzsrR0FyQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IseVFBbkRuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0RUOzJGQUdVLGtCQUFrQjtrQkFyRDlCLFNBQVM7K0JBQ0UsZ0JBQWdCLFlBQ2hCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnRFQ7aUhBSVEsSUFBSTtzQkFBWixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0ksZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTdG9yZUl0ZW0gfSBmcm9tICcuL3N0b3JlLWl0ZW0nO1xuaW1wb3J0IHsgSW1hZ2VUcmFuc2Zvcm1hdGlvblNlcnZpY2UgfSBmcm9tICdAdmVuZGFzdGEvaW1hZ2UtdHJhbnNmb3JtYXRpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc3RvcmUtY2FyZCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1jYXJkIGNsYXNzPVwiaG92ZXItY2FyZFwiICpuZ0lmPVwiaXRlbVwiIChjbGljayk9XCJjYXJkQ2xpY2tlZC5lbWl0KGl0ZW0pXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiaG92ZXItYXJlYVwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3M9XCJwcm9kdWN0LWJhbm5lclwiXG4gICAgICAgICAgKGNsaWNrKT1cImJhbm5lckNsaWNrZWQuZW1pdChpdGVtKVwiXG4gICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiaXRlbS5oZWFkZXJJbWFnZVVybCA/ICcnIDogZ2V0QmFubmVyQ29sb3JGb3JOYW1lKClcIlxuICAgICAgICA+XG4gICAgICAgICAgPGltZ1xuICAgICAgICAgICAgY2xhc3M9XCJpbWctY29udGFpbmVyXCJcbiAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5oZWFkZXJJbWFnZVVybFwiXG4gICAgICAgICAgICBbc3JjXT1cIml0ZW0uaGVhZGVySW1hZ2VVcmxcIlxuICAgICAgICAgICAgW3NyY3NldF09XCJnZXRTcmNzZXRIZWFkZXJVcmxzKGl0ZW0uaGVhZGVySW1hZ2VVcmwpXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRlc2NyaXB0aW9uXCIgKGNsaWNrKT1cImRlc2NyaXB0aW9uQ2xpY2tlZC5lbWl0KGl0ZW0pXCI+XG4gICAgICAgICAgPG1hdC1jYXJkLWhlYWRlciBjbGFzcz1cInN0b3JlLWNhcmQtaGVhZGVyXCI+XG4gICAgICAgICAgICA8dmEtaWNvbiBtYXQtY2FyZC1hdmF0YXIgW2RpYW1ldGVyXT1cIjQwXCIgW25hbWVdPVwiaXRlbS5uYW1lXCIgW2ljb25VcmxdPVwiaXRlbS5pY29uVXJsXCI+PC92YS1pY29uPlxuICAgICAgICAgICAgPG1hdC1jYXJkLXRpdGxlIFtnbHh5VG9vbHRpcF09XCJpdGVtLm5hbWVcIj57eyBpdGVtLm5hbWUgfX08L21hdC1jYXJkLXRpdGxlPlxuICAgICAgICAgICAgPG1hdC1jYXJkLXN1YnRpdGxlPlxuICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5wcmljaW5nOyBlbHNlIGZvcm1hdHRlZFwiPlxuICAgICAgICAgICAgICAgIDxhcHAtcHJpY2luZ1xuICAgICAgICAgICAgICAgICAgW3ByaWNpbmddPVwiaXRlbS5wcmljaW5nXCJcbiAgICAgICAgICAgICAgICAgIFtoaWdobGlnaHRQcmljZV09XCJmYWxzZVwiXG4gICAgICAgICAgICAgICAgICBbc2hvd0FsbFByaWNlc109XCJzaG93QWxsUHJpY2VzXCJcbiAgICAgICAgICAgICAgICA+PC9hcHAtcHJpY2luZz5cbiAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjZm9ybWF0dGVkPnt7IGl0ZW0uZm9ybWF0dGVkUHJpY2UgfX08L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgPC9tYXQtY2FyZC1zdWJ0aXRsZT5cbiAgICAgICAgICA8L21hdC1jYXJkLWhlYWRlcj5cbiAgICAgICAgICA8bWF0LWNhcmQtY29udGVudD57eyBpdGVtLnRhZ2xpbmUgfX08L21hdC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLnB1cmNoYXNlZCAhPT0gdW5kZWZpbmVkXCJcbiAgICAgICAgICBtYXQtYnV0dG9uXG4gICAgICAgICAgY29sb3I9XCJwcmltYXJ5XCJcbiAgICAgICAgICBjbGFzcz1cImVuYWJsZWQtaW5kaWNhdG9yXCJcbiAgICAgICAgICAoY2xpY2spPVwicHVyY2hhc2VkQ2xpY2tlZC5lbWl0KGl0ZW0pXCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiaXRlbS5wdXJjaGFzZWRcIlxuICAgICAgICA+XG4gICAgICAgICAgPGkgKm5nSWY9XCIhaXRlbS5wdXJjaGFzZWRcIiBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCI+YWRkPC9pPlxuICAgICAgICAgIDxpICpuZ0lmPVwiaXRlbS5wdXJjaGFzZWRcIiBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCIgc3R5bGU9XCJjb2xvcjogIzM5Qjc0QVwiPmNoZWNrPC9pPlxuICAgICAgICAgIDxzcGFuPlxuICAgICAgICAgICAge3sgKGl0ZW0ucHVyY2hhc2VkID8gJ0ZST05URU5ELlNUT1JFLkVOQUJMRURfVVBQRVInIDogJ0ZST05URU5ELlNUT1JFLkVOQUJMRV9VUFBFUicpIHwgdHJhbnNsYXRlIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWNhcmQ+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL3N0b3JlLWNhcmQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU3RvcmVDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbTogU3RvcmVJdGVtO1xuICBASW5wdXQoKSBzaG93QWxsUHJpY2VzID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBwdXJjaGFzZWRDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG4gIEBPdXRwdXQoKSBjYXJkQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8U3RvcmVJdGVtPigpO1xuICBAT3V0cHV0KCkgZGVzY3JpcHRpb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG4gIEBPdXRwdXQoKSBiYW5uZXJDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZTogSW1hZ2VUcmFuc2Zvcm1hdGlvblNlcnZpY2UpIHt9XG5cbiAgZ2V0QmFubmVyQ29sb3JGb3JOYW1lKCk6IHN0cmluZyB7XG4gICAgLy8gZGV0ZXJtaW5lIGFuIGljb24gY29sb3IgZm9yIGEgcHJvZHVjdCB3aXRoIG5vIGljb24gYnkgdXNpbmcgdGhlIHByb2R1Y3QgbmFtZVxuICAgIGNvbnN0IENPTE9SX0NPREVTID0gW1xuICAgICAgJyNFRjUzNTAnLFxuICAgICAgJyM0MkE1RjUnLFxuICAgICAgJyM2NkJCNkEnLFxuICAgICAgJyNGRkE3MjYnLFxuICAgICAgJyNBQjQ3QkMnLFxuICAgICAgJyNGRkNBMjgnLFxuICAgICAgJyNFQzQwN0EnLFxuICAgICAgJyMyNkM2REEnLFxuICAgICAgJyNGRjdCNTcnLFxuICAgIF07XG4gICAgbGV0IG5hbWVTdW0gPSAwO1xuICAgIGNvbnN0IGRlZmF1bHRDb2xvciA9ICcjODA4MDgwJztcbiAgICBpZiAoIXRoaXMuaXRlbS5uYW1lKSB7XG4gICAgICByZXR1cm4gZGVmYXVsdENvbG9yO1xuICAgIH1cbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMuaXRlbS5uYW1lLmxlbmd0aDsgaSsrKSB7XG4gICAgICBuYW1lU3VtICs9IHRoaXMuaXRlbS5uYW1lW2ldLmNoYXJDb2RlQXQoMCk7XG4gICAgfVxuICAgIGNvbnN0IGluZGV4ID0gbmFtZVN1bSAlIENPTE9SX0NPREVTLmxlbmd0aDtcbiAgICByZXR1cm4gQ09MT1JfQ09ERVNbaW5kZXhdO1xuICB9XG5cbiAgZ2V0U3Jjc2V0SGVhZGVyVXJscyhpbWFnZVVybDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5pbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZS5nZXRTcmNTZXRGb3JJbWFnZShpbWFnZVVybCwgWzY4MCwgMTM2MCwgMjcyMF0pO1xuICB9XG59XG4iXX0=