import * as i0 from '@angular/core';
import { inject, DestroyRef, viewChild, input, signal, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
import { C as ContentBuilderStore, a as CONTENT_BUILDER, b as CONTENT_EDITOR_BLOCK } from './ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DNLTNGYa.mjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { Compartment } from '@codemirror/state';
import { Menu, MenuItem, MenuTrigger } from '@ngstarter-ui/components/menu';
import { Button } from '@ngstarter-ui/components/button';
import { githubLight } from '@uiw/codemirror-theme-github';
import { indentWithTab } from '@codemirror/commands';
import { DOCUMENT } from '@angular/common';

class CodeBlockComponent {
    _store = inject(ContentBuilderStore);
    _contentBuilder = inject(CONTENT_BUILDER);
    _destroyRef = inject(DestroyRef);
    document = inject(DOCUMENT);
    _contentRef = viewChild.required('contentRef');
    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
    settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
    placeholder = input('Write your code here', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
    _languageList = signal([
        {
            language: 'none',
            name: 'None',
            library: () => new Promise(() => { })
        },
        {
            language: 'angular',
            name: 'Angular',
            library: () => import('@codemirror/lang-angular').then(lang => lang.angular())
        },
        {
            language: 'javascript',
            name: 'JavaScript',
            library: () => import('@codemirror/lang-javascript').then(lang => lang.javascript())
        },
        {
            language: 'typescript',
            name: 'TypeScript',
            library: () => import('@codemirror/lang-javascript').then(lang => lang.javascript({ typescript: true }))
        },
        {
            language: 'html',
            name: 'HTML',
            library: () => import('@codemirror/lang-html').then(lang => lang.html())
        },
        {
            language: 'css',
            name: 'CSS',
            library: () => import('@codemirror/lang-css').then(lang => lang.css())
        },
        {
            language: 'sass',
            name: 'Sass',
            library: () => import('@codemirror/lang-sass').then(lang => lang.sass())
        },
        {
            language: 'json',
            name: 'JSON',
            library: () => import('@codemirror/lang-json').then(lang => lang.json())
        }
    ], ...(ngDevMode ? [{ debugName: "_languageList" }] : /* istanbul ignore next */ []));
    _code = signal('', ...(ngDevMode ? [{ debugName: "_code" }] : /* istanbul ignore next */ []));
    _language = signal(this._languageList()[0], ...(ngDevMode ? [{ debugName: "_language" }] : /* istanbul ignore next */ []));
    _isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
    _editorView;
    _editorLanguage = new Compartment();
    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
    async ngOnInit() {
        const codeLanguage = this._languageList().find(codeLanguage => codeLanguage.language === this.settings().language);
        if (codeLanguage) {
            this._language.set(codeLanguage);
        }
        this._code.set(this.content() || '');
        this._isEmpty.set(this._code().trim().length === 0);
        this._contentBuilder
            .focusChanged
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe(() => {
            if (this._store.focusedBlockId() === this.id()) {
                this.focus();
            }
        });
        this._editorView = new EditorView({
            doc: this._code(),
            parent: this._contentRef().nativeElement,
            extensions: [
                basicSetup,
                githubLight,
                keymap.of([indentWithTab]),
                this._editorLanguage.of([]),
                EditorView.updateListener.of((v) => {
                    if (v.docChanged) {
                        this.update();
                    }
                })
            ],
        });
        await this.selectLanguage(this._language());
        this._editorView.contentDOM.style.width = '0';
        this._editorView.focus();
        this.initialized.set(true);
    }
    ngOnDestroy() {
        this._editorView.destroy();
    }
    focus() {
        this._editorView.focus();
    }
    getData() {
        return {
            content: this._editorView.state.doc.toString(),
            settings: {
                ...this.settings(),
                language: this._language().language
            }
        };
    }
    isEmpty() {
        return this._editorView.state.doc.toString().trim().length === 0;
    }
    async selectLanguage(codeLanguage) {
        this._language.set(codeLanguage);
        if (codeLanguage.language === 'none') {
            this._editorView.dispatch({
                effects: this._editorLanguage.reconfigure([])
            });
        }
        else {
            const language = await this._language().library();
            this._editorView.dispatch({
                effects: this._editorLanguage.reconfigure(language)
            });
        }
        this.update();
    }
    update() {
        this._store.updateBlock(this.id(), { ...this.getData(), isEmpty: this.isEmpty() });
        this._contentBuilder.emitContentChangeEvent();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CodeBlockComponent, isStandalone: true, selector: "ngs-code-block", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-code-block" }, providers: [
            {
                provide: CONTENT_EDITOR_BLOCK,
                useExisting: forwardRef(() => CodeBlockComponent),
                multi: true
            }
        ], viewQueries: [{ propertyName: "_contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bg-surface-container rounded-xl\">\n  <div class=\"border-b border-b-default h-12 header\">\n    <button ngsButton [ngsMenuTriggerFor]=\"languageListMenu\" class=\"-ms-2\">{{ _language().name }}</button>\n  </div>\n  <div class=\"content\">\n    <div class=\"content-code\" #contentRef></div>\n  </div>\n</div>\n\n<ngs-menu #languageListMenu=\"ngsMenu\">\n  @for (languageItem of _languageList(); track $index) {\n    <button ngs-menu-item (click)=\"selectLanguage(languageItem)\"\n            class=\"[&.is-active]:!bg-secondary-fixed\"\n            [class.is-active]=\"languageItem.language === _language().language\">{{ languageItem.name }}</button>\n  }\n</ngs-menu>\n", styles: [":host{display:block;margin:calc(var(--spacing, .25rem) * 3) 0}:host .header{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 4)}:host .language-trigger{font-size:var(--text-sm);cursor:pointer}:host .content{outline:none;font-size:var(--text-sm);padding:calc(var(--spacing, .25rem) * 2);min-width:0}:host .content .content-code{min-width:0}:host .content .content-code ::ng-deep .cm-editor{border-radius:var(--ngs-radius-lg)}:host .content .content-code ::ng-deep .cm-scroller{border-radius:var(--ngs-radius-lg);overflow-x:auto}:host .content .content-code ::ng-deep .cm-content,:host .content .content-code ::ng-deep .cm-gutter{min-height:160px}:host-context(.block.is-active) .content:empty:before,:host-context(.block.is-focused) .content:empty:before{content:attr(data-empty-placeholder);color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CodeBlockComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-code-block', imports: [
                        Menu,
                        MenuItem,
                        MenuTrigger,
                        Button
                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: CONTENT_EDITOR_BLOCK,
                            useExisting: forwardRef(() => CodeBlockComponent),
                            multi: true
                        }
                    ], host: {
                        'class': 'ngs-code-block',
                    }, template: "<div class=\"bg-surface-container rounded-xl\">\n  <div class=\"border-b border-b-default h-12 header\">\n    <button ngsButton [ngsMenuTriggerFor]=\"languageListMenu\" class=\"-ms-2\">{{ _language().name }}</button>\n  </div>\n  <div class=\"content\">\n    <div class=\"content-code\" #contentRef></div>\n  </div>\n</div>\n\n<ngs-menu #languageListMenu=\"ngsMenu\">\n  @for (languageItem of _languageList(); track $index) {\n    <button ngs-menu-item (click)=\"selectLanguage(languageItem)\"\n            class=\"[&.is-active]:!bg-secondary-fixed\"\n            [class.is-active]=\"languageItem.language === _language().language\">{{ languageItem.name }}</button>\n  }\n</ngs-menu>\n", styles: [":host{display:block;margin:calc(var(--spacing, .25rem) * 3) 0}:host .header{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 4)}:host .language-trigger{font-size:var(--text-sm);cursor:pointer}:host .content{outline:none;font-size:var(--text-sm);padding:calc(var(--spacing, .25rem) * 2);min-width:0}:host .content .content-code{min-width:0}:host .content .content-code ::ng-deep .cm-editor{border-radius:var(--ngs-radius-lg)}:host .content .content-code ::ng-deep .cm-scroller{border-radius:var(--ngs-radius-lg);overflow-x:auto}:host .content .content-code ::ng-deep .cm-content,:host .content .content-code ::ng-deep .cm-gutter{min-height:160px}:host-context(.block.is-active) .content:empty:before,:host-context(.block.is-focused) .content:empty:before{content:attr(data-empty-placeholder);color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { _contentRef: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });

export { CodeBlockComponent };
//# sourceMappingURL=ngstarter-ui-components-content-editor-code-block.component-CpZ5gJOc.mjs.map
