var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { bindable, bindingMode, containerless, customElement, inlineView } from 'aurelia-framework';
import ResizeObserver from 'resize-observer-polyfill';
import { UIInternal } from '../../utils/ui-internal';
import { UITether } from '../../utils/ui-tether';
export var UIDrop = (function () {
    function UIDrop(element) {
        var _this = this;
        this.element = element;
        this.class = '';
        this.isOpen = false;
        this.stretch = true;
        this.closeOnClick = true;
        this.anchorEl = null;
        this.attachToViewport = false;
        this.closeOnScroll = true;
        this.autoOpen = true;
        this.toggleDropListener = function () {
            _this.toggleDrop();
        };
        this.position = element.getAttribute('position') || 'tl';
        this.anchorPosition = element.getAttribute('anchor') || 'bl';
        this.closeOnClick = !isFalse(element.getAttribute('close-on-click'));
    }
    UIDrop.prototype.tether = function (anchorEl) {
        this.tetherObj = UITether.tether((this.anchorEl = anchorEl), this.vmElement, {
            anchorPosition: this.anchorPosition,
            attachToViewport: this.attachToViewport,
            position: this.position,
            resize: this.stretch,
        });
    };
    UIDrop.prototype.updatePosition = function () {
        this.tetherObj.updatePosition();
    };
    UIDrop.prototype.toggleDrop = function (open) {
        var _this = this;
        this.disposeListeners();
        this.vmElement.dataset.show = 'false';
        this.isOpen = open === undefined ? !this.isOpen : open;
        if (this.isOpen) {
            this.obClick = UIInternal.subscribe(UIInternal.EVT_VIEWPORT_CLICK, function (t) { return _this.canClose(t); });
            this.obWheel = UIInternal.subscribe(UIInternal.EVT_VIEWPORT_WHEEL, function (t) { return _this.canClose(t); });
            this.obViewportResize = UIInternal.subscribe(UIInternal.EVT_VIEWPORT_RESIZE, function () { return _this.updatePosition(); });
            this.obResize = new ResizeObserver(function () { return _this.updatePosition(); });
            this.obResize.observe(this.vmElement);
            this.obResize.observe(this.anchorEl);
            this.element.dispatchEvent(UIInternal.createEvent('open'));
            UIInternal.queueMicroTask(function () {
                _this.tetherObj.updatePosition();
                _this.vmElement.dataset.show = 'true';
            });
        }
    };
    UIDrop.prototype.closeDrop = function () {
        var _this = this;
        UIInternal.queueTask(function () {
            _this.isOpen = false;
            _this.disposeListeners();
            _this.element.dispatchEvent(UIInternal.createEvent('close'));
        });
    };
    UIDrop.prototype.disposeListeners = function () {
        if (this.obClick) {
            this.obClick.dispose();
        }
        if (this.obResize) {
            this.obResize.disconnect();
        }
        if (this.obViewportResize) {
            this.obViewportResize.dispose();
        }
        if (this.obWheel) {
            this.obWheel.dispose();
        }
    };
    UIDrop.prototype.attached = function () {
        var _this = this;
        UIInternal.queueTask(function () {
            if (_this.anchorEl != null && _this.tetherObj == null && _this.vmElement != null) {
                _this.tether(_this.anchorEl);
                if (_this.autoOpen === true) {
                    _this.anchorEl.addEventListener('click', _this.toggleDropListener);
                }
            }
        });
    };
    UIDrop.prototype.anchorElChanged = function (n, o) {
        if (o == null && n != null) {
            this.attached();
        }
    };
    UIDrop.prototype.detached = function () {
        var _a;
        (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.toggleDropListener);
        this.disposeListeners();
        if (this.tetherObj) {
            this.tetherObj.dispose();
            this.tetherObj = null;
        }
    };
    UIDrop.prototype.close = function ($event) {
        if (this.closeOnClick) {
            this.closeDrop();
        }
        else {
            $event.stopEvent(true);
        }
    };
    UIDrop.prototype.closeChildUIDropElements = function ($event) {
        var e_1, _a;
        var _b;
        $event.stopEvent();
        var closestOpenenedUiDrop = $event.target.closest('[data-open="true"]');
        var childUIDrop = Array.from((_b = this.vmElement) === null || _b === void 0 ? void 0 : _b.querySelectorAll('[data-open="true"]')).filter(function (b) { var _a; return ((_a = b.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'a' && b.click != null; });
        try {
            for (var childUIDrop_1 = __values(childUIDrop), childUIDrop_1_1 = childUIDrop_1.next(); !childUIDrop_1_1.done; childUIDrop_1_1 = childUIDrop_1.next()) {
                var child = childUIDrop_1_1.value;
                if (closestOpenenedUiDrop == this.vmContainerElement || !hasParent(child, closestOpenenedUiDrop)) {
                    child.click();
                }
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (childUIDrop_1_1 && !childUIDrop_1_1.done && (_a = childUIDrop_1.return)) _a.call(childUIDrop_1);
            }
            finally { if (e_1) throw e_1.error; }
        }
    };
    UIDrop.prototype.canClose = function (t) {
        if (t == null || (!hasParent(t, this.vmElement) && !hasParent(t, this.anchorEl))) {
            this.closeDrop();
        }
    };
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], UIDrop.prototype, "class", void 0);
    __decorate([
        bindable({ defaultBindingMode: bindingMode.toView }),
        __metadata("design:type", Boolean)
    ], UIDrop.prototype, "isOpen", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", Boolean)
    ], UIDrop.prototype, "stretch", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", Element)
    ], UIDrop.prototype, "anchorEl", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", Boolean)
    ], UIDrop.prototype, "attachToViewport", void 0);
    __decorate([
        bindable,
        __metadata("design:type", Boolean)
    ], UIDrop.prototype, "closeOnScroll", void 0);
    __decorate([
        bindable,
        __metadata("design:type", Boolean)
    ], UIDrop.prototype, "autoOpen", void 0);
    UIDrop = __decorate([
        containerless(),
        customElement('ui-drop'),
        inlineView("<template>\n    <div ref=\"vmContainerElement\" slot=\"ui-drop\" class=\"ui-drop\" click.delegate=\"closeDrop()\" data-open.bind=\"isOpen\">\n      <div ref=\"vmElement\" class=\"ui-drop__body ${class}\" click.delegate=\"close($event)\" mouseup.trigger=\"closeChildUIDropElements($event)\">\n        <slot></slot>\n      </div>\n    </div>\n  </template>"),
        __metadata("design:paramtypes", [Element])
    ], UIDrop);
    return UIDrop;
}());

//# sourceMappingURL=ui-drop.js.map
