myrta-ui 17.0.20 → 17.0.22

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

@@ -1,374 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  forwardRef,
-  ChangeDetectionStrategy,
-  ViewChild, ElementRef
-} from '@angular/core';
-import { getAsYouType, getExample, ParsedPhoneNumber } from 'awesome-phonenumber';
-import { CountryISO } from './data/country-iso.enum';
-import { SearchCountryField } from './data/search-country-field.enum';
-import { PhoneNumberFormatType } from './data/phone-number-format.enum';
-import { Country, InputValue } from './models/country.model';
-import { countryData } from './data/all-countries';
-import { dropdownOpen, dropdownClose, flagPlaceholder } from './assets/base64';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { v4 as uuidv4 } from 'uuid';
-import { Field } from '../../../services';
-import { InputTelSizesEnum, InputTelSizesTypes } from './enums/input-phone.enum';
-import { InputPhoneValueWithId } from '../input-phone/enums/input-phone.enum';
-import { DropdownComponent } from '../../dropdown/dropdown.component';
-
-@Component({
-  selector: 'mrx-input-tel',
-  templateUrl: './input-tel.component.html',
-  styleUrls: ['./input-tel.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputTelComponent),
-      multi: true,
-    },
-  ]
-})
-export class InputTelComponent implements ControlValueAccessor, OnInit {
-
-  // SAVE STATE
-  public uuid: string = uuidv4();
-  @Input() public fields: Field[] = [];
-
-  @Input() cssClass: string = '';
-  @Input() preferredCountries: (CountryISO)[] = [];
-  @Input() onlyCountries: (CountryISO)[] = [];
-  @Input() enableAutoCountrySelect: boolean = true;
-  @Input() enablePlaceholder: boolean = true;
-  @Input() customPlaceholder: string | null = null;
-  @Input() numberFormat: PhoneNumberFormatType = 'international';
-  @Input() searchCountryFlag: boolean = false;
-  @Input() searchCountryField: SearchCountryField = SearchCountryField.All;
-  @Input() searchCountryPlaceholder: string = 'Поиск по странам';
-  @Input() maxLength: number | null = null;
-  @Input() selectFirstCountry: boolean = true;
-  @Input() phoneValidation: boolean = true;
-  @Input() inputId: string = 'phone';
-  @Input() selectedCountryISO: CountryISO | null = null;
-  @Input() separateDialCode: boolean = false;
-  @Input() customClasses = '';
-  @Input() disabled = false;
-  @Input() size: InputTelSizesTypes = 'large';
-  @Input() autoDealCode = false;
-  @Input() autoCloseDropdown = false;
-
-  // VALIDATION
-  @Input() public invalid = false;
-  @Input() public invalidMessage: string | string[] = '';
-  @Input() public invalidPhoneMessage: string = 'Некорректное значение';
-  @Input() public checkInvalid: true | false | null = null;
-
-  @ViewChild('dropdownComponent') dropdownComponent!: DropdownComponent;
-
-  @Output() changed: EventEmitter<InputValue> = new EventEmitter<InputValue>();
-  @Output() public modelChange: EventEmitter<InputPhoneValueWithId> = new EventEmitter<InputPhoneValueWithId>();
-
-  public allCountries: (Country)[];
-  public selectedCountry: Country;
-  public countriesToShow: (Country)[];
-  public preferredCountriesList: (Country)[];
-  public searchFilter: string;
-  public scrollTimeout: any;
-  public phoneNumber: any;
-  public isFocused: boolean;
-  public isInputValid: boolean;
-  public isDropdownOpen: boolean = false;
-  public parsedPhoneNumber?: ParsedPhoneNumber;
-  public innerInvalid: boolean = false;
-  public innerInvalidMessage: string = ''
-
-  constructor() {
-    this.allCountries = [];
-    this.countriesToShow = this.allCountries;
-    this.selectedCountry = this.getDefaultCountry();
-    this.preferredCountriesList = [];
-    this.searchFilter = '';
-    this.phoneNumber = null;
-    this.isFocused = false;
-    this.isInputValid = true;
-  }
-
-  writeValue(outsideValue: string): void {
-    if (outsideValue) {
-      this.phoneNumber = outsideValue;
-      this.formatPhoneNumber();
-    }
-  }
-
-  private onChange = (value: any) => {
-  };
-  private onTouched = () => {
-  };
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  ngOnInit(): void {
-    this.generateCountryData();
-    this.setCountriesToShow();
-    this.setPreferredCountries();
-    this.setDefaultSelectedCountry();
-  }
-
-  private _validation(parsedNumber: ParsedPhoneNumber): boolean {
-    if (!this.selectedCountry) return false
-    const selectedCountry = this.findCountryByIso2(this.selectedCountry.iso2);
-
-    if (parsedNumber.number?.international || parsedNumber.number?.national) {
-      if (parsedNumber.number.international) {
-        const phone = parsedNumber.number.international.trim()
-        const a = phone.startsWith('+') ? phone.substring(1).trim() : phone;
-        const b = a.startsWith(selectedCountry.dialCode) ? a.substring(selectedCountry.dialCode.length).trim() : a;
-
-        return Boolean(selectedCountry?.areaCodes?.filter((code: string) =>  b.startsWith(code)).length);
-      } else if (parsedNumber.number.national) {
-        return false;
-      } else {
-        return false;
-      }
-    } else {
-      return false;
-    }
-  }
-
-  public get getClasses(): string {
-    return `${InputTelSizesEnum[this.size]} ${this.customClasses} ${this.checkValidClasses}`;
-  }
-
-  public get isValid(): boolean {
-    return true;
-  }
-
-  public get isInvalidMessage(): boolean {
-    return !!this.invalidMessage || !!this.invalidMessage?.length;
-  }
-
-  public get checkValidClasses(): string {
-    return this.checkInvalid === false ?
-      'mrx-input-checked-success' :
-      this.checkInvalid === true ? 'mrx-input-checked-error' : '';
-  }
-
-
-  public toggleDropdown() {
-    this.isDropdownOpen = !this.isDropdownOpen;
-    this.dropdownComponent.hide()
-  }
-
-  public generateCountryData() {
-    this.allCountries = countryData.map(con => {
-      return {
-        name: con[0].toString(),
-        iso2: con[1].toString(),
-        dialCode: con[2].toString(),
-        priority: +con[3] || 0,
-        areaCodes: (con[4] as string[]) || undefined,
-        htmlId: `${this.uuid}-${con[1].toString()}`,
-        flagClass: `flag__${con[1].toString()}`,
-        placeHolder: '',
-      };
-    });
-    this.countriesToShow = this.allCountries;
-  }
-
-  public getDefaultCountry(): Country {
-    return {
-      'name': '',
-      'iso2': '',
-      'dialCode': '',
-      'priority': 0,
-      'htmlId': '',
-      'flagClass': flagPlaceholder,
-      'placeHolder': '',
-    };
-  }
-
-  private formatIntelNumber(number: string): string {
-    if (this.autoDealCode) {
-      return number
-    } else {
-      const indexToSplit = number.indexOf(' ') + 1;
-      return this.separateDialCode ? number.substring(indexToSplit) : number;
-    }
-  }
-
-  public formatPhoneNumber() {
-    const ayt = getAsYouType(this.selectedCountry?.iso2.toUpperCase());
-    ayt.reset(this.phoneNumber);
-    const res: ParsedPhoneNumber = ayt.getPhoneNumber();
-
-    this.parsedPhoneNumber = res
-
-    if (this.numberFormat === 'international') {
-      this.phoneNumber = res.number?.international ? this.formatIntelNumber(res.number.international) : this.phoneNumber;
-    } else {
-      this.phoneNumber = res.number?.national ? res.number.national : this.phoneNumber;
-    }
-
-    if (this.numberFormat === 'international') {
-      if (this.enableAutoCountrySelect && res.regionCode != this.selectedCountry?.iso2.toUpperCase()) {
-        res.regionCode && (this.selectedCountry = this.findCountryByIso2(res.regionCode));
-      }
-    } else {
-      if (this.enableAutoCountrySelect && res.regionCode != this.selectedCountry?.iso2.toUpperCase()) {
-
-      }
-    }
-
-    if (!res.valid || res.regionCode != this.selectedCountry?.iso2.toUpperCase()) {
-      this.isInputValid = this._validation(res);
-    } else {
-      this.isInputValid = true;
-    }
-  }
-
-  public searchFilterChanged(event: any) {
-    if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
-
-    let filtered: Country[];
-    if (this.searchCountryField == 'name') {
-      filtered = this.countriesToShow.filter(con => con.name.toLowerCase().startsWith(this.searchFilter.toLowerCase()));
-    } else if (this.searchCountryField == 'iso2') {
-      filtered = this.countriesToShow.filter(con => con.iso2.startsWith(this.searchFilter.toLowerCase()));
-    } else if (this.searchCountryField == 'dialCode') {
-      filtered = this.countriesToShow.filter(con => con.dialCode.startsWith(this.searchFilter));
-    } else {
-      filtered = this.countriesToShow.filter(con => con.name.toLowerCase().startsWith(this.searchFilter.toLowerCase()) || con.dialCode.startsWith(this.searchFilter) || con.iso2.startsWith(this.searchFilter.toLowerCase()));
-    }
-
-    if (!filtered.length) return;
-    this.scrollTimeout = setTimeout(() => {
-      const el: any = document.getElementById(filtered[0].htmlId);
-      el.scrollIntoView();
-    }, 1);
-  }
-
-  private findCountryByIso2(iso2: string): Country | any {
-    return this.countriesToShow.find(con => con.iso2 == iso2.toLowerCase());
-  }
-
-  public setDefaultSelectedCountry() {
-    if (this.selectedCountryISO) {
-      this.selectedCountry = this.findCountryByIso2(this.selectedCountryISO);
-    } else if (this.selectFirstCountry) {
-      if (this.preferredCountriesList.length) this.selectedCountry = this.preferredCountriesList[0];
-      else this.selectedCountry = this.countriesToShow[0];
-    } else this.selectedCountry = this.getDefaultCountry();
-
-    this.selectedCountry.placeHolder = this.getPlaceHolder();
-  }
-
-  public setCountriesToShow() {
-    if (this.onlyCountries.length == 0) return;
-
-    const temp: any = [];
-    for (let country of this.onlyCountries) {
-      temp.push(this.allCountries.find(con => con.iso2 == country));
-    }
-
-    this.countriesToShow = temp;
-  }
-
-  public setPreferredCountries() {
-    for (let country of this.preferredCountries) {
-      const temp = this.countriesToShow.find(con => con.iso2 == country);
-      if (temp) this.preferredCountriesList.push(temp);
-    }
-  }
-
-  public onCountrySelect(country: any) {
-    if (this.disabled) return
-
-    this.selectedCountry = country;
-    this.selectedCountry.placeHolder = this.getPlaceHolder();
-    this.searchFilter = '';
-    this.phoneNumber = '';
-    this.isInputValid = true;
-    this.isFocused = false;
-
-    if (this.autoCloseDropdown) {
-      this.toggleDropdown();
-    }
-
-    this.updateValue()
-  }
-
-  private getNumberExample(): string {
-    const formatExampleNumber = (number: string): string => {
-      return number.replace(/\d/g, '9')
-    };
-
-    const exampleNumber = this.numberFormat === 'international' ?
-      this.formatIntelNumber(getExample(this.selectedCountry.iso2.toUpperCase(), 'mobile').number?.international || '') :
-      this.formatIntelNumber(getExample(this.selectedCountry.iso2.toUpperCase(), 'mobile').number?.national || '');
-
-    return formatExampleNumber(exampleNumber);
-  }
-
-  public getPlaceHolder(): string {
-    if (!this.enablePlaceholder) return '';
-    if (this.customPlaceholder) return this.customPlaceholder;
-    if (this.selectedCountry.iso2 == '') return '';
-
-    return this.getNumberExample();
-  }
-
-  public getDropdownIconPath(): string {
-    return this.isDropdownOpen ? dropdownClose : dropdownOpen;
-  }
-
-  public onPhoneInputFocus() {
-    if (!this.autoDealCode) return;
-    if (this.isFocused || (this.separateDialCode && this.numberFormat === 'international') || this.numberFormat === 'national' || this.phoneNumber) return;
-    this.phoneNumber = '+' + this.selectedCountry.dialCode + ' ';
-    this.isFocused = true;
-  }
-
-  public onPhoneInputBlur() {
-    if (!this.isInputValid && this.phoneNumber !== '') {
-      this.innerInvalid = true
-      this.innerInvalidMessage = this.invalidPhoneMessage
-    }
-  }
-
-  private _resetValidate() {
-    this.innerInvalid = false
-    this.innerInvalidMessage = ''
-  }
-
-  public updateValue() {
-    this._resetValidate()
-    this.formatPhoneNumber();
-
-    const outsideValue = {
-      phoneNumber: this.phoneNumber,
-      unFormattedNumber: this.phoneNumber.replace(/[\s-()]/g, ''),
-      selectedCountry: this.selectedCountry?.name || '',
-      iso2Code: this.selectedCountry?.iso2 || '',
-      dialCode: this.selectedCountry?.dialCode || '',
-      numberFormat: this.numberFormat,
-      isNumberValid: this.isInputValid,
-    };
-
-    this.changed.emit(outsideValue);
-    this.modelChange.emit({value: outsideValue, id: this.uuid})
-    this.onChange(outsideValue);
-    this.onTouched();
-  }
-}

package/src/lib/components/form/input-tel/input-tel.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { InputTelComponent } from './input-tel.component';
-import { FormsModule } from '@angular/forms';
-import { MaskedInputTelDirective } from './directives/input-tel.directive';
-import { DropdownModule } from '../../dropdown/dropdown.module';
-import { ErrorMessageModule } from '../../error-message/error-message.module';
-import { SaveStateModule } from '../../save-state/save-state.module';
-
-@NgModule({
-  declarations: [
-    InputTelComponent,
-    MaskedInputTelDirective
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    DropdownModule,
-    ErrorMessageModule,
-    SaveStateModule,
-  ],
-  exports: [
-    InputTelComponent
-  ]
-})
-export class InputTelModule { }

package/src/lib/components/form/input-tel/models/country.model.ts

@@ -1,19 +0,0 @@
-export interface Country {
-  name: string;
-  iso2: string;
-  dialCode: string;
-  priority: number;
-  areaCodes?: string[];
-  htmlId: string;
-  flagClass: string;
-  placeHolder: string;
-}
-
-export interface InputValue {
-  phoneNumber: string,
-  selectedCountry: string,
-  iso2Code: string,
-  dialCode: string,
-  numberFormat: string,
-  isNumberValid: boolean,
-}

package/src/lib/components/form/input-text/assets/input-text-disabled.less

@@ -1,17 +0,0 @@
-.mrx-input-text.mrx-input-text {
-  &.-disabled {
-    input {
-      background-color: var(--neutral-bg-disabled, #EEF0F4);
-      -webkit-text-fill-color: var(--neutral-text-tertiary, #71767E);
-      color: var(--neutral-text-tertiary, #71767E);
-    }
-  }
-
-  &.-readonly {
-    input {
-      background-color: var(--neutral-bg-disabled, #EEF0F4);
-      -webkit-text-fill-color: var(--neutral-text-primary, #262626);
-      color: var(--neutral-text-primary, #262626);
-    }
-  }
-}

package/src/lib/components/form/input-text/assets/input-text-error.less

@@ -1,33 +0,0 @@
-.mrx-input-text.mrx-input-text {
-  &.mrx-input-error {
-    input {
-      border-color: var(--system-bg-controls-negative-default);
-
-      &:hover {
-        border: var(--border-width-default) solid var(--system-bg-controls-negative-default);
-      }
-    }
-  }
-
-  &.mrx-input-checked-error {
-    input {
-      border-color: var(--system-bg-controls-negative-default);
-      background-color: var(--system-bg-negative-secondary);
-
-      &:hover {
-        border: var(--border-width-default) solid var(--system-bg-controls-negative-default);
-      }
-    }
-  }
-
-  &.mrx-input-checked-success {
-    input {
-      background-color: var(--system-bg-positive-secondary);
-      border-color: var(--system-bg-controls-positive-default);
-
-      &:hover {
-        border: var(--border-width-default) solid var(--system-bg-controls-positive-default);
-      }
-    }
-  }
-}

package/src/lib/components/form/input-text/assets/input-text-icon.less

@@ -1,25 +0,0 @@
-.mrx-input-text.mrx-input-text.mrx-input-text-with-icon {
-  &.mrx-input-text-lg {
-    .mrx-input-text-icon {
-      position: absolute;
-      top: calc(var(--spacing-3) - 1px);
-      left: calc(var(--spacing-3) - 1px);
-    }
-  }
-
-  &.mrx-input-text-md {
-    .mrx-input-text-icon {
-      position: absolute;
-      top: calc(var(--spacing-2) - 1px);
-      left: calc(var(--spacing-2) - 1px);
-    }
-  }
-
-  &.mrx-input-text-sm {
-    .mrx-input-text-icon {
-      position: absolute;
-      top: calc(var(--spacing-2) - 1px);
-      left: calc(var(--spacing-2) - 1px);
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-.mrx-input-text.mrx-input-text {
-  &.mrx-input-text-lg {
-    input {
-      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);
-    }
-
-    &:not(.mrx-input-text-with-icon) {
-      input {
-        padding: calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);
-      }
-    }
-    &.mrx-input-text-with-icon {
-      input {
-        padding: calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10);
-      }
-    }
-  }
-
-  &.mrx-input-text-md {
-    input {
-      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);
-    }
-
-    &:not(.mrx-input-text-with-icon) {
-      input {
-        padding: calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);
-      }
-    }
-    &.mrx-input-text-with-icon {
-      input {
-        padding: calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10);
-      }
-    }
-  }
-
-  &.mrx-input-text-sm {
-    input {
-      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);
-    }
-
-    &:not(.mrx-input-text-with-icon) {
-      input {
-        padding: calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4);
-      }
-    }
-    &.mrx-input-text-with-icon {
-      input {
-        padding: calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8);
-      }
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-.mrx-input-text.mrx-input-text {
-  width: 100%;
-  position: relative;
-
-  .mrx-input-text__wrapper {
-    position: relative;
-  }
-
-  input {
-    box-sizing: border-box;
-    border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
-    border-radius: var(--border-radius-1);
-    width: 100%;
-    outline: none;
-    transition: outline-width 0.2s, border 0.2s;
-
-    &:focus, &:active {
-      outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
-    }
-
-    &:hover {
-      border: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
-    }
-  }
-}

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

@@ -1,46 +0,0 @@
-<div
-  class="mrx-input-text"
-  [class]="getClasses"
-  [class.mrx-input-error]="invalid"
-  [class.mrx-input-text-with-icon]="icon"
-  [class.-disabled]="disabled"
-  [class.-readonly]="readonly"
-  [mrxCdkTooltip]="getTooltipValue"
-  [tooltipPosition]="'top-start'"
->
-  <div class="mrx-input-text__wrapper">
-    <span *ngIf="icon" class="mrx-icon mrx-input-text-icon" [class]="getIconClass"></span>
-
-    <input
-      autocomplete="nope"
-      #inputElement
-      [type]="'text'"
-      [ngModel]="value"
-      (ngModelChange)="updateValue($event)"
-      (blur)="updateSelection($event)"
-      [attr.title]="placeholder || ''"
-      [disabled]="disabled"
-      [readOnly]="readonly"
-      [attr.minlength]="minlength > 0 ? minlength : null"
-      [attr.maxlength]="maxlength > 0 ? maxlength : null"
-      [attr.placeholder]="!disabled && placeholder ? placeholder : ''"
-      [mask]="mask"
-      [prefix]="maskPrefix"
-      [showMaskTyped]="showMaskTyped"
-      [dropSpecialCharacters]="maskDropSpecialCharacters"
-    />
-
-    <mrx-chars-left
-      *ngIf="!disabled && maxlength"
-      [value]="value"
-      [maxlength]="maxlength">
-    </mrx-chars-left>
-  </div>
-
-  <mrx-error-message
-    *ngIf="(!isValid || invalid) && isInvalidMessage"
-    [invalidMessage]="invalidMessage"
-  ></mrx-error-message>
-
-  <mrx-save-state [id]="uuid" [fields]="fields"></mrx-save-state>
-</div>

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

@@ -1,5 +0,0 @@
-@import "assets/input-text";
-@import "assets/input-text-sizes";
-@import "assets/input-text-error";
-@import "assets/input-text-icon";
-@import "assets/input-text-disabled";