import { __decorate, __metadata } from "tslib";
import { Component, Input, ViewChild } from '@angular/core';
import { Product } from '../../shared/product';
import { VaLightboxComponent } from '@vendasta/uikit';
var ScreenshotsFilesComponent = /** @class */ (function () {
    function ScreenshotsFilesComponent() {
        this.clickable = true;
    }
    ScreenshotsFilesComponent.prototype.ngOnInit = function () {
    };
    ScreenshotsFilesComponent.prototype.getSrcsetImageUrls = function (imageUrl) {
        return imageUrl + "=s640 640w, " + imageUrl + "=s1280 1280w, " + imageUrl + "=s1920 1920w";
    };
    ScreenshotsFilesComponent.prototype.onClick = function (index) {
        if (this.clickable && this.app && this.app.screenshotUrls) {
            this.lightbox.open({ imageUrls: this.app.screenshotUrls, index: index });
        }
    };
    ScreenshotsFilesComponent.prototype.getFileName = function (fileUrl) {
        if (fileUrl && fileUrl.url) {
            var filename = fileUrl.url.substring(fileUrl.url.lastIndexOf('/') + 1);
            return filename;
        }
        return '';
    };
    __decorate([
        Input(),
        __metadata("design:type", Product)
    ], ScreenshotsFilesComponent.prototype, "app", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], ScreenshotsFilesComponent.prototype, "clickable", void 0);
    __decorate([
        ViewChild('lightboxRef', { static: true }),
        __metadata("design:type", VaLightboxComponent)
    ], ScreenshotsFilesComponent.prototype, "lightbox", void 0);
    ScreenshotsFilesComponent = __decorate([
        Component({
            selector: 'va-screenshots-files',
            template: "<!--Gallery-->\n<div class=\"screenshot-files-content\">\n  <ng-container *ngIf=\"app?.screenshotUrls?.length > 0\">\n    <mat-card class=\"mat-card-section\">\n      <section class=\"app-section-padding\">\n        <h2\n          class=\"app-component-title app-gallery-title\">\n          Gallery</h2>\n        <span>\n          <section class=\"screenshot-containar\">\n            <div class=\"screenshot-item\" *ngFor=\"let img of app?.screenshotUrls; let i = index;\" (click)=\"onClick(i)\">\n                <img class=\"screenshot-img\" [src]=\"img\" [srcset]=\"getSrcsetImageUrls(img)\"/>\n            </div>\n          </section>\n        </span>\n      </section>\n    </mat-card>\n  </ng-container>\n\n  <!--Files-->\n  <ng-container *ngIf=\"app && app?.files?.length > 0\">\n    <mat-card class=\"mat-card-section\">\n      <section  class=\"app-section-padding\">\n        <h2 class=\"app-component-title\">Files & Documents</h2>\n        <span>\n          <div class=\"content-container\">\n            <div *ngFor=\"let file of app?.files\" class='item-container-6'>\n              <a href=\"{{file.url}}\" target=\"_blank\">\n                <div class=\"card-container\">\n                  <mat-card class=\"mat-card-no-shadow\">\n                    <mat-icon  class=\"file-icon file-large-icon\"  role=\"img\" aria-hidden=\"true\">insert_drive_file</mat-icon>\n                    <mat-card-content> {{getFileName(file)}}</mat-card-content>\n                  </mat-card>\n                </div>\n             </a>\n           </div>\n         </div>\n        </span>\n      </section>\n    </mat-card>\n  </ng-container>\n  <va-lightbox #lightboxRef style=\"z-index: 1000;\"></va-lightbox>\n",
            styles: [".row{display:flex;flex-wrap:wrap}.row+.row-gutters{margin-top:0}.row-gutters{margin-top:-20px;margin-left:-20px}.row-gutters>.col{padding-top:20px;padding-left:20px}.col{position:relative;max-width:100%;box-sizing:border-box;flex:1 1 0%}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{flex:0 0 auto}.col-xs-1{width:8.333333%}.col-xs-2{width:16.666667%}.col-xs-3{width:25%}.col-xs-4{width:33.333333%}.col-xs-5{width:41.666667%}.col-xs-6{width:50%}.col-xs-7{width:58.333333%}.col-xs-8{width:66.666667%}.col-xs-9{width:75%}.col-xs-10{width:83.333333%}.col-xs-11{width:92.666667%}.col-xs-12{width:100%}.col-xs-push-1{left:8.33333%}.col-xs-push-2{left:16.66667%}.col-xs-push-3{left:25%}.col-xs-push-4{left:33.33333%}.col-xs-push-5{left:41.66667%}.col-xs-push-6{left:50%}.col-xs-push-7{left:58.33333%}.col-xs-push-8{left:66.66667%}.col-xs-push-9{left:75%}.col-xs-push-10{left:83.33333%}.col-xs-push-11{left:91.66667%}.col-xs-push-12{left:100%}.col-xs-pull-1{right:8.33333%}.col-xs-pull-2{right:16.66667%}.col-xs-pull-3{right:25%}.col-xs-pull-4{right:33.33333%}.col-xs-pull-5{right:41.66667%}.col-xs-pull-6{right:50%}.col-xs-pull-7{right:58.33333%}.col-xs-pull-8{right:66.66667%}.col-xs-pull-9{right:75%}.col-xs-pull-10{right:83.33333%}.col-xs-pull-11{right:91.66667%}.col-xs-pull-12{right:100%}@media screen and (min-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{flex:0 0 auto}.col-sm-1{width:8.333333%}.col-sm-2{width:16.666667%}.col-sm-3{width:25%}.col-sm-4{width:33.333333%}.col-sm-5{width:41.666667%}.col-sm-6{width:50%}.col-sm-7{width:58.333333%}.col-sm-8{width:66.666667%}.col-sm-9{width:75%}.col-sm-10{width:83.333333%}.col-sm-11{width:92.666667%}.col-sm-12{width:100%}.col-sm-push-1{left:8.33333%}.col-sm-push-2{left:16.66667%}.col-sm-push-3{left:25%}.col-sm-push-4{left:33.33333%}.col-sm-push-5{left:41.66667%}.col-sm-push-6{left:50%}.col-sm-push-7{left:58.33333%}.col-sm-push-8{left:66.66667%}.col-sm-push-9{left:75%}.col-sm-push-10{left:83.33333%}.col-sm-push-11{left:91.66667%}.col-sm-push-12{left:100%}.col-sm-pull-1{right:8.33333%}.col-sm-pull-2{right:16.66667%}.col-sm-pull-3{right:25%}.col-sm-pull-4{right:33.33333%}.col-sm-pull-5{right:41.66667%}.col-sm-pull-6{right:50%}.col-sm-pull-7{right:58.33333%}.col-sm-pull-8{right:66.66667%}.col-sm-pull-9{right:75%}.col-sm-pull-10{right:83.33333%}.col-sm-pull-11{right:91.66667%}.col-sm-pull-12{right:100%}}@media screen and (min-width:1024px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{flex:0 0 auto}.col-md-1{width:8.333333%}.col-md-2{width:16.666667%}.col-md-3{width:25%}.col-md-4{width:33.333333%}.col-md-5{width:41.666667%}.col-md-6{width:50%}.col-md-7{width:58.333333%}.col-md-8{width:66.666667%}.col-md-9{width:75%}.col-md-10{width:83.333333%}.col-md-11{width:92.666667%}.col-md-12{width:100%}.col-md-push-1{left:8.33333%}.col-md-push-2{left:16.66667%}.col-md-push-3{left:25%}.col-md-push-4{left:33.33333%}.col-md-push-5{left:41.66667%}.col-md-push-6{left:50%}.col-md-push-7{left:58.33333%}.col-md-push-8{left:66.66667%}.col-md-push-9{left:75%}.col-md-push-10{left:83.33333%}.col-md-push-11{left:91.66667%}.col-md-push-12{left:100%}.col-md-pull-1{right:8.33333%}.col-md-pull-2{right:16.66667%}.col-md-pull-3{right:25%}.col-md-pull-4{right:33.33333%}.col-md-pull-5{right:41.66667%}.col-md-pull-6{right:50%}.col-md-pull-7{right:58.33333%}.col-md-pull-8{right:66.66667%}.col-md-pull-9{right:75%}.col-md-pull-10{right:83.33333%}.col-md-pull-11{right:91.66667%}.col-md-pull-12{right:100%}}@media screen and (min-width:1440px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{flex:0 0 auto}.col-lg-1{width:8.333333%}.col-lg-2{width:16.666667%}.col-lg-3{width:25%}.col-lg-4{width:33.333333%}.col-lg-5{width:41.666667%}.col-lg-6{width:50%}.col-lg-7{width:58.333333%}.col-lg-8{width:66.666667%}.col-lg-9{width:75%}.col-lg-10{width:83.333333%}.col-lg-11{width:92.666667%}.col-lg-12{width:100%}.col-lg-push-1{left:8.33333%}.col-lg-push-2{left:16.66667%}.col-lg-push-3{left:25%}.col-lg-push-4{left:33.33333%}.col-lg-push-5{left:41.66667%}.col-lg-push-6{left:50%}.col-lg-push-7{left:58.33333%}.col-lg-push-8{left:66.66667%}.col-lg-push-9{left:75%}.col-lg-push-10{left:83.33333%}.col-lg-push-11{left:91.66667%}.col-lg-push-12{left:100%}.col-lg-pull-1{right:8.33333%}.col-lg-pull-2{right:16.66667%}.col-lg-pull-3{right:25%}.col-lg-pull-4{right:33.33333%}.col-lg-pull-5{right:41.66667%}.col-lg-pull-6{right:50%}.col-lg-pull-7{right:58.33333%}.col-lg-pull-8{right:66.66667%}.col-lg-pull-9{right:75%}.col-lg-pull-10{right:83.33333%}.col-lg-pull-11{right:91.66667%}.col-lg-pull-12{right:100%}}snack-bar-container.snackbar-error simple-snack-bar:before{content:\"ERROR: \";color:red;font-weight:700;padding-right:5px}snack-bar-container.snackbar-error button.mat-simple-snackbar-action{margin-left:16px}snack-bar-container.snackbar-success simple-snack-bar:before{content:\"SUCCESS: \";color:#0f0;font-weight:700;padding-right:5px}snack-bar-container.snackbar-success button.mat-simple-snackbar-action{margin-left:16px}.mat-card-section{margin:12px}.app-component-title{font-size:16px;font-weight:300;margin-top:0}.app-gallery-title{margin-bottom:24px}section{padding:24px}.app-section-padding{padding:0}.product-content{display:flex;background-color:#fff}@media screen and (max-width:600px){.product-content{flex-direction:column}}.screenshot-files-content{background-color:#e0e0e0}.layout-flex{display:flex}.layout-block{display:block}.edit-button-layout{align-items:center;padding:8px 8px 16px}.left-column-layout{width:100%}.ksp-layout{width:100%;padding-bottom:8px;padding-top:32px}.faqs-edit-inline-layout{padding:16px 24px}.text-color{color:#000}.multi-field-layout{width:100%;display:inline-block;justify-content:center;padding:12px;margin-bottom:10px}.drag-icon{margin-right:8px}.header{display:flex;flex-direction:row;justify-content:center;align-items:center}.row{display:flex;flex-wrap:wrap;padding:0 4px}.screenshot-containar{display:flex;flex-wrap:wrap}.screenshot-item{display:block;flex-basis:20%;box-sizing:border-box}@media screen and (max-width:1024px){.screenshot-item{flex-basis:50%}}.screenshot-img{height:150px;width:100%;-o-object-fit:cover;object-fit:cover;padding:10px}:host ::ng-deep div.mat-tab-body-content{background-color:#e0e0e0;padding:22px}@media screen and (max-width:600px){.screenshot-item{flex-basis:100%}:host ::ng-deep div.mat-tab-body-content{padding:0}}.content-container{display:flex;flex-direction:row;flex-wrap:wrap;height:80%}.card-container{height:100%}.item-container-6{width:16.6%}@media screen and (max-width:1280px){.item-container-6{width:49%}}@media screen and (max-width:840px){.item-container-6{width:49%}}.file-large-icon{font-size:50px}@media screen and (max-width:600px){.content-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}.item-container-6{width:100%}.file-large-icon{font-size:24px}}.mat-card-no-shadow{box-shadow:none}"]
        }),
        __metadata("design:paramtypes", [])
    ], ScreenshotsFilesComponent);
    return ScreenshotsFilesComponent;
}());
export { ScreenshotsFilesComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2NyZWVuc2hvdHMtZmlsZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHZlbmRhc3RhL3N0b3JlLyIsInNvdXJjZXMiOlsibGliL3Byb2R1Y3QtZGV0YWlscy12Mi9zY3JlZW5zaG90cy1maWxlcy9zY3JlZW5zaG90cy1maWxlcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDL0MsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFPcEQ7SUFHRTtRQURTLGNBQVMsR0FBRyxJQUFJLENBQUM7SUFDVixDQUFDO0lBRWpCLDRDQUFRLEdBQVI7SUFDQSxDQUFDO0lBR0Qsc0RBQWtCLEdBQWxCLFVBQW1CLFFBQWdCO1FBQ2pDLE9BQVUsUUFBUSxvQkFBZSxRQUFRLHNCQUFpQixRQUFRLGlCQUFjLENBQUM7SUFDbkYsQ0FBQztJQUVELDJDQUFPLEdBQVAsVUFBUSxLQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFO1lBQ3pELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsY0FBYyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUMsQ0FBQyxDQUFDO1NBQ3hFO0lBQ0gsQ0FBQztJQUNELCtDQUFXLEdBQVgsVUFBYSxPQUFhO1FBQ3hCLElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxHQUFHLEVBQUU7WUFDMUIsSUFBTSxRQUFRLEdBQUcsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDekUsT0FBTyxRQUFRLENBQUM7U0FDakI7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUF2QlE7UUFBUixLQUFLLEVBQUU7a0NBQU0sT0FBTzswREFBQztJQUNiO1FBQVIsS0FBSyxFQUFFOztnRUFBa0I7SUFLa0I7UUFBM0MsU0FBUyxDQUFDLGFBQWEsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQztrQ0FBVyxtQkFBbUI7K0RBQUM7SUFQL0QseUJBQXlCO1FBTHJDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxzQkFBc0I7WUFDaEMsNnJEQUFpRDs7U0FFbEQsQ0FBQzs7T0FDVyx5QkFBeUIsQ0F5QnJDO0lBQUQsZ0NBQUM7Q0FBQSxBQXpCRCxJQXlCQztTQXpCWSx5QkFBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvZHVjdCB9IGZyb20gJy4uLy4uL3NoYXJlZC9wcm9kdWN0JztcbmltcG9ydCB7VmFMaWdodGJveENvbXBvbmVudH0gZnJvbSAnQHZlbmRhc3RhL3Vpa2l0JztcbmltcG9ydCB7RmlsZX0gZnJvbSAnLi4vLi4vZmlsZXMvc2hhcmVkL2ZpbGUubW9kZWwnXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YS1zY3JlZW5zaG90cy1maWxlcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zY3JlZW5zaG90cy1maWxlcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NjcmVlbnNob3RzLWZpbGVzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU2NyZWVuc2hvdHNGaWxlc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGFwcDogUHJvZHVjdDtcbiAgQElucHV0KCkgY2xpY2thYmxlID0gdHJ1ZTtcbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuICBAVmlld0NoaWxkKCdsaWdodGJveFJlZicsIHsgc3RhdGljOiB0cnVlIH0pIGxpZ2h0Ym94OiBWYUxpZ2h0Ym94Q29tcG9uZW50O1xuXG4gIGdldFNyY3NldEltYWdlVXJscyhpbWFnZVVybDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYCR7aW1hZ2VVcmx9PXM2NDAgNjQwdywgJHtpbWFnZVVybH09czEyODAgMTI4MHcsICR7aW1hZ2VVcmx9PXMxOTIwIDE5MjB3YDtcbiAgfVxuXG4gIG9uQ2xpY2soaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLmNsaWNrYWJsZSAmJiB0aGlzLmFwcCAmJiB0aGlzLmFwcC5zY3JlZW5zaG90VXJscykge1xuICAgICAgdGhpcy5saWdodGJveC5vcGVuKHtpbWFnZVVybHM6IHRoaXMuYXBwLnNjcmVlbnNob3RVcmxzLCBpbmRleDogaW5kZXh9KTtcbiAgICB9XG4gIH1cbiAgZ2V0RmlsZU5hbWUgKGZpbGVVcmw6IEZpbGUpOiBzdHJpbmcge1xuICAgIGlmIChmaWxlVXJsICYmIGZpbGVVcmwudXJsKSB7XG4gICAgICBjb25zdCBmaWxlbmFtZSA9IGZpbGVVcmwudXJsLnN1YnN0cmluZyhmaWxlVXJsLnVybC5sYXN0SW5kZXhPZignLycpICsgMSk7XG4gICAgICByZXR1cm4gZmlsZW5hbWU7XG4gICAgfVxuICAgIHJldHVybiAnJztcbiAgfVxufVxuIl19