@covalent/code-editor 4.0.0 → 4.1.0-develop.10

package/fesm2020/covalent-code-editor.mjs

@@ -0,0 +1,384 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, ViewChild, Output, Input, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject, of, merge, fromEvent, timer } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { mixinControlValueAccessor, mixinDisabled } from '@covalent/core/common';
+import { CommonModule } from '@angular/common';
+
+const noop = () => {
+    // empty method
+};
+// counter for ids to allow for multiple editors on one page
+let uniqueCounter = 0;
+class TdCodeEditorBase {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+}
+const _TdCodeEditorMixinBase = mixinControlValueAccessor(mixinDisabled(TdCodeEditorBase), []);
+class TdCodeEditorComponent extends _TdCodeEditorMixinBase {
+    // tslint:disable-next-line:member-ordering
+    constructor(_changeDetectorRef, _elementRef) {
+        super(_changeDetectorRef);
+        this._elementRef = _elementRef;
+        this._destroy = new Subject();
+        this._widthSubject = new Subject();
+        this._heightSubject = new Subject();
+        this._editorStyle = 'width:100%;height:100%;border:1px solid grey;';
+        this._value = '';
+        this._theme = 'vs';
+        this._language = 'javascript';
+        this._subject = new Subject();
+        this._editorInnerContainer = 'editorInnerContainer' + uniqueCounter++;
+        this._fromEditor = false;
+        this._componentInitialized = false;
+        this._editorOptions = {};
+        this._isFullScreen = false;
+        this._registeredLanguagesStyles = [];
+        /**
+         * editorInitialized: function($event)
+         * Event emitted when editor is first initialized
+         */
+        this.editorInitialized = new EventEmitter();
+        /**
+         * editorConfigurationChanged: function($event)
+         * Event emitted when editor's configuration changes
+         */
+        this.editorConfigurationChanged = new EventEmitter();
+        /**
+         * editorLanguageChanged: function($event)
+         * Event emitted when editor's Language changes
+         */
+        this.editorLanguageChanged = new EventEmitter();
+        /**
+         * editorValueChange: function($event)
+         * Event emitted any time something changes the editor value
+         */
+        this.editorValueChange = new EventEmitter();
+        this.propagateChange = (_) => noop;
+    }
+    /**
+     * value?: string
+     */
+    set value(value) {
+        this._value = value;
+        if (this._componentInitialized) {
+            this.applyValue();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    applyValue() {
+        if (!this._fromEditor) {
+            this._editor.setValue(this._value);
+        }
+        this._fromEditor = false;
+        this.propagateChange(this._value);
+        this.editorValueChange.emit();
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * getEditorContent?: function
+     * Returns the content within the editor
+     */
+    getValue() {
+        if (!this._componentInitialized) {
+            return of('');
+        }
+        setTimeout(() => {
+            this._subject.next(this._value);
+            this._subject.complete();
+            this._subject = new Subject();
+        });
+        return this._subject.asObservable();
+    }
+    /**
+     * language?: string
+     * language used in editor
+     */
+    set language(language) {
+        this._language = language;
+        if (this._componentInitialized) {
+            this.applyLanguage();
+        }
+    }
+    get language() {
+        return this._language;
+    }
+    applyLanguage() {
+        if (this._language) {
+            monaco.editor.setModelLanguage(this._editor.getModel(), this._language);
+            this.editorLanguageChanged.emit();
+        }
+    }
+    /**
+     * registerLanguage?: function
+     * Registers a custom Language within the editor
+     */
+    registerLanguage(language) {
+        if (this._componentInitialized) {
+            monaco.languages.register({ id: language.id });
+            monaco.languages.setMonarchTokensProvider(language.id, {
+                tokenizer: {
+                    root: language.monarchTokensProvider,
+                },
+            });
+            // Define a new theme that constains only rules that match this language
+            monaco.editor.defineTheme(language.customTheme.id, language.customTheme.theme);
+            this._theme = language.customTheme.id;
+            monaco.languages.registerCompletionItemProvider(language.id, {
+                provideCompletionItems: () => {
+                    return language.completionItemProvider;
+                },
+            });
+            const css = document.createElement('style');
+            css.type = 'text/css';
+            css.innerHTML = language.monarchTokensProviderCSS;
+            document.body.appendChild(css);
+            this.editorConfigurationChanged.emit();
+            this._registeredLanguagesStyles = [
+                ...this._registeredLanguagesStyles,
+                css,
+            ];
+        }
+    }
+    /**
+     * style?: string
+     * css style of the editor on the page
+     */
+    set editorStyle(editorStyle) {
+        this._editorStyle = editorStyle;
+        if (this._componentInitialized) {
+            this.applyStyle();
+        }
+    }
+    get editorStyle() {
+        return this._editorStyle;
+    }
+    applyStyle() {
+        if (this._editorStyle) {
+            const containerDiv = this._editorContainer.nativeElement;
+            containerDiv.setAttribute('style', this._editorStyle);
+        }
+    }
+    /**
+     * theme?: string
+     * Theme to be applied to editor
+     */
+    set theme(theme) {
+        this._theme = theme;
+        if (this._componentInitialized) {
+            this._editor.updateOptions({ theme });
+            this.editorConfigurationChanged.emit();
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    /**
+     * fullScreenKeyBinding?: number
+     * See here for key bindings https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html
+     * Sets the KeyCode for shortcutting to Fullscreen mode
+     */
+    set fullScreenKeyBinding(keycode) {
+        this._keycode = keycode;
+    }
+    get fullScreenKeyBinding() {
+        return this._keycode;
+    }
+    /**
+     * editorOptions?: object
+     * Options used on editor instantiation. Available options listed here:
+     * https://microsoft.github.io/monaco-editor/api/interfaces/editor.ieditoroptions.html
+     */
+    set editorOptions(editorOptions) {
+        this._editorOptions = editorOptions;
+        if (this._componentInitialized) {
+            this._editor.updateOptions(editorOptions);
+            this.editorConfigurationChanged.emit();
+        }
+    }
+    get editorOptions() {
+        return this._editorOptions;
+    }
+    /**
+     * layout method that calls layout method of editor and instructs the editor to remeasure its container
+     */
+    layout() {
+        if (this._componentInitialized) {
+            this._editor.layout();
+        }
+    }
+    /**
+     * Returns if in Full Screen Mode or not
+     */
+    get isFullScreen() {
+        return this._isFullScreen;
+    }
+    ngOnInit() {
+        const containerDiv = this._editorContainer.nativeElement;
+        containerDiv.id = this._editorInnerContainer;
+        this._editor = monaco.editor.create(containerDiv, Object.assign({
+            value: this._value,
+            language: this.language,
+            theme: this._theme,
+        }, this.editorOptions));
+        this._componentInitialized = true;
+        setTimeout(() => {
+            this.applyLanguage();
+            this._fromEditor = true;
+            this.applyValue();
+            this.applyStyle();
+            this.editorInitialized.emit(this._editor);
+            this.editorConfigurationChanged.emit();
+        });
+        // The `onDidChangeContent` returns a disposable object (an object with `dispose()` method) which will cleanup
+        // the listener. The callback, that we pass to `onDidChangeContent`, captures `this`. This leads to a circular reference
+        // (`td-code-editor -> monaco -> td-code-editor`) and prevents the `td-code-editor` from being GC'd.
+        this._onDidChangeContentDisposable = this._editor
+            .getModel()
+            ?.onDidChangeContent(() => {
+            this._fromEditor = true;
+            this.writeValue(this._editor.getValue());
+            this.layout();
+        });
+        this.addFullScreenModeCommand();
+        merge(fromEvent(window, 'resize').pipe(debounceTime(100)), this._widthSubject.asObservable().pipe(distinctUntilChanged()), this._heightSubject.asObservable().pipe(distinctUntilChanged()))
+            .pipe(takeUntil(this._destroy), debounceTime(100))
+            .subscribe(() => {
+            this.layout();
+            this._changeDetectorRef.markForCheck();
+        });
+        timer(500, 250)
+            .pipe(takeUntil(this._destroy))
+            .subscribe(() => {
+            if (this._elementRef && this._elementRef.nativeElement) {
+                this._widthSubject.next((this._elementRef.nativeElement).getBoundingClientRect().width);
+                this._heightSubject.next((this._elementRef.nativeElement).getBoundingClientRect().height);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._changeDetectorRef.detach();
+        this._registeredLanguagesStyles.forEach((style) => style.remove());
+        if (this._onDidChangeContentDisposable) {
+            this._onDidChangeContentDisposable.dispose();
+            this._onDidChangeContentDisposable = undefined;
+        }
+        if (this._editor) {
+            this._editor.dispose();
+        }
+        this._destroy.next(true);
+        this._destroy.unsubscribe();
+    }
+    /**
+     * showFullScreenEditor request for full screen of Code Editor based on its browser type.
+     */
+    showFullScreenEditor() {
+        if (this._componentInitialized) {
+            const codeEditorElement = this._editorContainer
+                .nativeElement;
+            codeEditorElement.requestFullscreen();
+        }
+        this._isFullScreen = true;
+    }
+    /**
+     * exitFullScreenEditor request to exit full screen of Code Editor based on its browser type.
+     */
+    exitFullScreenEditor() {
+        if (this._componentInitialized) {
+            document.exitFullscreen();
+        }
+        this._isFullScreen = false;
+    }
+    /**
+     * addFullScreenModeCommand used to add the fullscreen option to the context menu
+     */
+    addFullScreenModeCommand() {
+        this._editor.addAction({
+            // An unique identifier of the contributed action.
+            id: 'fullScreen',
+            // A label of the action that will be presented to the user.
+            label: 'Full Screen',
+            // An optional array of keybindings for the action.
+            contextMenuGroupId: 'navigation',
+            keybindings: this._keycode,
+            contextMenuOrder: 1.5,
+            // Method that will be executed when the action is triggered.
+            run: () => {
+                this.showFullScreenEditor();
+            },
+        });
+    }
+}
+TdCodeEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCodeEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TdCodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdCodeEditorComponent, selector: "td-code-editor", inputs: { value: "value", language: "language", editorStyle: "editorStyle", theme: "theme", fullScreenKeyBinding: "fullScreenKeyBinding", editorOptions: "editorOptions" }, outputs: { editorInitialized: "editorInitialized", editorConfigurationChanged: "editorConfigurationChanged", editorLanguageChanged: "editorLanguageChanged", editorValueChange: "editorValueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdCodeEditorComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "_editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"editor-container\" #editorContainer></div>\n", styles: [":host{display:block;position:relative}:host .editor-container{position:absolute;top:0;bottom:0;left:0;right:0}::ng-deep .monaco-aria-container{display:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCodeEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-code-editor', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdCodeEditorComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"editor-container\" #editorContainer></div>\n", styles: [":host{display:block;position:relative}:host .editor-container{position:absolute;top:0;bottom:0;left:0;right:0}::ng-deep .monaco-aria-container{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { _editorContainer: [{
+                type: ViewChild,
+                args: ['editorContainer', { static: true }]
+            }], editorInitialized: [{
+                type: Output
+            }], editorConfigurationChanged: [{
+                type: Output
+            }], editorLanguageChanged: [{
+                type: Output
+            }], editorValueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], editorStyle: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], fullScreenKeyBinding: [{
+                type: Input
+            }], editorOptions: [{
+                type: Input
+            }] } });
+
+class CovalentCodeEditorModule {
+}
+CovalentCodeEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentCodeEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentCodeEditorModule, bootstrap: [TdCodeEditorComponent], declarations: [TdCodeEditorComponent], imports: [CommonModule], exports: [TdCodeEditorComponent] });
+CovalentCodeEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentCodeEditorModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentCodeEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [TdCodeEditorComponent],
+                    exports: [TdCodeEditorComponent],
+                    bootstrap: [TdCodeEditorComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentCodeEditorModule, TdCodeEditorComponent };
+//# sourceMappingURL=covalent-code-editor.mjs.map

package/fesm2020/covalent-code-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"covalent-code-editor.mjs","sources":["../../../../libs/angular-code-editor/src/lib/code-editor.component.ts","../../../../libs/angular-code-editor/src/lib/code-editor.component.html","../../../../libs/angular-code-editor/src/lib/code-editor.module.ts","../../../../libs/angular-code-editor/src/covalent-code-editor.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  OnInit,\n  ViewChild,\n  ElementRef,\n  forwardRef,\n  ChangeDetectorRef,\n  OnDestroy,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { Observable, of, Subject } from 'rxjs';\nimport { fromEvent, merge, timer } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';\n\n// Use esm version to support shipping subset of languages and features\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\nimport {\n  mixinControlValueAccessor,\n  mixinDisabled,\n} from '@covalent/core/common';\n\nconst noop = () => {\n  // empty method\n};\n\n// counter for ids to allow for multiple editors on one page\nlet uniqueCounter = 0;\n\nexport class TdCodeEditorBase {\n  constructor(public _changeDetectorRef: ChangeDetectorRef) {}\n}\n\nexport const _TdCodeEditorMixinBase = mixinControlValueAccessor(\n  mixinDisabled(TdCodeEditorBase),\n  []\n);\n\n@Component({\n  selector: 'td-code-editor',\n  templateUrl: './code-editor.component.html',\n  styleUrls: ['./code-editor.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => TdCodeEditorComponent),\n      multi: true,\n    },\n  ],\n})\nexport class TdCodeEditorComponent\n  extends _TdCodeEditorMixinBase\n  implements OnInit, ControlValueAccessor, OnDestroy\n{\n  private _destroy: Subject<boolean> = new Subject<boolean>();\n  private _widthSubject: Subject<number> = new Subject<number>();\n  private _heightSubject: Subject<number> = new Subject<number>();\n\n  private _editorStyle = 'width:100%;height:100%;border:1px solid grey;';\n  private _value = '';\n  private _theme = 'vs';\n  private _language = 'javascript';\n  private _subject: Subject<string> = new Subject();\n  private _editorInnerContainer: string =\n    'editorInnerContainer' + uniqueCounter++;\n  private _editor!: monaco.editor.IStandaloneCodeEditor;\n  private _fromEditor = false;\n  private _componentInitialized = false;\n  private _editorOptions: any = {};\n  private _isFullScreen = false;\n  private _keycode: any;\n  private _registeredLanguagesStyles: HTMLStyleElement[] = [];\n  private _onDidChangeContentDisposable?: monaco.IDisposable;\n\n  @ViewChild('editorContainer', { static: true }) _editorContainer!: ElementRef;\n\n  /**\n   * editorInitialized: function($event)\n   * Event emitted when editor is first initialized\n   */\n  @Output()\n  editorInitialized: EventEmitter<monaco.editor.IStandaloneCodeEditor> = new EventEmitter<monaco.editor.IStandaloneCodeEditor>();\n\n  /**\n   * editorConfigurationChanged: function($event)\n   * Event emitted when editor's configuration changes\n   */\n  @Output() editorConfigurationChanged: EventEmitter<void> =\n    new EventEmitter<void>();\n\n  /**\n   * editorLanguageChanged: function($event)\n   * Event emitted when editor's Language changes\n   */\n  @Output() editorLanguageChanged: EventEmitter<void> =\n    new EventEmitter<void>();\n\n  /**\n   * editorValueChange: function($event)\n   * Event emitted any time something changes the editor value\n   */\n  @Output() editorValueChange: EventEmitter<void> = new EventEmitter<void>();\n\n  propagateChange = (_: any) => noop;\n\n  /**\n   * value?: string\n   */\n  @Input()\n  override set value(value: string) {\n    this._value = value;\n\n    if (this._componentInitialized) {\n      this.applyValue();\n    }\n  }\n  override get value(): string {\n    return this._value;\n  }\n\n  applyValue(): void {\n    if (!this._fromEditor) {\n      this._editor.setValue(this._value);\n    }\n    this._fromEditor = false;\n    this.propagateChange(this._value);\n    this.editorValueChange.emit();\n  }\n\n  override registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n  override registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * getEditorContent?: function\n   * Returns the content within the editor\n   */\n  getValue(): Observable<string> {\n    if (!this._componentInitialized) {\n      return of('');\n    }\n    setTimeout(() => {\n      this._subject.next(this._value);\n      this._subject.complete();\n      this._subject = new Subject();\n    });\n    return this._subject.asObservable();\n  }\n\n  /**\n   * language?: string\n   * language used in editor\n   */\n  @Input()\n  set language(language: string) {\n    this._language = language;\n    if (this._componentInitialized) {\n      this.applyLanguage();\n    }\n  }\n\n  get language(): string {\n    return this._language;\n  }\n\n  applyLanguage(): void {\n    if (this._language) {\n      monaco.editor.setModelLanguage(\n        this._editor.getModel() as monaco.editor.ITextModel,\n        this._language\n      );\n      this.editorLanguageChanged.emit();\n    }\n  }\n\n  /**\n   * registerLanguage?: function\n   * Registers a custom Language within the editor\n   */\n  registerLanguage(language: any): void {\n    if (this._componentInitialized) {\n      monaco.languages.register({ id: language.id });\n\n      monaco.languages.setMonarchTokensProvider(language.id, {\n        tokenizer: {\n          root: language.monarchTokensProvider,\n        },\n      });\n\n      // Define a new theme that constains only rules that match this language\n      monaco.editor.defineTheme(\n        language.customTheme.id,\n        language.customTheme.theme\n      );\n      this._theme = language.customTheme.id;\n\n      monaco.languages.registerCompletionItemProvider(language.id, {\n        provideCompletionItems: () => {\n          return language.completionItemProvider;\n        },\n      });\n\n      const css: HTMLStyleElement = document.createElement('style');\n      css.type = 'text/css';\n      css.innerHTML = language.monarchTokensProviderCSS;\n      document.body.appendChild(css);\n      this.editorConfigurationChanged.emit();\n      this._registeredLanguagesStyles = [\n        ...this._registeredLanguagesStyles,\n        css,\n      ];\n    }\n  }\n\n  /**\n   * style?: string\n   * css style of the editor on the page\n   */\n  @Input()\n  set editorStyle(editorStyle: string) {\n    this._editorStyle = editorStyle;\n    if (this._componentInitialized) {\n      this.applyStyle();\n    }\n  }\n\n  get editorStyle(): string {\n    return this._editorStyle;\n  }\n\n  applyStyle(): void {\n    if (this._editorStyle) {\n      const containerDiv: HTMLDivElement = this._editorContainer.nativeElement;\n      containerDiv.setAttribute('style', this._editorStyle);\n    }\n  }\n\n  /**\n   * theme?: string\n   * Theme to be applied to editor\n   */\n  @Input()\n  set theme(theme: string) {\n    this._theme = theme;\n    if (this._componentInitialized) {\n      this._editor.updateOptions({ theme });\n      this.editorConfigurationChanged.emit();\n    }\n  }\n  get theme(): string {\n    return this._theme;\n  }\n\n  /**\n   * fullScreenKeyBinding?: number\n   * See here for key bindings https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html\n   * Sets the KeyCode for shortcutting to Fullscreen mode\n   */\n  @Input()\n  set fullScreenKeyBinding(keycode: number[]) {\n    this._keycode = keycode;\n  }\n  get fullScreenKeyBinding(): number[] {\n    return this._keycode;\n  }\n\n  /**\n   * editorOptions?: object\n   * Options used on editor instantiation. Available options listed here:\n   * https://microsoft.github.io/monaco-editor/api/interfaces/editor.ieditoroptions.html\n   */\n  @Input()\n  set editorOptions(editorOptions: any) {\n    this._editorOptions = editorOptions;\n    if (this._componentInitialized) {\n      this._editor.updateOptions(editorOptions);\n      this.editorConfigurationChanged.emit();\n    }\n  }\n  get editorOptions(): any {\n    return this._editorOptions;\n  }\n\n  /**\n   * layout method that calls layout method of editor and instructs the editor to remeasure its container\n   */\n  layout(): void {\n    if (this._componentInitialized) {\n      this._editor.layout();\n    }\n  }\n\n  /**\n   * Returns if in Full Screen Mode or not\n   */\n  get isFullScreen(): boolean {\n    return this._isFullScreen;\n  }\n\n  // tslint:disable-next-line:member-ordering\n  constructor(\n    _changeDetectorRef: ChangeDetectorRef,\n    private _elementRef: ElementRef\n  ) {\n    super(_changeDetectorRef);\n  }\n\n  ngOnInit(): void {\n    const containerDiv: HTMLDivElement = this._editorContainer.nativeElement;\n    containerDiv.id = this._editorInnerContainer;\n\n    this._editor = monaco.editor.create(\n      containerDiv,\n      Object.assign(\n        {\n          value: this._value,\n          language: this.language,\n          theme: this._theme,\n        },\n        this.editorOptions\n      )\n    );\n    this._componentInitialized = true;\n    setTimeout(() => {\n      this.applyLanguage();\n      this._fromEditor = true;\n      this.applyValue();\n      this.applyStyle();\n      this.editorInitialized.emit(this._editor);\n      this.editorConfigurationChanged.emit();\n    });\n    // The `onDidChangeContent` returns a disposable object (an object with `dispose()` method) which will cleanup\n    // the listener. The callback, that we pass to `onDidChangeContent`, captures `this`. This leads to a circular reference\n    // (`td-code-editor -> monaco -> td-code-editor`) and prevents the `td-code-editor` from being GC'd.\n    this._onDidChangeContentDisposable = this._editor\n      .getModel()\n      ?.onDidChangeContent(() => {\n        this._fromEditor = true;\n        this.writeValue(this._editor.getValue());\n        this.layout();\n      });\n    this.addFullScreenModeCommand();\n\n    merge(\n      fromEvent(window, 'resize').pipe(debounceTime(100)),\n      this._widthSubject.asObservable().pipe(distinctUntilChanged()),\n      this._heightSubject.asObservable().pipe(distinctUntilChanged())\n    )\n      .pipe(takeUntil(this._destroy), debounceTime(100))\n      .subscribe(() => {\n        this.layout();\n        this._changeDetectorRef.markForCheck();\n      });\n    timer(500, 250)\n      .pipe(takeUntil(this._destroy))\n      .subscribe(() => {\n        if (this._elementRef && this._elementRef.nativeElement) {\n          this._widthSubject.next(\n            (<HTMLElement>(\n              this._elementRef.nativeElement\n            )).getBoundingClientRect().width\n          );\n          this._heightSubject.next(\n            (<HTMLElement>(\n              this._elementRef.nativeElement\n            )).getBoundingClientRect().height\n          );\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    this._changeDetectorRef.detach();\n    this._registeredLanguagesStyles.forEach((style: HTMLStyleElement) =>\n      style.remove()\n    );\n    if (this._onDidChangeContentDisposable) {\n      this._onDidChangeContentDisposable.dispose();\n      this._onDidChangeContentDisposable = undefined;\n    }\n    if (this._editor) {\n      this._editor.dispose();\n    }\n    this._destroy.next(true);\n    this._destroy.unsubscribe();\n  }\n\n  /**\n   * showFullScreenEditor request for full screen of Code Editor based on its browser type.\n   */\n  public showFullScreenEditor(): void {\n    if (this._componentInitialized) {\n      const codeEditorElement: HTMLDivElement = this._editorContainer\n        .nativeElement as HTMLDivElement;\n      codeEditorElement.requestFullscreen();\n    }\n    this._isFullScreen = true;\n  }\n\n  /**\n   * exitFullScreenEditor request to exit full screen of Code Editor based on its browser type.\n   */\n  public exitFullScreenEditor(): void {\n    if (this._componentInitialized) {\n      document.exitFullscreen();\n    }\n    this._isFullScreen = false;\n  }\n\n  /**\n   * addFullScreenModeCommand used to add the fullscreen option to the context menu\n   */\n  private addFullScreenModeCommand(): void {\n    this._editor.addAction({\n      // An unique identifier of the contributed action.\n      id: 'fullScreen',\n      // A label of the action that will be presented to the user.\n      label: 'Full Screen',\n      // An optional array of keybindings for the action.\n      contextMenuGroupId: 'navigation',\n      keybindings: this._keycode,\n      contextMenuOrder: 1.5,\n      // Method that will be executed when the action is triggered.\n      run: () => {\n        this.showFullScreenEditor();\n      },\n    });\n  }\n}\n","<div class=\"editor-container\" #editorContainer></div>\n","import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { TdCodeEditorComponent } from './code-editor.component';\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [TdCodeEditorComponent],\n  exports: [TdCodeEditorComponent],\n  bootstrap: [TdCodeEditorComponent],\n})\nexport class CovalentCodeEditorModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/{code-editor.component.d.ts → lib/code-editor.component.d.ts}

@@ -1,9 +1,14 @@
-import { EventEmitter, OnInit, ElementRef, NgZone, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { EventEmitter, OnInit, ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
-export declare class TdCodeEditorComponent implements OnInit, ControlValueAccessor, OnDestroy {
-    private zone;
-    private _changeDetectorRef;
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as i0 from "@angular/core";
+export declare class TdCodeEditorBase {
+    _changeDetectorRef: ChangeDetectorRef;
+    constructor(_changeDetectorRef: ChangeDetectorRef);
+}
+export declare const _TdCodeEditorMixinBase: (new (...args: any[]) => import("@covalent/core/common").IControlValueAccessor) & (new (...args: any[]) => import("@covalent/core/common").ICanDisable) & typeof TdCodeEditorBase;
+export declare class TdCodeEditorComponent extends _TdCodeEditorMixinBase implements OnInit, ControlValueAccessor, OnDestroy {
     private _elementRef;
     private _destroy;
     private _widthSubject;
@@ -21,12 +26,13 @@ export declare class TdCodeEditorComponent implements OnInit, ControlValueAccess
     private _isFullScreen;
     private _keycode;
     private _registeredLanguagesStyles;
+    private _onDidChangeContentDisposable?;
     _editorContainer: ElementRef;
     /**
      * editorInitialized: function($event)
      * Event emitted when editor is first initialized
      */
-    editorInitialized: EventEmitter<void>;
+    editorInitialized: EventEmitter<monaco.editor.IStandaloneCodeEditor>;
     /**
      * editorConfigurationChanged: function($event)
      * Event emitted when editor's configuration changes
@@ -42,23 +48,13 @@ export declare class TdCodeEditorComponent implements OnInit, ControlValueAccess
      * Event emitted any time something changes the editor value
      */
     editorValueChange: EventEmitter<void>;
-    /**
-     * The change event notifies you about a change happening in an input field.
-     * Since the component is not a native Angular component have to specifiy the event emitter ourself
-     */
-    change: EventEmitter<void>;
-    propagateChange: (_: any) => void;
-    onTouched: () => any;
+    propagateChange: (_: any) => () => void;
     /**
      * value?: string
      */
     set value(value: string);
     get value(): string;
     applyValue(): void;
-    /**
-     * Implemented as part of ControlValueAccessor.
-     */
-    writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     /**
@@ -101,7 +97,7 @@ export declare class TdCodeEditorComponent implements OnInit, ControlValueAccess
     /**
      * editorOptions?: object
      * Options used on editor instantiation. Available options listed here:
-     * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html
+     * https://microsoft.github.io/monaco-editor/api/interfaces/editor.ieditoroptions.html
      */
     set editorOptions(editorOptions: any);
     get editorOptions(): any;
@@ -113,7 +109,7 @@ export declare class TdCodeEditorComponent implements OnInit, ControlValueAccess
      * Returns if in Full Screen Mode or not
      */
     get isFullScreen(): boolean;
-    constructor(zone: NgZone, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -128,4 +124,6 @@ export declare class TdCodeEditorComponent implements OnInit, ControlValueAccess
      * addFullScreenModeCommand used to add the fullscreen option to the context menu
      */
     private addFullScreenModeCommand;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdCodeEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdCodeEditorComponent, "td-code-editor", never, { "value": "value"; "language": "language"; "editorStyle": "editorStyle"; "theme": "theme"; "fullScreenKeyBinding": "fullScreenKeyBinding"; "editorOptions": "editorOptions"; }, { "editorInitialized": "editorInitialized"; "editorConfigurationChanged": "editorConfigurationChanged"; "editorLanguageChanged": "editorLanguageChanged"; "editorValueChange": "editorValueChange"; }, never, never>;
 }

package/lib/code-editor.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./code-editor.component";
+import * as i2 from "@angular/common";
+export declare class CovalentCodeEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentCodeEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentCodeEditorModule, [typeof i1.TdCodeEditorComponent], [typeof i2.CommonModule], [typeof i1.TdCodeEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentCodeEditorModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/code-editor",
-  "version": "4.0.0",
+  "version": "4.1.0-develop.10",
   "description": "Teradata UI Platform Code Editor Module",
   "keywords": [
     "angular",
@@ -17,33 +17,46 @@
     "url": "https://github.com/teradata/covalent.git"
   },
   "bugs": {
-    "url": "https://github.com/Teradata/covalent/issues"
+    "url": "https://github.com/teradata/covalent/issues"
   },
   "license": "MIT",
   "author": "Teradata UX",
-  "contributors": [
-    "Kyle Ledbetter <kyle.ledbetter@teradata.com>",
-    "Richa Vyas <richa.vyas@teradata.com>",
-    "Ed Morales <eduardo.morales@teradata.com>",
-    "Jason Weaver <jason.weaver@teradata.com>",
-    "Jeremy Wilken <jeremy.wilken@teradata.com>",
-    "Jeremy Smartt <jeremy.smartt@teradata.com>",
-    "Steven Ov <steven.ov@teradata.com>"
-  ],
+  "peerDependencies": {
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "monaco-editor": "^0.32.1",
+    "@angular/forms": "^13.2.0",
+    "rxjs": "~7.4.0",
+    "@covalent/core": "4.1.0-develop.10",
+    "@angular/router": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/material": "^13.2.1",
+    "@angular/animations": "^13.2.0",
+    "@angular/cdk": "^13.2.1",
+    "@angular/platform-browser-dynamic": "^13.2.0",
+    "zone.js": "~0.11.4"
+  },
   "dependencies": {
-    "monaco-editor": "^0.22.0",
     "tslib": "^2.0.0"
   },
-  "peerDependencies": {
-    "@angular/common": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0",
-    "@angular/core": "^9.0.0 || ^10.0.0-0 || ^11.0.0-0"
-  },
-  "main": "bundles/covalent-code-editor.umd.js",
-  "module": "fesm2015/covalent-code-editor.js",
-  "es2015": "fesm2015/covalent-code-editor.js",
-  "esm2015": "esm2015/covalent-code-editor.js",
-  "fesm2015": "fesm2015/covalent-code-editor.js",
+  "module": "fesm2015/covalent-code-editor.mjs",
+  "es2020": "fesm2020/covalent-code-editor.mjs",
+  "esm2020": "esm2020/covalent-code-editor.mjs",
+  "fesm2020": "fesm2020/covalent-code-editor.mjs",
+  "fesm2015": "fesm2015/covalent-code-editor.mjs",
   "typings": "covalent-code-editor.d.ts",
-  "metadata": "covalent-code-editor.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./covalent-code-editor.d.ts",
+      "esm2020": "./esm2020/covalent-code-editor.mjs",
+      "es2020": "./fesm2020/covalent-code-editor.mjs",
+      "es2015": "./fesm2015/covalent-code-editor.mjs",
+      "node": "./fesm2015/covalent-code-editor.mjs",
+      "default": "./fesm2020/covalent-code-editor.mjs"
+    }
+  },
   "sideEffects": false
 }

package/public_api.d.ts

@@ -0,0 +1,2 @@
+export { TdCodeEditorComponent } from './lib/code-editor.component';
+export { CovalentCodeEditorModule } from './lib/code-editor.module';