myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/table/assets/table-sort-select.less

@@ -1,70 +0,0 @@
-.mrx-table.mrx-table {
-  .mrx-table-sort {
-    &.mrx-table-sort--is-card {
-      justify-content: flex-start;
-    }
-
-    &.mrx-table-sort--is-table {
-      justify-content: flex-start;
-    }
-
-    &-scale {
-      display: flex;
-      align-items: center;
-      margin-right: 8px;
-      cursor: pointer;
-
-      &__title {
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 143%;
-        color: var(--neutral-text-primary, #262626);
-        margin-right: 12px;
-      }
-
-      &__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-}
-
-:host::ng-deep {
-  .mrx-table.mrx-table {
-    .mrx-table-sort {
-      .ng-select {
-        max-width: 215px;
-        margin-bottom: 0;
-
-        .ng-select-container.ng-select-container {
-          min-height: auto !important;
-          border: none;
-          cursor: pointer;
-          align-items: center;
-          height: 100% !important;
-        }
-
-        .ng-value-container.ng-value-container {
-          padding-left: 0 !important;
-          margin-right: 8px;
-        }
-
-        .ng-arrow-wrapper.ng-arrow-wrapper {
-          min-height: auto;
-          width: auto !important;
-        }
-
-        .ng-dropdown-panel.ng-dropdown-panel {
-          width: 100vw;
-          max-width: 215px;
-          left: auto;
-          right: 0;
-        }
-      }
-    }
-  }
-}

package/src/lib/components/table/assets/table-striped.less

@@ -1,42 +0,0 @@
-.mrx-table.mrx-table {
-  .table-striped {
-    tbody {
-      tr:nth-child(even) {
-        background-color: var(--neutral-bg-island-default, #F8F9FA);
-      }
-
-      tr:nth-child(n) {
-        transition: .2s;
-
-        &.-hovered {
-          &:hover {
-            background-color: var(--brand-bg-tertiary-hover, #edf5ff);
-          }
-        }
-      }
-    }
-  }
-
-  .table-solid {
-    border-collapse: collapse;
-
-    thead {
-      tr {
-        border-bottom: 1px solid #f2f2f2;
-      }
-    }
-    tbody {
-      tr:not(:last-child) {
-        border-bottom: 1px solid #f2f2f2;
-      }
-
-      tr {
-        &.-hovered {
-          &:hover {
-            box-shadow: 0px 1px 4px rgba(58, 58, 58, 0.3);
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/table/assets/table-toggle.less

@@ -1,22 +0,0 @@
-.mrx-table.mrx-table {
-  .mrx-table-toggle {
-    display: flex;
-
-    &--item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-
-      .mrx-icon {
-        color: #E5E5E5;
-      }
-
-      &.active {
-        .mrx-icon {
-          color: var(--brand-bg-primary-default, #2a6ab8);
-        }
-      }
-    }
-  }
-}

package/src/lib/components/table/assets/table-types.less

@@ -1,118 +0,0 @@
-.mrx-table__wrapper.mrx-table__wrapper {
-  overflow-x: auto;
-  overflow-y: hidden;
-  position: relative;
-
-  .mrx-table__wrapper--substrate {
-    padding-top: 8px;
-  }
-}
-
-.mrx-table.mrx-table {
-  &.type-default {
-    table {
-      width: 100%;
-      text-align: left;
-      background-color: transparent;
-      border-spacing: 0;
-
-      thead {
-        &.table-head-gray {
-          background: var(--neutral-bg-island-default, #F8F9FA);
-        }
-
-        .sort-asc {
-          .custom-table__sort {
-            path {
-              &:nth-child(2){
-                fill: var(--brand-bg-primary-default, #2a6ab8);
-              }
-            }
-          }
-        }
-
-        .sort-desc {
-          .custom-table__sort {
-            path {
-              &:nth-child(1){
-                fill: var(--brand-bg-primary-default, #2a6ab8);
-              }
-            }
-          }
-        }
-      }
-
-      td {
-        max-width: 340px;
-        vertical-align: top;
-
-        .link-wrapper {
-          display: block;
-          color: initial;
-          height: 100%;
-
-          &:active {
-            color: var(--neutral-text-primary, #262626);
-          }
-        }
-
-        .left-border {
-          border-left: 4px solid var(--brand-bg-primary-default, #2a6ab8);
-        }
-        .light-border {
-          border-left: 4px solid transparent;
-        }
-
-        .warning-back {
-          background-color: #FFECE7;
-        }
-        .disabled-back {
-          background-color: #FAFAFA;
-        }
-        .link-colored {
-          color: var(--brand-bg-primary-default, #2a6ab8);
-
-          &:active {
-            color: var(--brand-bg-primary-default, #2a6ab8);
-          }
-        }
-      }
-
-      th {
-        padding: 8px;
-        vertical-align: bottom;
-        word-break: inherit;
-        font-weight: bold;
-
-        svg {
-          margin-left: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  &.type-cards {
-
-  }
-
-  .mrx-table-card-header {
-    position: relative;
-
-    &--substrate {
-      padding-left: 24px;
-      padding-right: 24px;
-      background: #FFFFFF;
-      box-shadow: 0px 1px 4px rgba(59, 67, 87, 0.1);
-      border-radius: 4px;
-    }
-  }
-
-  .mrx-table__wrapper {
-    &--substrate {
-      background: #FFFFFF;
-      box-shadow: 0px 1px 4px rgba(59, 67, 87, 0.1);
-      border-radius: 4px;
-    }
-  }
-}

package/src/lib/components/table/assets/table.less

@@ -1,36 +0,0 @@
-.mrx-table.mrx-table {
-  display: block;
-  width: 100%;
-
-  table {
-    td {
-      height: 1px;
-    }
-  }
-
-  .th-wrapper {
-    display: flex;
-    cursor: pointer;
-    word-break: inherit;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    span {
-      word-break: inherit;
-    }
-  }
-
-  .mrx-table__sort-icon {
-    &.asc {
-      path:last-child {
-        fill: var(--brand-bg-primary-default, #2a6ab8);
-      }
-    }
-
-    &.desc {
-      path:first-child {
-        fill: var(--brand-bg-primary-default, #2a6ab8);
-      }
-    }
-  }
-}

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

@@ -1,17 +0,0 @@
-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-
-@Component({
-  selector: 'mrx-column',
-  template: '',
-})
-export class ColumnComponent {
-  @Input() name: string = '';
-  @Input() label: string = '';
-  @Input() sortLabel: string = '';
-  @Input() sortable: boolean = true;
-  @Input() isLink: boolean = true
-  @Input() customClasses: string = ''
-
-  @ContentChild('templateHead') templateHead!: TemplateRef<any>;
-  @ContentChild('templateCell') templateCell!: TemplateRef<any>;
-}

package/src/lib/components/table/default/default-pager-settings.ts

@@ -1,8 +0,0 @@
-import { PagerSettings } from '../models/pager-settings';
-
-export const DefaultPagerSettings: PagerSettings = {
-  info: true,
-  pageSizes: [20, 50, 100],
-  type: 'numeric',
-  withPageSize: true
-};

package/src/lib/components/table/models/data-state-change.event.ts

@@ -1,16 +0,0 @@
-import { SortDescriptor } from '../table.enum';
-
-export interface DataStateChangeEvent {
-  /**
-   * The number of records to skip.
-   */
-  page: number;
-  /**
-   * The number of records to take.
-   */
-  pageSize: number;
-  /**
-   * The sort descriptors by which the data is sorted.
-   */
-  sort?: SortDescriptor;
-}

package/src/lib/components/table/models/index.ts

@@ -1,3 +0,0 @@
-export * from './data-state-change.event';
-export * from './pager-settings';
-export * from '../table.enum';

package/src/lib/components/table/models/pager-settings.ts

@@ -1,26 +0,0 @@
-import { PaginatorPosition } from '../../paginator/paginator.enum';
-
-export declare type PagerType = 'numeric' | 'input';
-
-export interface PagerSettings {
-  /**
-   * Toggles the information about the current page and the total number of records.
-   *
-   * @default true
-   */
-  info?: boolean;
-  /**
-   * Defines the type of the Grid pager., todo
-   *
-   * @default 'numeric'
-   */
-  type?: PagerType;
-  /**
-   * Shows a menu for selecting the page size.
-   */
-  pageSizes: Array<number>;
-
-  position?: PaginatorPosition;
-
-  withPageSize?: boolean;
-}

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

@@ -1,220 +0,0 @@
-<div class="mrx-table" [class]="getClasses" [class.mb-3]="pageable">
-  <ng-container *ngIf="headerSettings">
-    <div
-      class="mrx-table-card-header pt-2 pb-2 mb-3"
-      [class.mrx-table-card-header--substrate]="headerSettings.substrate"
-      *ngIf="headerSettings.type === 'default'"
-    >
-      <div class="row">
-        <div
-          class="mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center">
-          <ng-container *ngTemplateOutlet="counterTemplate"></ng-container>
-        </div>
-
-        <div class="mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center">
-          <ng-container *ngTemplateOutlet="sortTemplate"></ng-container>
-          <div class="ml-4" *ngIf="headerSettings.toggle">
-            <ng-container *ngTemplateOutlet="toggleTemplate"></ng-container>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="mrx-table-card-header mb-3 pt-2 pb-2"
-      [class.mrx-table-card-header--substrate]="headerSettings.substrate"
-      *ngIf="headerSettings.type === 'second'"
-    >
-      <div class="row">
-        <div
-          class="mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center">
-          <ng-container *ngTemplateOutlet="sortTemplate"></ng-container>
-        </div>
-
-        <div class="mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center">
-          <ng-container *ngTemplateOutlet="downloadTemplate"></ng-container>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
-  <ng-container [ngSwitch]="type">
-    <div class="mrx-table__wrapper" *ngSwitchCase="'default'"
-         [class.mrx-table__wrapper--substrate]="contentSettings.substrate">
-      <table
-        [class.table-striped]="striped"
-        [class.table-solid]="!striped"
-        [class.mt-2]="contentSettings.substrate"
-        [class.mb-3]="contentSettings.substrate && data.length"
-      >
-        <thead [class.table-head-gray]="!headerSettings || headerSettings.background">
-        <tr>
-          <th *ngFor="let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn" [class]="col.customClasses">
-            <ng-container *ngIf="!col.templateHead; else headerItemTemplate">
-              <ng-container *ngIf="col.sortable; else defaultHeadCol">
-                <div [class.th-wrapper]="sortable" (click)="onSortColumn(col.name, col.sortable)">
-                  <span>{{ col.label }}</span>
-                  <svg
-                    width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
-                    [class]="columnSortedDir(col.name)"
-                    class="mrx-table__sort-icon">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 9L8 13L12 9" fill="#DAD5CE"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 7L8 3L4 7" fill="#DAD5CE"/>
-                  </svg>
-                </div>
-              </ng-container>
-              <ng-template #defaultHeadCol>
-                <div><span>{{ col.label }}</span></div>
-              </ng-template>
-            </ng-container>
-
-            <ng-template #headerItemTemplate>
-              <ng-container *ngIf="col.sortable; else defaultHeadCol">
-                <div [class.th-wrapper]="sortable" (click)="onSortColumn(col.name, col.sortable)">
-                  <ng-container *ngTemplateOutlet="col.templateHead; context: { $implicit: col }"></ng-container>
-                  <svg
-                    width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
-                    [class]="columnSortedDir(col.name)"
-                    class="mrx-table__sort-icon">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 9L8 13L12 9" fill="#DAD5CE"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 7L8 3L4 7" fill="#DAD5CE"/>
-                  </svg>
-                </div>
-              </ng-container>
-              <ng-template #defaultHeadCol>
-                <ng-container *ngTemplateOutlet="col.templateHead; context: { $implicit: col, index, first, last }"></ng-container>
-              </ng-template>
-            </ng-template>
-          </th>
-        </tr>
-        </thead>
-
-        <tbody>
-        <tr *ngFor="let dataItem of data; let index = index; let first = first; let last = last" [class.-hovered]="hovered">
-          <td
-            #tableTD
-            class="p-0"
-            *ngFor="let col of contentChildren"
-            [class]="col.customClasses"
-          >
-            <a
-              class="link-wrapper td-content-wrapper"
-              [href]="getLinkForStroke(link, dataItem)"
-              *ngIf="link && col['isLink']; else defaultTemplate"
-            >
-              <ng-container *ngIf="!col.templateCell; else bodyItemTemplate">
-                <div class="p-2 h-100">{{ dataItem[col.name] }}</div>
-              </ng-container>
-
-              <ng-template #bodyItemTemplate>
-                <ng-container
-                  *ngTemplateOutlet="col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }"></ng-container>
-              </ng-template>
-            </a>
-
-            <ng-template #defaultTemplate>
-              <ng-container *ngIf="!col.templateCell; else bodyItemTemplate">
-                <div class="td-content-wrapper p-2 h-100">{{ dataItem[col.name] }}</div>
-              </ng-container>
-
-              <ng-template #bodyItemTemplate>
-                <div class="td-content-wrapper h-100">
-                  <ng-container
-                    *ngTemplateOutlet="col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }"></ng-container>
-                </div>
-              </ng-template>
-            </ng-template>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-
-      <div class="mrx-table__result-message" *ngIf="!data.length">
-        <ng-container *ngTemplateOutlet="emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate">
-        </ng-container>
-      </div>
-
-      <div class="mrx-table__overlay" [@visibleLoading]="isLoading ? 'in' : 'out'" [ngClass]="{'open': isLoading}" >
-        <mrx-loader size="large" color="brand"></mrx-loader>
-      </div>
-    </div>
-
-    <div class="mrx-table__wrapper" *ngSwitchCase="'cards'">
-      <ng-container *ngFor="let item of data; let index = index; let first = first; let last = last">
-        <ng-container *ngTemplateOutlet="templateCard; context: { $implicit: item, index, first, last }"></ng-container>
-      </ng-container>
-
-      <div class="mrx-table__result-message--substrate" *ngIf="!data.length" >
-        <ng-container *ngTemplateOutlet="emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate">
-        </ng-container>
-      </div>
-
-      <div class="mrx-table__overlay" [@visibleLoading]="isLoading ? 'in' : 'out'" [ngClass]="{'open': isLoading}" >
-        <mrx-loader size="large" color="brand"></mrx-loader>
-      </div>
-    </div>
-  </ng-container>
-</div>
-
-<div class="mrx-table__paginator pt-2 pb-2" [class.mrx-table__paginator--substrate]="paginatorSettings.substrate" *ngIf="total">
-  <mrx-paginator
-    *ngIf="pageable"
-    [total]="total"
-    [pageSize]="pageSize"
-    [position]="pageable.position"
-    [pageSizes]="pageable.pageSizes"
-    [currentPage]="currentPage"
-    [withPageSize]="pageable.withPageSize"
-    (dataStateChanged)="onDataStatePaginatorChanged($event)">
-  </mrx-paginator>
-</div>
-
-<ng-template #counterTemplate>
-  <span class="d-flex align-items-center" *ngIf="headerSettings?.count">
-    {{ total }} {{headerSettings?.countText || 'новостей'}}
-  </span>
-</ng-template>
-
-<ng-template #sortTemplate>
-  <div class="d-flex mrx-table-sort" *ngIf="headerSettings?.sort">
-    <div class="mrx-table-sort-scale" (click)="changeSort()">
-      <span class="mrx-table-sort-scale__title">Сортировать по:</span>
-      <div class="mrx-table-sort-scale__icon">
-        <span *ngIf="sort?.dir === 'desc'" class="mrx-icon icon-sorting-down icon-font-16"></span>
-        <span *ngIf="sort?.dir === 'asc'" class="mrx-icon icon-sorting-up icon-font-16"></span>
-      </div>
-    </div>
-    <ng-select
-      bindLabel="sortLabel"
-      bindValue="name"
-      [items]="colArray"
-      [ngModel]="selectedSort"
-      (change)="updateSortSelect($event)"
-      [clearable]="false"
-      [searchable]="false"
-      [closeOnSelect]="true"
-    ></ng-select>
-  </div>
-</ng-template>
-
-<ng-template #downloadTemplate>
-  <div class="mrx-table-download" (click)="clickToDownload($event)" *ngIf="headerSettings?.download">
-    <span class="desktop">Скачать данные</span>
-    <span class="mrx-icon icon-download icon-font-24"></span>
-  </div>
-</ng-template>
-
-<ng-template #toggleTemplate>
-  <div class="mrx-table-toggle">
-    <div class="mrx-table-toggle--item mr-1" (click)="onChangeTypeTable('cards')" [class.active]="type === 'cards'">
-      <span class="mrx-icon icon-cards-view icon-font-24"></span>
-    </div>
-    <div class="mrx-table-toggle--item" (click)="onChangeTypeTable('default')" [class.active]="type === 'default'">
-      <span class="mrx-icon icon-table-view icon-font-24"></span>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #emptyResultMsgTemplateDefault>
-  {{emptyResultMsg}}
-</ng-template>

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

@@ -1,10 +0,0 @@
-@import "assets/table";
-@import "assets/table-types";
-@import "assets/table-toggle";
-@import "assets/table-sort-select";
-@import "assets/table-paginator";
-@import "assets/table-striped";
-@import "assets/table-overlay";
-@import "assets/table-empty-message";
-@import "assets/table-download";
-@import "assets/table-counter";