Untitled
unknown
plain_text
2 years ago
3.4 kB
3
Indexable
Never
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}; } }