import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop, Ref } from 'vue-property-decorator';
import { BackdropMode, Portal, PortalTransitionDuration } from '../../mixins/portal/portal';
import { MFocusTrap } from '../../mixins/window-focus-trap/window-focus-trap';
import { Enums } from '../../utils/enums/enums';
import { ModulVue } from '../../utils/vue/vue';
import { MODAL_NAME } from '../component-names';
import { MIconButton } from '../icon-button/icon-button';
import WithRender from './modal.html';
import './modal.scss';
export var MModalSize;
(function (MModalSize) {
    MModalSize["FullScreen"] = "full-screen";
    MModalSize["Large"] = "large";
    MModalSize["Regular"] = "regular";
    MModalSize["Small"] = "small";
})(MModalSize || (MModalSize = {}));
var MModal = /** @class */ (function (_super) {
    __extends(MModal, _super);
    function MModal() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.closeTitle = _this.$i18n.translate('m-modal:close');
        _this.hasKeyboard = false;
        return _this;
    }
    Object.defineProperty(MModal.prototype, "titleId", {
        get: function () {
            return this.title ? this.as().propId + "-title" : undefined;
        },
        enumerable: false,
        configurable: true
    });
    MModal.prototype.setFocusToPortal = function () {
        if (!this.as().handlesFocus() || !this.refArticle) {
            return;
        }
        this.as().setFocusTrap(this.refArticle);
    };
    MModal.prototype.setFocusToTrigger = function () {
        if (!this.as().handlesFocus()) {
            return;
        }
        this.as().removeFocusTrap();
    };
    MModal.prototype.closeModal = function () {
        this.as().tryClose();
    };
    MModal.prototype.handlesFocus = function () {
        return this.focusManagement;
    };
    MModal.prototype.doCustomPropOpen = function (value) {
        return false;
    };
    MModal.prototype.getBackdropMode = function () {
        return this.sizeFullSceen
            ? BackdropMode.ScrollOnly
            : BackdropMode.BackdropFast;
    };
    Object.defineProperty(MModal.prototype, "sizeFullSceen", {
        get: function () {
            var fullScreen = !this.as().isMqMinS
                ? true
                : this.size === MModalSize.FullScreen
                    ? true
                    : false;
            this.as().transitionDuration = fullScreen
                ? PortalTransitionDuration.XSlow
                : PortalTransitionDuration.Regular;
            return fullScreen;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MModal.prototype, "sizeLarge", {
        get: function () {
            return (this.as().isMqMinS && this.size === MModalSize.Large);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MModal.prototype, "sizeSmall", {
        get: function () {
            return (this.as().isMqMinS && this.size === MModalSize.Small);
        },
        enumerable: false,
        configurable: true
    });
    MModal.prototype.getPortalElement = function () {
        return this.$refs.article;
    };
    MModal.prototype.backdropClick = function () {
        if (this.closeOnBackdrop) {
            this.as().tryClose();
        }
    };
    MModal.prototype.mounted = function () {
        if (!this.title && !Boolean(this.$slots.header)) {
            this.$log.warn('<m-modal> needs a header slot or title prop.');
        }
        window.addEventListener('keydown', this.closeModalOnEscape);
    };
    MModal.prototype.beforeDestroy = function () {
        window.removeEventListener('keydown', this.closeModalOnEscape);
    };
    MModal.prototype.closeModalOnEscape = function (event) {
        if (event.key !== 'Escape') {
            return;
        }
        this.closeModal();
    };
    __decorate([
        Prop()
    ], MModal.prototype, "title", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "showCloseButton", void 0);
    __decorate([
        Prop({
            default: MModalSize.Regular,
            validator: function (value) { return Enums.toValueArray(MModalSize).includes(value); }
        })
    ], MModal.prototype, "size", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "closeOnBackdrop", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "focusManagement", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "bodyMaxWidth", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "paddingBody", void 0);
    __decorate([
        Ref('article')
    ], MModal.prototype, "refArticle", void 0);
    MModal = __decorate([
        WithRender,
        Component({
            components: {
                MIconButton: MIconButton
            },
            mixins: [Portal, MFocusTrap]
        })
    ], MModal);
    return MModal;
}(ModulVue));
export { MModal };
var ModalPlugin = {
    install: function (v, options) {
        v.component(MODAL_NAME, MModal);
    }
};
export default ModalPlugin;
//# sourceMappingURL=modal.js.map