carriera-intern-components 1.1.193 → 1.1.194

package/fesm2022/carriera-intern-components.mjs

@@ -4146,7 +4146,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 }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", 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: { onDeletedFileIds: "onDeletedFileIds", 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\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant,\n    hasCropper: isCropperReady()\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      [output]=\"'base64'\"\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 && !smallSize,\n      'small-more-docs': docCount >= 2 && smallSize,\n      'max-reached-drop-design': countFiles === this.docs().length && variant() === 'document',\n      'max-reached-more-doc-sm':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 2 && smallSize,\n      'max-reached-more-doc-lg':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 3 && !smallSize,\n\n      unsupported: unsupported(),\n      smallView: this.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      } @if(countFiles === this.docs().length && this.variant() === \"document\")\n      {\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          <span class=\"line\">MAX COUNT</span>\n          <span class=\"line\">REACHED</span>\n        </p>\n        <p class=\"subtext\">\n          <span class=\"line\">{{ countFiles }} FILES </span>\n          <span class=\"line\">IMPORTED</span>\n        </p>\n      </div>\n\n      } @else{\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n      }\n\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: ["p{margin-bottom:0}.container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:468px!important}.container .largeContainer{width:616px!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:20px 0;width:181px;height:170px}.smallView .drop-zone .drop-zone-text .heading,.smallView .drop-zone .drop-zone-text .subtext{line-height:18px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.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:80px;height:80px}.small-more-docs .drop-zone{padding:14px 0!important;flex-direction:column}.small-more-docs .drop-zone .drop-zone-text .subtext{margin-bottom:1rem}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text .subtext{line-height:18px;margin-bottom:0}.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 .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.max-reached,.max-reached-drop-design,.max-reached-more-doc-sm{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-sm .drop-zone{padding:0!important}.max-reached-more-doc-sm .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-sm .drop-zone-text .subtext{margin-bottom:1rem}.max-reached-more-doc-lg{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-lg .drop-zone{padding:0!important}.max-reached-more-doc-lg .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-lg .drop-zone-text .subtext{margin-bottom:1rem}.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;margin-bottom:0;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.hasCropper{min-height:212px;position:relative}.smallContainer{position:relative;min-height:178px;padding:4px 6px!important}.smallContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.smallContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.largeContainer{position:relative;min-height:178px;padding:4px 6px!important}.largeContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px;padding:4px 6px}.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;border-radius:2px}.profile-container-ro{width:178px;height:178px;overflow:hidden}.profile-container-sq{width:160px;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 }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", 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: { onDeletedFileIds: "onDeletedFileIds", 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\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant,\n    hasCropper: isCropperReady()\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      [output]=\"'base64'\"\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 && !smallSize,\n      'small-more-docs': docCount >= 2 && smallSize,\n      'max-reached-drop-design': countFiles === this.docs().length && variant() === 'document',\n      'max-reached-more-doc-sm':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 2 && smallSize,\n      'max-reached-more-doc-lg':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 3 && !smallSize,\n\n      unsupported: unsupported(),\n      smallView: this.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      } @if(countFiles === this.docs().length && this.variant() === \"document\")\n      {\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          <span class=\"line\">MAX COUNT</span>\n          <span class=\"line\">REACHED</span>\n        </p>\n        <p class=\"subtext\">\n          <span class=\"line\">{{ countFiles }} FILES </span>\n          <span class=\"line\">IMPORTED</span>\n        </p>\n      </div>\n\n      } @else{\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n      }\n\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: ["p{margin-bottom:0}.container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:468px!important}.container .largeContainer{width:616px!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:20px 0;width:181px;height:170px}.smallView .drop-zone .drop-zone-text .heading,.smallView .drop-zone .drop-zone-text .subtext{line-height:18px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.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:80px;height:80px}.small-more-docs .drop-zone{padding:14px 0!important;flex-direction:column}.small-more-docs .drop-zone .drop-zone-text .subtext{margin-bottom:1rem!important}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text .subtext{line-height:18px;margin-bottom:0}.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 .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.max-reached,.max-reached-drop-design,.max-reached-more-doc-sm{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-sm .drop-zone{padding:0!important}.max-reached-more-doc-sm .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-sm .drop-zone-text .subtext{margin-bottom:1rem!important}.max-reached-more-doc-lg{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-lg .drop-zone{padding:0!important}.max-reached-more-doc-lg .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-lg .drop-zone-text .subtext{margin-bottom:1rem!important}.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;margin-bottom:0;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.hasCropper{min-height:212px;position:relative}.smallContainer{position:relative;min-height:178px;padding:4px 6px!important}.smallContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.smallContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.largeContainer{position:relative;min-height:178px;padding:4px 6px!important}.largeContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px;padding:4px 6px}.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;border-radius:2px}.profile-container-ro{width:178px;height:178px;overflow:hidden}.profile-container-sq{width:160px;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,
@@ -4155,7 +4155,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\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant,\n    hasCropper: isCropperReady()\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      [output]=\"'base64'\"\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 && !smallSize,\n      'small-more-docs': docCount >= 2 && smallSize,\n      'max-reached-drop-design': countFiles === this.docs().length && variant() === 'document',\n      'max-reached-more-doc-sm':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 2 && smallSize,\n      'max-reached-more-doc-lg':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 3 && !smallSize,\n\n      unsupported: unsupported(),\n      smallView: this.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      } @if(countFiles === this.docs().length && this.variant() === \"document\")\n      {\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          <span class=\"line\">MAX COUNT</span>\n          <span class=\"line\">REACHED</span>\n        </p>\n        <p class=\"subtext\">\n          <span class=\"line\">{{ countFiles }} FILES </span>\n          <span class=\"line\">IMPORTED</span>\n        </p>\n      </div>\n\n      } @else{\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n      }\n\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: ["p{margin-bottom:0}.container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:468px!important}.container .largeContainer{width:616px!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:20px 0;width:181px;height:170px}.smallView .drop-zone .drop-zone-text .heading,.smallView .drop-zone .drop-zone-text .subtext{line-height:18px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.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:80px;height:80px}.small-more-docs .drop-zone{padding:14px 0!important;flex-direction:column}.small-more-docs .drop-zone .drop-zone-text .subtext{margin-bottom:1rem}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text .subtext{line-height:18px;margin-bottom:0}.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 .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.max-reached,.max-reached-drop-design,.max-reached-more-doc-sm{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-sm .drop-zone{padding:0!important}.max-reached-more-doc-sm .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-sm .drop-zone-text .subtext{margin-bottom:1rem}.max-reached-more-doc-lg{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-lg .drop-zone{padding:0!important}.max-reached-more-doc-lg .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-lg .drop-zone-text .subtext{margin-bottom:1rem}.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;margin-bottom:0;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.hasCropper{min-height:212px;position:relative}.smallContainer{position:relative;min-height:178px;padding:4px 6px!important}.smallContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.smallContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.largeContainer{position:relative;min-height:178px;padding:4px 6px!important}.largeContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px;padding:4px 6px}.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;border-radius:2px}.profile-container-ro{width:178px;height:178px;overflow:hidden}.profile-container-sq{width:160px;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\"; @let countFiles =\nthis.maxCountFiles();\n\n<div\n  class=\"container\"\n  [class]=\"{\n    smallContainer: smallSize,\n    largeContainer: !smallSize,\n    logoVar: logoVariant,\n    hasCropper: isCropperReady()\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      [output]=\"'base64'\"\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 && !smallSize,\n      'small-more-docs': docCount >= 2 && smallSize,\n      'max-reached-drop-design': countFiles === this.docs().length && variant() === 'document',\n      'max-reached-more-doc-sm':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 2 && smallSize,\n      'max-reached-more-doc-lg':\n        countFiles === this.docs().length &&\n        variant() === 'document' &&\n        docCount >= 3 && !smallSize,\n\n      unsupported: unsupported(),\n      smallView: this.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      } @if(countFiles === this.docs().length && this.variant() === \"document\")\n      {\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          <span class=\"line\">MAX COUNT</span>\n          <span class=\"line\">REACHED</span>\n        </p>\n        <p class=\"subtext\">\n          <span class=\"line\">{{ countFiles }} FILES </span>\n          <span class=\"line\">IMPORTED</span>\n        </p>\n      </div>\n\n      } @else{\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) { <span>HERE</span>\n          }\n        </p>\n        @if(!coverPreview && !profilePreview){\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n        } @if(coverPreview || profilePreview){\n        <p class=\"subtext\">OR CLICK TO REPLACE</p>\n        }\n      </div>\n      }\n\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: ["p{margin-bottom:0}.container{display:flex;gap:8px;position:relative;padding-left:0!important;padding-right:0!important}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.container .smallContainer{width:468px!important}.container .largeContainer{width:616px!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:20px 0;width:181px;height:170px}.smallView .drop-zone .drop-zone-text .heading,.smallView .drop-zone .drop-zone-text .subtext{line-height:18px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.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:80px;height:80px}.small-more-docs .drop-zone{padding:14px 0!important;flex-direction:column}.small-more-docs .drop-zone .drop-zone-text .subtext{margin-bottom:1rem!important}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text .subtext{line-height:18px;margin-bottom:0}.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 .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.max-reached,.max-reached-drop-design,.max-reached-more-doc-sm{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-sm .drop-zone{padding:0!important}.max-reached-more-doc-sm .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-sm .drop-zone-text .subtext{margin-bottom:1rem!important}.max-reached-more-doc-lg{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc-lg .drop-zone{padding:0!important}.max-reached-more-doc-lg .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-doc-lg .drop-zone-text .subtext{margin-bottom:1rem!important}.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;margin-bottom:0;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.hasCropper{min-height:212px;position:relative}.smallContainer{position:relative;min-height:178px;padding:4px 6px!important}.smallContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.smallContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.largeContainer{position:relative;min-height:178px;padding:4px 6px!important}.largeContainer .cropper-overlay{width:100%;height:100%;padding:4px 6px;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px;padding:4px 6px}.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;border-radius:2px}.profile-container-ro{width:178px;height:178px;overflow:hidden}.profile-container-sq{width:160px;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: { onDeletedFileIds: [{
                 type: Output
             }], docsChange: [{