mgJsComponentHandler.addDefaultComponent('mg-dropdawn-btn-wrapper', {
    template: '#t-mg-dropdawn-btn-wrapper',
    props: [
        'component_id',
        'component_namespace',
        'component_index'
    ],
    data: function () {
        return {
            dropOpen: false
        };
    },
    created: function () {
    },
    methods: {
        toogleDropdawn: function (event) {
            var self = this;
            self.dropOpen = !self.dropOpen;
        },
        hideDrop: function (event) {
            var self = this;
            self.dropOpen = false;
            self.$nextTick(function () {
                var clickedEl = document.elementFromPoint(event.clientX, event.clientY);
                if (!$(clickedEl).hasClass('mg-drop-target-btn') && $(clickedEl).parents('.mg-drop-target-btn').length === 0) {
                    $(clickedEl).click();
                }
            });
        },
        notHideDrop: function (event) {
            event.preventDefault();
            event.stopPropagation();
            var self = this;
            self.dropOpen = true;
        },
        loadModal: function (event, targetId, namespace, index) {
            mgPageControler.vueLoader.loadModal(event, targetId,
                    typeof namespace !== 'undefined' ? namespace : getItemNamespace(targetId),
                    typeof index !== 'undefined' ? index : getItemIndex(targetId));
        },
        makeCustomAction: function (functionName, params, event, namespace, index) {
            mgPageControler.vueLoader.makeCustomAction(functionName, params, event, namespace, index);
        },
        redirect: function (event, params, targetBlank) {
            mgPageControler.vueLoader.redirect(event, params, targetBlank);
        }
    }
});