ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/material/w-material-service-view/w-material-service-view.component.ts

@@ -1,244 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { WappingService } from '../shared/models/wapping-service';
-import { WappingServiceImage } from '../shared/models/wapping-service-image';
-import { CardStatus, SendingStatus, WappingServiceType } from '../shared/models/enums.model';
-import { WappingServiceTranslations } from '../shared/models/wapping-service-translations.model';
-import { DomSanitizer } from '@angular/platform-browser';
-import { WappingServiceTemplate } from '../shared/models/wapping-service-template.model';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { WFileB64 } from '../../shared/models/w-file-b64.model';
-import { WImageCropperData } from '../../shared/models/w-image-cropper-data.model';
-import { WImageCropperComponent } from '../../file/w-image-cropper/w-image-cropper.component';
-
-@Component({
-    selector: 'w-material-service-view',
-    templateUrl: './w-material-service-view.component.html',
-    styleUrls: ['./w-material-service-view.component.scss'],
-    standalone: false
-})
-export class WMaterialServiceViewComponent implements OnInit, OnChanges {
-
-  serviceId!: number;
-  wappingServiceImages!: WappingServiceImage[];
-  serviceStatus!: string;
-  isSendGiftCard: boolean = false;
-  disabledToggle: boolean = false;
-  allowSelectSendGiftCard: boolean = true;
-  enumSendingStatus: typeof SendingStatus = SendingStatus;
-  ecardStatus: typeof CardStatus = CardStatus
-  translations: any;
-  isDrawService: boolean = false;
-  
-  @Input() forceMobile = false;
-
-  @Input('wappingServicesTranslations') wappingServicesTranslations: WappingServiceTranslations = {
-    activedService: 'Activada',
-    disabledService: 'Desactivada',
-    scheduledLabel: 'Programada para enviar a {{name}}',
-    sendLabel: 'Enviada a {{name}}',
-    cardGenerated: 'Tu tarjeta estará disponible para el envío en breves instantes',
-    receivedLabel: "Enviada por {{name}}",
-    showMore: "Mostrar más",
-    participate: "Participar"
-  };
-  
-  @Input('canParticipateDraw') canParticipateDraw: boolean = false;
-  private _wappingService!: WappingService;
-
-  @Input() set wappingService(value: WappingService) {
-    this._wappingService = value;
-    if(value) this.getWappingService(value);
-  }
-
-  get wappingService() {
-    return this._wappingService;
-  }
-
-  @Output('wappingServiceSelected') wappingServiceSelected = new EventEmitter<boolean>();
-  @Output('participateDraw') participateDraw = new EventEmitter<void>();
-
-  @Input() isDevModeActive: boolean = false;
-  @Input() defaultImage!: WFileB64 | string;
-
-  @Input() croppedImageConfiguration: WImageCropperData = {
-    roundedCropper: false, 
-    configuredAspectRatio: 4/3, 
-    viewPortHeihtPx: 600, 
-    viewPortWidthPx: 800, 
-    maxFileSize: 2000
-  };
-  
-  @Input() croppedDialogTranslations: any;
-  images: any[] = [];
-  @Output() onDefaultImageEvent = new EventEmitter<WFileB64>();
-  @Input() isNoImage: boolean = false;
-  @Input() onHoverImageTooltip: string = 'Upload image';
-
-  ref!: DynamicDialogRef<WImageCropperComponent> | null;
-  
-  constructor(
-    private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer, 
-    private dialogService: DialogService) {
-    this.matIconRegistry.addSvgIcon("calendar", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-calendar.svg"));
-  }
-
-  ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if(changes['defaultImage'] && changes['defaultImage'].currentValue){
-      this.defaultImage = changes['defaultImage'].currentValue;
-
-      this.isNoImage = false;
-      if(this.isDevModeActive == true){
-        if(this.defaultImage){
-          if(this.isWFileImage(this.defaultImage)){
-            this.wappingServiceImages = [{ path: (this.defaultImage as WFileB64).fileBase64 }];
-          }else{
-            this.wappingServiceImages = [{ path: (this.defaultImage as string)}];
-          }
-        }
-      }
-    }
-
-    if(changes['defaultImage'] && !changes['defaultImage'].currentValue){
-      if(this.isDevModeActive){
-        this.isNoImage = true;
-        this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }]
-      }
-    }
-  }
-
-  getWappingService(wappService: WappingService) {
-    this.isSendGiftCard = false
-    if (wappService.active)
-      this.serviceStatus = this.wappingServicesTranslations.activedService.toUpperCase();
-    else
-      this.serviceStatus = this.wappingServicesTranslations.disabledService.toUpperCase();
-    if (wappService.dataReqToSendCard && wappService.dataReqToSendCard.dataReqToSendCardId != 0) {
-      this.isSendGiftCard = true
-      if (wappService.enumTypeStatusECardID == this.ecardStatus.sent) {
-        this.allowSelectSendGiftCard = false;
-      }
-    }
-    if (wappService.enumTypeStatusECardID == this.ecardStatus.generated)
-      this.allowSelectSendGiftCard = false;
-
-    if(wappService.type == WappingServiceType.Draws) {
-      this.isDrawService = true;
-    }
-
-    this.getWappingServiceTiles(this.wappingService);
-
-    if(this.isDevModeActive == false){
-      this.getWappingServiceImages();
-    }
-  }
-
-  getWappingServiceTiles(service: WappingService) {
-    if (service.wappingServiceTemplates != null) {
-      service.wappingServiceTemplates.forEach((wappingServiceTile: WappingServiceTemplate) => {
-        if(wappingServiceTile.detailTitle){
-          this.wappingService.tile3 = this.domSanitizer.bypassSecurityTrustHtml(wappingServiceTile.detailTitle);
-        } else {
-          this.wappingService.tile3 = '';
-        }
-        if(wappingServiceTile.detailHeader){
-          this.wappingService.tile1 = this.domSanitizer.bypassSecurityTrustHtml(wappingServiceTile.detailHeader);
-        } else {
-          this.wappingService.tile1 = '';
-        }
-        if(wappingServiceTile.detailFoot){
-          this.wappingService.tile2 = this.domSanitizer.bypassSecurityTrustHtml(wappingServiceTile.detailFoot);
-        } else {
-          this.wappingService.tile2 = '';
-        }
-        if(wappingServiceTile.detailBody){
-          this.wappingService.tileDetail1 = this.domSanitizer.bypassSecurityTrustHtml(wappingServiceTile.detailBody);
-        } else {
-          this.wappingService.tileDetail1 = '';
-        }
-      });
-    }
-  }
-
-  getWappingServiceImages() {
-    this.wappingServiceImages = this.wappingService.wappingServiceImages;
-
-    if (this.wappingServiceImages.length == 0) {
-      let wappingServiceImage: WappingServiceImage = {
-        path: this.wappingService.imageUrl!,
-      };
-      this.wappingServiceImages.unshift(wappingServiceImage);
-    }
-  }
-
-  selectWappingService() {
-    this.disabledToggle = true;
-    this.wappingServiceSelected.emit(this.wappingService.active);
-    if (this.wappingService.active)
-      this.serviceStatus = this.wappingServicesTranslations.activedService.toUpperCase();
-    else
-      this.serviceStatus = this.wappingServicesTranslations.disabledService.toUpperCase();
-
-    this.disabledToggle = false
-    this.getWappingService(this.wappingService);
-  }
-
-  hasHtml(value: any): boolean {
-    return /<\/?[a-z][\s\S]*>/i.test(value);
-  }
-
-  triggerParticipate(){
-    this.participateDraw.emit()
-  }
-
-  setImage(){
-    this.ref = this.dialogService.open(WImageCropperComponent, {
-      header: this.croppedDialogTranslations?.modal.header,
-      width: '70rem',
-      contentStyle: {"overflow": "auto", "height": "auto", "padding-bottom": "8px"},
-      data: {dataModal: this.croppedImageConfiguration, translations: this.croppedDialogTranslations},
-      resizable: true
-    });
-    
-    if(this.ref){
-      this.ref.onClose.subscribe((imageCropped: WFileB64) => {
-        if(imageCropped){
-          this.defaultImage = imageCropped;
-          this.images.push({path: this.defaultImage.fileBase64});
-          this.onDefaultImageEvent.emit(this.defaultImage);
-        }
-      })
-    }
-  }
-
-  getImage(){
-    this.isNoImage = false;
-    if(this.isDevModeActive == true){
-      if(this.defaultImage){
-        if(this.isWFileImage(this.defaultImage)){
-          return [{ path: (this.defaultImage as WFileB64).fileBase64 }];
-        }else{
-          return [{ path: this.defaultImage}];
-        }
-      }else{
-        this.isNoImage = true;
-        return [{ path: './assets/wappIcons/image.svg' }];
-      }
-    }else{
-      if(this.wappingServiceImages.length > 0){
-        return this.wappingServiceImages;
-      }else{
-        this.isNoImage = true;
-        return [{ path: './assets/wappIcons/image.svg' }];
-      }
-    }
-  }
-
-  isWFileImage(obj: WFileB64 | string){
-    return (obj as WFileB64).base64 !== undefined;
-  }
-}

package/src/lib/material/wapp-material-service-card/wapp-material-service-card.component.html

@@ -1,89 +0,0 @@
-@if (wappingServiceReady) {
-  <mat-card class="service-card" (click)="cardOnClick(wappingService)">
-    <div fxLayout="column" fxLayoutAlign="center center">
-      @if (wappingService.tile1) {
-        <div class="service-card-image-title"
-          [style.background-color]="wappingService.tile1BackgroundColor"
-          [style.color]="wappingService.tile1ForegroundColor"
-          fxLayout="row" fxLayoutGap="5px">
-          <!--tile1-->
-          <div>{{wappingService.tile1}}</div>
-          @if (wappingService.showTile1Label) {
-            <div>{{wappingService.tile1Label}}</div>
-          }
-        </div>
-      }
-      <div class="service-card-image">
-        <img mat-card-image [src]="wappingService.imageUrl">
-      </div>
-    </div>
-    <mat-card-header fxLayout="column">
-      <div fxLayout="row">
-        <!--tile2-->
-        <div class="card-header-benefits" fxLayout="row" fxLayoutGap="5px">
-          <div>{{wappingService.tile2}}</div>
-          @if (wappingService.showTile2Label) {
-            <div>{{wappingService.tile2Label}}</div>
-          }
-        </div>
-        <div fxFlex></div>
-        <!--status-->
-        @if (wappingService.allowSelect && allowSelectSendGiftCard) {
-          <div class="card-header-status-container" fxLayout="row" fxLayoutGap="5px">
-            @if (!wappingService.allowSelect && wappingService.type != 6) {
-              <div class="card-header-status">
-                <mat-icon class="card-header-status-icon" svgIcon="activated"></mat-icon>
-                <div class="status">{{ wappingTranslations.activedService }}</div>
-              </div>
-            }
-            @if (wappingService.active) {
-              <div class="card-header-status">
-                <mat-icon class="card-header-status-icon" svgIcon="activated"></mat-icon>
-                <span class="status">{{ wappingTranslations.activedService }}</span>
-              </div>
-            }
-            @if (!wappingService.active) {
-              <div class="card-header-status">
-                <mat-icon class="card-header-status-icon" svgIcon="deactivated"></mat-icon>
-                <span class="status">{{ wappingTranslations.disabledService }}</span>
-              </div>
-            }
-          </div>
-        }
-        @if (!allowSelectSendGiftCard) {
-          <div class="card-header-status-container" fxLayout="row" fxLayoutGap="5px">
-            @if (wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) {
-              <div class="card-header-status">
-                <div class="sendLabel"  >
-                  {{ wappingTranslations.scheduledLabel }}
-                </div>
-              </div>
-            }
-            @if (wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) {
-              <div class="card-header-status">
-                <div class="sendLabel" >
-                  {{ wappingTranslations.sendLabel }}
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-      <!--tile3-->
-      <div class="card-header-description">
-        {{wappingService.tile3}}
-      </div>
-      <!--tile4-->
-      @if (wappingService.enumTypeStatusECardID != ecardStatus.generated) {
-        <div class="card-header-detail">
-          {{wappingService.tile4}}
-        </div>
-      }
-      @if (wappingService.enumTypeStatusECardID == ecardStatus.generated) {
-        <div class="card-header-detail">
-          {{ wappingTranslations.cardGenerated }}
-        </div>
-      }
-    </mat-card-header>
-  </mat-card>
-}

package/src/lib/material/wapp-material-service-card/wapp-material-service-card.component.scss

@@ -1,109 +0,0 @@
-:host ::ng-deep .service-card {
-  width: 380px;
-}
-
-.mat-mdc-card {
-  padding: 0px;
-}
-
-.service-card {
-  cursor: pointer;
-  transition: none !important;
-  box-shadow: 1px 2px 8px rgba(31, 31, 31, 0.08);
-}
-
-.service-card-image-title {
-  position: absolute;
-  width: 75%;
-  margin-left: 40px;
-  margin-right: 40px;
-  height: 22px;
-  top: 0px;
-  z-index: 99;
-  border-radius: 0px 0px 4.3118px 4.3118px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.service-card-image {
-  font-size: 0px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  width: 100%;
-}
-
-.mat-mdc-card-image {
-  width: 100%;
-  margin: 0px;
-  max-height: 500px;
-}
-
-  .mat-mdc-card-image:first-child {
-    margin: 0px;
-  }
-
-.mat-mdc-card-content {
-  padding: 5px;
-}
-
-.mat-mdc-card-header {
-  height: 130px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-right: 15px;
-  padding-left: 15px;
-  background-color: rgba(238, 238, 238, 0.4);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-  .mat-mdc-card-header .mat-mdc-card-title {
-    margin: 0px !important;
-  }
-
-.card-header-benefits {
-  align-items: center;
-  text-transform: uppercase;
-}
-
-.card-header-status-container {
-}
-
-.card-header-status {
-  display: flex;
-  align-items: center;
-}
-
-.card-header-status-icon {
-  margin-right: 5px;
-  width: 10px;
-}
-
-.status {
-  text-transform: uppercase;
-}
-
-.card-header-description {
-  margin-top: 10px;
-  text-align: left;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: pre-line;
-}
-
-.card-header-detail {
-  margin-top: 10px;
-  text-align: left;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: pre-line;
-}

package/src/lib/material/wapp-material-service-card/wapp-material-service-card.component.spec.ts

@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { WappMaterialServiceCardComponent } from './wapp-material-service-card.component';
-
-describe('WappMaterialServiceCardComponent', () => {
-  let component: WappMaterialServiceCardComponent;
-  let fixture: ComponentFixture<WappMaterialServiceCardComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WappMaterialServiceCardComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WappMaterialServiceCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/material/wapp-material-service-card/wapp-material-service-card.component.ts

@@ -1,109 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CardStatus, SendingStatus, WappingServiceAppViewType } from '../shared/models/enums.model';
-import { WappingService } from '../shared/models/wapping-service';
-import { WappingServiceTranslations } from '../shared/models/wapping-service-translations.model';
-import { Router } from '@angular/router';
-import { WappingServiceItemView } from '../shared/models/wapping-service-item-view';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-    selector: 'wapp-material-service-card',
-    templateUrl: './wapp-material-service-card.component.html',
-    styleUrls: ['./wapp-material-service-card.component.scss'],
-    standalone: false
-})
-export class WappMaterialServiceCardComponent {
-  isSendGiftCard: boolean = false;
-  allowSelectSendGiftCard: boolean = true;
-  
-  enumSendingStatus: typeof SendingStatus =  SendingStatus;
-  ecardStatus: typeof CardStatus = CardStatus;
-
-  wappingServiceReady: boolean = false;
-  
-  private _wappingTranslations: WappingServiceTranslations = {
-    activedService: 'Activada',
-    disabledService: 'Desactivada',
-    scheduledLabel: 'Programada para enviar a {{name}}',
-    sendLabel: 'Enviada a {{name}}',
-    cardGenerated: 'Tu tarjeta estará disponible para el envío en breves instantes',
-    receivedLabel: "Enviada por {{name}}",
-    showMore: "Mostrar más",
-  };
-  
-  @Input() set wappingServicesTranslations(value: WappingServiceTranslations) {
-    if(value) this._wappingTranslations = value;
-  }
-  
-  get wappingTranslations() {
-    return this._wappingTranslations;
-  }
-  private _wappingService!: WappingService;
-
-  @Input() set wappingService(value: WappingService) {
-    this._wappingService = value;
-    if(value) this.getWappingServiceTitles(value);
-  }
-
-  get wappingService() {
-    return this._wappingService;
-  }
-
-  @Output('cardClicked') cardClicked = new EventEmitter<WappingService>();
-  
-  constructor(
-    private route: Router,
-    private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer
-  ) {
-    this.matIconRegistry.addSvgIcon("activated", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/activated.svg"));
-    this.matIconRegistry.addSvgIcon("deactivated", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/deactivated.svg"));
-  }
-
-  getWappingServiceTitles(service: WappingService) {
-    if(service.dataReqToSendCard && service.dataReqToSendCard.dataReqToSendCardId != 0){
-      this.isSendGiftCard = true;
-      if(service.enumTypeStatusECardID == this.ecardStatus.sent){
-        this.allowSelectSendGiftCard = false;
-      }
-    }
-    if (service.wappingServiceTiles != null) {
-      service.wappingServiceTiles.forEach((wappingServiceTile: WappingServiceItemView) => {
-        if (wappingServiceTile.position == 1) {
-          service.tile1 = wappingServiceTile.value;
-          service.tile1Label = wappingServiceTile.label;
-          service.showTile1Label = wappingServiceTile.showLabel;
-          service.tile1BackgroundColor = wappingServiceTile.labelBackgroundColor;
-          service.tile1ForegroundColor = wappingServiceTile.labelForegroundColor;
-        }
-        if (wappingServiceTile.position == 2) {
-          service.tile2 = wappingServiceTile.value;
-          service.tile2Label = wappingServiceTile.label;
-          service.showTile2Label = wappingServiceTile.showLabel;
-          service.tile2BackgroundColor = wappingServiceTile.labelBackgroundColor;
-          service.tile2ForegroundColor = wappingServiceTile.labelForegroundColor;
-        }
-        if (wappingServiceTile.position == 3) {
-          service.tile3 = wappingServiceTile.value;
-          service.tile3Label = wappingServiceTile.label;
-          service.showTile3Label = wappingServiceTile.showLabel;
-          service.tile3BackgroundColor = wappingServiceTile.labelBackgroundColor;
-          service.tile3ForegroundColor = wappingServiceTile.labelForegroundColor;
-        }
-        if (wappingServiceTile.position == 4) {
-          service.tile4 = wappingServiceTile.value;
-          service.tile4Label = wappingServiceTile.label;
-          service.showTile4Label = wappingServiceTile.showLabel;
-          service.tile4BackgroundColor = wappingServiceTile.labelBackgroundColor;
-          service.tile4ForegroundColor = wappingServiceTile.labelForegroundColor;
-        }
-      });
-      this.wappingServiceReady = true;
-    }
-  }
-
-  cardOnClick(service: WappingService) {
-    this.cardClicked.emit(service);
-  }
-}

package/src/lib/material/wapp-material-service-view/carousel/carousel.component.html

@@ -1,74 +0,0 @@
-<div class="carousel-container"
-     [style.height.px]="height?height:null"
-     [style.margin-bottom]="height?'.25rem':null"
-     (touchstart)="posIni = $event.changedTouches[0].pageX"
-     (touchend)="move($event.changedTouches[0].pageX)" 
-     [ngClass]="{'mobile': forceMobile}">
-  @if(forceMobile){
-    <div class="carousel-top-left-icon">
-      <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="30" height="30" rx="15" fill="white" fill-opacity="0.63"/>
-        <path d="M20.8337 15H9.16699" stroke="#1F2224" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141" stroke="#1F2224" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </div>
-  }
-  <!--carousel image container-->
-  @for(img of images; track img; let i = $index; let first = $first){
-    <div class="carousel-image-container"
-        [ngClass]="height ? 'fixed-height' : null"
-        [@animImageSlider]="slideControl[i]" (click)="isDevModeActive ? onSetImage() : ''" [pTooltip]="onHoverImageTooltip" tooltipPosition="top">
-      <!--carousel image-->
-      <img #slide (load)="first && onLoad(slide)" 
-        [ngClass]="{'default-image' : isNoImage, 'edit-image' : isDevModeActive}"
-        [src]="img.path"/>
-    </div>
-  }
-  <!--previous button-->
-  @if(showNavigation){
-    <button type="button"
-            class="carousel-previous-button"
-            (click)="change('right')">
-      <span class="carousel-previous-icon"></span>
-    </button>
-  }
-  <!--next button-->
-  @if(showNavigation){
-    <button type="button"
-            class="carousel-next-button"
-            (click)="change('left')">
-      <span class="carousel-next-icon"></span>
-    </button>
-  }
-  <!--button indicators-->
-  @if(showIndicators){
-    <div class="carousel-indicator-container">
-      <div class="carousel-indicator-buttons">
-        @for(img of images; track img; let i = $index){
-          <button 
-                  [style.opacity]="i == counter ? 1 : 0.5"
-                  (click)="setIndex(i)"></button>
-        }
-      </div>
-    </div>
-  }
-</div>
-<!--thumbnail indicators-->
-@if(allowThumbnail){
-  <div #thumbnail class="carousel-thumbnail-container">
-    <div class="carousel-thumbnails"
-        [@animationThumbnail]="{
-          value: thumbnailAnimation,
-          params: { margin: thumbnailMargin + 'px' }}">
-      @for(img of images; track img; let i = $index){
-        <img 
-          [style.width.px]="thumbnailWidth"
-          [style.margin-right.px]="thumbnailMarginRigth"
-          [style.opacity]="i == counter ? 1 : 0.5"
-          (load)="onLoadThumbnail()"
-          (click)="setIndex(i)"
-          [src]="img.path" />
-      }
-    </div>
-  </div>
-}