@acorex/components 20.1.29 → 20.1.32

package/fesm2022/acorex-components-code-editor.mjs

@@ -0,0 +1,591 @@
+import { MXValueComponent, AXValuableComponent, AXComponent } from '@acorex/cdk/common';
+import { AXPlatform } from '@acorex/core/platform';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, inject, PLATFORM_ID, DestroyRef, signal, computed, afterNextRender, effect, forwardRef, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class AXCodeEditorComponent extends MXValueComponent {
+    constructor() {
+        super();
+        // Inputs (signals)
+        // value = input<string>('');
+        /** Active language mode. Default: 'javascript'. */
+        this.language = input('javascript', ...(ngDevMode ? [{ debugName: "language" }] : []));
+        /** When true, the editor becomes readonly (non-editable). */
+        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+        /** Placeholder text shown when the document is empty. */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        /** Toggle rendering of line numbers in the gutter. */
+        this.lineNumbers = input(true, ...(ngDevMode ? [{ debugName: "lineNumbers" }] : []));
+        /** Soft-wrap long lines when true. */
+        this.lineWrapping = input(false, ...(ngDevMode ? [{ debugName: "lineWrapping" }] : []));
+        /** Tab size (spaces per indent level). */
+        this.tabSize = input(2, ...(ngDevMode ? [{ debugName: "tabSize" }] : []));
+        /** When true, the Tab key indents instead of moving focus. */
+        this.indentWithTab = input(true, ...(ngDevMode ? [{ debugName: "indentWithTab" }] : []));
+        /** Fixed height for the editor (e.g., '320px'). */
+        this.height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        /** Minimum height for the editor. */
+        this.minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
+        /** Maximum height for the editor. */
+        this.maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+        // Theme follows platform theme mode; no input
+        /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
+        this.extensions = input([], ...(ngDevMode ? [{ debugName: "extensions" }] : []));
+        /** ARIA label for accessibility. */
+        this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        /** Focus the editor after first render. */
+        this.focusOnReady = input(false, ...(ngDevMode ? [{ debugName: "focusOnReady" }] : []));
+        /** If true, format the document via Prettier before emitting save. */
+        this.formatOnSave = input(false, ...(ngDevMode ? [{ debugName: "formatOnSave" }] : []));
+        /**
+         * Custom autocompletion options: either a static array of Completion items
+         * or a CodeMirror CompletionSource function.
+         */
+        this.customCompletions = input(null, ...(ngDevMode ? [{ debugName: "customCompletions" }] : []));
+        // Outputs (signals)
+        // valueChange = output<string>();
+        /** Emits when the editor is fully initialized and ready. */
+        this.ready = output();
+        /** Emits when the user triggers save (Ctrl/Cmd+S). Payload is the current text. */
+        this.save = output();
+        // View container
+        this.host = viewChild('host', ...(ngDevMode ? [{ debugName: "host" }] : []));
+        // Runtime state
+        this.platformId = inject(PLATFORM_ID);
+        this.destroyRef = inject(DestroyRef);
+        this.platformService = inject(AXPlatform);
+        this.editorViewSig = signal(null, ...(ngDevMode ? [{ debugName: "editorViewSig" }] : []));
+        // Compartments to reconfigure editor without recreating it
+        this.languageCompartment = null;
+        this.readOnlyCompartment = null;
+        this.themeCompartment = null;
+        this.placeholderCompartment = null;
+        this.wrappingCompartment = null;
+        this.keymapExtrasCompartment = null;
+        this.tabSizeCompartment = null;
+        this.lineNumbersCompartment = null;
+        // Cached CodeMirror modules after initialization
+        this.cm = { view: null, state: null, language: null, autocomplete: null, commands: null, search: null, lint: null };
+        this.isBrowser = computed(() => isPlatformBrowser(this.platformId), ...(ngDevMode ? [{ debugName: "isBrowser" }] : []));
+        afterNextRender(() => {
+            if (!this.isBrowser())
+                return;
+            this.initializeEditor();
+        });
+        // Keep model in sync when external value changes
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view)
+                return;
+            const newDoc = this.value ?? '';
+            const current = view.state.doc.toString();
+            if (newDoc !== current) {
+                view.dispatch({
+                    changes: { from: 0, to: view.state.doc.length, insert: newDoc },
+                });
+            }
+        });
+        // React to dynamic configuration changes
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.languageCompartment)
+                return;
+            const lang = this.language();
+            this.resolveLanguageExtension(lang).then((ext) => {
+                if (!view || !this.languageCompartment)
+                    return;
+                view.dispatch({ effects: this.languageCompartment.reconfigure(ext) });
+            });
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.readOnlyCompartment)
+                return;
+            const editable = !this.readOnly();
+            import('@codemirror/view').then(({ EditorView }) => {
+                if (!view || !this.readOnlyCompartment)
+                    return;
+                view.dispatch({ effects: this.readOnlyCompartment.reconfigure(EditorView.editable.of(editable)) });
+            });
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            // Establish reactive dependency on platform theme
+            // Create a reactive dependency to platform theme
+            void this.platformService.themeMode();
+            if (!view || !this.themeCompartment)
+                return;
+            this.resolveThemeExtension().then((themeExt) => {
+                if (!view || !this.themeCompartment)
+                    return;
+                view.dispatch({ effects: this.themeCompartment.reconfigure(themeExt) });
+            });
+        });
+        effect(() => {
+            this.placeholder();
+            const view = this.editorViewSig();
+            if (!view || !this.placeholderCompartment)
+                return;
+            import('@codemirror/view').then(({ placeholder }) => {
+                if (!view || !this.placeholderCompartment)
+                    return;
+                view.dispatch({ effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder() ?? '')) });
+            });
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.wrappingCompartment)
+                return;
+            const EditorView = this.cm.view?.EditorView;
+            if (!EditorView)
+                return;
+            const nextExt = this.lineWrapping() ? EditorView.lineWrapping : [];
+            this.reconfigure(this.wrappingCompartment, nextExt);
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.tabSizeCompartment)
+                return;
+            const EditorState = this.cm.state?.EditorState;
+            if (!EditorState)
+                return;
+            this.reconfigure(this.tabSizeCompartment, EditorState.tabSize.of(this.tabSize() ?? 2));
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.keymapExtrasCompartment)
+                return;
+            const keymap = this.cm.view?.keymap;
+            const commands = this.cm.commands;
+            if (!keymap || !commands)
+                return;
+            this.reconfigure(this.keymapExtrasCompartment, keymap.of(this.indentWithTab() ? [commands.indentWithTab] : []));
+        });
+        effect(() => {
+            const view = this.editorViewSig();
+            if (!view || !this.lineNumbersCompartment)
+                return;
+            const lineNumbers = this.cm.view?.lineNumbers;
+            if (!lineNumbers)
+                return;
+            this.reconfigure(this.lineNumbersCompartment, this.lineNumbers() ? lineNumbers() : []);
+        });
+    }
+    async initializeEditor() {
+        const hostEl = this.host()?.nativeElement;
+        if (!hostEl)
+            return;
+        await this.loadCodeMirrorModules();
+        this.createCompartments();
+        const keymaps = this.buildKeymaps();
+        const viewMod = this.cm.view;
+        const stateMod = this.cm.state;
+        const languageMod = this.cm.language;
+        const autoMod = this.cm.autocomplete;
+        const commandsMod = this.cm.commands;
+        const searchMod = this.cm.search;
+        const lintMod = this.cm.lint;
+        if (!viewMod || !stateMod || !languageMod || !autoMod || !commandsMod || !searchMod || !lintMod)
+            return;
+        const languageExt = await this.resolveLanguageExtension(this.language());
+        const themeExt = await this.resolveThemeExtension();
+        const placeholderExt = viewMod.placeholder(this.placeholder() ?? '');
+        const editableExt = viewMod.EditorView.editable.of(!this.readOnly());
+        const wrappingExt = this.lineWrapping() ? viewMod.EditorView.lineWrapping : [];
+        const tabSizeExt = stateMod.EditorState.tabSize.of(this.tabSize() ?? 2);
+        const lineNumbersExt = this.lineNumbers() ? viewMod.lineNumbers() : [];
+        const autoCompleteExt = autoMod.autocompletion({
+            override: this.buildCustomCompletionSources(),
+        });
+        const baseExtensions = [
+            this.lineNumbersCompartment.of(lineNumbersExt),
+            viewMod.highlightActiveLine(),
+            viewMod.highlightActiveLineGutter(),
+            viewMod.drawSelection(),
+            viewMod.dropCursor(),
+            viewMod.rectangularSelection(),
+            viewMod.crosshairCursor(),
+            viewMod.highlightSpecialChars(),
+            languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
+            languageMod.bracketMatching(),
+            languageMod.foldGutter(),
+            commandsMod.history(),
+            searchMod.highlightSelectionMatches(),
+            viewMod.keymap.of(keymaps),
+            autoCompleteExt,
+            this.languageCompartment.of(languageExt),
+            this.readOnlyCompartment.of(editableExt),
+            this.themeCompartment.of(themeExt),
+            this.placeholderCompartment.of(placeholderExt),
+            this.wrappingCompartment.of(wrappingExt),
+            this.tabSizeCompartment.of(tabSizeExt),
+            this.keymapExtrasCompartment.of(viewMod.keymap.of(this.indentWithTab() ? [commandsMod.indentWithTab] : [])),
+            ...this.extensions(),
+        ];
+        const updateListener = viewMod.EditorView.updateListener.of((vu) => {
+            if (vu.docChanged) {
+                const text = vu.state.doc.toString();
+                // this.writeValue(text);
+                this.value = text;
+            }
+        });
+        const state = stateMod.EditorState.create({
+            doc: this.value ?? '',
+            extensions: [...baseExtensions, updateListener],
+        });
+        const view = new viewMod.EditorView({ state, parent: hostEl });
+        // Update listener for external changes (selection, viewport, etc.) if needed later
+        view.dispatch({ effects: [] });
+        this.editorViewSig.set(view);
+        this.destroyRef.onDestroy(() => {
+            view.destroy();
+            this.editorViewSig.set(null);
+        });
+        if (this.focusOnReady()) {
+            view.focus();
+        }
+        this.ready.emit();
+    }
+    reconfigure(comp, ext) {
+        const view = this.editorViewSig();
+        if (!view || !comp)
+            return;
+        view.dispatch({ effects: comp.reconfigure(ext) });
+    }
+    /**
+     * Handles Ctrl/Cmd+S on the host. If formatOnSave is enabled, attempts
+     * to format the document first, then emits the saved text.
+     */
+    async onSaveShortcut(event) {
+        event.preventDefault();
+        const view = this.editorViewSig();
+        const current = view?.state.doc.toString() ?? this.value ?? '';
+        const payload = current;
+        if (this.formatOnSave()) {
+            await this.format(true);
+        }
+        this.save.emit(payload);
+    }
+    async loadCodeMirrorModules() {
+        const [viewMod, stateMod, langMod, autoMod, cmdMod, searchMod, lintMod] = await Promise.all([
+            import('@codemirror/view'),
+            import('@codemirror/state'),
+            import('@codemirror/language'),
+            import('@codemirror/autocomplete'),
+            import('@codemirror/commands'),
+            import('@codemirror/search'),
+            import('@codemirror/lint'),
+        ]);
+        this.cm.view = viewMod;
+        this.cm.state = stateMod;
+        this.cm.language = langMod;
+        this.cm.autocomplete = autoMod;
+        this.cm.commands = cmdMod;
+        this.cm.search = searchMod;
+        this.cm.lint = lintMod;
+    }
+    createCompartments() {
+        const stateMod = this.cm.state;
+        if (!stateMod)
+            return;
+        this.languageCompartment = new stateMod.Compartment();
+        this.readOnlyCompartment = new stateMod.Compartment();
+        this.themeCompartment = new stateMod.Compartment();
+        this.placeholderCompartment = new stateMod.Compartment();
+        this.wrappingCompartment = new stateMod.Compartment();
+        this.tabSizeCompartment = new stateMod.Compartment();
+        this.keymapExtrasCompartment = new stateMod.Compartment();
+        this.lineNumbersCompartment = new stateMod.Compartment();
+    }
+    buildKeymaps() {
+        const cmdMod = this.cm.commands;
+        const searchMod = this.cm.search;
+        const autoMod = this.cm.autocomplete;
+        const lintMod = this.cm.lint;
+        if (!cmdMod || !searchMod || !autoMod || !lintMod)
+            return [];
+        return [
+            ...cmdMod.defaultKeymap,
+            ...cmdMod.historyKeymap,
+            ...searchMod.searchKeymap,
+            ...autoMod.completionKeymap,
+            ...lintMod.lintKeymap,
+        ];
+    }
+    // Attempts to format code using Prettier (browser-only). Returns formatted text or null on failure/unsupported.
+    async tryFormatWithPrettier(text, lang) {
+        if (!this.isBrowser())
+            return null;
+        try {
+            const prettier = await import('prettier/standalone');
+            let parser = null;
+            const plugins = [];
+            switch (lang) {
+                case 'javascript':
+                case 'js': {
+                    const [babel, estree] = await Promise.all([
+                        import('prettier/plugins/babel'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(babel, estree);
+                    parser = 'babel';
+                    break;
+                }
+                case 'typescript':
+                case 'ts': {
+                    const [typescript, estree] = await Promise.all([
+                        import('prettier/plugins/typescript'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(typescript, estree);
+                    parser = 'typescript';
+                    break;
+                }
+                case 'json': {
+                    const [babel, estree] = await Promise.all([
+                        import('prettier/plugins/babel'),
+                        import('prettier/plugins/estree'),
+                    ]);
+                    plugins.push(babel, estree);
+                    parser = 'json';
+                    break;
+                }
+                case 'html': {
+                    const html = await import('prettier/plugins/html');
+                    plugins.push(html);
+                    parser = 'html';
+                    break;
+                }
+                case 'css': {
+                    const postcss = await import('prettier/plugins/postcss');
+                    plugins.push(postcss);
+                    parser = 'css';
+                    break;
+                }
+                case 'markdown': {
+                    const markdown = await import('prettier/plugins/markdown');
+                    plugins.push(markdown);
+                    parser = 'markdown';
+                    break;
+                }
+                default:
+                    return null;
+            }
+            if (!parser)
+                return null;
+            const formatted = await prettier.format(text, {
+                parser,
+                plugins,
+            });
+            return formatted;
+        }
+        catch {
+            return null;
+        }
+    }
+    async resolveLanguageExtension(lang) {
+        switch (lang) {
+            case 'javascript':
+            case 'js': {
+                const m = await import('@codemirror/lang-javascript');
+                return m.javascript();
+            }
+            case 'typescript':
+            case 'ts': {
+                const m = await import('@codemirror/lang-javascript');
+                return m.javascript({ typescript: true });
+            }
+            case 'json': {
+                const m = await import('@codemirror/lang-json');
+                return m.json();
+            }
+            case 'html': {
+                const m = await import('@codemirror/lang-html');
+                return m.html();
+            }
+            case 'css': {
+                const m = await import('@codemirror/lang-css');
+                return m.css();
+            }
+            case 'scss':
+            case 'sass': {
+                const m = await import('@codemirror/lang-sass');
+                return m.sass();
+            }
+            case 'sql': {
+                const m = await import('@codemirror/lang-sql');
+                return m.sql();
+            }
+            case 'xml': {
+                const m = await import('@codemirror/lang-xml');
+                return m.xml();
+            }
+            case 'markdown': {
+                const m = await import('@codemirror/lang-markdown');
+                return m.markdown();
+            }
+            default:
+                return [];
+        }
+    }
+    async resolveThemeExtension() {
+        const { EditorView } = await import('@codemirror/view');
+        const darkMode = this.platformService.themeMode() === 'dark';
+        // const surfaceVar = 'rgb(var(--ax-sys-color-surface)) !important';
+        if (darkMode) {
+            try {
+                const { oneDark } = await import('@codemirror/theme-one-dark');
+                return [
+                    oneDark,
+                    EditorView.theme({
+                        '&': { backgroundColor: 'transparent !important' },
+                        '.cm-gutters': {},
+                    }, { dark: true }),
+                ];
+            }
+            catch {
+                return EditorView.theme({
+                    '&': { backgroundColor: 'transparent !important' },
+                    '.cm-gutters': {},
+                }, { dark: true });
+            }
+        }
+        return EditorView.theme({
+            '&': { backgroundColor: 'transparent !important' },
+            '.cm-gutters': {},
+        }, { dark: false });
+    }
+    buildCustomCompletionSources() {
+        const provided = this.customCompletions();
+        if (!provided)
+            return undefined;
+        if (typeof provided === 'function') {
+            return [provided];
+        }
+        // Treat array as a static completion list
+        const staticSource = (context) => {
+            const from = context.pos;
+            return { from, options: provided };
+        };
+        return [staticSource];
+    }
+    // Public API
+    /** Programmatically focus the editor. */
+    focus() {
+        const view = this.editorViewSig();
+        if (view)
+            view.focus();
+    }
+    /** Select all text in the current document. */
+    selectAll() {
+        const view = this.editorViewSig();
+        if (!view)
+            return;
+        const length = view.state.doc.length;
+        view.dispatch({ selection: { anchor: 0, head: length } });
+    }
+    // Formats the current document with Prettier (if available for the active language).
+    // Returns the formatted text or null if unchanged/unsupported.
+    async format(affect = true) {
+        const view = this.editorViewSig();
+        if (!view)
+            return null;
+        const source = view.state.doc.toString();
+        if (!source)
+            return null;
+        const formatted = await this.tryFormatWithPrettier(source, this.language());
+        if (!formatted || formatted === source)
+            return null;
+        if (affect) {
+            view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: formatted } });
+        }
+        return formatted;
+    }
+    /** Returns the total number of characters in the current document. */
+    getTotalCharacters() {
+        const view = this.editorViewSig();
+        if (view)
+            return view.state.doc.length ?? 0;
+        const text = this.value ?? '';
+        return text.length;
+    }
+    /** Returns the total number of lines in the current document. */
+    getTotalLines() {
+        const view = this.editorViewSig();
+        if (view) {
+            const doc = view.state.doc;
+            return typeof doc?.lines === 'number' ? doc.lines : doc.toString().split(/\r?\n/).length;
+        }
+        const text = this.value ?? '';
+        return text ? text.split(/\r?\n/).length : 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: AXCodeEditorComponent, isStandalone: true, selector: "ax-code-editor", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, lineWrapping: { classPropertyName: "lineWrapping", publicName: "lineWrapping", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null }, indentWithTab: { classPropertyName: "indentWithTab", publicName: "indentWithTab", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, focusOnReady: { classPropertyName: "focusOnReady", publicName: "focusOnReady", isSignal: true, isRequired: false, transformFunction: null }, formatOnSave: { classPropertyName: "formatOnSave", publicName: "formatOnSave", isSignal: true, isRequired: false, transformFunction: null }, customCompletions: { classPropertyName: "customCompletions", publicName: "customCompletions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ready: "ready", save: "save" }, host: { listeners: { "keydown.control.s": "onSaveShortcut($event)" }, classAttribute: "ax-code-editor block" }, providers: [
+            { provide: AXValuableComponent, useExisting: AXCodeEditorComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXCodeEditorComponent),
+                multi: true,
+            },
+            { provide: AXComponent, useExisting: AXCodeEditorComponent },
+        ], viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      #host
+      class="cm-editor"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-readonly]="readOnly() ? 'true' : 'false'"
+      [attr.data-placeholder]="placeholder() ?? null"
+      [style.height]="height() ?? null"
+      [style.minHeight]="minHeight() ?? null"
+      [style.maxHeight]="maxHeight() ?? null"
+    ></div>
+  `, isInline: true, styles: [":host{display:block;width:100%;transition:none}.cm-editor{width:100%;max-width:100%;box-sizing:border-box}.cm-editor.cm-focused{outline:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-code-editor', host: {
+                        '(keydown.control.s)': 'onSaveShortcut($event)',
+                        class: 'ax-code-editor block',
+                    }, providers: [
+                        { provide: AXValuableComponent, useExisting: AXCodeEditorComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXCodeEditorComponent),
+                            multi: true,
+                        },
+                        { provide: AXComponent, useExisting: AXCodeEditorComponent },
+                    ], template: `
+    <div
+      #host
+      class="cm-editor"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-readonly]="readOnly() ? 'true' : 'false'"
+      [attr.data-placeholder]="placeholder() ?? null"
+      [style.height]="height() ?? null"
+      [style.minHeight]="minHeight() ?? null"
+      [style.maxHeight]="maxHeight() ?? null"
+    ></div>
+  `, styles: [":host{display:block;width:100%;transition:none}.cm-editor{width:100%;max-width:100%;box-sizing:border-box}.cm-editor.cm-focused{outline:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+class AXCodeEditorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule, AXCodeEditorComponent], exports: [AXCodeEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXCodeEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, AXCodeEditorComponent],
+                    exports: [AXCodeEditorComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXCodeEditorComponent, AXCodeEditorModule };
+//# sourceMappingURL=acorex-components-code-editor.mjs.map