myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/form/radio/radio.module.ts

@@ -1,14 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RadioComponent } from './radio.component';
-import { FormsModule } from '@angular/forms';
-
-
-
-@NgModule({
-  declarations: [RadioComponent],
-  imports: [CommonModule, FormsModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [RadioComponent]
-})
-export class RadioModule { }

package/src/lib/components/form/radio-group/components/radio-group-header/radio-group-header.component.html

@@ -1,14 +0,0 @@
-<mrx-label
-  *ngIf="labelText"
-  [tooltip]="tooltip"
-  [required]="required"
->{{ labelText }}</mrx-label>
-
-<div class="mrx-radio-group-head--search mb-12px" *ngIf="searchable">
-  <mrx-input-search
-    [ngModel]="searchValue"
-    [size]="searchSize"
-    [placeholder]="searchPlaceholder"
-    (ngModelChange)="changeSearchValue($event)"
-  ></mrx-input-search>
-</div>

package/src/lib/components/form/radio-group/components/radio-group-header/radio-group-header.component.ts

@@ -1,32 +0,0 @@
-import { InputSearchSizesTypes } from './../../../input-search/input-search.enum';
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { RadioGroupSearchValue } from '../../models/radio-group.model';
-
-@Component({
-  selector: 'mrx-radio-group-header',
-  templateUrl: './radio-group-header.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class RadioGroupHeaderComponent {
-  public searchValue = ''
-
-  @Input() searchSize: InputSearchSizesTypes = 'medium';
-
-  @Input() searchable = false
-  @Input() searchPlaceholder = ''
-
-  // LABEL
-  @Input() tooltip = ''
-  @Input() labelText = ''
-  @Input() linkText = ''
-  @Input() checkedItemsCount = 0
-  @Input() required = false;
-
-  @Output() public updateradioGroupSearchValue: EventEmitter<string> = new EventEmitter<string>();
-
-  constructor() { }
-
-  public changeSearchValue(searchValue: RadioGroupSearchValue): void {
-    this.updateradioGroupSearchValue.emit(searchValue)
-  }
-}

package/src/lib/components/form/radio-group/components/radio-group-item/radio-group-item.component.html

@@ -1,51 +0,0 @@
-<div class="mrx-radio-group__item" [class.mrx-radio-group__item--buttom-ident]="!isLast">
-  <div class="mrx-radio-group__item--array" *ngIf="item.array.length && level < 10; else singleradioTemplate">
-    <div class="mrx-radio-group__item--array-head mb-12px">
-
-      <mrx-radio
-          [ngModel]="selectedValue?.id"
-          [value]="item.id"
-          [name]="name"
-          [boldLabel]="bold"
-          [invalid]="invalid"
-          (ngModelChange)="radioChangeModel($event, item)"
-      >{{ item.text }}</mrx-radio>
-    </div>
-
-    <div class="mrx-radio-group__item--array-list">
-      <ng-container>
-        <mrx-radio-group-item
-            *ngFor="let child of item.array; trackBy: trackByFn"
-            [level]="level + 1"
-            [selectedValue]="selectedValue"
-            [item]="child"
-            [invalid]="invalid"
-            [bold]="bold"
-            [name]="name"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [animationTrigger]="animationTrigger"
-            (radioChanged)="radioChanged.emit($event)"
-        ></mrx-radio-group-item>
-      </ng-container>
-    </div>
-  </div>
-
-  <ng-template #singleradioTemplate>
-    <div class="mrx-radio-group__item--single">
-      <mrx-radio
-          [ngModel]="selectedValue?.id"
-          [name]="name"
-          [boldLabel]="bold"
-          [type]="'default'"
-          [value]="item.id"
-          [invalid]="invalid"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (ngModelChange)="radioChangeModel($event, item)"
-      >{{ item.text }}</mrx-radio>
-    </div>
-  </ng-template>
-</div>
-
-

package/src/lib/components/form/radio-group/components/radio-group-item/radio-group-item.component.less

@@ -1,17 +0,0 @@
-.mrx-radio-group__item {
-  &--array {
-    &-head {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-    }
-
-    &-list {
-      padding-left: 20px;
-    }
-  }
-
-  &--buttom-ident {
-    margin-bottom: 12px;
-  }
-}

package/src/lib/components/form/radio-group/components/radio-group-item/radio-group-item.component.ts

@@ -1,55 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
-import { RadioGroupItem, RadioIndeterminateState } from '../../models/radio-group.model';
-
-@Component({
-  selector: 'mrx-radio-group-item',
-  templateUrl: './radio-group-item.component.html',
-  styleUrls: ['./radio-group-item.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class RadioGroupItemComponent {
-
-  @Input() public invalid = false;
-  @Input() name: string = '';
-  @Input() selectedValue: RadioGroupItem | null = null;
-  @Input() item!: RadioGroupItem
-  @Input() displaced = false
-  @Input() level = 0
-  @Input() public bold = false;
-  @Input() animationTrigger: boolean | null = null
-  @Input() isLast!: boolean
-  @Input() public disabled = false;
-  @Input() public readonly = false;
-
-  @Output() public animationEnd: EventEmitter<null> = new EventEmitter<null>();
-  @Output() public radioChanged: EventEmitter<{ value: RadioIndeterminateState, item: RadioGroupItem }> =
-    new EventEmitter<{ value: RadioIndeterminateState, item: RadioGroupItem }>();
-
-  constructor(private detector: ChangeDetectorRef) {
-  }
-
-  public get isIndeterminate(): boolean {
-    return this.item.id === null
-  }
-
-  public trackByFn(index: number, item: RadioGroupItem) {
-    return item.id;
-  }
-
-  public radioChangeModel(value: RadioIndeterminateState, item: RadioGroupItem): void {
-    if (this.isIndeterminate) {
-      this.radioChanged.emit({ value: false, item })
-    } else {
-      this.radioChanged.emit({ value: value, item })
-    }
-
-    this.detector.detectChanges()
-  }
-}

package/src/lib/components/form/radio-group/helpers/filter-search-group.ts

@@ -1,29 +0,0 @@
-import { RadioGroupItem, RadioGroupSearchValue } from '../models/radio-group.model';
-
-export const filterSearchGroup = (list: RadioGroupItem[], searchValue: RadioGroupSearchValue) => {
-  if (!list) return list
-
-  const getIntersectionsFromString = (array: RadioGroupItem[]) => {
-    const searchArray: RadioGroupItem[] = []
-
-    array.forEach((item: RadioGroupItem) => {
-      if (item.text.toLowerCase().includes(searchValue.toLowerCase())) {
-        if (item.array) {
-          const newArray: RadioGroupItem[] = getIntersectionsFromString(item.array)
-          searchArray.push({...item, array: newArray})
-        } else {
-          searchArray.push(item)
-        }
-      } else {
-        if (item.array) {
-          const newArray: RadioGroupItem[] = getIntersectionsFromString(item.array)
-          newArray.length && searchArray.push({...item, array: newArray})
-        }
-      }
-    })
-
-    return searchArray
-  }
-
-  return getIntersectionsFromString(list)
-}

package/src/lib/components/form/radio-group/helpers/get-item-by-id.ts

@@ -1,11 +0,0 @@
-import { RadioGroupItem } from '../models/radio-group.model';
-
-export const getItemById = (list: RadioGroupItem[], itemId: string | number) => {
-  const findById = (acc: RadioGroupItem | null, el: RadioGroupItem | null): RadioGroupItem | null => {
-    if ( el?.id === itemId ) return el;
-    if ( el?.array ) return el.array.reduce(findById, acc);
-    return acc;
-  }
-
-  return list.reduce(findById, null);
-}

package/src/lib/components/form/radio-group/helpers/move-selected-to-first.ts

@@ -1,33 +0,0 @@
-import { RadioGroupItem } from '../models/radio-group.model';
-
-export const moveSelectedToFirst = (
-  list: RadioGroupItem[],
-  sortable: boolean,
-  targetItem: RadioGroupItem | null
-) => {
-  if (!list || !sortable || !targetItem) return list;
-
-  const sortArray = (
-    array: RadioGroupItem[]
-  ): { sortedArr: RadioGroupItem[]; hasTargetElement: boolean } => {
-    for (let i = 0; i < array.length; i++) {
-      const item = array[i];
-      if (item.id === targetItem.id) {
-        const sortedArr = [item, ...array.filter((x) => x.id !== item.id)];
-        return { hasTargetElement: true, sortedArr };
-      } else if (item.array?.length) {
-        {
-          const { sortedArr: newArr, hasTargetElement } = sortArray(item.array);
-          if (hasTargetElement) {
-            item.array = newArr;
-            const sortedArr = [item, ...array.filter((x) => x.id !== item.id)];
-            return { hasTargetElement, sortedArr };
-          }
-        }
-      }
-    }
-    return { hasTargetElement: false, sortedArr: array };
-  };
-  const { sortedArr } = sortArray(list);
-  return sortedArr;
-};

package/src/lib/components/form/radio-group/models/radio-group.model.ts

@@ -1,15 +0,0 @@
-export interface RadioGroupItem {
-  id: string | number,
-  text: string,
-  parentId?: string | number | null,
-  array: RadioGroupItem[],
-}
-
-export type RadioIndeterminateState = boolean | null
-
-export type RadioGroupSearchValue = string
-
-export interface RadioGroupValueWithId {
-  value: RadioGroupItem | null
-  id: string
-}

package/src/lib/components/form/radio-group/radio-group.component.html

@@ -1,47 +0,0 @@
-<div class="mrx-radio-group" [class]="getClasses">
-    <mrx-save-state [id]="uuid" [fields]="fields" type="radioGroup"></mrx-save-state>
-
-    <mrx-radio-group-header
-      [searchable]="searchable"
-      [searchPlaceholder]="searchPlaceholder"
-      [tooltip]="tooltip"
-      [required]="required"
-      [searchSize]="searchSize"
-      [labelText]="labelText"
-      (updateradioGroupSearchValue)="updateRadioGroupSearchValue($event)"
-    ></mrx-radio-group-header>
-
-    <div
-        #groupItemsWrapper
-        *ngIf="filteredList?.length; else enableMessageTemplate"
-        class="mrx-radio-group-wrapper"
-        [class.mrx-radio-group-wrapper--scrollable]="scrollable"
-        [class.--active]="getShowScroll"
-        [style.max-height]="scrollable ? scrollMaxHeight + 'px' : 'auto'">
-      <mrx-radio-group-item
-          *ngFor="let item of filteredList; trackBy: trackByFn; let last = last"
-          [displaced]="displaced || false"
-          [item]="item"
-          [isLast]="last"
-          [selectedValue]="selectedValue"
-          [name]="name"
-          [bold]="bold"
-          [invalid]="invalid"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          [animationTrigger]="!!isSearchValue"
-          (animationEnd)="checkHeightGroupWrapper()"
-          (radioChanged)="radioChanged($event)"
-      ></mrx-radio-group-item>
-    </div>
-
-    <ng-template #enableMessageTemplate>
-      <p class="mrx-radio-group__empty-message py-12px">{{ enableMessage }}</p>
-    </ng-template>
-
-    <mrx-error-message
-      *ngIf="invalid && isInvalidMessage"
-      [invalidMessage]="invalidMessage"
-      [customClasses]="'mt-2'"
-    ></mrx-error-message>
-  </div>

package/src/lib/components/form/radio-group/radio-group.component.less

@@ -1,21 +0,0 @@
-.mrx-radio-group {
-  position: relative;
-
-  &-wrapper {
-    &--scrollable {
-      overflow-y: auto;
-      border-width: 1px 0 1px 0;
-      border-style: solid;
-      border-color: transparent;
-      padding-top: 0;
-      padding-bottom: 0;
-      transition: boder-color .2s, padding-top .2s, padding-bottom .2s;
-
-      &.--active {
-        padding-top: 12px;
-        padding-bottom: 12px;
-        border-color: var(--neutral-bg-divider);
-      }
-    }
-  }
-}

package/src/lib/components/form/radio-group/radio-group.component.ts

@@ -1,163 +0,0 @@
-import { InputSearchSizesTypes } from '../input-search/input-search.enum';
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  Injectable,
-  Input,
-  Output,
-  ViewChild
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RadioGroupItem, RadioGroupValueWithId } from './models/radio-group.model';
-import { cloneDeep } from 'lodash-es';
-import { moveSelectedToFirst } from './helpers/move-selected-to-first';
-import { filterSearchGroup } from './helpers/filter-search-group';
-import { getItemById } from './helpers/get-item-by-id';
-import { v4 as uuid } from 'uuid';
-import { Field } from '../../../services';
-
-@Injectable({
-  providedIn: RadioGroupComponent
-})
-@Component({
-  selector: 'mrx-radio-group',
-  templateUrl: './radio-group.component.html',
-  styleUrls: ['./radio-group.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RadioGroupComponent),
-      multi: true,
-    },
-  ],
-})
-export class RadioGroupComponent implements ControlValueAccessor {
-  private _isInit = false;
-  private _groupItemsWrapperHeight = 0;
-  private _searchValue = '';
-  private _list: RadioGroupItem[] = [];
-
-
-  public selectedValue: RadioGroupItem | null = null;
-  public filteredList: RadioGroupItem[] = [];
-
-  // SAVE STATE
-  public uuid: string = uuid();
-
-  @Input() public fields: Field[] = [];
-  @Input() searchSize: InputSearchSizesTypes = 'medium';
-  @Input() public name = '';
-  @Input() public scrollMaxHeight = 200;
-  @Input() public searchable = false;
-  @Input() public bold = false;
-  @Input() public scrollable = false;
-  @Input() public sortable = false;
-  @Input() public disabled = false;
-  @Input() public readonly = false;
-  @Input() public enableMessage = 'Ничего не найдено';
-  @Input() public searchPlaceholder = '';
-  @Input() public customClasses = '';
-  @Input() public required = false;
-  @Input() public invalid = false;
-  @Input() public invalidMessage: string | string[] = '';
-  @Input() public checkInvalid: true | false | null = null;
-
-  // TOOLTIP
-  @Input() tooltip = '';
-
-  // LABEL
-  @Input() labelText = '';
-
-  @Input() set items(value: RadioGroupItem[]) {
-    this._list = value
-    this.filteredList = value
-    this._detector.detectChanges()
-  }
-
-  get items(): RadioGroupItem[] {
-    return this.filteredList
-  }
-
-  @ViewChild('groupItemsWrapper') groupItemsWrapper!: ElementRef;
-
-  @Output() public changed: EventEmitter<RadioGroupItem | null> = new EventEmitter<RadioGroupItem | null>();
-  @Output() public modelChange: EventEmitter<RadioGroupValueWithId> = new EventEmitter<RadioGroupValueWithId>();
-  @Output() public modelCheckedChange: EventEmitter<RadioGroupItem | null> = new EventEmitter<RadioGroupItem | null>();
-  @Output() public modelItemChange: EventEmitter<RadioGroupItem | null> = new EventEmitter<RadioGroupItem | null>();
-
-  constructor(private _detector: ChangeDetectorRef) {
-  }
-
-  public get isSearchValue(): string {
-    return this._searchValue;
-  }
-
-  public get displaced(): boolean {
-    return this.items.some((item: RadioGroupItem) => item.array.length);
-  }
-
-  public get getClasses(): string {
-    return `${this.customClasses}`;
-  }
-
-  public get getShowScroll(): boolean {
-    return this._groupItemsWrapperHeight > this.scrollMaxHeight;
-  }
-
-  public trackByFn(index: number, item: RadioGroupItem) {
-    return item.id;
-  }
-
-  private onChange = (value: any) => {
-  };
-  private onTouched = () => {
-  };
-
-  public writeValue(selectedValue: RadioGroupItem): void {
-    this.selectedValue = selectedValue;
-    this._isInit = true;
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public updateValue(list: RadioGroupItem[], targetItem: RadioGroupItem | null): void {
-    this.changed.emit(targetItem);
-    this.modelChange.emit({value: targetItem, id: this.uuid});
-    this.modelCheckedChange.emit(targetItem);
-    this.onChange(targetItem);
-    this.onTouched();
-  }
-
-  public checkHeightGroupWrapper(): void {
-    this._groupItemsWrapperHeight = this.groupItemsWrapper.nativeElement.scrollHeight;
-  }
-
-  public updateRadioGroupSearchValue(searchValue: string): void {
-    this._searchValue = searchValue;
-    this.filteredList = filterSearchGroup(this._list, this._searchValue);
-  }
-
-  radioChanged({item}: { item: RadioGroupItem }) {
-    const cloneList: RadioGroupItem[] = cloneDeep(this.filteredList);
-    const targetItem: RadioGroupItem | null = getItemById(cloneList, item.id);
-    this.selectedValue = targetItem;
-    this.filteredList = moveSelectedToFirst(cloneList, this.sortable, targetItem);
-    this._list = this.filteredList
-    this.updateValue(this.filteredList, targetItem);
-    this.modelItemChange.emit(targetItem);
-  }
-
-  public get isInvalidMessage(): boolean {
-    return !!this.invalidMessage || !!this.invalidMessage?.length;
-  }
-}

package/src/lib/components/form/radio-group/radio-group.module.ts

@@ -1,30 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RadioGroupComponent } from './radio-group.component';
-import { FormsModule } from '@angular/forms';
-import { RadioModule } from '../radio/radio.module';
-import { RadioGroupItemComponent } from './components/radio-group-item/radio-group-item.component';
-import { RadioGroupHeaderComponent } from './components/radio-group-header/radio-group-header.component';
-import { ErrorMessageModule } from '../../error-message/error-message.module';
-import { LabelModule } from '../../label/label.module';
-import { InputSearchModule } from '../input-search/input-search.module';
-import { SaveStateModule } from '../../save-state/save-state.module';
-
-
-@NgModule({
-  declarations: [RadioGroupComponent, RadioGroupItemComponent, RadioGroupHeaderComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    RadioModule,
-    InputSearchModule,
-    LabelModule,
-    ErrorMessageModule,
-    SaveStateModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [RadioGroupComponent]
-})
-export class RadioGroupModule {
-}
-

package/src/lib/components/form/rating/assets/rating-disabled.less

@@ -1,5 +0,0 @@
-.mrx-rating {
-  .mrx-rating-item.disabled {
-
-  }
-}

package/src/lib/components/form/rating/assets/rating-item.less

@@ -1,44 +0,0 @@
-.mrx-rating {
-  &.edit-state {
-    .mrx-rating-item {
-      cursor: pointer;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  .mrx-rating-item {
-    display: flex;
-    align-items: center;
-    position: relative;
-    transition: transform .2s;
-
-    &-wrapper, &-double-wrapper {
-      display: flex;
-      align-items: center;
-
-      .mrx-icon {
-        color: var(--system-rating-default);
-
-        &.filled {
-          color: var(--system-rating-selected);
-          opacity: 1;
-        }
-      }
-    }
-
-    &-double-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 50%;
-      overflow: hidden;
-
-      .mrx-icon {
-        opacity: 0;
-      }
-    }
-  }
-}

package/src/lib/components/form/rating/assets/rating-size.less

@@ -1,24 +0,0 @@
-.mrx-rating {
-  &.mrx-rating-lg {
-    grid-gap: 8px;
-  }
-  &.mrx-rating-sm {
-    grid-gap: 4px;
-  }
-
-  &-value {
-    &-sm {
-      font-family: var(--body-sm-font-family);
-      font-weight: var(--body-sm-font-weight);
-      line-height: var(--body-sm-line-height);
-      font-size: var(--body-sm-font-size);
-    }
-
-    &-lg {
-      font-family: var(--body-md-font-family);
-      font-weight: var(--body-md-font-weight);
-      line-height: var(--body-md-line-height);
-      font-size: var(--body-md-font-size);
-    }
-  }
-}

package/src/lib/components/form/rating/assets/rating.less

@@ -1,17 +0,0 @@
-.mrx-rating {
-  display: inline-flex;
-
-  &-wrapper {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    &-sm {
-      grid-gap: var(--spacing-2);
-    }
-
-    &-lg {
-      grid-gap: var(--spacing-3);
-    }
-  }
-}