myrta-ui 17.0.20 → 17.0.21

package/src/lib/components/table/table.component.ts

@@ -1,252 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ContentChildren,
-  EventEmitter,
-  Input,
-  Output,
-  QueryList,
-  TemplateRef,
-} from '@angular/core';
-import { ContentSettings, HeaderSettings, PaginatorSettings, SortDescriptor, TableBodyItem, TableType, TableTypeEnum } from './table.enum';
-import { ColumnComponent } from './components/column/column.component';
-import { PagerSettings } from './models/pager-settings';
-import { DefaultPagerSettings } from './default/default-pager-settings';
-import { DataStateChangeEvent } from './models/data-state-change.event';
-import { PaginateOutputObject } from '../paginator/paginator.enum';
-import { animate, group, state, style, transition, trigger } from '@angular/animations';
-
-@Component({
-  selector: 'mrx-table',
-  templateUrl: './table.component.html',
-  styleUrls: ['./table.component.less'],
-  animations: [
-    trigger('visibleLoading', [
-      state('in', style({ opacity: 1, visibility: 'visible' })),
-      state('out', style({ opacity: 0, visibility: 'hidden' })),
-      transition('in => out', [group([
-        animate('300ms ease-in-out', style({ opacity: 0 })),
-        animate('300ms ease-in-out', style({ visibility: 'hidden' }))
-      ]
-      )]),
-      transition('out => in', [group([
-        animate('1ms ease-in-out', style({ visibility: 'visible' })),
-        animate('300ms ease-in-out', style({ opacity: 1 }))
-      ]
-      )])
-    ])
-  ]
-})
-export class TableComponent implements AfterViewInit {
-  public colArray: ColumnComponent[] = [];
-  public pageable: PagerSettings | null = DefaultPagerSettings;
-  public selectedSort = ''
-  public init = false
-
-  @ContentChildren(ColumnComponent) contentChildren!: QueryList<ColumnComponent>;
-  @ContentChild('templateCard') templateCard!: TemplateRef<any>;
-  @ContentChild('emptyResultMsgTemplate') emptyResultMsgTemplate!: TemplateRef<any>;
-
-  @Input() type: TableType = 'default';
-  @Input() data!: TableBodyItem[];
-  @Input() pageSize = 20;
-  @Input() currentPage = 1;
-  @Input() total = 0;
-  @Input() link = '';
-  @Input() isLoading = false;
-
-  @Input() sort: SortDescriptor | undefined;
-  @Input() trackById = 'id';
-  @Input() sortable = true;
-  @Input() striped = true;
-  @Input() customClasses = ''
-  @Input() emptyResultMsg = ''
-  @Input() hovered = true;
-
-  @Input() autoHeight = true // deprecated
-
-  @Input() headerSettings: HeaderSettings | undefined
-
-  @Input() contentSettings: ContentSettings = {
-    substrate: false
-  }
-
-  @Input() paginatorSettings: PaginatorSettings = {
-    substrate: false
-  }
-
-  // Проверить и вырезать
-  public selectedItem = 1
-
-  @Input('pageable')
-  public set setPageable(value: PagerSettings | boolean) {
-    if (value === true) {
-      this.pageable = DefaultPagerSettings;
-    } else if (value === false) {
-      this.pageable = null;
-    } else {
-      this.pageable = value;
-    }
-  }
-
-  @Output() dataStateChanged: EventEmitter<DataStateChangeEvent> =
-    new EventEmitter<DataStateChangeEvent>();
-  @Output() downloadData: EventEmitter<Event> = new EventEmitter<Event>()
-  @Output() changeTypeTable: EventEmitter<TableType> = new EventEmitter<TableType>()
-  @Output() change: EventEmitter<Event> = new EventEmitter<Event>()
-
-  constructor(private changeDetector: ChangeDetectorRef) {
-  }
-
-  ngAfterViewInit() {
-    this.colArray = this.contentChildren.toArray();
-
-    this.colArray.forEach(item => {
-      if (this.sort && this.sort.col === item.name) {
-        this.selectedSort = item.name
-      }
-    })
-
-    this.colArray = this.colArray.filter(item => {
-      return item.name !== '' && item.sortLabel
-    })
-
-    this.changeDetector.detectChanges()
-    this.init = true
-  }
-
-  public get getClasses(): string {
-    return `${ TableTypeEnum[this.type] } ${ this.customClasses }`;
-  }
-
-  trackByFn(index: number, item: any): string {
-    return item[this.trackById];
-  }
-
-  public changeSort() {
-    const newEventData: DataStateChangeEvent = { page: this.currentPage, pageSize: this.pageSize };
-
-    if (!this.colArray.length) {
-      return
-    }
-
-    if (this.sort) {
-      newEventData.sort = {
-        dir: this.sort.dir === 'desc' ? 'asc' : 'desc',
-        col: this.sort.col
-      };
-    } else {
-      newEventData.sort = {
-        dir: 'asc',
-        col: this.colArray[0].name
-      };
-    }
-
-    this.dataStateChanged.emit(newEventData);
-  }
-
-  public columnSortedDir(column: string): string {
-    if (this.sort && this.sort.col == column && this.sort.dir) {
-      return this.sort.dir;
-    }
-    return '';
-  }
-
-  public onSortColumn(column: string, sortable: boolean): void {
-    if (!sortable) {
-      return;
-    }
-
-    const newEventData: DataStateChangeEvent = { page: this.currentPage, pageSize: this.pageSize };
-
-    if (this.sort && this.sort.col == column) {
-      if (this.sort.dir && this.sort.dir === 'asc') {
-        newEventData.sort = { dir: 'desc', col: column };
-      }
-    } else {
-      newEventData.sort = { dir: 'asc', col: column };
-    }
-
-    this.dataStateChanged.emit(newEventData);
-  }
-
-  public clickToDownload(event: Event): void {
-    this.downloadData.emit(event)
-  }
-
-  public updateSortSelect(value: any): void {
-    const newEventData: DataStateChangeEvent = {
-      page: this.currentPage,
-      pageSize: this.pageSize,
-      sort: {
-        col: value.name,
-        dir: this.sort?.dir
-      }
-    };
-
-    this.dataStateChanged.emit(newEventData)
-  }
-
-  public onDataStatePaginatorChanged(pagination: PaginateOutputObject): void {
-    const newEventData: DataStateChangeEvent = {
-      page: pagination.currentPage,
-      pageSize: pagination.pageSize
-    };
-
-    if (this.sort && this.sort.col && this.sort.dir) {
-      newEventData.sort = { dir: this.sort.dir, col: this.sort.col };
-    }
-
-    this.dataStateChanged.emit(newEventData);
-  }
-
-  public getLinkForStroke(link: string, dataItem: TableBodyItem) {
-    // регулярки
-    const regExpParams = /(?<=\[)[^\s\[\]]+(?=])/gi;
-    // основной массив
-    const linkArray = link.split('?')
-    // массивы строк url и параметров
-    const arrayUrl = linkArray[0]?.split('/')
-    const searchParams = linkArray[1]?.split('&')
-    const searchParamsObj = searchParams?.map((str) => {
-      const strParamData = str.split('=')[1].match(regExpParams)
-      return {
-        name: str.split('=')[0],
-        data: strParamData ? strParamData[0] : str.split('=')[0],
-      }
-    })
-    // const arrayParams = linkArray[1]?.match(regExpParams)
-
-    // обработка тела url
-    const strUrl = arrayUrl.map((str) => {
-      if (str.match(regExpParams)) {
-        // @ts-ignore
-        return dataItem[str.match(regExpParams)[0]]
-      } else {
-        return str
-      }
-    }).join('/')
-    // обработка параметров
-    // если есть параметры - возвращаем их строкой с динамическими параметрами
-
-    const strParams = searchParamsObj ? searchParamsObj.map((param, index: number) => {
-      return `${ index > 0 ? '' : '?' }${ param.name }=${ dataItem[param.data] }`
-    }).join('&') : ''
-
-    // const strParams = arrayParams ? arrayParams.map((str, index) => {
-    //   return `${index > 0 ? '' : '?'}${str}=${dataItem[str]}`
-    // }).join('&') : ''
-
-    return `${ strUrl }${ strParams }`
-  }
-
-  public onChangeTypeTable(type: TableType): void {
-    this.changeTypeTable.emit(type)
-  }
-
-  // public getHeightForTD(tableTD: HTMLElement) {
-  //   return tableTD.scrollHeight
-  // }
-}

package/src/lib/components/table/table.enum.ts

@@ -1,41 +0,0 @@
-export enum TableTypeEnum {
-  'default' = 'type-default',
-  'light' = 'type-light',
-  'cards' = 'type-cards',
-  'mixed' = 'type-mixed'
-}
-
-export type TableType = 'default' | 'light' | 'cards' | 'mixed';
-export type SortDirection = 'asc' | 'desc';
-
-export interface TableBodyItem {
-  [key: string]: any;
-}
-
-export interface SortDescriptor {
-  col: string,
-  dir?: SortDirection;
-}
-
-// default = слева количество, справа сортировка
-// second = слева сортировка, справа скачать
-export type TableCardHeaderType = 'default' | 'second'
-
-export interface HeaderSettings {
-  type: TableCardHeaderType,
-  sort?: boolean,
-  count?: boolean,
-  download?: boolean,
-  background?: boolean,
-  substrate?: boolean,
-  toggle?: boolean,
-  countText?: string
-}
-
-export interface ContentSettings {
-  substrate?: boolean
-}
-
-export interface PaginatorSettings {
-  substrate?: boolean
-}

package/src/lib/components/table/table.module.ts

@@ -1,30 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TableComponent } from './table.component';
-import { PaginatorModule } from '../paginator/paginator.module';
-import { ColumnComponent } from './components/column/column.component';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { FormsModule } from '@angular/forms';
-import { LoaderModule } from '../loader/loader.module';
-import { InputSelectModule } from '../form/input-select/input-select.module';
-
-@NgModule({
-  declarations: [
-    TableComponent,
-    ColumnComponent
-  ],
-  imports: [
-    CommonModule,
-    PaginatorModule,
-    InputSelectModule,
-    NgSelectModule,
-    FormsModule,
-    LoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [
-    TableComponent,
-    ColumnComponent
-  ]
-})
-export class TableModule {}

package/src/lib/components/tabs/tab/tab.component.html

@@ -1,4 +0,0 @@
-<div class="mrx-tab" [class]="customClasses" [class.active]="active" (click)="onTabClick()">
-  <ng-content></ng-content>
-  <span *ngIf="subTitle">{{subTitle}}</span>
-</div>

package/src/lib/components/tabs/tab/tab.component.less

@@ -1,15 +0,0 @@
-.mrx-tab.mrx-tab {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-
-  a {
-    color: var(--neutral-text-primary);
-    text-decoration: none;
-  }
-}
-
-

package/src/lib/components/tabs/tab/tab.component.ts

@@ -1,22 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'mrx-tab',
-  templateUrl: 'tab.component.html',
-  styleUrls: ['./tab.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TabComponent {
-  @Input() id!: number| string;
-  @Input() customClasses = '';
-  @Input() subTitle!: string;
-  @Input() active!: boolean;
-  @Input() disabled!: boolean;
-
-
-  @Output() onClick: EventEmitter<number| string> = new EventEmitter<number| string>();
-
-  public onTabClick(): void {
-    this.onClick.emit(this.id);
-  }
-}

package/src/lib/components/tabs/tabs-group/assets/tabs-button.less

@@ -1,43 +0,0 @@
-:host::ng-deep {
-  .mrx-tabs-group.mrx-tabs-group {
-    &.mrx-tabs-button {
-      .mrx-tabs-group-wrapper {
-        background: var(--neutral-bg-island-default);
-        padding: var(--spacing-1);
-
-        & > * {
-          padding: 0 var(--spacing-1);;
-
-          &:last-child {
-            padding-right: 0;
-          }
-
-          &:first-child {
-            padding-left: 0;
-          }
-
-          &:not(:last-child) {
-            @media screen and (min-width: 768px) {
-              border-right: var(--border-width-default) solid var(--neutral-bg-divider);
-            }
-          }
-        }
-
-        @media screen and (max-width: 767px) {
-          flex-direction: column;
-          width: 100%;
-        }
-      }
-
-      &.responsive {
-        .mrx-tabs-group-wrapper {
-          width: 100%;
-
-          & > * {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/tabs/tabs-group/assets/tabs-group.less

@@ -1,9 +0,0 @@
-.mrx-tabs-group.mrx-tabs-group {
-  display: flex;
-  overflow: hidden;
-
-  .mrx-tabs-group-wrapper {
-    display: flex;
-    overflow-x: auto;
-  }
-}

package/src/lib/components/tabs/tabs-group/assets/tabs-size.less

@@ -1,50 +0,0 @@
-:host::ng-deep {
-  .mrx-tabs-group.mrx-tabs-group {
-    &.mrx-tabs-lg {
-      .mrx-tab {
-        font-family: var(--body-lg-font-family);
-        font-size: var(--body-lg-font-size);
-        font-weight: var(--body-lg-font-weight);
-        line-height: var(--body-lg-line-height);
-      }
-    }
-
-    &.mrx-tabs-md {
-      .mrx-tab {
-        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-tabs-sm {
-      .mrx-tab {
-        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);
-      }
-    }
-  }
-
-  .mrx-tabs-button.mrx-tabs-button {
-    &.mrx-tabs-lg {
-      .mrx-tab {
-        padding: var(--spacing-2) var(--spacing-6);
-      }
-    }
-
-    &.mrx-tabs-md {
-      .mrx-tab {
-        padding: calc(var(--spacing-2) - var(--spacing-half)) var(--spacing-4);
-      }
-    }
-
-    &.mrx-tabs-sm {
-      .mrx-tab {
-        padding: var(--spacing-1) var(--spacing-3);
-      }
-    }
-  }
-}

package/src/lib/components/tabs/tabs-group/assets/tabs-types.less

@@ -1,63 +0,0 @@
-:host::ng-deep {
-  .mrx-tabs-default.mrx-tabs-default {
-    .mrx-tab {
-      padding: var(--spacing-2) var(--spacing-4);
-      border-radius: var(--border-radius-1) var(--border-radius-1) 0 0;
-
-      & > span {
-        margin-left: var(--spacing-1);
-      }
-
-      &:not(.active) {
-        color: var(--neutral-text-primary);
-        border-bottom: var(--border-width-default) solid var(--neutral-bg-stroke-default);
-
-        & > span {
-          color: var(--neutral-text-tertiary);
-        }
-      }
-
-      &.active {
-        color: var(--brand-text-controls-default);
-        border-bottom: var(--border-width-default) solid var(--brand-bg-primary-default);
-
-        a {
-          color: var(--brand-text-controls-default);
-        }
-
-        & > span {
-          color: var(--brand-text-accent);
-        }
-      }
-
-      &:hover {
-        background-color: var(--brand-bg-secondary-default);
-      }
-    }
-  }
-
-  .mrx-tabs-button.mrx-tabs-button {
-    .mrx-tab {
-      justify-content: center;
-      border-radius: var(--border-radius-1);
-      color: var(--neutral-text-primary);
-
-      & > span {
-        margin-left: var(--spacing-1);
-      }
-
-      span {
-        color: var(--neutral-text-primary);
-      }
-
-      &.active {
-        background: var(--brand-bg-tertiary-default);
-        box-shadow: var(--box-shadow-secondary-x) var(--box-shadow-secondary-y) var(--box-shadow-secondary-blur) var(--box-shadow-secondary-color);
-
-        span {
-          color: var(--neutral-text-primary);
-        }
-      }
-    }
-  }
-}

package/src/lib/components/tabs/tabs-group/tabs-group.component.html

@@ -1,5 +0,0 @@
-<div class="mrx-tabs-group" [class]="tabClasses" [class.responsive]="isResponsive">
-    <div class="mrx-tabs-group-wrapper">
-        <ng-content></ng-content>
-    </div> 
-</div>

package/src/lib/components/tabs/tabs-group/tabs-group.component.less

@@ -1,4 +0,0 @@
-@import "assets/tabs-group";
-@import "assets/tabs-size";
-@import "assets/tabs-types";
-@import "assets/tabs-button";

package/src/lib/components/tabs/tabs-group/tabs-group.component.ts

@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import {
-  TabsClasses,
-  TabSize, TabsTypesClasses, TabTypes,
-} from '../tabs.enum';
-
-@Component({
-  selector: 'mrx-tabs-group',
-  templateUrl: 'tabs-group.component.html',
-  styleUrls: ['./tabs-group.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TabsGroupComponent {
-
-  @Input() customClasses = '';
-  @Input() size: TabSize = 'medium';
-  @Input() type: TabTypes = 'default';
-  @Input() isResponsive = false;
-
-  public get tabClasses(): string {
-    return `${TabsTypesClasses[this.type]} ${TabsClasses[this.size]} ${this.customClasses}`;
-  }
-}

package/src/lib/components/tabs/tabs.enum.ts

@@ -1,15 +0,0 @@
-
-export type TabSize = 'small' | 'medium' | 'large';
-
-export enum TabsClasses {
-  'small' = 'mrx-tabs-sm',
-  'medium' = 'mrx-tabs-md',
-  'large' = 'mrx-tabs-lg',
-};
-
-export type TabTypes = 'default' | 'button';
-
-export enum TabsTypesClasses {
-  'default' = 'mrx-tabs-default',
-  'button' = 'mrx-tabs-button'
-};

package/src/lib/components/tabs/tabs.module.ts

@@ -1,12 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TabsGroupComponent } from './tabs-group/tabs-group.component';
-import { TabComponent } from './tab/tab.component';
-
-@NgModule({
-  declarations: [TabsGroupComponent, TabComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [TabsGroupComponent, TabComponent],
-})
-export class TabsModule {}

package/src/lib/components/tooltip/services/tooltip.service.ts

@@ -1,74 +0,0 @@
-import { Injectable } from '@angular/core';
-import { getHashCode } from '../../../helpers/string-hash-code';
-
-@Injectable()
-export class TooltipService {
-
-  private _tooltip: string = ''
-  private _tooltipVisible: boolean = false
-  private _isSaveToStorage: boolean = false
-
-  private get localStorageKey() {
-    return this.getTooltip ? `tooltip_${getHashCode(this.getTooltip)}` : null
-  }
-
-  public get getTooltip(): string {
-    return this._tooltip
-  }
-
-  public set setTooltip(value: string) {
-    this._tooltip = value
-  }
-
-  public get getSaveToStorage(): boolean {
-    return this._isSaveToStorage
-  }
-
-  public set setSaveToStorage(value: boolean) {
-    this._isSaveToStorage = value
-  }
-
-  public get getTooltipVisible(): boolean {
-    return this._tooltipVisible
-  }
-
-  public set setTooltipVisible(value: boolean) {
-    this._tooltipVisible = value || !!localStorage.getItem(<string>this.localStorageKey)
-
-    if (this._tooltipVisible && this._isSaveToStorage) {
-      localStorage.setItem(<string>this.localStorageKey, 'visible')
-    }
-  }
-
-  public toggleTooltipVisibleFromCode(value: boolean): void {
-    if (value && this._isSaveToStorage) {
-      localStorage.setItem(<string>this.localStorageKey, 'visible')
-    } else {
-      localStorage.removeItem(<string>this.localStorageKey)
-    }
-
-    this._tooltipVisible = value
-  }
-
-  public toggleTooltipVisible(): void {
-    if (this._isSaveToStorage) {
-      if (localStorage.getItem(<string>this.localStorageKey)) {
-        localStorage.removeItem(<string>this.localStorageKey)
-      } else {
-        localStorage.setItem(<string>this.localStorageKey, 'visible')
-      }
-    }
-
-
-    this._tooltipVisible = !this._tooltipVisible
-  }
-
-  public initTooltip(tooltip: string, tooltipInitialVisible: boolean): void {
-    this.setTooltip = tooltip
-    this.setTooltipVisible = tooltipInitialVisible
-
-    if (this._isSaveToStorage) {
-      this._tooltipVisible = !!localStorage.getItem(<string>this.localStorageKey)
-    }
-  }
-}