import { __decorate, __extends } from "tslib";
import Vue from 'vue';
import { Component, Emit, Prop, Watch } from 'vue-property-decorator';
import { MediaQueries } from '../../mixins/media-queries/media-queries';
import { ModulVue } from '../../utils/vue/vue';
import { MButton } from '../button/button';
import { INPLACE_EDIT_NAME } from '../component-names';
import { MOverlay } from '../overlay/overlay';
import { MAccordionTransition } from '../transitions/accordion-transition/accordion-transition';
import WithRender from './inplace-edit.html?style=./inplace-edit.scss';
var MInplaceEdit = /** @class */ (function (_super) {
    __extends(MInplaceEdit, _super);
    function MInplaceEdit() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.internalEditMode = false;
        return _this;
    }
    MInplaceEdit.prototype.emitOk = function (event) { };
    MInplaceEdit.prototype.emitCancel = function (event) { };
    MInplaceEdit.prototype.emitClick = function (event) { };
    MInplaceEdit.prototype.emitMobileAfterOpen = function () { };
    MInplaceEdit.prototype.emitMobileAfterClose = function () { };
    MInplaceEdit.prototype.onEditModeChange = function (value) {
        this.internalEditMode = value;
    };
    MInplaceEdit.prototype.onIsMqMaxSChange = function (value, old) {
        if (this.mqMounted) {
            this.propEditMode = false;
        }
    };
    MInplaceEdit.prototype.mounted = function () {
        var _this = this;
        // should be in next tick to skip the media query initial trigger on mounted
        this.$nextTick(function () { return _this.mqMounted = true; });
    };
    Object.defineProperty(MInplaceEdit.prototype, "propEditMode", {
        get: function () {
            return this.internalEditMode;
        },
        set: function (value) {
            this.internalEditMode = value;
            this.$emit('update:editMode', value);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInplaceEdit.prototype, "propPadding", {
        get: function () {
            if (!this.propEditMode && this.padding) {
                return "padding: " + this.padding;
            }
            else if (this.propEditMode && this.editModePadding) {
                return "padding: " + this.editModePadding;
            }
            else {
                return '';
            }
        },
        enumerable: false,
        configurable: true
    });
    MInplaceEdit.prototype.onConfirm = function (event) {
        if (this.propEditMode) {
            this.emitOk(event);
        }
    };
    MInplaceEdit.prototype.onCancel = function (event) {
        if (this.propEditMode) {
            this.propEditMode = false;
            this.emitCancel(event);
        }
    };
    __decorate([
        Prop()
    ], MInplaceEdit.prototype, "editMode", void 0);
    __decorate([
        Prop()
    ], MInplaceEdit.prototype, "error", void 0);
    __decorate([
        Prop()
    ], MInplaceEdit.prototype, "waiting", void 0);
    __decorate([
        Prop()
    ], MInplaceEdit.prototype, "padding", void 0);
    __decorate([
        Prop()
    ], MInplaceEdit.prototype, "editModePadding", void 0);
    __decorate([
        Prop({
            default: function () { return (Vue.prototype).$i18n.translate('m-inplace-edit:modify'); }
        })
    ], MInplaceEdit.prototype, "title", void 0);
    __decorate([
        Emit('ok')
    ], MInplaceEdit.prototype, "emitOk", null);
    __decorate([
        Emit('cancel')
    ], MInplaceEdit.prototype, "emitCancel", null);
    __decorate([
        Emit('click')
    ], MInplaceEdit.prototype, "emitClick", null);
    __decorate([
        Emit('mobile-after-open')
    ], MInplaceEdit.prototype, "emitMobileAfterOpen", null);
    __decorate([
        Emit('mobile-after-close')
    ], MInplaceEdit.prototype, "emitMobileAfterClose", null);
    __decorate([
        Watch('editMode', { immediate: true })
    ], MInplaceEdit.prototype, "onEditModeChange", null);
    __decorate([
        Watch('isMqMaxS')
    ], MInplaceEdit.prototype, "onIsMqMaxSChange", null);
    MInplaceEdit = __decorate([
        WithRender,
        Component({
            components: {
                MAccordionTransition: MAccordionTransition,
                MButton: MButton,
                MOverlay: MOverlay
            },
            mixins: [MediaQueries]
        })
    ], MInplaceEdit);
    return MInplaceEdit;
}(ModulVue));
export { MInplaceEdit };
var InplaceEditPlugin = {
    install: function (v, options) {
        v.component(INPLACE_EDIT_NAME, MInplaceEdit);
    }
};
export default InplaceEditPlugin;
//# sourceMappingURL=inplace-edit.js.map