myrta-ui 17.0.19 → 17.0.20

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

@@ -0,0 +1,41 @@
+<div
+  class="mrx-input-password"
+  [class]="getClasses"
+  [class.mrx-input-error]="invalid">
+  <div class="mrx-input-password__wrapper">
+    <input
+      autocomplete="nope"
+      #inputElement
+      [type]="isShowPassword ? 'text' : 'password'"
+      [ngModel]="value"
+      (ngModelChange)="updateValue($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 : ''"
+    />
+
+    <div class="mrx-input-password__icons">
+      <span
+        class="mrx-icon"
+        [class]="isShowPassword ? 'icon-hide' : 'icon-view'"
+        [class.icon-font-16]="size === 'small' || size === 'medium'"
+        [class.icon-font-24]="size === 'large'"
+        (click)="toggleShow()"
+      ></span>
+    </div>
+
+    <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>
+</div>

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

@@ -0,0 +1,5 @@
+@import "assets/input-password";
+@import "assets/input-password-sizes";
+@import "assets/input-password-error";
+@import "assets/input-password-bullets";
+@import "assets/input-password-icons";

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

@@ -0,0 +1,106 @@
+import { Component, EventEmitter, forwardRef, HostListener, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  InputPasswordSizesEnum,
+  InputPasswordSizesTypes,
+  InputPasswordValueTypes
+} from './input-password.enum';
+
+@Component({
+  selector: 'mrx-input-password',
+  templateUrl: './input-password.component.html',
+  styleUrls: ['./input-password.component.less'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputPasswordComponent),
+      multi: true,
+    },
+  ],
+})
+export class InputPasswordComponent implements ControlValueAccessor {
+  public value: InputPasswordValueTypes = '';
+  public isShowPassword = false
+
+  @Input() public disabled = false;
+  @Input() public required = false;
+  @Input() public readonly = false;
+  @Input() public maxlength = 0;
+  @Input() public minlength = 0;
+  @Input() public placeholder = '';
+  @Input() public invalid = false;
+  @Input() public invalidMessage: string | string[] = '';
+  @Input() public checkInvalid: true | false | null = null;
+  @Input() public customClasses = '';
+  @Input() public size: InputPasswordSizesTypes = 'large';
+
+  @Output() public changed: EventEmitter<InputPasswordValueTypes> = new EventEmitter<InputPasswordValueTypes>();
+
+  constructor() { }
+
+  public get isInvalidMessage(): boolean {
+    return !!this.invalidMessage || !!this.invalidMessage?.length;
+  }
+
+  public get isValid(): boolean {
+    return this.baseValidate();
+  }
+
+  public get isVerified(): boolean {
+    return (
+      !this.required ||
+      (this.required && this.value != null && this.value !== '' && this.isValid)
+    );
+  }
+
+  public get readonlyClass(): string {
+    return this.readonly ? 'mrx-input__readonly' : '';
+  }
+
+  public get checkValidClasses(): string {
+    return this.checkInvalid === false ?
+      'mrx-input-checked-success' :
+      this.checkInvalid === true ? 'mrx-input-checked-error' : ''
+  }
+
+  public get getClasses(): string {
+    return `${InputPasswordSizesEnum[this.size]} ${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
+  }
+
+  protected baseValidate(): boolean {
+    if (this.minlength) {
+      return !!this.value && this.value.length >= this.minlength;
+    }
+    return true;
+  }
+
+  public toggleShow(): void {
+    this.isShowPassword = !this.isShowPassword
+  }
+
+  private onChange = (value: InputPasswordValueTypes) => {};
+  private onTouched = () => {};
+
+  public registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: () => {}): void {
+    this.onTouched = fn;
+  }
+
+  public writeValue(outsideValue: InputPasswordValueTypes) {
+    this.value = outsideValue;
+  }
+
+  public setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
+  public updateValue(insideValue: InputPasswordValueTypes) {
+    this.value = insideValue;
+    this.changed.emit(insideValue);
+    this.onChange(insideValue);
+    this.onTouched();
+  }
+}

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

@@ -0,0 +1,9 @@
+export enum InputPasswordSizesEnum {
+  'small' = 'mrx-input-password-sm',
+  'medium' = 'mrx-input-password-md',
+  'large' = 'mrx-input-password-lg',
+}
+
+export type InputPasswordSizesTypes = 'small' | 'medium' | 'large';
+
+export type InputPasswordValueTypes = string;

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputPasswordComponent } from './input-password.component';
+import { FormsModule } from '@angular/forms';
+import { CharsLeftModule } from '../../chars-left/chars-left.module';
+import { ErrorMessageModule } from '../../error-message/error-message.module';
+
+
+
+@NgModule({
+  declarations: [
+    InputPasswordComponent
+  ],
+  imports: [
+    FormsModule,
+    CharsLeftModule,
+    ErrorMessageModule,
+    CommonModule
+  ],
+  exports: [
+    InputPasswordComponent
+  ]
+})
+export class InputPasswordModule { }

package/src/lib/components/form/input-phone/assets/input-phone-country-flags.less

@@ -0,0 +1,271 @@
+.mrx-input-phone {
+  &__flag {
+    @set: {
+      ac: 20px;
+      ad: 20px;
+      ae: 20px;
+      af: 20px;
+      ag: 20px;
+      ai: 20px;
+      al: 20px;
+      am: 20px;
+      ao: 20px;
+      aq: 20px;
+      ar: 20px;
+      as: 20px;
+      at: 20px;
+      au: 20px;
+      aw: 20px;
+      ax: 20px;
+      az: 20px;
+      ba: 20px;
+      bb: 20px;
+      bd: 20px;
+      be: 18px;
+      bf: 20px;
+      bg: 20px;
+      bh: 20px;
+      bi: 20px;
+      bj: 20px;
+      bl: 20px;
+      bm: 20px;
+      bn: 20px;
+      bo: 20px;
+      bq: 20px;
+      br: 20px;
+      bs: 20px;
+      bt: 20px;
+      bv: 20px;
+      bw: 20px;
+      by: 20px;
+      bz: 20px;
+      ca: 20px;
+      cc: 20px;
+      cd: 20px;
+      cf: 20px;
+      cg: 20px;
+      ch: 15px;
+      ci: 20px;
+      ck: 20px;
+      cl: 20px;
+      cm: 20px;
+      cn: 20px;
+      co: 20px;
+      cp: 20px;
+      cr: 20px;
+      cu: 20px;
+      cv: 20px;
+      cw: 20px;
+      cx: 20px;
+      cy: 20px;
+      cz: 20px;
+      de: 20px;
+      dg: 20px;
+      dj: 20px;
+      dk: 20px;
+      dm: 20px;
+      do: 20px;
+      dz: 20px;
+      ea: 20px;
+      ec: 20px;
+      ee: 20px;
+      eg: 20px;
+      eh: 20px;
+      er: 20px;
+      es: 20px;
+      et: 20px;
+      eu: 20px;
+      fi: 20px;
+      fj: 20px;
+      fk: 20px;
+      fm: 20px;
+      fo: 20px;
+      fr: 20px;
+      ga: 20px;
+      gb: 20px;
+      gd: 20px;
+      ge: 20px;
+      gf: 20px;
+      gg: 20px;
+      gh: 20px;
+      gi: 20px;
+      gl: 20px;
+      gm: 20px;
+      gn: 20px;
+      gp: 20px;
+      gq: 20px;
+      gr: 20px;
+      gs: 20px;
+      gt: 20px;
+      gu: 20px;
+      gw: 20px;
+      gy: 20px;
+      hk: 20px;
+      hm: 20px;
+      hn: 20px;
+      hr: 20px;
+      ht: 20px;
+      hu: 20px;
+      ic: 20px;
+      id: 20px;
+      ie: 20px;
+      il: 20px;
+      im: 20px;
+      in: 20px;
+      io: 20px;
+      iq: 20px;
+      ir: 20px;
+      is: 20px;
+      it: 20px;
+      je: 20px;
+      jm: 20px;
+      jo: 20px;
+      jp: 20px;
+      ke: 20px;
+      kg: 20px;
+      kh: 20px;
+      ki: 20px;
+      km: 20px;
+      kn: 20px;
+      kp: 20px;
+      kr: 20px;
+      kw: 20px;
+      ky: 20px;
+      kz: 20px;
+      la: 20px;
+      lb: 20px;
+      lc: 20px;
+      li: 20px;
+      lk: 20px;
+      lr: 20px;
+      ls: 20px;
+      lt: 20px;
+      lu: 20px;
+      lv: 20px;
+      ly: 20px;
+      ma: 20px;
+      mc: 19px;
+      md: 20px;
+      me: 20px;
+      mf: 20px;
+      mg: 20px;
+      mh: 20px;
+      mk: 20px;
+      ml: 20px;
+      mm: 20px;
+      mn: 20px;
+      mo: 20px;
+      mp: 20px;
+      mq: 20px;
+      mr: 20px;
+      ms: 20px;
+      mt: 20px;
+      mu: 20px;
+      mv: 20px;
+      mw: 20px;
+      mx: 20px;
+      my: 20px;
+      mz: 20px;
+      na: 20px;
+      nc: 20px;
+      ne: 18px;
+      nf: 20px;
+      ng: 20px;
+      ni: 20px;
+      nl: 20px;
+      no: 20px;
+      np: 13px;
+      nr: 20px;
+      nu: 20px;
+      nz: 20px;
+      om: 20px;
+      pa: 20px;
+      pe: 20px;
+      pf: 20px;
+      pg: 20px;
+      ph: 20px;
+      pk: 20px;
+      pl: 20px;
+      pm: 20px;
+      pn: 20px;
+      pr: 20px;
+      ps: 20px;
+      pt: 20px;
+      pw: 20px;
+      py: 20px;
+      qa: 20px;
+      re: 20px;
+      ro: 20px;
+      rs: 20px;
+      ru: 20px;
+      rw: 20px;
+      sa: 20px;
+      sb: 20px;
+      sc: 20px;
+      sd: 20px;
+      se: 20px;
+      sg: 20px;
+      sh: 20px;
+      si: 20px;
+      sj: 20px;
+      sk: 20px;
+      sl: 20px;
+      sm: 20px;
+      sn: 20px;
+      so: 20px;
+      sr: 20px;
+      ss: 20px;
+      st: 20px;
+      sv: 20px;
+      sx: 20px;
+      sy: 20px;
+      sz: 20px;
+      ta: 20px;
+      tc: 20px;
+      td: 20px;
+      tf: 20px;
+      tg: 20px;
+      th: 20px;
+      tj: 20px;
+      tk: 20px;
+      tl: 20px;
+      tm: 20px;
+      tn: 20px;
+      to: 20px;
+      tr: 20px;
+      tt: 20px;
+      tv: 20px;
+      tw: 20px;
+      tz: 20px;
+      ua: 20px;
+      ug: 20px;
+      um: 20px;
+      un: 20px;
+      us: 20px;
+      uy: 20px;
+      uz: 20px;
+      va: 15px;
+      vc: 20px;
+      ve: 20px;
+      vg: 20px;
+      vi: 20px;
+      vn: 20px;
+      vu: 20px;
+      wf: 20px;
+      ws: 20px;
+      xk: 20px;
+      ye: 20px;
+      yt: 20px;
+      za: 20px;
+      zm: 20px;
+      zw: 20px;
+    }
+    @standard-country: 'ru';
+
+    each(@set, {
+      &.iti__@{key} {
+        width: @value;
+      }
+    });
+  }
+}

package/src/lib/components/form/input-phone/assets/input-phone-dropdown.less

@@ -0,0 +1,46 @@
+.mrx-input-phone {
+  &__country-list {
+    position: relative;
+    border: none;
+    z-index: 2;
+    list-style: none;
+    text-align: left;
+
+    &--dropup {
+      bottom: 100%;
+      margin-bottom: 1px;
+    }
+
+    padding: 0;
+    margin: 0 0 0 1px;
+    //box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    background-color: white;
+    white-space: nowrap;
+
+    @media (max-width: 500px) {
+      white-space: normal;
+    }
+
+    max-height: 200px;
+    overflow-y: scroll;
+
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__country {
+    padding: 5px 10px;
+    outline: none;
+    cursor: pointer;
+  }
+
+  &__country.iti__highlight {
+    background-color: gray;
+  }
+
+  &__flag-box, &__country-name, &__dial-code {
+    vertical-align: middle;
+  }
+  &__flag-box, &__country-name {
+    margin-right: 6px;
+  }
+}

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

@@ -0,0 +1,21 @@
+.mrx-input-phone.mrx-input-phone {
+  &.mrx-input-error {
+    input {
+      border-color: 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);
+    }
+  }
+
+  &.mrx-input-checked-success {
+    input {
+      background-color: var(--system-bg-positive-secondary);
+      border-color: var(--system-bg-controls-positive-default);
+    }
+  }
+}