myrta-ui 17.0.19 → 17.0.20

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

@@ -0,0 +1,18 @@
+<span class="ae-font ae-picker" [ngClass]="{'ae-expanded':isOpen}">
+  <button [tabIndex]="-1" #labelButton tabindex="0" type="button" role="button" class="ae-picker-label" (click)="toggleOpen($event);">{{label}}
+    <svg viewBox="0 0 18 18">
+     <!-- <use x="0" y="0" xlink:href="../assets/icons.svg#hom"></use>-->
+      <polygon class="ae-stroke" points="7 11 9 13 11 11 7 11"></polygon>
+      <polygon class="ae-stroke" points="7 7 9 5 11 7 7 7"></polygon>
+    </svg>
+  </button>
+  <span class="ae-picker-options">
+    <button tabindex="-1" type="button" role="button" class="ae-picker-item"
+            *ngFor="let item of options; let i = index"
+            [ngClass]="{'selected': item.value === value, 'focused': i === optionId}"
+            (click)="optionSelect(item, $event)">
+          {{item.label}}
+    </button>
+    <span class="dropdown-item" *ngIf="!options.length">No items for select</span>
+  </span>
+</span>

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

@@ -0,0 +1,131 @@
+.ae-font {
+  &.ae-picker {
+    color: #444;
+    display: inline-block;
+    float: left;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+  .ae-picker-label {
+    cursor: pointer;
+    display: inline-block;
+    height: 100%;
+    padding-left: 8px;
+    padding-right: 10px;
+    position: relative;
+    width: 100%;
+    line-height: 26px;
+    vertical-align: middle;
+    font-size: 85%;
+    text-align: left;
+    background-color: white;
+    min-width: 2rem;
+    float: left;
+    border: 1px solid #ddd;
+    text-overflow: clip;
+    overflow: hidden;
+    white-space: nowrap;
+    &:before {
+      content: '';
+      position: absolute;
+      right: 0; top: 0;
+      width: 20px;
+      height: 100%;
+      background: linear-gradient(to right, rgba(255, 255, 255,1), #ffffff 100%);
+    }
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      cursor: pointer;
+      background-color: #f1f1f1;
+      transition: 0.2s ease;
+      &:before {
+        background: linear-gradient(to right, #f5f5f5 100%, #ffffff 100%);
+      }
+    }
+    &:disabled {
+      background-color: #f5f5f5;
+      pointer-events: none;
+      cursor: not-allowed;
+      &:before {
+        background: linear-gradient(to right, #f5f5f5 100%, #ffffff 100%);
+      }
+    }
+
+    svg {
+      position: absolute;
+      margin-top: -9px;
+      right: 0;
+      top: 50%;
+      width: 18px;
+      &:not(:root) {
+        overflow: hidden;
+      }
+      .ae-stroke {
+        fill: none;
+        stroke: #444;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2;
+      }
+    }
+  }
+  .ae-picker-options {
+    background-color: #fff;
+    display: none;
+    min-width: 100%;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 3;
+    border: 1px solid transparent;
+    box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+    .ae-picker-item {
+      cursor: pointer;
+      display: block;
+      padding-bottom: 5px;
+      padding-top: 5px;
+      padding-left: 5px;
+      z-index: 3;
+      text-align: left;
+      background-color: transparent;
+      min-width: 2rem;
+      width: 100%;
+      border: 0 solid #ddd;
+      &.selected {
+        color: #06c;
+        background-color: #fff4c2;
+      }
+      &.focused {
+        background-color: #fffa98;
+      }
+      &:hover {
+        background-color: #fffa98;
+      }
+    }
+  }
+  &.ae-expanded {
+    display: block;
+    margin-top: -1px;
+    z-index: 1;
+    .ae-picker-label {
+      color: #ccc;
+      z-index: 2;
+      svg {
+        color: #ccc;
+        z-index: 2;
+        .ae-stroke {
+          stroke: #ccc;
+        }
+      }
+    }
+    .ae-picker-options {
+      display: block;
+      margin-top: -1px;
+      top: 100%;
+      z-index: 3;
+      border-color: #ccc;
+    }
+  }
+}

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

@@ -0,0 +1,205 @@
+import {
+  Component, ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostBinding, HostListener,
+  Input,
+  OnInit,
+  Output, Renderer2, ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectOption } from '../../models/editor-select.model';
+import { isDefined } from '../../helpers/is-defined';
+
+@Component({
+  selector: 'mrx-editor-toolbar-select',
+  templateUrl: './editor-toolbar-select.component.html',
+  styleUrls: ['./editor-toolbar-select.component.less'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => EditorToolbarSelectComponent),
+      multi: true,
+    }
+  ]
+})
+export class EditorToolbarSelectComponent implements OnInit, ControlValueAccessor {
+  @Input() options: SelectOption[] = [];
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('hidden') isHidden!: boolean;
+
+  selectedOption!: SelectOption;
+  disabled = false;
+  optionId = 0;
+
+  get label(): string {
+    return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
+  }
+
+  opened = false;
+
+  get value(): string {
+    return this.selectedOption.value;
+  }
+
+  @HostBinding('style.display') hidden = 'inline-block';
+
+  // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
+  @Output('change') changeEvent = new EventEmitter();
+
+  @ViewChild('labelButton', {static: true}) labelButton!: ElementRef;
+
+  constructor(
+    private elRef: ElementRef,
+    private r: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this.selectedOption = this.options[0];
+    if (isDefined(this.isHidden) && this.isHidden) {
+      this.hide();
+    }
+  }
+
+  hide() {
+    this.hidden = 'none';
+  }
+
+  optionSelect(option: SelectOption, event: MouseEvent) {
+    event.stopPropagation();
+    this.setValue(option.value);
+    this.onChange(this.selectedOption.value);
+    this.changeEvent.emit(this.selectedOption.value);
+    this.onTouched();
+    this.opened = false;
+  }
+
+  toggleOpen(event: MouseEvent) {
+    // event.stopPropagation();
+    if (this.disabled) {
+      return;
+    }
+    this.opened = !this.opened;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick($event: MouseEvent) {
+    if (!this.elRef.nativeElement.contains($event.target)) {
+      this.close();
+    }
+  }
+
+  close() {
+    this.opened = false;
+  }
+
+  get isOpen(): boolean {
+    return this.opened;
+  }
+
+  writeValue(value: any) {
+    if (!value || typeof value !== 'string') {
+      return;
+    }
+    this.setValue(value);
+  }
+
+  setValue(value: any) {
+    let index = 0;
+    const selectedEl = this.options.find((el, i) => {
+      index = i;
+      return el.value === value;
+    });
+    if (selectedEl) {
+      this.selectedOption = selectedEl;
+      this.optionId = index;
+    }
+  }
+
+  onChange: any = () => {
+  }
+  onTouched: any = () => {
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.labelButton.nativeElement.disabled = isDisabled;
+    const div = this.labelButton.nativeElement;
+    const action = isDisabled ? 'addClass' : 'removeClass';
+    this.r[action](div, 'disabled');
+    this.disabled = isDisabled;
+  }
+
+  @HostListener('keydown', ['$event'])
+  handleKeyDown($event: KeyboardEvent) {
+    if (!this.opened) {
+      return;
+    }
+    // console.log($event.key);
+    // if (KeyCode[$event.key]) {
+    switch ($event.key) {
+      case 'ArrowDown':
+        this._handleArrowDown($event);
+        break;
+      case 'ArrowUp':
+        this._handleArrowUp($event);
+        break;
+      case 'Space':
+        this._handleSpace($event);
+        break;
+      case 'Enter':
+        this._handleEnter($event);
+        break;
+      case 'Tab':
+        this._handleTab($event);
+        break;
+      case 'Escape':
+        this.close();
+        $event.preventDefault();
+        break;
+      case 'Backspace':
+        this._handleBackspace();
+        break;
+    }
+    // } else if ($event.key && $event.key.length === 1) {
+    // this._keyPress$.next($event.key.toLocaleLowerCase());
+    // }
+  }
+
+  _handleArrowDown($event: any) {
+    if (this.optionId < this.options.length - 1) {
+      this.optionId++;
+    }
+  }
+
+  _handleArrowUp($event: any) {
+    if (this.optionId >= 1) {
+      this.optionId--;
+    }
+  }
+
+  _handleSpace($event: any) {
+
+  }
+
+  _handleEnter($event: any) {
+    this.optionSelect(this.options[this.optionId], $event);
+  }
+
+  _handleTab($event: any) {
+
+  }
+
+  _handleBackspace() {
+
+  }
+}

package/src/lib/components/form/input-editor/config/index.ts

@@ -0,0 +1,77 @@
+import { HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UploadResponse } from '../services/editor.service';
+
+export interface CustomClass {
+  name: string;
+  class: string;
+  tag?: string;
+}
+
+export interface Font {
+  name: string;
+  class: string;
+}
+
+export interface AngularEditorConfig {
+  editable?: boolean;
+  spellcheck?: boolean;
+  height?: 'auto' | string;
+  minHeight?: '0' | string;
+  maxHeight?: 'auto' | string;
+  width?: 'auto' | string;
+  minWidth?: '0' | string;
+  translate?: 'yes' | 'now' | string;
+  enableToolbar?: boolean;
+  showToolbar?: boolean;
+  placeholder?: string;
+  defaultParagraphSeparator?: string;
+  defaultFontName?: string;
+  defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | string;
+  uploadUrl?: string;
+  upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
+  uploadWithCredentials?: boolean;
+  fonts?: Font[];
+  customClasses?: CustomClass[];
+  sanitize?: boolean;
+  toolbarPosition?: 'top' | 'bottom';
+  outline?: boolean;
+  toolbarHiddenButtons?: string[][];
+  rawPaste?: boolean;
+}
+
+export const angularEditorConfig: AngularEditorConfig = {
+  editable: true,
+  spellcheck: true,
+  height: 'auto',
+  minHeight: '0',
+  maxHeight: 'auto',
+  width: 'auto',
+  minWidth: '0',
+  translate: 'yes',
+  enableToolbar: true,
+  showToolbar: true,
+  placeholder: 'Enter text here...',
+  defaultParagraphSeparator: '',
+  defaultFontName: '',
+  defaultFontSize: '',
+  fonts: [
+    {class: 'arial', name: 'Arial'},
+    {class: 'times-new-roman', name: 'Times New Roman'},
+    {class: 'calibri', name: 'Calibri'},
+    {class: 'comic-sans-ms', name: 'Comic Sans MS'}
+  ],
+  uploadUrl: 'v1/image',
+  uploadWithCredentials: false,
+  sanitize: true,
+  toolbarPosition: 'top',
+  outline: true,
+  /*toolbarHiddenButtons: [
+    ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
+    ['heading', 'fontName', 'fontSize', 'color'],
+    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
+    ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
+    ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
+    ['link', 'unlink', 'image', 'video']
+  ]*/
+};

package/src/lib/components/form/input-editor/helpers/is-defined.ts

@@ -0,0 +1,3 @@
+export function isDefined(value: any) {
+  return value !== undefined && value !== null;
+}

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

@@ -0,0 +1,68 @@
+<div
+  class="angular-editor"
+  #angularEditor
+  [style.width]="config.width"
+  [style.minWidth]="config.minWidth"
+>
+  <mrx-editor-toolbar
+    *ngIf="config.toolbarPosition === 'top'"
+    #editorToolbar
+    [id]="id"
+    [uploadUrl]="config.uploadUrl"
+    [upload]="config.upload"
+    [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
+    [fonts]="getFonts()"
+    [customClasses]="config.customClasses"
+    [defaultFontName]="config.defaultFontName"
+    [defaultFontSize]="config.defaultFontSize"
+    [hiddenButtons]="config.toolbarHiddenButtons"
+    (execute)="executeCommand($event)"
+  >
+    <ng-container
+      [ngTemplateOutlet]="customButtonsTemplateRef"
+      [ngTemplateOutletContext]="{ executeCommandFn: this.executeCommandFn}"
+    >
+    </ng-container>
+  </mrx-editor-toolbar>
+
+  <div
+    class="angular-editor-wrapper"
+    #editorWrapper
+  >
+    <div
+      #editor
+      class="angular-editor-textarea"
+      [attr.contenteditable]="config.editable"
+      [attr.tabindex]="disabled ? -1 : tabIndex"
+      [attr.translate]="config.translate"
+      [attr.spellcheck]="config.spellcheck"
+      [style.height]="config.height"
+      [style.minHeight]="config.minHeight"
+      [style.maxHeight]="config.maxHeight"
+      [style.outline]="config.outline === false ? 'none': undefined"
+      (input)="onContentChange($event.target)"
+      (focus)="onTextAreaFocus($event)"
+      (blur)="onTextAreaBlur($event)"
+      (click)="exec()"
+      (keyup)="exec()"
+      (mouseout)="onTextAreaMouseOut($event)"
+      (paste)="onPaste($event)"
+    >
+    </div>
+    <span class="angular-editor-placeholder">{{ placeholder || config['placeholder'] }}</span>
+  </div>
+  <mrx-editor-toolbar
+    *ngIf="config.toolbarPosition === 'bottom'"
+    #editorToolbar
+    [id]="id"
+    [uploadUrl]="config.uploadUrl"
+    [upload]="config.upload"
+    [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
+    [fonts]="getFonts()"
+    [customClasses]="config.customClasses"
+    [defaultFontName]="config.defaultFontName"
+    [defaultFontSize]="config.defaultFontSize"
+    [hiddenButtons]="config.toolbarHiddenButtons"
+    (execute)="executeCommand($event)"
+  ></mrx-editor-toolbar>
+</div>

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

@@ -0,0 +1,64 @@
+@import "assets/style";
+
+.angular-editor {
+  position: relative;
+
+  ::ng-deep [contenteditable=true]:empty:before {
+    content: attr(placeholder);
+    // display: block; // for firefox
+    color: #868e96;
+    opacity: 1;
+  }
+
+  .angular-editor-wrapper {
+    position: relative;
+
+    .angular-editor-textarea {
+      min-height: 5rem;
+      padding: 0.5rem 0.8rem 1rem 0.8rem;
+      border: 1px solid #ddd;
+      background-color: transparent;
+      overflow-x: hidden;
+      overflow-y: auto;
+      // z-index: 2;
+      position: relative;
+      // pointer-events: none;
+      &:focus,
+      &.focus {
+        // outline: 0;
+      }
+
+      ::ng-deep blockquote {
+        margin-left: 1rem;
+        border-left: 0.2em solid #dfe2e5;
+        padding-left: 0.5rem;
+      }
+    }
+
+    ::ng-deep p {
+      margin-bottom: 0;
+    }
+
+    .angular-editor-placeholder {
+      display: none;
+      position: absolute;
+      top: 0;
+      padding: 0.5rem 0.8rem 1rem 0.9rem;
+      // z-index: 1;
+      color: #6c757d;
+      opacity: 0.75;
+    }
+
+    &.show-placeholder {
+      .angular-editor-placeholder {
+        display: block;
+      }
+    }
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}
+