myrta-ui 17.0.19 → 17.0.20

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

@@ -0,0 +1,284 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+  Validators
+} from '@angular/forms';
+import {
+  InputNumberSizesEnum,
+  InputNumberSizesTypes,
+  InputNumberType,
+  InputNumberValueWithId
+} from './input-number.enum';
+import { v4 as uuidv4 } from 'uuid';
+import { Field } from '../../../services/mrx-autosave/mrx-autosave.service';
+import { distinctUntilChanged, pairwise, startWith } from 'rxjs/operators';
+
+const noop = () => {
+};
+
+export type DecimalMarkerType = '.' | ',' | ['.', ','];
+
+@Component({
+  selector: 'mrx-input-number',
+  templateUrl: './input-number.component.html',
+  styleUrls: ['./input-number.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
+  ]
+})
+export class InputNumberComponent implements ControlValueAccessor, OnInit {
+
+  public static decimalMarker?: DecimalMarkerType;
+  private static _delimitersInitialised = false;
+  public static thousandsSeparator: string;
+
+  public disabled = false;
+  public readonly = false;
+
+  numberForm: FormGroup;
+  invalidMessageStart: string | undefined | null;
+  invalidMessageEnd: string | undefined | null;
+  decimals = 2;
+
+  private invokeChanged = true;
+  private onTouchedCallback: () => void = noop;
+  private propagateChange: (_: any) => void = noop;
+  private _min = -999999999.99;
+  private _max = 999999999.99;
+  private _isValid = true;
+
+
+  // SAVE STATE
+  public uuid: string = uuidv4();
+  @Input() public fields: Field[] = [];
+
+  @Input() public placeholder?: string;
+  @Input() public innerClass = '';
+  @Input() public customClasses = '';
+  @Input() public required = false;
+  @Input() public allowNegative = false;
+  @Input() public size: InputNumberSizesTypes = 'large';
+  @Input() public separator?: string;
+  @Input() public decimalSeparator?: DecimalMarkerType;
+  @Input() public isNullableValue = false;
+  @Input() public isAutoCorrectingValue = false;
+
+  // ERROR
+  @Input() public invalid = false;
+  @Input() public checkInvalid: true | false | null = null;
+
+  @ViewChild('inputElement') inputElement!: ElementRef;
+
+  @Input('numberType')
+  public set setNumberType(value: InputNumberType) {
+    this.decimals = value === 'float' ? 2 : value === 'percent' ? 1 : 0;
+  }
+
+  @Input('invalidMessage')
+  public set setInvalidMessage(value: string) {
+    if (value) {
+      const para = value.split('{0}');
+      this.invalidMessageStart = para[0];
+      this.invalidMessageEnd = para[1];
+    } else {
+      this.invalidMessageStart = null;
+      this.invalidMessageEnd = null;
+    }
+  }
+
+  @Input('disabled')
+  public set setDisabled(value: boolean) {
+    this.invokeChanged = false;
+    this.disabled = value
+    if (value) {
+      this.numberForm.disable();
+    } else {
+      this.numberForm.enable();
+    }
+    this.invokeChanged = true;
+  }
+
+  @Input('readonly')
+  public set setReadonly(value: boolean) {
+    this.invokeChanged = false;
+    this.readonly = value
+    if (value) {
+      this.numberForm.disable();
+    } else {
+      this.numberForm.enable();
+    }
+    this.invokeChanged = true;
+  }
+
+  @Input('minValue')
+  public set setMin(val: number) {
+    if (val) {
+      this._min = val;
+      const c = this.getControl('number');
+      if (c) {
+        c.setValidators([Validators.min(this._min), Validators.max(this._max)]);
+      }
+    }
+  }
+
+  @Input('maxValue')
+  public set setMax(val: number) {
+    if (val) {
+      this._max = val;
+      const c = this.getControl('number');
+      if (c) {
+        c.setValidators([Validators.min(this._min), Validators.max(this._max)]);
+      }
+    }
+  }
+
+  @Output() public modelChange: EventEmitter<InputNumberValueWithId> = new EventEmitter<InputNumberValueWithId>();
+
+  constructor(fb: FormBuilder) {
+    this.numberForm = fb.group({
+      number: [''],
+    });
+
+    InputNumberComponent.initNumberFormat();
+  }
+
+  get getClasses(): string {
+    return `${InputNumberSizesEnum[this.size]} ${this.customClasses}`;
+  }
+
+  get decimalMarker(): '.' | ',' | ['.', ','] {
+    return this.decimalSeparator || InputNumberComponent.decimalMarker || ',';
+  }
+
+  get thousandsSeparator(): string {
+    return this.separator || InputNumberComponent.thousandsSeparator;
+  }
+
+  get isValid(): boolean {
+    return this._isValid;
+  }
+
+  get maxMessage(): string {
+    const dec = this.decimalMarker[0];
+    return this._max.toLocaleString('en').split(',').join(this.thousandsSeparator).replace('.', dec);
+  }
+
+  get isVerified(): boolean {
+    const f = this.getControl('number');
+    return !this.required ||
+      (this.required && f.value !== null && f.value !== undefined && this.isValid);
+  }
+
+  static initNumberFormat(): void {
+    if (this._delimitersInitialised) {
+      return;
+    }
+    // системный формат числа с дробной частью и группой разраядов (тысячи)
+    const c = Intl.NumberFormat().formatToParts(1234.5);
+
+    const t = c.find(x => x.type === 'group')?.value;
+
+    // разделитель групп
+    this.thousandsSeparator = t?.charCodeAt(0) === 160 ? ' ' : t || ' ';
+
+    // разделитель дробной части
+    this.decimalMarker = (c.find(x => x.type === 'decimal')?.value as (',' | '.'));
+
+    this._delimitersInitialised = true;
+  }
+
+  ngOnInit(): void {
+    this.numberForm.valueChanges.pipe(
+      startWith(null),
+      distinctUntilChanged(),
+      pairwise()
+    ).subscribe(([oldValue, newValue]) => {
+      this._updateValue(newValue.number)
+    });
+    this.numberForm.statusChanges.subscribe(val => {
+      this.checkIsValid();
+    });
+  }
+
+  private _updateValue(insideValue: number | string) {
+    if (this.invokeChanged) {
+      if (this.numberForm.valid) {
+        const num = insideValue;
+        let numValue: number;
+        if (num === '') {
+          this.propagateChange(null);
+          this.modelChange.emit({ value: null, id: this.uuid });
+        }
+        if (num && typeof (num) === 'string') {
+          numValue = parseFloat(num.replace(',', '.').split(this.thousandsSeparator).join(''));
+          this.propagateChange(numValue);
+          this.modelChange.emit({ value: numValue, id: this.uuid });
+        } else if (typeof (num) === 'number') {
+          numValue = num;
+          this.propagateChange(numValue);
+          this.modelChange.emit({ value: numValue, id: this.uuid });
+        }
+      }
+    }
+  }
+
+  resetToMax(event: any) {
+    event.preventDefault();
+
+    const f = this.getControl('number');
+    f.setValue(this._max);
+  }
+
+  checkIsValid() {
+    if (!this.isAutoCorrectingValue) {
+      const f = this.getControl('number');
+      this._isValid = this.numberForm.disabled || (f && f.valid || (!f.dirty && !f.touched));
+    }
+  }
+
+  onPhoneInputBlur() {
+    if (this.isAutoCorrectingValue) {
+      const f = this.getControl('number');
+
+      if (f.value > this._max) {
+        f.setValue(this._max)
+      }
+
+      if (f.value < this._min) {
+        f.setValue(this._min)
+      }
+    }
+  }
+
+  writeValue(value: any): void {
+    const f = this.getControl('number');
+    f.setValue(value, { emitEvent: false, emitViewToModelChange: false });
+  }
+
+  getControl(name: string) {
+    return this.numberForm.get(name) as FormControl;
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+}

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

@@ -0,0 +1,16 @@
+export type InputNumberType = 'int' | 'float' | 'percent';
+
+export enum InputNumberSizesEnum {
+  'small' = 'mrx-input-number-sm',
+  'medium' = 'mrx-input-number-md',
+  'large' = 'mrx-input-number-lg',
+}
+
+export type InputNumberSizesTypes = 'small' | 'medium' | 'large';
+
+export type InputNumberValueTypes = number;
+
+export interface InputNumberValueWithId {
+  value: InputNumberValueTypes | null,
+  id: string
+}

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

@@ -0,0 +1,40 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputNumberComponent } from './input-number.component';
+import { NgxMaskDirective, IConfig, provideNgxMask } from 'ngx-mask';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CharsLeftModule } from '../../chars-left/chars-left.module';
+import { ErrorMessageModule } from "../../error-message/error-message.module";
+import { SaveStateModule } from "../../save-state/save-state.module";
+
+const maskConfigFunction: () => Partial<IConfig> = () => {
+  // системный формат числа с дробной частью и группой разраядов (тысячи)
+  const c = Intl.NumberFormat().formatToParts(1234.5);
+
+  const t = c.find(x => x.type === 'group')?.value;
+
+  const d = c.find(x => x.type === 'decimal')?.value as (','|'.');
+
+  return {
+    validation: false,
+    thousandSeparator: t,
+    decimalMarker: d
+  };
+};
+
+@NgModule({
+  declarations: [InputNumberComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CharsLeftModule,
+    SaveStateModule,
+    ErrorMessageModule,
+    NgxMaskDirective
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [provideNgxMask(maskConfigFunction)],
+  exports: [InputNumberComponent],
+})
+export class InputNumberModule {}

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

@@ -0,0 +1,23 @@
+.mrx-input-otp-container {
+  .mrx-input-otp-box {
+    &.mrx-input-error {
+      .mrx-input-otp {
+        border-color: var(--system-bg-controls-negative-default);
+      }
+    }
+
+    &.mrx-input-checked-error {
+      .mrx-input-otp {
+        border-color: var(--system-bg-controls-negative-default);
+        background-color: var(--system-bg-negative-secondary);
+      }
+    }
+
+    &.mrx-input-checked-success {
+      .mrx-input-otp {
+        background-color: var(--system-bg-positive-secondary);
+        border-color: var(--system-bg-controls-positive-default);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+.mrx-input-otp-container {
+  &.mrx-input-opt-lg {
+    gap: 12px;
+
+    .mrx-input-otp {
+      width: var(--sizing-12);
+      height: var(--sizing-12);
+      border-radius: var(--border-radius-1);
+      border: 1px solid var(--neutral-bg-stroke-default, #DAD5CE);
+      font-family: var(--headlines-lvl-3-font-family);
+      font-weight: var(--headlines-lvl-3-font-weight);
+      line-height: var(--headlines-lvl-3-line-height);
+      font-size: var(--headlines-lvl-3-font-size);
+    }
+  }
+
+  &.mrx-input-opt-md {
+    gap: 10px;
+
+    .mrx-input-otp {
+      width: var(--sizing-10);
+      height: var(--sizing-10);
+      border-radius: var(--border-radius-1);
+      border: 1px solid var(--neutral-bg-stroke-default, #DAD5CE);
+      font-family: var(--headlines-lvl-4-font-family);
+      font-weight: var(--headlines-lvl-4-font-weight);
+      line-height: var(--headlines-lvl-4-line-height);
+      font-size: var(--headlines-lvl-4-font-size);
+    }
+  }
+
+  &.mrx-input-opt-responsive {
+    flex-wrap: wrap;
+    gap: 12px;
+
+    .mrx-input-otp {
+      width: var(--sizing-12);
+      height: var(--sizing-12);
+      border-radius: var(--border-radius-1);
+      border: 1px solid var(--neutral-bg-stroke-default, #DAD5CE);
+      font-family: var(--headlines-lvl-3-font-family);
+      font-weight: var(--headlines-lvl-3-font-weight);
+      line-height: var(--headlines-lvl-3-line-height);
+      font-size: var(--headlines-lvl-3-font-size);
+    }
+
+    @media (max-width: 576px) {
+      gap: 10px;
+
+      .mrx-input-otp {
+        width: var(--sizing-10);
+        height: var(--sizing-10);
+        font-family: var(--headlines-lvl-4-font-family);
+        font-weight: var(--headlines-lvl-4-font-weight);
+        line-height: var(--headlines-lvl-4-line-height);
+        font-size: var(--headlines-lvl-4-font-size);
+      }
+    }
+
+    @media (max-width: 370px) {
+      gap: 8px;
+
+      .mrx-input-otp {
+        width: var(--sizing-8);
+        height: var(--sizing-8);
+        font-family: var(--headlines-lvl-5-font-family);
+        font-weight: var(--headlines-lvl-5-font-weight);
+        line-height: var(--headlines-lvl-5-line-height);
+        font-size: var(--headlines-lvl-5-font-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+.mrx-input-otp {
+    background: var(--brand-bg-tertiary-default, #FFF);
+    color: var(--neutral-text-primary, #262626);
+    text-align: center;
+    outline: 0;
+
+    &-container {
+        display: flex;
+    }
+
+    &-box {
+        label {
+            margin-bottom: 0;
+        }
+    }
+
+    &-disabled {
+        opacity: 0.3;
+    }
+}

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

@@ -0,0 +1,39 @@
+<form
+  [ngClass]="getContainerClasses"
+  class="mrx-input-otp-container"
+  [class]="getClasses"
+>
+  <div
+    *ngFor="let control of ngxOtpArray.controls; let i = index"
+    [ngClass]="getInputBoxClasses"
+    [class.mrx-input-error]="invalid"
+    [class]="checkValidClasses"
+    class="mrx-input-otp-box"
+  >
+    <label [attr.aria-label]="ariaLabels[i]">
+      <input
+        #otpInputElement
+        [id]="'mrx-input-otp-' + i"
+        [formControl]="convertToFormControl(control)"
+        [mrxOptPattern]="otpConfig.pattern"
+        [type]="getInputType()"
+        [ngClass]="styles[i]"
+        (keyup)="handleKeyUp(i, $event.key)"
+        (keyup.backspace)="handleDelete(i)"
+        (keyup.arrowLeft)="stepBackward(i)"
+        (keyup.arrowRight)="stepForward(i)"
+        (focus)="handleFocus(i)"
+        class="mrx-input-otp"
+        maxlength="1"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </label>
+  </div>
+</form>
+
+<mrx-error-message
+  *ngIf="invalid && isInvalidMessage"
+  customClasses="text-left"
+  [invalidMessage]="invalidMessage"
+></mrx-error-message>

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

@@ -0,0 +1,3 @@
+@import "assets/input-opt";
+@import "assets/input-opt-sizes";
+@import "assets/input-opt-error";