myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/form/editor/config/default-inline-style.ts

@@ -1,5 +0,0 @@
-export const defaultInlineStyleConstant = {
-  table: { style: 'border:1px solid #C5C6C8FF;border-collapse:collapse;width: 100%;' },
-  tr: { style: ' border: 1px solid #C5C6C8FF;' },
-  td: { style: ' border: 1px solid #C5C6C8FF;'}
-}

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

@@ -1 +0,0 @@
-export * from './toolbar'

package/src/lib/components/form/editor/config/popups-toolbar.ts

@@ -1,9 +0,0 @@
-export const popupToolbars = {
-  img: [
-    { name: 'delete', icon: 'bin' },
-    { name: 'left', list: ['left', 'right', 'center', 'justify'] },
-    {name: 'nullable'},
-    {name: 'nullable'}
-  ]
-}
-

package/src/lib/components/form/editor/config/toolbar.ts

@@ -1,73 +0,0 @@
-import { ToolbarConfig } from '../models/toolbar.model';
-
-export const defaultToolbar: ToolbarConfig = {
-  buttons: [
-    'paragraph',
-    '|',
-    'font',
-    'fontsize',
-    'brush',
-    '|',
-    'bold',
-    'italic',
-    'underline',
-    'strikethrough',
-    '|',
-    {
-      name: 'left',
-      list: ['left', 'right', 'center', 'justify'],
-    },
-    '|',
-    'lineHeight',
-    'indent',
-    'outdent',
-    '|',
-    {
-      name: 'ul',
-      list: ''
-    },
-    {
-      name: 'ol',
-      list: ''
-    },
-    '|',
-    'link',
-    {
-      name: 'image',
-      css: {
-        display: 'flex'
-      }
-    },
-    'table',
-    'video',
-    'source',
-    '|',
-    'find',
-    'undo',
-    'redo',
-  ],
-  // buttonsMD: [
-  //   'paragraph',
-  //   '|',
-  //   'font',
-  //   'fontsize',
-  //   'brush',
-  //   'dots'
-  // ],
-  // buttonsSM: [
-  //   'paragraph',
-  //   '|',
-  //   'font',
-  //   'fontsize',
-  //   'brush',
-  //   'dots'
-  // ],
-  // buttonsXS: [
-  //   'paragraph',
-  //   '|',
-  //   'font',
-  //   'fontsize',
-  //   'brush',
-  //   'dots'
-  // ]
-}

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

@@ -1,22 +0,0 @@
-<div
-  class="mrx-editor"
-  [class.mrx-input-focused]="isFocused"
-  [class.mrx-input-error]="!isValid || invalid"
-  [class]="getClasses"
->
-  <ngx-jodit
-    #editorElementRef
-    [(ngModel)]="value"
-    [options]="defaultConfig"
-    (ngModelChange)="updateValue($event)"
-  ></ngx-jodit>
-
-  <mrx-error-message
-    *ngIf="(!isValid || invalid) && isInvalidMessage"
-    [invalidMessage]="invalidMessage"
-  ></mrx-error-message>
-
-  <mrx-chars-left [maxlength]="maxLength" [valueLength]="valueLength"></mrx-chars-left>
-
-  <mrx-save-state type="editor" [id]="uuid" [fields]="fields"></mrx-save-state>
-</div>

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

@@ -1,15 +0,0 @@
-:host::ng-deep {
-  @import './assets/jodit';
-  @import './assets/editor';
-  @import './assets/editor-toolbar';
-  @import './assets/editor-clear-elements';
-  @import './assets/editor-wysiwyg';
-  @import './assets/editor-error';
-  @import './assets/editor-borders';
-  @import './assets/editor-table';
-}
-
-::ng-deep {
-  @import './assets/editor-clear-out-elements';
-  @import './assets/editor-popups';
-}

package/src/lib/components/form/editor/editor.component.ts

@@ -1,271 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import { changeIconsFunction } from './modules/change-icon-module';
-import { defaultToolbar } from './config';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { popupToolbars } from './config/popups-toolbar';
-import { ToolbarConfig } from './models/toolbar.model';
-import { v4 as uuidv4 } from 'uuid';
-import { Field } from '../../../services';
-import { defaultInlineStyleConstant } from './config/default-inline-style';
-
-import { Jodit } from 'jodit';
-import { JoditConfig } from 'ngx-jodit';
-
-import ru from 'jodit/esm/langs/ru.js';
-
-import 'jodit/esm/plugins/source/source.js';
-import 'jodit/esm/plugins/line-height/line-height.js';
-import 'jodit/esm/plugins/indent/indent.js';
-import 'jodit/esm/plugins/video/video.js';
-import 'jodit/esm/plugins/search/search.js';
-import { InputEditorModeEnum, InputEditorValueWithId } from './editor.enum';
-
-Jodit.lang.de = ru;
-
-// export interface CustomJoditConfig extends JoditConfig {
-//   getIcon: (a: any) => void,
-//   link: any,
-//   cleanHTML: any,
-// }
-
-@Component({
-  selector: 'mrx-editor',
-  templateUrl: './editor.component.html',
-  styleUrls: ['./editor.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => EditorComponent),
-      multi: true,
-    },
-  ]
-})
-export class EditorComponent implements ControlValueAccessor, OnChanges {
-  private _isInit = false;
-  public value = '';
-  public valueLength = 0;
-  public isFocused: boolean | null = false;
-
-  public options = {
-    language: 'ru'
-  };
-
-  public defaultConfig: any = {
-    ...defaultToolbar,
-    popup: popupToolbars,
-    defaultMode: InputEditorModeEnum.MODE_WYSIWYG,
-    language: 'ru',
-    showCharsCounter: false,
-    showWordsCounter: false,
-    showXPathInStatusbar: false,
-    link: {
-      noFollowCheckbox: false
-    },
-    minHeight: 110,
-    iframe: false,
-    imageDefaultWidth: 200,
-    editHTMLDocumentMode: true,
-    cleanHTML: {
-      fillEmptyParagraph: true
-    },
-    placeholder: '',
-    toolbarAdaptive: false,
-    toolbarInline: true,
-    toolbarInlineForSelection: false,
-    toolbarInlineDisableFor: [],
-    toolbarInlineDisabledButtons: ['source'],
-    disabled: false,
-    readonly: false,
-    askBeforePasteHTML: false,
-    defaultActionOnPaste: 'insert_only_text',
-    askBeforePasteFromWord: false,
-    hidePoweredByJodit: true,
-    beautifyHTML: true,
-    addNewLine: true,
-    createAttributes: {},
-    getIcon: (iconName: string) => {
-      return changeIconsFunction(iconName);
-    },
-    events: {
-      focus: () => {
-        this.changeFocused(true);
-      },
-      blur: () => {
-        this.changeFocused(false);
-      }
-    }
-    // uploader: {
-    //   insertImageAsBase64URI: true
-    // },
-    // limitChars: 10,
-    // limitHTML: 170,
-  };
-
-  // SAVE STATE
-  public uuid: string = uuidv4();
-  @Input() public fields: Field[] = [];
-
-  @Input() public toolbar!: ToolbarConfig;
-  @Input() public maxLength = 0;
-  @Input() public minHeight = 110;
-  @Input() public customClasses = '';
-  @Input() public placeholder = '';
-  @Input() public disabled = false;
-  @Input() public readonly = false;
-  @Input() public iframe = false;
-  @Input() public defaultInlineStyle = false;
-  @Input() public config: any = this.defaultConfig;
-
-  @Input() public editHTMLDocumentMode = false;
-  @Input() public defaultMode: InputEditorModeEnum = InputEditorModeEnum.MODE_WYSIWYG;
-
-  @Input() public invalid = false;
-  @Input() public invalidMessage: string | string[] = '';
-  @Input() public checkInvalid: true | false | null = null;
-
-  @ViewChild('editorElementRef') editorElementRef!: any;
-
-  @Output() public changed: EventEmitter<string> = new EventEmitter<string>();
-  @Output() public modelChange: EventEmitter<InputEditorValueWithId> = new EventEmitter<InputEditorValueWithId>();
-
-  constructor(private changeDetection: ChangeDetectorRef) {
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['toolbar']) {
-      this.defaultConfig = {...this.defaultConfig, ...changes['toolbar'].currentValue};
-    }
-    if (changes['maxLength']) {
-      this.defaultConfig = {...this.defaultConfig, limitChars: changes['maxLength'].currentValue};
-    }
-    if (changes['placeholder']) {
-      this.defaultConfig = {...this.defaultConfig, placeholder: changes['placeholder'].currentValue};
-    }
-    if (changes['disabled']) {
-      this.defaultConfig = {...this.defaultConfig, disabled: changes['disabled'].currentValue};
-    }
-    if (changes['readonly']) {
-      this.defaultConfig = {...this.defaultConfig, readonly: changes['readonly'].currentValue};
-    }
-    if (changes['iframe']) {
-      this.defaultConfig = {...this.defaultConfig, iframe: changes['iframe'].currentValue};
-    }
-    if (changes['defaultInlineStyle']) {
-      this.defaultConfig = {
-        ...this.defaultConfig,
-        createAttributes: {...this.defaultConfig.createAttributes, ...defaultInlineStyleConstant}
-      };
-    }
-    if (changes['editHTMLDocumentMode']) {
-      this.defaultConfig = {
-        ...this.defaultConfig,
-        editHTMLDocumentMode: changes['editHTMLDocumentMode'].currentValue
-      };
-    }
-    if (changes['askBeforePasteHTML']) {
-      this.defaultConfig = {...this.defaultConfig, askBeforePasteHTML: changes['askBeforePasteHTML'].currentValue};
-    }
-    if (changes['askBeforePasteFromWord']) {
-      this.defaultConfig = {
-        ...this.defaultConfig,
-        askBeforePasteFromWord: changes['askBeforePasteFromWord'].currentValue
-      };
-    }
-    if (changes['defaultMode']) {
-      this.defaultConfig = {...this.defaultConfig, defaultMode: changes['defaultMode'].currentValue};
-    }
-    if (changes['defaultActionOnPaste']) {
-      this.defaultConfig = {
-        ...this.defaultConfig,
-        defaultActionOnPaste: changes['defaultActionOnPaste'].currentValue
-      };
-    }
-    if (changes['minHeight']) {
-      this.defaultConfig = {...this.defaultConfig, minHeight: changes['minHeight'].currentValue};
-    }
-    if (changes['config']) {
-      this.defaultConfig = {...this.defaultConfig, ...changes['config'].currentValue};
-    }
-  }
-
-  public get isValid(): boolean {
-    return true;
-  }
-
-  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.customClasses} ${this.checkValidClasses}`;
-  }
-
-  public insertPositionText(text: string) {
-    this.editorElementRef.editor.s.insertHTML(text);
-  }
-
-  public changeFocused(value: boolean): void {
-    this.isFocused = value;
-    this.changeDetection.detectChanges();
-  }
-
-  private onChange = (value: any) => {
-  };
-  private onTouched = () => {
-  };
-
-  public registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: () => {}): void {
-    this.onTouched = fn;
-  }
-
-  public writeValue(outsideValue: any) {
-    this.value = this._sanitizeValue(outsideValue);
-    if (outsideValue !== null) {
-      setTimeout(() => {
-        this._isInit = true;
-      }, 100);
-    }
-  }
-
-  public updateValue(insideValue: string) {
-
-    if (this.maxLength) {
-      this._calculateChartsCount();
-    }
-    if (this._isInit) {
-      this.value = insideValue;
-      this.changed.emit(insideValue);
-      this.modelChange.emit({value: insideValue, id: this.uuid});
-      this.onChange(insideValue);
-      this.onTouched();
-    }
-  }
-
-  private _sanitizeValue(value: string): string {
-    return value ? value.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') : value;
-  }
-
-  private _calculateChartsCount() {
-    this.valueLength = this.editorElementRef.editor.text.replace(/\s+/g, '').length;
-  }
-}

package/src/lib/components/form/editor/editor.enum.ts

@@ -1,12 +0,0 @@
-export type InputEditorValueTypes = string;
-
-export interface InputEditorValueWithId {
-  value: InputEditorValueTypes,
-  id: string
-}
-
-export enum InputEditorModeEnum {
-  MODE_WYSIWYG = 1,
-  MODE_SOURCE = 2,
-  MODE_SPLIT = 3
-}

package/src/lib/components/form/editor/editor.module.ts

@@ -1,25 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EditorComponent } from './editor.component';
-import { FormsModule } from '@angular/forms';
-import { CharsLeftModule } from '../../chars-left/chars-left.module';
-import { SafeModule } from '../../../pipes/safe/safe.module';
-import { ErrorMessageModule } from '../../error-message/error-message.module';
-import { SaveStateModule } from '../../save-state/save-state.module';
-import { NgxJoditComponent } from 'ngx-jodit';
-
-@NgModule({
-  declarations: [ EditorComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    NgxJoditComponent,
-    CharsLeftModule,
-    SafeModule,
-    ErrorMessageModule,
-    SaveStateModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [EditorComponent]
-})
-export class EditorModule { }

package/src/lib/components/form/editor/models/toolbar.model.ts

@@ -1,6 +0,0 @@
-export interface ToolbarConfig {
-  buttons: any,
-  buttonsMD?: any,
-  buttonsSM?: any,
-  buttonsXS?: any
-}

package/src/lib/components/form/editor/modules/change-icon-module.ts

@@ -1,91 +0,0 @@
-export const changeIconsFunction = (iconName: string) => {
-  switch (iconName) {
-    case  'paragraph':
-      return '<span class="mrx-icon icon-wysiwyg-icons-paragraph icon-font-24"></span>'
-    case 'bold':
-      return (`<span class="mrx-icon icon-wysiwyg-icons-text-bold icon-font-24"></span>`);
-    case 'strikethrough':
-      return '<span class="mrx-icon icon-wysiwyg-icons-strikethrough-text icon-font-24"></span>'
-    case 'underline':
-      return (`<span class="mrx-icon icon-wysiwyg-icons-text-underline icon-font-24"></span>`);
-    case 'italic':
-      return '<span class="mrx-icon icon-wysiwyg-icons-text-italic icon-font-24"></span>';
-    case 'redo':
-      return '<span class="mrx-icon icon-reload icon-font-24"></span>'
-    case 'undo':
-      return '<span class="mrx-icon icon-return icon-font-24"></span>'
-    case 'search':
-      return '<span class="mrx-icon icon-search icon-font-24"></span>'
-    case 'source':
-      return '<span class="mrx-icon icon-code icon-font-24"></span>'
-    case 'table':
-      return '<span class="mrx-icon icon-table icon-font-24"></span>'
-    case 'valign':
-      return '<span class="mrx-icon icon-wysiwyg-icons-padding icon-font-24"></span>'
-    case 'splitv':
-      return '<span class="mrx-icon icon-wysiwyg-icons-column-split icon-font-24"></span>'
-    case 'merge':
-      return '<span class="mrx-icon icon-wysiwyg-icons-column-merge icon-font-24"></span>'
-    case 'addcolumn':
-      return '<span class="mrx-icon icon-wysiwyg-icons-add-column icon-font-24"></span>'
-    case 'addrow':
-      return '<span class="mrx-icon icon-wysiwyg-icons-add-row icon-font-24"></span>'
-    case 'brush':
-      return '<span class="mrx-icon icon-wysiwyg-icons-fill-color icon-font-24"></span>'
-    case 'Background':
-      return null
-    case 'Text':
-      return null
-    case 'Border':
-      return null
-    case 'font':
-      return '<span class="mrx-icon icon-wysiwyg-icons-font-family icon-font-24"></span>'
-    case 'fontsize':
-      return '<span class="mrx-icon icon-wysiwyg-icons-font-size icon-font-24"></span>'
-    case 'left':
-      return '<span class="mrx-icon icon-wysiwyg-icons-text-align-left icon-font-24"></span>'
-    case 'right':
-      return '<span class="mrx-icon icon-wysiwyg-icons-text-align-right icon-font-24"></span>'
-    case 'center':
-      return '<span class="mrx-icon icon-wysiwyg-icons-text-align-center icon-font-24"></span>'
-    case 'justify':
-      return '<span class="mrx-icon icon-wysiwyg-icons-text-align-justify icon-font-24"></span>'
-    case 'lineHeight':
-      return '<span class="mrx-icon icon-wysiwyg-icons-line-height icon-font-24"></span>'
-    case 'indent':
-      return '<span class="mrx-icon icon-wysiwyg-icons-padding-left icon-font-24"></span>'
-    case 'outdent':
-      return '<span class="mrx-icon icon-wysiwyg-icons-padding-right icon-font-24"></span>'
-    case 'ul':
-      return '<span class="mrx-icon icon-point icon-font-24"></span>'
-    case 'ol':
-      return '<span class="mrx-icon icon-numbers icon-font-24"></span>'
-    case 'link':
-      return '<span class="mrx-icon icon-link icon-font-24"></span>'
-    case 'image':
-      return '<span class="mrx-icon icon-image icon-font-24"></span>'
-    case 'delete':
-      return '<span class="mrx-icon icon-delete icon-font-24"></span>'
-    case 'upload':
-      return '<span class="mrx-icon icon-upload icon-font-24"></span>'
-    case 'video':
-      return '<span class="mrx-icon icon-wysiwyg-icons-media icon-font-24"></span>'
-    case 'dots':
-      return '<span class="mrx-icon icon-more-vertical icon-font-24"></span>'
-    case 'bin':
-      return '<span class="mrx-icon icon-delete icon-font-24"></span>'
-    case 'eye':
-      return '<span class="mrx-icon icon-view icon-font-24"></span>'
-    case 'pencil':
-      return '<span class="mrx-icon icon-edit icon-font-24"></span>'
-    case 'unlink':
-      return '<span class="mrx-icon icon-cancel icon-font-24"></span>'
-    case 'file':
-      return '<span class="mrx-icon icon-file icon-font-24"></span>'
-    case 'empty':
-    case '':
-      return null
-    default:
-      return '<span class="mrx-icon icon-close icon-font-24"></span>'
-  }
-}

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

@@ -1,21 +0,0 @@
-.mrx-input-date.mrx-input-date {
-  &.mrx-input-error {
-    .mrx-input-date__input {
-      border-color: var(--system-bg-controls-negative-default) !important;
-    }
-  }
-
-  &.mrx-input-checked-error {
-    .mrx-input-date__input {
-      border-color: var(--system-bg-controls-negative-default) !important;
-      background-color: var(--system-bg-negative-secondary) !important;
-    }
-  }
-
-  &.mrx-input-checked-success {
-    .mrx-input-date__input {
-      background-color: var(--system-bg-positive-secondary) !important;
-      border-color: var(--system-bg-controls-positive-default) !important;
-    }
-  }
-}

package/src/lib/components/form/input-date-time/assets/input-date-icons.less

@@ -1,36 +0,0 @@
-.mrx-input-date.mrx-input-date {
-  .mrx-input-date__icons {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-
-    &-item {
-      cursor: pointer;
-    }
-
-    .mrx-icon {
-      cursor: pointer;
-    }
-  }
-
-  &.mrx-input-date-lg {
-    .mrx-icon {
-      margin-top: calc(var(--spacing-3) - var(--border-width-default));
-      margin-right: var(--spacing-3);
-    }
-  }
-  &.mrx-input-date-md {
-    .mrx-icon {
-      margin-top: calc(var(--spacing-2) - var(--border-width-default));
-      margin-right: var(--spacing-3);
-    }
-  }
-  &.mrx-input-date-sm {
-    .mrx-icon {
-      margin-top: calc(var(--spacing-2) - var(--border-width-default));
-      margin-right: var(--spacing-2);
-    }
-  }
-}

package/src/lib/components/form/input-date-time/assets/input-date-sizes.less

@@ -1,31 +0,0 @@
-.mrx-input-date.mrx-input-date {
-  &.mrx-input-date-lg {
-    .mrx-input-date__input {
-      padding: calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));
-      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);
-    }
-  }
-
-  &.mrx-input-date-md {
-    .mrx-input-date__input {
-      padding: calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));
-      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);
-    }
-  }
-
-  &.mrx-input-date-sm {
-    .mrx-input-date__input {
-      padding: calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));
-      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);
-    }
-  }
-}

package/src/lib/components/form/input-date-time/assets/input-date.less

@@ -1,27 +0,0 @@
-.mrx-input-date.mrx-input-date {
-  width: 100%;
-  position: relative;
-
-  .mrx-input-date__wrapper {
-    position: relative;
-  }
-
-  .mrx-input-date__input {
-    border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
-    border-radius: var(--border-radius-1);
-    width: 100%;
-    transition: outline-width 0.2s, border 0.2s;
-
-    &:focus, &:active {
-      outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
-    }
-
-    &:hover {
-      border: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
-    }
-
-    &:disabled {
-      background-color: var(--neutral-bg-disabled);
-    }
-  }
-}

package/src/lib/components/form/input-date-time/constants/value-models.ts

@@ -1,16 +0,0 @@
-import { DateModel, TimeModel } from '../helpers/validate-value-models';
-
-export const dateModelConstant: DateModel = {
-  view: '',
-  day: '',
-  month: '',
-  year: '',
-  invalid: true
-}
-
-export const timeModelConstant: TimeModel = {
-  view: '',
-  hour: '',
-  minute: '',
-  invalid: true
-}