ace-editor-ng9/fesm5/ace-editor-ng9.js

A fork from ng2-ace-editor updated to work with Angular 9

import { __decorate, __spread } from 'tslib';
import { EventEmitter, ElementRef, NgZone, Output, Input, Directive, Component, forwardRef, NgModule } from '@angular/core';
import 'brace';
import 'brace/theme/monokai';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

var AceEditorDirective = /** @class */ (function () {
    function AceEditorDirective(elementRef, zone) {
        var _this = this;
        this.zone = zone;
        this.textChanged = new EventEmitter();
        this.textChange = new EventEmitter();
        this._options = {};
        this._readOnly = false;
        this._theme = "monokai";
        this._mode = "html";
        this._autoUpdateContent = true;
        this._durationBeforeCallback = 0;
        this._text = "";
        var el = elementRef.nativeElement;
        this.zone.runOutsideAngular(function () {
            _this.editor = ace["edit"](el);
        });
        this.editor.$blockScrolling = Infinity;
    }
    AceEditorDirective.prototype.ngOnInit = function () {
        this.init();
        this.initEvents();
    };
    AceEditorDirective.prototype.ngOnDestroy = function () {
        this.editor.destroy();
    };
    AceEditorDirective.prototype.init = function () {
        this.editor.setOptions(this._options || {});
        this.editor.setTheme("ace/theme/" + this._theme);
        this.setMode(this._mode);
        this.editor.setReadOnly(this._readOnly);
    };
    AceEditorDirective.prototype.initEvents = function () {
        var _this = this;
        this.editor.on('change', function () { return _this.updateText(); });
        this.editor.on('paste', function () { return _this.updateText(); });
    };
    AceEditorDirective.prototype.updateText = function () {
        var _this = this;
        var newVal = this.editor.getValue();
        if (newVal === this.oldText) {
            return;
        }
        if (!this._durationBeforeCallback) {
            this._text = newVal;
            this.zone.run(function () {
                _this.textChange.emit(newVal);
                _this.textChanged.emit(newVal);
            });
        }
        else {
            if (this.timeoutSaving != null) {
                clearTimeout(this.timeoutSaving);
            }
            this.timeoutSaving = setTimeout(function () {
                _this._text = newVal;
                _this.zone.run(function () {
                    _this.textChange.emit(newVal);
                    _this.textChanged.emit(newVal);
                });
                _this.timeoutSaving = null;
            }, this._durationBeforeCallback);
        }
        this.oldText = newVal;
    };
    Object.defineProperty(AceEditorDirective.prototype, "options", {
        set: function (options) {
            this._options = options;
            this.editor.setOptions(options || {});
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(AceEditorDirective.prototype, "readOnly", {
        set: function (readOnly) {
            this._readOnly = readOnly;
            this.editor.setReadOnly(readOnly);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(AceEditorDirective.prototype, "theme", {
        set: function (theme) {
            this._theme = theme;
            this.editor.setTheme("ace/theme/" + theme);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(AceEditorDirective.prototype, "mode", {
        set: function (mode) {
            this.setMode(mode);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorDirective.prototype.setMode = function (mode) {
        this._mode = mode;
        if (typeof this._mode === 'object') {
            this.editor.getSession().setMode(this._mode);
        }
        else {
            this.editor.getSession().setMode("ace/mode/" + this._mode);
        }
    };
    Object.defineProperty(AceEditorDirective.prototype, "text", {
        get: function () {
            return this._text;
        },
        set: function (text) {
            this.setText(text);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorDirective.prototype.setText = function (text) {
        if (this._text !== text) {
            if (text === null || text === undefined) {
                text = "";
            }
            if (this._autoUpdateContent === true) {
                this._text = text;
                this.editor.setValue(text);
                this.editor.clearSelection();
            }
        }
    };
    Object.defineProperty(AceEditorDirective.prototype, "autoUpdateContent", {
        set: function (status) {
            this._autoUpdateContent = status;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(AceEditorDirective.prototype, "durationBeforeCallback", {
        set: function (num) {
            this.setDurationBeforeCallback(num);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorDirective.prototype.setDurationBeforeCallback = function (num) {
        this._durationBeforeCallback = num;
    };
    Object.defineProperty(AceEditorDirective.prototype, "aceEditor", {
        get: function () {
            return this.editor;
        },
        enumerable: true,
        configurable: true
    });
    AceEditorDirective.ctorParameters = function () { return [
        { type: ElementRef },
        { type: NgZone }
    ]; };
    __decorate([
        Output()
    ], AceEditorDirective.prototype, "textChanged", void 0);
    __decorate([
        Output()
    ], AceEditorDirective.prototype, "textChange", void 0);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "options", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "readOnly", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "theme", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "mode", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "text", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "autoUpdateContent", null);
    __decorate([
        Input()
    ], AceEditorDirective.prototype, "durationBeforeCallback", null);
    AceEditorDirective = __decorate([
        Directive({
            selector: '[ace-editor]'
        })
    ], AceEditorDirective);
    return AceEditorDirective;
}());

var AceEditorComponent = /** @class */ (function () {
    function AceEditorComponent(elementRef, zone) {
        var _this = this;
        this.zone = zone;
        this.textChanged = new EventEmitter();
        this.textChange = new EventEmitter();
        this.style = {};
        this._options = {};
        this._readOnly = false;
        this._theme = "monokai";
        this._mode = "html";
        this._autoUpdateContent = true;
        this._durationBeforeCallback = 0;
        this._text = "";
        this._onChange = function (_) {
        };
        var el = elementRef.nativeElement;
        this.zone.runOutsideAngular(function () {
            _this._editor = ace['edit'](el);
        });
        this._editor.$blockScrolling = Infinity;
    }
    AceEditorComponent_1 = AceEditorComponent;
    AceEditorComponent.prototype.ngOnInit = function () {
        this.init();
        this.initEvents();
    };
    AceEditorComponent.prototype.ngOnDestroy = function () {
        this._editor.destroy();
    };
    AceEditorComponent.prototype.init = function () {
        this.setOptions(this._options || {});
        this.setTheme(this._theme);
        this.setMode(this._mode);
        this.setReadOnly(this._readOnly);
    };
    AceEditorComponent.prototype.initEvents = function () {
        var _this = this;
        this._editor.on('change', function () { return _this.updateText(); });
        this._editor.on('paste', function () { return _this.updateText(); });
    };
    AceEditorComponent.prototype.updateText = function () {
        var _this = this;
        var newVal = this._editor.getValue();
        if (newVal === this.oldText) {
            return;
        }
        if (!this._durationBeforeCallback) {
            this._text = newVal;
            this.zone.run(function () {
                _this.textChange.emit(newVal);
                _this.textChanged.emit(newVal);
            });
            this._onChange(newVal);
        }
        else {
            if (this.timeoutSaving) {
                clearTimeout(this.timeoutSaving);
            }
            this.timeoutSaving = setTimeout(function () {
                _this._text = newVal;
                _this.zone.run(function () {
                    _this.textChange.emit(newVal);
                    _this.textChanged.emit(newVal);
                });
                _this.timeoutSaving = null;
            }, this._durationBeforeCallback);
        }
        this.oldText = newVal;
    };
    Object.defineProperty(AceEditorComponent.prototype, "options", {
        set: function (options) {
            this.setOptions(options);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setOptions = function (options) {
        this._options = options;
        this._editor.setOptions(options || {});
    };
    Object.defineProperty(AceEditorComponent.prototype, "readOnly", {
        set: function (readOnly) {
            this.setReadOnly(readOnly);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setReadOnly = function (readOnly) {
        this._readOnly = readOnly;
        this._editor.setReadOnly(readOnly);
    };
    Object.defineProperty(AceEditorComponent.prototype, "theme", {
        set: function (theme) {
            this.setTheme(theme);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setTheme = function (theme) {
        this._theme = theme;
        this._editor.setTheme("ace/theme/" + theme);
    };
    Object.defineProperty(AceEditorComponent.prototype, "mode", {
        set: function (mode) {
            this.setMode(mode);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setMode = function (mode) {
        this._mode = mode;
        if (typeof this._mode === 'object') {
            this._editor.getSession().setMode(this._mode);
        }
        else {
            this._editor.getSession().setMode("ace/mode/" + this._mode);
        }
    };
    Object.defineProperty(AceEditorComponent.prototype, "value", {
        get: function () {
            return this.text;
        },
        set: function (value) {
            this.setText(value);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.writeValue = function (value) {
        this.setText(value);
    };
    AceEditorComponent.prototype.registerOnChange = function (fn) {
        this._onChange = fn;
    };
    AceEditorComponent.prototype.registerOnTouched = function (fn) { };
    Object.defineProperty(AceEditorComponent.prototype, "text", {
        get: function () {
            return this._text;
        },
        set: function (text) {
            this.setText(text);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setText = function (text) {
        if (text === null || text === undefined) {
            text = "";
        }
        if (this._text !== text && this._autoUpdateContent === true) {
            this._text = text;
            this._editor.setValue(text);
            this._onChange(text);
            this._editor.clearSelection();
        }
    };
    Object.defineProperty(AceEditorComponent.prototype, "autoUpdateContent", {
        set: function (status) {
            this.setAutoUpdateContent(status);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setAutoUpdateContent = function (status) {
        this._autoUpdateContent = status;
    };
    Object.defineProperty(AceEditorComponent.prototype, "durationBeforeCallback", {
        set: function (num) {
            this.setDurationBeforeCallback(num);
        },
        enumerable: true,
        configurable: true
    });
    AceEditorComponent.prototype.setDurationBeforeCallback = function (num) {
        this._durationBeforeCallback = num;
    };
    AceEditorComponent.prototype.getEditor = function () {
        return this._editor;
    };
    var AceEditorComponent_1;
    AceEditorComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: NgZone }
    ]; };
    __decorate([
        Output()
    ], AceEditorComponent.prototype, "textChanged", void 0);
    __decorate([
        Output()
    ], AceEditorComponent.prototype, "textChange", void 0);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "style", void 0);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "options", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "readOnly", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "theme", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "mode", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "value", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "text", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "autoUpdateContent", null);
    __decorate([
        Input()
    ], AceEditorComponent.prototype, "durationBeforeCallback", null);
    AceEditorComponent = AceEditorComponent_1 = __decorate([
        Component({
            selector: 'ace-editor',
            template: '',
            providers: [{
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(function () { return AceEditorComponent_1; }),
                    multi: true
                }],
            styles: [':host { display:block;width:100%; }']
        })
    ], AceEditorComponent);
    return AceEditorComponent;
}());

var list = [
    AceEditorComponent,
    AceEditorDirective
];
var AceEditorModule = /** @class */ (function () {
    function AceEditorModule() {
    }
    AceEditorModule = __decorate([
        NgModule({
            declarations: __spread(list),
            imports: [],
            providers: [],
            exports: list
        })
    ], AceEditorModule);
    return AceEditorModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { AceEditorComponent, AceEditorDirective, AceEditorModule };
//# sourceMappingURL=ace-editor-ng9.js.map