Untitled

import {Component, Input, OnInit} from '@angular/core';
import { element } from 'protractor';

@Component({
  selector: 'mb-button',
  templateUrl: './mb-button.component.html',
  styleUrls: ['../../../core/global-style/_button.scss']
})
export class MbButtonComponent implements OnInit {
  @Input() mbButtonType: 'BORDER' | 'NO_BORDER' | 'ONLY_ICON' = 'BORDER';
  @Input() mbButtonSize: 'LARGE' | 'MEDIUM' | 'SMALL' | 'VERY_LARGE' = 'MEDIUM';
  @Input() mbType: 'SUBMIT' | 'BUTTON' = 'BUTTON';
  @Input() mbButtonBgColor = '#fff';
  @Input() mbButtonBorderColor = '#A0A3BD';
  @Input() mbButtonTextColor = '#6E7191';
  @Input() mbButtonShowVerticalDash = false;
  @Input() mbButtonVerticalDashColor = '#A0A3BD';
  private _mbIsDisable = false;
  @Input() mbPrefixIcon: null | string;
  @Input() mbButtonText: string;
  @Input() mbSuffixIcon: null | string;
  @Input() mbButtonAvailableStyle: 'PRIMARY' | 'DANGER' | 'DEFAULT';
  @Input() mbButtonIsLoading = false;
  @Input() mbButtonIconType : 'ZORRO' | 'AWESOME' = 'ZORRO';

  mbButtonClass = 'button__class';
  mbStyle: any;
  styleDash: any;

    @Input() set mbIsDisable(value: boolean) {
        this._mbIsDisable = value;
        this.initButton();
    }

    get mbIsDisable(): boolean {
        return this._mbIsDisable;
    }

  constructor() {
  }

  ngOnInit(): void {
    this.initButton();
  }

  initButton() {
      this.mbButtonClass = 'button__class';
      if (this.mbButtonType === 'BORDER') {
          this.mbButtonClass += ' ' + 'button__class--border';
      } else {
          this.mbButtonClass += ' ' + 'button__class--no-border';
      }
      if (this.mbButtonShowVerticalDash) {
          this.mbButtonClass += ' ' + 'button__class--show-dash';
      }
      if (this.mbButtonAvailableStyle === 'PRIMARY'
          || this.mbButtonAvailableStyle === 'DANGER'
          || this.mbButtonAvailableStyle === 'DEFAULT'
      ) {
          this.mbButtonClass = 'button__class button__class--no-border';
          this.mbButtonTextColor = '#fff';
          this.mbButtonShowVerticalDash = false;
          this.mbButtonSize = 'MEDIUM';
      }
      if (this.mbButtonAvailableStyle === 'PRIMARY') {
          if (!this.mbIsDisable) {
              this.mbButtonBgColor = '#141ED2';
          }
      }
      if (this.mbButtonAvailableStyle === 'DANGER') {
          this.mbButtonBgColor = '#C30052';

      }
      if (this.mbButtonAvailableStyle === 'DEFAULT') {
          this.mbButtonClass = 'button__class button__class--border';
          this.mbButtonBgColor = '#f5f5f5';
          this.mbButtonBorderColor = '#A0A3BD';
          this.mbButtonTextColor = '#6E7191';
      }
      this.mbButtonClass += ' ' + 'button__class--' + this.mbButtonSize.toLowerCase();
      const bgColor = `${this.mbButtonBgColor}!important`;
      const borderColor = `${this.mbButtonBorderColor}!important`;
      const textColor = `${this.mbButtonTextColor}!important`;
      const verticalDash = `${this.mbButtonVerticalDashColor}!important`;
      const heightVertical = this.mbButtonSize === 'LARGE' ? '40px' : this.mbButtonSize === 'MEDIUM' ? '32px' : '24px';
      this.mbStyle = {background: bgColor, 'border-color': borderColor, color: textColor};
      this.styleDash = {'border-color': verticalDash, height: heightVertical};
  }

}