var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { BackdropMode, Portal, PortalTransitionDuration } from '../../mixins/portal/portal';
import UserAgentUtil from '../../utils/user-agent/user-agent';
import { ModulVue } from '../../utils/vue/vue';
import { ICON_BUTTON_NAME, 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.hasKeyboard = false;
        _this.closeTitle = _this.$i18n.translate('m-modal:close');
        return _this;
    }
    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.mounted = function () {
        if (!this.title && !Boolean(this.$slots.header)) {
            this.$log.warn('<m-modal> needs a header slot or title prop.');
        }
    };
    MModal.prototype.backdropClick = function () {
        if (this.closeOnBackdrop) {
            this.as().tryClose();
        }
    };
    Object.defineProperty(MModal.prototype, "isAndroid", {
        get: function () {
            return UserAgentUtil.isAndroid();
        },
        enumerable: false,
        configurable: true
    });
    MModal.prototype.isFocusableTextBox = function (element) {
        var type = element.getAttribute('type');
        return (element.tagName === 'INPUT'
            && type !== 'checkbox'
            && type !== 'radio'
            && type !== 'button'
            && type !== 'reset'
            && type !== 'file') || element.tagName === 'TEXTAREA';
    };
    MModal.prototype.onFocusIn = function (event) {
        if (this.isAndroid
            && this.isFocusableTextBox(event.target)) {
            this.hasKeyboard = true;
        }
    };
    MModal.prototype.onFocusOut = function (event) {
        if (!this.isAndroid) {
            return;
        }
        this.hasKeyboard = false;
    };
    __decorate([
        Prop({
            default: MModalSize.Regular,
            validator: function (value) {
                return value === MModalSize.Regular ||
                    value === MModalSize.FullScreen ||
                    value === MModalSize.Large ||
                    value === MModalSize.Small;
            }
        })
    ], 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()
    ], MModal.prototype, "title", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "bodyMaxWidth", void 0);
    __decorate([
        Prop({ default: true })
    ], MModal.prototype, "paddingBody", void 0);
    MModal = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[ICON_BUTTON_NAME] = MIconButton,
                _a),
            mixins: [Portal]
        })
    ], MModal);
    return MModal;
}(ModulVue));
export { MModal };
var ModalPlugin = {
    install: function (v, options) {
        v.component(MODAL_NAME, MModal);
    }
};
export default ModalPlugin;
//# sourceMappingURL=modal.js.map