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

package/fesm2015/covalent-code-editor.js

@@ -1,709 +0,0 @@
-import { EventEmitter, Component, forwardRef, NgZone, ChangeDetectorRef, ElementRef, ViewChild, Output, Input, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject, merge, fromEvent, timer } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';
-import { CommonModule } from '@angular/common';
-
-/**
- * @fileoverview added by tsickle
- * Generated from: code-editor.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const noop = (/**
- * @return {?}
- */
-() => {
-    // empty method
-});
-const ɵ0 = noop;
-// counter for ids to allow for multiple editors on one page
-/** @type {?} */
-let uniqueCounter = 0;
-class TdCodeEditorComponent {
-    // tslint:disable-next-line:member-ordering
-    /**
-     * @param {?} zone
-     * @param {?} _changeDetectorRef
-     * @param {?} _elementRef
-     */
-    constructor(zone, _changeDetectorRef, _elementRef) {
-        this.zone = zone;
-        this._changeDetectorRef = _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();
-        /**
-         * 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
-         */
-        this.change = new EventEmitter();
-        /* tslint:disable-next-line */
-        this.propagateChange = (/**
-         * @param {?} _
-         * @return {?}
-         */
-        (_) => { });
-        this.onTouched = (/**
-         * @return {?}
-         */
-        () => noop);
-    }
-    /**
-     * value?: string
-     * @param {?} value
-     * @return {?}
-     */
-    set value(value) {
-        if (value === this._value) {
-            return;
-        }
-        this._value = value;
-        if (this._componentInitialized) {
-            this.applyValue();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get value() {
-        return this._value;
-    }
-    /**
-     * @return {?}
-     */
-    applyValue() {
-        if (!this._fromEditor) {
-            this._editor.setValue(this._value);
-        }
-        this._fromEditor = false;
-        this.propagateChange(this._value);
-        this.change.emit();
-        this.editorValueChange.emit();
-    }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param {?} value
-     * @return {?}
-     */
-    writeValue(value) {
-        // do not write if null or undefined
-        // tslint:disable-next-line
-        if (value != undefined) {
-            this.value = value;
-        }
-    }
-    /**
-     * @param {?} fn
-     * @return {?}
-     */
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    /**
-     * @param {?} fn
-     * @return {?}
-     */
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /**
-     * getEditorContent?: function
-     * Returns the content within the editor
-     * @return {?}
-     */
-    getValue() {
-        if (this._componentInitialized) {
-            setTimeout((/**
-             * @return {?}
-             */
-            () => {
-                this._subject.next(this._value);
-                this._subject.complete();
-                this._subject = new Subject();
-            }));
-            return this._subject.asObservable();
-        }
-    }
-    /**
-     * language?: string
-     * language used in editor
-     * @param {?} language
-     * @return {?}
-     */
-    set language(language) {
-        this._language = language;
-        if (this._componentInitialized) {
-            this.applyLanguage();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get language() {
-        return this._language;
-    }
-    /**
-     * @return {?}
-     */
-    applyLanguage() {
-        if (this._language) {
-            editor.setModelLanguage(this._editor.getModel(), this._language);
-            this.editorLanguageChanged.emit();
-        }
-    }
-    /**
-     * registerLanguage?: function
-     * Registers a custom Language within the editor
-     * @param {?} language
-     * @return {?}
-     */
-    registerLanguage(language) {
-        if (this._componentInitialized) {
-            for (const provider of language.completionItemProvider) {
-                /* tslint:disable-next-line */
-                provider.kind = eval(provider.kind);
-            }
-            for (const monarchTokens of language.monarchTokensProvider) {
-                /* tslint:disable-next-line */
-                monarchTokens[0] = eval(monarchTokens[0]);
-            }
-            languages.register({ id: language.id });
-            languages.setMonarchTokensProvider(language.id, {
-                tokenizer: {
-                    root: language.monarchTokensProvider,
-                },
-            });
-            // Define a new theme that constains only rules that match this language
-            editor.defineTheme(language.customTheme.id, language.customTheme.theme);
-            this._theme = language.customTheme.id;
-            languages.registerCompletionItemProvider(language.id, {
-                provideCompletionItems: (/**
-                 * @return {?}
-                 */
-                () => {
-                    return language.completionItemProvider;
-                }),
-            });
-            /** @type {?} */
-            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
-     * @param {?} editorStyle
-     * @return {?}
-     */
-    set editorStyle(editorStyle) {
-        this._editorStyle = editorStyle;
-        if (this._componentInitialized) {
-            this.applyStyle();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get editorStyle() {
-        return this._editorStyle;
-    }
-    /**
-     * @return {?}
-     */
-    applyStyle() {
-        if (this._editorStyle) {
-            /** @type {?} */
-            const containerDiv = this._editorContainer.nativeElement;
-            containerDiv.setAttribute('style', this._editorStyle);
-        }
-    }
-    /**
-     * theme?: string
-     * Theme to be applied to editor
-     * @param {?} theme
-     * @return {?}
-     */
-    set theme(theme) {
-        this._theme = theme;
-        if (this._componentInitialized) {
-            this._editor.updateOptions({ theme });
-            this.editorConfigurationChanged.emit();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    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
-     * @param {?} keycode
-     * @return {?}
-     */
-    set fullScreenKeyBinding(keycode) {
-        this._keycode = keycode;
-    }
-    /**
-     * @return {?}
-     */
-    get fullScreenKeyBinding() {
-        return this._keycode;
-    }
-    /**
-     * editorOptions?: object
-     * Options used on editor instantiation. Available options listed here:
-     * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html
-     * @param {?} editorOptions
-     * @return {?}
-     */
-    set editorOptions(editorOptions) {
-        this._editorOptions = editorOptions;
-        if (this._componentInitialized) {
-            this._editor.updateOptions(editorOptions);
-            this.editorConfigurationChanged.emit();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get editorOptions() {
-        return this._editorOptions;
-    }
-    /**
-     * layout method that calls layout method of editor and instructs the editor to remeasure its container
-     * @return {?}
-     */
-    layout() {
-        if (this._componentInitialized) {
-            this._editor.layout();
-        }
-    }
-    /**
-     * Returns if in Full Screen Mode or not
-     * @return {?}
-     */
-    get isFullScreen() {
-        return this._isFullScreen;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        /** @type {?} */
-        const containerDiv = this._editorContainer.nativeElement;
-        containerDiv.id = this._editorInnerContainer;
-        this._editor = editor.create(containerDiv, Object.assign({
-            value: this._value,
-            language: this.language,
-            theme: this._theme,
-        }, this.editorOptions));
-        this._componentInitialized = true;
-        setTimeout((/**
-         * @return {?}
-         */
-        () => {
-            this.applyLanguage();
-            this._fromEditor = true;
-            this.applyValue();
-            this.applyStyle();
-            this.editorInitialized.emit(this._editor);
-            this.editorConfigurationChanged.emit();
-        }));
-        this._editor.getModel().onDidChangeContent((/**
-         * @param {?} e
-         * @return {?}
-         */
-        (e) => {
-            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((/**
-         * @return {?}
-         */
-        () => {
-            this.layout();
-            this._changeDetectorRef.markForCheck();
-        }));
-        timer(500, 250)
-            .pipe(takeUntil(this._destroy))
-            .subscribe((/**
-         * @return {?}
-         */
-        () => {
-            if (this._elementRef && this._elementRef.nativeElement) {
-                this._widthSubject.next(((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().width);
-                this._heightSubject.next(((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().height);
-            }
-        }));
-    }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        this._changeDetectorRef.detach();
-        this._registeredLanguagesStyles.forEach((/**
-         * @param {?} style
-         * @return {?}
-         */
-        (style) => style.remove()));
-        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.
-     * @return {?}
-     */
-    showFullScreenEditor() {
-        if (this._componentInitialized) {
-            /** @type {?} */
-            const codeEditorElement = (/** @type {?} */ (this._editorContainer.nativeElement));
-            /** @type {?} */
-            const fullScreenMap = {
-                // Chrome
-                requestFullscreen: (/**
-                 * @return {?}
-                 */
-                () => codeEditorElement.requestFullscreen()),
-                // Safari
-                webkitRequestFullscreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (codeEditorElement))).webkitRequestFullscreen()),
-                // IE
-                msRequestFullscreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (codeEditorElement))).msRequestFullscreen()),
-                // Firefox
-                mozRequestFullScreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (codeEditorElement))).mozRequestFullScreen()),
-            };
-            for (const handler of Object.keys(fullScreenMap)) {
-                if (codeEditorElement[handler]) {
-                    fullScreenMap[handler]();
-                }
-            }
-        }
-        this._isFullScreen = true;
-    }
-    /**
-     * exitFullScreenEditor request to exit full screen of Code Editor based on its browser type.
-     * @return {?}
-     */
-    exitFullScreenEditor() {
-        if (this._componentInitialized) {
-            /** @type {?} */
-            const exitFullScreenMap = {
-                // Chrome
-                exitFullscreen: (/**
-                 * @return {?}
-                 */
-                () => document.exitFullscreen()),
-                // Safari
-                webkitExitFullscreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (document))).webkitExitFullscreen()),
-                // Firefox
-                mozCancelFullScreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (document))).mozCancelFullScreen()),
-                // IE
-                msExitFullscreen: (/**
-                 * @return {?}
-                 */
-                () => ((/** @type {?} */ (document))).msExitFullscreen()),
-            };
-            for (const handler of Object.keys(exitFullScreenMap)) {
-                if (document[handler]) {
-                    exitFullScreenMap[handler]();
-                }
-            }
-        }
-        this._isFullScreen = false;
-    }
-    /**
-     * addFullScreenModeCommand used to add the fullscreen option to the context menu
-     * @private
-     * @return {?}
-     */
-    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.
-            // @param editor The editor instance is passed in as a convinience
-            run: (/**
-             * @param {?} ed
-             * @return {?}
-             */
-            (ed) => {
-                this.showFullScreenEditor();
-            }),
-        });
-    }
-}
-TdCodeEditorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'td-code-editor',
-                template: "<div class=\"editorContainer\" #editorContainer></div>\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef((/**
-                         * @return {?}
-                         */
-                        () => TdCodeEditorComponent)),
-                        multi: true,
-                    },
-                ],
-                styles: [":host{display:block;position:relative}:host .editorContainer{bottom:0;left:0;position:absolute;right:0;top:0}::ng-deep .monaco-aria-container{display:none}"]
-            }] }
-];
-/** @nocollapse */
-TdCodeEditorComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: ChangeDetectorRef },
-    { type: ElementRef }
-];
-TdCodeEditorComponent.propDecorators = {
-    _editorContainer: [{ type: ViewChild, args: ['editorContainer', { static: true },] }],
-    editorInitialized: [{ type: Output }],
-    editorConfigurationChanged: [{ type: Output }],
-    editorLanguageChanged: [{ type: Output }],
-    editorValueChange: [{ type: Output }],
-    change: [{ type: Output }],
-    value: [{ type: Input, args: ['value',] }],
-    language: [{ type: Input, args: ['language',] }],
-    editorStyle: [{ type: Input, args: ['editorStyle',] }],
-    theme: [{ type: Input, args: ['theme',] }],
-    fullScreenKeyBinding: [{ type: Input, args: ['fullScreenKeyBinding',] }],
-    editorOptions: [{ type: Input, args: ['editorOptions',] }]
-};
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._destroy;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._widthSubject;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._heightSubject;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._editorStyle;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._value;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._theme;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._language;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._subject;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._editorInnerContainer;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._editor;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._fromEditor;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._componentInitialized;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._editorOptions;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._isFullScreen;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._keycode;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._registeredLanguagesStyles;
-    /** @type {?} */
-    TdCodeEditorComponent.prototype._editorContainer;
-    /**
-     * editorInitialized: function($event)
-     * Event emitted when editor is first initialized
-     * @type {?}
-     */
-    TdCodeEditorComponent.prototype.editorInitialized;
-    /**
-     * editorConfigurationChanged: function($event)
-     * Event emitted when editor's configuration changes
-     * @type {?}
-     */
-    TdCodeEditorComponent.prototype.editorConfigurationChanged;
-    /**
-     * editorLanguageChanged: function($event)
-     * Event emitted when editor's Language changes
-     * @type {?}
-     */
-    TdCodeEditorComponent.prototype.editorLanguageChanged;
-    /**
-     * editorValueChange: function($event)
-     * Event emitted any time something changes the editor value
-     * @type {?}
-     */
-    TdCodeEditorComponent.prototype.editorValueChange;
-    /**
-     * 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
-     * @type {?}
-     */
-    TdCodeEditorComponent.prototype.change;
-    /** @type {?} */
-    TdCodeEditorComponent.prototype.propagateChange;
-    /** @type {?} */
-    TdCodeEditorComponent.prototype.onTouched;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype.zone;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._changeDetectorRef;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdCodeEditorComponent.prototype._elementRef;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: code-editor.module.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CovalentCodeEditorModule {
-}
-CovalentCodeEditorModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [TdCodeEditorComponent],
-                exports: [TdCodeEditorComponent],
-                bootstrap: [TdCodeEditorComponent],
-            },] }
-];
-
-/**
- * @fileoverview added by tsickle
- * Generated from: public-api.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * Generated from: index.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * Generated from: covalent-code-editor.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-export { CovalentCodeEditorModule, TdCodeEditorComponent };
-//# sourceMappingURL=covalent-code-editor.js.map