var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { MediaQueries } from '../../mixins/media-queries/media-queries';
import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { ICON_BUTTON_NAME, OPTION_ITEM_ADD_NAME, OPTION_ITEM_ARCHIVE_NAME, OPTION_ITEM_DELETE_NAME, OPTION_ITEM_EDIT_NAME, OPTION_ITEM_NAME, OPTION_NAME, OPTION_SEPARATOR, OPTION_TITLE, POPUP_NAME } from '../component-names';
import { MIconButton, MIconButtonSkin } from '../icon-button/icon-button';
import { MPopperPlacement } from '../popper/popper';
import { MPopup } from '../popup/popup';
import { MOptionItem } from './option-item/option-item';
import { MOptionItemAdd } from './option-item/option-item-add';
import { MOptionItemArchive } from './option-item/option-item-archive';
import { MOptionItemDelete } from './option-item/option-item-delete';
import { MOptionItemEdit } from './option-item/option-item-edit';
import { MOptionSeparator } from './option-separator/option-separator';
import { MOptionTitle } from './option-title/option-title';
import WithRender from './option.html';
import './option.scss';
var BaseOption = /** @class */ (function (_super) {
    __extends(BaseOption, _super);
    function BaseOption() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseOption;
}(ModulVue));
export { BaseOption };
export var MOptionsSkin;
(function (MOptionsSkin) {
    MOptionsSkin["Light"] = "over-light";
    MOptionsSkin["Dark"] = "over-dark";
    MOptionsSkin["Mixed"] = "over-mixed";
})(MOptionsSkin || (MOptionsSkin = {}));
var MOption = /** @class */ (function (_super) {
    __extends(MOption, _super);
    function MOption() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.hasIcon = false;
        _this.hasItemBorder = true;
        _this.open = false;
        _this.id = "mOption-" + uuid.generate();
        return _this;
    }
    MOption.prototype.checkIcon = function (icon) {
        if (icon) {
            this.hasIcon = true;
        }
    };
    MOption.prototype.checkBorder = function () {
        var _this = this;
        this.$slots.default.forEach(function (vNode) {
            if (vNode && vNode.componentOptions && (vNode.componentOptions.tag === OPTION_SEPARATOR || vNode.componentOptions.tag === OPTION_TITLE)) {
                _this.hasItemBorder = false;
            }
        });
    };
    MOption.prototype.close = function () {
        this.open = false;
        this.onClose();
    };
    MOption.prototype.onOpen = function () {
        this.$emit('open');
    };
    MOption.prototype.onClose = function () {
        this.$emit('close');
    };
    MOption.prototype.onClick = function ($event) {
        this.$emit('click', $event);
    };
    MOption.prototype.getOpenTitle = function () {
        return this.openTitle === undefined ? this.$i18n.translate('m-option:open') : this.openTitle;
    };
    MOption.prototype.getCloseTitle = function () {
        return this.closeTitle === undefined ? this.$i18n.translate('m-option:close') : this.closeTitle;
    };
    Object.defineProperty(MOption.prototype, "propTitle", {
        get: function () {
            return this.open ? this.getCloseTitle() : this.getOpenTitle();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "optionMaxWidth", {
        get: function () {
            return this.as().isMqMinM ? this.maxWidth : 'none';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "ariaControls", {
        get: function () {
            return this.id + '-controls';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "menuMaxHeight", {
        get: function () {
            return this.scroll ? undefined : 'none';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "isSkinMixed", {
        get: function () {
            return this.skin === MOptionsSkin.Mixed;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "iconButtonSkin", {
        get: function () {
            switch (this.skin) {
                case MOptionsSkin.Light:
                    return MIconButtonSkin.Light;
                case MOptionsSkin.Dark:
                    return MIconButtonSkin.Dark;
                default:
                    throw new Error('skin not supported!');
            }
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Prop({
            default: MPopperPlacement.Bottom,
            validator: function (value) {
                return value === MPopperPlacement.Bottom ||
                    value === MPopperPlacement.BottomEnd ||
                    value === MPopperPlacement.BottomStart ||
                    value === MPopperPlacement.Left ||
                    value === MPopperPlacement.LeftEnd ||
                    value === MPopperPlacement.LeftStart ||
                    value === MPopperPlacement.Right ||
                    value === MPopperPlacement.RightEnd ||
                    value === MPopperPlacement.RightStart ||
                    value === MPopperPlacement.Top ||
                    value === MPopperPlacement.TopEnd ||
                    value === MPopperPlacement.TopStart;
            }
        })
    ], MOption.prototype, "placement", void 0);
    __decorate([
        Prop({
            default: MOptionsSkin.Light,
            validator: function (value) {
                return value === MOptionsSkin.Light ||
                    value === MOptionsSkin.Dark ||
                    value === MOptionsSkin.Mixed;
            }
        })
    ], MOption.prototype, "skin", void 0);
    __decorate([
        Prop()
    ], MOption.prototype, "openTitle", void 0);
    __decorate([
        Prop()
    ], MOption.prototype, "closeTitle", void 0);
    __decorate([
        Prop()
    ], MOption.prototype, "disabled", void 0);
    __decorate([
        Prop({ default: '44px' })
    ], MOption.prototype, "size", void 0);
    __decorate([
        Prop({ default: false })
    ], MOption.prototype, "focusManagement", void 0);
    __decorate([
        Prop({ default: true })
    ], MOption.prototype, "scroll", void 0);
    __decorate([
        Prop({ default: '220px' })
    ], MOption.prototype, "maxWidth", void 0);
    MOption = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[POPUP_NAME] = MPopup,
                _a[ICON_BUTTON_NAME] = MIconButton,
                _a),
            mixins: [
                MediaQueries
            ]
        })
    ], MOption);
    return MOption;
}(BaseOption));
export { MOption };
var OptionPlugin = {
    install: function (v, options) {
        v.use(MediaQueriesPlugin);
        v.component(OPTION_ITEM_NAME, MOptionItem);
        v.component(OPTION_ITEM_ARCHIVE_NAME, MOptionItemArchive);
        v.component(OPTION_ITEM_ADD_NAME, MOptionItemAdd);
        v.component(OPTION_ITEM_DELETE_NAME, MOptionItemDelete);
        v.component(OPTION_ITEM_EDIT_NAME, MOptionItemEdit);
        v.component(OPTION_TITLE, MOptionTitle);
        v.component(OPTION_SEPARATOR, MOptionSeparator);
        v.component(OPTION_NAME, MOption);
    }
};
export default OptionPlugin;
//# sourceMappingURL=option.js.map