@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-1Zi2nAX5.mjs

@@ -0,0 +1,2548 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, model, input, output, Renderer2, signal, computed, Input as Input$1, InjectionToken, EventEmitter, HostListener, Output, Directive, PLATFORM_ID, ElementRef, EnvironmentInjector, ChangeDetectorRef, numberAttribute, runInInjectionContext, effect, forwardRef, ChangeDetectionStrategy } from '@angular/core';
+import { Button } from '@ngstarter-ui/components/button';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { Menu, MenuItem, MenuTrigger, MenuHeading } from '@ngstarter-ui/components/menu';
+import { DialogRef, DialogContent, DialogTitle, DialogActions, DialogClose, DIALOG_DATA, Dialog } from '@ngstarter-ui/components/dialog';
+import { Input } from '@ngstarter-ui/components/input';
+import { FormField, Label, Hint } from '@ngstarter-ui/components/form-field';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { SlideToggle } from '@ngstarter-ui/components/slide-toggle';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgComponentOutlet, AsyncPipe } from '@angular/common';
+import { Tooltip } from '@ngstarter-ui/components/tooltip';
+import { v7 } from 'uuid';
+import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
+import { moveItemInArray, CdkDrag, CdkDropList, CdkDragHandle, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { ConfirmManager } from '@ngstarter-ui/components/confirm';
+import { CdkMonitorFocus } from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject, fromEvent } from 'rxjs';
+import { throttleTime, shareReplay, auditTime, map, startWith, distinctUntilChanged } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/overlay';
+import SelectionArea from '@viselect/vanilla';
+import { PopoverTriggerForDirective, Popover } from '@ngstarter-ui/components/popover';
+import { SelectionModel } from '@angular/cdk/collections';
+import { ListItemTitle, ListItemIcon, ListItem, List } from '@ngstarter-ui/components/list';
+
+class TextHighlightService {
+    savedRange = null;
+    constructor() { }
+    saveCurrentSelection() {
+        const selection = window.getSelection();
+        const range = this.getCurrentRangeInternal(selection);
+        this.savedRange = range ? range.cloneRange() : null;
+        // // console.log('TextHighlightService: Выделение сохранено/очищено.');
+    }
+    restoreSelection() {
+        if (!this.savedRange) {
+            // // console.warn('TextHighlightService: Нет сохраненного выделения для восстановления.');
+            return;
+        }
+        const selection = window.getSelection();
+        if (!selection) {
+            // // console.error('TextHighlightService: Не удалось получить window.getSelection() для восстановления.');
+            this.savedRange = null;
+            return;
+        }
+        if (this.savedRange.startContainer.isConnected && this.savedRange.endContainer.isConnected) {
+            try {
+                selection.removeAllRanges();
+                selection.addRange(this.savedRange);
+                // // console.log('TextHighlightService: Выделение восстановлено.');
+            }
+            catch (e) {
+                // // console.error('TextHighlightService: Ошибка при восстановлении выделения:', e);
+                this.savedRange = null;
+            }
+        }
+        else {
+            // // console.warn('TextHighlightService: Сохраненный диапазон стал невалидным, восстановление невозможно.');
+            this.savedRange = null;
+        }
+    }
+    /**
+     * Wraps current selection with specified tag, applying styles, classes, and attributes.
+     * If the selection EXACTLY MATCHES THE BOUNDARIES of an existing tag of the same type,
+     * then styles, classes, and attributes are ADDED/OVERWRITTEN on that existing tag.
+     * Otherwise, a new wrapper is always created.
+     * DOES NOT attempt to "cut" elements.
+     */
+    wrapSelection(tagName, styles, classNames, attrs) {
+        const selection = window.getSelection();
+        const range = this.getCurrentRangeInternal(selection);
+        if (!range || !selection) {
+            // // console.warn('TextHighlightService (wrapSelection): Нет валидного выделения.');
+            return;
+        }
+        const normalizedTagName = tagName.toLowerCase();
+        const exactExistingContainer = this.findExactWrappingElement(range, normalizedTagName);
+        if (exactExistingContainer) {
+            this.applyStylesAttributesAndClasses(exactExistingContainer, styles, classNames, attrs);
+            selection.removeAllRanges();
+            const newExactRange = document.createRange();
+            newExactRange.selectNodeContents(exactExistingContainer);
+            selection.addRange(newExactRange);
+            // // console.log(`TextHighlightService (wrapSelection): Модифицирован существующий элемент <${normalizedTagName}>.`);
+        }
+        else {
+            this.wrapRange(selection, range, normalizedTagName, styles, classNames, attrs);
+            // // console.log(`TextHighlightService (wrapSelection): Создана новая обертка <${normalizedTagName}>.`);
+        }
+    }
+    /**
+     * "Smart" wrapping:
+     * - If the selection exactly covers an existing element of the same type -> modifies it.
+     * - If the selection is partially inside an inline element of the same type -> splits it and wraps the selected part.
+     * - In other cases -> creates a new wrapper.
+     */
+    wrapOrSplitInlineSelection(tagName, styles, classNames, attrs) {
+        const selection = window.getSelection();
+        const range = this.getCurrentRangeInternal(selection);
+        if (!range || !selection) {
+            // // console.warn('TextHighlightService (wrapOrSplitInlineSelection): Нет валидного выделения.');
+            return;
+        }
+        const normalizedTagName = tagName.toLowerCase();
+        const exactContainer = this.findExactWrappingElement(range, normalizedTagName);
+        if (exactContainer) {
+            this.applyStylesAttributesAndClasses(exactContainer, styles, classNames, attrs);
+            selection.removeAllRanges();
+            const newExactRange = document.createRange();
+            newExactRange.selectNodeContents(exactContainer);
+            selection.addRange(newExactRange);
+            // // console.log(`TextHighlightService (wrapOrSplitInlineSelection): Модифицирован существующий <${normalizedTagName}>.`);
+            return;
+        }
+        const containingAncestor = this.findContainingAncestor(range, normalizedTagName);
+        if (containingAncestor && this.isInlineElement(containingAncestor)) {
+            // // console.log(`TextHighlightService (wrapOrSplitInlineSelection): Попытка разделить inline <${normalizedTagName}>.`);
+            this.splitInlineElementAndApplyToSelection(selection, range, containingAncestor, normalizedTagName, styles, classNames, attrs);
+            return;
+        }
+        // // console.log(`TextHighlightService (wrapOrSplitInlineSelection): Создаем новую обертку <${normalizedTagName}>.`);
+        this.wrapRange(selection, range, normalizedTagName, styles, classNames, attrs);
+    }
+    unwrapSelection(tagName) {
+        const selection = window.getSelection();
+        const range = this.getCurrentRangeInternal(selection);
+        if (!range || !selection)
+            return;
+        const normalizedTagName = tagName.toLowerCase();
+        const elementToUnwrap = this.findExactWrappingElement(range, normalizedTagName)
+            ?? this.findContainingAncestor(range, normalizedTagName);
+        if (elementToUnwrap) {
+            this.unwrapElementAndReselect(selection, elementToUnwrap);
+            // // console.log(`TextHighlightService (unwrapSelection): <${normalizedTagName}> развернут.`);
+        }
+        else {
+            // // console.warn(`TextHighlightService (unwrapSelection): Не найден <${normalizedTagName}> для разворачивания.`);
+        }
+    }
+    toggleWrapSelection(tagName, styles, classNames, attrs) {
+        const range = this.getCurrentRange();
+        if (!range)
+            return;
+        const normalizedTagName = tagName.toLowerCase();
+        const elementToUnwrap = this.findExactWrappingElement(range, normalizedTagName)
+            ?? this.findContainingAncestor(range, normalizedTagName);
+        if (elementToUnwrap) {
+            this.unwrapSelection(normalizedTagName);
+        }
+        else {
+            this.wrapOrSplitInlineSelection(normalizedTagName, styles, classNames, attrs);
+        }
+    }
+    isSelectionWrappedInTag(tagName) {
+        const range = this.getCurrentRange();
+        if (!range)
+            return false;
+        const normalizedTagName = tagName.toLowerCase();
+        const containingElement = this.findContainingAncestor(range, normalizedTagName);
+        return !!containingElement;
+    }
+    getCurrentRange() {
+        const selection = window.getSelection();
+        return this.getCurrentRangeInternal(selection);
+    }
+    findClosestBlockAncestor(requiredClassName) {
+        const range = this.getCurrentRange();
+        if (!range)
+            return null;
+        let node = range.commonAncestorContainer;
+        const trimmedClassName = requiredClassName?.trim();
+        while (node && node !== document.body && node !== document) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                if (!this.isInlineElement(element)) {
+                    if (!trimmedClassName || element.classList.contains(trimmedClassName)) {
+                        return element;
+                    }
+                }
+            }
+            node = node.parentNode;
+        }
+        if (document.body && document.body.contains(range.commonAncestorContainer)) {
+            if (!this.isInlineElement(document.body)) {
+                if (!trimmedClassName || document.body.classList.contains(trimmedClassName)) {
+                    return document.body;
+                }
+            }
+        }
+        return null;
+    }
+    setTextAlignment(alignment) {
+        const blockAncestor = this.findClosestBlockAncestor();
+        if (!blockAncestor)
+            return;
+        if (alignment && alignment.trim() !== '') {
+            blockAncestor.style.textAlign = alignment;
+            blockAncestor.setAttribute('data-props-text-alignment', alignment);
+        }
+        else {
+            blockAncestor.style.textAlign = '';
+            blockAncestor.removeAttribute('data-props-text-alignment');
+        }
+    }
+    unwrapElementByClassAndSelectContents(className) {
+        if (!className || !className.trim())
+            return;
+        const trimmedClassName = className.trim();
+        const selector = `.${trimmedClassName}`;
+        const elementToUnwrap = document.querySelector(selector);
+        if (!elementToUnwrap)
+            return;
+        const parent = elementToUnwrap.parentNode;
+        if (!parent)
+            return;
+        const firstChildToSelect = elementToUnwrap.firstChild;
+        const lastChildToSelect = elementToUnwrap.lastChild;
+        while (elementToUnwrap.firstChild) {
+            parent.insertBefore(elementToUnwrap.firstChild, elementToUnwrap);
+        }
+        parent.removeChild(elementToUnwrap);
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        selection.removeAllRanges();
+        if (firstChildToSelect && lastChildToSelect && firstChildToSelect.isConnected && lastChildToSelect.isConnected) {
+            try {
+                const newRange = document.createRange();
+                newRange.setStartBefore(firstChildToSelect);
+                newRange.setEndAfter(lastChildToSelect);
+                selection.addRange(newRange);
+            }
+            catch (e) { /* ... */ }
+        }
+    }
+    getContainingAncestorByTagName(tagName) {
+        const range = this.getCurrentRange();
+        if (!range)
+            return null;
+        const normalizedTagName = tagName.toLowerCase();
+        return this.findContainingAncestor(range, normalizedTagName);
+    }
+    clearSelectionFormatting() {
+        const selection = window.getSelection();
+        const range = this.getCurrentRangeInternal(selection);
+        if (!range || !selection)
+            return;
+        try {
+            const selectedContents = range.extractContents();
+            const plainText = selectedContents.textContent || '';
+            const textNode = document.createTextNode(plainText);
+            range.insertNode(textNode);
+            selection.removeAllRanges();
+            const newRange = document.createRange();
+            newRange.selectNodeContents(textNode);
+            selection.addRange(newRange);
+        }
+        catch (e) {
+            selection.removeAllRanges();
+        }
+    }
+    getCurrentRangeInternal(selection) {
+        if (!selection || selection.rangeCount === 0)
+            return null;
+        const range = selection.getRangeAt(0);
+        if (range.collapsed || !range.toString().trim())
+            return null;
+        return range;
+    }
+    findExactWrappingElement(range, tagName) {
+        const commonAncestor = range.commonAncestorContainer;
+        let candidateElement = (commonAncestor.nodeType === Node.ELEMENT_NODE && commonAncestor.tagName.toLowerCase() === tagName)
+            ? commonAncestor
+            : this.findClosestAncestorByTagName(commonAncestor, tagName);
+        if (!candidateElement)
+            return null;
+        const elementRange = document.createRange();
+        try {
+            elementRange.selectNodeContents(candidateElement);
+            if (range.compareBoundaryPoints(Range.START_TO_START, elementRange) === 0 &&
+                range.compareBoundaryPoints(Range.END_TO_END, elementRange) === 0) {
+                return candidateElement;
+            }
+        }
+        catch (e) { /*// console.error("Error in findExactWrappingElement:", e);*/ }
+        return null;
+    }
+    findContainingAncestor(range, tagName) {
+        let node = range.commonAncestorContainer;
+        while (node && node !== document.body && node !== document) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                if (element.tagName.toLowerCase() === tagName) {
+                    const elementRange = document.createRange();
+                    try {
+                        elementRange.selectNodeContents(element);
+                        if (range.compareBoundaryPoints(Range.START_TO_START, elementRange) >= 0 &&
+                            range.compareBoundaryPoints(Range.END_TO_END, elementRange) <= 0) {
+                            return element;
+                        }
+                    }
+                    catch (e) { /*// console.error("Error in findContainingAncestor:", e); */ }
+                }
+            }
+            node = node.parentNode;
+        }
+        return null;
+    }
+    findClosestAncestorByTagName(node, tagName) {
+        let currentNode = node;
+        while (currentNode && currentNode !== document.body && currentNode !== document) {
+            if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.tagName.toLowerCase() === tagName) {
+                return currentNode;
+            }
+            currentNode = currentNode.parentNode;
+        }
+        return null;
+    }
+    findClosestAncestorByClassName(node, className) {
+        let currentNode = node;
+        const trimmedClassName = className.trim();
+        if (!trimmedClassName)
+            return null;
+        while (currentNode && currentNode !== document.body && currentNode !== document) {
+            if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.classList.contains(trimmedClassName)) {
+                return currentNode;
+            }
+            currentNode = currentNode.parentNode;
+        }
+        return null;
+    }
+    applyStylesAttributesAndClasses(element, styles, classNames, attrs) {
+        if (styles) {
+            for (const styleName in styles) {
+                if (Object.prototype.hasOwnProperty.call(styles, styleName)) {
+                    // @ts-ignore
+                    if (styles[styleName] !== undefined && isNaN(Number(styleName))) {
+                        try {
+                            element.style[styleName] = styles[styleName];
+                        }
+                        catch (e) { /* ... */ }
+                    }
+                }
+            }
+        }
+        if (classNames && classNames.length > 0) {
+            const validClasses = classNames.filter(cn => cn && cn.trim());
+            if (validClasses.length > 0) {
+                element.classList.add(...validClasses);
+            }
+        }
+        if (attrs) {
+            for (const attrName in attrs) {
+                if (Object.prototype.hasOwnProperty.call(attrs, attrName)) {
+                    const attrValue = attrs[attrName];
+                    if (attrValue === null) {
+                        element.removeAttribute(attrName);
+                    }
+                    else if (attrValue !== undefined) {
+                        element.setAttribute(attrName, attrValue);
+                    }
+                }
+            }
+        }
+    }
+    wrapRange(selection, range, tagName, styles, classNames, attrs) {
+        try {
+            const wrapperElement = document.createElement(tagName);
+            this.applyStylesAttributesAndClasses(wrapperElement, styles, classNames, attrs);
+            const selectedContents = range.extractContents();
+            wrapperElement.appendChild(selectedContents);
+            range.insertNode(wrapperElement);
+            selection.removeAllRanges();
+            const newRange = document.createRange();
+            newRange.selectNodeContents(wrapperElement);
+            selection.addRange(newRange);
+        }
+        catch (e) {
+            selection.removeAllRanges();
+        }
+    }
+    createMarker(id) {
+        const marker = document.createElement('span');
+        marker.id = id;
+        marker.style.display = 'none';
+        marker.setAttribute('data-selection-marker', 'true');
+        return marker;
+    }
+    unwrapElementAndReselect(selection, elementToUnwrap) {
+        const parent = elementToUnwrap.parentNode;
+        if (!parent)
+            return;
+        const startMarkerId = `__sel_start_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
+        const endMarkerId = `__sel_end_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
+        let markersInserted = false;
+        const originalRange = this.getCurrentRangeInternal(selection);
+        try {
+            if (originalRange) {
+                const startMarker = this.createMarker(startMarkerId);
+                const endMarker = this.createMarker(endMarkerId);
+                const rangeEnd = originalRange.cloneRange();
+                rangeEnd.collapse(false);
+                rangeEnd.insertNode(endMarker);
+                const rangeStart = originalRange.cloneRange();
+                rangeStart.collapse(true);
+                rangeStart.insertNode(startMarker);
+                markersInserted = true;
+                selection.removeAllRanges();
+            }
+        }
+        catch (e) {
+            markersInserted = false;
+            if (selection)
+                selection.removeAllRanges();
+        }
+        if (markersInserted || !originalRange) {
+            while (elementToUnwrap.firstChild) {
+                parent.insertBefore(elementToUnwrap.firstChild, elementToUnwrap);
+            }
+            parent.removeChild(elementToUnwrap);
+        }
+        else {
+            return;
+        }
+        if (markersInserted) {
+            const startMarker = document.getElementById(startMarkerId);
+            const endMarker = document.getElementById(endMarkerId);
+            if (startMarker?.parentNode && endMarker?.parentNode) {
+                try {
+                    const newRange = document.createRange();
+                    newRange.setStartAfter(startMarker);
+                    newRange.setEndBefore(endMarker);
+                    const currentSelection = window.getSelection();
+                    if (currentSelection) {
+                        currentSelection.removeAllRanges();
+                        currentSelection.addRange(newRange);
+                    }
+                }
+                catch (e) {
+                    window.getSelection()?.removeAllRanges();
+                }
+                finally {
+                    startMarker.parentNode.removeChild(startMarker);
+                    endMarker.parentNode.removeChild(endMarker);
+                }
+            }
+            else {
+                document.getElementById(startMarkerId)?.remove();
+                document.getElementById(endMarkerId)?.remove();
+                window.getSelection()?.removeAllRanges();
+            }
+        }
+        else {
+            window.getSelection()?.removeAllRanges();
+        }
+    }
+    isInlineElement(element) {
+        if (!element)
+            return false;
+        const display = window.getComputedStyle(element).display;
+        return display.startsWith('inline');
+    }
+    splitInlineElementAndApplyToSelection(selection, selectedRange, existingElement, newTagName, newWrapperStyles, newWrapperClassNames, newWrapperAttrs) {
+        const parent = existingElement.parentNode;
+        if (!parent) {
+            this.wrapRange(selection, selectedRange, newTagName, newWrapperStyles, newWrapperClassNames, newWrapperAttrs);
+            return;
+        }
+        const newWrapperForSelection = document.createElement(newTagName);
+        this.applyStylesAttributesAndClasses(newWrapperForSelection, newWrapperStyles, newWrapperClassNames, newWrapperAttrs);
+        const originalElementAttributes = {};
+        for (let i = 0; i < existingElement.attributes.length; i++) {
+            const attr = existingElement.attributes[i];
+            originalElementAttributes[attr.name] = attr.value;
+        }
+        const prefixRange = document.createRange();
+        prefixRange.setStart(existingElement, 0); // От начала содержимого existingElement
+        try {
+            prefixRange.setEnd(selectedRange.startContainer, selectedRange.startOffset);
+        }
+        catch (e) {
+            // Если selectedRange.startContainer не является потомком existingElement, это может вызвать ошибку.
+            // В таком случае, префиксной части нет или она не может быть корректно определена этим способом.
+            // console.warn("Error setting prefixRange end:", e);
+            prefixRange.setEnd(existingElement, 0); // Схлопываем в начало
+        }
+        let prefixElementClone = null;
+        if (!prefixRange.collapsed) {
+            try {
+                const prefixFragment = prefixRange.extractContents();
+                prefixElementClone = document.createElement(existingElement.tagName);
+                for (const attrName in originalElementAttributes) {
+                    if (Object.prototype.hasOwnProperty.call(originalElementAttributes, attrName)) {
+                        prefixElementClone.setAttribute(attrName, originalElementAttributes[attrName]);
+                    }
+                }
+                prefixElementClone.appendChild(prefixFragment);
+            }
+            catch (e) {
+                // console.error("Error extracting/creating prefix:", e);
+                prefixElementClone = null; // Не удалось создать префикс
+            }
+        }
+        // Извлекаем выделенное содержимое ДО работы с суффиксом, так как selectedRange может стать невалидным
+        let selectedFragment;
+        try {
+            if (selectedRange.commonAncestorContainer.isConnected && !selectedRange.collapsed) {
+                selectedFragment = selectedRange.extractContents();
+            }
+            else {
+                selectedFragment = document.createDocumentFragment(); // Пустой, если не удалось извлечь
+            }
+        }
+        catch (e) {
+            // console.error("Error extracting selectedFragment:", e);
+            selectedFragment = document.createDocumentFragment();
+        }
+        let suffixElementClone = null;
+        // То, что осталось в existingElement после извлечения префикса и выделенной части, - это суффикс
+        if (existingElement.hasChildNodes()) {
+            suffixElementClone = document.createElement(existingElement.tagName);
+            for (const attrName in originalElementAttributes) {
+                if (Object.prototype.hasOwnProperty.call(originalElementAttributes, attrName)) {
+                    suffixElementClone.setAttribute(attrName, originalElementAttributes[attrName]);
+                }
+            }
+            while (existingElement.firstChild) {
+                suffixElementClone.appendChild(existingElement.firstChild);
+            }
+        }
+        newWrapperForSelection.appendChild(selectedFragment);
+        const insertBeforeOriginal = existingElement;
+        if (prefixElementClone) {
+            parent.insertBefore(prefixElementClone, insertBeforeOriginal);
+        }
+        parent.insertBefore(newWrapperForSelection, insertBeforeOriginal);
+        if (suffixElementClone) {
+            parent.insertBefore(suffixElementClone, insertBeforeOriginal);
+        }
+        parent.removeChild(existingElement);
+        selection.removeAllRanges();
+        const finalRange = document.createRange();
+        finalRange.selectNodeContents(newWrapperForSelection);
+        selection.addRange(finalRange);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextHighlightService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextHighlightService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AddLinkDialog {
+    _dialogRef = inject(DialogRef);
+    _formBuilder = inject(FormBuilder);
+    form = this._formBuilder.group({
+        href: [''],
+        openInNewTab: [true, [Validators.required]]
+    });
+    cancel() {
+        this._dialogRef.close(false);
+    }
+    add() {
+        this._dialogRef.close(this.form.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AddLinkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AddLinkDialog, isStandalone: true, selector: "ngs-add-link", ngImport: i0, template: "<h1 ngs-dialog-title>Add link</h1>\n<ngs-dialog-content [formGroup]=\"form\" class=\"!overflow-hidden\">\n  <ngs-form-field class=\"w-full\">\n    <ngs-label>Href (Url, Tel or other)</ngs-label>\n    <input ngsInput type=\"text\" formControlName=\"href\">\n  </ngs-form-field>\n  <ngs-slide-toggle formControlName=\"openInNewTab\">Open link in a new tab</ngs-slide-toggle>\n</ngs-dialog-content>\n<ngs-dialog-actions>\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\"\n          [ngs-dialog-close]=\"true\"\n          [disabled]=\"form.invalid\" (click)=\"add()\">Add</button>\n</ngs-dialog-actions>\n", styles: [""], dependencies: [{ kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { 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: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { 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: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AddLinkDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-add-link', imports: [
+                        DialogContent,
+                        FormField,
+                        Input,
+                        DialogTitle,
+                        DialogActions,
+                        Button,
+                        DialogClose,
+                        ReactiveFormsModule,
+                        Label,
+                        SlideToggle
+                    ], template: "<h1 ngs-dialog-title>Add link</h1>\n<ngs-dialog-content [formGroup]=\"form\" class=\"!overflow-hidden\">\n  <ngs-form-field class=\"w-full\">\n    <ngs-label>Href (Url, Tel or other)</ngs-label>\n    <input ngsInput type=\"text\" formControlName=\"href\">\n  </ngs-form-field>\n  <ngs-slide-toggle formControlName=\"openInNewTab\">Open link in a new tab</ngs-slide-toggle>\n</ngs-dialog-content>\n<ngs-dialog-actions>\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\"\n          [ngs-dialog-close]=\"true\"\n          [disabled]=\"form.invalid\" (click)=\"add()\">Add</button>\n</ngs-dialog-actions>\n" }]
+        }] });
+
+class EditLinkDialog {
+    _dialogRef = inject(DialogRef);
+    _dialogData = inject(DIALOG_DATA);
+    _formBuilder = inject(FormBuilder);
+    form = this._formBuilder.group({
+        href: [this._dialogData.href],
+        openInNewTab: [this._dialogData.openInNewTab, [Validators.required]]
+    });
+    cancel() {
+        this._dialogRef.close(false);
+    }
+    add() {
+        this._dialogRef.close(this.form.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EditLinkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EditLinkDialog, isStandalone: true, selector: "ngs-edit-link", ngImport: i0, template: "<h1 ngs-dialog-title>Edit link</h1>\n<ngs-dialog-content [formGroup]=\"form\" class=\"!overflow-hidden\">\n  <ngs-form-field class=\"w-full\">\n    <ngs-label>Href (Url, Tel or other)</ngs-label>\n    <input ngsInput type=\"text\" formControlName=\"href\">\n    <ngs-hint>To delete the link, clear this field and apply</ngs-hint>\n  </ngs-form-field>\n  <ngs-slide-toggle formControlName=\"openInNewTab\" class=\"mt-5\">Open link in a new tab</ngs-slide-toggle>\n</ngs-dialog-content>\n<ngs-dialog-actions>\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\"\n          [ngs-dialog-close]=\"true\"\n          [disabled]=\"form.invalid\" (click)=\"add()\">Apply</button>\n</ngs-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[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: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EditLinkDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-edit-link', imports: [
+                        FormsModule,
+                        Button,
+                        DialogActions,
+                        DialogContent,
+                        DialogTitle,
+                        FormField,
+                        Input,
+                        Label,
+                        SlideToggle,
+                        ReactiveFormsModule,
+                        DialogClose,
+                        Hint
+                    ], template: "<h1 ngs-dialog-title>Edit link</h1>\n<ngs-dialog-content [formGroup]=\"form\" class=\"!overflow-hidden\">\n  <ngs-form-field class=\"w-full\">\n    <ngs-label>Href (Url, Tel or other)</ngs-label>\n    <input ngsInput type=\"text\" formControlName=\"href\">\n    <ngs-hint>To delete the link, clear this field and apply</ngs-hint>\n  </ngs-form-field>\n  <ngs-slide-toggle formControlName=\"openInNewTab\" class=\"mt-5\">Open link in a new tab</ngs-slide-toggle>\n</ngs-dialog-content>\n<ngs-dialog-actions>\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\"\n          [ngs-dialog-close]=\"true\"\n          [disabled]=\"form.invalid\" (click)=\"add()\">Apply</button>\n</ngs-dialog-actions>\n" }]
+        }] });
+
+class TextColorComponent {
+    recentlyUsed = model(localStorage ? JSON.parse(localStorage.getItem('ngsContentEditorRecentlyUsedTextColor') || '[]') : [], ...(ngDevMode ? [{ debugName: "recentlyUsed" }] : /* istanbul ignore next */ []));
+    selectedTextColor = model(null, ...(ngDevMode ? [{ debugName: "selectedTextColor" }] : /* istanbul ignore next */ []));
+    selectedBackgroundColor = model(null, ...(ngDevMode ? [{ debugName: "selectedBackgroundColor" }] : /* istanbul ignore next */ []));
+    textColors = input([
+        {
+            name: 'Default',
+            color: '',
+            type: 'text'
+        },
+        {
+            name: 'Gray',
+            color: '#7f7f7f',
+            type: 'text'
+        },
+        {
+            name: 'Brown',
+            color: '#ae2012',
+            type: 'text'
+        },
+        {
+            name: 'Orange',
+            color: '#fb5607',
+            type: 'text'
+        },
+        {
+            name: 'Yellow',
+            color: '#ffa200',
+            type: 'text'
+        },
+        {
+            name: 'Green',
+            color: '#40916c',
+            type: 'text'
+        },
+        {
+            name: 'Blue',
+            color: '#00bbf9',
+            type: 'text'
+        },
+        {
+            name: 'Purple',
+            color: '#907ad6',
+            type: 'text'
+        },
+        {
+            name: 'Pink',
+            color: '#fa3faf',
+            type: 'text'
+        },
+        {
+            name: 'Red',
+            color: '#ef233c',
+            type: 'text'
+        }
+    ], ...(ngDevMode ? [{ debugName: "textColors" }] : /* istanbul ignore next */ []));
+    backgroundColors = input([
+        {
+            name: 'Default',
+            color: '',
+            type: 'background'
+        },
+        {
+            name: 'Gray',
+            color: '#e9ecef',
+            type: 'background'
+        },
+        {
+            name: 'Brown',
+            color: '#ffe0c0',
+            type: 'background'
+        },
+        {
+            name: 'Orange',
+            color: '#ffd8c6',
+            type: 'background'
+        },
+        {
+            name: 'Yellow',
+            color: '#fff3b0',
+            type: 'background'
+        },
+        {
+            name: 'Green',
+            color: '#eff6e0',
+            type: 'background'
+        },
+        {
+            name: 'Blue',
+            color: '#edf6f9',
+            type: 'background'
+        },
+        {
+            name: 'Purple',
+            color: '#e0aaff',
+            type: 'background'
+        },
+        {
+            name: 'Pink',
+            color: '#fae0ec',
+            type: 'background'
+        },
+        {
+            name: 'Red',
+            color: '#ffdccc',
+            type: 'background'
+        }
+    ], ...(ngDevMode ? [{ debugName: "backgroundColors" }] : /* istanbul ignore next */ []));
+    textColorChanged = output();
+    backgroundColorChanged = output();
+    selectRecentlyColor(color) {
+        if (color.type === 'text') {
+            this.selectTextColor(color);
+        }
+        else if (color.type === 'background') {
+            this.selectBackgroundColor(color);
+        }
+    }
+    selectTextColor(color) {
+        this.selectedTextColor.set(color);
+        this.textColorChanged.emit(color.color);
+        this._addToRecently(color);
+    }
+    selectBackgroundColor(color) {
+        this.selectedBackgroundColor.set(color);
+        this.backgroundColorChanged.emit(color.color);
+        this._addToRecently(color);
+    }
+    _addToRecently(color) {
+        const hasRecentlyUsed = this.recentlyUsed()
+            .filter(recentlyColor => recentlyColor.name === color.name && recentlyColor.type === color.type)
+            .length > 0;
+        if (hasRecentlyUsed) {
+            return;
+        }
+        let colors = [...this.recentlyUsed()];
+        colors = colors.length >= 5 ? colors.slice(1, 5) : colors;
+        this.recentlyUsed.set([...colors, color]);
+        localStorage.setItem('ngsContentEditorRecentlyUsedTextColor', JSON.stringify(this.recentlyUsed()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TextColorComponent, isStandalone: true, selector: "ngs-text-color", inputs: { recentlyUsed: { classPropertyName: "recentlyUsed", publicName: "recentlyUsed", isSignal: true, isRequired: false, transformFunction: null }, selectedTextColor: { classPropertyName: "selectedTextColor", publicName: "selectedTextColor", isSignal: true, isRequired: false, transformFunction: null }, selectedBackgroundColor: { classPropertyName: "selectedBackgroundColor", publicName: "selectedBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, textColors: { classPropertyName: "textColors", publicName: "textColors", isSignal: true, isRequired: false, transformFunction: null }, backgroundColors: { classPropertyName: "backgroundColors", publicName: "backgroundColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recentlyUsed: "recentlyUsedChange", selectedTextColor: "selectedTextColorChange", selectedBackgroundColor: "selectedBackgroundColorChange", textColorChanged: "textColorChanged", backgroundColorChanged: "backgroundColorChanged" }, ngImport: i0, template: "@if (recentlyUsed().length > 0) {\n  <div class=\"mb-5\">\n    <div class=\"text-xs text-neutral-700 text-semibold\">Recently colors</div>\n    <div class=\"flex gap-2 flex-wrap mt-3\">\n      @for (recentlyColor of recentlyUsed(); track recentlyColor) {\n        @if (recentlyColor.type === 'text') {\n          <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\"\n                  [style.color]=\"recentlyColor.color\" [ngsTooltip]=\"recentlyColor.name\"\n                  (click)=\"selectRecentlyColor(recentlyColor)\">\n            <ngs-icon name=\"fluent:text-field-24-regular\"/>\n          </button>\n        } @else if (recentlyColor.type === 'background') {\n          <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\"\n                  [style.background-color]=\"recentlyColor.color\" [ngsTooltip]=\"recentlyColor.name\"\n                  (click)=\"selectRecentlyColor(recentlyColor)\">\n          </button>\n        }\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mb-5\">\n  <div class=\"text-xs text-neutral-700 text-semibold\">Text color</div>\n  <div class=\"flex gap-2 flex-wrap mt-3\">\n    @for (textColor of textColors(); track $index) {\n      <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\n                  [&.is-selected]:outline [&.is-selected]:outline-primary\"\n              [style.color]=\"textColor.color\" [ngsTooltip]=\"textColor.name\"\n              [class.is-selected]=\"selectedTextColor()?.color === textColor.color\"\n              (click)=\"selectTextColor(textColor)\">\n        <ngs-icon name=\"fluent:text-field-24-regular\"/>\n      </button>\n    }\n  </div>\n</div>\n\n<div>\n  <div class=\"text-xs text-neutral-700 text-semibold\">Background color</div>\n  <div class=\"flex gap-2 flex-wrap mt-3\">\n    @for (backgroundColor of backgroundColors(); track $index) {\n      <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\n                  [&.is-selected]:outline [&.is-selected]:outline-primary\"\n              [style.background-color]=\"backgroundColor.color\" [ngsTooltip]=\"backgroundColor.name\"\n              [class.is-selected]=\"selectedBackgroundColor()?.color === backgroundColor.color\"\n              (click)=\"selectBackgroundColor(backgroundColor)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:172px}\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Tooltip, selector: "[ngsTooltip]", inputs: ["ngsTooltip", "ngsTooltipPosition", "ngsTooltipClass", "ngsTooltipShowDelay", "ngsTooltipHideDelay", "ngsTooltipOffset", "ngsTooltipPositionAtOrigin", "ngsTooltipDisabled"], exportAs: ["ngsTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-text-color', imports: [
+                        Icon,
+                        Tooltip
+                    ], template: "@if (recentlyUsed().length > 0) {\n  <div class=\"mb-5\">\n    <div class=\"text-xs text-neutral-700 text-semibold\">Recently colors</div>\n    <div class=\"flex gap-2 flex-wrap mt-3\">\n      @for (recentlyColor of recentlyUsed(); track recentlyColor) {\n        @if (recentlyColor.type === 'text') {\n          <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\"\n                  [style.color]=\"recentlyColor.color\" [ngsTooltip]=\"recentlyColor.name\"\n                  (click)=\"selectRecentlyColor(recentlyColor)\">\n            <ngs-icon name=\"fluent:text-field-24-regular\"/>\n          </button>\n        } @else if (recentlyColor.type === 'background') {\n          <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\"\n                  [style.background-color]=\"recentlyColor.color\" [ngsTooltip]=\"recentlyColor.name\"\n                  (click)=\"selectRecentlyColor(recentlyColor)\">\n          </button>\n        }\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mb-5\">\n  <div class=\"text-xs text-neutral-700 text-semibold\">Text color</div>\n  <div class=\"flex gap-2 flex-wrap mt-3\">\n    @for (textColor of textColors(); track $index) {\n      <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\n                  [&.is-selected]:outline [&.is-selected]:outline-primary\"\n              [style.color]=\"textColor.color\" [ngsTooltip]=\"textColor.name\"\n              [class.is-selected]=\"selectedTextColor()?.color === textColor.color\"\n              (click)=\"selectTextColor(textColor)\">\n        <ngs-icon name=\"fluent:text-field-24-regular\"/>\n      </button>\n    }\n  </div>\n</div>\n\n<div>\n  <div class=\"text-xs text-neutral-700 text-semibold\">Background color</div>\n  <div class=\"flex gap-2 flex-wrap mt-3\">\n    @for (backgroundColor of backgroundColors(); track $index) {\n      <button class=\"rounded-sm border border-border size-7 flex-none flex items-center justify-center cursor-pointer\n                  [&.is-selected]:outline [&.is-selected]:outline-primary\"\n              [style.background-color]=\"backgroundColor.color\" [ngsTooltip]=\"backgroundColor.name\"\n              [class.is-selected]=\"selectedBackgroundColor()?.color === backgroundColor.color\"\n              (click)=\"selectBackgroundColor(backgroundColor)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:172px}\n"] }]
+        }], propDecorators: { recentlyUsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "recentlyUsed", required: false }] }, { type: i0.Output, args: ["recentlyUsedChange"] }], selectedTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTextColor", required: false }] }, { type: i0.Output, args: ["selectedTextColorChange"] }], selectedBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedBackgroundColor", required: false }] }, { type: i0.Output, args: ["selectedBackgroundColorChange"] }], textColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColors", required: false }] }], backgroundColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColors", required: false }] }], textColorChanged: [{ type: i0.Output, args: ["textColorChanged"] }], backgroundColorChanged: [{ type: i0.Output, args: ["backgroundColorChanged"] }] } });
+
+class CommandBarComponent {
+    _document = inject(DOCUMENT);
+    _textHighlightService = inject(TextHighlightService);
+    _renderer = inject(Renderer2);
+    _dialog = inject(Dialog);
+    observedElement = null;
+    props = signal([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    alignment = computed(() => {
+        const alignment = this.props().find(prop => prop.name === 'text-alignment');
+        return alignment?.value || 'left';
+    }, ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this._extractProps();
+    }
+    toggleBold() {
+        this._textHighlightService.toggleWrapSelection('strong');
+    }
+    toggleItalic() {
+        this._textHighlightService.toggleWrapSelection('em');
+    }
+    toggleCode() {
+        this._textHighlightService.toggleWrapSelection('code', undefined, ['code']);
+    }
+    toggleStrike() {
+        this._textHighlightService.toggleWrapSelection('s');
+    }
+    toggleUnderline() {
+        this._textHighlightService.toggleWrapSelection('u');
+    }
+    toggleSuperscript() {
+        this._textHighlightService.toggleWrapSelection('sup');
+    }
+    toggleSubscript() {
+        this._textHighlightService.toggleWrapSelection('sub');
+    }
+    isLinkActive() {
+        const fakeSelection = this._document.querySelector('.link-selection');
+        if (fakeSelection) {
+            return true;
+        }
+        return this._textHighlightService.isSelectionWrappedInTag('a');
+    }
+    isActive(tagName) {
+        return this._textHighlightService.isSelectionWrappedInTag(tagName);
+    }
+    setTextAlignment(alignment) {
+        this._textHighlightService.setTextAlignment(alignment);
+        this._extractProps();
+    }
+    isTextAlignment(alignment) {
+        return this.alignment() === alignment;
+    }
+    addLink() {
+        this._textHighlightService.toggleWrapSelection('span', undefined, ['link-selection']);
+        const dialogRef = this._dialog.open(AddLinkDialog, {
+            width: '500px',
+            disableClose: true,
+            hasBackdrop: true
+        });
+        dialogRef.afterClosed().subscribe((res) => {
+            this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
+            if (res && res.href) {
+                this._textHighlightService.toggleWrapSelection('a', undefined, ['link'], {
+                    href: res.href,
+                    target: res.openInNewTab ? '_blank' : '_self'
+                });
+            }
+        });
+    }
+    editLink() {
+        const link = this._textHighlightService.getContainingAncestorByTagName('a');
+        this._textHighlightService.toggleWrapSelection('span', undefined, ['link-selection']);
+        if (!link) {
+            return;
+        }
+        const dialogRef = this._dialog.open(EditLinkDialog, {
+            data: {
+                href: link.getAttribute('href'),
+                openInNewTab: link.getAttribute('target') === '_blank',
+            },
+            width: '500px',
+            disableClose: true,
+            hasBackdrop: true
+        });
+        dialogRef.afterClosed().subscribe((res) => {
+            this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
+            if (res) {
+                if (res.href) {
+                    this._renderer.setAttribute(link, 'href', res.href);
+                    this._renderer.setAttribute(link, 'target', res.openInNewTab ? '_blank' : '_self');
+                }
+                else {
+                    this._textHighlightService.toggleWrapSelection('a');
+                }
+            }
+        });
+    }
+    onMenuOpen() {
+        this._textHighlightService.wrapSelection('span', undefined, ['text-selection']);
+    }
+    onMenuClose() {
+        let textSelectionElement = this._document.querySelector('.text-selection');
+        if (textSelectionElement) {
+            if (textSelectionElement.style.color || textSelectionElement.style.backgroundColor) {
+                this._renderer.removeClass(textSelectionElement, 'text-selection');
+            }
+            else {
+                this._textHighlightService.unwrapElementByClassAndSelectContents('text-selection');
+            }
+        }
+    }
+    preventMenuClose(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    onTextColorChanged(color) {
+        let textSelectionElement = this._document.querySelector('.text-selection');
+        if (color) {
+            this._renderer.setStyle(textSelectionElement, 'color', color);
+        }
+        else {
+            this._renderer.removeStyle(textSelectionElement, 'color');
+        }
+    }
+    onBackgroundColorChanged(color) {
+        let textSelectionElement = this._document.querySelector('.text-selection');
+        if (color) {
+            this._renderer.setStyle(textSelectionElement, 'backgroundColor', color);
+        }
+        else {
+            this._renderer.removeStyle(textSelectionElement, 'backgroundColor');
+        }
+    }
+    _extractProps() {
+        if (!this.observedElement) {
+            return;
+        }
+        const props = [];
+        for (const attribute of this.observedElement.attributes) {
+            if (!attribute.name.startsWith('data-props-')) {
+                continue;
+            }
+            const prop = {
+                name: attribute.name.replace('data-props-', ''),
+                value: attribute.value
+            };
+            props.push(prop);
+        }
+        this.props.set(props);
+    }
+    ngOnDestroy() {
+        this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
+        this._unwrapTextSelection();
+    }
+    _unwrapTextSelection() {
+        let textSelectionElement = this._document.querySelector('.text-selection');
+        if (textSelectionElement) {
+            if (!textSelectionElement.style.color && !textSelectionElement.style.backgroundColor) {
+                this._textHighlightService.unwrapElementByClassAndSelectContents('text-selection');
+            }
+            else {
+                this._renderer.removeClass(textSelectionElement, 'text-selection');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommandBarComponent, isStandalone: true, selector: "ngs-command-bar", inputs: { observedElement: "observedElement" }, host: { classAttribute: "ngs-command-bar" }, ngImport: i0, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:host button.is-active{background:var(--color-surface-container-highest);color:var(--color-primary)}\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"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { 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: TextColorComponent, selector: "ngs-text-color", inputs: ["recentlyUsed", "selectedTextColor", "selectedBackgroundColor", "textColors", "backgroundColors"], outputs: ["recentlyUsedChange", "selectedTextColorChange", "selectedBackgroundColorChange", "textColorChanged", "backgroundColorChanged"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-command-bar', imports: [
+                        Button,
+                        Icon,
+                        Menu,
+                        MenuItem,
+                        MenuTrigger,
+                        TextColorComponent
+                    ], host: {
+                        'class': 'ngs-command-bar'
+                    }, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:host button.is-active{background:var(--color-surface-container-highest);color:var(--color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { observedElement: [{
+                type: Input$1
+            }] } });
+
+const CONTENT_BUILDER = new InjectionToken('CONTENT_BUILDER');
+const CONTENT_EDITOR_BLOCK = new InjectionToken('CONTENT_EDITOR_BLOCK');
+
+const initialState = {
+    focusedBlockId: null,
+    activeBlockId: null,
+    blocks: []
+};
+const ContentBuilderStore = signalStore(withState(initialState), withMethods((store) => ({
+    setFocusedBlockId(focusedBlockId) {
+        patchState(store, (state) => ({ focusedBlockId }));
+    },
+    setActiveBlockId(activeBlockId) {
+        patchState(store, (state) => ({ activeBlockId }));
+    },
+    setBlocks(blocks) {
+        patchState(store, (state) => ({ blocks }));
+    },
+    addBlock(dataBlock, index) {
+        patchState(store, (state) => {
+            const blocks = [...state.blocks];
+            blocks.splice(index, 0, dataBlock);
+            return {
+                blocks
+            };
+        });
+    },
+    deleteBlock(blockId, index) {
+        patchState(store, (state) => {
+            const blocks = [...state.blocks];
+            blocks.splice(index, 1);
+            return {
+                blocks
+            };
+        });
+    },
+    updateBlock(blockId, data) {
+        patchState(store, (state) => {
+            const blocks = [...state.blocks];
+            const index = blocks.findIndex(block => block.id === blockId);
+            if (index !== -1) {
+                blocks[index] = {
+                    ...blocks[index],
+                    ...data
+                };
+            }
+            return {
+                blocks
+            };
+        });
+    },
+    moveBlock(fromIndex, toIndex) {
+        patchState(store, (state) => {
+            const newBlocks = [...state.blocks];
+            const [movedItem] = newBlocks.splice(fromIndex, 1);
+            newBlocks.splice(toIndex, 0, movedItem);
+            return {
+                ...state,
+                blocks: newBlocks,
+            };
+        });
+    },
+})));
+
+// src/app/text-selection-popup.directive.ts
+const POPUP_VERTICAL_OFFSET = 8;
+class TextSelectionPopupDirective {
+    overlay;
+    viewContainerRef;
+    elementRef;
+    renderer;
+    overlayContainer;
+    ngZone;
+    targetComponent;
+    closestContentObserverClass = null;
+    tagSelected = new EventEmitter();
+    overlayRef = null;
+    hostElement;
+    currentSelectionRange = null;
+    documentClickListener = null;
+    positionStrategy = null;
+    scrollListener = null;
+    scrollSubject = new Subject();
+    scrollSubscription = null;
+    constructor(overlay, viewContainerRef, elementRef, renderer, overlayContainer, ngZone) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.overlayContainer = overlayContainer;
+        this.ngZone = ngZone;
+        this.hostElement = this.elementRef.nativeElement;
+        this.scrollSubscription = this.scrollSubject.pipe(throttleTime(50, undefined, { leading: true, trailing: true })).subscribe(() => {
+            this.updatePopupPositionOnScroll();
+        });
+    }
+    onDocumentClickHostListener(event) {
+        if (event.target.closest('.cdk-overlay-container')) {
+            return;
+        }
+        this.processSelection();
+    }
+    onDocumentKeyDown(event) {
+        if (!this.overlayRef)
+            return;
+        if (this.isEventInsidePopup(event))
+            return;
+        const ignoredKeys = [
+            'Shift', 'Control', 'Alt', 'Meta', 'CapsLock',
+            'Escape', 'Tab',
+            'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight',
+            'Home', 'End', 'PageUp', 'PageDown',
+            'Insert', 'ContextMenu',
+            'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'
+        ];
+        if (ignoredKeys.includes(event.key)) {
+            setTimeout(() => this.processSelection(), 0);
+            return;
+        }
+        if (event.target.closest('.cdk-overlay-container')) {
+            return;
+        }
+        this.closePopup();
+    }
+    processSelection() {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+            if (this.overlayRef && !this.isFocusInsidePopup()) {
+                this.closePopup();
+            }
+            this.currentSelectionRange = null;
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (!this.hostElement.contains(range.startContainer) || !this.hostElement.contains(range.endContainer)) {
+            this.closePopupIfNeeded();
+            this.currentSelectionRange = null;
+            return;
+        }
+        let observedElement = null;
+        if (this.closestContentObserverClass) {
+            observedElement = this.findClosestElementWithClass(range.startContainer, this.closestContentObserverClass);
+            if (!observedElement) {
+                this.closePopupIfNeeded();
+                this.currentSelectionRange = null;
+                return;
+            }
+        }
+        const selectedText = selection.toString().trim();
+        if (selectedText) {
+            const selectionRects = range.getClientRects();
+            if (selectionRects.length > 0) {
+                const startRect = selectionRects[0];
+                const lastRect = selectionRects[selectionRects.length - 1];
+                const hostRect = this.hostElement.getBoundingClientRect();
+                const hostCenterX = hostRect.left + hostRect.width / 2;
+                const selectionStartX = startRect.left;
+                const selectionEndX = lastRect.right;
+                const selectionCenterX = selectionStartX + (selectionEndX - selectionStartX) / 2;
+                const alignRight = selectionCenterX >= hostCenterX;
+                const scrollX = document.body.scrollLeft;
+                const scrollY = document.body.scrollTop;
+                const anchorX = selectionStartX + scrollX;
+                const endX = selectionEndX + scrollX;
+                const anchorY = startRect.top + scrollY;
+                const containingTagName = this.getContainingTagName(range);
+                const newRange = range.cloneRange();
+                if (!this.overlayRef || !this.areRangesEqual(this.currentSelectionRange, newRange)) {
+                    this.closePopupIfNeeded();
+                    this.currentSelectionRange = newRange;
+                    this.showPopup({ x: anchorX, y: anchorY }, endX, alignRight, observedElement);
+                    this.tagSelected.emit(containingTagName);
+                }
+            }
+            else {
+                this.closePopupIfNeeded();
+                this.currentSelectionRange = null;
+            }
+        }
+        else {
+            this.closePopupIfNeeded();
+            this.currentSelectionRange = null;
+        }
+    }
+    showPopup(anchorPosition, selectionEndX, alignRight, observedElement) {
+        if (!this.targetComponent || this.overlayRef)
+            return;
+        this.positionStrategy = this.overlay.position().global();
+        this.positionStrategy.left(`${anchorPosition.x}px`).top(`${anchorPosition.y}px`);
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.positionStrategy,
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+        });
+        const portal = new ComponentPortal(this.targetComponent, this.viewContainerRef);
+        const componentRef = this.overlayRef.attach(portal);
+        if (componentRef.instance && 'observedElement' in componentRef.instance) {
+            componentRef.instance.observedElement = observedElement;
+        }
+        if (this.overlayRef) {
+            Promise.resolve().then(() => {
+                if (this.overlayRef && this.positionStrategy) {
+                    try {
+                        const overlayElement = this.overlayRef.overlayElement;
+                        const popupHeight = overlayElement.offsetHeight;
+                        const popupWidth = overlayElement.offsetWidth;
+                        if (popupHeight > 0 && popupWidth > 0) {
+                            const correctTop = anchorPosition.y - popupHeight - POPUP_VERTICAL_OFFSET;
+                            const correctLeft = alignRight ? selectionEndX - popupWidth : anchorPosition.x;
+                            this.positionStrategy.left(`${correctLeft}px`).top(`${correctTop}px`);
+                            this.overlayRef.updatePosition();
+                        }
+                    }
+                    catch (e) {
+                        console.error("Error correcting initial popup position:", e);
+                    }
+                    this.addDocumentClickListener();
+                    this.addScrollListener();
+                }
+            });
+        }
+    }
+    closePopupIfNeeded() {
+        if (this.overlayRef) {
+            this.closePopup();
+        }
+    }
+    closePopup() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.positionStrategy = null;
+        this.currentSelectionRange = null;
+        this.removeDocumentClickListener();
+        this.removeScrollListener();
+    }
+    addScrollListener() {
+        if (this.scrollListener)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            this.scrollListener = this.renderer.listen(document, 'scroll', (event) => {
+                this.scrollSubject.next();
+            });
+        });
+    }
+    removeScrollListener() {
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = null;
+        }
+    }
+    updatePopupPositionOnScroll() {
+        if (!this.overlayRef || !this.positionStrategy || !this.currentSelectionRange)
+            return;
+        try {
+            const selectionRects = this.currentSelectionRange.getClientRects();
+            if (selectionRects.length > 0) {
+                const startRect = selectionRects[0];
+                const lastRect = selectionRects[selectionRects.length - 1];
+                const hostRect = this.hostElement.getBoundingClientRect();
+                const hostCenterX = hostRect.left + hostRect.width / 2;
+                const selectionStartX = startRect.left;
+                const selectionEndX = lastRect.right;
+                const selectionCenterX = selectionStartX + (selectionEndX - selectionStartX) / 2;
+                const alignRight = selectionCenterX >= hostCenterX;
+                const scrollX = document.body.scrollLeft;
+                const scrollY = document.body.scrollTop;
+                const textTop = startRect.top + scrollY;
+                const popupElement = this.overlayRef.overlayElement;
+                const popupHeight = popupElement.offsetHeight;
+                const popupWidth = popupElement.offsetWidth;
+                let newX;
+                if (alignRight) {
+                    newX = (lastRect.right + scrollX) - popupWidth;
+                }
+                else {
+                    newX = startRect.left + scrollX;
+                }
+                const newY = textTop - popupHeight - POPUP_VERTICAL_OFFSET;
+                this.ngZone.run(() => {
+                    if (this.overlayRef && this.positionStrategy) {
+                        this.positionStrategy.left(`${newX}px`).top(`${newY}px`);
+                        this.overlayRef.updatePosition();
+                    }
+                });
+            }
+            else {
+                this.ngZone.run(() => this.closePopup());
+            }
+        }
+        catch (e) {
+            console.error("Error updating popup position on scroll:", e);
+            this.ngZone.run(() => this.closePopup());
+        }
+    }
+    findClosestElementWithClass(startNode, className) {
+        let currentNode = startNode;
+        const hostParent = this.hostElement.parentNode;
+        while (currentNode && currentNode !== hostParent && currentNode !== document.body && currentNode !== document.documentElement) {
+            if (currentNode instanceof Element && currentNode.classList.contains(className)) {
+                return currentNode;
+            }
+            currentNode = currentNode.parentNode;
+        }
+        if (this.hostElement.classList.contains(className)) {
+            return this.hostElement;
+        }
+        return null;
+    }
+    getContainingTagName(range) {
+        let container = range.commonAncestorContainer;
+        while (container && container.nodeType !== Node.ELEMENT_NODE) {
+            container = container.parentNode;
+        }
+        return container instanceof Element ? container.tagName : null;
+    }
+    addDocumentClickListener() {
+        if (this.documentClickListener)
+            return;
+        this.documentClickListener = this.renderer.listen(document, 'click', (event) => {
+            this.handleDocumentClick(event);
+        });
+    }
+    removeDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+        }
+    }
+    handleDocumentClick(event) {
+        if (!this.overlayRef || !event.target)
+            return;
+        const clickedElement = event.target;
+        if (this.isEventInsidePopup(event))
+            return;
+        const overlayContainerElement = this.overlayContainer.getContainerElement();
+        if (overlayContainerElement.contains(clickedElement))
+            return;
+        this.closePopup();
+    }
+    isEventInsidePopup(event) {
+        if (!this.overlayRef?.overlayElement || !event.target)
+            return false;
+        return this.overlayRef.overlayElement.contains(event.target);
+    }
+    isClickInsidePopup(node) {
+        return !!this.overlayRef?.overlayElement?.contains(node);
+    }
+    isFocusInsidePopup() {
+        if (!this.overlayRef?.overlayElement || !document.activeElement)
+            return false;
+        return this.overlayRef.overlayElement.contains(document.activeElement);
+    }
+    areRangesEqual(r1, r2) {
+        if (!r1 || !r2)
+            return r1 === r2;
+        return (r1.commonAncestorContainer === r2.commonAncestorContainer &&
+            r1.startContainer === r2.startContainer &&
+            r1.endContainer === r2.endContainer &&
+            r1.startOffset === r2.startOffset &&
+            r1.endOffset === r2.endOffset);
+    }
+    ngOnDestroy() {
+        this.closePopup();
+        if (this.scrollSubscription) {
+            this.scrollSubscription.unsubscribe();
+            this.scrollSubscription = null;
+        }
+        this.removeDocumentClickListener();
+        this.removeScrollListener();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextSelectionPopupDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.OverlayContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TextSelectionPopupDirective, isStandalone: true, selector: "[ngsTextSelectionPopup]", inputs: { targetComponent: "targetComponent", closestContentObserverClass: "closestContentObserverClass" }, outputs: { tagSelected: "tagSelected" }, host: { listeners: { "document:click": "onDocumentClickHostListener($event)", "document:keydown": "onDocumentKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextSelectionPopupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTextSelectionPopup]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.OverlayContainer }, { type: i0.NgZone }], propDecorators: { targetComponent: [{
+                type: Input$1
+            }], closestContentObserverClass: [{
+                type: Input$1
+            }], tagSelected: [{
+                type: Output
+            }], onDocumentClickHostListener: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Directive to enable mouse-drag selection of child blocks inside a container.
+ *
+ * Behavior:
+ * - Drag can be started only from an area that is NOT inside a block (matched by `blockSelector`).
+ * - While dragging, the directive creates a dynamic selection rectangle element with the
+ *   class `selectionAreaClass` (default: `ngs-textContent-builder-selection-area`).
+ * - Any block that intersects the selection rectangle receives `selectedClass` (default: `is-selected`).
+ *   When the block leaves the selection area, the class is removed.
+ */
+class BlockSelectionDirective {
+    document = inject(DOCUMENT);
+    _platformId = inject(PLATFORM_ID);
+    contentBuilder = inject(CONTENT_BUILDER);
+    /** CSS selector for selectable blocks. Defaults to `.block`. */
+    blockSelector = input('.block-content', ...(ngDevMode ? [{ debugName: "blockSelector" }] : /* istanbul ignore next */ []));
+    autoScrollContainerSelector = input(null, ...(ngDevMode ? [{ debugName: "autoScrollContainerSelector" }] : /* istanbul ignore next */ []));
+    /** CSS class applied to the dynamic selection rectangle element. */
+    selectionAreaClass = input('selection-area', ...(ngDevMode ? [{ debugName: "selectionAreaClass" }] : /* istanbul ignore next */ []));
+    /**
+     * List of CSS class names to ignore when starting selection.
+     * If the mousedown target or any of its ancestors (via closest) contains any of
+     * these classes, the selection will NOT start. Class names can be provided with
+     * or without leading dot (e.g., 'toolbar-button' or '.toolbar-button').
+     */
+    ignoreClasses = input(['.block-controls'], ...(ngDevMode ? [{ debugName: "ignoreClasses" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    host = this.elRef.nativeElement;
+    selection = null;
+    // Track only blockIds we toggled via drag selection to avoid interfering with other selection sources
+    selectedSet = new Set();
+    constructor() {
+        if (isPlatformBrowser(this._platformId)) {
+            this.selection = new SelectionArea({
+                selectables: [this.blockSelector()],
+                boundaries: [this.host],
+                container: this.host,
+                features: {
+                    touch: false,
+                    range: true,
+                    deselectOnBlur: true,
+                    singleTap: {
+                        allow: true,
+                        intersect: 'native'
+                    }
+                },
+                selectionAreaClass: this.selectionAreaClass()
+            }).on('beforestart', ({ event }) => {
+                const targetEl = event?.target;
+                if (this.isInIgnoredArea(targetEl) || targetEl?.closest(this.blockSelector())) {
+                    return false;
+                }
+                if (event) {
+                    event.preventDefault();
+                }
+                return true;
+            }).on('stop', () => {
+                this.contentBuilder.isSelectionOfBlocksActive.set(false);
+            }).on('start', ({ store, event }) => {
+                this.contentBuilder.isSelectionOfBlocksActive.set(true);
+                const activeElement = this.document.activeElement;
+                if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable)) {
+                    activeElement.blur();
+                }
+                this.host.focus();
+                if (event && !event.ctrlKey && !event.metaKey) {
+                    this.contentBuilder.unselectSelectedBlocks();
+                    this.selectedSet.clear();
+                }
+            }).on('move', ({ store: { changed: { added, removed } } }) => {
+                added.forEach(el => {
+                    const blockEl = el.closest('.block');
+                    const blockId = blockEl?.getAttribute('data-block-id');
+                    if (blockId) {
+                        this.contentBuilder.selectBlock(blockId, true);
+                        this.selectedSet.add(blockId);
+                    }
+                });
+                removed.forEach(el => {
+                    const blockEl = el.closest('.block');
+                    const blockId = blockEl?.getAttribute('data-block-id');
+                    if (blockId && this.selectedSet.has(blockId)) {
+                        this.contentBuilder.unselectBlock(blockId);
+                        this.selectedSet.delete(blockId);
+                    }
+                });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.selection?.destroy();
+    }
+    isInIgnoredArea(target) {
+        const list = this.ignoreClasses();
+        if (!target || !Array.isArray(list) || list.length === 0)
+            return false;
+        const normalized = list
+            .map(c => (c ?? '').toString().trim())
+            .filter(Boolean)
+            .map(c => c.startsWith('.') ? c.slice(1) : c);
+        if (normalized.length === 0)
+            return false;
+        let el = target;
+        // Traverse up through ancestors to emulate "closest" semantics for class names
+        while (el) {
+            for (const cls of normalized) {
+                if (el.classList && el.classList.contains(cls))
+                    return true;
+            }
+            el = el.parentElement;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: BlockSelectionDirective, isStandalone: true, selector: "[ngsBlockSelection]", inputs: { blockSelector: { classPropertyName: "blockSelector", publicName: "blockSelector", isSignal: true, isRequired: false, transformFunction: null }, autoScrollContainerSelector: { classPropertyName: "autoScrollContainerSelector", publicName: "autoScrollContainerSelector", isSignal: true, isRequired: false, transformFunction: null }, selectionAreaClass: { classPropertyName: "selectionAreaClass", publicName: "selectionAreaClass", isSignal: true, isRequired: false, transformFunction: null }, ignoreClasses: { classPropertyName: "ignoreClasses", publicName: "ignoreClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BlockSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBlockSelection]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { blockSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockSelector", required: false }] }], autoScrollContainerSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollContainerSelector", required: false }] }], selectionAreaClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionAreaClass", required: false }] }], ignoreClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreClasses", required: false }] }] } });
+
+class ContentBuilderComponent {
+    _platformId = inject(PLATFORM_ID);
+    _store = inject(ContentBuilderStore);
+    elRef = inject((ElementRef));
+    envInjector = inject(EnvironmentInjector);
+    cdr = inject(ChangeDetectorRef);
+    confirmManager = inject(ConfirmManager);
+    _resolvedScrollContainer = null;
+    _scrollEffect;
+    _scrollSubject = new Subject();
+    _scrollBindSub = null;
+    _scroll$ = null;
+    get scrollContainerScrolled() {
+        if (!this._scroll$) {
+            this._scroll$ = this._scrollSubject.asObservable().pipe(shareReplay(1));
+        }
+        return this._scroll$;
+    }
+    blockDefs = signal([
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-divider-block.component-C_iRTCPH.mjs').then(c => c.DividerBlockComponent),
+            type: 'divider',
+            options: {},
+            empty: () => {
+                return {
+                    content: null,
+                    settings: {}
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-paragraph-block.component-C9bQvDYU.mjs').then(c => c.ParagraphBlockComponent),
+            type: 'paragraph',
+            options: {},
+            empty: () => {
+                return {
+                    content: '',
+                    props: [],
+                    settings: {}
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-code-block.component-Bk6QTli8.mjs').then(c => c.CodeBlockComponent),
+            type: 'code',
+            options: {},
+            empty: () => {
+                return {
+                    content: '',
+                    settings: {
+                        language: 'none',
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-heading-block.component-D9_CxTY1.mjs').then(c => c.HeadingBlockComponent),
+            type: 'heading',
+            options: {},
+            empty: () => {
+                return {
+                    content: '',
+                    props: [],
+                    settings: {
+                        level: 2
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-image-block.component-B4zJyUg1.mjs').then(c => c.ImageBlockComponent),
+            type: 'image',
+            options: {
+                uploadFn: (file, base64) => {
+                    return new Promise((resolve) => {
+                        resolve(base64);
+                    });
+                }
+            },
+            empty: () => {
+                return {
+                    content: {
+                        src: '',
+                        alt: ''
+                    },
+                    settings: {
+                        alignment: 'center',
+                        width: 'auto',
+                        height: 'auto',
+                        align: 'center',
+                        natualWidth: 'auto',
+                        naturalHeight: 'auto'
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-video-block.component-m4DTihP2.mjs').then(c => c.VideoBlockComponent),
+            type: 'video',
+            options: {
+                uploadFn: (file, base64) => {
+                    return new Promise((resolve) => {
+                        resolve(base64);
+                    });
+                }
+            },
+            empty: () => {
+                return {
+                    content: {
+                        src: '',
+                        caption: '',
+                        orientation: 'landscape'
+                    },
+                    settings: {
+                        alignment: 'center',
+                        width: 'auto',
+                        height: 'auto',
+                        align: 'center',
+                        natualWidth: 'auto',
+                        naturalHeight: 'auto'
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-Cv6wx5Xe.mjs').then(c => c.ListBlockComponent),
+            type: 'bulletList',
+            options: {},
+            empty: () => {
+                return {
+                    content: [],
+                    settings: {
+                        listStyle: 'bullet'
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-Cv6wx5Xe.mjs').then(c => c.ListBlockComponent),
+            type: 'orderedList',
+            options: {},
+            empty: () => {
+                return {
+                    content: [],
+                    settings: {
+                        listStyle: 'ordered'
+                    }
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-table-block.component-DlDh7Fnn.mjs').then(c => c.TableBlockComponent),
+            type: 'table',
+            options: {},
+            empty: () => {
+                return {
+                    content: [
+                        [
+                            {
+                                content: '',
+                                props: [],
+                                styles: {},
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                },
+                            },
+                            {
+                                content: '',
+                                props: [],
+                                styles: {},
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                }
+                            },
+                            {
+                                content: '',
+                                props: [],
+                                styles: {},
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                }
+                            }
+                        ],
+                        [
+                            {
+                                content: '',
+                                props: [],
+                                styles: {},
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                }
+                            },
+                            {
+                                content: '',
+                                props: [],
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                }
+                            },
+                            {
+                                content: '',
+                                props: [],
+                                styles: {},
+                                options: {
+                                    colspan: 1,
+                                    rowspan: 1
+                                }
+                            }
+                        ],
+                    ],
+                    settings: {}
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-quote-block.component-BbHds2r2.mjs').then(c => c.QuoteBlockComponent),
+            type: 'quote',
+            options: {},
+            empty: () => {
+                return {
+                    content: {
+                        cite: {
+                            content: '',
+                            props: []
+                        },
+                        caption: {
+                            content: '',
+                            props: []
+                        }
+                    },
+                    settings: {}
+                };
+            }
+        },
+        {
+            component: () => import('./ngstarter-ui-components-content-editor-embed-block-BbkC_t86.mjs').then(c => c.EmbedBlock),
+            type: 'embed',
+            options: {},
+            empty: () => {
+                return {
+                    content: {
+                        url: '',
+                        type: ''
+                    },
+                    settings: {}
+                };
+            }
+        },
+    ], ...(ngDevMode ? [{ debugName: "blockDefs" }] : /* istanbul ignore next */ []));
+    content = input([], ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    contentChangedDelay = input(500, { ...(ngDevMode ? { debugName: "contentChangedDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    suggestions = input([
+        {
+            type: 'heading',
+            title: 'Headings',
+        },
+        {
+            type: 'item',
+            title: 'Heading 1',
+            description: 'Top-level heading',
+            iconName: 'fluent:text-header-1-24-regular',
+            hotKeys: 'ALT + 1',
+            blockType: 'heading',
+            blockSettings: {
+                level: 1
+            }
+        },
+        {
+            type: 'item',
+            title: 'Heading 2',
+            description: 'Key section heading',
+            iconName: 'fluent:text-header-2-24-regular',
+            hotKeys: 'ALT + 2',
+            blockType: 'heading',
+            blockSettings: {
+                level: 2
+            }
+        },
+        {
+            type: 'item',
+            title: 'Heading 3',
+            description: 'Subsection and group heading',
+            iconName: 'fluent:text-header-3-24-regular',
+            hotKeys: 'ALT + 3',
+            blockType: 'heading',
+            blockSettings: {
+                level: 3
+            }
+        },
+        {
+            type: 'heading',
+            title: 'Basic blocks',
+        },
+        {
+            type: 'item',
+            title: 'Paragraph',
+            description: 'The body of your document',
+            iconName: 'fluent:text-paragraph-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'paragraph',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Numbered List',
+            description: 'List with ordered items',
+            iconName: 'fluent:text-bullet-list-tree-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'orderedList',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Bullet List',
+            description: 'List with unordered items',
+            iconName: 'fluent:text-bullet-list-ltr-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'bulletList',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Quote',
+            description: 'Quote or excerpt',
+            iconName: 'fluent:text-quote-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'quote',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Code',
+            description: 'The code block with syntax highlighting',
+            iconName: 'fluent:code-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'code',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Divider',
+            description: 'Visually divide blocks',
+            iconName: 'fluent:minimize-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'divider',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Table',
+            description: 'Table with editable cells',
+            iconName: 'fluent:table-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'table',
+            blockSettings: {}
+        },
+        {
+            type: 'heading',
+            title: 'Media',
+        },
+        {
+            type: 'item',
+            title: 'Image',
+            description: 'Image with caption',
+            iconName: 'fluent:image-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'image',
+            blockSettings: {}
+        },
+        {
+            type: 'item',
+            title: 'Video',
+            description: 'Video with caption',
+            iconName: 'fluent:video-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'video',
+            blockSettings: {}
+        },
+        {
+            type: 'heading',
+            title: 'Embeds',
+        },
+        {
+            type: 'item',
+            title: 'Embed',
+            description: 'For PDFs, Google Maps and more',
+            iconName: 'fluent:window-24-regular',
+            hotKeys: 'ALT + 0',
+            blockType: 'embed',
+            blockSettings: {
+                width: null,
+                height: null
+            }
+        },
+    ], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    scrollContainer = input(...(ngDevMode ? [undefined, { debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
+    contentChanged = output();
+    focusChanged = new EventEmitter();
+    _content = signal([], ...(ngDevMode ? [{ debugName: "_content" }] : /* istanbul ignore next */ []));
+    blockDefsMap = new Map();
+    blockDefsOptionsMap = new Map();
+    _blockDragging = signal(false, ...(ngDevMode ? [{ debugName: "_blockDragging" }] : /* istanbul ignore next */ []));
+    isSelectionOfBlocksActive = signal(false, ...(ngDevMode ? [{ debugName: "isSelectionOfBlocksActive" }] : /* istanbul ignore next */ []));
+    _oldContent = signal({}, ...(ngDevMode ? [{ debugName: "_oldContent" }] : /* istanbul ignore next */ []));
+    selectedBlocksModel = new SelectionModel(true);
+    commandBar = CommandBarComponent;
+    get api() {
+        return {
+            focusChanged: new EventEmitter(),
+        };
+    }
+    // Build helper maps: component map and merged options map
+    buildBlockDefMaps() {
+        const overrides = this.options() || {};
+        this.blockDefsMap = new Map();
+        this.blockDefsOptionsMap = new Map();
+        this.blockDefs().forEach((def) => {
+            if (!this.blockDefsMap.has(def.type)) {
+                this.blockDefsMap.set(def.type, def.component());
+            }
+            const merged = {
+                ...(def.options || {}),
+                ...(overrides[def.type] || {})
+            };
+            this.blockDefsOptionsMap.set(def.type, merged);
+        });
+    }
+    getBlockDefOption(type, key) {
+        return this.blockDefsOptionsMap.get(type)[key];
+    }
+    ngOnInit() {
+        const content = this.content();
+        if (content.length > 0) {
+            const lastItem = content[content.length - 1];
+            if (lastItem.type !== 'paragraph' || (lastItem.type === 'paragraph' && lastItem.content !== '')) {
+                content.push(this._createBlock('paragraph'));
+            }
+        }
+        else {
+            content.push(this._createBlock('paragraph'));
+        }
+        this._content.set(content);
+        this._oldContent.set(this._content());
+        // Build block component map and merged options map
+        this.buildBlockDefMaps();
+        this._store.setBlocks(JSON.parse(JSON.stringify(content)));
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        if (content.length === 1) {
+            this.focusBlock(content[0].id);
+        }
+    }
+    ngAfterViewInit() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        // Initial resolve after view init
+        this._resolvedScrollContainer = this._computeScrollContainer();
+        // Привязываем подписку на скролл к текущему контейнеру
+        this._rebindScrollListener();
+        // Watch for changes of the input selector and recompute when it changes.
+        // Create the signal effect within a valid injection context to satisfy Angular's requirement.
+        runInInjectionContext(this.envInjector, () => {
+            this._scrollEffect = effect(() => {
+                const _selector = this.scrollContainer();
+                this._resolvedScrollContainer = this._computeScrollContainer();
+                // Перепривязка слушателя при смене контейнера
+                this._rebindScrollListener();
+            }, ...(ngDevMode ? [{ debugName: "_scrollEffect" }] : /* istanbul ignore next */ []));
+        });
+    }
+    /**
+     * Public accessor for the resolved scroll container. If not computed yet, it will compute now.
+     */
+    getScrollContainer() {
+        if (isPlatformServer(this._platformId)) {
+            return {};
+        }
+        if (!this._resolvedScrollContainer) {
+            this._resolvedScrollContainer = this._computeScrollContainer();
+        }
+        return this._resolvedScrollContainer || window;
+    }
+    /**
+     * Resolves the scroll container element according to the following rules:
+     * - If `scrollContainer` input is provided, uses `closest(selector)` starting from the host element.
+     * - If not provided or `closest` returned null, automatically finds the first scrollable parent by walking up the DOM.
+     * - Fallback to `document.scrollingElement` or `window` if nothing suitable found.
+     */
+    _computeScrollContainer() {
+        if (isPlatformServer(this._platformId)) {
+            return null;
+        }
+        const host = this.elRef?.nativeElement;
+        if (!host) {
+            return (document.scrollingElement || window);
+        }
+        const selector = this.scrollContainer();
+        if (selector && typeof selector === 'string') {
+            try {
+                const matched = host.closest(selector);
+                if (matched) {
+                    return matched;
+                }
+            }
+            catch (_) {
+                // If selector is invalid, ignore and fallback to auto detection
+            }
+        }
+        // Auto-detect by traversing parents
+        let parent = host.parentElement;
+        while (parent) {
+            if (this._isElementScrollable(parent)) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return (document.scrollingElement || window);
+    }
+    _isElementScrollable(el) {
+        const style = getComputedStyle(el);
+        const overflowY = style.overflowY;
+        const overflowX = style.overflowX;
+        const canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && el.scrollHeight > el.clientHeight;
+        const canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') && el.scrollWidth > el.clientWidth;
+        return canScrollY || canScrollX;
+    }
+    _rebindScrollListener() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        // Отписываемся от предыдущего контейнера, если был
+        if (this._scrollBindSub) {
+            try {
+                this._scrollBindSub.unsubscribe();
+            }
+            catch {
+            }
+            this._scrollBindSub = null;
+        }
+        const container = this._resolvedScrollContainer ?? this._computeScrollContainer();
+        if (!container) {
+            return;
+        }
+        // Формируем источник скролла
+        const getTop = () => {
+            if (container instanceof Window) {
+                return container.scrollY || container.pageYOffset || 0;
+            }
+            return container.scrollTop || 0;
+        };
+        const source$ = fromEvent(container, 'scroll').pipe(auditTime(50), map(() => getTop()), startWith(getTop()), distinctUntilChanged());
+        // Подписка: проксируем значения в общий Subject
+        this._scrollBindSub = source$.subscribe(top => {
+            this._scrollSubject.next(top);
+        });
+    }
+    // удалён дубликат ngOnDestroy — см. реализацию в конце класса
+    appendBlock(type, focus = true) {
+        this.insertBlock(type, this._content().length, {}, focus);
+    }
+    insertBlock(type, index, options, focus = true, content) {
+        const isLastIndex = index === this._content().length;
+        const newBlock = this._createBlock(type, options, content);
+        if (focus) {
+            this.focusBlock(newBlock.id);
+        }
+        this._content.update((data) => {
+            return [...data.slice(0, index), newBlock, ...data.slice(index)];
+        });
+        this._store.addBlock(newBlock, index);
+        if (isLastIndex && this._content()[index].type !== 'paragraph') {
+            this.appendBlock('paragraph', false);
+        }
+        this.emitContentChangeEvent();
+        return newBlock;
+    }
+    _createBlock(type, settings = {}, content) {
+        const blockDef = this.blockDefs().find(blockDefItem => blockDefItem.type === type);
+        const empty = blockDef.empty();
+        if (settings) {
+            empty.settings = {
+                ...empty.settings,
+                ...settings
+            };
+        }
+        if (content !== undefined) {
+            empty.content = content;
+        }
+        return {
+            id: v7(),
+            type: blockDef.type,
+            isEmpty: content === undefined || content === '' || (Array.isArray(content) && content.length === 0),
+            ...empty
+        };
+    }
+    addBlock(type, options, index = -1) {
+        if (index === -1) {
+            if (this._store.activeBlockId()) {
+                index = this._content().findIndex(dataBlock => dataBlock.id === this._store.activeBlockId()) + 1;
+            }
+            else {
+                index = this._content().length;
+            }
+        }
+        this.insertBlock(type, index, options);
+    }
+    duplicateBlock(blockId) {
+        const index = this._content().findIndex(dataBlock => dataBlock.id === blockId);
+        if (index === -1) {
+            return;
+        }
+        const original = this._content()[index];
+        // Deep clone mutable fields to avoid shared references
+        const clonedContent = original.content != null ? JSON.parse(JSON.stringify(original.content)) : original.content;
+        const clonedSettings = original.settings != null ? JSON.parse(JSON.stringify(original.settings)) : original.settings;
+        const clonedProps = original.props != null ? JSON.parse(JSON.stringify(original.props)) : original.props;
+        const duplicated = {
+            ...original,
+            id: v7(),
+            isEmpty: false,
+            content: clonedContent,
+            settings: clonedSettings,
+            props: clonedProps,
+        };
+        const insertIndex = index + 1;
+        this._content.update((data) => {
+            data.splice(insertIndex, 0, duplicated);
+            return data;
+        });
+        this._store.addBlock(duplicated, insertIndex);
+        this.focusBlock(duplicated.id);
+        this.emitContentChangeEvent();
+    }
+    duplicateSelectedBlocks(popover) {
+        const selectedIds = [...this.selectedBlocksModel.selected];
+        if (!selectedIds.length)
+            return;
+        // Process in visual order (top to bottom)
+        const ordered = selectedIds
+            .map(id => ({ id, index: this._content().findIndex(b => b.id === id) }))
+            .filter(x => x.index !== -1)
+            .sort((a, b) => a.index - b.index)
+            .map(x => x.id);
+        const newIds = [];
+        for (const id of ordered) {
+            // Get current index of the original before duplicating
+            const idx = this._content().findIndex(b => b.id === id);
+            if (idx === -1)
+                continue;
+            this.duplicateBlock(id);
+            // After duplication, the new block is placed right after the original
+            const newBlock = this._content()[idx + 1];
+            if (newBlock) {
+                newIds.push(newBlock.id);
+            }
+        }
+        // Select duplicated blocks
+        this.selectedBlocksModel.clear();
+        if (newIds.length) {
+            this.selectedBlocksModel.select(...newIds);
+        }
+        this.cdr.markForCheck();
+    }
+    deleteBlock(blockId) {
+        if (this._content().length === 1) {
+            return;
+        }
+        const index = this._content().findIndex(dataBlock => dataBlock.id === blockId);
+        if (index !== -1) {
+            this._content.update(data => {
+                data.splice(index, 1);
+                return data;
+            });
+            this._store.deleteBlock(blockId, index);
+            const prevBlock = this._content()[index - 1];
+            if (prevBlock) {
+                this.focusBlock(prevBlock.id);
+            }
+            this.emitContentChangeEvent();
+        }
+    }
+    setBlockProps(id, props) {
+        const data = this._content();
+        const index = data.findIndex((dataBlock) => dataBlock.id === id);
+        data[index].props = props;
+        this.emitContentChangeEvent();
+    }
+    insertEmptyBlock(index) {
+        this.insertBlock('paragraph', index + 1);
+        this.emitContentChangeEvent();
+    }
+    focusBlock(id) {
+        this._store.setFocusedBlockId(id);
+        this.focusChanged.emit();
+    }
+    isBlockFocused(id) {
+        return this._store.focusedBlockId() === id;
+    }
+    isActiveBlock(id) {
+        return this._store.activeBlockId() === id;
+    }
+    drop(event) {
+        moveItemInArray(this._content(), event.previousIndex, event.currentIndex);
+        this._store.moveBlock(event.previousIndex, event.currentIndex);
+        this.emitContentChangeEvent();
+    }
+    onTagSelected(tagName) {
+        // console.log('Tag selected event received:', tagName);
+    }
+    getData() {
+        return this._store.blocks();
+    }
+    emitContentChangeEvent() {
+        this.contentChanged.emit(this.getData());
+    }
+    selectBlock(blockId, multiple = false) {
+        if (!multiple) {
+            this.selectedBlocksModel.clear();
+        }
+        this.selectedBlocksModel.select(blockId);
+        this.cdr.markForCheck();
+    }
+    unselectBlock(blockId) {
+        this.selectedBlocksModel.deselect(blockId);
+        this.cdr.markForCheck();
+    }
+    unselectSelectedBlocks() {
+        this.selectedBlocksModel.clear();
+        this.cdr.markForCheck();
+    }
+    isBlockSelected(blockId) {
+        return this.selectedBlocksModel.isSelected(blockId);
+    }
+    deleteSelectedBlocks(popover) {
+        const selectedIds = [...this.selectedBlocksModel.selected];
+        if (!selectedIds.length) {
+            return;
+        }
+        const confirmRef = this.confirmManager.open({
+            title: 'Delete blocks',
+            description: 'This action cannot be undone. Selected blocks will be deleted.'
+        });
+        confirmRef.confirmed.subscribe(() => {
+            // Delete from bottom to top to keep indexes stable
+            const toDelete = selectedIds
+                .map(id => ({ id, index: this._content().findIndex(b => b.id === id) }))
+                .filter(x => x.index !== -1)
+                .sort((a, b) => b.index - a.index);
+            for (const item of toDelete) {
+                this.deleteBlock(item.id);
+            }
+            this.unselectSelectedBlocks();
+        });
+    }
+    _onKeyDown(event) {
+        if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedBlocksModel.hasValue()) {
+            const target = event.target;
+            const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+            // If we are in an input/contenteditable, only delete if multiple blocks are selected
+            // or if it's not a Backspace (to avoid deleting text while trying to delete blocks)
+            // Actually, if blocks are selected, they usually have a blue background and the user intent is likely to delete blocks.
+            // But if there's only ONE block selected AND we are typing in it, we probably want to delete text.
+            if (isInput && this.selectedBlocksModel.selected.length === 1) {
+                // Let the default behavior happen for text editing
+                return;
+            }
+            event.preventDefault();
+            this.deleteSelectedBlocks();
+        }
+    }
+    onDragStarted(event, block) {
+        this._blockDragging.set(true);
+    }
+    onDragEnded(event, block) {
+        this._blockDragging.set(false);
+    }
+    addBlockFromSuggestionMenu(suggestionsMenu, type, options) {
+        suggestionsMenu.closed.emit('click');
+        this.addBlock(type, options);
+    }
+    preventMenuClose(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    setActiveBlockId(event, id) {
+        event.stopPropagation();
+        event.preventDefault();
+        this._store.setActiveBlockId(id);
+        this._store.setFocusedBlockId(id);
+        this.focusChanged.emit();
+    }
+    onFocusChange(origin, dataBlock) {
+    }
+    onSuggestionsMenuOpen() {
+    }
+    onSuggestionsMenuClose(reason) {
+        if (!reason) {
+            this._store.setFocusedBlockId(this._store.activeBlockId());
+            this.focusChanged.emit();
+        }
+        // need some delay to prevent the flickering
+        setTimeout(() => this._store.setActiveBlockId(null), 250);
+    }
+    ngOnDestroy() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        if (this._scrollBindSub) {
+            try {
+                this._scrollBindSub.unsubscribe();
+            }
+            catch {
+            }
+            this._scrollBindSub = null;
+        }
+        if (this._scrollEffect) {
+            try {
+                this._scrollEffect.destroy();
+            }
+            catch {
+            }
+            this._scrollEffect = undefined;
+        }
+        try {
+            this._scrollSubject.complete();
+        }
+        catch {
+        }
+        this._scroll$ = null;
+    }
+    onSettingsPopoverClose() {
+    }
+    _onPaste(event) {
+        const target = event.target;
+        const isInsideCodeBlock = target.closest('.ngs-code-block') ||
+            target.closest('.cm-editor') ||
+            target.closest('.cm-content') ||
+            target.classList.contains('cm-content') ||
+            target.classList.contains('cm-line');
+        if (isInsideCodeBlock) {
+            return;
+        }
+        const html = event.clipboardData?.getData('text/html');
+        const text = event.clipboardData?.getData('text/plain');
+        if (!html && !text) {
+            return;
+        }
+        // Check if we are pasting into a block that should handle its own paste (like code block)
+        // but might not have been caught by target.closest if it's currently empty or has different structure.
+        const activeBlockId = this._store.activeBlockId() || this._store.focusedBlockId();
+        if (activeBlockId) {
+            const activeBlock = this._content().find(b => b.id === activeBlockId);
+            if (activeBlock?.type === 'code') {
+                return;
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        let index = this._content().length;
+        if (activeBlockId) {
+            const activeIndex = this._content().findIndex(b => b.id === activeBlockId);
+            if (activeIndex !== -1) {
+                index = activeIndex + 1;
+            }
+        }
+        if (html) {
+            this._handleHtmlPaste(html, index);
+        }
+        else if (text) {
+            this._handleTextPaste(text, index);
+        }
+    }
+    _handleTextPaste(text, index) {
+        const lines = text.split(/\r?\n/);
+        if (lines.length === 1) {
+            this.insertBlock('paragraph', index, {}, false, text);
+        }
+        else {
+            // If it looks like code (has indentation or common code characters), insert as a single code block
+            const isCodeLike = text.includes('{') || text.includes('}') || text.includes(';') || text.includes('  ') || text.includes('\t');
+            if (isCodeLike) {
+                this.insertBlock('code', index, { language: 'none' }, false, text);
+                return;
+            }
+            lines.forEach((line, i) => {
+                if (line.trim().length > 0) {
+                    this.insertBlock('paragraph', index + i, {}, false, line);
+                }
+            });
+        }
+    }
+    _handleHtmlPaste(html, index) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const body = doc.body;
+        let currentIndex = index;
+        Array.from(body.children).forEach(node => {
+            const block = this._mapNodeToBlock(node);
+            if (block) {
+                this.insertBlock(block.type, currentIndex, block.settings, false, block.content);
+                currentIndex++;
+            }
+        });
+    }
+    _mapNodeToBlock(node) {
+        const tag = node.tagName.toLowerCase();
+        switch (tag) {
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+                return {
+                    type: 'heading',
+                    settings: { level: parseInt(tag.substring(1)) },
+                    content: node.innerHTML
+                };
+            case 'p':
+                return {
+                    type: 'paragraph',
+                    settings: {},
+                    content: node.innerHTML
+                };
+            case 'ul':
+                return {
+                    type: 'bulletList',
+                    settings: { listStyle: 'bullet' },
+                    content: this._mapListItems(node)
+                };
+            case 'ol':
+                return {
+                    type: 'orderedList',
+                    settings: { listStyle: 'ordered' },
+                    content: this._mapListItems(node)
+                };
+            case 'img':
+                return {
+                    type: 'image',
+                    settings: {},
+                    content: {
+                        src: node.getAttribute('src') || '',
+                        alt: node.getAttribute('alt') || ''
+                    }
+                };
+            case 'video':
+                return {
+                    type: 'video',
+                    settings: {},
+                    content: {
+                        src: node.getAttribute('src') || '',
+                        caption: node.getAttribute('title') || ''
+                    }
+                };
+            case 'blockquote':
+                return {
+                    type: 'quote',
+                    settings: {},
+                    content: node.innerHTML
+                };
+            case 'pre':
+                const codeNode = node.querySelector('code');
+                const content = (codeNode || node).textContent || '';
+                return {
+                    type: 'code',
+                    settings: { language: 'none' },
+                    content: content.replace(/\r\n/g, '\n').replace(/\r/g, '\n').trimEnd()
+                };
+            case 'hr':
+                return {
+                    type: 'divider',
+                    settings: {}
+                };
+            default:
+                if (node.textContent?.trim()) {
+                    return {
+                        type: 'paragraph',
+                        settings: {},
+                        content: node.innerHTML
+                    };
+                }
+                return null;
+        }
+    }
+    _mapListItems(node) {
+        return Array.from(node.children)
+            .filter(child => child.tagName.toLowerCase() === 'li')
+            .map(li => ({
+            content: li.innerHTML,
+            children: []
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentBuilderComponent, isStandalone: true, selector: "ngs-content-builder", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentChangedDelay: { classPropertyName: "contentChangedDelay", publicName: "contentChangedDelay", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, scrollContainer: { classPropertyName: "scrollContainer", publicName: "scrollContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChanged: "contentChanged" }, host: { attributes: { "tabindex": "0" }, listeners: { "paste": "_onPaste($event)", "keydown": "_onKeyDown($event)" }, properties: { "class.is-block-dragging": "_blockDragging()", "class.is-selection-of-blocks-active": "isSelectionOfBlocksActive()", "class.select-none": "isSelectionOfBlocksActive()", "style.user-select": "isSelectionOfBlocksActive() ? \"none\" : null" }, classAttribute: "ngs-content-builder" }, providers: [
+            ContentBuilderStore,
+            {
+                provide: CONTENT_BUILDER,
+                useExisting: forwardRef(() => ContentBuilderComponent)
+            }
+        ], exportAs: ["ngsContentBuilder"], hostDirectives: [{ directive: BlockSelectionDirective, inputs: ["autoScrollContainerSelector", "autoScrollContainerSelector"] }], ngImport: i0, template: "<div class=\"container py-4\">\n  <div class=\"content\"\n       cdkDropList\n       ngsTextSelectionPopup\n       closestContentObserverClass=\"ngs-content-editor-content-editable\"\n       [targetComponent]=\"commandBar\"\n       (tagSelected)=\"onTagSelected($event)\"\n       (cdkDropListDropped)=\"drop($event)\">\n    @for (contentBlock of _content(); track contentBlock.id) {\n      <div class=\"block\"\n           [attr.data-block-id]=\"contentBlock.id\"\n           [class.is-focused]=\"isBlockFocused(contentBlock.id)\"\n           [class.is-active]=\"isActiveBlock(contentBlock.id)\"\n           cdkDrag\n           cdkDragLockAxis=\"y\"\n           cdkMonitorSubtreeFocus\n           (cdkDragStarted)=\"onDragStarted($event, contentBlock)\"\n           (cdkDragEnded)=\"onDragEnded($event, contentBlock)\"\n           (cdkFocusChange)=\"onFocusChange($event, contentBlock)\">\n        <div class=\"block-controls\" [class.is-settings-popover-open]=\"settingsTrigger.api.isOpen()\">\n          <button class=\"block-control\">\n            <ngs-icon name=\"fluent:add-24-regular\"\n                      (mousedown)=\"setActiveBlockId($event, contentBlock.id)\"\n                      [ngsMenuTriggerFor]=\"suggestionsMenu\"\n                      [ngsMenuTriggerRestoreFocus]=\"false\"\n                      (menuOpened)=\"onSuggestionsMenuOpen()\"\n                      (menuClosed)=\"onSuggestionsMenuClose($event)\"/>\n          </button>\n          <div class=\"block-control block-control-drag\"\n               (click)=\"selectBlock(contentBlock.id)\"\n               [ngsPopoverTriggerFor]=\"settingsPopover\"\n               (closed)=\"onSettingsPopoverClose()\"\n               #settingsTrigger=\"ngsPopoverTriggerFor\"\n               hasBackdrop\n               position=\"before-center\">\n            <button cdkDragHandle\n                    trigger=\"hover\"\n                    closeOnOriginClick\n                    closeOnOriginMouseLeave\n                    #dragTrigger=\"ngsPopoverTriggerFor\"\n                    [ngsPopoverTriggerFor]=\"dragControlTooltip\"\n                    position=\"below-center\"\n                    (mousedown)=\"dragTrigger.api.close()\"\n                    delay=\"1000\" class=\"w-full h-full flex items-center justify-center\">\n              <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n            </button>\n          </div>\n          <ng-template #dragControlTooltip>\n            <div class=\"bg-neutral-900 text-xs flex flex-col gap-0.5 rounded-lg items-center px-2 py-1.5 font-medium\">\n              <div>\n                <div class=\"text-neutral-100\">Drag <span class=\"text-neutral-400\">to move</span></div>\n              </div>\n              <div>\n                <div class=\"text-neutral-100\">Click <span class=\"text-neutral-400\">to open menu</span></div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n        <div class=\"block-content\" [class.is-selected]=\"isBlockSelected(contentBlock.id)\">\n          <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n          <ng-container [ngComponentOutlet]=\"blockDefsMap.get(contentBlock.type) | async\"\n                        [ngComponentOutletInputs]=\"{\n                          id: contentBlock.id,\n                          content: contentBlock.content,\n                          settings: contentBlock.settings,\n                          index: $index\n                        }\"/>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngs-popover #settingsPopover=\"ngsPopover\">\n  <div class=\"px-2 py-0 w-72 settings-popover\">\n    <ngs-list>\n      <ngs-list-item (click)=\"duplicateSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:copy-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Duplicate</div>\n      </ngs-list-item>\n      <ngs-list-item (click)=\"deleteSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:delete-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Delete</div>\n      </ngs-list-item>\n    </ngs-list>\n  </div>\n</ngs-popover>\n\n<ngs-menu #suggestionsMenu=\"ngsMenu\">\n  <div (click)=\"preventMenuClose($event)\">\n    @for (suggestionItem of suggestions(); track $index; let first = $first) {\n      @switch (suggestionItem.type) {\n        @case ('heading') {\n          <ngs-menu-heading>{{ suggestionItem.title }}</ngs-menu-heading>\n        }\n        @case ('item') {\n          <button ngs-menu-item (click)=\"addBlockFromSuggestionMenu(suggestionsMenu, suggestionItem.blockType, suggestionItem.blockOptions)\">\n            <div class=\"h-full flex items-center gap-3 py-2\">\n              <div class=\"size-9 flex items-center rounded-lg justify-center bg-surface-container\">\n                <ngs-icon [name]=\"suggestionItem.iconName\" class=\"!me-0\"/>\n              </div>\n              <div class=\"grow min-w-[200px]\">\n                <div>{{ suggestionItem.title }}</div>\n                <div class=\"text-2xs text-neutral-500\">{{ suggestionItem.description }}</div>\n              </div>\n              @if (suggestionItem.hotKeys) {\n                <div class=\"ms-auto bg-surface-container-highest rounded-full h-5\n                  text-4xs px-2 flex items-center font-bold\">{{ suggestionItem.hotKeys }}</div>\n              }\n            </div>\n          </button>\n        }\n      }\n    }\n  </div>\n</ngs-menu>\n", styles: [":host{--ngs-content-builder-content-width: 704px;outline:none}:host ::ng-deep .link-selection,:host ::ng-deep .text-selection{display:inline-block;background:var(--color-secondary-fixed)}:host.is-block-dragging{cursor:grabbing}:host .container{display:flex;width:820px;min-height:200px;height:100%;padding:calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) 0;margin:0 auto;outline:none}:host .content{flex-grow:1;width:calc(var(--ngs-content-builder-content-width) + calc(var(--spacing, .25rem) * 10))}:host .block{position:relative;flex:none;padding:calc(var(--spacing, .25rem) * 1) 0;display:flex;align-items:center}:host .block:not(:has(.block-content.is-selected)):hover .block-content{background:var(--color-neutral-50)}:host:not(.is-block-dragging) .block:hover .block-controls,:host:not(.is-block-dragging) .block.is-active .block-controls{opacity:1}:host .block-content{position:relative;flex-grow:1;padding:calc(var(--spacing, .25rem) * 3)}:host .block-content.is-selected{background:var(--color-primary-100)}:host ::ng-deep .selection-area{background:var(--color-primary-100);opacity:.4;border:1px solid var(--color-primary);border-radius:.25rem}:host ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:text;user-select:text}:host.select-none ::ng-deep .ngs-content-editor-content-editable,:host.is-selection-of-blocks-active ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:none!important;user-select:none!important}:host .block-controls{left:0;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2);opacity:0;flex:none}:host .block-controls.is-settings-popover-open{opacity:1}:host .block-controls.is-settings-popover-open .block-control:not(.block-control-drag){opacity:0}:host .block-control{cursor:pointer;width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--color-surface-container-low);color:var(--color-on-surface)}:host .block-control-drag button{cursor:grab}:host .drag-placeholder{height:calc(var(--spacing, .25rem) * 8);flex:none;position:relative}:host .drag-placeholder:before{position:absolute;left:calc(var(--spacing, .25rem) * 18);display:block;right:0;content:\"\";height:calc(var(--spacing, .25rem) * 2);top:50%;transform:translateY(-50%);background:var(--color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2)}.cdk-drag.cdk-drag-preview .block-control{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;cursor:grabbing}.cdk-drag.cdk-drag-preview .block-control:first-child{opacity:0}.cdk-drag.cdk-drag-preview .block-control:last-child{color:var(--color-on-surface)}.cdk-drag.cdk-drag-preview .block-content{opacity:0}.settings-popover{--ngs-list-list-item-one-line-container-height: calc(var(--spacing, .25rem) * 10)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { 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: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: TextSelectionPopupDirective, selector: "[ngsTextSelectionPopup]", inputs: ["targetComponent", "closestContentObserverClass"], outputs: ["tagSelected"] }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: ListItemTitle, selector: "[ngsListItemTitle]" }, { kind: "directive", type: ListItemIcon, selector: "[ngsListItemIcon]" }, { kind: "component", type: ListItem, selector: "ngs-list-item, a[ngs-list-item], button[ngs-list-item]", inputs: ["disabled", "lines"], exportAs: ["ngsListItem"] }, { kind: "component", type: List, selector: "ngs-list", inputs: ["disabled", "disableRipple"], exportAs: ["ngsList"] }, { kind: "component", type: MenuHeading, selector: "ngs-menu-heading" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-builder', exportAs: 'ngsContentBuilder', imports: [
+                        Icon,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        CdkDrag,
+                        CdkDropList,
+                        CdkDragHandle,
+                        CdkDragPlaceholder,
+                        Menu,
+                        MenuItem,
+                        MenuTrigger,
+                        CdkMonitorFocus,
+                        TextSelectionPopupDirective,
+                        PopoverTriggerForDirective,
+                        Popover,
+                        ListItemTitle,
+                        ListItemIcon,
+                        ListItem,
+                        List,
+                        MenuHeading
+                    ], hostDirectives: [
+                        {
+                            directive: BlockSelectionDirective,
+                            inputs: [
+                                'autoScrollContainerSelector',
+                            ]
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        ContentBuilderStore,
+                        {
+                            provide: CONTENT_BUILDER,
+                            useExisting: forwardRef(() => ContentBuilderComponent)
+                        }
+                    ], host: {
+                        'class': 'ngs-content-builder',
+                        '[class.is-block-dragging]': '_blockDragging()',
+                        '[class.is-selection-of-blocks-active]': 'isSelectionOfBlocksActive()',
+                        '[class.select-none]': 'isSelectionOfBlocksActive()',
+                        '[style.user-select]': 'isSelectionOfBlocksActive() ? "none" : null',
+                        'tabindex': '0',
+                        '(paste)': '_onPaste($event)',
+                        '(keydown)': '_onKeyDown($event)',
+                    }, template: "<div class=\"container py-4\">\n  <div class=\"content\"\n       cdkDropList\n       ngsTextSelectionPopup\n       closestContentObserverClass=\"ngs-content-editor-content-editable\"\n       [targetComponent]=\"commandBar\"\n       (tagSelected)=\"onTagSelected($event)\"\n       (cdkDropListDropped)=\"drop($event)\">\n    @for (contentBlock of _content(); track contentBlock.id) {\n      <div class=\"block\"\n           [attr.data-block-id]=\"contentBlock.id\"\n           [class.is-focused]=\"isBlockFocused(contentBlock.id)\"\n           [class.is-active]=\"isActiveBlock(contentBlock.id)\"\n           cdkDrag\n           cdkDragLockAxis=\"y\"\n           cdkMonitorSubtreeFocus\n           (cdkDragStarted)=\"onDragStarted($event, contentBlock)\"\n           (cdkDragEnded)=\"onDragEnded($event, contentBlock)\"\n           (cdkFocusChange)=\"onFocusChange($event, contentBlock)\">\n        <div class=\"block-controls\" [class.is-settings-popover-open]=\"settingsTrigger.api.isOpen()\">\n          <button class=\"block-control\">\n            <ngs-icon name=\"fluent:add-24-regular\"\n                      (mousedown)=\"setActiveBlockId($event, contentBlock.id)\"\n                      [ngsMenuTriggerFor]=\"suggestionsMenu\"\n                      [ngsMenuTriggerRestoreFocus]=\"false\"\n                      (menuOpened)=\"onSuggestionsMenuOpen()\"\n                      (menuClosed)=\"onSuggestionsMenuClose($event)\"/>\n          </button>\n          <div class=\"block-control block-control-drag\"\n               (click)=\"selectBlock(contentBlock.id)\"\n               [ngsPopoverTriggerFor]=\"settingsPopover\"\n               (closed)=\"onSettingsPopoverClose()\"\n               #settingsTrigger=\"ngsPopoverTriggerFor\"\n               hasBackdrop\n               position=\"before-center\">\n            <button cdkDragHandle\n                    trigger=\"hover\"\n                    closeOnOriginClick\n                    closeOnOriginMouseLeave\n                    #dragTrigger=\"ngsPopoverTriggerFor\"\n                    [ngsPopoverTriggerFor]=\"dragControlTooltip\"\n                    position=\"below-center\"\n                    (mousedown)=\"dragTrigger.api.close()\"\n                    delay=\"1000\" class=\"w-full h-full flex items-center justify-center\">\n              <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n            </button>\n          </div>\n          <ng-template #dragControlTooltip>\n            <div class=\"bg-neutral-900 text-xs flex flex-col gap-0.5 rounded-lg items-center px-2 py-1.5 font-medium\">\n              <div>\n                <div class=\"text-neutral-100\">Drag <span class=\"text-neutral-400\">to move</span></div>\n              </div>\n              <div>\n                <div class=\"text-neutral-100\">Click <span class=\"text-neutral-400\">to open menu</span></div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n        <div class=\"block-content\" [class.is-selected]=\"isBlockSelected(contentBlock.id)\">\n          <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n          <ng-container [ngComponentOutlet]=\"blockDefsMap.get(contentBlock.type) | async\"\n                        [ngComponentOutletInputs]=\"{\n                          id: contentBlock.id,\n                          content: contentBlock.content,\n                          settings: contentBlock.settings,\n                          index: $index\n                        }\"/>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngs-popover #settingsPopover=\"ngsPopover\">\n  <div class=\"px-2 py-0 w-72 settings-popover\">\n    <ngs-list>\n      <ngs-list-item (click)=\"duplicateSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:copy-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Duplicate</div>\n      </ngs-list-item>\n      <ngs-list-item (click)=\"deleteSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:delete-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Delete</div>\n      </ngs-list-item>\n    </ngs-list>\n  </div>\n</ngs-popover>\n\n<ngs-menu #suggestionsMenu=\"ngsMenu\">\n  <div (click)=\"preventMenuClose($event)\">\n    @for (suggestionItem of suggestions(); track $index; let first = $first) {\n      @switch (suggestionItem.type) {\n        @case ('heading') {\n          <ngs-menu-heading>{{ suggestionItem.title }}</ngs-menu-heading>\n        }\n        @case ('item') {\n          <button ngs-menu-item (click)=\"addBlockFromSuggestionMenu(suggestionsMenu, suggestionItem.blockType, suggestionItem.blockOptions)\">\n            <div class=\"h-full flex items-center gap-3 py-2\">\n              <div class=\"size-9 flex items-center rounded-lg justify-center bg-surface-container\">\n                <ngs-icon [name]=\"suggestionItem.iconName\" class=\"!me-0\"/>\n              </div>\n              <div class=\"grow min-w-[200px]\">\n                <div>{{ suggestionItem.title }}</div>\n                <div class=\"text-2xs text-neutral-500\">{{ suggestionItem.description }}</div>\n              </div>\n              @if (suggestionItem.hotKeys) {\n                <div class=\"ms-auto bg-surface-container-highest rounded-full h-5\n                  text-4xs px-2 flex items-center font-bold\">{{ suggestionItem.hotKeys }}</div>\n              }\n            </div>\n          </button>\n        }\n      }\n    }\n  </div>\n</ngs-menu>\n", styles: [":host{--ngs-content-builder-content-width: 704px;outline:none}:host ::ng-deep .link-selection,:host ::ng-deep .text-selection{display:inline-block;background:var(--color-secondary-fixed)}:host.is-block-dragging{cursor:grabbing}:host .container{display:flex;width:820px;min-height:200px;height:100%;padding:calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) 0;margin:0 auto;outline:none}:host .content{flex-grow:1;width:calc(var(--ngs-content-builder-content-width) + calc(var(--spacing, .25rem) * 10))}:host .block{position:relative;flex:none;padding:calc(var(--spacing, .25rem) * 1) 0;display:flex;align-items:center}:host .block:not(:has(.block-content.is-selected)):hover .block-content{background:var(--color-neutral-50)}:host:not(.is-block-dragging) .block:hover .block-controls,:host:not(.is-block-dragging) .block.is-active .block-controls{opacity:1}:host .block-content{position:relative;flex-grow:1;padding:calc(var(--spacing, .25rem) * 3)}:host .block-content.is-selected{background:var(--color-primary-100)}:host ::ng-deep .selection-area{background:var(--color-primary-100);opacity:.4;border:1px solid var(--color-primary);border-radius:.25rem}:host ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:text;user-select:text}:host.select-none ::ng-deep .ngs-content-editor-content-editable,:host.is-selection-of-blocks-active ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:none!important;user-select:none!important}:host .block-controls{left:0;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2);opacity:0;flex:none}:host .block-controls.is-settings-popover-open{opacity:1}:host .block-controls.is-settings-popover-open .block-control:not(.block-control-drag){opacity:0}:host .block-control{cursor:pointer;width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--color-surface-container-low);color:var(--color-on-surface)}:host .block-control-drag button{cursor:grab}:host .drag-placeholder{height:calc(var(--spacing, .25rem) * 8);flex:none;position:relative}:host .drag-placeholder:before{position:absolute;left:calc(var(--spacing, .25rem) * 18);display:block;right:0;content:\"\";height:calc(var(--spacing, .25rem) * 2);top:50%;transform:translateY(-50%);background:var(--color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2)}.cdk-drag.cdk-drag-preview .block-control{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;cursor:grabbing}.cdk-drag.cdk-drag-preview .block-control:first-child{opacity:0}.cdk-drag.cdk-drag-preview .block-control:last-child{color:var(--color-on-surface)}.cdk-drag.cdk-drag-preview .block-content{opacity:0}.settings-popover{--ngs-list-list-item-one-line-container-height: calc(var(--spacing, .25rem) * 10)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentChangedDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentChangedDelay", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], scrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainer", required: false }] }], contentChanged: [{ type: i0.Output, args: ["contentChanged"] }] } });
+
+class ContentViewerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ContentViewerComponent, isStandalone: true, selector: "ngs-content-viewer", ngImport: i0, template: "<p>content-viewer works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-viewer', imports: [], template: "<p>content-viewer works!</p>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BlockSelectionDirective as B, ContentBuilderStore as C, TextSelectionPopupDirective as T, CONTENT_BUILDER as a, CONTENT_EDITOR_BLOCK as b, CommandBarComponent as c, ContentBuilderComponent as d, ContentViewerComponent as e };
+//# sourceMappingURL=ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-1Zi2nAX5.mjs.map