myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/wrappers/controls-wrapper/components/controls-item/controls-item.component.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'mrx-controls-item',
-  templateUrl: 'controls-item.component.html',
-  styleUrls: ['./controls-item.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ControlsItemComponent {
-  @Input() separator = false
-}

package/src/lib/components/wrappers/controls-wrapper/controls-wrapper.component.html

@@ -1,7 +0,0 @@
-<div class="mrx-controls-wrapper">
-  <ng-content></ng-content>
-
-  <div class="mrx-controls-wrapper__controls" [class]="getClasses">
-    <ng-container *ngTemplateOutlet="controls"></ng-container>
-  </div>
-</div>

package/src/lib/components/wrappers/controls-wrapper/controls-wrapper.component.less

@@ -1,30 +0,0 @@
-.mrx-controls-wrapper.mrx-controls-wrapper {
-  position: relative;
-
-  .mrx-controls-wrapper__controls {
-    position: absolute;
-    top: -12px;
-    right: -12px;
-    box-shadow: 0px 1px 4px rgba(58, 58, 58, 0.3);
-    border-radius: 4px;
-    display: flex;
-
-    &.visibility-auto {
-      visibility: hidden;
-      opacity: 0;
-      transition: .3s;
-    }
-
-    &.visibility-hide {
-      visibility: hidden;
-      opacity: 0;
-    }
-  }
-
-  &:hover {
-    .visibility-auto {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}

package/src/lib/components/wrappers/controls-wrapper/controls-wrapper.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, TemplateRef } from '@angular/core';
-import { ControlsVisibilityEnum, ControlsVisibilityTypes } from './controls-wrapper.enum';
-
-@Component({
-  selector: 'mrx-controls-wrapper',
-  templateUrl: './controls-wrapper.component.html',
-  styleUrls: ['./controls-wrapper.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ControlsWrapperComponent {
-  @Input() visibility: ControlsVisibilityTypes = 'auto'
-
-  @ContentChild('controls') controls!: TemplateRef<ElementRef>;
-
-  public get getClasses(): string {
-    return `${ControlsVisibilityEnum[this.visibility]}`;
-  }
-}

package/src/lib/components/wrappers/controls-wrapper/controls-wrapper.enum.ts

@@ -1,7 +0,0 @@
-export enum ControlsVisibilityEnum {
-  'auto' = 'visibility-auto',
-  'show' = 'visibility-show',
-  'hide' = 'visibility-hide',
-}
-
-export type ControlsVisibilityTypes = 'auto' | 'show' | 'hide';

package/src/lib/components/wrappers/controls-wrapper/controls-wrapper.module.ts

@@ -1,14 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlsWrapperComponent } from './controls-wrapper.component';
-import { ControlsItemComponent } from './components/controls-item/controls-item.component';
-
-
-
-@NgModule({
-  declarations: [ControlsWrapperComponent, ControlsItemComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [ControlsWrapperComponent, ControlsItemComponent]
-})
-export class ControlsWrapperModule { }

package/src/lib/components/wrappers/widget-wrapper/widget-wrapper.component.html

@@ -1,50 +0,0 @@
-<div class="mrx-widget" [class]="getClasses">
-  <div class="mrx-widget__header" (click)="changeVisibleContent()">
-    <div class="mrx-widget__header-content mr-4 flex-column flex-sm-row align-items-start align-items-sm-center">
-      <div class="mrx-widget__header-content--left justify-content-start">
-        <div class="mrx-widget__header-title" *ngIf="!templateHeadTitle; else titleTemplate">
-          <h6 class="mrx-widget__header-title--wrapper">
-            <span
-              *ngIf="iconClass"
-              [class]="getTitleIconClasses"
-              class="mrx-icon icon-font-24 icon-filled-color-negative"
-            ></span>
-            <span
-              *ngIf="title"
-              [class]="getTitleTextClasses"
-              class="mrx-widget__header-title--text color-negative"
-            >{{ title }}</span>
-          </h6>
-          <span class="mrx-widget__header-title--info" *ngIf="titleInfo">{{ titleInfo }}</span>
-        </div>
-        <ng-template #titleTemplate>
-          <ng-container *ngTemplateOutlet="templateHeadTitle"></ng-container>
-        </ng-template>
-        <ng-container *ngTemplateOutlet="templateHeadLeft"></ng-container>
-      </div>
-      <div class="mrx-widget__header-content--right justify-content-start" *ngIf="templateHeadRight">
-        <ng-container *ngTemplateOutlet="templateHeadRight"></ng-container>
-      </div>
-    </div>
-    <div class="mrx-widget__header-arrow">
-      <span class="mrx-widget__header-arrow--text mr-2 d-none d-md-flex justify-content-end">{{ isOpen ? 'Свернуть' : 'Развернуть' }}</span>
-      <span
-        [ngStyle]="{transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}"
-        class="mrx-icon icon-chevron-up icon-font-24"
-      ></span>
-    </div>
-  </div>
-
-  <div class="mrx-widget__content" [@expandedPanel]="isOpenState">
-    <div class="mrx-widget__content-box px-4 py-3">
-      <ng-container *ngIf="templateContent; else contentTemplate">
-        <ng-container *ngTemplateOutlet="templateContent"></ng-container>
-      </ng-container>
-      <ng-template #contentTemplate>
-        <ng-content></ng-content>
-      </ng-template>
-    </div>
-  </div>
-</div>
-
-

package/src/lib/components/wrappers/widget-wrapper/widget-wrapper.component.less

@@ -1,88 +0,0 @@
-.mrx-widget {
-  box-shadow: 0px 2px 10px rgba(58, 58, 58, 0.1);
-  border-radius: var(--border-radius-1);
-  background: #fff;
-
-  &__header {
-    padding: var(--spacing-2) var(--spacing-6);
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-grow: 1;
-      flex-wrap: wrap;
-      gap: var(--spacing-2);
-
-      &--left {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        flex-grow: 1;
-        flex-wrap: wrap;
-        gap: var(--spacing-2);
-      }
-
-      &--right {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        gap: 8px;
-        flex-shrink: 0;
-      }
-    }
-
-    &-title {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 4px;
-
-      &--wrapper {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      &--text {
-        font-family: var(--headlines-lvl-6-font-family);
-        font-size: var(--headlines-lvl-6-font-size);
-        font-weight: var(--headlines-lvl-6-font-weight);
-        line-height: var(--headlines-lvl-6-line-height);
-        color: var(--neutral-text-primary, #282828);
-      }
-
-      &--info {
-        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, #4D5157);
-      }
-    }
-
-    &-arrow {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-
-      &--text {
-        font-family: var(--body-md-bold-font-family);
-        font-size: var(--body-md-bold-font-size);
-        font-weight: var(--body-md-bold-font-weight);
-        line-height: var(--body-md-bold-line-height);
-        min-width: 70px;
-      }
-    }
-  }
-
-  &__content {
-    border-top: 1px solid var(--neutral-bg-stroke-default);
-  }
-}

package/src/lib/components/wrappers/widget-wrapper/widget-wrapper.component.ts

@@ -1,82 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef
-} from '@angular/core';
-import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
-import {
-  WidgetWrapperTitleStatusIconEnum,
-  WidgetWrapperTitleStatusTextEnum,
-  WidgetWrapperTitleStatusTypes
-} from "./widget-wrapper.enum";
-
-@Component({
-  selector: 'mrx-widget-wrapper',
-  templateUrl: './widget-wrapper.component.html',
-  styleUrls: ['./widget-wrapper.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('expandedPanel', [
-      state('initial', style({height: 0, opacity: 0})),
-      state('expanded', style({height: '*', opacity: 1})),
-      transition('initial => expanded', animate('0.2s', keyframes([
-        style({height: '*', offset: 0.7}),
-        style({opacity: 1, offset: 1})
-      ]))),
-      transition('expanded => initial', animate('0.2s', keyframes([
-        style({opacity: 0, offset: 0.4}),
-        style({height: 0, offset: 1})
-      ])))
-    ]),
-  ],
-})
-export class WidgetWrapperComponent implements OnInit {
-  private _animateState: 'initial' | 'expanded' = 'initial'
-
-  @Input() title = ''
-  @Input() titleInfo = ''
-  @Input() titleStatus: WidgetWrapperTitleStatusTypes = 'default'
-  @Input() iconClass = ''
-  @Input() isOpen = true
-  @Input() customClasses = ''
-
-  @Output() toggleWidgetContent: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  @ContentChild('templateHeadTitle') templateHeadTitle!: TemplateRef<HTMLElement>;
-  @ContentChild('templateHeadLeft') templateHeadLeft!: TemplateRef<HTMLElement>;
-  @ContentChild('templateHeadRight') templateHeadRight!: TemplateRef<HTMLElement>;
-  @ContentChild('templateContent') templateContent!: TemplateRef<HTMLElement>;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this._animateState = this.isOpen ? 'expanded' : 'initial'
-  }
-
-  public get getClasses(): string {
-    return `${this.customClasses}`
-  }
-
-  public get isOpenState(): string {
-    return this._animateState
-  }
-
-  public get getTitleTextClasses(): string {
-    return `${WidgetWrapperTitleStatusTextEnum[this.titleStatus]}`;
-  }
-
-  public get getTitleIconClasses(): string {
-    return `${WidgetWrapperTitleStatusIconEnum[this.titleStatus]} ${this.iconClass}`;
-  }
-
-  public changeVisibleContent(): void {
-    this.isOpen = !this.isOpen
-    this._animateState = this._animateState === 'initial' ? 'expanded' : 'initial'
-    this.toggleWidgetContent.emit(this.isOpen)
-  }
-}

package/src/lib/components/wrappers/widget-wrapper/widget-wrapper.enum.ts

@@ -1,17 +0,0 @@
-export enum WidgetWrapperTitleStatusTextEnum {
-  'default' = '',
-  'positive' = 'color-positive',
-  'negative' = 'color-negative',
-  'attention' = 'color-attention',
-  'info' = 'color-info',
-}
-
-export enum WidgetWrapperTitleStatusIconEnum {
-  'default' = '',
-  'positive' = 'icon-filled-color-positive',
-  'negative' = 'icon-filled-color-negative',
-  'attention' = 'icon-filled-color-attention',
-  'info' = '',
-}
-
-export type WidgetWrapperTitleStatusTypes = 'default' | 'positive' | 'negative' | 'attention' | 'info'

package/src/lib/components/wrappers/widget-wrapper/widget-wrapper.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { WidgetWrapperComponent } from './widget-wrapper.component';
-
-
-
-@NgModule({
-  declarations: [
-    WidgetWrapperComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    WidgetWrapperComponent
-  ]
-})
-export class WidgetWrapperModule { }

package/src/lib/directives/autosize/autosize.directive.ts

@@ -1,55 +0,0 @@
-import {
-  AfterViewInit,
-  Directive,
-  DoCheck,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  Input,
-  Renderer2
-} from '@angular/core';
-
-@Directive({
-  selector: '[mrxAutosize]'
-})
-export class AutosizeDirective implements AfterViewInit, DoCheck {
-  @HostBinding('style.overflow')
-  public overflow = 'hidden';
-
-  @Input()
-  @HostBinding('rows')
-  public rows = 1;
-
-  @Input()
-  public autosize = true;
-
-  constructor(private elem: ElementRef, private renderer: Renderer2) {}
-
-  public ngAfterViewInit() {
-    this.resize();
-  }
-
-  public ngDoCheck() {
-    this.resize();
-  }
-
-  @HostListener('input')
-  private resize() {
-    if (!this.autosize) {
-      this.overflow = 'auto'
-      return
-    }
-
-    const textarea = this.elem.nativeElement as HTMLTextAreaElement;
-    // Calculate border height which is not included in scrollHeight
-    const borderHeight = textarea.offsetHeight - textarea.clientHeight;
-    // Reset textarea height to auto that correctly calculate the new height
-    this.setHeight('auto');
-    // Set new height
-    this.setHeight(`${textarea.scrollHeight + borderHeight}px`);
-  }
-
-  private setHeight(value: string) {
-    this.renderer.setStyle(this.elem.nativeElement, 'height', value);
-  }
-}

package/src/lib/directives/autosize/autosize.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AutosizeDirective } from './autosize.directive';
-
-@NgModule({
-  declarations: [
-    AutosizeDirective
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    AutosizeDirective
-  ]
-})
-export class AutosizeModule { }

package/src/lib/directives/delayed-value/delayed-value.directive.ts

@@ -1,37 +0,0 @@
-import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { fromEvent, Subject, timer } from 'rxjs';
-import { debounce, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-
-@Directive({
-  selector: '[mrxDelayedValue]'
-})
-export class DelayedValueDirective implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
-  private delayTime = 1500
-
-  @Input() emitDelay!: number;
-  @Output() delayedInput = new EventEmitter<Event>();
-
-  constructor(private elementRef: ElementRef<HTMLInputElement>) { }
-
-  ngOnInit(): void {
-    if (this.emitDelay) {
-      this.delayTime = this.emitDelay
-    }
-
-    fromEvent(this.elementRef.nativeElement, 'input')
-      .pipe(
-        debounce(() => timer(this.delayTime)),
-        distinctUntilChanged(
-          (x: string, y: string) => x === y,
-          (event: Event) => (event.target as HTMLInputElement).value
-        ), // 6️⃣
-        takeUntil(this.destroy$),
-      )
-      .subscribe(e => this.delayedInput.emit(e));
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-  }
-}

package/src/lib/directives/delayed-value/delayed-value.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DelayedValueDirective } from './delayed-value.directive';
-
-
-
-@NgModule({
-  declarations: [DelayedValueDirective],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    DelayedValueDirective
-  ]
-})
-export class DelayedValueModule { }

package/src/lib/directives/truncate/truncate.directive.ts

@@ -1,26 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input, OnInit, Renderer2,
-} from '@angular/core';
-
-@Directive({
-  selector: '[mrxTruncate]',
-})
-export class TruncateDirective implements OnInit {
-  @Input('mrxTruncateRows') rows = '1'
-  @Input('mrxTruncateHeight') height = '20px'
-
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2
-  ) {}
-
-  ngOnInit(): void {
-    this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden')
-    this.renderer.setStyle(this.elementRef.nativeElement, 'display', '-webkit-box')
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-line-clamp', this.rows)
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-box-orient', 'vertical')
-    this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.height)
-  }
-}

package/src/lib/directives/truncate/truncate.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TruncateDirective } from './truncate.directive';
-
-@NgModule({
-  declarations: [TruncateDirective],
-  imports: [CommonModule],
-  exports: [TruncateDirective]
-})
-export class TruncateDirectiveModule {}

package/src/lib/enums/typed.input.state.ts

@@ -1,6 +0,0 @@
-export enum TypedInputState {
-    Hidden = 0,
-    View = 1,
-    Edit = 2,
-    Required = 3
-}

package/src/lib/helpers/extension/input-file.extension.ts

@@ -1,47 +0,0 @@
-const bytesInOneMb = 1048576;
-
-export function toBytes(mb: number): number {
-  return mb * bytesInOneMb;
-}
-
-export function formatBytes(bytes?: number, decimals = 2): string {
-  if (!bytes) {
-    return '';
-  }
-
-  if (bytes === 0) {
-    return '0 Байт';
-  }
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Байт', 'Kбайт', 'Мбайт', 'Гбайт', 'Тбайт', 'Pбайт', 'Eбайт', 'Zбайт', 'Yбайт'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-export function convertBase64ToFile(base64String: string, imageName: string, imageType: string) {
-  const byteString = atob(base64String.split(',')[1]);
-  const ab = new ArrayBuffer(byteString.length);
-  const ia = new Uint8Array(ab);
-  for (let i = 0; i < byteString.length; i += 1) {
-    ia[i] = byteString.charCodeAt(i);
-  }
-
-  return new File([ab], imageName, { type: imageType });
-}
-
-export async function getBase64FromUrl(url: string) {
-  const data = await fetch(url);
-  const blob = await data.blob();
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(blob);
-    reader.onloadend = () => {
-      const base64data = reader.result;
-      resolve(base64data);
-    };
-  });
-}

package/src/lib/helpers/formatting-date.ts

@@ -1,65 +0,0 @@
-export const toDate = (date: any, formatDate: string, formatTime: string) => {
-  if (date.slice(-1) === 'Z') {
-    return new Date(date)
-  }
-
-  const normalized = date.replace(/[^a-zA-Z0-9]/g, '-');
-  const normalizedFormatDate = formatDate.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
-  const replacedFormatTime = formatTime.toLowerCase().replace(/mm/gi, 'ii');
-  const normalizedFormatTime = replacedFormatTime.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
-  const normalizedFormat = `${normalizedFormatDate}-${normalizedFormatTime}`
-
-  const formatItems = normalizedFormat.split('-');
-  const dateItems = normalized.split('-');
-
-  const monthIndex    = formatItems.indexOf('mm');
-  const dayIndex      = formatItems.indexOf('dd');
-  const yearIndex     = formatItems.indexOf('yyyy');
-  const hourIndex     = formatItems.indexOf('hh');
-  const minutesIndex  = formatItems.indexOf('ii');
-  const secondsIndex  = formatItems.indexOf('ss');
-
-  const today = new Date();
-
-  const year  = yearIndex > -1  ? dateItems[yearIndex]    : today.getFullYear();
-  const month = monthIndex > -1 ? dateItems[monthIndex] - 1 : today.getMonth() - 1;
-  const day   = dayIndex > -1   ? dateItems[dayIndex]     : today.getDate();
-
-  const hour    = hourIndex > -1 && dateItems[hourIndex] ? dateItems[hourIndex] : 0;
-  const minute  = minutesIndex > -1 && dateItems[minutesIndex] ? dateItems[minutesIndex] : 0;
-  const second  = secondsIndex > -1 && dateItems[secondsIndex] ? dateItems[secondsIndex] : 0;
-
-  return new Date(year,month,day,hour,minute,second);
-}
-
-export const sliceDate = (date: any, formatDate: string, formatTime: string) => {
-  const normalized = date.replace(/[^a-zA-Z0-9]/g, '-');
-  const normalizedFormatDate = formatDate.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
-  const replacedFormatTime = formatTime.toLowerCase().replace(/mm/gi, 'ii');
-  const normalizedFormatTime = replacedFormatTime.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
-  const normalizedFormat = `${normalizedFormatDate}-${normalizedFormatTime}`
-
-  const formatItems = normalizedFormat.split('-');
-  const dateItems = normalized.split('-');
-
-  const monthIndex    = formatItems.indexOf('mm');
-  const dayIndex      = formatItems.indexOf('dd');
-  const yearIndex     = formatItems.indexOf('yyyy');
-  const hourIndex     = formatItems.indexOf('hh');
-  const minutesIndex  = formatItems.indexOf('ii');
-  const secondsIndex  = formatItems.indexOf('ss');
-
-  const today = new Date();
-
-  const year  = yearIndex > -1  ? dateItems[yearIndex]    : today.getFullYear();
-  const month = monthIndex > -1 ? dateItems[monthIndex] : today.getMonth();
-  const day   = dayIndex > -1   ? dateItems[dayIndex]     : today.getDate();
-
-  const hour    = hourIndex > -1 && dateItems[hourIndex] ? dateItems[hourIndex] : null;
-  const minute  = minutesIndex > -1 && dateItems[minutesIndex] ? dateItems[minutesIndex] : null;
-  const second  = secondsIndex > -1 && dateItems[secondsIndex] ? dateItems[secondsIndex] : null;
-
-  const formatMonth = month > 0 ? month : null
-
-  return {year, month: formatMonth, day, hour, minute, second}
-}

package/src/lib/helpers/formatting-dates-from-array.ts

@@ -1,21 +0,0 @@
-export const dateTimeFormat = (date: string, config: Intl.DateTimeFormatOptions) => {
-  return new Intl.DateTimeFormat('ru', config).format(new Date(date));
-};
-
-export const formattingDateRange = (dates: string[]): string => {
-  const config: Intl.DateTimeFormatOptions = {
-    month: 'short',
-    day: 'numeric'
-  };
-  let str = '';
-
-  dates.forEach((date, idx, array) => {
-    if (idx === array.length - 1) {
-      config.year = 'numeric';
-    }
-
-    str += `${idx > 0 ? ' - ' : ''}${dateTimeFormat(date, config)}`;
-  });
-
-  return str;
-};