import { __decorate, __extends } from "tslib";
import ResizeSensor from 'css-element-queries/src/ResizeSensor';
import Component from 'vue-class-component';
import { ModulVue } from '../../utils/vue/vue';
export var ElementQueriesBpMin;
(function (ElementQueriesBpMin) {
    ElementQueriesBpMin[ElementQueriesBpMin["XL"] = 1600] = "XL";
    ElementQueriesBpMin[ElementQueriesBpMin["L"] = 1200] = "L";
    ElementQueriesBpMin[ElementQueriesBpMin["M"] = 1024] = "M";
    ElementQueriesBpMin[ElementQueriesBpMin["S"] = 768] = "S";
    ElementQueriesBpMin[ElementQueriesBpMin["XS"] = 480] = "XS";
})(ElementQueriesBpMin || (ElementQueriesBpMin = {}));
export var ElementQueriesBpMax;
(function (ElementQueriesBpMax) {
    ElementQueriesBpMax[ElementQueriesBpMax["XL"] = 1599] = "XL";
    ElementQueriesBpMax[ElementQueriesBpMax["L"] = 1199] = "L";
    ElementQueriesBpMax[ElementQueriesBpMax["M"] = 1023] = "M";
    ElementQueriesBpMax[ElementQueriesBpMax["S"] = 767] = "S";
    ElementQueriesBpMax[ElementQueriesBpMax["XS"] = 479] = "XS";
})(ElementQueriesBpMax || (ElementQueriesBpMax = {}));
var ElementQueries = /** @class */ (function (_super) {
    __extends(ElementQueries, _super);
    function ElementQueries() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isEqMinXL = false;
        _this.isEqMinL = false;
        _this.isEqMinM = false;
        _this.isEqMinS = false;
        _this.isEqMinXS = false;
        _this.isEqMaxXL = false;
        _this.isEqMaxL = false;
        _this.isEqMaxM = false;
        _this.isEqMaxS = false;
        _this.isEqMaxXS = false;
        _this.isEqS = false;
        _this.isEqM = false;
        _this.isEqL = false;
        _this.eqActive = true;
        return _this;
    }
    ElementQueries.prototype.mounted = function () {
        var _this = this;
        this.resizeElement(this.$el);
        this.resizeSensor = new ResizeSensor(this.$el, function () { return _this.resizeElement(_this.$el); });
    };
    ElementQueries.prototype.beforeDestroy = function () {
        if (this.resizeSensor !== undefined) {
            this.resizeSensor.detach();
            this.resizeSensor = undefined;
            delete this.resizeSensor;
        }
        this.$off('resize');
        this.$off('resizeDone');
    };
    ElementQueries.prototype.resizeElement = function (el) {
        var _this = this;
        if (this.eqActive) {
            var elWidth_1 = el.clientWidth;
            requestAnimationFrame(function () {
                _this.setEqMin(elWidth_1);
                _this.setEqMax(elWidth_1);
                _this.setEq(elWidth_1);
            });
            this.$emit('resize');
            clearTimeout(this.doneResizeEvent);
            this.doneResizeEvent = setTimeout(function () {
                _this.$emit('resizeDone');
            }, 200);
        }
        else {
            this.isEqMinXL = false;
            this.isEqMinL = false;
            this.isEqMinM = false;
            this.isEqMinS = false;
            this.isEqMinXS = false;
            this.isEqMaxXL = false;
            this.isEqMaxL = false;
            this.isEqMaxM = false;
            this.isEqMaxS = false;
            this.isEqMaxXS = false;
            this.isEqS = false;
            this.isEqM = false;
            this.isEqL = false;
        }
    };
    ElementQueries.prototype.setEqMin = function (elWidth) {
        // width >= XL
        if (elWidth >= ElementQueriesBpMin.XL) {
            if (!this.isEqMinXL) {
                this.isEqMinXL = true;
                this.$emit('isEqMinXL', true);
            }
        }
        else {
            if (this.isEqMinXL) {
                this.isEqMinXL = false;
                this.$emit('isEqMinXL', false);
            }
        }
        // width >= L
        if (elWidth >= ElementQueriesBpMin.L) {
            if (!this.isEqMinL) {
                this.isEqMinL = true;
                this.$emit('isEqMinL', true);
            }
        }
        else {
            if (this.isEqMinL) {
                this.isEqMinL = false;
                this.$emit('isEqMinL', false);
            }
        }
        // width >= M
        if (elWidth >= ElementQueriesBpMin.M) {
            if (!this.isEqMinM) {
                this.isEqMinM = true;
                this.$emit('isEqMinM', true);
            }
        }
        else {
            if (this.isEqMinM) {
                this.isEqMinM = false;
                this.$emit('isEqMinM', false);
            }
        }
        // width >= S
        if (elWidth >= ElementQueriesBpMin.S) {
            if (!this.isEqMinS) {
                this.isEqMinS = true;
                this.$emit('isEqMinS', true);
            }
        }
        else {
            if (this.isEqMinS) {
                this.isEqMinS = false;
                this.$emit('isEqMinS', false);
            }
        }
        // width >= XS
        if (elWidth >= ElementQueriesBpMin.XS) {
            if (!this.isEqMinXS) {
                this.isEqMinXS = true;
                this.$emit('isEqMinXS', true);
            }
        }
        else {
            if (this.isEqMinXS) {
                this.isEqMinXS = false;
                this.$emit('isEqMinXS', false);
            }
        }
    };
    ElementQueries.prototype.setEqMax = function (elWidth) {
        // width <= XL
        if (elWidth <= ElementQueriesBpMax.XL) {
            if (!this.isEqMaxXL) {
                this.isEqMaxXL = true;
                this.$emit('isEqMaxXL', true);
            }
        }
        else {
            if (this.isEqMaxXL) {
                this.isEqMaxXL = false;
                this.$emit('isEqMaxXL', false);
            }
        }
        // width <= L
        if (elWidth <= ElementQueriesBpMax.L) {
            if (!this.isEqMaxL) {
                this.isEqMaxL = true;
                this.$emit('isEqMaxL', true);
            }
        }
        else {
            if (this.isEqMaxL) {
                this.isEqMaxL = false;
                this.$emit('isEqMaxL', false);
            }
        }
        // width <= M
        if (elWidth <= ElementQueriesBpMax.M) {
            if (!this.isEqMaxM) {
                this.isEqMaxM = true;
                this.$emit('isEqMaxM', true);
            }
        }
        else {
            if (this.isEqMaxM) {
                this.isEqMaxM = false;
                this.$emit('isEqMaxM', false);
            }
        }
        // width <= S
        if (elWidth <= ElementQueriesBpMax.S) {
            if (!this.isEqMaxS) {
                this.isEqMaxS = true;
                this.$emit('isEqMaxS', true);
            }
        }
        else {
            if (this.isEqMaxS) {
                this.isEqMaxS = false;
                this.$emit('isEqMaxS', false);
            }
        }
        // width <= XS
        if (elWidth <= ElementQueriesBpMax.XS) {
            if (!this.isEqMaxXS) {
                this.isEqMaxXS = true;
                this.$emit('isEqMaxXS', true);
            }
        }
        else {
            if (this.isEqMaxXS) {
                this.isEqMaxXS = false;
                this.$emit('isEqMaxXS', false);
            }
        }
    };
    ElementQueries.prototype.setEq = function (elWidth) {
        // width >= minM && width <= maxL
        if (elWidth >= ElementQueriesBpMin.M && elWidth <= ElementQueriesBpMax.L) {
            if (!this.isEqL) {
                this.isEqL = true;
                this.$emit('isEqL', true);
            }
        }
        else {
            if (this.isEqL) {
                this.isEqL = false;
                this.$emit('isEqL', false);
            }
        }
        // width >= minS && width <= maxM
        if (elWidth >= ElementQueriesBpMin.S && elWidth <= ElementQueriesBpMax.M) {
            if (!this.isEqM) {
                this.isEqM = true;
                this.$emit('isEqM', true);
            }
        }
        else {
            if (this.isEqM) {
                this.isEqM = false;
                this.$emit('isEqM', false);
            }
        }
        // width >= minXS && width <= maxS
        if (elWidth >= ElementQueriesBpMin.XS && elWidth <= ElementQueriesBpMax.S) {
            if (!this.isEqS) {
                this.isEqS = true;
                this.$emit('isEqS', true);
            }
        }
        else {
            if (this.isEqS) {
                this.isEqS = false;
                this.$emit('isEqS', false);
            }
        }
    };
    ElementQueries = __decorate([
        Component
    ], ElementQueries);
    return ElementQueries;
}(ModulVue));
export { ElementQueries };
//# sourceMappingURL=element-queries.js.map