import { CommonModule } from '@angular/common';
import { Component, ViewChild, Inject } from '@angular/core';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { debounceTime, distinctUntilChanged, startWith, switchMap } from 'rxjs';
import { LazyLoadImageModule } from 'ng-lazyload-image';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import * as i0 from "@angular/core";
import * as i1 from "../../services/image-upload-service.service";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@angular/material/snack-bar";
import * as i4 from "../editor-service.service";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "ng-lazyload-image";
import * as i8 from "@angular/cdk/scrolling";
import * as i9 from "@angular/material/icon";
export class MediaSelectorComponent {
    constructor(imageUploadService, _dialogRef, dialogData, snackBar, editorService) {
        this.imageUploadService = imageUploadService;
        this._dialogRef = _dialogRef;
        this.dialogData = dialogData;
        this.snackBar = snackBar;
        this.editorService = editorService;
        this.tabs = ['Unsplash', 'Upload', 'Library'];
        this.activeTab = 'Unsplash';
        this.searchControl = new FormControl('');
        this.pageNo = 1;
        this.isLoading = false;
        this.unsplashImages = [];
        this.imageLibrary = [];
        this.imageSize = 50;
        this.multiple = false;
        this.selectedImage = new Map;
        this.buttonLoader = false;
    }
    ngOnInit() {
        this.multiple = this.dialogData?.multiple ?? true;
        this.searchUnsplashImages();
        this.getImageLibrary();
    }
    ngAfterViewInit() {
        this.setupInfiniteScroll();
    }
    getImageLibrary() {
        this.editorService.getImageLibrary().subscribe((res) => {
            this.imageLibrary = res?.data?.content || [];
        });
    }
    /** ✅ Search API with debounce to reduce unnecessary calls */
    searchUnsplashImages() {
        this.searchControl.valueChanges
            .pipe(startWith(''), // Load images initially
        debounceTime(500), // Wait 500ms after typing stops
        distinctUntilChanged(), // Only call API if value changes
        switchMap(value => {
            this.pageNo = 1;
            return this.imageUploadService.searchPhotosInUnsplash(value || 'Technology', this.pageNo);
        }))
            .subscribe((results) => {
            this.unsplashImages = results.results;
        });
    }
    /** ✅ Infinite Scroll */
    setupInfiniteScroll() {
        this.viewport.elementScrolled()
            .pipe(debounceTime(200), // ✅ Wait 200ms before checking
        distinctUntilChanged() // ✅ Only trigger if value changes
        )
            .subscribe(() => {
            const end = this.viewport.measureScrollOffset('bottom');
            if (end < 300 && !this.isLoading) { // ✅ Trigger only when close to the bottom
                this.loadMoreImages();
            }
        });
    }
    /** ✅ Load More Images */
    loadMoreImages() {
        if (this.isLoading)
            return; // ✅ Prevent multiple requests
        this.isLoading = true;
        this.pageNo++;
        this.imageUploadService.searchPhotosInUnsplash(this.searchControl.value || 'Technology', this.pageNo)
            .subscribe((results) => {
            this.unsplashImages = [...this.unsplashImages, ...results.results];
            this.isLoading = false;
        }, () => {
            this.isLoading = false; // ✅ Ensure it's reset even on failure
        });
    }
    selectUnsplashImage(image) {
        if (!this.multiple)
            this.selectedImage = new Map;
        let uploadImage = {
            businessId: localStorage.getItem('businessId'),
            uniqueId: image.id,
            assets: [{
                    url: image.urls.raw,
                    width: image.width,
                    height: image.height
                }],
            author: {
                id: image.user.id,
                userName: image.user.username,
                name: image.user.name,
                twitterUserName: image.user.twitter_username,
                portFolioUrl: image.user.portfolio_url,
                instagramUserName: image.user.instagram_username,
            },
            media: "UNSPLASH",
        };
        if (this.selectedImage.has(image.id)) {
            this.selectedImage.delete(image.id);
        }
        else {
            this.selectedImage.set(image.id, uploadImage);
        }
    }
    uploadImageFromSystem(event) {
        if (!this.multiple)
            this.selectedImage = new Map;
        let files = event.target.files;
        const maximumFileSize = 4 * 1024 * 1024; // Max is 4mb
        for (let file of files) {
            if (maximumFileSize < file.size) {
                this.snackBar.open('Maximum file size limit is 4MB', 'close', { duration: 1500 });
                continue;
            }
            const reader = new FileReader();
            const image = {
                businessId: localStorage.getItem('businessId'),
                uniqueId: file.name + '_' + file.size,
                blurHash: null,
                assets: [{
                        width: 0,
                        height: 0,
                        blurhash: '',
                        url: '',
                    }],
                author: null,
                media: 'DEVICE',
                description: file.name,
                altDescription: file.name,
                file: file,
            };
            reader.onload = (response) => {
                image.assets[0].url = response.target.result;
            };
            reader.readAsDataURL(file);
            if (!this.selectedImage.has(image.uniqueId)) {
                this.selectedImage.set(image.uniqueId, image);
            }
        }
    }
    deleteSystemImage(imageId) {
        this.selectedImage.delete(imageId);
    }
    selectFromImageLibrary(image) {
        if (!this.multiple)
            this.selectedImage = new Map;
        if (this.selectedImage.has(image.uniqueId)) {
            this.selectedImage.delete(image.uniqueId);
        }
        else {
            this.selectedImage.set(image.uniqueId, image);
        }
    }
    async uploadImage() {
        this.buttonLoader = true;
        let request = [];
        for (let image of this.selectedImage.values()) {
            if (image.file) {
                const fileUrl = await this.imageUploadService.uploadFileInAWS(image.file, 'library-media');
                image.assets[0].url = fileUrl;
            }
            request.push(image);
        }
        this.editorService.saveImagesToBusinessLibrary({ data: request }).subscribe({
            next: () => {
                this._dialogRef.close(request);
                this.buttonLoader = false;
            },
            error: () => {
                this.buttonLoader = false;
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, deps: [{ token: i1.ImageUplaodService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.MatSnackBar }, { token: i4.ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section class=\"h-100 d-flex flex-column main_section\">\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"body_container d-flex flex-column\">\r\n    <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n      <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"inner_part flex-1 h-100\">\r\n      <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n        <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n        <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeTab === 'Library'\">\r\n        <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n        <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n          <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n          <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-3 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif , video/mp4\" #fileInput />\r\n\r\n    <div class=\"row image-container mt-3 h-30-overflow\">\r\n      <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n        <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n          <img [src]=\"image.value.assets[0].url\" alt=\"Image\"\r\n            *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n          <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n            *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n          <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n  <div class=\"row image-container mt-3 h-75-overflow\">\r\n    <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n      <ng-container *ngFor=\"let image of imageLibrary\">\r\n        <div class=\"col-md-4 col-6\">\r\n          <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"\r\n            *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n          <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"\r\n            *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #emptyScreen>\r\n    <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n      <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"empty-main-text\">\r\n        Uh-oh!\r\n      </div>\r\n      <div class=\"sub-text-1\">\r\n        No images here\r\n      </div>\r\n      <div class=\"sub-text-2\">\r\n        I looked left, right\u2026 even turned around! Still nothing\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{overflow:hidden}img{width:100%;height:150px}.scroll-container{height:90%;width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040;flex-shrink:0}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px;flex-shrink:0}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 20px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 20px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}.body_container{flex:1;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: LazyLoadImageModule }, { kind: "directive", type: i7.LazyLoadImageDirective, selector: "[lazyLoad]", inputs: ["lazyLoad", "defaultImage", "errorImage", "scrollTarget", "customObservable", "offset", "useSrcset", "decode", "debug"], outputs: ["onStateChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section class=\"h-100 d-flex flex-column main_section\">\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"body_container d-flex flex-column\">\r\n    <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n      <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"inner_part flex-1 h-100\">\r\n      <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n        <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n        <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"activeTab === 'Library'\">\r\n        <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n      </ng-container>\r\n\r\n      <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n        <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n          <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n          <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-3 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif , video/mp4\" #fileInput />\r\n\r\n    <div class=\"row image-container mt-3 h-30-overflow\">\r\n      <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n        <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n          <img [src]=\"image.value.assets[0].url\" alt=\"Image\"\r\n            *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n          <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n            *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n          <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n  <div class=\"row image-container mt-3 h-75-overflow\">\r\n    <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n      <ng-container *ngFor=\"let image of imageLibrary\">\r\n        <div class=\"col-md-4 col-6\">\r\n          <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"\r\n            *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n          <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"\r\n            *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #emptyScreen>\r\n    <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n      <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"empty-main-text\">\r\n        Uh-oh!\r\n      </div>\r\n      <div class=\"sub-text-1\">\r\n        No images here\r\n      </div>\r\n      <div class=\"sub-text-2\">\r\n        I looked left, right\u2026 even turned around! Still nothing\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{overflow:hidden}img{width:100%;height:150px}.scroll-container{height:90%;width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040;flex-shrink:0}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px;flex-shrink:0}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 20px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 20px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}.body_container{flex:1;height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.ImageUplaodService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: i3.MatSnackBar }, { type: i4.ElementServiceService }], propDecorators: { viewport: [{
                type: ViewChild,
                args: [CdkVirtualScrollViewport]
            }] } });
//# sourceMappingURL=data:application/json;base64, 