@ngstarter-ui/components 21.0.30 → 21.0.31

package/fesm2022/{ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-BuMm25ea.mjs → ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DA-VnRa_.mjs}

@@ -1,15 +1,15 @@
 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 { Injectable, inject, Component, model, input, output, Renderer2, signal, computed, Input as Input$1, InjectionToken, EventEmitter, HostListener, Output, Directive, PLATFORM_ID, ElementRef, EnvironmentInjector, ChangeDetectorRef, numberAttribute, booleanAttribute, runInInjectionContext, effect, forwardRef, ChangeDetectionStrategy, makeEnvironmentProviders } 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 { DialogRef, DialogContent, DialogTitle, DialogActions, 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 { DOCUMENT, isPlatformBrowser, isPlatformServer, NgComponentOutlet, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { Tooltip } from '@ngstarter-ui/components/tooltip';
 import { v7 } from 'uuid';
 import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
@@ -24,6 +24,10 @@ 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';
+import { CodeHighlighter } from '@ngstarter-ui/components/code-highlighter';
+import { Divider } from '@ngstarter-ui/components/divider';
+import { SafeResourceUrlPipe, SafeHtmlPipe } from '@ngstarter-ui/components/core';
+import { NativeTable } from '@ngstarter-ui/components/table';
 
 class TextHighlightService {
     savedRange = null;
@@ -569,7 +573,7 @@ class AddLinkDialog {
         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", "sameHeightAsButton"], 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"] }] });
+    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          [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", "sameHeightAsButton"], 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: "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,
@@ -580,11 +584,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         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" }]
+                    ], 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          [disabled]=\"form.invalid\" (click)=\"add()\">Add</button>\n</ngs-dialog-actions>\n" }]
         }] });
 
 class EditLinkDialog {
@@ -602,7 +605,7 @@ class EditLinkDialog {
         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", "sameHeightAsButton"], 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"], exportAs: ["ngsHint"] }] });
+    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          [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", "sameHeightAsButton"], 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: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EditLinkDialog, decorators: [{
             type: Component,
@@ -617,9 +620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         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" }]
+                    ], 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          [disabled]=\"form.invalid\" (click)=\"add()\">Apply</button>\n</ngs-dialog-actions>\n" }]
         }] });
 
 class TextColorComponent {
@@ -779,6 +781,7 @@ class CommandBarComponent {
     _renderer = inject(Renderer2);
     _dialog = inject(Dialog);
     observedElement = null;
+    _linkDialogOpen = false;
     props = signal([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
     alignment = computed(() => {
         const alignment = this.props().find(prop => prop.name === 'text-alignment');
@@ -827,12 +830,14 @@ class CommandBarComponent {
     }
     addLink() {
         this._textHighlightService.toggleWrapSelection('span', undefined, ['link-selection']);
+        this._linkDialogOpen = true;
         const dialogRef = this._dialog.open(AddLinkDialog, {
             width: '500px',
             disableClose: true,
             hasBackdrop: true
         });
         dialogRef.afterClosed().subscribe((res) => {
+            this._linkDialogOpen = false;
             this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
             if (res && res.href) {
                 this._textHighlightService.toggleWrapSelection('a', undefined, ['link'], {
@@ -848,6 +853,7 @@ class CommandBarComponent {
         if (!link) {
             return;
         }
+        this._linkDialogOpen = true;
         const dialogRef = this._dialog.open(EditLinkDialog, {
             data: {
                 href: link.getAttribute('href'),
@@ -858,6 +864,7 @@ class CommandBarComponent {
             hasBackdrop: true
         });
         dialogRef.afterClosed().subscribe((res) => {
+            this._linkDialogOpen = false;
             this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
             if (res) {
                 if (res.href) {
@@ -924,7 +931,9 @@ class CommandBarComponent {
         this.props.set(props);
     }
     ngOnDestroy() {
-        this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
+        if (!this._linkDialogOpen) {
+            this._textHighlightService.unwrapElementByClassAndSelectContents('link-selection');
+        }
         this._unwrapTextSelection();
     }
     _unwrapTextSelection() {
@@ -1475,6 +1484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }], 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 {
+    static DRAFT_STORAGE_PREFIX = 'ngs-content-editor-builder:draft';
     _platformId = inject(PLATFORM_ID);
     _store = inject(ContentBuilderStore);
     elRef = inject((ElementRef));
@@ -1505,7 +1515,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-paragraph-block.component-DS_6CzuA.mjs').then(c => c.ParagraphBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-paragraph-block.component-DtophI4_.mjs').then(c => c.ParagraphBlockComponent),
             type: 'paragraph',
             options: {},
             empty: () => {
@@ -1517,7 +1527,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-code-block.component-CKrOhA7h.mjs').then(c => c.CodeBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-code-block.component-BZniTqu-.mjs').then(c => c.CodeBlockComponent),
             type: 'code',
             options: {},
             empty: () => {
@@ -1530,7 +1540,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-heading-block.component-Dv8d0nCy.mjs').then(c => c.HeadingBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-heading-block.component-CnYRnDBY.mjs').then(c => c.HeadingBlockComponent),
             type: 'heading',
             options: {},
             empty: () => {
@@ -1544,7 +1554,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-image-block.component-g-H7a5Z_.mjs').then(c => c.ImageBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-image-block.component-IP_eRCQ2.mjs').then(c => c.ImageBlockComponent),
             type: 'image',
             options: {
                 uploadFn: (file, base64) => {
@@ -1571,7 +1581,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-video-block.component-DqS9Lhp_.mjs').then(c => c.VideoBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-video-block.component-Cs7L1wwX.mjs').then(c => c.VideoBlockComponent),
             type: 'video',
             options: {
                 uploadFn: (file, base64) => {
@@ -1599,7 +1609,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-PgqisgxY.mjs').then(c => c.ListBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-amyfzXOW.mjs').then(c => c.ListBlockComponent),
             type: 'bulletList',
             options: {},
             empty: () => {
@@ -1612,7 +1622,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-PgqisgxY.mjs').then(c => c.ListBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-amyfzXOW.mjs').then(c => c.ListBlockComponent),
             type: 'orderedList',
             options: {},
             empty: () => {
@@ -1625,7 +1635,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-table-block.component-D4rdPkGz.mjs').then(c => c.TableBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-table-block.component-hJ4OxKRX.mjs').then(c => c.TableBlockComponent),
             type: 'table',
             options: {},
             empty: () => {
@@ -1694,7 +1704,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-quote-block.component-Df92Nqvp.mjs').then(c => c.QuoteBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-quote-block.component-B20eHQdw.mjs').then(c => c.QuoteBlockComponent),
             type: 'quote',
             options: {},
             empty: () => {
@@ -1714,7 +1724,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-embed-block-zSApBzF3.mjs').then(c => c.EmbedBlock),
+            component: () => import('./ngstarter-ui-components-content-editor-embed-block-QzDMzd3u.mjs').then(c => c.EmbedBlock),
             type: 'embed',
             options: {},
             empty: () => {
@@ -1730,6 +1740,7 @@ class ContentBuilderComponent {
     ], ...(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 });
+    persistDraft = input(true, { ...(ngDevMode ? { debugName: "persistDraft" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     suggestions = input([
         {
             type: 'heading',
@@ -1911,7 +1922,8 @@ class ContentBuilderComponent {
         return this.blockDefsOptionsMap.get(type)[key];
     }
     ngOnInit() {
-        const content = this.content();
+        const draftContent = this._getDraftContent();
+        const content = draftContent || this.content();
         if (content.length > 0) {
             const lastItem = content[content.length - 1];
             if (lastItem.type !== 'paragraph' || (lastItem.type === 'paragraph' && lastItem.content !== '')) {
@@ -2195,7 +2207,9 @@ class ContentBuilderComponent {
         return this._store.blocks();
     }
     emitContentChangeEvent() {
-        this.contentChanged.emit(this.getData());
+        const data = this.getData();
+        this._saveDraft(data);
+        this.contentChanged.emit(data);
     }
     selectBlock(blockId, multiple = false) {
         if (!multiple) {
@@ -2312,6 +2326,43 @@ class ContentBuilderComponent {
         }
         this._scroll$ = null;
     }
+    _getDraftContent() {
+        if (!this._canUseDraftStorage()) {
+            return null;
+        }
+        try {
+            const draft = localStorage.getItem(this._getDraftStorageKey());
+            if (!draft) {
+                return null;
+            }
+            const content = JSON.parse(draft);
+            return Array.isArray(content) ? content : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    _saveDraft(content) {
+        if (!this._canUseDraftStorage()) {
+            return;
+        }
+        try {
+            localStorage.setItem(this._getDraftStorageKey(), JSON.stringify(content));
+        }
+        catch {
+        }
+    }
+    _canUseDraftStorage() {
+        return !isPlatformServer(this._platformId) && this.persistDraft();
+    }
+    _getDraftStorageKey(prefix = ContentBuilderComponent.DRAFT_STORAGE_PREFIX) {
+        const elementId = this.elRef.nativeElement.id;
+        const locationKey = typeof window === 'undefined'
+            ? 'server'
+            : `${window.location.pathname}${window.location.search}`;
+        const instanceKey = elementId ? `:${elementId}` : '';
+        return `${prefix}:${locationKey}${instanceKey}`;
+    }
     onSettingsPopoverClose() {
     }
     _onPaste(event) {
@@ -2475,17 +2526,17 @@ class ContentBuilderComponent {
         }));
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentBuilderComponent, isStandalone: true, selector: "ngs-content-editor-builder", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentChangedDelay: { classPropertyName: "contentChangedDelay", publicName: "contentChangedDelay", isSignal: true, isRequired: false, transformFunction: null }, persistDraft: { classPropertyName: "persistDraft", publicName: "persistDraft", 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-editor-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(--ngs-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(--ngs-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(--ngs-color-primary-100)}:host ::ng-deep .selection-area{background:var(--ngs-color-primary-100);opacity:.4;border:1px solid var(--ngs-color-primary);border-radius:var(--ngs-radius-sm)}: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(--ngs-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:var(--ngs-radius-lg);display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--ngs-color-surface-container-low);color:var(--ngs-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(--ngs-color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--ngs-color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--ngs-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:var(--ngs-radius-lg);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(--ngs-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 });
+        ], exportAs: ["ngsContentEditorBuilder"], 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-editor-builder-content-width: 704px;outline:none}:host ::ng-deep .link-selection,:host ::ng-deep .text-selection{display:inline-block;background:var(--ngs-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-editor-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(--ngs-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(--ngs-color-primary-100)}:host ::ng-deep .selection-area{background:var(--ngs-color-primary-100);opacity:.4;border:1px solid var(--ngs-color-primary);border-radius:var(--ngs-radius-sm)}: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(--ngs-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:var(--ngs-radius-lg);display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--ngs-color-surface-container-low);color:var(--ngs-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(--ngs-color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--ngs-color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--ngs-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:var(--ngs-radius-lg);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(--ngs-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: [
+            args: [{ selector: 'ngs-content-editor-builder', exportAs: 'ngsContentEditorBuilder', imports: [
                         Icon,
                         NgComponentOutlet,
                         AsyncPipe,
@@ -2519,7 +2570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                             useExisting: forwardRef(() => ContentBuilderComponent)
                         }
                     ], host: {
-                        'class': 'ngs-content-builder',
+                        'class': 'ngs-content-editor-builder',
                         '[class.is-block-dragging]': '_blockDragging()',
                         '[class.is-selection-of-blocks-active]': 'isSelectionOfBlocksActive()',
                         '[class.select-none]': 'isSelectionOfBlocksActive()',
@@ -2527,21 +2578,387 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '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(--ngs-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(--ngs-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(--ngs-color-primary-100)}:host ::ng-deep .selection-area{background:var(--ngs-color-primary-100);opacity:.4;border:1px solid var(--ngs-color-primary);border-radius:var(--ngs-radius-sm)}: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(--ngs-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:var(--ngs-radius-lg);display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--ngs-color-surface-container-low);color:var(--ngs-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(--ngs-color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--ngs-color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--ngs-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:var(--ngs-radius-lg);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(--ngs-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"] }] } });
+                    }, 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-editor-builder-content-width: 704px;outline:none}:host ::ng-deep .link-selection,:host ::ng-deep .text-selection{display:inline-block;background:var(--ngs-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-editor-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(--ngs-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(--ngs-color-primary-100)}:host ::ng-deep .selection-area{background:var(--ngs-color-primary-100);opacity:.4;border:1px solid var(--ngs-color-primary);border-radius:var(--ngs-radius-sm)}: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(--ngs-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:var(--ngs-radius-lg);display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--ngs-color-surface-container-low);color:var(--ngs-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(--ngs-color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--ngs-color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--ngs-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:var(--ngs-radius-lg);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(--ngs-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 }] }], persistDraft: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistDraft", 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: [""] });
+const CONTENT_EDITOR_BLOCK_RENDERERS = new InjectionToken('CONTENT_EDITOR_BLOCK_RENDERERS', {
+    factory: () => [],
+});
+function provideContentEditorRenderers(renderers) {
+    return makeEnvironmentProviders([
+        {
+            provide: CONTENT_EDITOR_BLOCK_RENDERERS,
+            useValue: renderers,
+            multi: true,
+        },
+    ]);
+}
+function provideContentEditorRenderer(renderer) {
+    return provideContentEditorRenderers([renderer]);
+}
+
+function getTextAlignment(props) {
+    const value = props?.find(prop => prop.name === 'text-alignment')?.value;
+    if (value === 'center' || value === 'right' || value === 'justify') {
+        return value;
+    }
+    return 'left';
+}
+function getDimensionAttribute(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed || trimmed === 'auto') {
+            return null;
+        }
+        const parsed = Number.parseFloat(trimmed);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+}
+function getHtmlContent(value) {
+    return typeof value === 'string' ? value : '';
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentViewerComponent, decorators: [{
+
+class ContentEditorCodeRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    code = computed(() => getHtmlContent(this.content()), ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = computed(() => this.settings()?.language || 'none', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorCodeRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ContentEditorCodeRenderer, isStandalone: true, selector: "ngs-content-editor-code-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-code-renderer" }, ngImport: i0, template: "<ngs-code-highlighter\n  [code]=\"code()\"\n  [language]=\"language()\"\n  appearance=\"bordered\"\n  showLanguage\n/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: CodeHighlighter, selector: "ngs-code-highlighter", inputs: ["code", "language", "theme", "title", "appearance", "diff", "highlightLines", "showLanguage", "showCopyButton", "disableOverflow"], exportAs: ["ngsCodeHighlighter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorCodeRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-content-viewer', imports: [], template: "<p>content-viewer works!</p>\n" }]
-        }] });
+            args: [{ selector: 'ngs-content-editor-code-renderer', imports: [
+                        CodeHighlighter,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-code-renderer',
+                    }, template: "<ngs-code-highlighter\n  [code]=\"code()\"\n  [language]=\"language()\"\n  appearance=\"bordered\"\n  showLanguage\n/>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorDividerRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorDividerRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ContentEditorDividerRenderer, isStandalone: true, selector: "ngs-content-editor-divider-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-divider-renderer" }, ngImport: i0, template: "<ngs-divider/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorDividerRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-divider-renderer', imports: [
+                        Divider,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-divider-renderer',
+                    }, template: "<ngs-divider/>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorEmbedRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    url = computed(() => this.content()?.url || '', ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    embedType = computed(() => this.content()?.type || '', ...(ngDevMode ? [{ debugName: "embedType" }] : /* istanbul ignore next */ []));
+    width = computed(() => getDimensionAttribute(this.settings()?.width) || 700, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => getDimensionAttribute(this.settings()?.height) || 400, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorEmbedRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorEmbedRenderer, isStandalone: true, selector: "ngs-content-editor-embed-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-embed-renderer" }, ngImport: i0, template: "@if (url()) {\n  <figure>\n    <iframe\n      [attr.title]=\"embedType() || 'Embedded content'\"\n      [src]=\"url() | safeResourceUrl\"\n      [attr.width]=\"width()\"\n      [attr.height]=\"height()\"\n      frameborder=\"0\"\n      allowfullscreen\n    ></iframe>\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host iframe{background:var(--ngs-color-surface-container-low);display:block;max-width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeResourceUrlPipe, name: "safeResourceUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorEmbedRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-embed-renderer', imports: [
+                        SafeResourceUrlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-embed-renderer',
+                    }, template: "@if (url()) {\n  <figure>\n    <iframe\n      [attr.title]=\"embedType() || 'Embedded content'\"\n      [src]=\"url() | safeResourceUrl\"\n      [attr.width]=\"width()\"\n      [attr.height]=\"height()\"\n      frameborder=\"0\"\n      allowfullscreen\n    ></iframe>\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host iframe{background:var(--ngs-color-surface-container-low);display:block;max-width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorHeadingRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    html = computed(() => getHtmlContent(this.content()), ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    level = computed(() => {
+        const level = this.settings()?.level;
+        return level === 1 || level === 2 || level === 3 ? level : 2;
+    }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    alignment = computed(() => getTextAlignment(this.props()), ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorHeadingRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorHeadingRenderer, isStandalone: true, selector: "ngs-content-editor-heading-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.level-1": "level() === 1", "class.level-2": "level() === 2", "class.level-3": "level() === 3" }, classAttribute: "ngs-content-editor-heading-renderer" }, ngImport: i0, template: "@switch (level()) {\n  @case (1) {\n    <h1\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h1>\n  }\n  @case (3) {\n    <h3\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h3>\n  }\n  @default {\n    <h2\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h2>\n  }\n}\n", styles: [":host{display:block}:host .content-html{margin:0;font-weight:700;line-height:1.12}:host.level-1 .content-html{font-size:3rem}:host.level-2 .content-html{font-size:2.25rem}:host.level-3 .content-html{font-size:1.875rem}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorHeadingRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-heading-renderer', imports: [
+                        SafeHtmlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-heading-renderer',
+                        '[class.level-1]': 'level() === 1',
+                        '[class.level-2]': 'level() === 2',
+                        '[class.level-3]': 'level() === 3',
+                    }, template: "@switch (level()) {\n  @case (1) {\n    <h1\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h1>\n  }\n  @case (3) {\n    <h3\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h3>\n  }\n  @default {\n    <h2\n      class=\"content-html\"\n      [class.align-left]=\"alignment() === 'left'\"\n      [class.align-center]=\"alignment() === 'center'\"\n      [class.align-right]=\"alignment() === 'right'\"\n      [class.align-justify]=\"alignment() === 'justify'\"\n      [innerHTML]=\"html() | safeHtml\"\n    ></h2>\n  }\n}\n", styles: [":host{display:block}:host .content-html{margin:0;font-weight:700;line-height:1.12}:host.level-1 .content-html{font-size:3rem}:host.level-2 .content-html{font-size:2.25rem}:host.level-3 .content-html{font-size:1.875rem}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorImageRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    src = computed(() => this.content()?.src || '', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = computed(() => this.content()?.alt || '', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    width = computed(() => getDimensionAttribute(this.settings()?.width), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => getDimensionAttribute(this.settings()?.height), ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorImageRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorImageRenderer, isStandalone: true, selector: "ngs-content-editor-image-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-image-renderer" }, ngImport: i0, template: "@if (src()) {\n  <figure>\n    <img [src]=\"src()\" [alt]=\"alt()\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n    @if (alt()) {\n      <figcaption>{{ alt() }}</figcaption>\n    }\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host img{display:block;max-width:100%;height:auto}:host figcaption{margin-top:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-neutral-600);font-size:var(--ngs-font-size-sm);text-align:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorImageRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-image-renderer', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-image-renderer',
+                    }, template: "@if (src()) {\n  <figure>\n    <img [src]=\"src()\" [alt]=\"alt()\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n    @if (alt()) {\n      <figcaption>{{ alt() }}</figcaption>\n    }\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host img{display:block;max-width:100%;height:auto}:host figcaption{margin-top:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-neutral-600);font-size:var(--ngs-font-size-sm);text-align:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorListRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input([], ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    items = computed(() => this.content() || [], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    listStyle = computed(() => this.settings()?.listStyle || 'bullet', ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+    childItems(item) {
+        return item.children || [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorListRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorListRenderer, isStandalone: true, selector: "ngs-content-editor-list-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.list-bullet": "listStyle() === 'bullet'", "class.list-ordered": "listStyle() === 'ordered'" }, classAttribute: "ngs-content-editor-list-renderer" }, ngImport: i0, template: "@if (listStyle() === 'ordered') {\n  <ol class=\"list\">\n    <ng-container\n      [ngTemplateOutlet]=\"listTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: items(), ordered: true }\"\n    />\n  </ol>\n} @else {\n  <ul class=\"list\">\n    <ng-container\n      [ngTemplateOutlet]=\"listTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: items(), ordered: false }\"\n    />\n  </ul>\n}\n\n<ng-template #listTpl let-list let-ordered=\"ordered\">\n  @for (item of list; track $index) {\n    <li>\n      <span class=\"content-html\" [innerHTML]=\"item.content | safeHtml\"></span>\n      @if (childItems(item).length > 0) {\n        @if (ordered) {\n          <ol class=\"list\">\n            <ng-container\n              [ngTemplateOutlet]=\"listTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: childItems(item), ordered: ordered }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"list\">\n            <ng-container\n              [ngTemplateOutlet]=\"listTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: childItems(item), ordered: ordered }\"\n            />\n          </ul>\n        }\n      }\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}:host .list{margin:0;padding-inline-start:calc(var(--spacing, .25rem) * 4)}:host .list .list{margin-top:calc(var(--spacing, .25rem) * 2)}:host li{margin:calc(var(--spacing, .25rem) * 1) 0}:host.list-bullet .list{list-style-type:disc}:host.list-ordered .list{list-style-type:decimal}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorListRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-list-renderer', imports: [
+                        NgTemplateOutlet,
+                        SafeHtmlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-list-renderer',
+                        '[class.list-bullet]': "listStyle() === 'bullet'",
+                        '[class.list-ordered]': "listStyle() === 'ordered'",
+                    }, template: "@if (listStyle() === 'ordered') {\n  <ol class=\"list\">\n    <ng-container\n      [ngTemplateOutlet]=\"listTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: items(), ordered: true }\"\n    />\n  </ol>\n} @else {\n  <ul class=\"list\">\n    <ng-container\n      [ngTemplateOutlet]=\"listTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: items(), ordered: false }\"\n    />\n  </ul>\n}\n\n<ng-template #listTpl let-list let-ordered=\"ordered\">\n  @for (item of list; track $index) {\n    <li>\n      <span class=\"content-html\" [innerHTML]=\"item.content | safeHtml\"></span>\n      @if (childItems(item).length > 0) {\n        @if (ordered) {\n          <ol class=\"list\">\n            <ng-container\n              [ngTemplateOutlet]=\"listTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: childItems(item), ordered: ordered }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"list\">\n            <ng-container\n              [ngTemplateOutlet]=\"listTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: childItems(item), ordered: ordered }\"\n            />\n          </ul>\n        }\n      }\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}:host .list{margin:0;padding-inline-start:calc(var(--spacing, .25rem) * 4)}:host .list .list{margin-top:calc(var(--spacing, .25rem) * 2)}:host li{margin:calc(var(--spacing, .25rem) * 1) 0}:host.list-bullet .list{list-style-type:disc}:host.list-ordered .list{list-style-type:decimal}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorParagraphRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    html = computed(() => getHtmlContent(this.content()), ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    alignment = computed(() => getTextAlignment(this.props()), ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorParagraphRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ContentEditorParagraphRenderer, isStandalone: true, selector: "ngs-content-editor-paragraph-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-paragraph-renderer" }, ngImport: i0, template: "<p\n  class=\"content-html\"\n  [class.align-left]=\"alignment() === 'left'\"\n  [class.align-center]=\"alignment() === 'center'\"\n  [class.align-right]=\"alignment() === 'right'\"\n  [class.align-justify]=\"alignment() === 'justify'\"\n  [innerHTML]=\"html() | safeHtml\"\n></p>\n", styles: [":host{display:block}:host .content-html{margin:0;line-height:var(--leading-normal)}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorParagraphRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-paragraph-renderer', imports: [
+                        SafeHtmlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-paragraph-renderer',
+                    }, template: "<p\n  class=\"content-html\"\n  [class.align-left]=\"alignment() === 'left'\"\n  [class.align-center]=\"alignment() === 'center'\"\n  [class.align-right]=\"alignment() === 'right'\"\n  [class.align-justify]=\"alignment() === 'justify'\"\n  [innerHTML]=\"html() | safeHtml\"\n></p>\n", styles: [":host{display:block}:host .content-html{margin:0;line-height:var(--leading-normal)}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorQuoteRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    quoteHtml = computed(() => getHtmlContent(this.content()?.cite?.content), ...(ngDevMode ? [{ debugName: "quoteHtml" }] : /* istanbul ignore next */ []));
+    captionHtml = computed(() => getHtmlContent(this.content()?.caption?.content), ...(ngDevMode ? [{ debugName: "captionHtml" }] : /* istanbul ignore next */ []));
+    quoteAlignment = computed(() => getTextAlignment(this.content()?.cite?.props), ...(ngDevMode ? [{ debugName: "quoteAlignment" }] : /* istanbul ignore next */ []));
+    captionAlignment = computed(() => getTextAlignment(this.content()?.caption?.props), ...(ngDevMode ? [{ debugName: "captionAlignment" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorQuoteRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorQuoteRenderer, isStandalone: true, selector: "ngs-content-editor-quote-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-quote-renderer" }, ngImport: i0, template: "<blockquote\n  class=\"content-html\"\n  [class.align-left]=\"quoteAlignment() === 'left'\"\n  [class.align-center]=\"quoteAlignment() === 'center'\"\n  [class.align-right]=\"quoteAlignment() === 'right'\"\n  [class.align-justify]=\"quoteAlignment() === 'justify'\"\n  [innerHTML]=\"quoteHtml() | safeHtml\"\n></blockquote>\n@if (captionHtml()) {\n  <figcaption\n    class=\"caption-html\"\n    [class.align-left]=\"captionAlignment() === 'left'\"\n    [class.align-center]=\"captionAlignment() === 'center'\"\n    [class.align-right]=\"captionAlignment() === 'right'\"\n    [class.align-justify]=\"captionAlignment() === 'justify'\"\n    [innerHTML]=\"captionHtml() | safeHtml\"\n  ></figcaption>\n}\n", styles: [":host{display:block}:host .content-html{border-inline-start:calc(var(--spacing, .25rem) * 1) solid var(--ngs-color-border);margin:0 0 calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3)}:host .caption-html{color:var(--ngs-color-neutral-600);display:block;font-size:var(--ngs-font-size-sm)}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorQuoteRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-quote-renderer', imports: [
+                        SafeHtmlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-quote-renderer',
+                    }, template: "<blockquote\n  class=\"content-html\"\n  [class.align-left]=\"quoteAlignment() === 'left'\"\n  [class.align-center]=\"quoteAlignment() === 'center'\"\n  [class.align-right]=\"quoteAlignment() === 'right'\"\n  [class.align-justify]=\"quoteAlignment() === 'justify'\"\n  [innerHTML]=\"quoteHtml() | safeHtml\"\n></blockquote>\n@if (captionHtml()) {\n  <figcaption\n    class=\"caption-html\"\n    [class.align-left]=\"captionAlignment() === 'left'\"\n    [class.align-center]=\"captionAlignment() === 'center'\"\n    [class.align-right]=\"captionAlignment() === 'right'\"\n    [class.align-justify]=\"captionAlignment() === 'justify'\"\n    [innerHTML]=\"captionHtml() | safeHtml\"\n  ></figcaption>\n}\n", styles: [":host{display:block}:host .content-html{border-inline-start:calc(var(--spacing, .25rem) * 1) solid var(--ngs-color-border);margin:0 0 calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3)}:host .caption-html{color:var(--ngs-color-neutral-600);display:block;font-size:var(--ngs-font-size-sm)}:host .align-left{text-align:left}:host .align-center{text-align:center}:host .align-right{text-align:right}:host .align-justify{text-align:justify}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorTableRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input([], ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.content() || [], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    firstRow = computed(() => this.rows()[0] || [], ...(ngDevMode ? [{ debugName: "firstRow" }] : /* istanbul ignore next */ []));
+    width(cell) {
+        return getDimensionAttribute(cell.options?.width);
+    }
+    colSpan(cell) {
+        return cell.options?.colspan || 1;
+    }
+    rowSpan(cell) {
+        return cell.options?.rowspan || 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorTableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorTableRenderer, isStandalone: true, selector: "ngs-content-editor-table-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-table-renderer" }, ngImport: i0, template: "@if (rows().length > 0) {\n  <div class=\"table-overflow\">\n    <table ngs-native-table>\n      <colgroup>\n        @for (cell of firstRow(); track $index) {\n          <col [attr.width]=\"width(cell)\">\n        }\n      </colgroup>\n      <tbody>\n        @for (row of rows(); track $index) {\n          <tr>\n            @for (cell of row; track $index) {\n              <td\n                [attr.colspan]=\"colSpan(cell)\"\n                [attr.rowspan]=\"rowSpan(cell)\"\n                [innerHTML]=\"(cell.content || '') | safeHtml\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n", styles: [":host{display:block}:host .table-overflow{overflow-x:auto;overflow-y:hidden;width:100%}:host table{min-width:100%;word-break:break-word}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NativeTable, selector: "table[ngs-native-table]", exportAs: ["ngsNativeTable"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorTableRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-table-renderer', imports: [
+                        NativeTable,
+                        SafeHtmlPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-table-renderer',
+                    }, template: "@if (rows().length > 0) {\n  <div class=\"table-overflow\">\n    <table ngs-native-table>\n      <colgroup>\n        @for (cell of firstRow(); track $index) {\n          <col [attr.width]=\"width(cell)\">\n        }\n      </colgroup>\n      <tbody>\n        @for (row of rows(); track $index) {\n          <tr>\n            @for (cell of row; track $index) {\n              <td\n                [attr.colspan]=\"colSpan(cell)\"\n                [attr.rowspan]=\"rowSpan(cell)\"\n                [innerHTML]=\"(cell.content || '') | safeHtml\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n", styles: [":host{display:block}:host .table-overflow{overflow-x:auto;overflow-y:hidden;width:100%}:host table{min-width:100%;word-break:break-word}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+class ContentEditorVideoRenderer {
+    block = input(null, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    props = input([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    settings = input({}, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    src = computed(() => this.content()?.src || '', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    caption = computed(() => this.content()?.caption || '', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    width = computed(() => getDimensionAttribute(this.settings()?.width), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => getDimensionAttribute(this.settings()?.height), ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorVideoRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorVideoRenderer, isStandalone: true, selector: "ngs-content-editor-video-renderer", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-video-renderer" }, ngImport: i0, template: "@if (src()) {\n  <figure>\n    <video\n      [src]=\"src()\"\n      [attr.width]=\"width()\"\n      [attr.height]=\"height()\"\n      controls\n    ></video>\n    @if (caption()) {\n      <figcaption>{{ caption() }}</figcaption>\n    }\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host video{display:block;max-width:100%;height:auto}:host figcaption{margin-top:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-neutral-600);font-size:var(--ngs-font-size-sm);text-align:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorVideoRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-video-renderer', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-video-renderer',
+                    }, template: "@if (src()) {\n  <figure>\n    <video\n      [src]=\"src()\"\n      [attr.width]=\"width()\"\n      [attr.height]=\"height()\"\n      controls\n    ></video>\n    @if (caption()) {\n      <figcaption>{{ caption() }}</figcaption>\n    }\n  </figure>\n}\n", styles: [":host{display:block}:host figure{margin:0}:host video{display:block;max-width:100%;height:auto}:host figcaption{margin-top:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-neutral-600);font-size:var(--ngs-font-size-sm);text-align:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+const CONTENT_EDITOR_DEFAULT_RENDERERS = [
+    {
+        type: 'paragraph',
+        component: ContentEditorParagraphRenderer,
+    },
+    {
+        type: 'heading',
+        component: ContentEditorHeadingRenderer,
+    },
+    {
+        type: 'code',
+        component: ContentEditorCodeRenderer,
+    },
+    {
+        type: 'divider',
+        component: ContentEditorDividerRenderer,
+    },
+    {
+        type: 'image',
+        component: ContentEditorImageRenderer,
+    },
+    {
+        type: 'video',
+        component: ContentEditorVideoRenderer,
+    },
+    {
+        type: 'bulletList',
+        component: ContentEditorListRenderer,
+    },
+    {
+        type: 'orderedList',
+        component: ContentEditorListRenderer,
+    },
+    {
+        type: 'table',
+        component: ContentEditorTableRenderer,
+    },
+    {
+        type: 'quote',
+        component: ContentEditorQuoteRenderer,
+    },
+    {
+        type: 'embed',
+        component: ContentEditorEmbedRenderer,
+    },
+];
+
+class ContentEditorRenderer {
+    providedRendererGroups = inject(CONTENT_EDITOR_BLOCK_RENDERERS, {
+        optional: true,
+    }) || [];
+    content = input([], ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    blocks = input(null, ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    rendererMap = computed(() => {
+        const renderers = [
+            ...CONTENT_EDITOR_DEFAULT_RENDERERS,
+            ...this.providedRendererGroups.flat(),
+        ];
+        return new Map(renderers.map(renderer => [renderer.type, renderer.component]));
+    }, ...(ngDevMode ? [{ debugName: "rendererMap" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const content = this.blocks() || this.content() || [];
+        const rendererMap = this.rendererMap();
+        return content.map((block, index) => ({
+            block,
+            component: rendererMap.get(block.type) || null,
+            inputs: {
+                block,
+                id: block.id,
+                type: block.type,
+                content: block.content,
+                props: block.props || [],
+                settings: block.settings || {},
+                index,
+            },
+        }));
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentEditorRenderer, isStandalone: true, selector: "ngs-content-editor-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-content-editor-renderer prose max-w-full" }, exportAs: ["ngsContentEditorRenderer"], ngImport: i0, template: "@for (item of items(); track item.block.id || $index) {\n  @if (item.component) {\n    <div class=\"block\" [attr.data-block-id]=\"item.block.id\" [attr.data-block-type]=\"item.block.type\">\n      <ng-container\n        [ngComponentOutlet]=\"item.component\"\n        [ngComponentOutletInputs]=\"item.inputs\"\n      />\n    </div>\n  }\n}\n", styles: [":host{--ngs-content-editor-renderer-block-gap: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;gap:var(--ngs-content-editor-renderer-block-gap)}:host .block{min-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentEditorRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-content-editor-renderer', exportAs: 'ngsContentEditorRenderer', imports: [
+                        NgComponentOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-content-editor-renderer prose max-w-full',
+                    }, template: "@for (item of items(); track item.block.id || $index) {\n  @if (item.component) {\n    <div class=\"block\" [attr.data-block-id]=\"item.block.id\" [attr.data-block-type]=\"item.block.type\">\n      <ng-container\n        [ngComponentOutlet]=\"item.component\"\n        [ngComponentOutletInputs]=\"item.inputs\"\n      />\n    </div>\n  }\n}\n", styles: [":host{--ngs-content-editor-renderer-block-gap: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;gap:var(--ngs-content-editor-renderer-block-gap)}:host .block{min-width:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }] } });
 
 /**
  * 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-BuMm25ea.mjs.map
+export { BlockSelectionDirective as B, ContentBuilderStore as C, TextSelectionPopupDirective as T, CONTENT_BUILDER as a, CONTENT_EDITOR_BLOCK as b, CONTENT_EDITOR_BLOCK_RENDERERS as c, CONTENT_EDITOR_DEFAULT_RENDERERS as d, CommandBarComponent as e, ContentBuilderComponent as f, ContentEditorCodeRenderer as g, ContentEditorDividerRenderer as h, ContentEditorEmbedRenderer as i, ContentEditorHeadingRenderer as j, ContentEditorImageRenderer as k, ContentEditorListRenderer as l, ContentEditorParagraphRenderer as m, ContentEditorQuoteRenderer as n, ContentEditorRenderer as o, ContentEditorTableRenderer as p, ContentEditorVideoRenderer as q, provideContentEditorRenderer as r, provideContentEditorRenderers as s };
+//# sourceMappingURL=ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DA-VnRa_.mjs.map