gp-crm-ui/components/crm-button/crm-button.component.ts

Модуль компонентов UI Имя модуля: `gp-crm-ui`

import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';

// Кнопка https://angular.io/guide/styleguide#style-05-03
@Component({
	selector: '[crm-button]',
	templateUrl: './crm-button.component.html',
	styleUrls: ['./crm-button.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class CrmButtonComponent {

	// Тип кнопки
	@Input() public buttonType: string;

	// Дополнительное состояние кнопки
	@HostBinding('attr.button-actived')
	@Input() public buttonActived: boolean;

	// Список типов кнопок с иконками перед текстом
	private readonly iconBeforeList = [
		{ type: 'add', icon: '#crm_ic_plus-in-btn' },
		{ type: 'power-select-add', icon: '#crm_ic_plus-select-add-btn-12' },
		{ type: 'top-menu', icon: '#crm_ic_plus2-in-btn' },
		{ type: 'service-file', icon: '#crm_01-01_ic_download-16' }
	];
	// Список типов кнопок с иконками после текста
	private readonly iconAfterList = [
		{ type: 'service-list', icon: '#crm_ic_select-arrow' }
	];

	// Получить иконку перед текстом по типу кнопки
	public get iconBefore(): string {
		const find = this.iconBeforeList.find((item: any): any => item.type === this.buttonType);

		return find
			? find.icon
			: null;
	}

	// Получить иконку после текста по типу кнопки
	public get iconAfter(): string {
		const find = this.iconAfterList.find((item: any): any => item.type === this.buttonType);

		return find
			? find.icon
			: null;
	}

	// Флаг наличия иконки перед текстом
	public get hasIconBefore(): boolean {
		return !!this.iconBefore;
	}

	// Флаг наличия иконки после текста
	public get hasIconAfter(): boolean {
		return !!this.iconAfter;
	}
}