myrta-ui 17.0.20 → 17.0.22

package/src/lib/components/form/input-select/assets/input-select-sizes.less

@@ -1,135 +0,0 @@
-:host::ng-deep {
-  .mrx-input-select {
-    .ng-select {
-      &.mrx-input-select-lg {
-        &.ng-select-multiple {
-          &.ng-select-clearable {
-            .ng-has-value {
-              .ng-value-container {
-                max-width: calc(100% - 56px);
-              }
-            } 
-
-            &.mrx-input-loading {
-              .ng-select-container {
-                &.ng-has-value {
-                  .ng-value-container {
-                    max-width: calc(100% - 88px);
-                  }
-                }
-
-                .ng-value-container {
-                  max-width: calc(100% - 56px);
-                }
-              }
-            }
-          }
-
-          &.mrx-input-loading {
-            .ng-value-container {
-              max-width: calc(100% - 56px);
-            }
-          }
-
-          .ng-value-container {
-            max-width: calc(100% - var(--sizing-6));
-
-            .ng-value {
-              min-height: var(--sizing-8);
-            }
-          }
-        }
-
-        .ng-select-container {
-          min-height: var(--sizing-12) !important;
-
-          .ng-clear-wrapper,
-          .ng-arrow-wrapper {
-            width: var(--sizing-6) !important;
-            min-width: var(--sizing-6);
-            height: var(--sizing-6);
-            min-height: var(--sizing-6);
-          }
-        }
-      }
-  
-      &.mrx-input-select-md {
-        &.ng-select-multiple {
-          &.ng-select-clearable {
-            .ng-has-value {
-              .ng-value-container {
-                max-width: calc(100% - var(--sizing-10));
-              }
-            } 
-
-            &.mrx-input-loading {
-              .ng-select-container {
-                &.ng-has-value {
-                  .ng-value-container {
-                    max-width: calc(100% - 64px);
-                  }
-                }
-
-                .ng-value-container {
-                  max-width: calc(100% - var(--sizing-10));
-                }
-              }
-            }
-          }
-
-          &.mrx-input-loading {
-            .ng-value-container {
-              max-width: calc(100% - var(--sizing-10));
-            }
-          }
-
-          .ng-select-container{
-            .ng-value-container{
-              .ng-value{
-                .ng-value-label {
-                  font-size: var(--body-sm-font-size);
-                  line-height: var(--body-sm-line-height);
-                } 
-              }
-            } 
-          } 
-        }
-  
-        .ng-select-container {
-          min-height: var(--sizing-10) !important;
-  
-          .ng-value-container {
-            padding: 0 var(--spacing-2) 0 var(--spacing-2) !important;
-            min-height: var(--sizing-6);
-            max-width: calc(100% - var(--sizing-4));
-  
-            .ng-value {
-              margin-bottom: 0;
-              min-height: var(--sizing-6);             
-            }
-          }
-
-          .mrx-loader {
-            width: var(--sizing-4);
-            height: var(--sizing-4);
-          }
-  
-          .ng-clear-wrapper,
-          .ng-arrow-wrapper {
-            width: var(--sizing-4) !important;
-            min-width: var(--sizing-4);
-            height: var(--sizing-4);
-            min-height: var(--sizing-4);
-
-          .ng-clear,
-          .ng-arrow {
-            &:after {
-              font-size: var(--body-lg-font-size);
-            }
-          }
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/form/input-select/assets/input-select-types.less

@@ -1,85 +0,0 @@
-:host::ng-deep {
-  .mrx-input-select {
-    .ng-select {
-      &.ng-select-single {
-        .ng-select-container {
-          .ng-value-container {
-            .ng-value {
-              .ng-value-label {
-                text-overflow: ellipsis !important;
-                overflow: hidden;
-                max-width: 100% !important;
-                display: block;
-                white-space: nowrap;
-              }
-            }
-          }
-        }
-      }
-
-      &.ng-select-multiple {
-        .ng-select-container {
-          &.ng-has-value {
-            .ng-value-container {
-              gap: var(--spacing-2);
-              padding: 0 !important;
-              padding-right: var(--spacing-2) !important;
-            }
-          }
-
-          .ng-value-container {
-            .ng-value {
-              display: flex;
-              flex-direction: row;
-              width: 100%;
-              max-width: max-content;
-              margin: 0;
-              background: var(--brand-bg-secondary-default);
-              border-radius: var(--border-radius-1);
-              padding: 0;
-              padding-left: var(--spacing-2);
-              padding-right: var(--spacing-1);
-
-              &.ng-value-empty {
-                padding-right: var(--spacing-3);
-              }
-
-              .ng-value-label {
-                color: var(--neutral-text-primary);
-                padding-right: var(--spacing-1);
-                text-overflow: ellipsis !important;
-              }
-
-              .ng-value-icon {
-                position: relative;
-                min-width: var(--sizing-4);
-                min-height: var(--sizing-4);
-                order: 1;
-
-                &:after {
-                  content: "\e92b";
-                  position: absolute;
-                  left: 0;
-                  top: 0;
-                  width: 100%;
-                  height: 100%;
-                  font-family: "mrx-icon-font";  
-                  font-size: var(--body-lg-font-size);
-                  color: var(--neutral-icon-default); 
-                }
-              }
-            }
-
-            .ng-input {
-              &>input {
-                font-size: var(--body-md-font-size);
-                line-height: var(--body-md-line-height);
-                transform: none !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/form/input-select/assets/input-select.less

@@ -1,191 +0,0 @@
-:host::ng-deep {
-  .mrx-input-select {
-    position: relative;
-
-    .ng-select {
-      &.ng-select-disabled {
-        .ng-select-container {
-          background-color: var(--neutral-bg-disabled);
-
-          &:hover {
-            &:before {
-              border-color: var(--neutral-bg-stroke-default);
-            }
-          }
-
-          .ng-arrow-wrapper{
-            .ng-arrow{
-              &:after {
-                color: var(--neutral-icon-disabled); 
-              }
-            }
-          } 
-        }
-      }
-
-      .ng-select-container {
-        align-items: flex-start;
-        padding: var(--spacing-2);
-        padding-right: var(--spacing-3);
-        box-sizing: border-box;
-        border: none !important;
-        border-radius: var(--border-radius-1) !important;
-        width: 100%;
-        height: auto;
-        outline: none;
-        transition: outline-width 0.2s, border 0.2s;
-        z-index: 1;
-
-        &:before {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
-          border-radius: var(--border-radius-1);
-          transition: .2s;
-          z-index: -1;
-        }
-
-        &.ng-has-value {
-          .ng-placeholder {
-            display: none;
-          }
-        }
-
-        &:focus,
-        &:active {
-          outline: var(--neutral-bg-island-default) solid var(--border-width-focused) !important;
-        }
-
-        &:hover {
-          &:before {
-            border-color: var(--neutral-bg-stroke-hover);
-          }
-        }
-
-        .ng-value-container {
-          display: flex;
-          align-items: center;
-          position: relative;
-          padding: var(--spacing-1) var(--spacing-2) !important;
-          min-height: var(--sizing-8);
-
-          .ng-placeholder {
-            top: revert !important;
-            color: var(--neutral-text-tertiary);
-          }
-
-          .ng-value {
-            display: flex;
-            align-items: center;
-            white-space: nowrap;
-
-            .ng-value-label {
-              overflow: hidden;
-              font-size: var(--body-md-font-size);
-              line-height: var(--body-md-line-height);
-            }
-
-            .ng-value-icon {
-              color: transparent;
-            }
-          }
-
-          .ng-input {
-            display: flex;
-            align-items: center;
-            height: auto;
-            padding-left: var(--spacing-2) !important;
-            z-index: -1;
-
-            &>input {
-              position: relative;
-              z-index: -1;
-              padding: 0;
-              transform: none;
-              padding-right: var(--spacing-2);
-            }
-          }
-        }
-
-        .mrx-loader {
-          transform: translateY(4px);
-        }
-
-        .ng-arrow-wrapper,
-        .ng-clear-wrapper {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0;
-          transform: translateY(4px);
-
-          .ng-clear,
-          .ng-arrow {
-            font-size: 0;
-            position: relative;
-            width: 100% !important;
-            height: 100% !important;
-            background-image: none;
-            line-height: normal;
-            border-radius: var(--border-radius-1);
-
-            &:after {
-              content: '';
-              position: absolute;
-              left: 0;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              width: 100%;
-              height: 100%;
-              font-family: "mrx-icon-font";  
-              font-size: var(--body-extra-lg-font-size);
-              color: var(--neutral-icon-default); 
-            }
-          }
-
-          &:hover, &:focus{
-            .ng-clear,
-            .ng-arrow {
-              background-color: var(--brand-bg-tertiary-hover);
-            }
-          }
-        }
-
-        .ng-clear-wrapper {
-          margin-right: var(--spacing-2);
-
-          .ng-clear {
-            &:after {
-              content: "\e92b";              
-            }
-          }
-        }
-
-        .ng-arrow-wrapper {
-          .ng-arrow {
-            &:after {
-              content: "\e923";              
-            }
-          }
-        }
-      }
-
-      &.ng-select-opened {
-        .ng-select-container {
-          outline: var(--neutral-bg-island-default) solid var(--border-width-focused) !important;
-        }
-
-        .ng-arrow-wrapper{
-          .ng-arrow{
-            background-color: var(--brand-bg-tertiary-hover);            
-          }
-        } 
-      }
-    }
-  }
-}

package/src/lib/components/form/input-select/input-select.component.html

@@ -1,80 +0,0 @@
-<div class="mrx-input-select" [class.mrx-input-error]="invalid" [class]="wrapperCustomClasses">
-  <div [class.inputbox-error]="showEmptyFields && required && !isVerified"
-       [class.inputbox-success]="showEmptyFields && required && isVerified">
-
-    <ng-select
-      [items]="items"
-      [ngModel]="value"
-      [addTag]="addTag"
-      [bindValue]="bindValue"
-      [bindLabel]="bindLabel"
-      [multiple]="multiple"
-      [maxSelectedItems]="maxSelectedItems"
-      [groupBy]="groupBy ? groupBy : ''"
-      [placeholder]="placeholder"
-      [trackByFn]="trackByFn"
-      [virtualScroll]="virtualScroll"
-      [loading]="loading"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [clearable]="clearable"
-      [class]="getClasses"
-      [searchable]="searchable"
-      [closeOnSelect]="closeOnSelect"
-      [searchFn]="customSearchFn"
-      [notFoundText]="notFoundText"
-      [maxlength]="maxLength.toString() || 'none'"
-      clearAllText="Очистить"
-      addTagText="Добавить"
-      loadingText="Загрузка..."
-      (ngModelChange)="updateValue($event)"
-      (search)="updateSearch($event)"
-    >
-      <ng-template ng-label-tmp let-item="item" *ngIf="disabled && disabledFromDisplay">
-        {{ displayValue }}
-      </ng-template>
-      <ng-template ng-option-tmp let-item="item" let-clear="clear" *ngIf="selectOptionsTemplate">
-        <ng-container *ngTemplateOutlet="selectOptionsTemplate; context:{item: item, clear: clear}"></ng-container>
-      </ng-template>
-      <ng-template ng-label-tmp let-item="item" let-clear="clear" *ngIf="labelTemplate">
-        <ng-container *ngTemplateOutlet="labelTemplate; context:{item: item, clear: clear}"></ng-container>
-      </ng-template>
-      <ng-template ng-tag-tmp let-items="items" *ngIf="tagTemplate">
-        <ng-container *ngTemplateOutlet="tagTemplate; context:{items: items}"></ng-container>
-      </ng-template>
-      <ng-template ng-loadingtext-tmp>
-        <div class="ng-option disabled">{{ loadLabel || 'Загрузка' }}</div>
-      </ng-template>
-      <ng-template ng-multi-label-tmp let-items="items" let-clear="clear" *ngIf="multiLabelTemplate">
-        <ng-container *ngTemplateOutlet="multiLabelTemplate; context:{items: items, clear: clear}"></ng-container>
-      </ng-template>
-      <ng-template ng-multi-label-tmp let-items="items" let-clear="clear" *ngIf="multiCollapseCount">
-        <ng-container *ngIf="value.length < multiCollapseCount">
-          <div class="ng-value" *ngFor="let item of items">
-            <span class="ng-value-label">{{ item['label'] }}</span>
-            <span class="ng-value-icon right" (click)="clear(item)">×</span>
-          </div>
-        </ng-container>
-        <div *ngIf="value.length >= multiCollapseCount" class="ng-summary-list">
-          <div class="ng-value ng-value-empty">
-            <span class="ng-value-label">Выбрано: {{ value.length }}</span>
-          </div>
-        </div>
-      </ng-template>
-      <ng-template ng-loadingspinner-tmp>
-        <mrx-loader
-          [ngStyle]="{display: 'flex'}"
-          [color]="'brand'" size="small"
-          customClasses="align-self-center mr-2"
-        ></mrx-loader>
-      </ng-template>
-    </ng-select>
-  </div>
-
-  <mrx-error-message
-    *ngIf="invalid && isInvalidMessage"
-    [invalidMessage]="invalidMessage"
-  ></mrx-error-message>
-
-  <mrx-save-state [id]="uuid" [fields]="fields"></mrx-save-state>
-</div>

package/src/lib/components/form/input-select/input-select.component.less

@@ -1,6 +0,0 @@
-@import "assets/input-select";
-@import "assets/input-select-sizes";
-@import "assets/input-select-types";
-@import "assets/input-select-dropdown";
-@import "assets/input-select-error";
-@import "assets/input-select-checked";

package/src/lib/components/form/input-select/input-select.component.ts

@@ -1,180 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component, ContentChild, ElementRef,
-  EventEmitter,
-  forwardRef,
-  Input,
-  Output,
-  TemplateRef,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AddTagFn } from '@ng-select/ng-select/lib/ng-select.component';
-import { v4 as uuidv4 } from 'uuid';
-import {
-  InputSelectSizeEnum,
-  InputSelectSizeTypes,
-  InputSelectValueTypes,
-  InputSelectValueWithId
-} from './input-select.enum';
-import { Field } from '../../../services';
-
-@Component({
-  selector: 'mrx-input-select',
-  templateUrl: './input-select.component.html',
-  styleUrls: ['./input-select.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputSelectComponent),
-      multi: true,
-    },
-  ],
-})
-export class InputSelectComponent implements ControlValueAccessor
-{
-  public maxSelectedItems!: number;
-  public _value: InputSelectValueTypes = [];
-
-  // SAVE STATE
-  public uuid: string = uuidv4()
-  @Input() public fields: Field[] = [];
-
-  @Input() public size: InputSelectSizeTypes = 'large';
-
-  @Input() public selected!: object | any[];
-  @Input() public bindValue = '';
-  @Input() public bindLabel = '';
-  @Input() public customClasses = '';
-  @Input() public wrapperCustomClasses = '';
-  @Input() public multiple = false;
-  @Input() public loading = false;
-  @Input() public addTag: boolean | AddTagFn = false;
-  @Input() public clearable = true;
-  @Input() public items: any[] = [];
-  @Input() public groupBy: string | ((value: any) => any) = '';
-  @Input() public emptyValue: any;
-  @Input() public virtualScroll = false;
-  @Input() public trackByFn: any;
-  @Input() public displayValue!: string | string[];
-  @Input() public disabledFromDisplay!: boolean;
-  @Input() public maxLength = 0;
-  @Input() public customSearchFn?: (term: string, item: any) => boolean;
-
-  @Input() public isBottomLabel = false;
-  @Input() public search = false;
-  @Input() public required = false;
-  @Input() public disabled = false;
-  @Input() public readonly = false;
-  @Input() public showEmptyFields = false;
-  @Input() public placeholder = '';
-  @Input() public searchable = true;
-  @Input() public loadLabel = '';
-  @Input() public notFoundText = 'Не найдено';
-  @Input() public closeOnSelect = true;
-  @Input() public multiCollapseCount: number | null = null;
-
-  // ERROR
-  @Input() public invalid = false;
-  @Input() public invalidMessage: string | string[] = '';
-  @Input() public checkInvalid: true | false | null = null;
-
-  // LABEL
-  @Input() public label = '';
-  @Input() public labelRequiredHidden = false;
-  @Input() public labelExtraClass: object | string = '';
-
-  // TOOLTIP
-  @Input() public tooltip = '';
-  @Input() public tooltipHidden = false;
-  @Input() public tooltipVisible = false;
-
-  // REFS
-  @ContentChild('selectOptionsTemplate') selectOptionsTemplate!: TemplateRef<{item: any, clear: any}>;
-  @ContentChild('labelTemplate') labelTemplate!: TemplateRef<{item: any, clear: any}>;
-  @ContentChild('tagTemplate') tagTemplate!: TemplateRef<{items: any}>;
-  @ContentChild('multiLabelTemplate') multiLabelTemplate!: TemplateRef<{items: any, clear: any}>;
-
-  @Input('maxSelectedItems')
-  set setMaxSelectedItems(val: number) {
-    if (val) {
-      this.maxSelectedItems = val;
-    }
-  }
-  @Output() public changed: EventEmitter<InputSelectValueTypes> = new EventEmitter<InputSelectValueTypes>();
-  @Output() public modelChange: EventEmitter<InputSelectValueWithId> = new EventEmitter<InputSelectValueWithId>();
-  @Output() public searched: EventEmitter<{ term: string; items: any[] }> = new EventEmitter<{ term: string; items: any[] }>();
-
-  public get isValid(): boolean {
-    return true;
-  }
-
-  public get isVerified(): boolean {
-    return !(
-      this.value === null ||
-      this.value === undefined ||
-      this.value === this.emptyValue
-    );
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  set value(value: InputSelectValueTypes) {
-    this._value = value;
-  }
-
-  public get isInvalidMessage(): boolean {
-    return !!this.invalidMessage || !!this.invalidMessage?.length;
-  }
-
-  public get invalidMessageArray(): string[] {
-    if (typeof this.invalidMessage === 'string') {
-      return Array(this.invalidMessage);
-    } else {
-      return this.invalidMessage;
-    }
-  }
-
-  public get checkValidClasses(): string {
-    return this.checkInvalid === false ?
-      'mrx-input-checked-success' :
-      this.checkInvalid === true ? 'mrx-input-checked-error' : ''
-  }
-
-  public get getClasses(): string {
-    return `${this.customClasses} ${this.checkValidClasses} ${InputSelectSizeEnum[this.size]} ${this.checkLoading}`;
-  }
-
-  public get checkLoading(): string {
-    return this.loading ? 'mrx-input-loading' : '';
-  }
-
-  protected onChange(val: any): void {}
-  private onTouched = () => {};
-
-  public writeValue(value: any) {
-    this._value = value;
-  }
-
-  public registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any) {
-    this.onTouched = fn;
-  }
-
-  public updateValue(insideValue: InputSelectValueTypes): void {
-    this.value = insideValue;
-    this.changed.emit(insideValue);
-    this.modelChange.emit({value: insideValue, id: this.uuid})
-    this.onChange(insideValue);
-    this.onTouched();
-  }
-
-  public updateSearch(event: { term: string; items: any[] }): void {
-    this.searched.emit({ term: event.term, items: event.items})
-  }
-}

package/src/lib/components/form/input-select/input-select.enum.ts

@@ -1,13 +0,0 @@
-export enum InputSelectSizeEnum {
-  'medium' = 'mrx-input-select-md',
-  'large' = 'mrx-input-select-lg'
-}
-
-export type InputSelectSizeTypes = 'medium' | 'large';
-
-export type InputSelectValueTypes = string | string[];
-
-export interface InputSelectValueWithId {
-  value: InputSelectValueTypes,
-  id: string
-}