carriera-intern-components 1.1.165 → 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/copy/copy.component.d.ts

@@ -0,0 +1,20 @@
+import { eAlignment } from '../../enums';
+import { eGeneralActions } from '../../enums/general-actions.enum';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { Clipboard } from '@angular/cdk/clipboard';
+import * as i0 from "@angular/core";
+export declare class CopyComponent {
+    private clipboard;
+    value: import("@angular/core").InputSignal<string | undefined>;
+    alignment: import("@angular/core").InputSignal<eAlignment>;
+    copyTooltip: import("@angular/core").InputSignal<string | undefined>;
+    copied: import("@angular/core").WritableSignal<boolean>;
+    eGeneralActions: typeof eGeneralActions;
+    eAlignment: typeof eAlignment;
+    constructor(clipboard: Clipboard);
+    tooltip: NgbTooltip;
+    onCopy(): void;
+    resetCopied(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CopyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CopyComponent, "cai-copy", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "copyTooltip": { "alias": "copyTooltip"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

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/app/enums/alignment.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum eAlignment {
+    LEFT = "left",
+    RIGHT = "right"
+}

package/app/enums/index.d.ts

@@ -0,0 +1,3 @@
+export * from './string-placeholder.enum';
+export * from './general-actions.enum';
+export * from './alignment.enum';

package/app/enums/string-placeholder.enum.d.ts

@@ -0,0 +1,3 @@
+export declare enum eStringPlaceholder {
+    EMPTY = ""
+}

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';
@@ -16,6 +16,7 @@ import { Subject, takeUntil } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/cdk/clipboard';
 
 /**
  * Creates a validator that ignores validation rules when the control is autofilled.
@@ -3382,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();
@@ -3541,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
@@ -3584,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.
@@ -3765,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,
@@ -3774,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: [{
@@ -6201,13 +6220,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['holder1', { static: true }]
             }] } });
 
+var eStringPlaceholder;
+(function (eStringPlaceholder) {
+    eStringPlaceholder["EMPTY"] = "";
+})(eStringPlaceholder || (eStringPlaceholder = {}));
+
+var eAlignment;
+(function (eAlignment) {
+    eAlignment["LEFT"] = "left";
+    eAlignment["RIGHT"] = "right";
+})(eAlignment || (eAlignment = {}));
+
+class CopyComponent {
+    clipboard;
+    value = input();
+    alignment = input(eAlignment.RIGHT);
+    copyTooltip = input();
+    copied = signal(false);
+    // Enums
+    eGeneralActions = eGeneralActions;
+    eAlignment = eAlignment;
+    constructor(clipboard) {
+        this.clipboard = clipboard;
+    }
+    tooltip;
+    onCopy() {
+        this.clipboard.copy(this.value() ?? '');
+        this.copied.set(true);
+    }
+    resetCopied() {
+        this.copied.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CopyComponent, deps: [{ token: i1$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: CopyComponent, isStandalone: true, selector: "cai-copy", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, copyTooltip: { classPropertyName: "copyTooltip", publicName: "copyTooltip", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: NgbTooltip, descendants: true }], ngImport: i0, template: "@let isCopied = !!copied();\n<div\n  class=\"copy-container d-flex align-items-center gap-1\"\n  (mouseleave)=\"resetCopied()\"\n>\n  <div\n    class=\"copy-content\"\n    [class]=\"{\n    'order-1': alignment() === eAlignment.LEFT,\n    'order-0': alignment() === eAlignment.RIGHT,\n  }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    (click)=\"onCopy()\"\n    [ngbTooltip]=\"tooltipTemplate\"\n    [container]=\"'body'\"\n    [tooltipClass]=\"isCopied ? 'tooltip-bg-blue-500' : ''\"\n    placement=\"bottom\"\n    #tooltip=\"ngbTooltip\"\n    class=\"copy-icon\"\n    [class]=\"{\n      'text-black-100': !isCopied,\n      'hover:text-black-300': !isCopied,\n      'text-blue-700': isCopied,\n    }\"\n  >\n    <svg-icon [name]=\"'cai-copy'\" class=\"icon transition\"></svg-icon>\n  </div>\n</div>\n\n@let copyText = isCopied ? eGeneralActions.COPIED : copyTooltip() ??\neGeneralActions.COPY;\n<ng-template #tooltipTemplate>\n  {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon{opacity:0;transition:opacity .1s ease-in-out}.copy-container .copy-icon .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:12px;height:12px}.copy-container:hover .copy-icon{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
+                // Components
+                SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CopyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cai-copy', imports: [
+                        CommonModule,
+                        NgbTooltip,
+                        // Components
+                        SvgIconComponent,
+                    ], template: "@let isCopied = !!copied();\n<div\n  class=\"copy-container d-flex align-items-center gap-1\"\n  (mouseleave)=\"resetCopied()\"\n>\n  <div\n    class=\"copy-content\"\n    [class]=\"{\n    'order-1': alignment() === eAlignment.LEFT,\n    'order-0': alignment() === eAlignment.RIGHT,\n  }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    (click)=\"onCopy()\"\n    [ngbTooltip]=\"tooltipTemplate\"\n    [container]=\"'body'\"\n    [tooltipClass]=\"isCopied ? 'tooltip-bg-blue-500' : ''\"\n    placement=\"bottom\"\n    #tooltip=\"ngbTooltip\"\n    class=\"copy-icon\"\n    [class]=\"{\n      'text-black-100': !isCopied,\n      'hover:text-black-300': !isCopied,\n      'text-blue-700': isCopied,\n    }\"\n  >\n    <svg-icon [name]=\"'cai-copy'\" class=\"icon transition\"></svg-icon>\n  </div>\n</div>\n\n@let copyText = isCopied ? eGeneralActions.COPIED : copyTooltip() ??\neGeneralActions.COPY;\n<ng-template #tooltipTemplate>\n  {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon{opacity:0;transition:opacity .1s ease-in-out}.copy-container .copy-icon .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:12px;height:12px}.copy-container:hover .copy-icon{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Clipboard }], propDecorators: { tooltip: [{
+                type: ViewChild,
+                args: [NgbTooltip]
+            }] } });
+
 /*
- * Public API Surface of ca-components
+ * Public API Surface of carriera-intern-components
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, CaiInputDatetimePickerComponent, DropZoneComponent, DropdownTypes, InputComponent, PmComponent, ignoreWhenAutofilled };
+export { AvatarComponent, CaiInputDatetimePickerComponent, CopyComponent, DropZoneComponent, DropdownTypes, InputComponent, PmComponent, ignoreWhenAutofilled };
 //# sourceMappingURL=carriera-intern-components.mjs.map