@ngstarter-ui/components 1.0.28 → 1.0.30

package/fesm2022/{ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-1Zi2nAX5.mjs → ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DNLTNGYa.mjs}

@@ -939,7 +939,7 @@ class CommandBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommandBarComponent, isStandalone: true, selector: "ngs-command-bar", inputs: { observedElement: "observedElement" }, host: { classAttribute: "ngs-command-bar" }, ngImport: i0, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:host button.is-active{background:var(--color-surface-container-highest);color:var(--color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: TextColorComponent, selector: "ngs-text-color", inputs: ["recentlyUsed", "selectedTextColor", "selectedBackgroundColor", "textColors", "backgroundColors"], outputs: ["recentlyUsedChange", "selectedTextColorChange", "selectedBackgroundColorChange", "textColorChanged", "backgroundColorChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommandBarComponent, isStandalone: true, selector: "ngs-command-bar", inputs: { observedElement: "observedElement" }, host: { classAttribute: "ngs-command-bar" }, ngImport: i0, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--ngs-color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:var(--ngs-shadow-lg)}:host button.is-active{background:var(--ngs-color-surface-container-highest);color:var(--ngs-color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: TextColorComponent, selector: "ngs-text-color", inputs: ["recentlyUsed", "selectedTextColor", "selectedBackgroundColor", "textColors", "backgroundColors"], outputs: ["recentlyUsedChange", "selectedTextColorChange", "selectedBackgroundColorChange", "textColorChanged", "backgroundColorChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarComponent, decorators: [{
             type: Component,
@@ -952,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TextColorComponent
                     ], host: {
                         'class': 'ngs-command-bar'
-                    }, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:host button.is-active{background:var(--color-surface-container-highest);color:var(--color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"flex items-center gap-1\">\n  <button ngsIconButton (click)=\"toggleBold()\"\n          [class.is-active]=\"isActive('strong')\">\n    <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleItalic()\"\n          [class.is-active]=\"isActive('em')\">\n    <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleStrike()\"\n          [class.is-active]=\"isActive('s')\">\n    <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleUnderline()\"\n          [class.is-active]=\"isActive('u')\">\n    <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSuperscript()\"\n          [class.is-active]=\"isActive('sup')\">\n    <ngs-icon name=\"fluent:text-superscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleSubscript()\"\n          [class.is-active]=\"isActive('sub')\">\n    <ngs-icon name=\"fluent:text-subscript-24-regular\"/>\n  </button>\n  <button ngsIconButton (click)=\"toggleCode()\"\n          [class.is-active]=\"isActive('code')\">\n    <ngs-icon name=\"fluent:code-24-regular\"/>\n  </button>\n\n  @if (isLinkActive()) {\n    <button ngsIconButton (click)=\"editLink()\">\n      <ngs-icon name=\"fluent:link-24-regular\"/>\n    </button>\n  } @else {\n    <button ngsIconButton (click)=\"addLink()\">\n      <ngs-icon name=\"fluent:link-add-24-regular\"/>\n    </button>\n  }\n  <button ngsIconButton [ngsMenuTriggerFor]=\"alignMenu\">\n    @switch (alignment()) {\n      @case ('left') {\n        <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n      }\n      @case ('center') {\n        <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n      }\n      @case ('right') {\n        <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n      }\n    }\n  </button>\n  <button ngsIconButton [ngsMenuTriggerFor]=\"formatColorText\" (menuOpened)=\"onMenuOpen()\">\n    <ngs-icon name=\"fluent:text-color-24-regular\"/>\n  </button>\n</div>\n\n<ngs-menu #alignMenu=\"ngsMenu\">\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('left')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('left')\">\n    <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n    Align Left\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('center')\"\n          ngs-menu-item\n          (click)=\"setTextAlignment('center')\">\n    <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n    Align Center\n  </button>\n  <button class=\"[&.is-active]:!bg-secondary-container\"\n          [class.is-active]=\"isTextAlignment('right')\"\n          ngs-menu-item (click)=\"setTextAlignment('right')\">\n    <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n    Align Right\n  </button>\n</ngs-menu>\n\n<ngs-menu #formatColorText=\"ngsMenu\" (closed)=\"onMenuClose()\">\n  <div class=\"px-4 py-3\" (mousedown)=\"preventMenuClose($event)\">\n    <ngs-text-color (textColorChanged)=\"onTextColorChanged($event)\"\n                    (backgroundColorChanged)=\"onBackgroundColorChanged($event)\"/>\n  </div>\n</ngs-menu>\n", styles: [":host{background:var(--ngs-color-surface-container);border-radius:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 1);box-shadow:var(--ngs-shadow-lg)}:host button.is-active{background:var(--ngs-color-surface-container-highest);color:var(--ngs-color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { observedElement: [{
                 type: Input$1
             }] } });
@@ -1506,7 +1506,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-paragraph-block.component-C9bQvDYU.mjs').then(c => c.ParagraphBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-paragraph-block.component-DjgGUc7s.mjs').then(c => c.ParagraphBlockComponent),
             type: 'paragraph',
             options: {},
             empty: () => {
@@ -1518,7 +1518,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-code-block.component-Bk6QTli8.mjs').then(c => c.CodeBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-code-block.component-CpZ5gJOc.mjs').then(c => c.CodeBlockComponent),
             type: 'code',
             options: {},
             empty: () => {
@@ -1531,7 +1531,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-heading-block.component-D9_CxTY1.mjs').then(c => c.HeadingBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-heading-block.component-C1FH89Sj.mjs').then(c => c.HeadingBlockComponent),
             type: 'heading',
             options: {},
             empty: () => {
@@ -1545,7 +1545,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-image-block.component-B4zJyUg1.mjs').then(c => c.ImageBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-image-block.component-ahCIfpvQ.mjs').then(c => c.ImageBlockComponent),
             type: 'image',
             options: {
                 uploadFn: (file, base64) => {
@@ -1572,7 +1572,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-video-block.component-m4DTihP2.mjs').then(c => c.VideoBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-video-block.component-DPlYe-_8.mjs').then(c => c.VideoBlockComponent),
             type: 'video',
             options: {
                 uploadFn: (file, base64) => {
@@ -1600,7 +1600,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-Cv6wx5Xe.mjs').then(c => c.ListBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-guhW_EyK.mjs').then(c => c.ListBlockComponent),
             type: 'bulletList',
             options: {},
             empty: () => {
@@ -1613,7 +1613,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-Cv6wx5Xe.mjs').then(c => c.ListBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-list-block.component-guhW_EyK.mjs').then(c => c.ListBlockComponent),
             type: 'orderedList',
             options: {},
             empty: () => {
@@ -1626,7 +1626,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-table-block.component-DlDh7Fnn.mjs').then(c => c.TableBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-table-block.component-bgBNjf4d.mjs').then(c => c.TableBlockComponent),
             type: 'table',
             options: {},
             empty: () => {
@@ -1695,7 +1695,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-quote-block.component-BbHds2r2.mjs').then(c => c.QuoteBlockComponent),
+            component: () => import('./ngstarter-ui-components-content-editor-quote-block.component-B3pek1H6.mjs').then(c => c.QuoteBlockComponent),
             type: 'quote',
             options: {},
             empty: () => {
@@ -1715,7 +1715,7 @@ class ContentBuilderComponent {
             }
         },
         {
-            component: () => import('./ngstarter-ui-components-content-editor-embed-block-BbkC_t86.mjs').then(c => c.EmbedBlock),
+            component: () => import('./ngstarter-ui-components-content-editor-embed-block-ghm0_0AF.mjs').then(c => c.EmbedBlock),
             type: 'embed',
             options: {},
             empty: () => {
@@ -2482,7 +2482,7 @@ class ContentBuilderComponent {
                 provide: CONTENT_BUILDER,
                 useExisting: forwardRef(() => ContentBuilderComponent)
             }
-        ], exportAs: ["ngsContentBuilder"], hostDirectives: [{ directive: BlockSelectionDirective, inputs: ["autoScrollContainerSelector", "autoScrollContainerSelector"] }], ngImport: i0, template: "<div class=\"container py-4\">\n  <div class=\"content\"\n       cdkDropList\n       ngsTextSelectionPopup\n       closestContentObserverClass=\"ngs-content-editor-content-editable\"\n       [targetComponent]=\"commandBar\"\n       (tagSelected)=\"onTagSelected($event)\"\n       (cdkDropListDropped)=\"drop($event)\">\n    @for (contentBlock of _content(); track contentBlock.id) {\n      <div class=\"block\"\n           [attr.data-block-id]=\"contentBlock.id\"\n           [class.is-focused]=\"isBlockFocused(contentBlock.id)\"\n           [class.is-active]=\"isActiveBlock(contentBlock.id)\"\n           cdkDrag\n           cdkDragLockAxis=\"y\"\n           cdkMonitorSubtreeFocus\n           (cdkDragStarted)=\"onDragStarted($event, contentBlock)\"\n           (cdkDragEnded)=\"onDragEnded($event, contentBlock)\"\n           (cdkFocusChange)=\"onFocusChange($event, contentBlock)\">\n        <div class=\"block-controls\" [class.is-settings-popover-open]=\"settingsTrigger.api.isOpen()\">\n          <button class=\"block-control\">\n            <ngs-icon name=\"fluent:add-24-regular\"\n                      (mousedown)=\"setActiveBlockId($event, contentBlock.id)\"\n                      [ngsMenuTriggerFor]=\"suggestionsMenu\"\n                      [ngsMenuTriggerRestoreFocus]=\"false\"\n                      (menuOpened)=\"onSuggestionsMenuOpen()\"\n                      (menuClosed)=\"onSuggestionsMenuClose($event)\"/>\n          </button>\n          <div class=\"block-control block-control-drag\"\n               (click)=\"selectBlock(contentBlock.id)\"\n               [ngsPopoverTriggerFor]=\"settingsPopover\"\n               (closed)=\"onSettingsPopoverClose()\"\n               #settingsTrigger=\"ngsPopoverTriggerFor\"\n               hasBackdrop\n               position=\"before-center\">\n            <button cdkDragHandle\n                    trigger=\"hover\"\n                    closeOnOriginClick\n                    closeOnOriginMouseLeave\n                    #dragTrigger=\"ngsPopoverTriggerFor\"\n                    [ngsPopoverTriggerFor]=\"dragControlTooltip\"\n                    position=\"below-center\"\n                    (mousedown)=\"dragTrigger.api.close()\"\n                    delay=\"1000\" class=\"w-full h-full flex items-center justify-center\">\n              <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n            </button>\n          </div>\n          <ng-template #dragControlTooltip>\n            <div class=\"bg-neutral-900 text-xs flex flex-col gap-0.5 rounded-lg items-center px-2 py-1.5 font-medium\">\n              <div>\n                <div class=\"text-neutral-100\">Drag <span class=\"text-neutral-400\">to move</span></div>\n              </div>\n              <div>\n                <div class=\"text-neutral-100\">Click <span class=\"text-neutral-400\">to open menu</span></div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n        <div class=\"block-content\" [class.is-selected]=\"isBlockSelected(contentBlock.id)\">\n          <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n          <ng-container [ngComponentOutlet]=\"blockDefsMap.get(contentBlock.type) | async\"\n                        [ngComponentOutletInputs]=\"{\n                          id: contentBlock.id,\n                          content: contentBlock.content,\n                          settings: contentBlock.settings,\n                          index: $index\n                        }\"/>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngs-popover #settingsPopover=\"ngsPopover\">\n  <div class=\"px-2 py-0 w-72 settings-popover\">\n    <ngs-list>\n      <ngs-list-item (click)=\"duplicateSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:copy-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Duplicate</div>\n      </ngs-list-item>\n      <ngs-list-item (click)=\"deleteSelectedBlocks(settingsPopover)\">\n        <ngs-icon name=\"fluent:delete-24-regular\" ngsListItemIcon/>\n        <div ngsListItemTitle>Delete</div>\n      </ngs-list-item>\n    </ngs-list>\n  </div>\n</ngs-popover>\n\n<ngs-menu #suggestionsMenu=\"ngsMenu\">\n  <div (click)=\"preventMenuClose($event)\">\n    @for (suggestionItem of suggestions(); track $index; let first = $first) {\n      @switch (suggestionItem.type) {\n        @case ('heading') {\n          <ngs-menu-heading>{{ suggestionItem.title }}</ngs-menu-heading>\n        }\n        @case ('item') {\n          <button ngs-menu-item (click)=\"addBlockFromSuggestionMenu(suggestionsMenu, suggestionItem.blockType, suggestionItem.blockOptions)\">\n            <div class=\"h-full flex items-center gap-3 py-2\">\n              <div class=\"size-9 flex items-center rounded-lg justify-center bg-surface-container\">\n                <ngs-icon [name]=\"suggestionItem.iconName\" class=\"!me-0\"/>\n              </div>\n              <div class=\"grow min-w-[200px]\">\n                <div>{{ suggestionItem.title }}</div>\n                <div class=\"text-2xs text-neutral-500\">{{ suggestionItem.description }}</div>\n              </div>\n              @if (suggestionItem.hotKeys) {\n                <div class=\"ms-auto bg-surface-container-highest rounded-full h-5\n                  text-4xs px-2 flex items-center font-bold\">{{ suggestionItem.hotKeys }}</div>\n              }\n            </div>\n          </button>\n        }\n      }\n    }\n  </div>\n</ngs-menu>\n", styles: [":host{--ngs-content-builder-content-width: 704px;outline:none}:host ::ng-deep .link-selection,:host ::ng-deep .text-selection{display:inline-block;background:var(--color-secondary-fixed)}:host.is-block-dragging{cursor:grabbing}:host .container{display:flex;width:820px;min-height:200px;height:100%;padding:calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) 0;margin:0 auto;outline:none}:host .content{flex-grow:1;width:calc(var(--ngs-content-builder-content-width) + calc(var(--spacing, .25rem) * 10))}:host .block{position:relative;flex:none;padding:calc(var(--spacing, .25rem) * 1) 0;display:flex;align-items:center}:host .block:not(:has(.block-content.is-selected)):hover .block-content{background:var(--color-neutral-50)}:host:not(.is-block-dragging) .block:hover .block-controls,:host:not(.is-block-dragging) .block.is-active .block-controls{opacity:1}:host .block-content{position:relative;flex-grow:1;padding:calc(var(--spacing, .25rem) * 3)}:host .block-content.is-selected{background:var(--color-primary-100)}:host ::ng-deep .selection-area{background:var(--color-primary-100);opacity:.4;border:1px solid var(--color-primary);border-radius:.25rem}:host ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:text;user-select:text}:host.select-none ::ng-deep .ngs-content-editor-content-editable,:host.is-selection-of-blocks-active ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:none!important;user-select:none!important}:host .block-controls{left:0;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2);opacity:0;flex:none}:host .block-controls.is-settings-popover-open{opacity:1}:host .block-controls.is-settings-popover-open .block-control:not(.block-control-drag){opacity:0}:host .block-control{cursor:pointer;width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--color-surface-container-low);color:var(--color-on-surface)}:host .block-control-drag button{cursor:grab}:host .drag-placeholder{height:calc(var(--spacing, .25rem) * 8);flex:none;position:relative}:host .drag-placeholder:before{position:absolute;left:calc(var(--spacing, .25rem) * 18);display:block;right:0;content:\"\";height:calc(var(--spacing, .25rem) * 2);top:50%;transform:translateY(-50%);background:var(--color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2)}.cdk-drag.cdk-drag-preview .block-control{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;cursor:grabbing}.cdk-drag.cdk-drag-preview .block-control:first-child{opacity:0}.cdk-drag.cdk-drag-preview .block-control:last-child{color:var(--color-on-surface)}.cdk-drag.cdk-drag-preview .block-content{opacity:0}.settings-popover{--ngs-list-list-item-one-line-container-height: calc(var(--spacing, .25rem) * 10)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: TextSelectionPopupDirective, selector: "[ngsTextSelectionPopup]", inputs: ["targetComponent", "closestContentObserverClass"], outputs: ["tagSelected"] }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: ListItemTitle, selector: "[ngsListItemTitle]" }, { kind: "directive", type: ListItemIcon, selector: "[ngsListItemIcon]" }, { kind: "component", type: ListItem, selector: "ngs-list-item, a[ngs-list-item], button[ngs-list-item]", inputs: ["disabled", "lines"], exportAs: ["ngsListItem"] }, { kind: "component", type: List, selector: "ngs-list", inputs: ["disabled", "disableRipple"], exportAs: ["ngsList"] }, { kind: "component", type: MenuHeading, selector: "ngs-menu-heading" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentBuilderComponent, decorators: [{
             type: Component,
@@ -2528,7 +2528,7 @@ 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(--color-secondary-fixed)}:host.is-block-dragging{cursor:grabbing}:host .container{display:flex;width:820px;min-height:200px;height:100%;padding:calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5) 0;margin:0 auto;outline:none}:host .content{flex-grow:1;width:calc(var(--ngs-content-builder-content-width) + calc(var(--spacing, .25rem) * 10))}:host .block{position:relative;flex:none;padding:calc(var(--spacing, .25rem) * 1) 0;display:flex;align-items:center}:host .block:not(:has(.block-content.is-selected)):hover .block-content{background:var(--color-neutral-50)}:host:not(.is-block-dragging) .block:hover .block-controls,:host:not(.is-block-dragging) .block.is-active .block-controls{opacity:1}:host .block-content{position:relative;flex-grow:1;padding:calc(var(--spacing, .25rem) * 3)}:host .block-content.is-selected{background:var(--color-primary-100)}:host ::ng-deep .selection-area{background:var(--color-primary-100);opacity:.4;border:1px solid var(--color-primary);border-radius:.25rem}:host ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:text;user-select:text}:host.select-none ::ng-deep .ngs-content-editor-content-editable,:host.is-selection-of-blocks-active ::ng-deep .ngs-content-editor-content-editable{-webkit-user-select:none!important;user-select:none!important}:host .block-controls{left:0;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2);opacity:0;flex:none}:host .block-controls.is-settings-popover-open{opacity:1}:host .block-controls.is-settings-popover-open .block-control:not(.block-control-drag){opacity:0}:host .block-control{cursor:pointer;width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center}:host .block-control:hover{background:var(--color-surface-container-low);color:var(--color-on-surface)}:host .block-control-drag button{cursor:grab}:host .drag-placeholder{height:calc(var(--spacing, .25rem) * 8);flex:none;position:relative}:host .drag-placeholder:before{position:absolute;left:calc(var(--spacing, .25rem) * 18);display:block;right:0;content:\"\";height:calc(var(--spacing, .25rem) * 2);top:50%;transform:translateY(-50%);background:var(--color-primary-300);border-radius:calc(var(--spacing, .25rem) * .5)}:host ::ng-deep code{color:var(--color-primary)}.cdk-drag.cdk-drag-preview{overflow:hidden;display:flex;align-items:center;color:var(--color-neutral-500);width:calc(var(--spacing, .25rem) * 18);padding:0 calc(var(--spacing, .25rem) * 2)}.cdk-drag.cdk-drag-preview .block-control{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);flex:none;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;cursor:grabbing}.cdk-drag.cdk-drag-preview .block-control:first-child{opacity:0}.cdk-drag.cdk-drag-preview .block-control:last-child{color:var(--color-on-surface)}.cdk-drag.cdk-drag-preview .block-content{opacity:0}.settings-popover{--ngs-list-list-item-one-line-container-height: calc(var(--spacing, .25rem) * 10)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, 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"] }] } });
 
 class ContentViewerComponent {
@@ -2545,4 +2545,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 
 export { BlockSelectionDirective as B, ContentBuilderStore as C, TextSelectionPopupDirective as T, CONTENT_BUILDER as a, CONTENT_EDITOR_BLOCK as b, CommandBarComponent as c, ContentBuilderComponent as d, ContentViewerComponent as e };
-//# sourceMappingURL=ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-1Zi2nAX5.mjs.map
+//# sourceMappingURL=ngstarter-ui-components-content-editor-ngstarter-ui-components-content-editor-DNLTNGYa.mjs.map