@firestitch/text-editor 12.4.1 → 12.4.3

package/app/components/text-editor/text-editor.component.d.ts

@@ -1,37 +1,33 @@
-import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FsTextEditorConfig } from '../../interfaces/config.interface';
-import { EditorComponent } from '../../modules/ngx-monaco-editor/editor.component';
 import * as i0 from "@angular/core";
 export declare class FsTextEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {
-    private _element;
     private _document;
+    readonly LINE_HEIGHT = 18;
     config: FsTextEditorConfig;
     scrollable: boolean;
-    init: EventEmitter<any>;
+    ready: EventEmitter<any>;
     blur: EventEmitter<any>;
-    _editorContainer: EditorComponent;
-    defaultConfig: FsTextEditorConfig;
     onChange: (_: any) => void;
     onTouched: () => void;
-    private _window;
-    get monaco(): any;
-    constructor(_element: ElementRef, _document: Document);
-    readonly LINE_HEIGHT = 18;
     private _editorRef;
     private _value;
+    private _window;
+    constructor(_document: Document);
+    get monaco(): any;
     ngOnInit(): void;
     ngOnDestroy(): void;
     get value(): string;
     onEditorInit(event: any): void;
     writeValue(value: any): void;
     changed(e: any): void;
+    updateLayout(): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     private _initEditor;
     private _updateEditorHeight;
-    updateLayout(): void;
     private _disableScroll;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsTextEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FsTextEditorComponent, "fs-text-editor", never, { "config": "config"; "scrollable": "scrollable"; }, { "init": "init"; "blur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FsTextEditorComponent, "fs-text-editor", never, { "config": "config"; "scrollable": "scrollable"; }, { "ready": "ready"; "blur": "blur"; }, never, never>;
 }

package/app/interfaces/config.interface.d.ts

@@ -1,4 +1,6 @@
 import { editor } from 'monaco-editor';
 export interface FsTextEditorConfig extends editor.IStandaloneEditorConstructionOptions {
     autoHeight?: boolean;
+    height?: any;
+    ready?: (editor: editor.ICodeEditor) => void;
 }

package/app/modules/ngx-monaco-editor/base-editor.d.ts

@@ -1,18 +1,19 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { editor } from 'monaco-editor';
 import { NgxMonacoEditorConfig } from './config';
 import * as i0 from "@angular/core";
 export declare abstract class BaseEditor implements AfterViewInit, OnDestroy {
     protected config: NgxMonacoEditorConfig;
     _editorContainer: ElementRef;
     onInit: EventEmitter<any>;
-    protected _editor: any;
+    protected _editor: editor.ICodeEditor;
     protected _options: any;
     protected _windowResizeSubscription: Subscription;
     constructor(config: NgxMonacoEditorConfig);
     ngAfterViewInit(): void;
-    protected abstract initMonaco(options: any): void;
     ngOnDestroy(): void;
+    protected abstract initMonaco(options: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseEditor, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BaseEditor, "ng-component", never, {}, { "onInit": "onInit"; }, never, never>;
 }

package/bundles/firestitch-text-editor.umd.js

@@ -509,15 +509,15 @@
           else {
               loadedMonaco = true;
               loadPromise = new Promise(function (resolve) {
-                  var baseUrl = (_this.config.baseUrl || './assets') + '/monaco-editor/min/vs';
+                  var baseUrl = (_this.config.baseUrl || './assets') + "/monaco-editor/min/vs";
                   if (typeof (window.monaco) === 'object') {
                       resolve();
                       return;
                   }
                   var onGotAmdLoader = function () {
                       // Load monaco
-                      window.require.config({ paths: { 'vs': "" + baseUrl } });
-                      window.require(["vs/editor/editor.main"], function () {
+                      window.require.config({ paths: { vs: "" + baseUrl } });
+                      window.require(['vs/editor/editor.main'], function () {
                           if (typeof _this.config.onMonacoLoad === 'function') {
                               _this.config.onMonacoLoad();
                           }
@@ -555,7 +555,7 @@
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseEditor, decorators: [{
               type: i0.Component,
               args: [{
-                      template: ''
+                      template: '',
                   }]
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{
@@ -585,7 +585,7 @@
               return this._options;
           },
           set: function (options) {
-              this._options = Object.assign({}, this.config.defaultOptions, options);
+              this._options = Object.assign(Object.assign({}, this.config.defaultOptions), options);
               if (this._editor) {
                   this._editor.dispose();
                   this.initMonaco(options);
@@ -662,19 +662,19 @@
   EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorComponent, selector: "ngx-monaco-editor", inputs: { options: "options", model: "model" }, providers: [{
               provide: i2.NG_VALUE_ACCESSOR,
               useExisting: i0.forwardRef(function () { return EditorComponent; }),
-              multi: true
-          }], usesInheritance: true, ngImport: i0__namespace, template: '<div class="editor-container" #editorContainer></div>', isInline: true, styles: ["\n      :host {\n          display: block;\n          height: 200px;\n      }\n\n      .editor-container {\n          width: 100%;\n          height: 98%;\n      }\n  "] });
+              multi: true,
+          }], usesInheritance: true, ngImport: i0__namespace, template: '<div class="editor-container" #editorContainer></div>', isInline: true, styles: ["\n\n\n      .editor-container {\n          width: 100%;\n          height: 98%;\n      }\n  "] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'ngx-monaco-editor',
                       template: '<div class="editor-container" #editorContainer></div>',
-                      styles: ["\n      :host {\n          display: block;\n          height: 200px;\n      }\n\n      .editor-container {\n          width: 100%;\n          height: 98%;\n      }\n  "],
+                      styles: ["\n\n\n      .editor-container {\n          width: 100%;\n          height: 98%;\n      }\n  "],
                       providers: [{
                               provide: i2.NG_VALUE_ACCESSOR,
                               useExisting: i0.forwardRef(function () { return EditorComponent; }),
-                              multi: true
-                          }]
+                              multi: true,
+                          }],
                   }]
           }], ctorParameters: function () {
           return [{ type: i0__namespace.NgZone }, { type: undefined, decorators: [{
@@ -690,31 +690,15 @@
               }] } });
 
   var FsTextEditorComponent = /** @class */ (function () {
-      function FsTextEditorComponent(_element, _document) {
-          this._element = _element;
+      function FsTextEditorComponent(_document) {
           this._document = _document;
+          this.LINE_HEIGHT = 18;
           this.config = {};
           this.scrollable = false;
-          this.init = new i0.EventEmitter();
+          this.ready = new i0.EventEmitter();
           this.blur = new i0.EventEmitter();
-          this.defaultConfig = {
-              minimap: {
-                  enabled: false
-              },
-              theme: 'vs-dark',
-              automaticLayout: false,
-              scrollBeyondLastLine: false,
-              autoHeight: true,
-              scrollbar: {
-                  vertical: 'hidden'
-              },
-              hideCursorInOverviewRuler: true
-          };
-          this.onChange = function (_) { };
-          this.onTouched = function () { };
-          this._window = this._document.defaultView;
-          this.LINE_HEIGHT = 18;
           this._value = '';
+          this._window = this._document.defaultView;
       }
       Object.defineProperty(FsTextEditorComponent.prototype, "monaco", {
           get: function () {
@@ -723,11 +707,13 @@
           enumerable: false,
           configurable: true
       });
-      ;
-      ;
       FsTextEditorComponent.prototype.ngOnInit = function () {
           if (this.config) {
-              this.config = Object.assign({}, this.defaultConfig, this.config);
+              this.config = Object.assign({ minimap: {
+                      enabled: false,
+                  }, theme: 'vs-dark', automaticLayout: !!this.config.height, scrollBeyondLastLine: false, autoHeight: !this.config.height, scrollbar: {
+                      vertical: this.config.height ? 'auto' : 'hidden',
+                  }, hideCursorInOverviewRuler: true }, this.config);
           }
       };
       FsTextEditorComponent.prototype.ngOnDestroy = function () {
@@ -747,10 +733,13 @@
           setTimeout(function () {
               _this._editorRef = event;
               _this._initEditor();
-              _this.init.next(event);
-              if (!_this.scrollable) {
+              _this.ready.next(event);
+              if (!_this.scrollable && !_this.config.height) {
                   _this._disableScroll();
               }
+              if (_this.config.ready) {
+                  _this.config.ready(_this._editorRef);
+              }
           });
       };
       FsTextEditorComponent.prototype.writeValue = function (value) {
@@ -762,6 +751,9 @@
               this.onChange(e);
           }
       };
+      FsTextEditorComponent.prototype.updateLayout = function () {
+          this._editorRef.layout();
+      };
       FsTextEditorComponent.prototype.registerOnChange = function (fn) {
           this.onChange = fn;
       };
@@ -795,12 +787,9 @@
           }
           var nextHeight = this._editorRef.getModel().getLineCount() * lineHeight;
           // set the height and redo layout
-          editorDomNode.style.height = nextHeight + 'px';
+          editorDomNode.style.height = nextHeight + "px";
           this.updateLayout();
       };
-      FsTextEditorComponent.prototype.updateLayout = function () {
-          this._editorRef.layout();
-      };
       FsTextEditorComponent.prototype._disableScroll = function () {
           var node = this._editorRef.getDomNode();
           node.addEventListener('wheel', function (e) {
@@ -809,26 +798,26 @@
       };
       return FsTextEditorComponent;
   }());
-  FsTextEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsTextEditorComponent, deps: [{ token: i0__namespace.ElementRef }, { token: common.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsTextEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsTextEditorComponent, selector: "fs-text-editor", inputs: { config: "config", scrollable: "scrollable" }, outputs: { init: "init", blur: "blur" }, providers: [{
+  FsTextEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsTextEditorComponent, deps: [{ token: common.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  FsTextEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsTextEditorComponent, selector: "fs-text-editor", inputs: { config: "config", scrollable: "scrollable" }, outputs: { ready: "ready", blur: "blur" }, providers: [{
               provide: i2.NG_VALUE_ACCESSOR,
               useExisting: i0.forwardRef(function () { return FsTextEditorComponent; }),
-              multi: true
-          }], viewQueries: [{ propertyName: "_editorContainer", first: true, predicate: EditorComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<ngx-monaco-editor\n  [ngModel]=\"value\"\n  (ngModelChange)=\"changed($event)\"\n  [options]=\"config\"\n  (onInit)=\"onEditorInit($event)\">\n</ngx-monaco-editor>\n", styles: [":host ngx-monaco-editor{height:100%!important}:host ::ng-deep .decorationsOverviewRuler{display:none}:host ::ng-deep .margin,:host ::ng-deep .monaco-editor-background{top:0px!important}\n"], components: [{ type: EditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "model"] }], directives: [{ type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+              multi: true,
+          }], ngImport: i0__namespace, template: "<ngx-monaco-editor\n  [style.height]=\"config.height\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"changed($event)\"\n  [options]=\"config\"\n  (onInit)=\"onEditorInit($event)\">\n</ngx-monaco-editor>\n", styles: ["ngx-monaco-editor{display:block}\n"], components: [{ type: EditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "model"] }], directives: [{ type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsTextEditorComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'fs-text-editor',
-                      templateUrl: 'text-editor.component.html',
-                      styleUrls: ['text-editor.component.scss'],
+                      templateUrl: './text-editor.component.html',
+                      styleUrls: ['./text-editor.component.scss'],
                       providers: [{
                               provide: i2.NG_VALUE_ACCESSOR,
                               useExisting: i0.forwardRef(function () { return FsTextEditorComponent; }),
-                              multi: true
-                          }]
+                              multi: true,
+                          }],
                   }]
           }], ctorParameters: function () {
-          return [{ type: i0__namespace.ElementRef }, { type: Document, decorators: [{
+          return [{ type: Document, decorators: [{
                           type: i0.Inject,
                           args: [common.DOCUMENT]
                       }] }];
@@ -836,13 +825,10 @@
                   type: i0.Input
               }], scrollable: [{
                   type: i0.Input
-              }], init: [{
+              }], ready: [{
                   type: i0.Output
               }], blur: [{
                   type: i0.Output
-              }], _editorContainer: [{
-                  type: i0.ViewChild,
-                  args: [EditorComponent, { static: true }]
               }] } });
 
   var DiffEditorComponent = /** @class */ (function (_super) {
@@ -857,7 +843,7 @@
               return this._options;
           },
           set: function (options) {
-              this._options = Object.assign({}, this.config.defaultOptions, options);
+              this._options = Object.assign(Object.assign({}, this.config.defaultOptions), options);
               if (this._editor) {
                   this._editor.dispose();
                   this.initMonaco(options);
@@ -903,7 +889,7 @@
           options.theme = theme;
           this._editor.setModel({
               original: originalModel,
-              modified: modifiedModel
+              modified: modifiedModel,
           });
           // refresh layout on resize event.
           if (this._windowResizeSubscription) {
@@ -921,7 +907,7 @@
               args: [{
                       selector: 'ngx-monaco-diff-editor',
                       template: '<div class="editor-container" #editorContainer></div>',
-                      styles: ["\n    :host {\n      display: block;\n      height: 200px;\n    }\n\n    .editor-container {\n      width: 100%;\n      height: 98%;\n    }\n  "]
+                      styles: ["\n    :host {\n      display: block;\n      height: 200px;\n    }\n\n    .editor-container {\n      width: 100%;\n      height: 98%;\n    }\n  "],
                   }]
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{