carriera-intern-components 1.1.192 → 1.1.193

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

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

package/app/components/input/directives/password.directive.d.ts

@@ -20,6 +20,7 @@ export declare class PasswordDirective implements OnInit {
      */
     reveal: import("@angular/core").InputSignal<number>;
     appMask: import("@angular/core").InputSignal<string>;
+    max: import("@angular/core").InputSignal<number | undefined>;
     /**
      * Stores the actual, unmasked password value,
      * while the input element displays a masked version.
@@ -95,5 +96,5 @@ export declare class PasswordDirective implements OnInit {
      */
     setRealValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PasswordDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PasswordDirective, "[appPassword]", never, { "appPassword": { "alias": "appPassword"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "account": { "alias": "account"; "required": false; "isSignal": true; }; "reveal": { "alias": "reveal"; "required": false; "isSignal": true; }; "appMask": { "alias": "appMask"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PasswordDirective, "[appPassword]", never, { "appPassword": { "alias": "appPassword"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "account": { "alias": "account"; "required": false; "isSignal": true; }; "reveal": { "alias": "reveal"; "required": false; "isSignal": true; }; "appMask": { "alias": "appMask"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/app/utils/constants/input-character-sets.constants.d.ts

@@ -3,15 +3,15 @@ export declare const INPUT_CHARACTER_SETS: {
     readonly FRENCH_LETTERS: readonly ["ç", "é", "â", "ê", "î", "ô", "û", "à", "è", "ì", "ò", "ù", "ë", "ï", "ü"];
     readonly LETTERS: readonly ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
     readonly BASIC_PUNCTUATION: readonly [".", ",", "!", "?", ";", ":"];
-    readonly COMMON_SYMBOLS: readonly ["@", "#", "$", "%", "&", "*", "+", "-", "=", "_"];
+    readonly COMMON_SYMBOLS: readonly ["@", "#", "$", "%", "&", "*", "+", "-", "=", "_", "|", "~", "`", "^", "<", ">", "/", "|", "~", "`", "^", "<", ">", "\\"];
     readonly BRACKETS: readonly ["(", ")", "[", "]", "{", "}"];
     readonly QUOTES: readonly ["\"", "'", "`"];
     readonly WHITESPACE: readonly [" ", "\t"];
-    readonly ALPHANUMERIC: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "a" | "b" | "i" | "p" | "q" | "s" | "u" | "8" | "9" | "c" | "d" | "e" | "f" | "g" | "h" | "j" | "k" | "l" | "m" | "n" | "o" | "r" | "t" | "v" | "w" | "x" | "y" | "z")[];
+    readonly ALPHANUMERIC: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z")[];
     readonly ALPHANUMERIC_WITH_SPACES: string[];
     readonly EMAIL_SPECIAL: readonly ["@", ".", "-", "_", "+"];
-    readonly EMAIL_CHARACTERS: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "." | "a" | "b" | "i" | "p" | "q" | "s" | "u" | "8" | "9" | "c" | "d" | "e" | "f" | "g" | "h" | "j" | "k" | "l" | "m" | "n" | "o" | "r" | "t" | "v" | "w" | "x" | "y" | "z" | "@" | "+" | "-" | "_")[];
-    readonly SPECIAL_EXCEPT_NAME_FRIENDLY: ("*" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'" | "`")[];
-    readonly NAME_CHARACTER_EXCLUSIONS: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "*" | "." | "8" | "9" | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'" | "`")[];
-    readonly SPECIAL: ("*" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'" | "`")[];
+    readonly EMAIL_CHARACTERS: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | "." | "@" | "+" | "-" | "_")[];
+    readonly SPECIAL_EXCEPT_NAME_FRIENDLY: ("." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "*" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
+    readonly NAME_CHARACTER_EXCLUSIONS: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "*" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
+    readonly SPECIAL: ("." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "*" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
 };

package/fesm2022/carriera-intern-components.mjs

@@ -82,7 +82,32 @@ const INPUT_CHARACTER_SETS = {
     ],
     // Special characters
     BASIC_PUNCTUATION: ['.', ',', '!', '?', ';', ':'],
-    COMMON_SYMBOLS: ['@', '#', '$', '%', '&', '*', '+', '-', '=', '_'],
+    COMMON_SYMBOLS: [
+        '@',
+        '#',
+        '$',
+        '%',
+        '&',
+        '*',
+        '+',
+        '-',
+        '=',
+        '_',
+        '|',
+        '~',
+        '`',
+        '^',
+        '<',
+        '>',
+        '/',
+        '|',
+        '~',
+        '`',
+        '^',
+        '<',
+        '>',
+        '\\',
+    ],
     BRACKETS: ['(', ')', '[', ']', '{', '}'],
     QUOTES: ['"', "'", '`'],
     WHITESPACE: [' ', '\t'],
@@ -818,6 +843,7 @@ class PasswordDirective {
      */
     reveal = input(0);
     appMask = input('');
+    max = input(0);
     /**
      * Stores the actual, unmasked password value,
      * while the input element displays a masked version.
@@ -891,6 +917,13 @@ class PasswordDirective {
             this.setCursorPosition(cursorPosition - 1); // Move cursor back
             return;
         }
+        if (this.max()) {
+            if (newRealValue.length > this.max()) {
+                this.updateDisplayValue();
+                this.setCursorPosition(cursorPosition - 1); // Move cursor back
+                return;
+            }
+        }
         if (this.appMask() && this.appMask() !== '') {
             const { formattedValue } = MaskHelper.applyMask(MaskHelper.extractUserInput(newRealValue), this.appMask());
             cursorPosition =
@@ -1030,7 +1063,7 @@ class PasswordDirective {
         this.updateDisplayValue();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: PasswordDirective, isStandalone: true, selector: "[appPassword]", inputs: { appPassword: { classPropertyName: "appPassword", publicName: "appPassword", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null }, appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: PasswordDirective, isStandalone: true, selector: "[appPassword]", inputs: { appPassword: { classPropertyName: "appPassword", publicName: "appPassword", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null }, appMask: { classPropertyName: "appMask", publicName: "appMask", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, decorators: [{
             type: Directive,
@@ -2056,7 +2089,6 @@ class InputComponent {
         }
         if (max && inputElement.value.length > max) {
             inputElement.value = inputElement.value.slice(0, max);
-            return;
         }
         if (this.config().textTransform) {
             switch (this.config().textTransform) {
@@ -3115,7 +3147,7 @@ class InputComponent {
                 // Pipes
                 ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: HighlightSearchPipe, name: "highlightSearch" }, { kind: "pipe", type: FilterBySearchPipe, name: "filterBySearch" }, { kind: "pipe", type: RemapPmIconsPipe, name: "remapPmIcons" }, { kind: "directive", type: 
                 // Directives
-                PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "ngmodule", type: 
+                PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "ngmodule", type: 
                 // Bootstrap
                 NgbDropdownModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownAnchor, selector: "[ngbDropdownAnchor]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // Components
@@ -4114,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  }\"\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: [".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: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:#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}.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-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}.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 .cropper-overlay{width:468px!important;padding:4px 6px}.largeContainer .cropper-overlay{width:628px!important;padding:4px 6px!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}.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}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
@@ -4123,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  }\"\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: [".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: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:#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}.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-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}.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 .cropper-overlay{width:468px!important;padding:4px 6px}.largeContainer .cropper-overlay{width:628px!important;padding:4px 6px!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}.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}.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"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { onDeletedFileIds: [{
                 type: Output
             }], docsChange: [{