myrta-ui 17.0.84 → 17.0.86

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.
Files changed (11) hide show
  1. package/esm2022/lib/components/form/input-file/input-file.component.mjs +2 -2
  2. package/esm2022/lib/components/form/json-editor/json-editor.component.mjs +2 -2
  3. package/esm2022/lib/components/form/select/select.component.mjs +9 -13
  4. package/esm2022/lib/components/form/select/select.enum.mjs +2 -0
  5. package/esm2022/public-api.mjs +2 -1
  6. package/fesm2022/myrta-ui.mjs +12 -15
  7. package/fesm2022/myrta-ui.mjs.map +1 -1
  8. package/lib/components/form/select/select.component.d.ts +6 -6
  9. package/lib/components/form/select/select.enum.d.ts +5 -0
  10. package/package.json +1 -1
  11. package/public-api.d.ts +1 -0
package/esm2022/lib/components/form/input-file/input-file.component.mjs CHANGED
@@ -281,11 +281,11 @@ export class InputFileComponent {
281
281
  return true;
282
282
  }
283
283
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
284
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
284
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
285
285
  }
286
286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, decorators: [{
287
287
  type: Component,
288
- args: [{ selector: 'mrx-input-file', template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"] }]
288
+ args: [{ selector: 'mrx-input-file', template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"] }]
289
289
  }], ctorParameters: () => [{ type: i1.FileUploadService }], propDecorators: { autoUpload: [{
290
290
  type: Input
291
291
  }], required: [{