carriera-intern-components 1.1.166 → 1.1.167

package/app/components/avatar/avatar.component.d.ts

@@ -14,7 +14,7 @@ export declare class AvatarComponent {
      * The size of the avatar in pixels.
      * @type {Size}
      */
-    size: import("@angular/core").InputSignal<18 | 22 | 32 | 74 | 160>;
+    size: import("@angular/core").InputSignal<160 | 18 | 22 | 32 | 74>;
     /**
      * Whether the avatar should be rounded or not.
      * @type {boolean}

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,27 @@ 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;
+    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 +55,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 +87,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 +168,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,90 @@ 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);
+    // 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 +3596,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 +3609,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.
@@ -3766,7 +3784,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\n{{docCount}} dfsfds\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
@@ -3775,7 +3793,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\n{{docCount}} dfsfds\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"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { docsChange: [{
                 type: Output
             }], inputRange: [{