nd-gui/esm5/nd-gui-core.js

UI components for NetDocuments

import { NgModule, Directive, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { CTRL, SHIFT, ALT, TAB } from 'nd-common';

var ClickOutsideDirective = /** @class */ (function () {
    function ClickOutsideDirective() {
        this.elementIsActive = false;
        this.containerElements = [];
        this.manuallyActiveElement = false;
        this.clickOutside = new EventEmitter();
        this.manuallyActiveElementUsed = new EventEmitter();
    }
    ClickOutsideDirective.prototype.onClick = function ($event) {
        if (this.manuallyActiveElement && !this.elementIsActive) {
            this.elementIsActive = true;
            this.manuallyActiveElementUsed.emit();
        }
        if (this.elementIsActive) {
            this.handleEvent($event);
        }
    };
    ClickOutsideDirective.prototype.elementIsClicked = function () {
        this.elementIsActive = true;
    };
    ClickOutsideDirective.prototype.elementIsFocus = function () {
        this.elementIsActive = true;
    };
    ClickOutsideDirective.prototype.elementIsChanged = function () {
        this.elementIsActive = true;
    };
    ClickOutsideDirective.prototype.keyboardInput = function ($event) {
        if ($event.ctrlKey && $event.keyCode != CTRL
            && (($event.shiftKey && $event.keyCode != SHIFT) || ($event.altKey && $event.keyCode != ALT))) {
            this.elementIsActive = true;
        }
        if ($event.keyCode === TAB) {
            this.handleEvent($event);
        }
    };
    ClickOutsideDirective.prototype.handleEvent = function (inputEvent) {
        if (!this.containerElements)
            return;
        var clickedElement = inputEvent.srcElement;
        if (clickedElement == null && inputEvent.target) {
            clickedElement = (inputEvent.target);
        }
        var clickedInside = this.checkIfClickedInside(clickedElement);
        if (!clickedInside) {
            this.elementIsActive = false;
            this.clickOutside.emit(inputEvent);
        }
    };
    ClickOutsideDirective.prototype.isVisible = function (el) {
        return el.offsetHeight !== null;
    };
    ClickOutsideDirective.prototype.checkIfClickedInside = function (clickedElement) {
        var _this = this;
        return this.containerElements.find(function (e) {
            if (!e) {
                return false;
            }
            var containerElement = null;
            if (e.contains && _this.isVisible(e)) {
                containerElement = e;
            }
            else if (e.el && _this.isVisible(e.el.nativeElement)) {
                containerElement = e.el.nativeElement;
            }
            else if (e._eref && _this.isVisible(e._eref.nativeElement)) {
                containerElement = e._eref.nativeElement;
            }
            else if (typeof e === "string") {
                containerElement = document.getElementById(e);
            }
            if (containerElement) {
                return containerElement.contains(clickedElement);
            }
            else {
                return false;
            }
        });
    };
    return ClickOutsideDirective;
}());
ClickOutsideDirective.decorators = [
    { type: Directive, args: [{
                selector: '[clickOutside]'
            },] },
];
ClickOutsideDirective.ctorParameters = function () { return []; };
ClickOutsideDirective.propDecorators = {
    containerElements: [{ type: Input }],
    manuallyActiveElement: [{ type: Input }],
    clickOutside: [{ type: Output }],
    manuallyActiveElementUsed: [{ type: Output }],
    onClick: [{ type: HostListener, args: ['document:contextmenu', ['$event'],] }, { type: HostListener, args: ['document:click', ['$event'],] }],
    elementIsClicked: [{ type: HostListener, args: ["click",] }],
    elementIsFocus: [{ type: HostListener, args: ["focus",] }],
    elementIsChanged: [{ type: HostListener, args: ["change",] }],
    keyboardInput: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
};
var ndClickOutsideModule = /** @class */ (function () {
    function ndClickOutsideModule() {
    }
    return ndClickOutsideModule;
}());
ndClickOutsideModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ClickOutsideDirective],
                exports: [ClickOutsideDirective]
            },] },
];
var HIGHLIGHTED = "highlighted";
var DISABLED = "disabled";

export { ClickOutsideDirective, ndClickOutsideModule, HIGHLIGHTED, DISABLED };
//# sourceMappingURL=nd-gui-core.js.map