import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import ModulPlugin from '../../utils/modul/modul';
import { ModulVue } from '../../utils/vue/vue';
import { EXPANDABLE_LAYOUT_NAME } from '../component-names';
import WithRender from './expandable-layout.html?style=./expandable-layout.scss';
export var MExpandableLayoutPanelScrollMode;
(function (MExpandableLayoutPanelScrollMode) {
    MExpandableLayoutPanelScrollMode["Follow"] = "follow";
    MExpandableLayoutPanelScrollMode["Static"] = "static";
})(MExpandableLayoutPanelScrollMode || (MExpandableLayoutPanelScrollMode = {}));
export var MExpandableLayoutPanelPosition;
(function (MExpandableLayoutPanelPosition) {
    MExpandableLayoutPanelPosition["Left"] = "left";
    MExpandableLayoutPanelPosition["Right"] = "right";
})(MExpandableLayoutPanelPosition || (MExpandableLayoutPanelPosition = {}));
var MExpandableLayout = /** @class */ (function (_super) {
    __extends(MExpandableLayout, _super);
    function MExpandableLayout() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MExpandableLayout.prototype.updateMode = function () {
        if (this.panelScrollMode === MExpandableLayoutPanelScrollMode.Static) {
            this.$refs.panelContent.style.top = '';
            this.$refs.panelContent.style.bottom = '';
        }
    };
    MExpandableLayout.prototype.mounted = function () {
        this.$modul.event.$on('scroll', this.setPanelPosition);
        this.$modul.event.$on('resize', this.setPanelPosition);
    };
    MExpandableLayout.prototype.beforeDestroy = function () {
        this.$modul.event.$off('scroll', this.setPanelPosition);
        this.$modul.event.$off('resize', this.setPanelPosition);
    };
    MExpandableLayout.prototype.setPanelPosition = function () {
        if (this.panelScrollMode === MExpandableLayoutPanelScrollMode.Follow) {
            var _a = this.$el.getBoundingClientRect(), top_1 = _a.top, bottom = _a.bottom;
            if (top_1 < 0) {
                this.$refs.panelContent.style.top = -top_1 + 'px';
            }
            else {
                this.$refs.panelContent.style.top = '';
            }
            if (bottom > document.documentElement.clientHeight) {
                this.$refs.panelContent.style.bottom = (bottom - document.documentElement.clientHeight) + 'px';
            }
            else {
                this.$refs.panelContent.style.bottom = '';
            }
        }
    };
    Object.defineProperty(MExpandableLayout.prototype, "styleClasses", {
        get: function () {
            return {
                'm--has-left-panel': !!this.$slots.panel && this.panelPosition === MExpandableLayoutPanelPosition.Left,
                'm--has-right-panel': !!this.$slots.panel && this.panelPosition === MExpandableLayoutPanelPosition.Right,
                'm--is-panel-over-content': this.overContent
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MExpandableLayout.prototype, "panelStyle", {
        get: function () {
            return {
                width: this.open ? this.panelWidth : '0'
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MExpandableLayout.prototype, "panelContentStyle", {
        get: function () {
            return {
                width: this.panelWidth
            };
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Prop({
            default: false
        })
    ], MExpandableLayout.prototype, "open", void 0);
    __decorate([
        Prop({
            default: MExpandableLayoutPanelScrollMode.Static,
            validator: function (value) {
                return value === MExpandableLayoutPanelScrollMode.Static ||
                    value === MExpandableLayoutPanelScrollMode.Follow;
            }
        })
    ], MExpandableLayout.prototype, "panelScrollMode", void 0);
    __decorate([
        Prop({
            default: MExpandableLayoutPanelPosition.Left,
            validator: function (value) {
                return value === MExpandableLayoutPanelPosition.Left ||
                    value === MExpandableLayoutPanelPosition.Right;
            }
        })
    ], MExpandableLayout.prototype, "panelPosition", void 0);
    __decorate([
        Prop({ default: '320px' })
    ], MExpandableLayout.prototype, "panelWidth", void 0);
    __decorate([
        Prop({ default: false })
    ], MExpandableLayout.prototype, "overContent", void 0);
    __decorate([
        Watch('panelScrollMode')
    ], MExpandableLayout.prototype, "updateMode", null);
    MExpandableLayout = __decorate([
        WithRender,
        Component
    ], MExpandableLayout);
    return MExpandableLayout;
}(ModulVue));
export { MExpandableLayout };
var ExpandableLayoutPlugin = {
    install: function (v, options) {
        v.use(ModulPlugin);
        v.component(EXPANDABLE_LAYOUT_NAME, MExpandableLayout);
    }
};
export default ExpandableLayoutPlugin;
//# sourceMappingURL=expandable-layout.js.map