nd-gui/esm2015/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';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class ClickOutsideDirective {
    constructor() {
        this.elementIsActive = false;
        //	These are the elements, or the string IDs of elements, that are checked to see if they contain the clicked element.
        this.containerElements = [];
        // Click outside directive is not working when we are setting focus manually.
        this.manuallyActiveElement = false;
        //	Tell the parent to run its close handler because the user clicked outside of the element(s).
        this.clickOutside = new EventEmitter();
        // Tell that we already used manually active element.
        this.manuallyActiveElementUsed = new EventEmitter();
    }
    /**
     * Mouse click event whose target will either be inside or outside of the containing element(s).
     * @param {?} $event mouse click event
     * @return {?}
     */
    onClick($event) {
        if (this.manuallyActiveElement && !this.elementIsActive) {
            this.elementIsActive = true;
            this.manuallyActiveElementUsed.emit();
        }
        if (this.elementIsActive) {
            this.handleEvent($event);
        }
    }
    /**
     * @return {?}
     */
    elementIsClicked() {
        this.elementIsActive = true;
    }
    /**
     * @return {?}
     */
    elementIsFocus() {
        this.elementIsActive = true;
    }
    /**
     * @return {?}
     */
    elementIsChanged() {
        this.elementIsActive = true;
    }
    /**
     * Keyboard event to handle closing.
     * @param {?} $event keyboard event to be handled.
     * @return {?}
     */
    keyboardInput($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);
        }
    }
    /**
     * Handle events and check if we should close element.
     * @param {?} inputEvent Can be MouseClick or keyboard event etc.
     * @return {?}
     */
    handleEvent(inputEvent) {
        //	Proceed only if one or more container elements have been specified.
        if (!this.containerElements)
            return;
        //	Get the HTML element that was clicked.
        let /** @type {?} */ clickedElement = inputEvent.srcElement;
        if (clickedElement == null && inputEvent.target) {
            clickedElement = /** @type {?} */ (inputEvent.target);
        }
        //	See whether the clicked element is inside any of the container elements.
        let /** @type {?} */ clickedInside = this.checkIfClickedInside(clickedElement);
        //	Notify the caller if the user clicked "outside".
        if (!clickedInside) {
            this.elementIsActive = false;
            this.clickOutside.emit(inputEvent);
        }
    }
    /**
     * See whether the specified element is visible.
     * @param {?} el HTML element being checked
     * @return {?}
     */
    isVisible(el) {
        return el.offsetHeight !== null;
    }
    /**
     * See whether the clicked element is in any of the specified container elements.
     * @param {?} clickedElement HTML element that was clicked
     * @return {?}
     */
    checkIfClickedInside(clickedElement) {
        return this.containerElements.find(e => {
            if (!e) {
                return false;
            }
            let /** @type {?} */ containerElement = null;
            //regular element
            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) {
                //	See whether the clicked element is in the specified container element.
                return containerElement.contains(clickedElement);
            }
            else {
                //	No container element.
                return false;
            }
        });
    }
}
ClickOutsideDirective.decorators = [
    { type: Directive, args: [{
                selector: '[clickOutside]'
            },] },
];
/** @nocollapse */
ClickOutsideDirective.ctorParameters = () => [];
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'],] }]
};
class ndClickOutsideModule {
}
ndClickOutsideModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ClickOutsideDirective],
                exports: [ClickOutsideDirective]
            },] },
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
const HIGHLIGHTED = "highlighted";
const DISABLED = "disabled";

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
/**
 * Generated bundle index. Do not edit.
 */

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