myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/tooltip/tooltip-trigger/assets/tooltip-trigger-right.less

@@ -1,39 +0,0 @@
-.mrx-tooltip-trigger.mrx-tooltip-trigger {
-  &.trigger-right {
-    .tooltip-help {
-      font-family: var(--body-sm-font-famil);
-      font-size: var(--body-sm-font-size);
-      font-weight: var(--body-sm-font-weight);
-      line-height: var(--body-sm-line-height);
-      white-space: nowrap;
-      width: 0;
-      transition: .2s;
-      overflow: hidden;
-      color: var(--neutral-text-primary);
-      z-index: 1;
-    }
-
-    &:hover {
-      border-radius: var(--border-radius-1);
-
-      .tooltip-help {
-        width: 120px;
-        padding: var(--spacing-0) var(--spacing-1);
-      }
-    }
-
-    @media screen and (max-width: 991px) {
-      border-radius: var(--border-radius-1);
-      background-color: var(--brand-bg-tertiary-hover, #EDF5FF);
-
-      .mrx-icon {
-        background-color: var(--brand-bg-tertiary-hover, #EDF5FF);
-      }
-
-      .tooltip-help {
-        width: 120px;
-        padding: var(--spacing-0) var(--spacing-1);
-      }
-    }
-  }
-}

package/src/lib/components/tooltip/tooltip-trigger/assets/tooltip-trigger-top.less

@@ -1,41 +0,0 @@
-.mrx-tooltip-trigger.mrx-tooltip-trigger {
-  &.trigger-top {
-    position: relative;
-    width: calc(var(--sizing-4) + var(--sizing-half));
-
-    .tooltip-help {
-      position: absolute;
-      left: 50%;
-      top: -28px;
-      z-index: 1;
-      transform: translateX(-50%);
-      overflow: hidden;
-      font-family: var(--body-sm-font-famil);
-      font-size: var(--body-sm-font-size);
-      font-weight: var(--body-sm-font-weight);
-      line-height: var(--body-sm-line-height);
-      text-align: center;
-      color: var(--neutral-text-primary);
-      box-shadow: var(--box-shadow-secondary-x) var(--box-shadow-secondary-y) var(--box-shadow-secondary-blur) var(--box-shadow-secondary-spread) var(--box-shadow-secondary-color);
-      border-radius: var(--border-radius-1);
-      background-color: var(--brand-bg-tertiary-hover, #EDF5FF);
-      padding: 0;
-      opacity: 0;
-      visibility: hidden;
-      width: auto;
-      height: 0;
-    }
-
-    &:hover {
-      background: transparent;
-
-      .tooltip-help {
-        padding: var(--spacing-1);
-        height: auto;
-        width: max-content;
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-  }
-}

package/src/lib/components/tooltip/tooltip-trigger/assets/tooltip-trigger.less

@@ -1,29 +0,0 @@
-.mrx-tooltip-trigger.mrx-tooltip-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  cursor: pointer;
-  border-radius: 50%;
-
-  .mrx-icon {
-    background-color: transparent;
-    border-radius: 50%;
-  }
-
-  &:hover {
-    width: max-content;
-    background-color: var(--brand-bg-tertiary-hover, #EDF5FF);
-
-    .mrx-icon {
-      background-color: var(--brand-bg-tertiary-hover, #EDF5FF);
-    }
-  }
-
-  &.active {
-    background-color: var(--brand-bg-tertiary-selected, #EDF5FF);
-
-    .mrx-icon {
-      background-color: var(--brand-bg-tertiary-selected, #EDF5FF);
-    }
-  }
-}

package/src/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.html

@@ -1,11 +0,0 @@
-<div
-    class="mrx-tooltip-trigger"
-    [class.active]="isVisibleTooltip"
-    [class]="getClasses"
-    (click)="onToggle()"
->
-  <span class="mrx-icon icon-font-16" [class]="getIconClass"></span>
-  <span class="tooltip-help">
-    {{!isVisibleTooltip ? 'Развернуть подсказку' : 'Свернуть подсказку'}}
-  </span>
-</div>

package/src/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.less

@@ -1,3 +0,0 @@
-@import "assets/tooltip-trigger";
-@import "assets/tooltip-trigger-top";
-@import "assets/tooltip-trigger-right";

package/src/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.ts

@@ -1,29 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TooltipTextPositionEnum, TooltipTextPositionTypes, TooltipTriggerEnum, TooltipTriggerTypes } from './tooltip-trigger.enum';
-
-@Component({
-  selector: 'mrx-tooltip-trigger',
-  templateUrl: './tooltip-trigger.component.html',
-  styleUrls: ['./tooltip-trigger.component.less'],
-  providers: []
-})
-export class TooltipTriggerComponent {
-  @Input() public triggerTextPosition: TooltipTextPositionTypes = 'default'
-  @Input() public triggerType: TooltipTriggerTypes = 'attention'
-  @Input() public customClasses: string = ''
-
-  @Input() public isVisibleTooltip: boolean = false
-  @Output() public toggleTooltip: EventEmitter<void> = new EventEmitter<void>()
-
-  public get getClasses(): string {
-    return `${TooltipTextPositionEnum[this.triggerTextPosition]} ${this.customClasses}`;
-  }
-
-  public get getIconClass(): string {
-    return `${TooltipTriggerEnum[this.triggerType]}`
-  }
-
-  public onToggle(): void {
-    this.toggleTooltip.emit()
-  }
-}

package/src/lib/components/tooltip/tooltip-trigger/tooltip-trigger.enum.ts

@@ -1,13 +0,0 @@
-export enum TooltipTextPositionEnum {
-  default = 'trigger-top',
-  right = 'trigger-right'
-}
-
-export type TooltipTextPositionTypes = 'default' | 'right'
-
-export enum TooltipTriggerEnum {
-  attention = 'icon-help',
-  info = 'icon-info'
-}
-
-export type TooltipTriggerTypes = 'attention' | 'info'

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

@@ -1,4 +0,0 @@
-<div [@openClose]="tooltipVisible ? 'open' : 'closed'"
-     class="mrx-tooltip-content" [innerHTML]="tooltip" [class]="getClasses">
-</div>
-

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

@@ -1,19 +0,0 @@
-.mrx-tooltip-content.mrx-tooltip-content {
-  margin-top: var(--spacing-2);
-  border-radius: var(--border-radius-1);
-  font-family: var(--body-sm-font-famil);
-  font-size: var(--body-sm-font-size);
-  font-weight: var(--body-sm-font-weight);
-  line-height: var(--body-sm-line-height);
-  padding: var(--spacing-3) var(--spacing-4);
-  margin-bottom: var(--spacing-2);
-  overflow: hidden;
-  color: var(--neutral-text-primary);
-
-  &.type-attention {
-    background-color: var(--system-bg-attention-secondary);
-  }
-  &.type-info {
-    background-color: var(--brand-bg-tertiary-hover);
-  }
-}

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

@@ -1,51 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Tooltip } from './tooltip.enum';
-import { TooltipTriggerTypes } from './tooltip-trigger/tooltip-trigger.enum';
-
-@Component({
-  selector: 'mrx-tooltip',
-  templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.less'],
-  animations: [
-    trigger('openClose', [
-      state( 'open', style({ height: '*', padding: '*', 'margin-bottom': '8px' })),
-      state( 'closed', style({ height: 0, padding: 0, 'margin-bottom': 0 })),
-      transition('open => closed', [animate('0.5s ease')]),
-      transition('closed => open', [animate('0.5s ease')]),
-    ]),
-  ],
-})
-export class TooltipComponent implements OnInit {
-
-  public TooltipEnum = Tooltip
-
-  @Input() public tooltip: string | null = '';
-  @Input() public tooltipVisible: boolean = false;
-  @Input() public tooltipInitiallyVisible: boolean = false;
-  @Input() public triggerType: TooltipTriggerTypes = 'attention'
-
-  @Output() public visibilityChanged: EventEmitter<boolean> = new EventEmitter();
-
-  constructor() { }
-
-  ngOnInit(): void {
-
-  }
-
-  public get getClasses(): string {
-    return `${this.getTypeClass}`;
-  }
-
-  public get getTypeClass(): string {
-    switch (this.triggerType) {
-      case 'attention':
-        return 'type-attention'
-      case 'info':
-        return 'type-info'
-      default:
-        return 'type-attention'
-    }
-  }
-
-}

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

@@ -1,4 +0,0 @@
-export enum Tooltip {
-  Showed = 'Свернуть подсказку',
-  Hidden = 'Развернуть подсказку'
-}

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

@@ -1,13 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TooltipTriggerComponent } from './tooltip-trigger/tooltip-trigger.component';
-import { FormsModule } from '@angular/forms';
-import { TooltipComponent } from './tooltip.component';
-
-@NgModule({
-  declarations: [TooltipComponent, TooltipTriggerComponent],
-  imports: [CommonModule, FormsModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [TooltipComponent, TooltipTriggerComponent],
-})
-export class TooltipModule { }

package/src/lib/components/truncate-text/directives/truncate-text.directive.ts

@@ -1,158 +0,0 @@
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  Directive,
-  ElementRef, EventEmitter,
-  HostListener,
-  Input,
-  OnChanges, OnDestroy,
-  OnInit,
-  Output,
-  Renderer2,
-  SimpleChanges
-} from '@angular/core';
-import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';
-import { LinkComponent } from '../../link/link.component';
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { Subscriber, Subscription } from 'rxjs';
-
-@Directive({
-  selector: '[mrxTruncateText]',
-})
-export class TruncateTextDirective implements OnInit, OnChanges, AfterContentInit, AfterContentChecked, OnDestroy {
-  private subscribe$!: Subscription
-  private defaultLineHeight = 20;
-  private defaultAnimateTime = 150;
-  private content = ''
-  private windowWidth = 0
-
-  @Input() count!: number;
-  @Input() responsiveCount!: [number, number];
-  @Input() lineHeight!: number;
-  @Input() isOpen!: boolean;
-  @Input() truncateButtonRef!: LinkComponent;
-
-  @Output() changeVisibleButton: EventEmitter<boolean> = new EventEmitter<boolean>()
-
-  constructor(
-    private elementRef: ElementRef,
-    private builder: AnimationBuilder,
-    private renderer: Renderer2,
-    private breakpointObserver: BreakpointObserver
-  ) {}
-
-  ngOnInit(): void {
-    if (!this.lineHeight) {
-      this.checkLineHeight();
-    }
-
-    this.subscribe$ = this.breakpointObserver.observe(['(max-width: 768px)']).subscribe((result: BreakpointState) => {
-      if (!this.responsiveCount) {
-        return this.startAnimate(this.showInitial(this.count));
-      }
-
-      if (result.matches) {
-        this.count = this.responsiveCount[1]
-      } else {
-        this.count = this.responsiveCount[0]
-      }
-
-      this.startAnimate(this.showInitial(this.responsiveCount[0]));
-    })
-  }
-
-  ngAfterContentChecked(): void {
-    const c = this.elementRef.nativeElement.innerHTML;
-    if (c !== this.content) {
-      this.content = c;
-      this.checkTruncateButton();
-    }
-  }
-
-  ngAfterContentInit(): void {
-    this.content = this.elementRef.nativeElement.innerHTML;
-    this.checkTruncateButton();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['isOpen'] && !changes['isOpen'].firstChange) {
-      if (this.isOpen) {
-        this.startAnimate(this.showIn());
-      } else {
-        this.startAnimate(this.showOut());
-      }
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscribe$.unsubscribe()
-  }
-
-  private startAnimate(metadata: AnimationMetadata | AnimationMetadata[]): void {
-    const factory = this.builder.build(metadata);
-    const player = factory.create(this.elementRef.nativeElement);
-
-    player.play();
-  }
-
-  private checkLineHeight(): void {
-    if (this.elementRef.nativeElement.children.length) {
-      this.lineHeight = parseInt(getComputedStyle(this.elementRef.nativeElement.childNodes[0]).lineHeight) || this.defaultLineHeight;
-    } else {
-      this.lineHeight = this.defaultLineHeight;
-    }
-  }
-
-  private checkTruncateButton(): void {
-    setTimeout(() => {
-      if (this.lineHeight * this.count >= this.elementRef.nativeElement.scrollHeight) {
-        this.changeVisibleButton.emit(false)
-      } else {
-        this.changeVisibleButton.emit(true)
-      }
-    });
-  }
-
-  private showIn(): AnimationMetadata[] {
-    this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden');
-    this.renderer.setStyle(this.elementRef.nativeElement, 'display', '-webkit-box');
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-box-orient', 'vertical');
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-line-clamp', 'inherit');
-
-    return [
-      style({ maxHeight: this.lineHeight * this.count }),
-      animate(`${this.defaultAnimateTime}ms ease-in-out`, style({ maxHeight: this.elementRef.nativeElement.scrollHeight })),
-    ];
-  }
-
-  private showOut(): AnimationMetadata[] {
-    this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden');
-    this.renderer.setStyle(this.elementRef.nativeElement, 'display', '-webkit-box');
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-box-orient', 'vertical');
-
-    setTimeout(() => {
-      this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-line-clamp', this.count);
-    }, this.defaultAnimateTime);
-
-    return [
-      style({ '-webkit-line-clamp': 'inherit', maxHeight: '*' }),
-      animate(`${this.defaultAnimateTime}ms ease-in-out`, style({ maxHeight: this.lineHeight * this.count })),
-    ];
-  }
-
-
-  private showInitial(count: number): AnimationMetadata[] {
-    this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden');
-    this.renderer.setStyle(this.elementRef.nativeElement, 'display', '-webkit-box');
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-box-orient', 'vertical');
-    this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-line-clamp', this.count);
-    this.renderer.setStyle(this.elementRef.nativeElement, 'line-height', `${this.lineHeight}px`);
-
-    return [style({ maxHeight: this.lineHeight * this.count })];
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.checkTruncateButton();
-  }
-}

package/src/lib/components/truncate-text/truncate-text.component.html

@@ -1,21 +0,0 @@
-<div
-  class="mrx-truncate-text"
-  mrxTruncateText
-  [class.mb-2]="isVisibleButton"
-  [count]="count"
-  [responsiveCount]="responsiveCount"
-  [isOpen]="isOpen"
-  [lineHeight]="lineHeight"
-  (changeVisibleButton)="changeVisibleButton($event)"
->
-  <ng-content></ng-content>
-</div>
-
-<mrx-link
-  *ngIf="isVisibleButton"
-  type="pseudo"
-  [prevent]="true"
-  (click)="isOpen = !isOpen"
->
-  {{ isOpen ? 'Свернуть' : 'Развернуть' }}
-</mrx-link>

package/src/lib/components/truncate-text/truncate-text.component.ts

@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { TruncateCount, TruncateResponsiveCount } from './truncate-text.enum';
-
-@Component({
-  selector: 'mrx-truncate-text',
-  templateUrl: './truncate-text.component.html'
-})
-export class TruncateTextComponent {
-  public isVisibleButton = false
-
-  @Input() count: TruncateCount = 2
-  @Input() responsiveCount!: TruncateResponsiveCount
-  @Input() isOpen = false
-  @Input() lineHeight!: number
-
-  public changeVisibleButton(event: boolean): void {
-    this.isVisibleButton = event
-  }
-}

package/src/lib/components/truncate-text/truncate-text.enum.ts

@@ -1,2 +0,0 @@
-export type TruncateCount = number
-export type TruncateResponsiveCount = [TruncateCount, TruncateCount]

package/src/lib/components/truncate-text/truncate-text.module.ts

@@ -1,13 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TruncateTextComponent } from './truncate-text.component';
-import { TruncateTextDirective } from './directives/truncate-text.directive';
-import { LinkModule } from '../link/link.module';
-
-@NgModule({
-  declarations: [TruncateTextComponent, TruncateTextDirective],
-  imports: [CommonModule, LinkModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [TruncateTextComponent]
-})
-export class TruncateTextModule { }

package/src/lib/components/warning-message/warning-message.component.html

@@ -1,8 +0,0 @@
-<span
-    *ngFor="let messageArrayText of messageArray"
-    class="mrx-warning-message d-block mt-1"
-    [class]="getClasses"
->
-  {{messageArrayText}}
-  <ng-content></ng-content>
-</span>

package/src/lib/components/warning-message/warning-message.component.less

@@ -1,12 +0,0 @@
-.mrx-warning-message {
-  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);
-  color: var(--system-text-attention);
-
-  a {
-    color: var(--system-text-attention);
-    text-decoration: underline;
-  }
-}

package/src/lib/components/warning-message/warning-message.component.ts

@@ -1,24 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'mrx-warning-message',
-  templateUrl: './warning-message.component.html',
-  styleUrls: ['warning-message.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class WarningMessageComponent {
-  @Input() public message: string | string[] = '';
-  @Input() public customClasses = '';
-
-  public get getClasses(): string {
-    return `${this.customClasses}`;
-  }
-
-  public get messageArray(): string[] {
-    if (typeof this.message === 'string') {
-      return Array(this.message);
-    } else {
-      return this.message;
-    }
-  }
-}

package/src/lib/components/warning-message/warning-message.module.ts

@@ -1,11 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { WarningMessageComponent } from './warning-message.component';
-
-@NgModule({
-  declarations: [WarningMessageComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [WarningMessageComponent],
-})
-export class WarningMessageModule { }

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

@@ -1,9 +0,0 @@
-<div
-  class="mrx-content-wrapper"
-  [class]="getClasses"
-  [ngStyle]="{maxWidth: maxWidth}"
->
-  <ng-content></ng-content>
-</div>
-
-

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

@@ -1,13 +0,0 @@
-.mrx-content-wrapper.mrx-content-wrapper {
-  position: relative;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-
-  &.type-colored {
-    padding: 24px;
-    border-radius: 4px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 4px rgba(59, 67, 87, 0.1);
-  }
-}

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

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ContentWrapperType, ContentWrapperTypeEnum } from './content-wrapper.enum';
-
-@Component({
-  selector: 'mrx-content-wrapper',
-  templateUrl: './content-wrapper.component.html',
-  styleUrls: ['./content-wrapper.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ContentWrapperComponent {
-  @Input() type: ContentWrapperType = 'default';
-  @Input() customClasses = ''
-  @Input() maxWidth: string | undefined;
-
-  public get getClasses(): string {
-    return `${ContentWrapperTypeEnum[this.type]} ${this.customClasses}`;
-  }
-}

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

@@ -1,6 +0,0 @@
-export enum ContentWrapperTypeEnum {
-  'default' = 'type-default',
-  'colored' = 'type-colored',
-}
-
-export type ContentWrapperType = 'default' | 'colored';

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

@@ -1,13 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ContentWrapperComponent } from './content-wrapper.component';
-
-
-
-@NgModule({
-  declarations: [ContentWrapperComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [ContentWrapperComponent]
-})
-export class ContentWrapperModule { }

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

@@ -1,6 +0,0 @@
-<div class="mrx-controls-wrapper__controls--item" *ngIf="!separator; else separatorTemplate">
-  <ng-content></ng-content>
-</div>
-<ng-template #separatorTemplate>
-  <div class="mrx-controls-wrapper__controls--separator"></div>
-</ng-template>

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

@@ -1,39 +0,0 @@
-.mrx-controls-wrapper__controls--item {
-  height: 24px;
-  min-width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  background-color: #FFFFFF;
-
-  &:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  &:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-
-  &:hover {
-    background-color: #EEF0F4;
-  }
-}
-
-.mrx-controls-wrapper__controls--separator {
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:after {
-    content: '';
-    display: block;
-    height: 16px;
-    width: 1px;
-    background-color: #BFC5CC;
-    border-radius: 4px;
-  }
-}