feat(editor): support for setting height and flex to ngx-codejar

ngx-codejar/src/lib/ngx-code-jar.component.ts

@@ -1,45 +1,73 @@
-import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
 import {CodeJar, Position} from 'codejar';
 import {CodeJarContainer} from './codejar.typings';
 import {withLineNumbers} from 'codejar/linenumbers.js';
 
 @Component({
   selector: 'ngx-codejar',
   template: `
-    <pre #editor class="editor" [ngClass]="{
-            'hljs': highlighter === 'hljs',
-            'language-typescript': highlighter === 'prism',
-            'ngx-codejar-editor': highlighter !== undefined
-         }"></pre>`,
+    <div class="ngx-codejar-wrap ngx-codejar-flex" #wrapper>
+        <pre #editor class="editor" [ngClass]="{
+                'hljs': highlighter === 'hljs',
+                'language-typescript': highlighter === 'prism',
+                'ngx-codejar-editor': highlighter !== undefined
+             }" style="padding-bottom:0px;">
+        </pre>
+    </div>`,
   styles: [`
     :host {
       display: block;
     }
 
     .ngx-codejar-editor {
-      border: 1px solid gray;
       border-radius: 6px;
       box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
       font-family: "Source Code Pro", monospace;
       font-size: 14px;
       font-weight: 400;
-      min-height: 240px;
       letter-spacing: normal;
       line-height: 20px;
       padding: 10px;
       tab-size: 4;
+      margin: 0;
+      height: 100%;
+    }
+
+    .ngx-codejar-wrap {
+      height: 100%;
+    }
+
+    .ngx-codejar-flex {
+      display: flex !important;
+      flex-direction: column !important;
+      flex: auto !important;
+      height: 100% !important;
     }
   `]
 })
 export class NgxCodeJarComponent implements OnInit, AfterViewInit {
-  constructor() {
+  constructor(private el: ElementRef, private renderer: Renderer2) {
     this.update = new EventEmitter<string>();
   }
 
-  @ViewChild('editor') editor: ElementRef | undefined;
+  @ViewChild('editor') editor?: ElementRef;
+  @ViewChild('wrapper') wrapper?: ElementRef;
+
   private codeJar: CodeJar;
   private _code = '';
 
+  public height?: number = undefined;
+
   @Input() set code(value: string) {
     if (this._code !== value) {
       this._code = value;
@@ -65,10 +93,10 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     if (this.editor !== undefined) {
-
       const highlightMethod = (this.showLineNumbers) ? withLineNumbers(this.highlightMethod) : this.highlightMethod;
 
       this.codeJar = CodeJar(this.editor.nativeElement, highlightMethod, {tab: '\t'});
+      this.applyCustomizations();
       this.codeJar.onUpdate((newCode: string) => {
         this._code = newCode;
         this.codeChange.emit(newCode);
@@ -88,4 +116,17 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit {
       this.codeJar.updateCode(newCode);
     }
   }
+
+  private applyCustomizations() {
+    if (this.wrapper && this.editor) {
+      const codejarWrap = (this.wrapper.nativeElement as HTMLElement).firstElementChild;
+      const lineNumbers = this.el.nativeElement.getElementsByClassName('codejar-linenumbers')[0];
+
+      this.renderer.setStyle(codejarWrap, 'height', '100%');
+
+      if (this.el.nativeElement.style.height !== '') {
+        this.renderer.setStyle(lineNumbers, 'height', '100%');
+      }
+    }
+  }
 }