myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/form/input-file/input-file.component.ts

@@ -1,329 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { NgxFileDropEntry } from 'ngx-file-drop';
-import { HttpEvent, HttpEventType } from '@angular/common/http';
-import { catchError } from 'rxjs/operators';
-import { EMPTY } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
-import { InputFileModel, UploadedFileModel, UploadedResultModel } from '../../../models/input-file/input-file.model';
-import { formatBytes } from '../../../helpers/extension/input-file.extension';
-import { FileUploadService } from '../../../services/file-upload/file-upload.service';
-import { ErrorMessagesEnum } from './enums/error-messages.enum';
-import { InputFileTargetTypes, InputFileTargetTypesEnum } from './input-file.enum';
-
-@Component({
-  selector: 'mrx-input-file',
-  templateUrl: './input-file.component.html',
-  styleUrls: ['./input-file.component.less'],
-})
-export class InputFileComponent {
-  formatBytes = formatBytes;
-  extensions?: string;
-  allowedExtensions: string[] = [];
-  files: InputFileModel[] = [];
-
-  @Input() public autoUpload = true;
-  @Input() public required = false;
-  @Input() public disabled = false;
-  @Input() public viewOnly = false;
-  @Input() public lightDisabled = false;
-  @Input() public bottomFiles = false;
-  @Input() public maxSize = 31457280;
-  @Input() public maxFiles = 5;
-  @Input() public minFiles = 0;
-  @Input() public formData: any = {}; // Параметры, которые будут передаваться в форме
-  @Input() public uploadEndPoint!: string;
-  @Input() public deleteEndPoint?: string;
-  @Input() public downloadEndPoint?: string;
-  @Input() public fileNamePlaceholder?: string;
-  @Input() public showInputWithError = true;
-  @Input() public showDeleteButton = true;
-  @Input() public isTooltipValue = false;
-  @Input() public isDownloadingFile = true;
-  @Input() public isHideListFiles = false;
-  @Input() public target: InputFileTargetTypes = '_self';
-  @Input() public deleteConfirm?: (file: UploadedFileModel, result: (ok: boolean) => void) => void;
-
-  @Input() public innerTemplate!: TemplateRef<any>;
-
-  @Input() public uploadAdditionalData: any = {};
-
-  // ERROR
-  @Input() public invalid = false;
-  @Input() public invalidMessage: string | string[] = '';
-  @Input() public checkInvalid: true | false | null = null;
-
-  // ERROR MESSAGES
-  @Input() public messageTooManyFiles: string = ErrorMessagesEnum.TooManyFiles;
-  @Input() public messageFileTooBig: string = ErrorMessagesEnum.FileTooBig;
-  @Input() public messageEmptyFile: string = ErrorMessagesEnum.EmptyFile;
-  @Input() public messageInvalidFileFormat: string = ErrorMessagesEnum.InvalidFileFormat;
-
-  // PLACEHOLDERS
-  @Input() public placeholder = 'Перенесите файл с устройства или нажмите на данное поле для добавления файла';
-  @Input() public placeholderFileMaxSize = 'Размер файла: не больше';
-  @Input() public placeholderFileFormat = 'Формат файла:';
-
-  @Input('files')
-  set initFiles(data: UploadedFileModel[] | UploadedFileModel) {
-    if (data) {
-      if (Array.isArray(data)) {
-        this.files = data.map(s => ({ ...s }));
-      } else {
-        this.files = [{ ...data }];
-      }
-    } else {
-      this.files = [];
-    }
-  }
-
-  @Input('allowedExtensions')
-  public set initAllowedExtensions(val: string[]) {
-    if (val) {
-      this.allowedExtensions = val;
-      this.extensions = val.join(', ');
-    } else {
-      this.allowedExtensions = [];
-      this.extensions = undefined;
-    }
-  }
-
-  @Output() public filesChanged: EventEmitter<InputFileModel[]> = new EventEmitter();
-  @Output() public checkDroppedFile: EventEmitter<InputFileModel> = new EventEmitter();
-
-  constructor(private fileUploadService: FileUploadService) {
-  }
-
-  get canAdd() {
-    if (this.showInputWithError) {
-      return this.maxFiles > this.files.filter(s => !s.error).length;
-    } else {
-      return this.maxFiles > this.files.length;
-    }
-  }
-
-  public get getTarget(): string {
-    return InputFileTargetTypesEnum[this.target]
-  }
-
-  public get isInvalidMessage(): boolean {
-    return !!this.invalidMessage || !!this.invalidMessage?.length;
-  }
-
-  public get checkValidClasses(): string {
-    return this.checkInvalid === false ?
-      'mrx-input-checked-success' :
-      this.checkInvalid === true ? 'mrx-input-checked-error' : '';
-  }
-
-  public get getClasses(): string {
-    return `${this.checkValidClasses}`;
-  }
-
-  public get isValid(): boolean {
-    return this.baseValidate();
-  }
-
-  public getTooltipValue(value: string | undefined): string {
-    return this.isTooltipValue && value ? value : ''
-  }
-
-  protected baseValidate(): boolean {
-    return true;
-  }
-
-  trackByFn(index: number, item: InputFileModel) {
-    return Boolean(item.id) ? item.id : item.tempUuid;
-  }
-
-  public delete(event: any, file: InputFileModel): void {
-    event.stopPropagation();
-
-    if (this.deleteConfirm) {
-      this.deleteConfirm(file, (ok) => {
-        if (ok) {
-          this._deleteFile(file);
-        }
-      });
-    } else {
-      this._deleteFile(file);
-    }
-  }
-
-  canCancelUploading(file: InputFileModel): boolean {
-    return !!file.uploading && file.percentage ? file.percentage < 90 : false;
-  }
-
-  clear(file: InputFileModel): void {
-    if (file.uploading) {
-      if (file.execution) {
-        file.execution.unsubscribe();
-      }
-    }
-
-    const findFileIdx = this.files.indexOf(file);
-    if (findFileIdx >= 0) {
-      this.files.splice(findFileIdx, 1);
-    }
-  }
-
-  public downloadUrl(file: UploadedFileModel): string {
-    if (this.downloadEndPoint) {
-      return this._transformUrl(this.downloadEndPoint, file);
-    } else {
-      return '';
-    }
-  }
-
-  public dropped(files: NgxFileDropEntry[]) {
-    for (const droppedFile of files) {
-      if (droppedFile.fileEntry.isFile) {
-        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
-        fileEntry.file((file: File) => {
-          this._uploadFile(file);
-        });
-      }
-    }
-  }
-
-  private _transformUrl(url: string, file: UploadedFileModel): string {
-    return url.replace(/{id}/, file.id)
-  }
-
-  private _formDataKeys(): string[] {
-    return Object.keys(this.formData);
-  }
-
-  private _createFormData(): FormData {
-    const form = new FormData();
-    if (this.maxFiles) {
-      form.append('MaxFiles', this.maxFiles.toString(10));
-    }
-    const keys = this._formDataKeys();
-    keys.forEach(key => form.append(key, this.formData[key]));
-    return form;
-  }
-
-  private _deleteFile(file: InputFileModel) {
-    const findFile = this.files.find(s => s.id === file.id);
-
-    if (findFile) {
-      if (this.deleteEndPoint) {
-        findFile.deleting = true;
-
-        this.fileUploadService.delete(this._transformUrl(this.deleteEndPoint, findFile)).subscribe(result => {
-          this.files.splice(this.files.indexOf(findFile), 1);
-          this.filesChanged.emit(this.files);
-        });
-
-      } else {
-        this.files.splice(this.files.indexOf(findFile), 1);
-        this.filesChanged.emit(this.files);
-      }
-    }
-  }
-
-  private _uploadFile(file: File): void {
-    const data = {
-      id: '',
-      tempUuid: uuidv4(),
-      name: file.name,
-      length: file.size,
-      uploading: true,
-      percentage: 0,
-      file: file
-    } as InputFileModel;
-
-    if (!this.checkForUpload(data)) {
-      return;
-    }
-
-    const formData = this._createFormData();
-    formData.append('File', file);
-
-    if (this.uploadAdditionalData && Object.keys(this.uploadAdditionalData).length) {
-      Object.keys(this.uploadAdditionalData).forEach(key => {
-        formData.append(key, this.uploadAdditionalData[key]);
-      })
-    }
-
-    if (this.autoUpload) {
-      data.execution = this.fileUploadService.upload(this.uploadEndPoint, formData).pipe(
-        catchError((err) => {
-          data.uploading = false;
-          return EMPTY;
-        })
-      )
-        .subscribe((event: HttpEvent<UploadedResultModel>) => {
-          switch (event.type) {
-            case HttpEventType.Sent:
-              break;
-            case HttpEventType.ResponseHeader:
-              break;
-            case HttpEventType.UploadProgress:
-              if (event.total) {
-                data.percentage = Math.round(event.loaded / event.total * 100);
-              }
-              break;
-            case HttpEventType.Response:
-              if (event.body) {
-                data.uploading = false;
-                data.percentage = 0;
-                data.id = event.body.uuid;
-                data.file = undefined;
-                data.error = event.body.message;
-                if (data.execution) {
-                  data.execution.unsubscribe();
-                }
-
-                if (this.files.every(s => !s.uploading)) {
-                  const completedFiles = this.files.filter(s => !s.error);
-                  this.filesChanged.emit(completedFiles);
-                }
-              }
-          }
-        });
-    } else {
-      data.uploading = false;
-      data.id = data.tempUuid || '';
-
-      if (this.files.every(s => !s.uploading)) {
-        this.filesChanged.emit(this.files);
-      }
-    }
-  }
-
-  private checkForUpload(data: InputFileModel): boolean {
-    this.checkDroppedFile.emit(data)
-
-    if (!this.canAdd) {
-      data.error = this.messageTooManyFiles;
-      data.uploading = false;
-      this.files.push(data);
-      return false;
-    }
-
-    this.files.push(data);
-
-    if (data.file && data.file.size > this.maxSize) {
-      data.error = this.messageFileTooBig;
-      data.uploading = false;
-      return false;
-    }
-
-    if (data.file && data.file.size == 0) {
-      data.error = this.messageEmptyFile;
-      data.uploading = false;
-      return false;
-    }
-
-    if (this.allowedExtensions.length > 0 && !this.allowedExtensions.some(
-      s => data.file && data.file.name.toLowerCase().endsWith(s.toLowerCase()))) {
-
-      data.error = this.messageInvalidFileFormat;
-      data.uploading = false;
-      return false;
-    }
-
-    return true;
-  }
-}

package/src/lib/components/form/input-file/input-file.enum.ts

@@ -1,8 +0,0 @@
-export enum InputFileTargetTypesEnum {
-  '_self' = '_self',
-  '_blank' = '_blank',
-  '_parent' = '_parent',
-  '_top' = '_top',
-}
-
-export type InputFileTargetTypes = '_self' | '_blank' | '_parent' | '_top'

package/src/lib/components/form/input-file/input-file.module.ts

@@ -1,18 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NgxFileDropModule } from 'ngx-file-drop';
-import { InputFileComponent } from './input-file.component';
-import { HttpClientModule } from '@angular/common/http';
-import { FileUploadService } from '../../../services/file-upload/file-upload.service';
-import { ErrorMessageModule } from '../../error-message/error-message.module';
-import { CdkTooltipModule } from '../../cdk-tooltip/cdk-tooltip.module';
-
-@NgModule({
-  declarations: [InputFileComponent],
-  imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [InputFileComponent],
-  providers: [FileUploadService]
-})
-export class InputFileModule {}

package/src/lib/components/form/input-file-image/assets/input-file-image-avatar.less

@@ -1,93 +0,0 @@
-.mrx-input-file-image.mrx-input-file-image-type-avatar {
-  max-width: 154px;
-  min-width: 154px;
-  min-height: 154px;
-  max-height: 154px;
-  height: 154px;
-
-  .mrx-input-file-image-avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-
-    &-item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      word-break: break-word;
-
-      .icon-close {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        cursor: pointer;
-      }
-
-      img {
-        word-wrap: break-word;
-        object-fit: cover;
-      }
-
-      &:hover {
-        border-color: var(--Main2);
-      }
-
-      &-error {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        border: 1px solid var(--system-bg-controls-negative-default);
-        border-radius: var(--border-radius-1);
-        color: var(--system-text-negative);
-      }
-
-      &-uploading {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--spacing-3);
-        width: 100%;
-        height: 100%;
-        border: 1px solid var(--neutral-bg-stroke-default);
-        border-radius: 4px;
-
-        &-text {
-          font-size: var(--body-md-font-size);
-          font-family: var(--body-md-font-family);
-          font-weight: var(--body-md-font-weight);
-          line-height: var(--body-md-line-height);
-          text-align: center;
-          color: var(--neutral-text-primary);
-        }
-
-        &-progress {
-          width: 96px;
-          height: 4px;
-          border-radius: 2px;
-          background-color: var(--neutral-bg-island-default);
-          display: flex;
-          justify-content: flex-start;
-
-          span {
-            display: block;
-            height: 100%;
-            width: 0;
-            background-color: var(--brand-bg-primary-default);
-            border-radius: 2px;
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/form/input-file-image/assets/input-file-image-controls.less

@@ -1,35 +0,0 @@
-.mrx-input-file-image {
-  &-preview, &-avatar {
-    &-item {
-      &:hover {
-        .mrx-input-file-image-controls {
-          display: flex;
-        }
-      }
-    }
-  }
-
-  &-controls {
-    position: absolute;
-    top: -16px;
-    right: -16px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 4px rgba(58, 58, 58, 0.3);
-    border-radius: 5px;
-    padding: 5px;
-    display: none;
-
-    &-item {
-      min-width: 16px;
-      height: 16px;
-      cursor: pointer;
-
-      &:not(:last-child) {
-        position: relative;
-        padding-right: 8px;
-        border-right: 1px solid #BFC5CC;;
-        margin-right: 8px;
-      }
-    }
-  }
-}

package/src/lib/components/form/input-file-image/assets/input-file-image-drop.less

@@ -1,24 +0,0 @@
-.mrx-input-file-image {
-  .mrx-input-file-image-drop {
-    width: 100%;
-    height: 100%;
-
-    &-disabled {
-      .mrx-input-file-image-input {
-        border-color: var(--neutral-bg-stroke-default);
-        background-color: var(--neutral-bg-disabled);
-        cursor: default;
-      }
-    }
-
-    .ngx-file-drop__drop-zone {
-      height: 100%;
-      border: none;
-      border-radius: 0;
-
-      .ngx-file-drop__content {
-        height: 100%;
-      }
-    }
-  }
-}

package/src/lib/components/form/input-file-image/assets/input-file-image-input.less

@@ -1,45 +0,0 @@
-.mrx-input-file-image-input {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-4);
-    width: 100%;
-    height: 100%;
-    min-height: 100px;
-    gap: var(--spacing-2);
-    border-radius: var(--border-radius-1);
-    background-image:
-      repeating-linear-gradient(0deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
-      repeating-linear-gradient(90deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
-      repeating-linear-gradient(180deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
-      repeating-linear-gradient(270deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px);
-    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
-    background-position: 0 0, 0 0, 100% 0, 0 100%;
-    background-repeat: no-repeat;
-    cursor: pointer;
-
-    &-placeholder {
-        font-size: var(--body-md-font-size);
-        font-family: var(--body-md-font-family);
-        font-weight: var(--body-md-font-weight);
-        line-height: var(--body-md-line-height);
-        text-align: center;
-        color: var(--neutral-text-secondary);
-    }
-
-    &-info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        * {
-            font-size: var(--body-sm-font-size);
-            font-family: var(--body-sm-font-family);
-            font-weight: var(--body-sm-font-weight);
-            line-height: var(--body-sm-line-height);
-            text-align: center;
-            color: var(--neutral-text-secondary);
-        }
-    }
-}

package/src/lib/components/form/input-file-image/assets/input-file-image-preview.less

@@ -1,107 +0,0 @@
-.mrx-input-file-image {
-  &-preview {
-    width: 100%;
-
-    &-item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: var(--spacing-2);
-      border: 1px solid var(--neutral-bg-stroke-default);
-      border-radius: var(--border-radius-1);
-      transition: .2s;
-      word-break: break-word;
-      height: 100%;
-      min-height: 218px;
-      padding: var(--spacing-4);
-
-      .icon-close {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        cursor: pointer;
-      }
-
-      &.mrx-input-file-image-error {
-        border: 1px solid var(--system-bg-controls-negative-default);
-      }
-
-      &__image {
-        height: 128px;
-        position: relative;
-
-        img {
-          word-wrap: break-word;
-          height: 100%;
-          width: 100%;
-          object-fit: cover;
-        }
-      }
-
-      &:hover {
-        border-color: var(--neutral-bg-stroke-hover);
-      }
-
-      &-info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-2);
-      }
-
-      &-name {
-        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-primary);
-      }
-
-      &-description {
-        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);
-      }
-
-      &-error {
-        max-height: 236px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: var(--system-text-negative);
-      }
-
-      &-uploading {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        &-progress {
-          width: 96px;
-          height: 4px;
-          background-color: var(--neutral-bg-island-default);
-          display: flex;
-          justify-content: flex-start;
-
-          span {
-            display: block;
-            height: 100%;
-            width: 0;
-            background-color: var(--brand-bg-primary-default);
-            border-radius: 2px;
-          }
-        }
-      }
-    }
-
-    .row {
-      row-gap: var(--spacing-3);
-    }
-  }
-}

package/src/lib/components/form/input-file-image/assets/input-file-image.less

@@ -1,7 +0,0 @@
-.mrx-input-file-image {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--spacing-3);
-}

package/src/lib/components/form/input-file-image/components/file-image-edit-modal/assets/input-image-cropper.less

@@ -1,25 +0,0 @@
-:host::ng-deep {
-  .mrx-input-image-cropper {
-    &__wrapper {
-      position: relative;
-    }
-
-    &__controls {
-      padding: 8px;
-      background: rgba(31, 34, 38, 0.5);
-      border-radius: 4px;
-      position: absolute;
-      left: 50%;
-      bottom: 24px;
-      transform: translateX(-50%);
-
-      svg {
-        cursor: pointer;
-
-        &:not(:last-child) {
-          margin-right: 16px;
-        }
-      }
-    }
-  }
-}