export function cilButtonDirective() {
    const directive = {
        restrict: 'A',
        scope: {
            buttonsize: '@'
        },
        link: linkFunc
    };
    return directive;

    function linkFunc(scope, element, attrs) {
        let cilType = attrs.cilButton || 'primary';
        let buttonsize = scope.buttonsize || 'default';
        if (cilType !== 'primary' && cilType !== 'secondary' && cilType !== 'cancel' && cilType !== 'search') {
            cilType = 'primary';
        }
        if (cilType === 'search' && !scope.buttonsize) {
            buttonsize = 'small';
        }
        element.addClass(`button-${cilType}`);
        if (buttonsize !== 'large' && buttonsize !== 'default' && buttonsize !== 'small') {
            element.css('width', buttonsize);
        } else {
            element.addClass(`button-size-${buttonsize}`);
        }
        if (attrs.buttonblock === '') {
            element.css('width', '100%');
        }
        // element.off('click').on('click', () => {
        //     element.blur();
        // });
    }
}