myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.html

@@ -1,68 +0,0 @@
-<mrx-modal
-  [title]="title"
-  [size]="'medium'"
-  (close)="close()"
->
-  <div class="row">
-    <div class="col col-12">
-      <p>Выбранная область будет показываться на обложке страницы</p>
-    </div>
-
-    <div class="col col-12">
-      <div class="mrx-input-image-cropper__wrapper">
-        <image-cropper
-          [imageFile]="fileImage"
-          [maintainAspectRatio]="maintainAspectRatio"
-          [aspectRatio]="aspectRatio"
-          format="png"
-          output="base64"
-          (imageCropped)="imageCropped($event)"
-          (imageLoaded)="imageLoaded($event)"
-          (cropperReady)="cropperReady()"
-          (loadImageFailed)="loadImageFailed()"
-          [backgroundColor]="'#000000'"
-          [canvasRotation]="canvasRotation"
-          [transform]="transform"
-          [cropperMaxWidth]="cropperMaxWidth"
-          [cropperMaxHeight]="cropperMaxHeight"
-        ></image-cropper>
-
-        <div class="mrx-input-image-cropper__controls">
-          <svg (click)="rotateLeft()" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="2" y="15" width="8" height="8" rx="0.888889" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M9.99978 20.3333L7.77756 18.1111L2.88867 23" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-            <path d="M1.00026 10.1052L3.31605 12.421L5.63184 10.1052" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-
-          <svg (click)="rotateRight()" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="14" y="15" width="8" height="8" rx="0.888889" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M21.9998 20.3333L19.7776 18.1111L14.8887 23" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-            <path d="M22.9997 10.1052L20.684 12.421L18.3682 10.1052" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <ng-template #footerContent>
-    <mrx-button
-      [customClasses]="'mr-3'"
-      [type]="'secondary'"
-      [size]="'medium'"
-      (click)="close()"
-    >Отменить
-    </mrx-button>
-    <mrx-button
-      [type]="'primary'"
-      [size]="'medium'"
-      (click)="ok()"
-    >Подтвердить
-    </mrx-button>
-  </ng-template>
-</mrx-modal>
-
-

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

@@ -1 +0,0 @@
-@import "assets/input-image-cropper";

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

@@ -1,114 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { ImageCroppedEvent, ImageTransform, LoadedImage } from 'ngx-image-cropper';
-import { ModalServiceComponent } from '../../../../../services/modal-service/helpers/modal.component';
-import { ModalRef } from '../../../../../services/modal-service/helpers/modal-ref';
-import { MODAL_DATA } from '../../../../../services/modal-service/helpers/modal-tokens';
-import { convertBase64ToFile } from '../../../../../helpers';
-
-export interface ImageEditSelect {
-  title: string;
-  fileImage?: any;
-  cropperMaxWidth: number;
-  cropperMaxHeight: number;
-  aspectRatio: number;
-  maintainAspectRatio: boolean;
-}
-
-export interface ImageEditResult {
-  result: boolean,
-  fileImage?: File,
-  fileUrl?: string
-}
-
-@Component({
-  selector: 'mrx-file-image-edit-modal',
-  templateUrl: './file-image-edit-modal.component.html',
-  styleUrls: ['./file-image-edit-modal.component.less']
-})
-export class FileImageEditModalComponent extends ModalServiceComponent<ImageEditSelect, ImageEditResult> {
-
-  title!: string;
-  fileImage?: any;
-  cropperMaxWidth!: number;
-  cropperMaxHeight!: number;
-  aspectRatio!: number;
-  maintainAspectRatio!: boolean;
-  imageChangedEvent: any = '';
-  croppedImage = '';
-  canvasRotation = 0;
-  transform: ImageTransform = {};
-
-  constructor(
-    private dialogRef: ModalRef<ImageEditResult>,
-    @Inject(MODAL_DATA) data: ImageEditSelect,
-  ) {
-    super();
-    this.result = {result: false};
-
-    this.title = data.title
-    this.fileImage = data.fileImage
-    this.cropperMaxWidth = data.cropperMaxWidth
-    this.cropperMaxHeight = data.cropperMaxHeight
-    this.aspectRatio = data.aspectRatio
-    this.maintainAspectRatio = data.maintainAspectRatio
-  }
-
-  public async ok() {
-    this.result = {
-      result: true,
-      fileImage: convertBase64ToFile(
-        this.croppedImage,
-        this.fileImage.name,
-        this.fileImage.type
-      ),
-      fileUrl: this.croppedImage
-    };
-    this.close();
-  }
-
-  rotateLeft() {
-    this.canvasRotation--;
-    this.flipAfterRotate();
-  }
-
-  rotateRight() {
-    this.canvasRotation++;
-    this.flipAfterRotate();
-  }
-
-  private flipAfterRotate() {
-    const flippedH = this.transform.flipH;
-    const flippedV = this.transform.flipV;
-    this.transform = {
-      ...this.transform,
-      flipH: flippedV,
-      flipV: flippedH
-    };
-  }
-
-  fileChangeEvent(event: any): void {
-    this.imageChangedEvent = event;
-  }
-
-  imageCropped(event: ImageCroppedEvent): void {
-    if (event.base64) {
-      this.croppedImage = event.base64;
-    }
-  }
-
-  imageLoaded(image: LoadedImage) {
-    // console.log(image)
-  }
-
-  cropperReady() {
-    // cropper ready
-  }
-
-  loadImageFailed() {
-    // show message
-  }
-
-  close() {
-    this.dialogRef.close(this.result);
-  }
-}

package/src/lib/components/form/input-file-image/input-file-image.component.html

@@ -1,151 +0,0 @@
-<div class="mrx-input-file-image" [class]="getClasses">
-  @switch (type) {
-    @case ('avatar') {
-      <ngx-file-drop
-        [className]="getDropZoneClasses"
-        [accept]="extensions || ''"
-        [disabled]="disabled"
-        (onFileDrop)="dropped($event)"
-        (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"
-      >
-        <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-          @if (files.length) {
-            <div class="mrx-input-file-image-avatar">
-
-              @for (file of files; track file.id) {
-                <div class="w-100 h-100">
-                  <div class="mrx-input-file-image-avatar-item" [class.mrx-input-file-image-error]="file.error">
-
-                    @if (file.error) {
-
-                      <span class="mrx-icon icon-close icon-font-24" (click)="clear(file)"></span>
-                      <div class="mrx-input-file-image-avatar-item-error">
-                        <span class="mrx-icon icon-image icon-font-24 icon-filled-color-negative"></span>
-                        {{ file.error }}
-                      </div>
-
-                    } @else if (file.uploading && !file.error) {
-
-                      <span class="mrx-icon icon-close icon-font-24" (click)="delete($event, file)"></span>
-                      <div class="mrx-input-file-image-avatar-item-uploading">
-                        <span class="mrx-input-file-image-avatar-item-uploading-text">Загрузка...</span>
-                        <div class="mrx-input-file-image-avatar-item-uploading-progress">
-                          <span [ngStyle]="{width: file.percentage + '%'}"></span>
-                        </div>
-                      </div>
-
-                    } @else if (!file.uploading && !file.error) {
-
-                      <img [src]="downloadUrl(file)" [alt]="file.name" height="154" width="154">
-
-                      <div class="mrx-input-file-image-controls">
-                        <div class="mrx-input-file-image-controls-item" (click)="changePreview($event, file)">
-                          <span class="mrx-icon icon-pen icon-font-16"></span>
-                        </div>
-                        <div class="mrx-input-file-image-controls-item" (click)="delete($event, file)">
-                          <span class="mrx-icon icon-delete icon-font-16"></span>
-                        </div>
-                      </div>
-
-                    }
-                  </div>
-                </div>
-              }
-            </div>
-          } @else {
-            <div
-              class="mrx-input-file-image-input"
-              [class.mrx-input-file-image__disabled]="disabled"
-              (click)="!disabled ? openFileSelector() : undefined"
-            >
-              <span class="mrx-input-file-image-input-placeholder">{{ placeholder || getDefaultPlaceholder }}</span>
-              <div class="mrx-input-file-image-input-info">
-                <span>Размер: до {{ formatBytes(maxSize) }}</span>
-                <span *ngIf="extensions">Формат: {{ extensions }}</span>
-              </div>
-            </div>
-          }
-        </ng-template>
-      </ngx-file-drop>
-    }
-    @default {
-      @if (canAdd) {
-        <ngx-file-drop
-          [className]="getDropZoneClasses"
-          [accept]="extensions || ''"
-          [disabled]="disabled"
-          (onFileDrop)="dropped($event)"
-          (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"
-        >
-          <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-            <div
-              class="mrx-input-file-image-input"
-              (click)="!disabled ? openFileSelector() : undefined"
-            >
-              <span class="mrx-input-file-image-input-placeholder">
-                {{ placeholder || getDefaultPlaceholder }}
-              </span>
-              <div class="mrx-input-file-image-input-info">
-                <span>Размер: до {{ formatBytes(maxSize) }}</span>
-                <span *ngIf="extensions">Формат: {{ extensions }}</span>
-              </div>
-            </div>
-          </ng-template>
-        </ngx-file-drop>
-      }
-
-      <div class="mrx-input-file-image-preview">
-        <div class="row">
-          @for (file of files; track file.id) {
-
-            <div class="col col-12 col-sm-6 col-md-4 col-lg-3">
-              <div class="mrx-input-file-image-preview-item" [class.mrx-input-file-image-error]="file.error">
-                @if (file.error) {
-
-                  <span class="mrx-icon icon-close icon-font-24" (click)="delete($event, file)"></span>
-
-                  <div class="mrx-input-file-image-preview-item-error">
-                    <span class="mrx-icon icon-image icon-font-24 icon-filled-color-negative"></span>
-                    {{ file.error }}
-                  </div>
-                  <div class="mrx-input-file-image-preview-item-name">{{ file.name }}</div>
-                  <div class="mrx-input-file-image-preview-item-description">{{ formatBytes(file.length) }}</div>
-
-                } @else if (file.uploading && !file.error) {
-
-                  <div class="mrx-input-file-image-preview-item-uploading">
-                    <span class="mrx-input-file-image-preview-item-uploading-text">Загрузка...</span>
-                    <div class="mrx-input-file-image-preview-item-uploading-progress">
-                      <span [ngStyle]="{width: file.percentage + '%'}"></span>
-                    </div>
-                  </div>
-
-                } @else if (!file.uploading && !file.error) {
-
-                  <div class="mrx-input-file-image-preview-item__image">
-                    <img [src]="downloadUrl(file)" [alt]="file.name">
-                  </div>
-
-                  <div class="mrx-input-file-image-preview-item-info">
-                    <div class="mrx-input-file-image-preview-item-name">{{ file.name }}</div>
-                    <div class="mrx-input-file-image-preview-item-description">{{ formatBytes(file.length) }}</div>
-                  </div>
-
-                  <div class="mrx-input-file-image-controls">
-                    <div class="mrx-input-file-image-controls-item" (click)="changePreview($event, file)">
-                      <span class="mrx-icon icon-pen icon-font-16"></span>
-                    </div>
-                    <div class="mrx-input-file-image-controls-item" (click)="delete($event, file)">
-                      <span class="mrx-icon icon-delete icon-font-16"></span>
-                    </div>
-                  </div>
-
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    }
-  }
-</div>

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

@@ -1,7 +0,0 @@
-@import "assets/input-file-image";
-@import "assets/input-file-image-preview";
-@import "assets/input-file-image-avatar";
-@import "assets/input-file-image-drop";
-@import "assets/input-file-image-controls";
-
-@import "assets/input-file-image-input.less";