carriera-intern-components 1.1.166 → 1.1.168

package/app/components/drop-zone/drop-zone.component.d.ts

@@ -3,6 +3,7 @@ import { AppFile } from '../../models/appFile.model';
 import { ImageCroppedEvent, LoadedImage, ImageTransform } from 'ngx-image-cropper';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { Driver } from '../avatar/models';
+import { FileResponse } from './models/file.response';
 import * as i0 from "@angular/core";
 /**
  * A component that provides a user interface for file uploading via
@@ -12,41 +13,28 @@ import * as i0 from "@angular/core";
 export declare class DropZoneComponent {
     private sanitizer;
     zoomValue: import("@angular/core").WritableSignal<number>;
+    smallView: import("@angular/core").WritableSignal<boolean>;
+    cropHeight: import("@angular/core").WritableSignal<number>;
+    cropWidth: import("@angular/core").WritableSignal<number>;
+    driver: import("@angular/core").WritableSignal<Driver>;
     transform: ImageTransform;
-    crop: import("@angular/core").InputSignal<boolean>;
     imageChangedEvent: Event | null;
     croppedImage: SafeUrl | null;
     showCropper: import("@angular/core").WritableSignal<boolean>;
     isCropperReady: import("@angular/core").WritableSignal<boolean>;
     originalImageWidth: number;
     originalImageHeight: number;
-    smallView: import("@angular/core").WritableSignal<boolean>;
-    coverUrl: string;
-    profileUrl: string;
-    logoUrl: string;
+    deletedDocs: import("@angular/core").WritableSignal<AppFile[]>;
+    crop: import("@angular/core").InputSignal<boolean>;
     size: import("@angular/core").InputSignal<string | undefined>;
     rounded: import("@angular/core").InputSignal<boolean>;
-    cropHeight: import("@angular/core").WritableSignal<number>;
-    cropWidth: import("@angular/core").WritableSignal<number>;
-    driver: import("@angular/core").WritableSignal<Driver>;
-    docsChange: EventEmitter<AppFile[]>;
-    inputRange: ElementRef<HTMLInputElement>;
-    constructor(sanitizer: DomSanitizer);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    emitDocs(): void;
-    updateRangeBackground(input: HTMLInputElement): void;
-    cropDimensions(): void;
-    ratioHelper(): number;
-    onZoomChange(event: Event): void;
-    fileChangeEvent(event: Event): void;
-    imageCropped(event: ImageCroppedEvent): void;
-    imageLoaded(image: LoadedImage): void;
-    cropperReady(): void;
-    loadImageFailed(): void;
-    onTransformChange(event: ImageTransform): void;
-    cancelCrop(): void;
-    submitCrop(): void;
+    files: import("@angular/core").InputSignal<FileResponse[]>;
+    /**
+      * A signal that holds an array of `AppFile` objects representing the files
+      * that have been selected or dropped by the user.
+   
+      */
+    variant: import("@angular/core").InputSignal<string>;
     /**
      * Injects the DocumentService for file processing tasks like
      * thumbnail generation and PDF page counting.
@@ -68,6 +56,27 @@ export declare class DropZoneComponent {
      * @type {FileExtension[]}
      */
     fileTypes: import("@angular/core").InputSignal<("mp4" | "mov" | "avi" | "pdf" | "jpg" | "jpeg" | "png" | "gif")[]>;
+    coverUrl: string;
+    profileUrl: string;
+    logoUrl: string;
+    docsChange: EventEmitter<AppFile[]>;
+    inputRange: ElementRef<HTMLInputElement>;
+    constructor(sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    emitDocs(): void;
+    updateRangeBackground(input: HTMLInputElement): void;
+    cropDimensions(): void;
+    ratioHelper(): number;
+    onZoomChange(event: Event): void;
+    fileChangeEvent(event: Event): void;
+    imageCropped(event: ImageCroppedEvent): void;
+    imageLoaded(image: LoadedImage): void;
+    cropperReady(): void;
+    loadImageFailed(): void;
+    onTransformChange(event: ImageTransform): void;
+    cancelCrop(): void;
+    submitCrop(): void;
     /**
      * A computed signal that derives the list of currently supported file extensions.
      * It filters the base `fileTypes` array, removing any extensions present
@@ -79,12 +88,6 @@ export declare class DropZoneComponent {
      * that have been selected or dropped by the user.
      */
     docs: import("@angular/core").WritableSignal<AppFile[]>;
-    /**
-     * A signal that holds an array of `AppFile` objects representing the files
-     * that have been selected or dropped by the user.
-  
-     */
-    variant: import("@angular/core").InputSignal<string>;
     /**
      * A signal that acts as a boolean flag. It is set to `true` when the user
      * attempts to upload a file with an unsupported extension.
@@ -166,5 +169,5 @@ export declare class DropZoneComponent {
         tag: string;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropZoneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropZoneComponent, "cai-drop-zone", never, { "crop": { "alias": "crop"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "excludedFileTypes": { "alias": "excludedFileTypes"; "required": false; "isSignal": true; }; "fileTypes": { "alias": "fileTypes"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "docsChange": "docsChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropZoneComponent, "cai-drop-zone", never, { "crop": { "alias": "crop"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "files": { "alias": "files"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "excludedFileTypes": { "alias": "excludedFileTypes"; "required": false; "isSignal": true; }; "fileTypes": { "alias": "fileTypes"; "required": false; "isSignal": true; }; }, { "docsChange": "docsChange"; }, never, never, true, never>;
 }

package/app/components/drop-zone/models/file.response.d.ts

@@ -0,0 +1,10 @@
+export interface FileResponse {
+    fileId?: number;
+    fileName?: string | null;
+    url?: string | null;
+    fileSize?: number | null;
+    tags?: Array<string> | null;
+    tagGeneratedByUser?: boolean;
+    updatedAt?: string | null;
+    companyUserId?: number | null;
+}

package/fesm2022/carriera-intern-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/forms';
 import { Validators, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, computed, ViewChild, Input, Injectable, EventEmitter, inject, Output, Inject, forwardRef, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, computed, ViewChild, Input, Injectable, inject, EventEmitter, Output, Inject, forwardRef, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbTooltip, NgbPopoverModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i4 from 'angular-svg-icon';
@@ -3383,36 +3383,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class DropZoneComponent {
     sanitizer;
+    // Signals
     zoomValue = signal(5.8);
+    smallView = signal(false);
+    cropHeight = signal(0);
+    cropWidth = signal(0);
+    driver = signal({
+        id: 0,
+        firstName: '',
+        lastName: '',
+        avatarFile: null,
+        avatarColor: 'Blue',
+    });
     transform = {
         scale: this.zoomValue(),
     };
-    crop = input(false);
     imageChangedEvent = null;
     croppedImage = '';
     showCropper = signal(false);
     isCropperReady = signal(false);
     originalImageWidth = 0;
     originalImageHeight = 0;
-    smallView = signal(false);
+    deletedDocs = signal([]);
+    // Inputs
+    crop = input(false);
+    size = input();
+    rounded = input(false);
+    files = input([]);
+    /**
+      * A signal that holds an array of `AppFile` objects representing the files
+      * that have been selected or dropped by the user.
+   
+      */
+    variant = input('document');
+    /**
+     * Injects the DocumentService for file processing tasks like
+     * thumbnail generation and PDF page counting.
+     * @private
+     */
+    documentService = inject(DocumentService);
+    /**
+     * An array of file extensions that should be excluded from the supported list.
+     * @defaultValue `[]` (an empty array)
+     * @type {FileExtension[]}
+     */
+    excludedFileTypes = input([]);
+    /**
+     * The base array of all file extensions that are generally allowed.
+     * Supported file types will be derived from this list, after excluding
+     * any types specified in `excludedFileTypes`.
+     *
+     * @defaultValue `['avi', 'mov', 'mp4', 'pdf', 'gif', 'png', 'jpg', 'jpeg']`
+     * @type {FileExtension[]}
+     */
+    fileTypes = input([
+        'pdf',
+        'png',
+        'jpg',
+        'jpeg',
+        'gif',
+        'avi',
+        'mov',
+        'mp4',
+    ]);
     coverUrl = '';
     profileUrl = '';
     logoUrl = '';
-    size = input();
-    rounded = input(false);
-    cropHeight = signal(0);
-    cropWidth = signal(0);
-    driver = signal({
-        id: 0,
-        firstName: '',
-        lastName: '',
-        avatarFile: null,
-        avatarColor: 'Blue',
-    });
     docsChange = new EventEmitter();
     inputRange;
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        effect(() => {
+            const currentFiles = this.files();
+            if (currentFiles.length) {
+                this.docs.set(currentFiles.map((file) => ({
+                    fileName: file.fileName || '',
+                    baseName: file.fileName || '',
+                    type: file.fileName
+                        ?.split('.')
+                        .pop()
+                        ?.toLowerCase() || 'pdf',
+                    size: file.fileSize || 0,
+                    imagePreviewUrl: file.url || '',
+                    file: null,
+                    pageCount: undefined,
+                    tag: file.tags?.[0] || '',
+                })));
+            }
+        });
     }
     ngOnInit() {
         this.cropDimensions();
@@ -3542,36 +3600,6 @@ class DropZoneComponent {
         }
         this.cropDimensions();
     }
-    /**
-     * Injects the DocumentService for file processing tasks like
-     * thumbnail generation and PDF page counting.
-     * @private
-     */
-    documentService = inject(DocumentService);
-    /**
-     * An array of file extensions that should be excluded from the supported list.
-     * @defaultValue `[]` (an empty array)
-     * @type {FileExtension[]}
-     */
-    excludedFileTypes = input([]);
-    /**
-     * The base array of all file extensions that are generally allowed.
-     * Supported file types will be derived from this list, after excluding
-     * any types specified in `excludedFileTypes`.
-     *
-     * @defaultValue `['avi', 'mov', 'mp4', 'pdf', 'gif', 'png', 'jpg', 'jpeg']`
-     * @type {FileExtension[]}
-     */
-    fileTypes = input([
-        'pdf',
-        'png',
-        'jpg',
-        'jpeg',
-        'gif',
-        'avi',
-        'mov',
-        'mp4',
-    ]);
     /**
      * A computed signal that derives the list of currently supported file extensions.
      * It filters the base `fileTypes` array, removing any extensions present
@@ -3585,12 +3613,6 @@ class DropZoneComponent {
      * that have been selected or dropped by the user.
      */
     docs = signal([]);
-    /**
-     * A signal that holds an array of `AppFile` objects representing the files
-     * that have been selected or dropped by the user.
-  
-     */
-    variant = input('document');
     /**
      * A signal that acts as a boolean flag. It is set to `true` when the user
      * attempts to upload a file with an unsupported extension.
@@ -3720,6 +3742,10 @@ class DropZoneComponent {
      */
     handleDelete(fileName) {
         this.carouselLeft();
+        this.deletedDocs.set([
+            ...this.deletedDocs(),
+            this.docs().find((doc) => doc.fileName === fileName),
+        ]);
         this.docs.set(this.docs().filter((doc) => doc.fileName !== fileName));
         this.emitDocs();
         if (this.docs().length === 0) {
@@ -3766,7 +3792,7 @@ class DropZoneComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { docsChange: "docsChange" }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant\n  }\"\n>\n  @if(coverVariant && coverPreview){\n  <cai-document-preview\n    class=\"cover-container\"\n    [file]=\"{\n      fileName: 'cover.png',\n      imagePreviewUrl: coverUrl,\n      type: 'png',\n      size: 0,\n      file: null,\n      baseName: 'cover',\n      pageCount: undefined,\n      tag: ''\n    }\"\n    viewMode=\"small\"\n    [coverMinimalMode]=\"true\"\n    (onDelete)=\"handleDelete('cover.png')\"\n  ></cai-document-preview>\n  } @if (profileVariant) { @if(!profilePreview) {\n  <div>\n    <cai-avatar\n      [driver]=\"driver()\"\n      [size]=\"160\"\n      [rounded]=\"rounded()\"\n    ></cai-avatar>\n  </div>\n  } @else if(profilePreview) {\n  <div class=\"profile-container\">\n    <img\n      [class]=\"{\n        'profile-rounded-image': rounded(),\n        'profile-square-image': !rounded()\n      }\"\n      [src]=\"profileUrl\"\n    />\n  </div>\n  } }\n  <!--Image Cropper-->\n  @if(cropFile && showCrop){ @if (!isCropperReady()) {\n  <div class=\"cropper-loader\">\n    <div class=\"spinner\"></div>\n  </div>\n  }\n  <div class=\"cropper-overlay\">\n    <image-cropper\n      #cropper\n      class=\"img-cropper\"\n      [class.logoBorder]=\"logoVariant\"\n      [roundCropper]=\"roundedBorder ? true : false\"\n      [hideResizeSquares]=\"true\"\n      [allowMoveImage]=\"true\"\n      [transform]=\"transform\"\n      (transformChange)=\"onTransformChange($event)\"\n      format=\"png\"\n      [aspectRatio]=\"ratioHelper()\"\n      [resizeToWidth]=\"cropWidth()\"\n      [resizeToHeight]=\"cropHeight()\"\n      [containWithinAspectRatio]=\"true\"\n      [imageChangedEvent]=\"imageChangedEvent\"\n      (imageCropped)=\"imageCropped($event)\"\n      (imageLoaded)=\"imageLoaded($event)\"\n      (cropperReady)=\"cropperReady()\"\n      (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n    @if(isCropperReady()){\n    <div class=\"lower-part\">\n      <div class=\"range\">\n        <input\n          #inputRange\n          type=\"range\"\n          class=\"custom-range\"\n          min=\"1\"\n          max=\"10\"\n          step=\"0.1\"\n          [value]=\"zoomValue()\"\n          (input)=\"onZoomChange($event)\"\n        />\n      </div>\n      <div class=\"cropper-buttons\">\n        <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n        <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n      </div>\n    </div>\n    }\n  </div>\n  }\n  <!-- Carousel -->\n  @if(docCount > 0 && (documentVariant || videoVariant)) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <cai-document-preview\n        class=\"doc\"\n        [file]=\"doc\"\n        (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\"\n        (onTagChange)=\"handleTagChange($event)\"\n        viewMode=\"small\"\n      ></cai-document-preview>\n      }\n    </div>\n    @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div\n    class=\"drop-zone-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"$event.preventDefault()\"\n    [class]=\"{\n      'more-docs': docCount >= 3,\n      'small-more-docs': docCount >= 2 && smallSize,\n      unsupported: unsupported(),\n      smallView: smallView()\n    }\"\n  >\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      @if(logoVariant && logoPreview){\n      <div class=\"logo-container\">\n        <img class=\"logo-image\" [src]=\"logoUrl\" />\n      </div>\n      } @if(coverVariant || logoVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-cover\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(profileVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-profile\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(documentVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(videoVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-video\"\n        class=\"illustration\"\n      ></svg-icon>\n      }\n\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) {\n          <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p\n          class=\"badge\"\n          [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\"\n        >\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: DocumentPreviewComponent, selector: "cai-document-preview", inputs: ["coverMinimalMode", "noTagOption", "file", "viewMode"], outputs: ["onDelete", "onDownload", "onTagChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { docsChange: "docsChange" }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div class=\"container\" [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant\n  }\">\n  @if(coverVariant && coverPreview){\n  <cai-document-preview class=\"cover-container\" [file]=\"{\n      fileName: 'cover.png',\n      imagePreviewUrl: coverUrl,\n      type: 'png',\n      size: 0,\n      file: null,\n      baseName: 'cover',\n      pageCount: undefined,\n      tag: ''\n    }\" viewMode=\"small\" [coverMinimalMode]=\"true\" (onDelete)=\"handleDelete('cover.png')\"></cai-document-preview>\n  } @if (profileVariant) { @if(!profilePreview) {\n  <div>\n    <cai-avatar [driver]=\"driver()\" [size]=\"160\" [rounded]=\"rounded()\"></cai-avatar>\n  </div>\n  } @else if(profilePreview) {\n  <div class=\"profile-container\">\n    <img [class]=\"{\n        'profile-rounded-image': rounded(),\n        'profile-square-image': !rounded()\n      }\" [src]=\"profileUrl\" />\n  </div>\n  } }\n  <!--Image Cropper-->\n  @if(cropFile && showCrop){ @if (!isCropperReady()) {\n  <div class=\"cropper-loader\">\n    <div class=\"spinner\"></div>\n  </div>\n  }\n  <div class=\"cropper-overlay\">\n    <image-cropper #cropper class=\"img-cropper\" [class.logoBorder]=\"logoVariant\"\n      [roundCropper]=\"roundedBorder ? true : false\" [hideResizeSquares]=\"true\" [allowMoveImage]=\"true\"\n      [transform]=\"transform\" (transformChange)=\"onTransformChange($event)\" format=\"png\" [aspectRatio]=\"ratioHelper()\"\n      [resizeToWidth]=\"cropWidth()\" [resizeToHeight]=\"cropHeight()\" [containWithinAspectRatio]=\"true\"\n      [imageChangedEvent]=\"imageChangedEvent\" (imageCropped)=\"imageCropped($event)\" (imageLoaded)=\"imageLoaded($event)\"\n      (cropperReady)=\"cropperReady()\" (loadImageFailed)=\"loadImageFailed()\"></image-cropper>\n    @if(isCropperReady()){\n    <div class=\"lower-part\">\n      <div class=\"range\">\n        <input #inputRange type=\"range\" class=\"custom-range\" min=\"1\" max=\"10\" step=\"0.1\" [value]=\"zoomValue()\"\n          (input)=\"onZoomChange($event)\" />\n      </div>\n      <div class=\"cropper-buttons\">\n        <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n        <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n      </div>\n    </div>\n    }\n  </div>\n  }\n  <!-- Carousel -->\n  @if(docCount > 0 && (documentVariant || videoVariant)) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <cai-document-preview class=\"doc\" [file]=\"doc\" (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\" (onTagChange)=\"handleTagChange($event)\"\n        viewMode=\"small\"></cai-document-preview>\n      }\n    </div>\n    @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div class=\"drop-zone-container\" (drop)=\"onDrop($event)\" (dragover)=\"$event.preventDefault()\" [class]=\"{\n      'more-docs': docCount >= 3,\n      'small-more-docs': docCount >= 2 && smallSize,\n      unsupported: unsupported(),\n      smallView: smallView()\n    }\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      @if(logoVariant && logoPreview){\n      <div class=\"logo-container\">\n        <img class=\"logo-image\" [src]=\"logoUrl\" />\n      </div>\n      } @if(coverVariant || logoVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-cover\" class=\"illustration\"></svg-icon>\n      } @if(profileVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-profile\" class=\"illustration\"></svg-icon>\n      } @if(documentVariant){\n      <svg-icon name=\"cai-illustration-drop-zone\" class=\"illustration\"></svg-icon>\n      } @if(videoVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-video\" class=\"illustration\"></svg-icon>\n      }\n\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n            }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n\n      <input type=\"file\" aria-hidden=\"true\" multiple class=\"drop-zone-input\" #inputRef (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\" />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p class=\"badge\" [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\">\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: DocumentPreviewComponent, selector: "cai-document-preview", inputs: ["coverMinimalMode", "noTagOption", "file", "viewMode"], outputs: ["onDelete", "onDownload", "onTagChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
@@ -3775,7 +3801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DocumentPreviewComponent,
                         ImageCropperComponent,
                         AvatarComponent,
-                    ], template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant\n  }\"\n>\n  @if(coverVariant && coverPreview){\n  <cai-document-preview\n    class=\"cover-container\"\n    [file]=\"{\n      fileName: 'cover.png',\n      imagePreviewUrl: coverUrl,\n      type: 'png',\n      size: 0,\n      file: null,\n      baseName: 'cover',\n      pageCount: undefined,\n      tag: ''\n    }\"\n    viewMode=\"small\"\n    [coverMinimalMode]=\"true\"\n    (onDelete)=\"handleDelete('cover.png')\"\n  ></cai-document-preview>\n  } @if (profileVariant) { @if(!profilePreview) {\n  <div>\n    <cai-avatar\n      [driver]=\"driver()\"\n      [size]=\"160\"\n      [rounded]=\"rounded()\"\n    ></cai-avatar>\n  </div>\n  } @else if(profilePreview) {\n  <div class=\"profile-container\">\n    <img\n      [class]=\"{\n        'profile-rounded-image': rounded(),\n        'profile-square-image': !rounded()\n      }\"\n      [src]=\"profileUrl\"\n    />\n  </div>\n  } }\n  <!--Image Cropper-->\n  @if(cropFile && showCrop){ @if (!isCropperReady()) {\n  <div class=\"cropper-loader\">\n    <div class=\"spinner\"></div>\n  </div>\n  }\n  <div class=\"cropper-overlay\">\n    <image-cropper\n      #cropper\n      class=\"img-cropper\"\n      [class.logoBorder]=\"logoVariant\"\n      [roundCropper]=\"roundedBorder ? true : false\"\n      [hideResizeSquares]=\"true\"\n      [allowMoveImage]=\"true\"\n      [transform]=\"transform\"\n      (transformChange)=\"onTransformChange($event)\"\n      format=\"png\"\n      [aspectRatio]=\"ratioHelper()\"\n      [resizeToWidth]=\"cropWidth()\"\n      [resizeToHeight]=\"cropHeight()\"\n      [containWithinAspectRatio]=\"true\"\n      [imageChangedEvent]=\"imageChangedEvent\"\n      (imageCropped)=\"imageCropped($event)\"\n      (imageLoaded)=\"imageLoaded($event)\"\n      (cropperReady)=\"cropperReady()\"\n      (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n    @if(isCropperReady()){\n    <div class=\"lower-part\">\n      <div class=\"range\">\n        <input\n          #inputRange\n          type=\"range\"\n          class=\"custom-range\"\n          min=\"1\"\n          max=\"10\"\n          step=\"0.1\"\n          [value]=\"zoomValue()\"\n          (input)=\"onZoomChange($event)\"\n        />\n      </div>\n      <div class=\"cropper-buttons\">\n        <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n        <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n      </div>\n    </div>\n    }\n  </div>\n  }\n  <!-- Carousel -->\n  @if(docCount > 0 && (documentVariant || videoVariant)) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <cai-document-preview\n        class=\"doc\"\n        [file]=\"doc\"\n        (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\"\n        (onTagChange)=\"handleTagChange($event)\"\n        viewMode=\"small\"\n      ></cai-document-preview>\n      }\n    </div>\n    @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div\n    class=\"drop-zone-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"$event.preventDefault()\"\n    [class]=\"{\n      'more-docs': docCount >= 3,\n      'small-more-docs': docCount >= 2 && smallSize,\n      unsupported: unsupported(),\n      smallView: smallView()\n    }\"\n  >\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      @if(logoVariant && logoPreview){\n      <div class=\"logo-container\">\n        <img class=\"logo-image\" [src]=\"logoUrl\" />\n      </div>\n      } @if(coverVariant || logoVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-cover\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(profileVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-profile\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(documentVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone\"\n        class=\"illustration\"\n      ></svg-icon>\n      } @if(videoVariant){\n      <svg-icon\n        name=\"cai-illustration-drop-zone-video\"\n        class=\"illustration\"\n      ></svg-icon>\n      }\n\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) {\n          <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p\n          class=\"badge\"\n          [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\"\n        >\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"] }]
+                    ], template: "@let docCount = docs().length; @let cropFile = crop() === true; @let showCrop =\nshowCropper() === true; @let documentVariant = variant() === \"document\"; @let\nvideoVariant = variant() === \"video\"; @let profileVariant = variant() ===\n\"profile\"; @let coverVariant = variant() === \"cover\"; @let logoVariant =\nvariant() === \"logo\"; @let roundedBorder = rounded() === true; @let coverPreview\n= coverUrl !== \"\"; @let profilePreview = profileUrl !== \"\"; @let logoPreview =\nlogoUrl !== \"\"; @let smallSize = size() === \"480px\";\n\n<div class=\"container\" [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant\n  }\">\n  @if(coverVariant && coverPreview){\n  <cai-document-preview class=\"cover-container\" [file]=\"{\n      fileName: 'cover.png',\n      imagePreviewUrl: coverUrl,\n      type: 'png',\n      size: 0,\n      file: null,\n      baseName: 'cover',\n      pageCount: undefined,\n      tag: ''\n    }\" viewMode=\"small\" [coverMinimalMode]=\"true\" (onDelete)=\"handleDelete('cover.png')\"></cai-document-preview>\n  } @if (profileVariant) { @if(!profilePreview) {\n  <div>\n    <cai-avatar [driver]=\"driver()\" [size]=\"160\" [rounded]=\"rounded()\"></cai-avatar>\n  </div>\n  } @else if(profilePreview) {\n  <div class=\"profile-container\">\n    <img [class]=\"{\n        'profile-rounded-image': rounded(),\n        'profile-square-image': !rounded()\n      }\" [src]=\"profileUrl\" />\n  </div>\n  } }\n  <!--Image Cropper-->\n  @if(cropFile && showCrop){ @if (!isCropperReady()) {\n  <div class=\"cropper-loader\">\n    <div class=\"spinner\"></div>\n  </div>\n  }\n  <div class=\"cropper-overlay\">\n    <image-cropper #cropper class=\"img-cropper\" [class.logoBorder]=\"logoVariant\"\n      [roundCropper]=\"roundedBorder ? true : false\" [hideResizeSquares]=\"true\" [allowMoveImage]=\"true\"\n      [transform]=\"transform\" (transformChange)=\"onTransformChange($event)\" format=\"png\" [aspectRatio]=\"ratioHelper()\"\n      [resizeToWidth]=\"cropWidth()\" [resizeToHeight]=\"cropHeight()\" [containWithinAspectRatio]=\"true\"\n      [imageChangedEvent]=\"imageChangedEvent\" (imageCropped)=\"imageCropped($event)\" (imageLoaded)=\"imageLoaded($event)\"\n      (cropperReady)=\"cropperReady()\" (loadImageFailed)=\"loadImageFailed()\"></image-cropper>\n    @if(isCropperReady()){\n    <div class=\"lower-part\">\n      <div class=\"range\">\n        <input #inputRange type=\"range\" class=\"custom-range\" min=\"1\" max=\"10\" step=\"0.1\" [value]=\"zoomValue()\"\n          (input)=\"onZoomChange($event)\" />\n      </div>\n      <div class=\"cropper-buttons\">\n        <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n        <button class=\"submit-button\" (click)=\"submitCrop()\">Submit</button>\n      </div>\n    </div>\n    }\n  </div>\n  }\n  <!-- Carousel -->\n  @if(docCount > 0 && (documentVariant || videoVariant)) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <cai-document-preview class=\"doc\" [file]=\"doc\" (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\" (onTagChange)=\"handleTagChange($event)\"\n        viewMode=\"small\"></cai-document-preview>\n      }\n    </div>\n    @if((docCount >= 3 && !smallSize) || (docCount >= 2 && smallSize) ) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div class=\"drop-zone-container\" (drop)=\"onDrop($event)\" (dragover)=\"$event.preventDefault()\" [class]=\"{\n      'more-docs': docCount >= 3,\n      'small-more-docs': docCount >= 2 && smallSize,\n      unsupported: unsupported(),\n      smallView: smallView()\n    }\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      @if(logoVariant && logoPreview){\n      <div class=\"logo-container\">\n        <img class=\"logo-image\" [src]=\"logoUrl\" />\n      </div>\n      } @if(coverVariant || logoVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-cover\" class=\"illustration\"></svg-icon>\n      } @if(profileVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-profile\" class=\"illustration\"></svg-icon>\n      } @if(documentVariant){\n      <svg-icon name=\"cai-illustration-drop-zone\" class=\"illustration\"></svg-icon>\n      } @if(videoVariant){\n      <svg-icon name=\"cai-illustration-drop-zone-video\" class=\"illustration\"></svg-icon>\n      }\n\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n            }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n\n      <input type=\"file\" aria-hidden=\"true\" multiple class=\"drop-zone-input\" #inputRef (input)=\"onInput($event)\"\n        (change)=\"fileChangeEvent($event)\" />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p class=\"badge\" [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\">\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cai-cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".container{display:flex;gap:8px;position:relative}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:456px!important}.container .largeContainer{width:628px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.largeContainer .docs{max-width:456px!important}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.smallView .drop-zone{flex-direction:column!important;padding:12px 0}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:14px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs .illustration{width:100px;height:100px}.small-more-docs .drop-zone{padding:5px 0;flex-direction:column}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(0,0,0,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.smallContainer .cropper-overlay{width:468px!important}.largeContainer .cropper-overlay{width:628px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:1000;gap:4px;opacity:1;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range,.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff}.cover-container{width:267px;height:178px;overflow:hidden}.cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block}.profile-container{width:178px;height:178px;overflow:hidden}.logo-container{position:absolute;top:0;left:0;width:628px;height:214px;overflow:hidden}.logo-image{width:100%;height:100%;z-index:1000}@keyframes spin{to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;background:linear-gradient(to right,#6692f1 0% 50%,#eee 50% 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-color:#fff;background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M14 3V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L11 0C10.7348 0 10.4804 0.105357 10.2929 0.292893C10.1054 0.48043 10 0.734784 10 1V3C10 3.26522 10.1054 3.51957 10.2929 3.70711C10.4804 3.89464 10.7348 4 11 4H13C13.2652 4 13.5196 3.89464 13.7071 3.70711C13.8946 3.51957 14 3.26522 14 3ZM9 3V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0L6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V3C5 3.26522 5.10536 3.51957 5.29289 3.70711C5.48043 3.89464 5.73478 4 6 4L8 4C8.26522 4 8.51957 3.89464 8.70711 3.70711C8.89464 3.51957 9 3.26522 9 3ZM4 3V1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 9.53674e-07 0.734784 9.53674e-07 1V3C9.53674e-07 3.26522 0.105357 3.51957 0.292893 3.70711C0.48043 3.89464 0.734784 4 1 4H3C3.26522 4 3.51957 3.89464 3.70711 3.70711C3.89464 3.51957 4 3.26522 4 3ZM14 9V7C14 6.73478 13.8946 6.48043 13.7071 6.29289C13.5196 6.10536 13.2652 6 13 6H11C10.7348 6 10.4804 6.10536 10.2929 6.29289C10.1054 6.48043 10 6.73478 10 7V9C10 9.26522 10.1054 9.51957 10.2929 9.70711C10.4804 9.89464 10.7348 10 11 10H13C13.2652 10 13.5196 9.89464 13.7071 9.70711C13.8946 9.51957 14 9.26522 14 9ZM9 9V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6L6 6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9ZM4 9V7C4 6.73478 3.89464 6.48043 3.70711 6.29289C3.51957 6.10536 3.26522 6 3 6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 9.53674e-07 6.73478 9.53674e-07 7V9C9.53674e-07 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H3C3.26522 10 3.51957 9.89464 3.70711 9.70711C3.89464 9.51957 4 9.26522 4 9Z\" fill=\"%233B73ED\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;background-size:14px 18px}input[type=range]::-webkit-slider-runnable-track{background-color:transparent;height:6px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { docsChange: [{
                 type: Output
             }], inputRange: [{