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};
}
}