carriera-intern-components 1.1.52 → 1.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4974,7 +4974,7 @@ class DropZoneComponent {
|
|
|
4974
4974
|
}
|
|
4975
4975
|
}
|
|
4976
4976
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropZoneComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
4977
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", 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 }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", 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" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = logoUrl !== \"\";\n@let smallSize = size() === \"480px\"; \n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n isDetailsSlider: isDetailsSlider(),\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 tagChanged: false,\n fileNameChanged: false,\n tags: [],\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\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 }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @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()\" [style.--carousel-index]=\"carouselIndex()\">\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 (onFileNameChange)=\"handleFileNameChange($event)\"\n [tags]=\"documentTags()\"\n viewMode=\"small\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n ></cai-document-preview>\n } \n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\" [style.opacity]=\"isDetailsSlider() && carouselIndex() === 0 ? '0' : '1'\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n (click)=\"carouselRight()\"\n [style.opacity]=\"isDetailsSlider() && carouselIndex() === docCount - 1 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n } \n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for(doc of docs(); track $index) {\n <div class=\"slider-item\" (click)=\"carouselIndex.set($index)\" [class.active]=\"$index === carouselIndex()\" ></div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n countFiles === this.docs().length && documentVariant,\n 'max-reached-more-doc':\n countFiles === this.docs().length && documentVariant,\n 'size-large-drag': dragMode() && largeSize,\n 'size-small-drag': dragMode() && smallSize,\n unsupported: unsupported(),\n smallView: this.smallView(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n @if (onDragover()) {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DROP FILES HERE</p>\n </div>\n } @else {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DRAG FILES HERE</p>\n </div>\n }\n } @else {\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n }\n @if (coverVariant || logoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (profileVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (documentVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (videoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (\n countFiles === this.docs().length && documentVariant\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 } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES\n @if (docCount < 1) {\n <span>HERE</span>\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\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;margin:0!important}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: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:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.container.dragMode{height:466px!important;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .size-large-drag{width:640px!important}.container.dragMode .size-small-drag{width:480px!important}.container.dragMode .drop-zone-container{position:relative;width:100%;height:466px;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.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{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.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,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.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;padding-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-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.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{height:178px!important;position:relative}.hasCropper{height:204px!important;position:relative}.smallContainer{position:relative;height:178px}.smallContainer .cropper-overlay{width:100%;height:100%;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}.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:616px;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}.isDetailsSlider{width:100%!important;height:100%!important;overflow:hidden}.isDetailsSlider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important}.isDetailsSlider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;transition:width .2s ease-in-out,background-color .2s ease-in-out}.isDetailsSlider .sliders .slider-item.active{width:20px;background-color:#919191}.isDetailsSlider .drop-zone-container{display:none!important}.isDetailsSlider .docs{width:100%!important;height:100%!important;overflow:hidden!important;position:relative!important}.isDetailsSlider .doc-container{align-items:center!important;height:fit-content!important;margin-bottom:12px;flex-shrink:0!important;gap:0!important}.isDetailsSlider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;background-color:transparent!important}.isDetailsSlider .carousel-button{position:absolute!important;top:45%!important}\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", "cdlDetailsMode", "noTagOption", "tags", "file", "viewMode"], outputs: ["onFileNameChange", "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", "tooltip", "customHoverSize"] }] });
|
|
4977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", 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 }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", 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" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = logoUrl !== \"\";\n@let smallSize = size() === \"480px\"; \n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n isDetailsSlider: isDetailsSlider(),\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 tagChanged: false,\n fileNameChanged: false,\n tags: [],\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\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 }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @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()\" [style.--carousel-index]=\"carouselIndex()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview\n class=\"doc\"\n [class.doc-visible]=\"isDetailsSlider() && $index === carouselIndex()\"\n [class.doc-hidden]=\"isDetailsSlider() && $index !== carouselIndex()\"\n [file]=\"doc\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n [tags]=\"documentTags()\"\n viewMode=\"small\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n ></cai-document-preview>\n } \n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\" [style.opacity]=\"isDetailsSlider() && carouselIndex() === 0 ? '0' : '1'\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n (click)=\"carouselRight()\"\n [style.opacity]=\"isDetailsSlider() && carouselIndex() === docCount - 1 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n } \n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for(doc of docs(); track $index) {\n <div class=\"slider-item\" (click)=\"carouselIndex.set($index)\" [class.active]=\"$index === carouselIndex()\" ></div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n countFiles === this.docs().length && documentVariant,\n 'max-reached-more-doc':\n countFiles === this.docs().length && documentVariant,\n 'size-large-drag': dragMode() && largeSize,\n 'size-small-drag': dragMode() && smallSize,\n unsupported: unsupported(),\n smallView: this.smallView(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n @if (onDragover()) {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DROP FILES HERE</p>\n </div>\n } @else {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DRAG FILES HERE</p>\n </div>\n }\n } @else {\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n }\n @if (coverVariant || logoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (profileVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (documentVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (videoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (\n countFiles === this.docs().length && documentVariant\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 } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES\n @if (docCount < 1) {\n <span>HERE</span>\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\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;margin:0!important}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: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:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.container.dragMode{height:466px!important;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .size-large-drag{width:640px!important}.container.dragMode .size-small-drag{width:480px!important}.container.dragMode .drop-zone-container{position:relative;width:100%;height:466px;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.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{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.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,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.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;padding-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-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.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{height:178px!important;position:relative}.hasCropper{height:204px!important;position:relative}.smallContainer{position:relative;height:178px}.smallContainer .cropper-overlay{width:100%;height:100%;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}.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:616px;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}.isDetailsSlider{width:100%!important;height:100%!important;overflow:hidden}.isDetailsSlider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important}.isDetailsSlider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;transition:width .2s ease-in-out,background-color .2s ease-in-out}.isDetailsSlider .sliders .slider-item.active{width:20px;background-color:#919191}.isDetailsSlider .drop-zone-container{display:none!important}.isDetailsSlider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.isDetailsSlider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;margin-bottom:12px;flex-shrink:0!important;gap:0!important;position:relative!important}.isDetailsSlider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.isDetailsSlider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.isDetailsSlider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.isDetailsSlider .carousel-button{position:absolute!important;top:45%!important}\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", "cdlDetailsMode", "noTagOption", "tags", "file", "viewMode"], outputs: ["onFileNameChange", "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", "tooltip", "customHoverSize"] }] });
|
|
4978
4978
|
}
|
|
4979
4979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropZoneComponent, decorators: [{
|
|
4980
4980
|
type: Component,
|
|
@@ -4983,7 +4983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4983
4983
|
DocumentPreviewComponent,
|
|
4984
4984
|
ImageCropperComponent,
|
|
4985
4985
|
AvatarComponent,
|
|
4986
|
-
], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = logoUrl !== \"\";\n@let smallSize = size() === \"480px\"; \n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n isDetailsSlider: isDetailsSlider(),\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 tagChanged: false,\n fileNameChanged: false,\n tags: [],\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\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 }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @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()\" [style.--carousel-index]=\"carouselIndex()\">\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 (onFileNameChange)=\"handleFileNameChange($event)\"\n [tags]=\"documentTags()\"\n viewMode=\"small\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n ></cai-document-preview>\n } \n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\" [style.opacity]=\"isDetailsSlider() && carouselIndex() === 0 ? '0' : '1'\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n (click)=\"carouselRight()\"\n [style.opacity]=\"isDetailsSlider() && carouselIndex() === docCount - 1 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n } \n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for(doc of docs(); track $index) {\n <div class=\"slider-item\" (click)=\"carouselIndex.set($index)\" [class.active]=\"$index === carouselIndex()\" ></div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n countFiles === this.docs().length && documentVariant,\n 'max-reached-more-doc':\n countFiles === this.docs().length && documentVariant,\n 'size-large-drag': dragMode() && largeSize,\n 'size-small-drag': dragMode() && smallSize,\n unsupported: unsupported(),\n smallView: this.smallView(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n @if (onDragover()) {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DROP FILES HERE</p>\n </div>\n } @else {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DRAG FILES HERE</p>\n </div>\n }\n } @else {\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n }\n @if (coverVariant || logoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (profileVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (documentVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (videoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (\n countFiles === this.docs().length && documentVariant\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 } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES\n @if (docCount < 1) {\n <span>HERE</span>\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\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;margin:0!important}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: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:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.container.dragMode{height:466px!important;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .size-large-drag{width:640px!important}.container.dragMode .size-small-drag{width:480px!important}.container.dragMode .drop-zone-container{position:relative;width:100%;height:466px;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.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{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.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,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.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;padding-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-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.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{height:178px!important;position:relative}.hasCropper{height:204px!important;position:relative}.smallContainer{position:relative;height:178px}.smallContainer .cropper-overlay{width:100%;height:100%;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}.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:616px;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}.isDetailsSlider{width:100%!important;height:100%!important;overflow:hidden}.isDetailsSlider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important}.isDetailsSlider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;transition:width .2s ease-in-out,background-color .2s ease-in-out}.isDetailsSlider .sliders .slider-item.active{width:20px;background-color:#919191}.isDetailsSlider .drop-zone-container{display:none!important}.isDetailsSlider .docs{width:100%!important;height:100%!important;overflow:hidden!important;position:relative!important}.isDetailsSlider .doc-container{align-items:center!important;height:fit-content!important;margin-bottom:12px;flex-shrink:0!important;gap:0!important}.isDetailsSlider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;background-color:transparent!important}.isDetailsSlider .carousel-button{position:absolute!important;top:45%!important}\n"] }]
|
|
4986
|
+
], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = logoUrl !== \"\";\n@let smallSize = size() === \"480px\"; \n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n isDetailsSlider: isDetailsSlider(),\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 tagChanged: false,\n fileNameChanged: false,\n tags: [],\n }\"\n viewMode=\"small\"\n [coverMinimalMode]=\"true\"\n (onDelete)=\"handleDelete('cover.png')\"\n ></cai-document-preview>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\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 }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @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()\" [style.--carousel-index]=\"carouselIndex()\">\n @for (doc of docs(); track $index) {\n <cai-document-preview\n class=\"doc\"\n [class.doc-visible]=\"isDetailsSlider() && $index === carouselIndex()\"\n [class.doc-hidden]=\"isDetailsSlider() && $index !== carouselIndex()\"\n [file]=\"doc\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n [tags]=\"documentTags()\"\n viewMode=\"small\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n ></cai-document-preview>\n } \n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\" [style.opacity]=\"isDetailsSlider() && carouselIndex() === 0 ? '0' : '1'\">\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n (click)=\"carouselRight()\"\n [style.opacity]=\"isDetailsSlider() && carouselIndex() === docCount - 1 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n } \n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for(doc of docs(); track $index) {\n <div class=\"slider-item\" (click)=\"carouselIndex.set($index)\" [class.active]=\"$index === carouselIndex()\" ></div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Drop Zone -->\n <div\n class=\"drop-zone-container\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n countFiles === this.docs().length && documentVariant,\n 'max-reached-more-doc':\n countFiles === this.docs().length && documentVariant,\n 'size-large-drag': dragMode() && largeSize,\n 'size-small-drag': dragMode() && smallSize,\n unsupported: unsupported(),\n smallView: this.smallView(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n @if (onDragover()) {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus-drop\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DROP FILES HERE</p>\n </div>\n } @else {\n @switch (variant()) {\n @case (dropZoneVariant.DOCUMENT) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.VIDEO) {\n <svg-icon\n name=\"cai-drop-zone-video-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.PROFILE) {\n <svg-icon\n name=\"cai-drop-zone-profile-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n @case (dropZoneVariant.LOGO) {\n <svg-icon\n name=\"cai-drop-zone-logo-focus\"\n class=\"illustration\"\n ></svg-icon>\n }\n }\n <div class=\"drop-zone-focus-text\">\n <p class=\"heading\">DRAG FILES HERE</p>\n </div>\n }\n } @else {\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\">\n <img class=\"logo-image\" [src]=\"logoUrl\" />\n </div>\n }\n @if (coverVariant || logoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-cover\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (profileVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-profile\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (documentVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (videoVariant) {\n <svg-icon\n name=\"cai-illustration-drop-zone-video\"\n class=\"illustration\"\n ></svg-icon>\n }\n @if (\n countFiles === this.docs().length && documentVariant\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 } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n DRAG FILES\n @if (docCount < 1) {\n <span>HERE</span>\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\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;margin:0!important}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: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:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.container.dragMode{height:466px!important;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .size-large-drag{width:640px!important}.container.dragMode .size-small-drag{width:480px!important}.container.dragMode .drop-zone-container{position:relative;width:100%;height:466px;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.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{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.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,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.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;padding-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-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.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{height:178px!important;position:relative}.hasCropper{height:204px!important;position:relative}.smallContainer{position:relative;height:178px}.smallContainer .cropper-overlay{width:100%;height:100%;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}.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:616px;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}.isDetailsSlider{width:100%!important;height:100%!important;overflow:hidden}.isDetailsSlider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important}.isDetailsSlider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;transition:width .2s ease-in-out,background-color .2s ease-in-out}.isDetailsSlider .sliders .slider-item.active{width:20px;background-color:#919191}.isDetailsSlider .drop-zone-container{display:none!important}.isDetailsSlider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.isDetailsSlider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;margin-bottom:12px;flex-shrink:0!important;gap:0!important;position:relative!important}.isDetailsSlider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.isDetailsSlider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.isDetailsSlider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.isDetailsSlider .carousel-button{position:absolute!important;top:45%!important}\n"] }]
|
|
4987
4987
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { onDeletedFileIds: [{
|
|
4988
4988
|
type: Output
|
|
4989
4989
|
}], docsChange: [{
|