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);
};
import { Directive, ElementRef, HostListener, Input } from "@angular/core";
// Initially by https://github.com/cedvdb/ng2draggable
// MIT License: https://github.com/cedvdb/ng2draggable/blob/master/LICENSE
var DraggableDirective = /** @class */ (function () {
    function DraggableDirective(element) {
        this.element = element;
        this.topStart = 0;
        this.leftStart = 0;
        this._allowDrag = true;
    }
    DraggableDirective.prototype.ngOnInit = function () {
        // draggable only for desktop version (styles for desktop are added when innerWidth>1100)
        if (window.innerWidth < 768) {
            this._allowDrag = false;
        }
        // css changes
        if (this._allowDrag) {
            this.element.nativeElement.style.position = "relative";
            this.element.nativeElement.className += " cursor-draggable";
        }
    };
    Object.defineProperty(DraggableDirective.prototype, "allowDrag", {
        set: function (value) {
            this._allowDrag = value;
            if (this._allowDrag) {
                this.element.nativeElement.className += " cursor-draggable";
            }
            else {
                this.element.nativeElement.className = this.element.nativeElement.className.replace(" cursor-draggable", "");
            }
        },
        enumerable: false,
        configurable: true
    });
    DraggableDirective.prototype.onMouseDown = function (event) {
        var eventTargetTag = event.target["tagName"].toLowerCase();
        if (eventTargetTag === "input" || eventTargetTag === "button" || eventTargetTag === "textarea") {
            return;
        }
        if (event.button === 2) {
            return; // prevents right click drag, remove his if you don't want it
        }
        this.md = true;
        this.topStart = event.clientY - this.element.nativeElement.style.top.replace("px", "");
        this.leftStart = event.clientX - this.element.nativeElement.style.left.replace("px", "");
    };
    DraggableDirective.prototype.onMouseUp = function (event) {
        this.md = false;
    };
    DraggableDirective.prototype.onMouseMove = function (event) {
        if (this.md && this._allowDrag) {
            this.element.nativeElement.style.top = (event.clientY - this.topStart) + "px";
            this.element.nativeElement.style.left = (event.clientX - this.leftStart) + "px";
        }
    };
    DraggableDirective.prototype.onTouchStart = function (event) {
        this.md = true;
        this.topStart = event.changedTouches[0].clientY - this.element.nativeElement.style.top.replace("px", "");
        this.leftStart = event.changedTouches[0].clientX - this.element.nativeElement.style.left.replace("px", "");
        event.stopPropagation();
    };
    DraggableDirective.prototype.onTouchEnd = function () {
        this.md = false;
    };
    DraggableDirective.prototype.onTouchMove = function (event) {
        if (this.md && this._allowDrag) {
            this.element.nativeElement.style.top = (event.changedTouches[0].clientY - this.topStart) + "px";
            this.element.nativeElement.style.left = (event.changedTouches[0].clientX - this.leftStart) + "px";
        }
        event.stopPropagation();
    };
    __decorate([
        Input("path-draggable"),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DraggableDirective.prototype, "allowDrag", null);
    __decorate([
        HostListener("mousedown", ["$event"]),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [MouseEvent]),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onMouseDown", null);
    __decorate([
        HostListener("document:mouseup"),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [MouseEvent]),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onMouseUp", null);
    __decorate([
        HostListener("document:mousemove", ["$event"]),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [MouseEvent]),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onMouseMove", null);
    __decorate([
        HostListener("touchstart", ["$event"]),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onTouchStart", null);
    __decorate([
        HostListener("document:touchend"),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onTouchEnd", null);
    __decorate([
        HostListener("document:touchmove", ["$event"]),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], DraggableDirective.prototype, "onTouchMove", null);
    DraggableDirective = __decorate([
        Directive({
            selector: "[path-draggable]"
        }),
        __metadata("design:paramtypes", [ElementRef])
    ], DraggableDirective);
    return DraggableDirective;
}());
export { DraggableDirective };
//# sourceMappingURL=draggable.directive.js.map