ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/edit/w-edit-treeselect/w-edit-treeselect.component.ts

@@ -0,0 +1,81 @@
+import { EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-treeselect',
+  templateUrl: './w-edit-treeselect.component.html',
+  styleUrls: ['./w-edit-treeselect.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditTreeselectComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditTreeselectComponent implements OnInit, ControlValueAccessor {
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder!: string;
+  @Input('disabled') disabled: boolean = false;
+  @Input('required') required: boolean = false;
+  @Input('size') size: string = "small";
+  @Input('options') options: any;
+  @Input('appendTo') appendTo!: string; 
+  @Input('showClear') showClear: boolean = true;
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('requiredErrorDescription') errorDescription: string = "Select an option is required";
+  @Input('filterBy') filterBy!: string;
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  ngModelValue: any;
+
+  ngOnInit(): void {}
+
+  writeValue(value: any): void {
+    this.ngModelValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onOptionSelected(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onOptionSelectedForm(event: any){
+    this.onTouch();
+    this.onChangeEvent.emit(event.node);
+  }
+
+  onInputBlur(event: Event){
+    const newValue = (event.target as HTMLInputElement).value;
+    this.ngModelValue = newValue;
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+}

package/src/lib/file/w-image-cropper/w-image-cropper.component.html

@@ -0,0 +1,150 @@
+<div class="flex flex-column align-content-center justify-content-center wapp-card-cropper">
+    <div class="flex flex-1" ></div>    
+    <div class="flex justify-content-center align-content-center" *ngIf="!blob; else imageCropper">
+        <span class="flex align-content-center surface-border justify-content-between flex-wrap"> 
+            <p-fileUpload #fileUploader
+                class="w-file-button bg-white"
+                chooseIcon="pi pi-image"
+                chooseLabel="Choose"
+                (onSelect)="myUploader($event)"
+                name="filesToUpload[]" 
+                [auto]="true"
+                [multiple]="false"
+                accept="image/*"
+                mode="basic"
+                accept="image/*" 
+                [maxFileSize]="maxFileSize">
+            </p-fileUpload>
+        </span>
+    </div>
+    <ng-template #imageCropper>
+        <div class="flex flex-column w-full">
+            <div class="flex flex-row align-content-center">
+                <div class="w-3"></div>
+                <div class="flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1">
+                    <image-cropper
+                            [imageFile]="blob"
+                            [imageURL]="imageURL"
+                            [maintainAspectRatio]="true"
+                            [containWithinAspectRatio]="containWithinAspectRatio"
+                            [aspectRatio]="aspectRatio"
+                            [resizeToWidth]= "dimensions.width"
+                            [resizeToHeight]="dimensions.height"
+                            [cropperMinWidth]="128"
+                            [onlyScaleDown]="true"
+                            [roundCropper]="false"
+                            [canvasRotation]="canvasRotation"
+                            [(transform)]="transform"
+                            [alignImage]="'center'"
+                            [style.display]="showCropper ? null : 'none'"
+                            [allowMoveImage]="allowMoveImage"
+                            [hidden]="hidden"
+                            backgroundColor="blue"
+                            format="png"
+                            [roundCropper]="roundedCropper"
+                            (imageCropped)="imageCropped($event)"
+                            (imageLoaded)="imageLoaded()"
+                            (cropperReady)="cropperReady($event)"
+                            (loadImageFailed)="loadImageFailed()"
+                    ></image-cropper>
+                </div>
+                <div class="flex flex-column justify-content-center align-content-center align-items-center">
+                    <w-button 
+                                class="flex align-items-center align-content-center justify-content-start px-3 py-3" 
+                                [pTooltip]="translationsImageCropper.zoomIn"
+                                icon="pi pi-search-plus" (click)="zoomIn()"
+                                type="text"></w-button>
+                        <w-button 
+                                class="flex align-items-center align-content-center justify-content-start px-3 py-3" 
+                                [pTooltip]="translationsImageCropper.zoomOut"
+                                icon="pi pi-search-minus" 
+                                (click)="zoomOut()"
+                                type="text"></w-button> 
+                </div>
+                <div class="flex flex-1"></div>
+            </div>
+    
+            <div class="flex flex-1">
+                <div class="w-3"></div>
+                <div class="flex flex-1 flex-column wapp-image-cropper-tools py-4">
+                    <p-slider [(ngModel)]="rotation" [min]="-360" [max]="360" 
+                            (ngModelChange)="updateRotation()" class="w-full align-content-center"
+                            [pTooltip]="translationsImageCropper.rotation"></p-slider>
+                </div>
+                <div class="w-3 align-items-end"></div>
+            </div>
+    
+            <div class="flex flex-1">
+                <div class="w-3"></div>
+                <div class="flex flex-1  wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center">
+                    <w-button
+                            type="text"
+                            icon="pi pi-replay" 
+                            tooltipPosition="bottom"
+                            [pTooltip]="translationsImageCropper.rotateLeft"
+                            (click)="rotateLeft()"></w-button>
+                    <w-button 
+                            type="text"
+                            icon="pi pi-refresh"
+                            tooltipPosition="bottom"
+                            [pTooltip]="translationsImageCropper.rotateRight"
+                            (click)="rotateRight()"></w-button>
+                    <w-button
+                            type="text"
+                            icon="pi pi-arrows-h" 
+                            tooltipPosition="bottom"
+                            [pTooltip]="translationsImageCropper.flipHorizontal"
+                            (click)="flipHorizontal()"></w-button>
+                    <w-button 
+                            type="text"
+                            [pTooltip]="translationsImageCropper.flipVertical"
+                            icon="pi pi-arrows-v"
+                            tooltipPosition="bottom"
+                            (click)="flipVertical()"></w-button>
+                    <w-button 
+                            type="text"
+                            [pTooltip]="translationsImageCropper.restore"
+                            icon="pi pi-history"
+                            tooltipPosition="bottom"
+                            (click)="resetImage()"></w-button>
+                    <w-button 
+                            type="text"
+                            [pTooltip]="translationsImageCropper.preview"
+                            icon="pi pi-eye"
+                            tooltipPosition="bottom"
+                            (click)="viewCrop()"></w-button>
+                </div>
+                <div class="w-3 align-items-end"></div>
+            </div>
+        </div>
+        
+    </ng-template>
+    <div class="flex flex-1" ></div>
+    <div class="wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2">
+        <w-button *ngIf="blob"
+            (onClick)="deleteBlob()"
+            class="flex align-content-center align-items-center "
+            icon="pi-trash"
+            [label]="translationsImageCropper.delete"
+            type="text">
+        </w-button>
+        <w-button 
+            *ngIf="fromModal"
+            (onClick)="cancelDialog()"
+            class="flex align-content-center align-items-center "
+            icon="pi-times"
+            [label]="translationsImageCropper.cancel"
+            type="text">
+        </w-button>
+        <w-button 
+            icon="pi-save"
+            (click)="saveImageCropped()"
+            [disabled]="!blob"
+            [label]="translationsImageCropper.save"
+            class="flex align-content-center align-items-center"
+            type="text">
+        </w-button>
+    </div>    
+</div>
+    
+    

package/src/lib/file/w-image-cropper/w-image-cropper.component.scss

@@ -0,0 +1,55 @@
+@import './../../../styles/_variables.scss';
+
+.wapp-image-cropper-wrapper {
+    min-height: 20rem;
+    max-height: 25rem;
+    min-width: 30rem;
+    max-width: 35rem;
+}
+
+.wapp-image-cropper-tools {
+    min-width: 30rem;
+    max-width: 35rem;
+}
+
+.wapp-card-cropper {
+    min-height: 35rem;
+    max-height: 45rem;
+}
+
+:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{
+    background-color: aqua;
+    @extend .subtitle2;
+}
+
+:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    .p-button-icon{
+        margin: $spacingZero;
+        padding-right: $spacingS;
+        @extend .w-button-small-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-file-button .p-fileupload .p-button:focus {
+    @extend .focus;
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover {
+    background-color: $primary400;
+    border-color: $primary400;
+}
+
+.wapp-image-cropper-dialog-buttons{
+    gap: 16px;
+}

package/src/lib/file/w-image-cropper/w-image-cropper.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WImageCropperComponent } from './w-image-cropper.component';
+
+describe('WImageCropperComponent', () => {
+  let component: WImageCropperComponent;
+  let fixture: ComponentFixture<WImageCropperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WImageCropperComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WImageCropperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/file/w-image-cropper/w-image-cropper.component.ts

@@ -0,0 +1,259 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { WImageCropperData } from '../../shared/models/w-image-cropper-data.model';
+import { WFileB64 } from '../../shared/models/w-file-b64.model';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ModalService } from '../../shared/services/modal.service';
+import { WPreviewImageComponent } from '../w-preview-image/w-preview-image.component';
+import { Dimensions, ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
+
+@Component({
+  selector: 'w-image-cropper',
+  templateUrl: './w-image-cropper.component.html',
+  styleUrls: ['./w-image-cropper.component.scss']
+})
+export class WImageCropperComponent {
+  @Input() dimensionsInput!: WImageCropperData;
+  @Input() translationsImageCropper: any;
+  @Output() imageCroppedFinal = new EventEmitter<any>();
+  @Output() imageB64 = new EventEmitter<any>();
+  @Input() blob: any;
+
+  imageChangedEvent: any = '';
+  croppedImage: any = '';
+  canvasRotation = 0;
+  rotation: number = 0;
+  translateH = 0;
+  translateV = 0;
+  scale = 1;
+  aspectRatio = 4 / 3;
+  showCropper = false;
+  containWithinAspectRatio = false;
+  transform: ImageTransform = {
+    translateUnit: 'px'
+  };
+  imageURL?: string;
+  loading = false;
+  allowMoveImage = true;
+  hidden = false;
+
+  croppedImageFile: WFileB64 = {name: "", type: "", fileBase64: "", base64: ""};
+
+  dimensions: any;
+  maxFileSize!: number;
+  roundedCropper!: boolean;
+  fromModal: boolean = true;
+  dialogPreview!: DynamicDialogRef;
+  constructor(
+    private ref: DynamicDialogRef,
+    private dialogService: ModalService,
+    public dynamicDialogConfig: DynamicDialogConfig){
+
+  }
+
+  ngOnInit(): void {
+    if(this.dynamicDialogConfig.data == undefined){
+      this.fromModal = false;
+      this.aspectRatio = this.dimensionsInput.configuredAspectRatio;
+      this.roundedCropper = this.dimensionsInput.roundedCropper;
+      this.dimensions = {
+        width: this.dimensionsInput.viewPortWidthPx,
+        height: this.dimensionsInput.viewPortHeihtPx
+      }
+      this.maxFileSize = this.dimensions.maxFileSize;
+    }else{
+      this.aspectRatio = this.dynamicDialogConfig.data.dataModal.configuredAspectRatio;
+      this.roundedCropper = this.dynamicDialogConfig.data.dataModal.roundedCropper;
+      this.dimensions = {
+        width: this.dynamicDialogConfig.data.dataModal.viewPortWidthPx,
+        height: this.dynamicDialogConfig.data.dataModal.viewPortHeihtPx
+      }
+      this.maxFileSize = this.dynamicDialogConfig.data.dataModal.maxFileSize
+      this.translationsImageCropper = this.dynamicDialogConfig.data.translations;
+      this.blob = this.dynamicDialogConfig.data.blob;
+      if(this.blob)
+        this.setCroppeImageFileObject();
+    }
+  }
+
+  myUploader(event: any) {
+    this.resetImage()
+    this.loading = true;
+    this.blob = event.files[0];
+    this.setCroppeImageFileObject();
+  }
+
+  setCroppeImageFileObject(){
+    this.croppedImageFile.name = this.blob.name;
+    this.croppedImageFile.type = this.blob.type;
+  }
+
+  imageCropped(event: ImageCroppedEvent) {
+    this.croppedImage = event.base64;
+  }
+
+  imageLoaded() {
+    this.showCropper = true;
+  }
+
+  cropperReady(sourceImageDimensions: Dimensions) {
+    this.loading = false;
+  }
+
+  loadImageFailed() {
+    console.error('Load image failed');
+  }
+
+  rotateLeft() {
+    this.loading = true;
+    setTimeout(() => { // Use timeout because rotating image is a heavy operation and will block the ui thread
+      this.canvasRotation--;
+      this.flipAfterRotate();
+    });
+  }
+
+  rotateRight() {
+    this.loading = true;
+    setTimeout(() => {
+      this.canvasRotation++;
+      this.flipAfterRotate();
+    });
+  }
+
+  moveLeft() {
+    this.transform = {
+      ...this.transform,
+      translateH: ++this.translateH
+    };
+  }
+
+  moveRight() {
+    this.transform = {
+      ...this.transform,
+      translateH: --this.translateH
+    };
+  }
+
+  moveTop() {
+    this.transform = {
+      ...this.transform,
+      translateV: ++this.translateV
+    };
+  }
+
+  moveBottom() {
+    this.transform = {
+      ...this.transform,
+      translateV: --this.translateV
+    };
+  }
+
+  flipHorizontal() {
+    this.transform = {
+      ...this.transform,
+      flipH: !this.transform.flipH
+    };
+  }
+
+  flipVertical() {
+    this.transform = {
+      ...this.transform,
+      flipV: !this.transform.flipV
+    };
+  }
+
+  resetImage() {
+    this.scale = 1;
+    this.rotation = 0;
+    this.canvasRotation = 0;
+    this.transform = {
+      translateUnit: 'px'
+    };
+  }
+
+  zoomOut() {
+    this.scale -= .1;
+    this.transform = {
+      ...this.transform,
+      scale: this.scale
+    };
+  }
+
+  zoomIn() {
+    this.scale += .1;
+    this.transform = {
+      ...this.transform,
+      scale: this.scale
+    };
+  }
+
+  toggleContainWithinAspectRatio() {
+    this.containWithinAspectRatio = !this.containWithinAspectRatio;
+  }
+
+  updateRotation() {
+    this.transform = {
+      ...this.transform,
+      rotate: this.rotation
+    };
+  }
+
+  toggleAspectRatio() {
+    this.aspectRatio = this.aspectRatio === 4 / 3 ? 16 / 5 : 4 / 3;
+  }
+  
+  toggleAspectRatio1() {
+    this.aspectRatio = this.aspectRatio = 1;
+  }
+
+  viewCrop(){
+    this.dialogPreview = this.dialogService.open(WPreviewImageComponent, {
+      header: this.translationsImageCropper.modal.preview,
+      width:'35rem',
+      contentStyle: {"overflow": "auto", "height": "35rem", "padding-bottom": "8px"},
+      data: {imageEdited: this.croppedImage}
+    })
+  }
+
+  deleteBlob(){
+    this.blob = null
+    this.croppedImage = null
+  }
+
+  cancelDialog(){
+    this.blob = null
+    this.croppedImage = null
+    this.ref.close();
+  }
+
+  saveImageCropped(){
+    this.croppedImageFile.fileBase64 = this.croppedImage;
+    this.croppedImageFile.base64 = this.imageCroppedToBase64(this.croppedImage, this.croppedImageFile.name);
+
+    if(this.fromModal){
+      this.ref.close(this.croppedImageFile)
+    }else{
+      this.imageCroppedFinal.emit(this.croppedImageFile);
+    }
+  }
+
+  private flipAfterRotate() {
+    const flippedH = this.transform.flipH;
+    const flippedV = this.transform.flipV;
+    this.transform = {
+      ...this.transform,
+      flipH: flippedV,
+      flipV: flippedH
+    };
+    this.translateH = 0;
+    this.translateV = 0;
+  }
+
+  imageCroppedToBase64(imageData: string, imageName: string){
+    const base64Parts = imageData?.split(',');
+    if (base64Parts.length === 2) {
+      const base64Content = base64Parts[1];
+      return base64Content;
+    }
+    return '';
+  }
+}

package/src/lib/file/w-image-file-uploader/w-image-file-uploader.component.html

@@ -0,0 +1,100 @@
+<div *ngIf="allowMultipleImages == false; else withCarousel" class="relative flex align-items-center mr-3 p-4 w-max">
+    <div class="relative flex align-items-center mr-3 p-4 w-max">
+        <img *ngIf="viewSingleMode == true; else editMode" 
+            [src]="imageUploadConfig.singleModeImageDefault ? imageUploadConfig.singleModeImageDefault : (imageSingleMode ? imageSingleMode : 'https://wappingstoragedev.blob.core.windows.net/wapping/appresources/ic_image_blue.png')"
+            alt="Add an image here" 
+            class="{{imageUploadConfig.singleModeImageWidth ?? defaultWidth}} {{imageUploadConfig.singleModeImageHeight ?? defaultHeight}} shadow-4">
+        <ng-template #editMode>
+            <div *ngIf="onlyCroppedImageSelected !== null" class="h-full relative w-ll border-3 border-transparent border-round hover:bg-primary transition-duration-100 cursor-auto" (mouseenter)="onImageMouseOver(onlyImageSelected)" (mouseleave)="onImageMouseLeave(onlyImageSelected)" style="padding: 1px;">
+                <img [src]="onlyCroppedImageSelected.fileBase64" [alt]="onlyImageSelected.name" class="{{imageUploadConfig.singleModeImageWidth ?? defaultWidth}} {{imageUploadConfig.singleModeImageHeight ?? defaultHeight}} shadow-4 border-round">
+                <button [id]="onlyImageSelected.name" #buttonRemoveOnlyImage pButton pRipple 
+                    type="button" 
+                    icon="pi pi-times" 
+                    class="wapp-file-upload-button-remove p-button-rounded p-button-primary text-sm absolute justify-content-center align-items-center cursor-pointer"  
+                    (click)="removeImageSingleMode($event, onlyImageSelected)">
+                </button>
+            </div>
+            <img *ngIf="onlyCroppedImageSelected == null" 
+                [src]="imageUploadConfig.singleModeImageDefault ? imageUploadConfig.singleModeImageDefault : (imageSingleMode ? imageSingleMode : 'https://wappingstoragedev.blob.core.windows.net/wapping/appresources/ic_image_blue.png')"
+                alt="Add an image here" 
+                class="{{imageUploadConfig.singleModeImageWidth ?? defaultWidth}} {{imageUploadConfig.singleModeImageHeight ?? defaultHeight}} shadow-4">
+            <p-fileUpload #fileUploadOnlyImage [ngClass]="{'wapp-file-upload-button': onlyImageSelected}" 
+                styleClass="p-button-rounded absolute bottom-0 right-0" 
+                mode="basic" 
+                accept="image/*" 
+                [multiple]="false" 
+                (onSelect)="onCustomUploadSingleMode($event)" 
+                [uploadLabel]="onlyCroppedImageSelected ? (onlyCroppedImageSelected.name.length>6)? (onlyCroppedImageSelected.name | slice:0:6)+'...':(onlyCroppedImageSelected.name) : ''" 
+                [customUpload]="true" 
+                (uploadHandler)="onCustomizeUploadFunctionSingleMode($event)" 
+                [maxFileSize]="imageUploadConfig.maxImageSize"
+                class="w-image-file-button-rounded">
+            </p-fileUpload>
+        </ng-template>
+    </div>
+</div>
+<ng-template #withCarousel>
+    <p-fileUpload *ngIf="imageUploadConfig" #fileUpload class="w-image-file-button col-12 pt-3"
+        name="mediaImages[]" 
+        accept="image/*" 
+        mode="advanced" 
+        [customUpload]="true" 
+        (onSelect)="onCustomUploadMultiMode($event)" 
+        (uploadHandler)="onCustomizeUploadFunctionMultiMode($event)" 
+        [uploadLabel]="imageUploadConfig.uploadButtonLabel ?? ''" 
+        [chooseLabel]="imageUploadConfig.chooseButtonLabel ?? ''" 
+        [cancelLabel]="imageUploadConfig.cancelButtonLabel ?? ''" 
+        [showUploadButton]="activeImageUpload"
+        [showCancelButton]="activeImageUpload"
+        [auto]="imageUploadConfig.allowAuto" 
+        [multiple]="true" 
+        [maxFileSize]="imageUploadConfig.maxImageSize" 
+        [chooseStyleClass]="'p-button-icon p-button-icon-right'">
+        <ng-template let-file let-i="index" pTemplate='file'>
+            <div *ngIf="activeImageUpload && cropperImages.length > 0" class="p-fileupload-row">
+                <div><img [src]="cropperImages[i]?.fileBase64" width="50"/></div>
+                <div class="p-fileupload-filename">{{file.name}}</div>
+                <div> <w-button icon="pi pi-times" (onClick)="onDeleteFileMultiMode($event, file, fileUpload)"></w-button> </div>
+            </div>
+        </ng-template>
+        <ng-template pTemplate="content">
+            <p-progressBar *ngIf="isUploadingMultiMode" class="p-element ng-star-inserted" [mode]="'indeterminate'">
+                <div role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" data-pc-name="progressbar" data-pc-section="root" class="p-progressbar p-component p-progressbar-determinate">
+                    <div class="p-progressbar-value p-progressbar-value-animate ng-star-inserted" style="display: flex; width: 0%;" data-pc-section="value"></div>
+                </div>
+            </p-progressBar>
+            <div *ngIf="imagesAlreadyUploaded.length > 0">
+                <p-carousel [value]="imagesAlreadyUploaded" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselImagesResponsiveOptions" [showIndicators]="false">
+                    <ng-template let-image pTemplate="item">
+                            <div class="border-round m-2 text-center p-2" >
+                                <div class="mt-5 mb-2 h-8rem">
+                                    <img [src]="readProperty(image, imageUploadConfig.imagePropertyNames[0]) ?? image.fileBase64" class="shadow-4 max-w-max h-full"/>
+                                </div>
+                                <div *ngIf="activePositionProperty == true">
+                                    <w-button icon="pi-arrow-left" type="text" style="font-size: 0.5rem" [disabled]="findIndex(image) == 0 || disableMoveButtons" (onClick)="moveImageToLeft(image)"></w-button>
+                                    <w-button icon="pi-arrow-right" type="text" style="font-size: 0.5rem" [disabled]="(findIndex(image) == imagesAlreadyUploaded.length-1) || disableMoveButtons" (onClick)="moveImageToRight(image)"></w-button>
+                                </div>
+                                <div class="my-5">
+                                    <w-button icon="pi pi-trash" type="tertiary" label="{{imageUploadConfig.deleteImageButtonLabel}}" 
+                                        (click)="confirmDeleteImageMultiMode($event, image)" [loading]="isDeletingMultiMode">
+                                    </w-button>
+                                </div>
+                            </div>
+                    </ng-template>
+                </p-carousel> 
+                <p-divider></p-divider>
+            </div>
+            <div class="h-full flex flex-column justify-content-center align-items-center pt-3">
+                <span class="pi pi-upload subtitle1 text846"></span>
+                <span class="subtitle1 text846 m-2">
+                    {{imageUploadConfig.contentHeaderLabel}}
+                </span>
+                <span class="text700 text-center">
+                    {{imageUploadConfig.contentSubheaderLabel}}
+                </span>
+            </div>
+        </ng-template>
+    </p-fileUpload>
+</ng-template>
+
+<p-confirmPopup></p-confirmPopup>