myrta-ui 17.0.18 → 17.0.20

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

@@ -0,0 +1,252 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,43 @@
+: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

@@ -0,0 +1,9 @@
+.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

@@ -0,0 +1,50 @@
+: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

@@ -0,0 +1,63 @@
+: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

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,4 @@
+@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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,15 @@
+
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,74 @@
+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)
+    }
+  }
+}