myrta-ui 17.0.18 → 17.0.20

package/src/lib/components/form/input-editor/services/editor.service.ts

@@ -0,0 +1,307 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient, HttpEvent } from '@angular/common/http';
+import { DOCUMENT } from '@angular/common';
+import { Observable } from 'rxjs';
+import { CustomClass } from '../config';
+
+export interface UploadResponse {
+  imageUrl: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorService {
+
+  savedSelection!: Range | null;
+  selectedText!: string;
+  uploadUrl!: string;
+  uploadWithCredentials!: boolean;
+
+  constructor(
+    private http: HttpClient,
+    @Inject(DOCUMENT) private doc: any
+  ) { }
+
+  /**
+   * Executed command from editor header buttons exclude toggleEditorMode
+   * @param command string from triggerCommand
+   * @param value
+   */
+  executeCommand(command: string, value?: string) {
+    const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
+    if (commands.includes(command)) {
+      this.doc.execCommand('formatBlock', false, command);
+      return;
+    }
+    this.doc.execCommand(command, false, value);
+  }
+
+  /**
+   * Create URL link
+   * @param url string from UI prompt
+   */
+  createLink(url: string) {
+    if (!url.includes('http')) {
+      this.doc.execCommand('createlink', false, url);
+    } else {
+      const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
+      this.insertHtml(newUrl);
+    }
+  }
+
+  /**
+   * insert color either font or background
+   *
+   * @param color color to be inserted
+   * @param where where the color has to be inserted either text/background
+   */
+  insertColor(color: string, where: string): void {
+    const restored = this.restoreSelection();
+    if (restored) {
+      if (where === 'textColor') {
+        this.doc.execCommand('foreColor', false, color);
+      } else {
+        this.doc.execCommand('hiliteColor', false, color);
+      }
+    }
+  }
+
+  /**
+   * Set font name
+   * @param fontName string
+   */
+  setFontName(fontName: string) {
+    this.doc.execCommand('fontName', false, fontName);
+  }
+
+  /**
+   * Set font size
+   * @param fontSize string
+   */
+  setFontSize(fontSize: string) {
+    this.doc.execCommand('fontSize', false, fontSize);
+  }
+
+  /**
+   * Create raw HTML
+   * @param html HTML string
+   */
+  insertHtml(html: string): void {
+
+    const isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
+
+    if (!isHTMLInserted) {
+      throw new Error('Unable to perform the operation');
+    }
+  }
+
+  /**
+   * save selection when the editor is focussed out
+   */
+  public saveSelection = (): void => {
+    if (this.doc.getSelection) {
+      const sel = this.doc.getSelection();
+      if (sel.getRangeAt && sel.rangeCount) {
+        this.savedSelection = sel.getRangeAt(0);
+        this.selectedText = sel.toString();
+      }
+    } else if (this.doc.getSelection && this.doc.createRange) {
+      this.savedSelection = document.createRange();
+    } else {
+      this.savedSelection = null;
+    }
+  }
+
+  /**
+   * restore selection when the editor is focused in
+   *
+   * saved selection when the editor is focused out
+   */
+  // @ts-ignore
+  restoreSelection(): boolean {
+    if (this.savedSelection) {
+      if (this.doc.getSelection) {
+        const sel = this.doc.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(this.savedSelection);
+        return true;
+      } else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
+        // this.savedSelection.select();
+        return true;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * setTimeout used for execute 'saveSelection' method in next event loop iteration
+   */
+  public executeInNextQueueIteration(callbackFn: (...args: any[]) => any, timeout = 1e2): void {
+    setTimeout(callbackFn, timeout);
+  }
+
+  /** check any selection is made or not */
+  private checkSelection(): any {
+    // @ts-ignore
+    const selectedText = this.savedSelection.toString();
+
+    if (selectedText.length === 0) {
+      throw new Error('No Selection Made');
+    }
+    return true;
+  }
+
+  /**
+   * Upload file to uploadUrl
+   * @param file The file
+   */
+  uploadImage(file: File): Observable<HttpEvent<UploadResponse>> {
+
+    const uploadData: FormData = new FormData();
+
+    uploadData.append('file', file, file.name);
+
+    return this.http.post<UploadResponse>(this.uploadUrl, uploadData, {
+      reportProgress: true,
+      observe: 'events',
+      withCredentials: this.uploadWithCredentials,
+    });
+  }
+
+  /**
+   * Insert image with Url
+   * @param imageUrl The imageUrl.
+   */
+  insertImage(imageUrl: string) {
+    this.doc.execCommand('insertImage', false, imageUrl);
+  }
+
+  setDefaultParagraphSeparator(separator: string) {
+    this.doc.execCommand('defaultParagraphSeparator', false, separator);
+  }
+
+  createCustomClass(customClass: CustomClass) {
+    let newTag = this.selectedText;
+    if (customClass) {
+      const tagName = customClass.tag ? customClass.tag : 'span';
+      newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
+    }
+    this.insertHtml(newTag);
+  }
+
+  insertVideo(videoUrl: string) {
+    if (videoUrl.match('www.youtube.com')) {
+      this.insertYouTubeVideoTag(videoUrl);
+    }
+    if (videoUrl.match('vimeo.com')) {
+      this.insertVimeoVideoTag(videoUrl);
+    }
+  }
+
+  private insertYouTubeVideoTag(videoUrl: string): void {
+    const id = videoUrl.split('v=')[1];
+    const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
+    const thumbnail = `
+      <div style='position: relative'>
+        <a href='${videoUrl}' target='_blank'>
+          <img src="${imageUrl}" alt="click to watch"/>
+          <img style='position: absolute; left:200px; top:140px'
+          src="https://img.icons8.com/color/96/000000/youtube-play.png"/>
+        </a>
+      </div>`;
+    this.insertHtml(thumbnail);
+  }
+
+  private insertVimeoVideoTag(videoUrl: string): void {
+    const sub = this.http.get<any>(`https://vimeo.com/api/oembed.json?url=${videoUrl}`).subscribe(data => {
+      const imageUrl = data.thumbnail_url_with_play_button;
+      const thumbnail = `<div>
+        <a href='${videoUrl}' target='_blank'>
+          <img src="${imageUrl}" alt="${data.title}"/>
+        </a>
+      </div>`;
+      this.insertHtml(thumbnail);
+      sub.unsubscribe();
+    });
+  }
+
+  nextNode(node: any) {
+    if (node.hasChildNodes()) {
+      return node.firstChild;
+    } else {
+      while (node && !node.nextSibling) {
+        node = node.parentNode;
+      }
+      if (!node) {
+        return null;
+      }
+      return node.nextSibling;
+    }
+  }
+
+  getRangeSelectedNodes(range: any, includePartiallySelectedContainers: any) {
+    let node = range.startContainer;
+    const endNode = range.endContainer;
+    let rangeNodes = [];
+
+    // Special case for a range that is contained within a single node
+    if (node === endNode) {
+      rangeNodes = [node];
+    } else {
+      // Iterate nodes until we hit the end container
+      while (node && node !== endNode) {
+        rangeNodes.push( node = this.nextNode(node) );
+      }
+
+      // Add partially selected nodes at the start of the range
+      node = range.startContainer;
+      while (node && node !== range.commonAncestorContainer) {
+        rangeNodes.unshift(node);
+        node = node.parentNode;
+      }
+    }
+
+    // Add ancestors of the range container, if required
+    if (includePartiallySelectedContainers) {
+      node = range.commonAncestorContainer;
+      while (node) {
+        rangeNodes.push(node);
+        node = node.parentNode;
+      }
+    }
+
+    return rangeNodes;
+  }
+
+  getSelectedNodes() {
+    const nodes: any[] = [];
+    if (this.doc.getSelection) {
+      const sel = this.doc.getSelection();
+      for (let i = 0, len = sel.rangeCount; i < len; ++i) {
+        nodes.push.apply(nodes, this.getRangeSelectedNodes(sel.getRangeAt(i), true));
+      }
+    }
+    return nodes;
+  }
+
+  replaceWithOwnChildren(el: any) {
+    const parent = el.parentNode;
+    while (el.hasChildNodes()) {
+      parent.insertBefore(el.firstChild, el);
+    }
+    parent.removeChild(el);
+  }
+
+  removeSelectedElements(tagNames: any) {
+    const tagNamesArray = tagNames.toLowerCase().split(',');
+    this.getSelectedNodes().forEach((node) => {
+      if (node.nodeType === 1 &&
+        tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
+        // Remove the node and replace it with its children
+        this.replaceWithOwnChildren(node);
+      }
+    });
+  }
+}

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

@@ -0,0 +1,8 @@
+.new-custom-file-input {
+  .qq-file-info {
+    .info {
+      position: relative;
+      z-index: 2;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+.ng-custom-file-input-content {
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-4);
+  color: var(--neutral-text-secondary, #636363);
+  cursor: pointer;
+
+  &--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);
+  }
+  &--size {
+    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);
+  }
+  &--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);
+  }
+}
+
+

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

@@ -0,0 +1,35 @@
+: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: none;  
+        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;
+
+        &:hover, &:focus{   
+          background-image: repeating-linear-gradient(0deg, var(--neutral-bg-stroke-hover, #BCB5AC), var(--neutral-bg-stroke-hover, #BCB5AC) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-hover, #BCB5AC) 10px), 
+                            repeating-linear-gradient(90deg, var(--neutral-bg-stroke-hover, #BCB5AC), var(--neutral-bg-stroke-hover, #BCB5AC) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-hover, #BCB5AC) 10px), 
+                            repeating-linear-gradient(180deg, var(--neutral-bg-stroke-hover, #BCB5AC), var(--neutral-bg-stroke-hover, #BCB5AC) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-hover, #BCB5AC) 10px), 
+                            repeating-linear-gradient(270deg, var(--neutral-bg-stroke-hover, #BCB5AC), var(--neutral-bg-stroke-hover, #BCB5AC) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-hover, #BCB5AC) 10px);
+        }
+      }   
+
+      &.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{
+        background-color: var(--neutral-bg-disabled, #F4F4F4);
+
+        .ng-custom-file-input-content {
+          cursor: default;
+        }
+      }
+    }
+  }   
+}
+
+

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

@@ -0,0 +1,50 @@
+::ng-deep {
+  .new-custom-file-input__item {
+    &.file-error {
+      border-color: var(--system-bg-controls-negative-default, #B83B15);
+    }
+  }
+  .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-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;
+
+
+      }
+    }
+
+    &.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;
+      }
+    }
+
+    &.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;
+
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+.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;
+
+  &:hover {
+    .qq-upload-file-selector {
+      color: var(--brand-text-nav-link) !important;
+    }
+  }
+
+  .qq-download-link {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--border-radius-1);
+  }
+
+  .qq-file-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .info {
+      display: flex;
+      align-items: center;
+    }
+
+    .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;
+    }
+    .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);
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+.new-custom-file-input {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

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

@@ -0,0 +1,20 @@
+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;
+
+    .color-tertiary,
+    .color-tertiary * {
+      color: var(--neutral-text-tertiary, #71767E);
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+export enum ErrorMessagesEnum {
+  TooManyFiles = 'Слишком много файлов',
+  FileTooBig = 'Слишком большой файл',
+  EmptyFile = 'Пустой файл',
+  InvalidFileFormat = 'Неверный формат файла'
+}

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

@@ -0,0 +1,135 @@
+<div
+  class="ng-form-file-input"
+  [class]="getClasses"
+  [class.mrx-input-error]="invalid">
+  <div class="form-row" *ngIf="disabled; else notDisabled">
+    <div *ngIf="!files || files.length == 0"
+         class="col-sm-12 col-md-6"
+    >
+      <div class="d-flex align-items-center color-tertiary">
+        <div class="mrx-icon icon-file icon-font-24 mr-2"></div>
+        <span>Документов нет</span>
+      </div>
+    </div>
+
+    <div class="col-12">
+      <ul class="new-custom-file-input" *ngIf="files.length">
+        <li
+          class="new-custom-file-input__item"
+          *ngFor="let file of files; trackBy: trackByFn"
+        >
+          <div class="qq-file-info">
+            <div class="d-flex align-items-center">
+              <span class="mrx-icon icon-file icon-font-24 mr-2"></span>
+              <a
+                class="qq-upload-file-selector qq-upload-file"
+                [target]="getTarget"
+                [href]="downloadUrl(file)"
+                [title]="fileNamePlaceholder ? fileNamePlaceholder : file.name"
+              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>
+            </div>
+            <div class="info">
+              <span class="qq-upload-size-selector qq-upload-size" *ngIf="!file.error">{{formatBytes(file.length)}}</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <ng-container *ngTemplateOutlet="innerTemplate; context:{}"></ng-container>
+  </div>
+
+  <ng-template #notDisabled>
+    <ng-container *ngIf="!bottomFiles && !isHideListFiles">
+      <ng-container *ngTemplateOutlet="fileListTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="innerTemplate; context:{}"></ng-container>
+    </ng-container>
+
+    <ngx-file-drop
+      *ngIf="canAdd"
+      [className]="'ng-custom-file-input'"
+      [accept]="extensions || ''"
+      [disabled]="lightDisabled"
+      [ngClass]="{'ng-custom-file-input--disabled': lightDisabled}"
+      (onFileDrop)="dropped($event)"
+    >
+      <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+        <div
+          class="ng-custom-file-input-content"
+          (click)="!lightDisabled ? openFileSelector() : undefined"
+        >
+          <div class="text-center">
+            <div class="ng-custom-file-input-content--placeholder mb-2">
+              {{placeholder}}
+            </div>
+            <div class="ng-custom-file-input-content--size">
+              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}
+            </div>
+            <div class="ng-custom-file-input-content--extensions" *ngIf="extensions">
+              {{placeholderFileFormat}} {{extensions}}
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </ngx-file-drop>
+
+    <ng-container *ngIf="bottomFiles && !isHideListFiles">
+      <ng-container *ngTemplateOutlet="fileListTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="innerTemplate; context:{}"></ng-container>
+    </ng-container>
+  </ng-template>
+</div>
+
+<mrx-error-message
+  *ngIf="(!isValid || invalid) && isInvalidMessage"
+  [invalidMessage]="invalidMessage"
+></mrx-error-message>
+
+<ng-template #fileListTemplate>
+  <ul class="new-custom-file-input" *ngIf="files.length">
+    <li
+      class="new-custom-file-input__item"
+      *ngFor="let file of files; trackBy: trackByFn"
+      [ngClass]="{'file-error': file.error}"
+      [mrxCdkTooltip]="getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')"
+      [tooltipPosition]="'top-start'"
+    >
+      <a class="qq-download-link" [target]="getTarget" [href]="downloadUrl(file)" *ngIf="file.id && isDownloadingFile"></a>
+
+      <div class="qq-file-info">
+        <div class="d-flex align-items-center">
+          <span class="mrx-icon icon-file icon-font-24 mr-2"></span>
+          <span
+            class="qq-upload-file-selector qq-upload-file"
+            [title]="fileNamePlaceholder ? fileNamePlaceholder : file.name"
+          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>
+        </div>
+        <div class="info">
+          <div class="ng-custom-file-input_progress" *ngIf="file.uploading">
+            <span [ngStyle]="{width: file.percentage + '%'}"></span>
+          </div>
+
+          <span class="qq-upload-size-selector qq-upload-size" *ngIf="!file.error">
+            {{formatBytes(file.length)}}
+          </span>
+          <span
+            *ngIf="!disabled && showDeleteButton && !viewOnly && !file.error"
+            (click)="delete($event, file)"
+            class="mrx-icon icon-delete icon-font-24 cursor-pointer"
+            aria-label="Удалить"
+          ></span>
+
+          <div class="ng-custom-file-input-error" *ngIf="file.error">
+            <span class="mrx-icon icon-attention icon-color-red icon-font-16 mr-1"></span>
+            <span class="color-negative">{{file.error}}</span>
+          </div>
+
+          <div
+            class="mrx-icon icon-close icon-font-24 cursor-pointer ml-2"
+            *ngIf="(file.error && !file.id) || canCancelUploading(file) && !viewOnly"
+            (click)="clear(file)"
+          ></div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</ng-template>

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

@@ -0,0 +1,7 @@
+@import "assets/input-file.less";
+@import "assets/input-file-drop-placeholder";
+@import "assets/input-file-list";
+@import "assets/input-file-list-item";
+@import "assets/input-file-controls";
+@import "assets/input-file-drop";
+@import "assets/input-file-error.less";