import * as i0 from '@angular/core';
import { InjectionToken, ApplicationRef, createComponent, ElementRef, input, Component, inject, PLATFORM_ID, DOCUMENT, ChangeDetectorRef, Injector, viewChild, booleanAttribute, output, forwardRef, Directive, DestroyRef } from '@angular/core';
import { NodeView, Node, mergeAttributes, Mark, Editor } from '@tiptap/core';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import Bold from '@tiptap/extension-bold';
import Italic from '@tiptap/extension-italic';
import Strike from '@tiptap/extension-strike';
import CodeBlock from '@tiptap/extension-code-block';
import { Blockquote } from '@tiptap/extension-blockquote';
import BulletList from '@tiptap/extension-bullet-list';
import OrderedList from '@tiptap/extension-ordered-list';
import ListItem from '@tiptap/extension-list-item';
import Link from '@tiptap/extension-link';
import Placeholder from '@tiptap/extension-placeholder';
import Youtube from '@tiptap/extension-youtube';
import BubbleMenu from '@tiptap/extension-bubble-menu';
import Code from '@tiptap/extension-code';
import History from '@tiptap/extension-history';
import Dropcursor from '@tiptap/extension-dropcursor';
import Image$1 from '@tiptap/extension-image';
import { isPlatformServer } from '@angular/common';
import { Button } from '@ngstarter-ui/components/button';
import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
import * as i1 from '@ngstarter-ui/components/upload';
import { UploadTriggerDirective } from '@ngstarter-ui/components/upload';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DialogRef, DIALOG_DATA, DialogActions, DialogContent, DialogTitle, Dialog } from '@ngstarter-ui/components/dialog';
import * as i1$1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Input } from '@ngstarter-ui/components/input';
import { FormField, Label } from '@ngstarter-ui/components/form-field';

const COMMENT_EDITOR = new InjectionToken('COMMENT_EDITOR');
const COMMENT_EDITOR_BUBBLE_MENU = new InjectionToken('COMMENT_EDITOR_BUBBLE_MENU');

class AngularRenderer {
    applicationRef;
    componentRef;
    constructor(ViewComponent, injector, props) {
        this.applicationRef = injector.get(ApplicationRef);
        this.componentRef = createComponent(ViewComponent, {
            environmentInjector: this.applicationRef.injector,
            elementInjector: injector,
        });
        // set input props to the component
        this.updateProps(props);
        this.applicationRef.attachView(this.componentRef.hostView);
    }
    get instance() {
        return this.componentRef.instance;
    }
    get elementRef() {
        return this.componentRef.injector.get(ElementRef);
    }
    get dom() {
        return this.elementRef.nativeElement;
    }
    updateProps(props) {
        Object.entries(props).forEach(([key, value]) => {
            this.componentRef.setInput(key, value);
        });
    }
    detectChanges() {
        this.componentRef.changeDetectorRef.detectChanges();
    }
    destroy() {
        this.componentRef.destroy();
        this.applicationRef.detachView(this.componentRef.hostView);
    }
}

class AngularNodeViewContainer extends NodeView {
    renderer;
    contentDOMElement;
    mount() {
        const injector = this.options.injector;
        const props = {
            editor: this.editor,
            node: this.node,
            // @ts-ignore
            decorations: this.decorations,
            selected: false,
            extension: this.extension,
            getPos: () => this.getPos(),
            updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
            deleteNode: () => this.deleteNode(),
        };
        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
        // create renderer
        this.renderer = new AngularRenderer(this.component, injector, props);
        // Register drag handler
        if (this.extension.config.draggable) {
            this.renderer.elementRef.nativeElement.ondragstart = (e) => {
                this.onDragStart(e);
            };
        }
        this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? 'span' : 'div');
        if (this.contentDOMElement) {
            // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
            // With this fix it seems to work fine
            // See: https://github.com/ueberdosis/tiptap/issues/1197
            this.contentDOMElement.style.whiteSpace = 'inherit';
            // Required for editable node views
            // The content won't be rendered if `editable` is set to `false`
            this.renderer.detectChanges();
        }
        this.appendContendDom();
    }
    get dom() {
        return this.renderer.dom;
    }
    get contentDOM() {
        if (this.node.isLeaf) {
            return null;
        }
        return this.contentDOMElement;
    }
    appendContendDom() {
        const contentElement = this.dom.querySelector('[data-node-view-content]');
        if (this.contentDOMElement
            && contentElement
            && !contentElement.contains(this.contentDOMElement)) {
            contentElement.appendChild(this.contentDOMElement);
        }
    }
    handleSelectionUpdate() {
        const { from, to } = this.editor.state.selection;
        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
            this.selectNode();
        }
        else {
            this.deselectNode();
        }
    }
    update(node, decorations) {
        const updateProps = () => {
            this.renderer.updateProps({ node, decorations });
        };
        if (this.options.update) {
            const oldNode = this.node;
            const oldDecorations = this.decorations;
            this.node = node;
            this.decorations = decorations;
            return this.options.update({
                oldNode,
                // @ts-ignore
                oldDecorations,
                newNode: node,
                newDecorations: decorations,
                updateProps: () => updateProps(),
            });
        }
        if (node.type !== this.node.type) {
            return false;
        }
        if (node === this.node && this.decorations === decorations) {
            return true;
        }
        this.node = node;
        this.decorations = decorations;
        updateProps();
        return true;
    }
    selectNode() {
        this.renderer.updateProps({ selected: true });
    }
    deselectNode() {
        this.renderer.updateProps({ selected: false });
    }
    destroy() {
        this.renderer.destroy();
        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
        this.contentDOMElement = null;
    }
}
const AngularNodeViewRenderer = (ViewComponent, options) => {
    // @ts-ignore
    return (props) => {
        return new AngularNodeViewContainer(ViewComponent, props, options);
    };
};

class AngularNodeView {
    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
    decorations = input.required(...(ngDevMode ? [{ debugName: "decorations" }] : /* istanbul ignore next */ []));
    selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
    extension = input.required(...(ngDevMode ? [{ debugName: "extension" }] : /* istanbul ignore next */ []));
    getPos = input.required(...(ngDevMode ? [{ debugName: "getPos" }] : /* istanbul ignore next */ []));
    updateAttributes = input.required(...(ngDevMode ? [{ debugName: "updateAttributes" }] : /* istanbul ignore next */ []));
    deleteNode = input.required(...(ngDevMode ? [{ debugName: "deleteNode" }] : /* istanbul ignore next */ []));
    HTMLAttributes = input({}, ...(ngDevMode ? [{ debugName: "HTMLAttributes" }] : /* istanbul ignore next */ []));
    innerDecorations = input(undefined, ...(ngDevMode ? [{ debugName: "innerDecorations" }] : /* istanbul ignore next */ []));
    view = input(undefined, ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AngularNodeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: AngularNodeView, isStandalone: true, selector: "ng-component", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: true, transformFunction: null }, getPos: { classPropertyName: "getPos", publicName: "getPos", isSignal: true, isRequired: true, transformFunction: null }, updateAttributes: { classPropertyName: "updateAttributes", publicName: "updateAttributes", isSignal: true, isRequired: true, transformFunction: null }, deleteNode: { classPropertyName: "deleteNode", publicName: "deleteNode", isSignal: true, isRequired: true, transformFunction: null }, HTMLAttributes: { classPropertyName: "HTMLAttributes", publicName: "HTMLAttributes", isSignal: true, isRequired: false, transformFunction: null }, innerDecorations: { classPropertyName: "innerDecorations", publicName: "innerDecorations", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AngularNodeView, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '' }]
        }], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], extension: [{ type: i0.Input, args: [{ isSignal: true, alias: "extension", required: true }] }], getPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "getPos", required: true }] }], updateAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateAttributes", required: true }] }], deleteNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteNode", required: true }] }], HTMLAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "HTMLAttributes", required: false }] }], innerDecorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerDecorations", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }] } });

class ImageUploadingPlaceholder extends AngularNodeView {
    src;
    error;
    _canceled = false;
    ngOnInit() {
        const uploadFn = this.extension().options['uploadFn'];
        this.src = this.node().attrs['src'];
        const blob = this._dataURItoBlob(this.src);
        uploadFn(blob).then((src) => {
            if (this._canceled) {
                return;
            }
            const image = new Image();
            image.src = src;
            image.onload = () => {
                this.editor().chain().focus().setImage({ src }).run();
            };
        }, (error) => {
            this.error = error;
        });
    }
    ngOnDestroy() {
        this._canceled = true;
    }
    _dataURItoBlob(dataURI) {
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
        const byteString = atob(dataURI.split(',')[1]);
        // separate out the mime component
        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        // write the bytes of the string to an ArrayBuffer
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], { type: mimeString });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageUploadingPlaceholder, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ImageUploadingPlaceholder, isStandalone: true, selector: "ngs-image-uploading-placeholder", host: { properties: { "class.selected": "selected()" }, classAttribute: "ngs-image-uploading-placeholder" }, usesInheritance: true, ngImport: i0, template: "@if (src) {\n  <div class=\"flex items-center justify-center relative\">\n    @if (error) {\n      <div class=\"absolute top-0 start-0 right-0 min-h-8 bg-error z-[2]\n                    text-on-error text-tiny flex items-center px-3\">{{ error }}</div>\n    }\n    <div class=\"w-max absolute start-1/2 top-1/2 z-[1] -translate-y-1/2 -translate-x-1/2\">\n      @if (!error) {\n        <ngs-progress-spinner />\n      }\n    </div>\n    <img [src]=\"src\" alt=\"\" class=\"max-w-full opacity-70\">\n  </div>\n}\n", styles: [":host{display:block}:host.selected{outline:var(--sys-tertiary) solid 4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageUploadingPlaceholder, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-image-uploading-placeholder', imports: [
                        ProgressSpinner
                    ], host: {
                        'class': 'ngs-image-uploading-placeholder',
                        '[class.selected]': 'selected()'
                    }, template: "@if (src) {\n  <div class=\"flex items-center justify-center relative\">\n    @if (error) {\n      <div class=\"absolute top-0 start-0 right-0 min-h-8 bg-error z-[2]\n                    text-on-error text-tiny flex items-center px-3\">{{ error }}</div>\n    }\n    <div class=\"w-max absolute start-1/2 top-1/2 z-[1] -translate-y-1/2 -translate-x-1/2\">\n      @if (!error) {\n        <ngs-progress-spinner />\n      }\n    </div>\n    <img [src]=\"src\" alt=\"\" class=\"max-w-full opacity-70\">\n  </div>\n}\n", styles: [":host{display:block}:host.selected{outline:var(--sys-tertiary) solid 4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

const ImageUploadingPlaceholderExtension = (injector, options) => {
    return Node.create({
        name: 'imageUploadingPlaceholder',
        draggable: false,
        group: 'block',
        addOptions() {
            return {
                uploadFn: options.uploadFn
            };
        },
        addAttributes() {
            return {
                uploadId: {
                    default: ''
                },
                src: {
                    default: null
                }
            };
        },
        addCommands() {
            return {
                addImageUploadingPlaceholder: options => ({ commands }) => {
                    return commands.insertContent({
                        type: this.name,
                        attrs: {
                            src: options.src
                        }
                    });
                },
            };
        },
        addNodeView() {
            return AngularNodeViewRenderer(ImageUploadingPlaceholder, { injector });
        },
        parseHTML() {
            return [
                {
                    tag: 'image-uploading-placeholder',
                }
            ];
        },
        renderHTML({ HTMLAttributes }) {
            return [
                'image-uploading-placeholder', mergeAttributes(HTMLAttributes),
            ];
        }
    });
};

const SingleEmoji = Mark.create({
    name: 'singleEmoji',
    inclusive: false,
    addOptions() {
        return {
            HTMLAttributes: {
                class: 'single-emoji',
            },
        };
    },
    parseHTML() {
        return [
            {
                tag: 'span.single-emoji',
            },
        ];
    },
    renderHTML({ HTMLAttributes }) {
        return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
    },
});

class CommentEditor {
    _platformId = inject(PLATFORM_ID);
    _document = inject(DOCUMENT);
    _cdr = inject(ChangeDetectorRef);
    _injector = inject(Injector);
    _content = viewChild.required('content');
    _bubbleMenu = viewChild.required('bubbleMenu');
    _imageBubbleMenu = viewChild.required('imageBubbleMenu');
    _value = '';
    editor;
    isToolbarVisible = false;
    isFullViewVisible = false;
    contentMaxHeight = input(...(ngDevMode ? [undefined, { debugName: "contentMaxHeight" }] : /* istanbul ignore next */ []));
    buttonCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "buttonCancelLabel" }] : /* istanbul ignore next */ []));
    buttonSendLabel = input('Send', ...(ngDevMode ? [{ debugName: "buttonSendLabel" }] : /* istanbul ignore next */ []));
    placeholder = input('Write something …', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
    toolbarAlwaysVisible = input(false, { ...(ngDevMode ? { debugName: "toolbarAlwaysVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fullViewMode = input(false, { ...(ngDevMode ? { debugName: "fullViewMode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    cancelButtonAlwaysVisible = input(false, { ...(ngDevMode ? { debugName: "cancelButtonAlwaysVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    allowEmptyContent = input(false, { ...(ngDevMode ? { debugName: "allowEmptyContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    autoClear = input(true, { ...(ngDevMode ? { debugName: "autoClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
    imageUploadFn = input(...(ngDevMode ? [undefined, { debugName: "imageUploadFn" }] : /* istanbul ignore next */ []));
    sent = output();
    canceled = output();
    ngOnInit() {
        this._init();
    }
    get api() {
        return {
            isCommandDisabled: (command) => this.isCommandDisabled(command),
            isActive: (command) => this.editor?.isActive(command),
            runCommand: (command) => this._runCommand(command),
            editor: () => this.editor,
            isToolbarActive: () => this.isToolbarVisible,
            toggleToolbar: () => this.toggleToolbar(),
            showToolbar: () => this.showToolbar(),
            hideToolbar: () => this.hideToolbar(),
            isEditorActivated: () => this.isFullViewVisible || this.fullViewMode(),
            showFullView: () => this.showFullView(),
            hideFullView: () => this.hideFullView(),
            insertText: (text) => this.insertText(text),
            clear: () => this.clear()
        };
    }
    insertText(text) {
        if (!this.editor) {
            return;
        }
        const isOnlyEmoji = (str) => {
            if (!str) {
                return false;
            }
            const emojiRegex = /^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+$/;
            return emojiRegex.test(str.trim());
        };
        if (this.editor.isFocused) {
            const { selection } = this.editor.state;
            const isParentEmpty = selection.$from.parent.content.size === 0;
            if (isOnlyEmoji(text) && isParentEmpty) {
                this.editor.chain().focus().insertContent({
                    type: 'text',
                    text,
                    marks: [{ type: 'singleEmoji' }]
                }).run();
            }
            else {
                this.editor.chain().focus().insertContent(text).run();
            }
        }
        else {
            const content = this.editor.getText();
            let textToInsert = text;
            if (content.length > 0) {
                textToInsert = ` ${text} `;
            }
            const lastNode = this.editor.state.doc.lastChild;
            if (lastNode && lastNode.type.name === 'paragraph') {
                const isLastNodeEmpty = lastNode.content.size === 0;
                const pos = this.editor.state.doc.content.size - 1;
                if (isOnlyEmoji(text) && isLastNodeEmpty) {
                    this.editor.chain().focus().insertContentAt(pos, {
                        type: 'text',
                        text,
                        marks: [{ type: 'singleEmoji' }]
                    }).run();
                }
                else {
                    this.editor.chain().focus().insertContentAt(pos, textToInsert).run();
                }
            }
            else {
                this.editor.chain().focus().insertContentAt(this.editor.state.doc.content.size, textToInsert).run();
            }
            this.activateFullView();
        }
    }
    isCommandDisabled(command) {
        if (!this.editor) {
            return true;
        }
        try {
            const canFocus = this.editor.can().chain().focus();
            return !canFocus[command]().run() || null;
        }
        catch (e) {
            return true;
        }
    }
    ngOnDestroy() {
        this.editor?.destroy();
    }
    send(event) {
        event.stopPropagation();
        event.preventDefault();
        this.sent.emit(this._value);
        if (this.autoClear()) {
            this.isToolbarVisible = false;
            this.isFullViewVisible = false;
            this.clear();
        }
    }
    clear() {
        this._value = '';
        this.editor?.commands.clearContent(true);
    }
    activateFullView(event) {
        if (event) {
            const target = event.target;
            if (target.closest('button')) {
                return;
            }
        }
        this.showFullView();
    }
    showFullView() {
        this.isFullViewVisible = true;
    }
    hideFullView() {
        this.isFullViewVisible = false;
    }
    toggleToolbar() {
        this.isToolbarVisible = !this.isToolbarVisible;
    }
    showToolbar() {
        this.isToolbarVisible = true;
    }
    hideToolbar() {
        this.isToolbarVisible = false;
    }
    cancel(event) {
        event.stopPropagation();
        event.preventDefault();
        this.isToolbarVisible = false;
        this.isFullViewVisible = false;
        this.clear();
        this.canceled.emit();
    }
    _runCommand(command) {
        if (!this.editor) {
            return;
        }
        const chainFocus = this.editor.chain().focus();
        chainFocus[command]().run();
    }
    _init() {
        if (isPlatformServer(this._platformId)) {
            return;
        }
        this.editor = new Editor({
            element: this._content().nativeElement,
            extensions: [
                Document,
                Paragraph,
                Text,
                Bold,
                Italic,
                Strike,
                Blockquote,
                CodeBlock,
                BulletList,
                OrderedList,
                ListItem,
                Code,
                History,
                Dropcursor,
                Youtube.configure({
                    controls: false,
                    nocookie: true,
                }),
                ImageUploadingPlaceholderExtension(this._injector, {
                    uploadFn: this.imageUploadFn(),
                }),
                Image$1.configure({
                    inline: true,
                    allowBase64: true
                }),
                SingleEmoji,
                Link.configure({
                    openOnClick: false,
                    defaultProtocol: 'https',
                }),
                Placeholder.configure({
                    placeholder: this.placeholder()
                }),
                // FloatingMenu.configure({
                //   element: this._floatingMenu().nativeElement
                // }),
                BubbleMenu.configure({
                    pluginKey: 'imageBubbleMenu',
                    element: this._imageBubbleMenu().nativeElement,
                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
                        // return editor.isActive('image');
                        return false;
                    },
                }),
                BubbleMenu.configure({
                    pluginKey: 'bubbleMenu',
                    element: this._bubbleMenu().nativeElement,
                    tippyOptions: {
                        appendTo: this._document.body,
                        zIndex: 999
                    },
                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
                        return !editor.isActive('image') &&
                            !editor.isActive('youtube') &&
                            !editor.isActive('imageUploadingPlaceholder') &&
                            !editor.view.state.selection.empty;
                    },
                })
            ],
            content: '',
            onUpdate: ({ editor }) => {
                this._value = !editor.isEmpty ? editor.getHTML() : '';
                this._cdr.markForCheck();
            }
        });
        this._cdr.detectChanges();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommentEditor, isStandalone: true, selector: "ngs-comment-editor", inputs: { contentMaxHeight: { classPropertyName: "contentMaxHeight", publicName: "contentMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, buttonCancelLabel: { classPropertyName: "buttonCancelLabel", publicName: "buttonCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonSendLabel: { classPropertyName: "buttonSendLabel", publicName: "buttonSendLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toolbarAlwaysVisible: { classPropertyName: "toolbarAlwaysVisible", publicName: "toolbarAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, fullViewMode: { classPropertyName: "fullViewMode", publicName: "fullViewMode", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAlwaysVisible: { classPropertyName: "cancelButtonAlwaysVisible", publicName: "cancelButtonAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, allowEmptyContent: { classPropertyName: "allowEmptyContent", publicName: "allowEmptyContent", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, imageUploadFn: { classPropertyName: "imageUploadFn", publicName: "imageUploadFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled" }, host: { listeners: { "click": "activateFullView($event)" }, properties: { "class.full-view": "isFullViewVisible || fullViewMode()" }, classAttribute: "ngs-comment-editor" }, providers: [
            {
                provide: COMMENT_EDITOR,
                useExisting: forwardRef(() => CommentEditor)
            }
        ], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_bubbleMenu", first: true, predicate: ["bubbleMenu"], descendants: true, isSignal: true }, { propertyName: "_imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true, isSignal: true }], exportAs: ["ngsCommentEditor"], ngImport: i0, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:var(--ngs-shadow-sm);background:var(--ngs-dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--ngs-color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--ngs-color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--ngs-color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--ngs-color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--ngs-color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--ngs-color-neutral-650);color:var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditor, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-comment-editor', exportAs: 'ngsCommentEditor', imports: [
                        Button
                    ], providers: [
                        {
                            provide: COMMENT_EDITOR,
                            useExisting: forwardRef(() => CommentEditor)
                        }
                    ], host: {
                        'class': 'ngs-comment-editor',
                        '[class.full-view]': 'isFullViewVisible || fullViewMode()',
                        '(click)': 'activateFullView($event)'
                    }, template: "@if ((isToolbarVisible || toolbarAlwaysVisible()) && (isFullViewVisible || fullViewMode())) {\n  <div class=\"toolbar\">\n    <ng-content select=\"ngs-comment-editor-toolbar\"/>\n  </div>\n}\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\n<div class=\"editor-content\">\n  <ng-content/>\n</div>\n<div class=\"footer\">\n  <div class=\"flex items-center gap-0.5 grow pe-3\">\n    <ng-content select=\"ngs-comment-editor-footer-bar\"/>\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if ((isFullViewVisible && !fullViewMode()) || cancelButtonAlwaysVisible()) {\n      <button ngsButton (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\n    }\n    <button ngsButton=\"filled\"\n            [disabled]=\"(!allowEmptyContent() && !_value) || null\"\n            [loading]=\"loading()\"\n            (click)=\"send($event)\">{{ buttonSendLabel() }}\n    </button>\n  </div>\n</div>\n<div #imageBubbleMenu class=\"ngs-comment-editor-bubble-menu\">\n</div>\n<div #bubbleMenu>\n  <ng-content select=\"ngs-comment-editor-bubble-menu\"/>\n</div>\n<!--<div #floatingMenu class=\"floating-menu\">-->\n<!--  @if (editor) {-->\n<!--    <div class=\"flex items-center gap-1.5\">-->\n<!--      <button class=\"button\"-->\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\n<!--        <ngs-icon name=\"fluent:code-24-regular\"/>-->\n<!--      </button>-->\n<!--      <button class=\"button\">-->\n<!--        <ngs-icon name=\"fluent:image-24-regular\"/>-->\n<!--      </button>-->\n<!--    </div>-->\n<!--  }-->\n<!--</div>-->\n", styles: [":host{--ngs-comment-editor-bg: transparent;--ngs-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--ngs-comment-editor-bg)}:host .floating-menu{box-shadow:var(--ngs-shadow-sm);background:var(--ngs-dropdown-bg);padding-top:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2);border:1px solid var(--ngs-color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--ngs-color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing, .25rem) * 14)}:host .content ::ng-deep .single-emoji{font-size:1.875rem}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--ngs-color-neutral-100);padding:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing, .25rem) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--ngs-color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host .editor-content{padding:0 calc(var(--spacing, .25rem) * 4)}:host .editor-content:empty{display:none}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing, .25rem) * 12);max-height:var(--ngs-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--ngs-color-border);height:calc(var(--spacing, .25rem) * 14);padding:0 calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--ngs-color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--ngs-color-neutral-650);color:var(--ngs-color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _bubbleMenu: [{ type: i0.ViewChild, args: ['bubbleMenu', { isSignal: true }] }], _imageBubbleMenu: [{ type: i0.ViewChild, args: ['imageBubbleMenu', { isSignal: true }] }], contentMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentMaxHeight", required: false }] }], buttonCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonCancelLabel", required: false }] }], buttonSendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSendLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toolbarAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarAlwaysVisible", required: false }] }], fullViewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullViewMode", required: false }] }], cancelButtonAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAlwaysVisible", required: false }] }], allowEmptyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmptyContent", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], imageUploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploadFn", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });

class CommentEditorDivider {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorDivider, isStandalone: true, selector: "ngs-comment-editor-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--ngs-color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorDivider, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-comment-editor-divider', imports: [], template: "<div class=\"divider\"></div>\n", styles: [":host{display:block;padding:0 calc(var(--spacing, .25rem) * 2)}:host .divider{height:calc(var(--spacing, .25rem) * 6);background:var(--ngs-color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorToolbar {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorToolbar, isStandalone: true, selector: "ngs-comment-editor-toolbar", host: { classAttribute: "ngs-comment-editor-toolbar" }, exportAs: ["ngsCommentEditorToolbar"], ngImport: i0, template: "<ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorToolbar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-comment-editor-toolbar', exportAs: 'ngsCommentEditorToolbar', host: {
                        'class': 'ngs-comment-editor-toolbar',
                    }, template: "<ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorBubbleMenu {
    commentEditor = inject(COMMENT_EDITOR);
    getLinkUrl() {
        return (this.commentEditor.api.editor()?.getAttributes('link')).href || null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorBubbleMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommentEditorBubbleMenu, isStandalone: true, selector: "ngs-comment-editor-bubble-menu", host: { classAttribute: "ngs-comment-editor-bubble-menu" }, providers: [
            {
                provide: COMMENT_EDITOR_BUBBLE_MENU,
                useExisting: forwardRef(() => CommentEditorBubbleMenu)
            }
        ], exportAs: ["ngsCommentEditorBubbleMenu"], ngImport: i0, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:var(--ngs-shadow-sm);background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--ngs-radius-xl);top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--ngs-icon-size: var(--ngs-font-size-xl)}:host .button:hover,:host ::ng-deep .button:hover{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--ngs-color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--ngs-color-tertiary-100)}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .link{color:var(--ngs-color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--ngs-color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorBubbleMenu, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-comment-editor-bubble-menu', exportAs: 'ngsCommentEditorBubbleMenu', providers: [
                        {
                            provide: COMMENT_EDITOR_BUBBLE_MENU,
                            useExisting: forwardRef(() => CommentEditorBubbleMenu)
                        }
                    ], host: {
                        'class': 'ngs-comment-editor-bubble-menu',
                    }, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-muted border-b-neutral-700\">\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\n    </div>\n    <div class=\"flex items-center flex-none\">\n      <ng-content select=\"[ngsCommentEditorCommandEditLink],[ngsCommentEditorCommandUnsetLink]\" />\n    </div>\n  </div>\n}\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\n  <ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n</div>\n", styles: [":host{display:block;box-shadow:var(--ngs-shadow-sm);background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-200);min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--ngs-radius-xl);top:1px;padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--ngs-icon-size: var(--ngs-font-size-xl)}:host .button:hover,:host ::ng-deep .button:hover{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--ngs-color-tertiary-300);background:var(--ngs-color-neutral-700)}:host .button ngs-icon,:host ::ng-deep .button ngs-icon{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);font-size:var(--ngs-font-size-xl);line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--ngs-color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--ngs-color-tertiary-100)}:host-context(html.dark){background:var(--ngs-color-tertiary-200);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .link{color:var(--ngs-color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--ngs-color-tertiary-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorFooterBar {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorFooterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorFooterBar, isStandalone: true, selector: "ngs-comment-editor-footer-bar", host: { classAttribute: "ngs-comment-editor-footer-bar" }, exportAs: ["ngsCommentEditorFooterBar"], ngImport: i0, template: "<ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);justify-content:flex-end;width:100%}:host-context(.ngs-comment-editor.full-view){justify-content:flex-start}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorFooterBar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-comment-editor-footer-bar', exportAs: 'ngsCommentEditorFooterBar', host: {
                        'class': 'ngs-comment-editor-footer-bar',
                    }, template: "<ng-content select=\"[ngsCommentEditorCommand],ngs-comment-editor-divider\" />\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);justify-content:flex-end;width:100%}:host-context(.ngs-comment-editor.full-view){justify-content:flex-start}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorCommandDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandDirective, isStandalone: true, selector: "[ngsCommentEditorCommand]", host: { properties: { "class.button": "true" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommand]',
                    standalone: true,
                    host: {
                        '[class.button]': 'true'
                    }
                }]
        }] });

class CommentEditorCommandBoldDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleBold');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBoldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandBoldDirective, isStandalone: true, selector: "[ngsCommentEditorCommandBold]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBold')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('bold')" } }, exportAs: ["ngsCommentEditorCommandBold"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBoldDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandBold]',
                    exportAs: 'ngsCommentEditorCommandBold',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBold')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('bold')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandItalicDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleItalic');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandItalicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandItalicDirective, isStandalone: true, selector: "[ngsCommentEditorCommandItalic]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleItalic')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('italic')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandItalicDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandItalic]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleItalic')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('italic')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandStrikeDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleStrike');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandStrikeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandStrikeDirective, isStandalone: true, selector: "[ngsCommentEditorCommandStrike]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleStrike')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('strike')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandStrikeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandStrike]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleStrike')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('strike')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandBulletListDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleBulletList');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBulletListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandBulletListDirective, isStandalone: true, selector: "[ngsCommentEditorCommandBulletList]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBulletList')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('bulletList')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBulletListDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandBulletList]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBulletList')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('bulletList')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandOrderedListDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleOrderedList');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandOrderedListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandOrderedListDirective, isStandalone: true, selector: "[ngsCommentEditorCommandOrderedList]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleOrderedList')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('orderedList')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandOrderedListDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandOrderedList]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleOrderedList')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('orderedList')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandBlockquoteDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleBlockquote');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBlockquoteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandBlockquoteDirective, isStandalone: true, selector: "[ngsCommentEditorCommandBlockquote]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('blockquote')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandBlockquoteDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandBlockquote]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('blockquote')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandCodeBlockDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleCodeBlock');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandCodeBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandCodeBlockDirective, isStandalone: true, selector: "[ngsCommentEditorCommandCodeBlock]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleCodeBlock')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('codeBlock')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandCodeBlockDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandCodeBlock]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleCodeBlock')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('codeBlock')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandImageDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onImageSelected(event) {
        const file = event.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            const src = reader.result;
            this.commentEditor.api.editor().chain().focus().addImageUploadingPlaceholder({ src, file }).run();
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandImageDirective, isStandalone: true, selector: "[ngsCommentEditorCommandImage]", host: { listeners: { "fileSelected": "onImageSelected($event)" }, properties: { "attr.accept": "\"image/*\"" } }, hostDirectives: [{ directive: i1.UploadTriggerDirective, outputs: ["fileSelected", "fileSelected"] }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandImageDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandImage]',
                    standalone: true,
                    hostDirectives: [
                        {
                            directive: UploadTriggerDirective,
                            outputs: ['fileSelected']
                        }
                    ],
                    host: {
                        '[attr.accept]': '"image/*"',
                        '(fileSelected)': `onImageSelected($event)`
                    }
                }]
        }] });

class YoutubeDialog {
    _dialogRef = inject(DialogRef);
    _data = inject(DIALOG_DATA);
    linkUrl = this._data.linkUrl || '';
    isUpdate = !!this._data.linkUrl;
    onSubmit() {
        this._dialogRef.close(this.linkUrl);
    }
    _onNoClick() {
        this._dialogRef.close();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YoutubeDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: YoutubeDialog, isStandalone: true, selector: "ngs-youtube", ngImport: i0, template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\n  <h3 ngs-dialog-title>\n    @if (isUpdate) {\n      Update Youtube\n    } @else {\n      Add Youtube\n    }\n  </h3>\n  <ngs-dialog-content>\n    <div class=\"pt-4\">\n      <ngs-form-field class=\"w-full\">\n        <ngs-label>Paste Url</ngs-label>\n        <input name=\"linkUrl\" ngsInput [(ngModel)]=\"linkUrl\">\n      </ngs-form-field>\n    </div>\n  </ngs-dialog-content>\n  <div ngs-dialog-actions align=\"end\">\n    <button ngsButton (click)=\"_onNoClick()\">Cancel</button>\n    <button type=\"submit\" ngsButton=\"filled\" color=\"primary\"\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\n      @if (isUpdate) {\n        Save\n      } @else {\n        Add url\n      }\n    </button>\n  </div>\n</form>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "ngmodule", type: ReactiveFormsModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YoutubeDialog, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-youtube', imports: [
                        FormsModule,
                        Button,
                        DialogActions,
                        DialogContent,
                        DialogTitle,
                        FormField,
                        Input,
                        Label,
                        ReactiveFormsModule
                    ], template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\n  <h3 ngs-dialog-title>\n    @if (isUpdate) {\n      Update Youtube\n    } @else {\n      Add Youtube\n    }\n  </h3>\n  <ngs-dialog-content>\n    <div class=\"pt-4\">\n      <ngs-form-field class=\"w-full\">\n        <ngs-label>Paste Url</ngs-label>\n        <input name=\"linkUrl\" ngsInput [(ngModel)]=\"linkUrl\">\n      </ngs-form-field>\n    </div>\n  </ngs-dialog-content>\n  <div ngs-dialog-actions align=\"end\">\n    <button ngsButton (click)=\"_onNoClick()\">Cancel</button>\n    <button type=\"submit\" ngsButton=\"filled\" color=\"primary\"\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\n      @if (isUpdate) {\n        Save\n      } @else {\n        Add url\n      }\n    </button>\n  </div>\n</form>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorCommandYoutubeDirective {
    commentEditor = inject(COMMENT_EDITOR);
    _dialog = inject(Dialog);
    _destroyRef = inject(DestroyRef);
    onClick() {
        const dialogRef = this._dialog.open(YoutubeDialog, {
            data: {
                linkUrl: this.commentEditor.api.editor().getAttributes('iframe').src
            }
        });
        dialogRef
            .afterClosed()
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((linkUrl) => {
            if (typeof linkUrl === 'undefined') {
                return;
            }
            this.commentEditor.api.editor().commands.setYoutubeVideo({
                src: linkUrl
            });
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandYoutubeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandYoutubeDirective, isStandalone: true, selector: "[ngsCommentEditorCommandYoutube]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('blockquote')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandYoutubeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandYoutube]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('blockquote')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class LinkDialog {
    _dialogRef = inject(DialogRef);
    _data = inject(DIALOG_DATA);
    linkUrl = this._data.linkUrl || '';
    isUpdate = !!this._data.linkUrl;
    onSubmit() {
        this._dialogRef.close(this.linkUrl);
    }
    _onNoClick() {
        this._dialogRef.close();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LinkDialog, isStandalone: true, selector: "ngs-link", ngImport: i0, template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\n  <h3 ngs-dialog-title>\n    @if (isUpdate) {\n      Update Link\n    } @else {\n      Add Link\n    }</h3>\n  <ngs-dialog-content>\n    <div class=\"pt-4\">\n      <ngs-form-field class=\"w-full\">\n        <ngs-label>Paste Link</ngs-label>\n        <input name=\"linkUrl\" ngsInput [(ngModel)]=\"linkUrl\">\n      </ngs-form-field>\n    </div>\n  </ngs-dialog-content>\n  <div ngs-dialog-actions align=\"end\">\n    <button ngsButton (click)=\"_onNoClick()\">Cancel</button>\n    <button type=\"submit\" ngsButton=\"filled\" color=\"primary\"\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\n      @if (isUpdate) {\n        Save\n      } @else {\n        Add link\n      }\n    </button>\n  </div>\n</form>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinkDialog, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-link', imports: [
                        Button,
                        DialogActions,
                        DialogContent,
                        DialogTitle,
                        FormField,
                        Input,
                        Label,
                        ReactiveFormsModule,
                        FormsModule
                    ], template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\n  <h3 ngs-dialog-title>\n    @if (isUpdate) {\n      Update Link\n    } @else {\n      Add Link\n    }</h3>\n  <ngs-dialog-content>\n    <div class=\"pt-4\">\n      <ngs-form-field class=\"w-full\">\n        <ngs-label>Paste Link</ngs-label>\n        <input name=\"linkUrl\" ngsInput [(ngModel)]=\"linkUrl\">\n      </ngs-form-field>\n    </div>\n  </ngs-dialog-content>\n  <div ngs-dialog-actions align=\"end\">\n    <button ngsButton (click)=\"_onNoClick()\">Cancel</button>\n    <button type=\"submit\" ngsButton=\"filled\" color=\"primary\"\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\n      @if (isUpdate) {\n        Save\n      } @else {\n        Add link\n      }\n    </button>\n  </div>\n</form>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommentEditorCommandLinkDirective {
    _destroyRef = inject(DestroyRef);
    _dialog = inject(Dialog);
    commentEditor = inject(COMMENT_EDITOR);
    setLinkActive = false;
    onClick() {
        this.setLinkActive = true;
        const dialogRef = this._dialog.open(LinkDialog, {
            data: {
                linkUrl: this.commentEditor.api.editor().getAttributes('link').href
            }
        });
        dialogRef
            .afterClosed()
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((linkUrl) => {
            this.setLinkActive = false;
            if (typeof linkUrl === 'undefined') {
                return;
            }
            this._setLink(linkUrl);
        });
    }
    _setLink(url) {
        // cancelled
        if (url === null) {
            return;
        }
        // empty
        if (url === '') {
            this.commentEditor.api.editor()
                .chain()
                .focus()
                .extendMarkRange('link')
                .unsetLink()
                .run();
            return;
        }
        // update link
        this.commentEditor.api.editor()
            .chain()
            .focus()
            .extendMarkRange('link')
            .setLink({ href: url })
            .run();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandLinkDirective, isStandalone: true, selector: "[ngsCommentEditorCommandLink]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleLink')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('link')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandLinkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandLink]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleLink')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('link')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandCodeDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.runCommand('toggleCode');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandCodeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandCodeDirective, isStandalone: true, selector: "[ngsCommentEditorCommandCode]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleCode')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('code')" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandCodeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandCode]',
                    standalone: true,
                    host: {
                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleCode')) ? '' : null`,
                        '[class.active]': `commentEditor && commentEditor.api.isActive('code')`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandEditLinkDirective {
    _destroyRef = inject(DestroyRef);
    _dialog = inject(Dialog);
    commentEditor = inject(COMMENT_EDITOR);
    setLinkActive = false;
    onClick() {
        this.setLinkActive = true;
        const dialogRef = this._dialog.open(LinkDialog, {
            data: {
                linkUrl: this.commentEditor.api.editor().getAttributes('link').href
            }
        });
        dialogRef
            .afterClosed()
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((linkUrl) => {
            this.setLinkActive = false;
            if (typeof linkUrl === 'undefined') {
                return;
            }
            this._setLink(linkUrl);
        });
    }
    _setLink(url) {
        // cancelled
        if (url === null) {
            return;
        }
        // empty
        if (url === '') {
            this.commentEditor.api.editor()
                .chain()
                .focus()
                .extendMarkRange('link')
                .unsetLink()
                .run();
            return;
        }
        // update link
        this.commentEditor.api.editor()
            .chain()
            .focus()
            .extendMarkRange('link')
            .setLink({ href: url })
            .run();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandEditLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandEditLinkDirective, isStandalone: true, selector: "[ngsCommentEditorCommandEditLink]", host: { listeners: { "click": "onClick()" }, properties: { "class.button": "true" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandEditLinkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandEditLink]',
                    standalone: true,
                    host: {
                        '[class.button]': 'true',
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandUnsetLinkDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.editor().commands.unsetLink();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandUnsetLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandUnsetLinkDirective, isStandalone: true, selector: "[ngsCommentEditorCommandUnsetLink]", host: { listeners: { "click": "onClick()" }, properties: { "class.button": "true" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandUnsetLinkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandUnsetLink]',
                    standalone: true,
                    host: {
                        '[class.button]': 'true',
                        '(click)': `onClick()`
                    }
                }]
        }] });

class CommentEditorCommandToggleToolbarDirective {
    commentEditor = inject(COMMENT_EDITOR);
    onClick() {
        this.commentEditor.api.toggleToolbar();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandToggleToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CommentEditorCommandToggleToolbarDirective, isStandalone: true, selector: "[ngsCommentEditorCommandToggleToolbar]", host: { listeners: { "click": "onClick()" }, properties: { "class.active": "commentEditor && commentEditor.api.isToolbarActive()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommentEditorCommandToggleToolbarDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCommentEditorCommandToggleToolbar]',
                    standalone: true,
                    host: {
                        '[class.active]': `commentEditor && commentEditor.api.isToolbarActive()`,
                        '(click)': `onClick()`
                    }
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { COMMENT_EDITOR, COMMENT_EDITOR_BUBBLE_MENU, CommentEditor, CommentEditorBubbleMenu, CommentEditorCommandBlockquoteDirective, CommentEditorCommandBoldDirective, CommentEditorCommandBulletListDirective, CommentEditorCommandCodeBlockDirective, CommentEditorCommandCodeDirective, CommentEditorCommandDirective, CommentEditorCommandEditLinkDirective, CommentEditorCommandImageDirective, CommentEditorCommandItalicDirective, CommentEditorCommandLinkDirective, CommentEditorCommandOrderedListDirective, CommentEditorCommandStrikeDirective, CommentEditorCommandToggleToolbarDirective, CommentEditorCommandUnsetLinkDirective, CommentEditorCommandYoutubeDirective, CommentEditorDivider, CommentEditorFooterBar, CommentEditorToolbar };
//# sourceMappingURL=ngstarter-ui-components-comment-editor.mjs.map
