import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
import { KeyCode } from '../services/util/key-util';
var ModalDialogComponent = (function () {
    function ModalDialogComponent() {
        this.okEnabled = true;
        this.hidden = true;
        this.headerText = '';
        this.okButtonText = 'Ok';
        this.errorMessage = null;
        this.height = '60%';
        this.width = '50%';
        this.maxHeight = '300em';
        this.maxWidth = '200em';
        this.close = new EventEmitter(false);
        this.cancel = new EventEmitter(false);
        this.ok = new EventEmitter(false);
        this.open = new EventEmitter(false);
    }
    ModalDialogComponent.prototype.onCancel = function (e) {
        this.cancel.emit(true);
    };
    ModalDialogComponent.prototype.ngOnChanges = function (change) {
        var _this = this;
        if (change.hidden) {
            if (!this.hidden) {
                this.addEscapeListener();
                // wait until the dialog is really show up
                setTimeout(function () { return _this.open.emit(false); }, 2);
            }
            else {
                this.removeEscapeListener();
            }
        }
    };
    ModalDialogComponent.prototype.addEscapeListener = function () {
        var _this = this;
        if (!this._keyListener) {
            this._keyListener = function (e) {
                if (e.keyCode === KeyCode.ESCAPE) {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.cancel.emit(false);
                }
                else if (e.keyCode === KeyCode.ENTER) {
                    e.stopPropagation();
                    e.preventDefault();
                    _this.ok.emit(true);
                }
            };
            document.body.addEventListener('keyup', this._keyListener);
        }
    };
    ModalDialogComponent.prototype.removeEscapeListener = function () {
        if (this._keyListener) {
            document.body.removeEventListener('keyup', this._keyListener);
            this._keyListener = null;
        }
    };
    return ModalDialogComponent;
}());
export { ModalDialogComponent };
ModalDialogComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'cw-modal-dialog',
                template: "\n  <div class=\"ui dimmer modals page transition visible active\" *ngIf=\"!hidden\" (click)=\"onCancel($event)\">\n    <div class=\"ui modal cw-modal-dialog\"\n      style=\"height:{{height}};width:{{width}};max-height:{{maxHeight}};max-width:{{maxWidth}}\" (click)=\"$event.stopPropagation()\">\n\n      <div class=\"header\">{{headerText}}</div>\n      <div flex layout-fill layout=\"column\" class=\"content\">\n        <div *ngIf=\"errorMessage != null\" class=\"ui negative message\">{{errorMessage}}</div>\n        <ng-content></ng-content>\n      </div>\n      <div class=\"actions\">\n        <div class=\"ui positive right labeled icon button\" [class.disabled]=\"!okEnabled\" (click)=\"ok.emit()\">{{okButtonText}}\n          <i class=\"checkmark icon\"></i>\n        </div>\n        <div class=\"ui black deny button\" (click)=\"cancel.emit(true)\">Cancel</div>\n      </div>\n    </div>\n  </div>\n"
            },] },
];
/** @nocollapse */
ModalDialogComponent.ctorParameters = function () { return []; };
ModalDialogComponent.propDecorators = {
    'okEnabled': [{ type: Input },],
    'hidden': [{ type: Input },],
    'headerText': [{ type: Input },],
    'okButtonText': [{ type: Input },],
    'errorMessage': [{ type: Input },],
    'height': [{ type: Input },],
    'width': [{ type: Input },],
    'maxHeight': [{ type: Input },],
    'maxWidth': [{ type: Input },],
    'close': [{ type: Output },],
    'cancel': [{ type: Output },],
    'ok': [{ type: Output },],
    'open': [{ type: Output },],
};
//# sourceMappingURL=dialog-component.js.map