myrta-ui 17.0.20 → 17.0.21

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.html

@@ -1,252 +0,0 @@
-<div class="angular-editor-toolbar" *ngIf="showToolbar">
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'return'"
-      [title]="'Undo'"
-      [id]="'undo-'+id"
-      (mrxClick)="triggerCommand('undo')"
-      [hidden]="isButtonHidden('undo')"
-    ></mrx-editor-toolbar-button>
-
-    <mrx-editor-toolbar-button
-      [icon]="'reload'"
-      [title]="'Undo'"
-      [id]="'redo-'+id"
-      (mrxClick)="triggerCommand('redo')"
-      [hidden]="isButtonHidden('redo')"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-bold'"
-      [title]="'Bold'"
-      [id]="'bold-'+id"
-      (mrxClick)="triggerCommand('bold')"
-      [hidden]="isButtonHidden('bold')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-italic'"
-      [title]="'Italic'"
-      [id]="'italic-'+id"
-      (mrxClick)="triggerCommand('italic')"
-      [hidden]="isButtonHidden('italic')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-underline'"
-      [title]="'Underline'"
-      [id]="'underline-'+id"
-      (mrxClick)="triggerCommand('underline')"
-      [hidden]="isButtonHidden('underline')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-strikethrough-text'"
-      [title]="'Strikethrough'"
-      [id]="'strikeThrough-'+id"
-      (mrxClick)="triggerCommand('strikeThrough')"
-      [hidden]="isButtonHidden('strikeThrough')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'negative'"
-      [title]="'Subscript'"
-      [id]="'subscript-'+id"
-      (mrxClick)="triggerCommand('subscript')"
-      [hidden]="isButtonHidden('subscript')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'negative'"
-      [title]="'Superscript'"
-      [id]="'superscript-'+id"
-      (mrxClick)="triggerCommand('superscript')"
-      [hidden]="isButtonHidden('superscript')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-align-left'"
-      [title]="'Justify Left'"
-      [id]="'justifyLeft-'+id"
-      (mrxClick)="triggerCommand('justifyLeft')"
-      [hidden]="isButtonHidden('justifyLeft')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-align-center'"
-      [title]="'Justify Center'"
-      [id]="'justifyCenter-'+id"
-      (mrxClick)="triggerCommand('justifyCenter')"
-      [hidden]="isButtonHidden('justifyCenter')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-align-right'"
-      [title]="'Justify Center'"
-      [id]="'justifyRight-'+id"
-      (mrxClick)="triggerCommand('justifyRight')"
-      [hidden]="isButtonHidden('justifyRight')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-text-align-justify'"
-      [title]="'Justify Center'"
-      [id]="'justifyFull-'+id"
-      (mrxClick)="triggerCommand('justifyFull')"
-      [hidden]="isButtonHidden('justifyFull')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-padding-right'"
-      [title]="'Indent'"
-      [id]="'indent-'+id"
-      (mrxClick)="triggerCommand('indent')"
-      [hidden]="isButtonHidden('indent')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-padding-left'"
-      [title]="'Outdent'"
-      [id]="'outdent-'+id"
-      (mrxClick)="triggerCommand('outdent')"
-      [hidden]="isButtonHidden('outdent')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-ul'"
-      [title]="'Unordered List'"
-      [id]="'insertUnorderedList-'+id"
-      (mrxClick)="triggerCommand('insertUnorderedList')"
-      [hidden]="isButtonHidden('insertUnorderedList')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-ol'"
-      [title]="'Ordered List'"
-      [id]="'insertOrderedList-'+id"
-      (mrxClick)="triggerCommand('insertOrderedList')"
-      [hidden]="isButtonHidden('insertOrderedList')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-
-    <mrx-editor-toolbar-select class="select-heading" [options]="headings"
-               [(ngModel)]="block"
-               (change)="triggerCommand(block)"
-               [disabled]="htmlMode"
-               [hidden]="isButtonHidden('heading')"
-               tabindex="-1"></mrx-editor-toolbar-select>
-  </div>
-  <div class="angular-editor-toolbar-set">
-
-    <mrx-editor-toolbar-select class="select-font" [options]="fonts"
-               [(ngModel)]="fontName"
-               (change)="setFontName(fontName)"
-               [disabled]="htmlMode"
-               [hidden]="isButtonHidden('fontName')"
-               tabindex="-1"></mrx-editor-toolbar-select>
-  </div>
-  <div class="angular-editor-toolbar-set">
-
-    <mrx-editor-toolbar-select class="select-font-size" [options]="fontSizes"
-               [(ngModel)]="fontSize"
-               (change)="setFontSize(fontSize)"
-               [disabled]="htmlMode"
-               [hidden]="isButtonHidden('fontSize')"
-               tabindex="-1">
-    </mrx-editor-toolbar-select>
-  </div>
-  <div class="angular-editor-toolbar-set">
-    <input style="display: none" type="color" (change)="insertColor(fgInput.value, 'textColor')" #fgInput>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-font-color'"
-      [title]="'Text Color'"
-      [id]="'textColor-'+id"
-      (mrxClick)="focus(); ; fgInput.click()"
-      [hidden]="isButtonHidden('textColor')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-
-    <input style="display: none" type="color" (change)="insertColor(bgInput.value, 'backgroundColor')" #bgInput>
-    <mrx-editor-toolbar-button
-      [icon]="'wysiwyg-icons-bg-color'"
-      [title]="'Background Color'"
-      [id]="'backgroundColor-'+id"
-      (mrxClick)="focus(); ; bgInput.click()"
-      [hidden]="isButtonHidden('backgroundColor')"
-      [disabled]="htmlMode"
-    ></mrx-editor-toolbar-button>
-  </div>
-
-  <div *ngIf="_customClasses" class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-select class="select-custom-style" [options]="customClassList"
-               [(ngModel)]="customClassId"
-               (change)="setCustomClass(customClassId)"
-               [disabled]="htmlMode"
-               [hidden]="isButtonHidden('customClasses')"
-               tabindex="-1"></mrx-editor-toolbar-select>
-  </div>
-
-  <div class="angular-editor-toolbar-set">
-    <mrx-editor-toolbar-button
-      [icon]="'link'"
-      [title]="'Insert Link'"
-      [id]="'link-'+id"
-      (mrxClick)="insertUrl()"
-      [hidden]="isButtonHidden('link')"
-      [disabled]="isLinkButtonDisabled"
-    ></mrx-editor-toolbar-button>
-    <mrx-editor-toolbar-button
-      [icon]="'negative'"
-      [title]="'Unlink'"
-      [id]="'unlink-'+id"
-      (mrxClick)="triggerCommand('unlink')"
-      [hidden]="isButtonHidden('unlink')"
-      [disabled]="htmlMode || !linkSelected"
-    ></mrx-editor-toolbar-button>
-
-    <input style="display: none" accept="image/*" type="file" (change)="onFileChanged($event)" #fileInput>
-    <mrx-editor-toolbar-button
-      [icon]="'negative'"
-      [title]="'Insert Image'"
-      [id]="'insertImage-'+id"
-      (mrxClick)="focus(); fileInput.click()"
-      [hidden]="isButtonHidden('insertImage')"
-      [disabled]="htmlMode || !linkSelected"
-    ></mrx-editor-toolbar-button>
-
-    <button type="button" class="angular-editor-button"
-            (click)="insertVideo()" title="Insert Video" [disabled]="htmlMode" [hidden]="isButtonHidden('insertVideo')"
-            tabindex="-1"><i
-      class="fa fa-video-camera"></i></button>
-    <button type="button" title="Horizontal Line" class="angular-editor-button"
-            (click)="triggerCommand('insertHorizontalRule')" [disabled]="htmlMode"
-            [hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1"><i
-      class="fa fa-minus"></i></button>
-  </div>
-  <div class="angular-editor-toolbar-set">
-    <button type="button" title="Clear Formatting" class="angular-editor-button"
-            (click)="triggerCommand('removeFormat')" [disabled]="htmlMode" [hidden]="isButtonHidden('removeFormat')"
-            tabindex="-1"><i class='fa fa-remove'></i>
-    </button>
-  </div>
-  <div class="angular-editor-toolbar-set">
-    <button type="button" title="HTML Code" class="angular-editor-button"
-            (click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1"><i
-      class='fa fa-code'></i></button>
-  </div>
-  <ng-content></ng-content>
-</div>

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.less

@@ -1 +0,0 @@
-@import "../../assets/style";

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.ts

@@ -1,390 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-  ViewChild
-} from '@angular/core';
-import { SelectOption } from '../../models/editor-select.model';
-import { CustomClass } from '../../config';
-import { Observable } from 'rxjs';
-import { HttpEvent, HttpResponse } from '@angular/common/http';
-import { EditorService, UploadResponse } from '../../services/editor.service';
-import { DOCUMENT } from '@angular/common';
-
-@Component({
-  selector: 'mrx-editor-toolbar',
-  templateUrl: './editor-toolbar.component.html',
-  styleUrls: ['./editor-toolbar.component.less']
-})
-export class EditorToolbarComponent {
-  htmlMode = false;
-  linkSelected = false;
-  block = 'default';
-  fontName = 'Times New Roman';
-  fontSize = '3';
-  foreColour!: any;
-  backColor!: any;
-
-  headings: SelectOption[] = [
-    {
-      label: 'Heading 1',
-      value: 'h1',
-    },
-    {
-      label: 'Heading 2',
-      value: 'h2',
-    },
-    {
-      label: 'Heading 3',
-      value: 'h3',
-    },
-    {
-      label: 'Heading 4',
-      value: 'h4',
-    },
-    {
-      label: 'Heading 5',
-      value: 'h5',
-    },
-    {
-      label: 'Heading 6',
-      value: 'h6',
-    },
-    {
-      label: 'Heading 7',
-      value: 'h7',
-    },
-    {
-      label: 'Paragraph',
-      value: 'p',
-    },
-    {
-      label: 'Predefined',
-      value: 'pre'
-    },
-    {
-      label: 'Standard',
-      value: 'div'
-    },
-    {
-      label: 'default',
-      value: 'default'
-    }
-  ];
-
-  fontSizes: SelectOption[] = [
-    {
-      label: '1',
-      value: '1',
-    },
-    {
-      label: '2',
-      value: '2',
-    },
-    {
-      label: '3',
-      value: '3',
-    },
-    {
-      label: '4',
-      value: '4',
-    },
-    {
-      label: '5',
-      value: '5',
-    },
-    {
-      label: '6',
-      value: '6',
-    },
-    {
-      label: '7',
-      value: '7',
-    }
-  ];
-
-  customClassId = '-1';
-  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
-  _customClasses!: CustomClass[];
-  customClassList: SelectOption[] = [{label: '', value: ''}];
-  // uploadUrl: string;
-
-  tagMap = {
-    BLOCKQUOTE: 'indent',
-    A: 'link'
-  };
-
-  select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
-
-  buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
-    'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
-
-  @Input() uploadUrl?: string;
-  @Input() upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
-  @Input() showToolbar!: boolean;
-  @Input() id = '';
-  @Input() fonts: SelectOption[] = [{label: '', value: ''}];
-
-  @Input()
-  set customClasses(classes: CustomClass[] | undefined) {
-    if (classes) {
-      this._customClasses = classes;
-      this.customClassList = this._customClasses.map((x, i) => ({label: x.name, value: i.toString()}));
-      this.customClassList.unshift({label: 'Clear Class', value: '-1'});
-    }
-  }
-
-  @Input()
-  set defaultFontName(value: string | undefined) {
-    if (value) {
-      this.fontName = value;
-    }
-  }
-
-  @Input()
-  set defaultFontSize(value: string | undefined) {
-    if (value) {
-      this.fontSize = value;
-    }
-  }
-
-  @Input() hiddenButtons?: string[][];
-
-  @Output() execute: EventEmitter<string> = new EventEmitter<string>();
-
-  @ViewChild('fileInput', {static: true}) myInputFile!: ElementRef;
-
-  public get isLinkButtonDisabled(): boolean {
-    return this.htmlMode || !Boolean(this.editorService.selectedText);
-  }
-
-  constructor(
-    private r: Renderer2,
-    private editorService: EditorService,
-    private er: ElementRef,
-    @Inject(DOCUMENT) private doc: any
-  ) {
-  }
-
-  /**
-   * Trigger command from editor header buttons
-   * @param command string from toolbar buttons
-   */
-  triggerCommand(command: string) {
-    this.execute.emit(command);
-  }
-
-  /**
-   * highlight editor buttons when cursor moved or positioning
-   */
-  triggerButtons() {
-    if (!this.showToolbar) {
-      return;
-    }
-    this.buttons.forEach(e => {
-      const result = this.doc.queryCommandState(e);
-      const elementById = this.doc.getElementById(e + '-' + this.id);
-      if (result) {
-        this.r.addClass(elementById, 'active');
-      } else {
-        this.r.removeClass(elementById, 'active');
-      }
-    });
-  }
-
-  /**
-   * trigger highlight editor buttons when cursor moved or positioning in block
-   */
-  triggerBlocks(nodes: Node[]) {
-    if (!this.showToolbar) {
-      return;
-    }
-    this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
-    let found = false;
-    this.select.forEach(y => {
-      const node = nodes.find(x => x.nodeName === y);
-      if (node !== undefined && y === node.nodeName) {
-        if (found === false) {
-          this.block = node.nodeName.toLowerCase();
-          found = true;
-        }
-      } else if (found === false) {
-        this.block = 'default';
-      }
-    });
-
-    found = false;
-    if (this._customClasses) {
-      this._customClasses.forEach((y, index) => {
-        const node = nodes.find((x: Node): boolean | void => {
-          if (x instanceof Element) {
-            return x.className === y.class;
-          }
-        });
-        if (node !== undefined) {
-          if (found === false) {
-            this.customClassId = index.toString();
-            found = true;
-          }
-        } else if (found === false) {
-          this.customClassId = '-1';
-        }
-      });
-    }
-
-    Object.keys(this.tagMap).map(e => {
-      // @ts-ignore
-      const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
-      const node = nodes.find(x => x.nodeName === e);
-      if (node !== undefined && e === node.nodeName) {
-        this.r.addClass(elementById, 'active');
-      } else {
-        this.r.removeClass(elementById, 'active');
-      }
-    });
-
-    this.foreColour = this.doc.queryCommandValue('ForeColor');
-    this.fontSize = this.doc.queryCommandValue('FontSize');
-    this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
-    this.backColor = this.doc.queryCommandValue('backColor');
-  }
-
-  /**
-   * insert URL link
-   */
-  insertUrl() {
-    let url = 'https:\/\/';
-    const selection = this.editorService.savedSelection;
-    // @ts-ignore
-    if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
-      const parent = selection.commonAncestorContainer.parentElement as HTMLAnchorElement;
-      if (parent.href !== '') {
-        url = parent.href;
-      }
-    }
-    // @ts-ignore
-    url = prompt('Insert URL link', url);
-    if (url && url !== '' && url !== 'https://') {
-      this.editorService.createLink(url);
-    }
-  }
-
-  /**
-   * insert Video link
-   */
-  insertVideo() {
-    this.execute.emit('');
-    const url = prompt('Insert Video link', `https://`);
-    if (url && url !== '' && url !== `https://`) {
-      this.editorService.insertVideo(url);
-    }
-  }
-
-  /** insert color */
-  insertColor(color: string, where: string) {
-    this.editorService.insertColor(color, where);
-    this.execute.emit('');
-  }
-
-  /**
-   * set font Name/family
-   * @param foreColor string
-   */
-  setFontName(foreColor: string): void {
-    this.editorService.setFontName(foreColor);
-    this.execute.emit('');
-  }
-
-  /**
-   * set font Size
-   * @param fontSize string
-   */
-  setFontSize(fontSize: string): void {
-    this.editorService.setFontSize(fontSize);
-    this.execute.emit('');
-  }
-
-  /**
-   * toggle editor mode (WYSIWYG or SOURCE)
-   * @param m boolean
-   */
-  setEditorMode(m: boolean) {
-    const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
-    if (m) {
-      this.r.addClass(toggleEditorModeButton, 'active');
-    } else {
-      this.r.removeClass(toggleEditorModeButton, 'active');
-    }
-    this.htmlMode = m;
-  }
-
-  /**
-   * Upload image when file is selected.
-   */
-  onFileChanged(event: any) {
-    const file = event.target.files[0];
-    if (file.type.includes('image/')) {
-      if (this.upload) {
-        // @ts-ignore
-        this.upload(file).subscribe((response: HttpResponse<UploadResponse>) => this.watchUploadImage(response, event));
-      } else if (this.uploadUrl) {
-        // @ts-ignore
-        this.editorService.uploadImage(file).subscribe((response: HttpResponse<UploadResponse>) => this.watchUploadImage(response, event));
-      } else {
-        const reader = new FileReader();
-        reader.onload = (e: ProgressEvent) => {
-          const fr = e.currentTarget as FileReader;
-          // @ts-ignore
-          this.editorService.insertImage(fr.result.toString());
-        };
-        reader.readAsDataURL(file);
-      }
-    }
-  }
-
-  watchUploadImage(response: HttpResponse<{imageUrl: string}>, event: { srcElement: { value: null; }; }) {
-    // @ts-ignore
-    const { imageUrl } = response.body;
-    this.editorService.insertImage(imageUrl);
-    event.srcElement.value = null;
-  }
-
-  /**
-   * Set custom class
-   */
-  setCustomClass(classId: string) {
-    if (classId === '-1') {
-      this.execute.emit('clear');
-    } else {
-      this.editorService.createCustomClass(this._customClasses[+classId]);
-    }
-  }
-
-  isButtonHidden(name: string): boolean {
-    if (!name) {
-      return false;
-    }
-    if (!(this.hiddenButtons instanceof Array)) {
-      return false;
-    }
-    let result: any;
-    for (const arr of this.hiddenButtons) {
-      if (arr instanceof Array) {
-        result = arr.find(item => item === name);
-      }
-      if (result) {
-        break;
-      }
-    }
-    return result !== undefined;
-  }
-
-  focus() {
-    this.execute.emit('focus');
-  }
-}

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.html

@@ -1,12 +0,0 @@
-<button
-  type="button"
-  [title]="title"
-  [hidden]="hidden"
-  [disabled]="disabled"
-  [id]="id"
-  class="angular-editor-button"
-  (click)="mrxClick.emit()"
-  tabindex="-1"
->
-  <span class="mrx-icon icon-font-16" [class]="getIconClass"></span>
-</button>

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.less

@@ -1,13 +0,0 @@
-@import "../../assets/style";
-
-.select-button {
-  display: inline-block;
-  // border: #000066 solid;
-  // padding-right: 10px;
-  // padding: auto;
-  &.disabled {
-    cursor: pointer;
-    background-color: #f1f1f1;
-    transition: 0.2s ease;
-  }
-}

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.ts

@@ -1,22 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'mrx-editor-toolbar-button',
-  templateUrl: './editor-toolbar-button.component.html',
-  styleUrls: ['./editor-toolbar-button.component.less'],
-  encapsulation: ViewEncapsulation.None
-})
-export class EditorToolbarButtonComponent {
-  @Input() icon = '';
-  @Input() title = '';
-  @Input() id = '';
-  @Input() hidden = false;
-  @Input() disabled = false;
-  @Output() mrxClick: EventEmitter<void> = new EventEmitter<void>();
-
-  constructor() { }
-
-  get getIconClass(): string {
-    return `icon-${this.icon}`
-  }
-}