import { __decorate, __metadata } from "tslib";
import { Directive, ElementRef, EventEmitter, HostListener, Inject, NgZone, Output } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { BindThis, isBlank } from '@jscrpt/common';
import * as i0 from "@angular/core";
/**
 * Directive used for resizing/changing of width
 */
export class WidthResizerSADirective {
    //######################### constructor #########################
    constructor(document, element, ngZone) {
        this.document = document;
        this.element = element;
        this.ngZone = ngZone;
        /**
         * Value of last recorded x coordinate of mouse
         */
        this.lastXCoordinate = null;
        //######################### public properties - outputs #########################
        /**
         * Occurs when size changes, represents difference, positive is that X increases, negative is if x decreases
         */
        this.size = new EventEmitter();
    }
    //######################### protected methods - host #########################
    /**
     * Handles start of dragging
     * @param event - Mouse event that occured
     */
    dragStart(event) {
        this.ngZone.runOutsideAngular(() => {
            this.document.addEventListener('mousemove', this.drag);
            this.document.addEventListener('mouseup', this.dragEnd);
        });
        this.element.nativeElement.classList.add('hovering');
        event.stopImmediatePropagation();
        event.preventDefault();
        this.lastXCoordinate = event.clientX;
    }
    /**
     * Handles drag itself
     * @param event - Mouse event that occured
     */
    drag(event) {
        if (isBlank(this.lastXCoordinate)) {
            return;
        }
        this.size.emit(event.clientX - this.lastXCoordinate);
        event.stopImmediatePropagation();
        event.preventDefault();
        this.lastXCoordinate = event.clientX;
    }
    /**
     * Handles end of dragging
     * @param event - Mouse event that occured
     */
    dragEnd(event) {
        this.ngZone.runOutsideAngular(() => {
            this.document.removeEventListener('mousemove', this.drag);
            this.document.removeEventListener('mouseup', this.dragEnd);
        });
        this.element.nativeElement.classList.remove('hovering');
        event.stopImmediatePropagation();
        event.preventDefault();
        this.lastXCoordinate = null;
    }
}
WidthResizerSADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: WidthResizerSADirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
WidthResizerSADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: WidthResizerSADirective, isStandalone: true, selector: "[widthResizer]", outputs: { size: "size" }, host: { listeners: { "mousedown": "dragStart($event)" } }, ngImport: i0 });
__decorate([
    BindThis,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [MouseEvent]),
    __metadata("design:returntype", void 0)
], WidthResizerSADirective.prototype, "drag", null);
__decorate([
    BindThis,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [MouseEvent]),
    __metadata("design:returntype", void 0)
], WidthResizerSADirective.prototype, "dragEnd", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: WidthResizerSADirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[widthResizer]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { size: [{
                type: Output
            }], dragStart: [{
                type: HostListener,
                args: ['mousedown', ['$event']]
            }], drag: [], dragEnd: [] } });
//# sourceMappingURL=widthResizer.directive.js.map