@tmdjr/ngx-editor-js2 19.0.3 → 20.0.0

package/fesm2022/tmdjr-ngx-editor-js2.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, forwardRef, Directive, HostListener, output, Component, signal, Injectable, ViewContainerRef, effect, InjectionToken, viewChild, EventEmitter, Renderer2, Output } from '@angular/core';
+import { inject, ElementRef, input, forwardRef, HostListener, Directive, output, Component, signal, Injectable, ViewContainerRef, effect, InjectionToken, viewChild, EventEmitter, Renderer2, Output } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
 import { startWith, combineLatest, map, firstValueFrom, of, from, tap, filter, defaultIfEmpty, Observable, lastValueFrom, forkJoin, iif, switchMap, mergeMap, BehaviorSubject, distinctUntilChanged, delay, exhaustMap, merge, fromEvent, debounceTime } from 'rxjs';
@@ -10,7 +10,7 @@ import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import { AsyncPipe, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgClass } from '@angular/common';
+import { AsyncPipe, NgTemplateOutlet, NgClass } from '@angular/common';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
@@ -37,8 +37,8 @@ class ControlAccessorDirective {
     onInput() {
         this.onChange(this.elementRef.nativeElement.innerHTML);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ControlAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: ControlAccessorDirective, isStandalone: true, selector: "[controlAccessor]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ControlAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: ControlAccessorDirective, isStandalone: true, selector: "[controlAccessor]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ControlAccessorDirective),
@@ -46,7 +46,7 @@ class ControlAccessorDirective {
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ControlAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ControlAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[controlAccessor]',
@@ -72,10 +72,10 @@ class AutofocusDirective {
     ngAfterContentInit() {
         this.autofocus() && this.elementRef.nativeElement.focus?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: AutofocusDirective, isStandalone: true, selector: "[autofocus]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: AutofocusDirective, isStandalone: true, selector: "[autofocus]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[autofocus]',
@@ -102,8 +102,8 @@ class ToolbarBlockOptionsComponent {
     handleAction(action) {
         this.handleActionEmitter.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarBlockOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ToolbarBlockOptionsComponent, isStandalone: true, selector: "toolbar-block-options", inputs: { blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleActionEmitter: "handleAction", moveBlockPositionEmitter: "moveBlockPosition" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarBlockOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ToolbarBlockOptionsComponent, isStandalone: true, selector: "toolbar-block-options", inputs: { blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleActionEmitter: "handleAction", moveBlockPositionEmitter: "moveBlockPosition" }, ngImport: i0, template: `
     <div class="actions-panel mat-elevation-z24">
       <div class="action-btn" matRipple (click)="movePosition(Position.UP)">
         <mat-icon>arrow_upward</mat-icon>
@@ -128,9 +128,9 @@ class ToolbarBlockOptionsComponent {
       </div>
       }
     </div>
-  `, isInline: true, styles: [":host .actions-panel{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;width:128px;max-height:128px;border-radius:4px;overflow:auto;background:var(--mat-sys-secondary)}:host .actions-panel .action-btn{cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--mat-sys-on-secondary);background:var(--mat-sys-secondary)}:host .actions-panel .action-btn:is(:hover,:focus){color:var(--mat-sys-secondary);background:var(--mat-sys-on-secondary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] });
+  `, isInline: true, styles: [":host .actions-panel{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;width:128px;max-height:128px;border-radius:4px;overflow:auto;background:var(--mat-sys-secondary)}:host .actions-panel .action-btn{cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--mat-sys-on-secondary);background:var(--mat-sys-secondary)}:host .actions-panel .action-btn:hover,:host .actions-panel .action-btn:focus{color:var(--mat-sys-secondary);background:var(--mat-sys-on-secondary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarBlockOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarBlockOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toolbar-block-options', imports: [MatIcon, MatRipple], template: `
     <div class="actions-panel mat-elevation-z24">
@@ -157,7 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
       </div>
       }
     </div>
-  `, styles: [":host .actions-panel{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;width:128px;max-height:128px;border-radius:4px;overflow:auto;background:var(--mat-sys-secondary)}:host .actions-panel .action-btn{cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--mat-sys-on-secondary);background:var(--mat-sys-secondary)}:host .actions-panel .action-btn:is(:hover,:focus){color:var(--mat-sys-secondary);background:var(--mat-sys-on-secondary)}\n"] }]
+  `, styles: [":host .actions-panel{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;width:128px;max-height:128px;border-radius:4px;overflow:auto;background:var(--mat-sys-secondary)}:host .actions-panel .action-btn{cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--mat-sys-on-secondary);background:var(--mat-sys-secondary)}:host .actions-panel .action-btn:hover,:host .actions-panel .action-btn:focus{color:var(--mat-sys-secondary);background:var(--mat-sys-on-secondary)}\n"] }]
         }] });
 
 class ToolbarBlocksComponent {
@@ -181,8 +181,8 @@ class ToolbarBlocksComponent {
     addBlock(block) {
         this.addBlockEmitter.emit(block?.component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarBlocksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ToolbarBlocksComponent, isStandalone: true, selector: "toolbar-blocks", inputs: { supportedBlocks: { classPropertyName: "supportedBlocks", publicName: "supportedBlocks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addBlockEmitter: "addBlock" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarBlocksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ToolbarBlocksComponent, isStandalone: true, selector: "toolbar-blocks", inputs: { supportedBlocks: { classPropertyName: "supportedBlocks", publicName: "supportedBlocks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addBlockEmitter: "addBlock" }, ngImport: i0, template: `
     <div class="block-list-container mat-elevation-z24">
       <mat-form-field appearance="fill" color="accent">
         <mat-label>Filter</mat-label>
@@ -205,9 +205,9 @@ class ToolbarBlocksComponent {
       </mat-list>
       }
     </div>
-  `, isInline: true, styles: [":host .mat-mdc-list-base{padding-top:0;margin-top:-14px}:host .block-list-container{background:var(--mat-sys-secondary-container);border-radius:4px}:host .block-list-panel{max-width:280px;max-height:240px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:auto;color:var(--mat-sys-on-secondary-container)}:host mat-list-item{cursor:pointer;-webkit-user-select:none;user-select:none}:host mat-list-item:is(:hover,:focus){background:var(--mat-sys-surface-bright)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+  `, isInline: true, styles: [":host .mat-mdc-list-base{padding-top:0;margin-top:-14px}:host .block-list-container{background:var(--mat-sys-secondary-container);border-radius:4px}:host .block-list-panel{max-width:280px;max-height:240px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:auto;color:var(--mat-sys-on-secondary-container)}:host mat-list-item{cursor:pointer;-webkit-user-select:none;user-select:none}:host mat-list-item:hover,:host mat-list-item:focus{background:var(--mat-sys-surface-bright)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarBlocksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarBlocksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toolbar-blocks', imports: [
                         MatFormField,
@@ -241,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
       </mat-list>
       }
     </div>
-  `, styles: [":host .mat-mdc-list-base{padding-top:0;margin-top:-14px}:host .block-list-container{background:var(--mat-sys-secondary-container);border-radius:4px}:host .block-list-panel{max-width:280px;max-height:240px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:auto;color:var(--mat-sys-on-secondary-container)}:host mat-list-item{cursor:pointer;-webkit-user-select:none;user-select:none}:host mat-list-item:is(:hover,:focus){background:var(--mat-sys-surface-bright)}\n"] }]
+  `, styles: [":host .mat-mdc-list-base{padding-top:0;margin-top:-14px}:host .block-list-container{background:var(--mat-sys-secondary-container);border-radius:4px}:host .block-list-panel{max-width:280px;max-height:240px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:auto;color:var(--mat-sys-on-secondary-container)}:host mat-list-item{cursor:pointer;-webkit-user-select:none;user-select:none}:host mat-list-item:hover,:host mat-list-item:focus{background:var(--mat-sys-surface-bright)}\n"] }]
         }] });
 
 class ToolbarComponent {
@@ -276,8 +276,8 @@ class ToolbarComponent {
         this.openBlocks.set(false);
         this.openBlocksOption.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ToolbarComponent, isStandalone: true, selector: "toolbar", inputs: { componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, supportedBlocks: { classPropertyName: "supportedBlocks", publicName: "supportedBlocks", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, addBlockCallback: { classPropertyName: "addBlockCallback", publicName: "addBlockCallback", isSignal: true, isRequired: true, transformFunction: null }, moveBlockPositionCallback: { classPropertyName: "moveBlockPositionCallback", publicName: "moveBlockPositionCallback", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ToolbarComponent, isStandalone: true, selector: "toolbar", inputs: { componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, supportedBlocks: { classPropertyName: "supportedBlocks", publicName: "supportedBlocks", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, addBlockCallback: { classPropertyName: "addBlockCallback", publicName: "addBlockCallback", isSignal: true, isRequired: true, transformFunction: null }, moveBlockPositionCallback: { classPropertyName: "moveBlockPositionCallback", publicName: "moveBlockPositionCallback", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="toolbar-buttons-container">
       <div
         class="toolbar-buttons mat-elevation-z4"
@@ -333,9 +333,9 @@ class ToolbarComponent {
         (moveBlockPosition)="moveBlockPosition($event)"
       ></toolbar-block-options>
     </ng-template>
-  `, isInline: true, styles: [":host .toolbar-buttons-container{position:relative;display:flex;gap:10px}:host .toolbar-buttons{cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:4px;margin-bottom:14px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-on-tertiary-container);background:var(--mat-sys-tertiary-container)}:host .toolbar-buttons:is(:hover,:focus){background:var(--mat-sys-surface-bright)}@media (min-width: 768px){:host{position:absolute;margin-left:-80px;top:0}}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ToolbarBlockOptionsComponent, selector: "toolbar-block-options", inputs: ["blockOptionActions"], outputs: ["handleAction", "moveBlockPosition"] }, { kind: "component", type: ToolbarBlocksComponent, selector: "toolbar-blocks", inputs: ["supportedBlocks"], outputs: ["addBlock"] }] });
+  `, isInline: true, styles: [":host .toolbar-buttons-container{position:relative;display:flex;gap:10px}:host .toolbar-buttons{cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:4px;margin-bottom:14px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-on-tertiary-container);background:var(--mat-sys-tertiary-container)}:host .toolbar-buttons:hover,:host .toolbar-buttons:focus{background:var(--mat-sys-surface-bright)}@media (min-width: 768px){:host{position:absolute;margin-left:-80px;top:0}}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ToolbarBlockOptionsComponent, selector: "toolbar-block-options", inputs: ["blockOptionActions"], outputs: ["handleAction", "moveBlockPosition"] }, { kind: "component", type: ToolbarBlocksComponent, selector: "toolbar-blocks", inputs: ["supportedBlocks"], outputs: ["addBlock"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toolbar', imports: [
                         CdkDragHandle,
@@ -399,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         (moveBlockPosition)="moveBlockPosition($event)"
       ></toolbar-block-options>
     </ng-template>
-  `, styles: [":host .toolbar-buttons-container{position:relative;display:flex;gap:10px}:host .toolbar-buttons{cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:4px;margin-bottom:14px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-on-tertiary-container);background:var(--mat-sys-tertiary-container)}:host .toolbar-buttons:is(:hover,:focus){background:var(--mat-sys-surface-bright)}@media (min-width: 768px){:host{position:absolute;margin-left:-80px;top:0}}\n"] }]
+  `, styles: [":host .toolbar-buttons-container{position:relative;display:flex;gap:10px}:host .toolbar-buttons{cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:4px;margin-bottom:14px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-on-tertiary-container);background:var(--mat-sys-tertiary-container)}:host .toolbar-buttons:hover,:host .toolbar-buttons:focus{background:var(--mat-sys-surface-bright)}@media (min-width: 768px){:host{position:absolute;margin-left:-80px;top:0}}\n"] }]
         }] });
 
 class BlockMovementService {
@@ -435,10 +435,10 @@ class BlockMovementService {
     removeBlockComponent(ngxEditor, index, clear = false) {
         return of(Array.from(this.componentRefMap.values())).pipe(filter((componentRefs) => clear || componentRefs.length !== 1), map((componentRefs) => componentRefs.find((componentRef) => ngxEditor.indexOf(componentRef.hostView) === index - 1)), map((componentRef) => this.componentRefMap.delete(componentRef?.instance ?? {})), tap((successful) => successful && ngxEditor.remove(index - 1)), defaultIfEmpty(false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BlockMovementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BlockMovementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BlockMovementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BlockMovementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BlockMovementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BlockMovementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -527,10 +527,10 @@ class EditorJsService {
             this.ngxEditor.clear();
         }), defaultIfEmpty(false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: EditorJsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: EditorJsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EditorJsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EditorJsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: EditorJsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EditorJsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -569,10 +569,10 @@ class ToolFabService {
     movePositionAction(action, index, formControlName) {
         return lastValueFrom(this.editorJsService.determineMovePositionAction(action, index, formControlName));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolFabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolFabService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolFabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolFabService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolFabService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolFabService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -601,10 +601,10 @@ class ToolbarFabDirective {
             this.autofocus() && this.onMouseEnter();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarFabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: ToolbarFabDirective, isStandalone: true, selector: "[toolbarFab]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: true, transformFunction: null }, componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarFabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: ToolbarFabDirective, isStandalone: true, selector: "[toolbarFab]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: true, transformFunction: null }, componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarFabDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarFabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[toolbarFab]',
@@ -620,10 +620,10 @@ class CleanPasteDataDirective {
         const text = event.clipboardData?.getData('text/plain');
         document.execCommand('insertText', false, text);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CleanPasteDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: CleanPasteDataDirective, isStandalone: true, selector: "[cleanPasteData]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CleanPasteDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: CleanPasteDataDirective, isStandalone: true, selector: "[cleanPasteData]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CleanPasteDataDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CleanPasteDataDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cleanPasteData]',
@@ -652,46 +652,58 @@ class HeaderBlockComponent {
     actionCallback(selectedAction) {
         this.savedAction.set(selectedAction);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeaderBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HeaderBlockComponent, isStandalone: true, selector: "header-block", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating" }, hostDirectives: [{ directive: i1$1.CdkDrag }], ngImport: i0, template: `
-    <ng-container [ngSwitch]="savedAction()">
-      <h1 *ngSwitchCase="'h1'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h1>
-      <h2 *ngSwitchCase="'h2'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h2>
-      <h3 *ngSwitchCase="'h3'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h3>
-      <h4 *ngSwitchCase="'h4'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h4>
-      <h5 *ngSwitchCase="'h5'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h5>
-      <h6 *ngSwitchCase="'h6'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h6>
-    </ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HeaderBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HeaderBlockComponent, isStandalone: true, selector: "header-block", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating" }, hostDirectives: [{ directive: i1$1.CdkDrag }], ngImport: i0, template: `
+@switch (savedAction()) {
+  @case ('h1') {
+    <h1>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h1>
+  }
+  @case ('h2') {
+    <h2>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h2>
+  }
+  @case ('h3') {
+    <h3>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h3>
+  }
+  @case ('h4') {
+    <h4>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h4>
+  }
+  @case ('h5') {
+    <h5>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h5>
+  }
+  @case ('h6') {
+    <h6>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h6>
+  }
+}
 
-    <ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
-      <span
-        controlAccessor
-        cleanPasteData
-        contentEditable
-        toolbarFab
-        [defaultValue]="formGroup().get(formControlName())?.value"
-        [actionCallback]="actionCallbackBind"
-        [blockOptionActions]="blockOptionActions()"
-        [autofocus]="autofocus()"
-        [formControlName]="formControlName()"
-        [componentContextPositionIndex]="sortIndex()"
-      ></span>
-    </ng-template>
-  `, isInline: true, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "directive", type: CleanPasteDataDirective, selector: "[cleanPasteData]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+<ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
+  <span
+    controlAccessor
+    cleanPasteData
+    contentEditable
+    toolbarFab
+    [defaultValue]="formGroup().get(formControlName())?.value"
+    [actionCallback]="actionCallbackBind"
+    [blockOptionActions]="blockOptionActions()"
+    [autofocus]="autofocus()"
+    [formControlName]="formControlName()"
+    [componentContextPositionIndex]="sortIndex()"
+  ></span>
+</ng-template>
+`, isInline: true, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "directive", type: CleanPasteDataDirective, selector: "[cleanPasteData]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeaderBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HeaderBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header-block', host: { class: 'cdk-drag-animating' }, hostDirectives: [CdkDrag], imports: [
                         ReactiveFormsModule,
@@ -699,46 +711,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         AutofocusDirective,
                         ToolbarFabDirective,
                         CleanPasteDataDirective,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgTemplateOutlet,
+                        NgTemplateOutlet
                     ], template: `
-    <ng-container [ngSwitch]="savedAction()">
-      <h1 *ngSwitchCase="'h1'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h1>
-      <h2 *ngSwitchCase="'h2'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h2>
-      <h3 *ngSwitchCase="'h3'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h3>
-      <h4 *ngSwitchCase="'h4'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h4>
-      <h5 *ngSwitchCase="'h5'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h5>
-      <h6 *ngSwitchCase="'h6'">
-        <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
-      </h6>
-    </ng-container>
+@switch (savedAction()) {
+  @case ('h1') {
+    <h1>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h1>
+  }
+  @case ('h2') {
+    <h2>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h2>
+  }
+  @case ('h3') {
+    <h3>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h3>
+  }
+  @case ('h4') {
+    <h4>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h4>
+  }
+  @case ('h5') {
+    <h5>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h5>
+  }
+  @case ('h6') {
+    <h6>
+      <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
+    </h6>
+  }
+}
 
-    <ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
-      <span
-        controlAccessor
-        cleanPasteData
-        contentEditable
-        toolbarFab
-        [defaultValue]="formGroup().get(formControlName())?.value"
-        [actionCallback]="actionCallbackBind"
-        [blockOptionActions]="blockOptionActions()"
-        [autofocus]="autofocus()"
-        [formControlName]="formControlName()"
-        [componentContextPositionIndex]="sortIndex()"
-      ></span>
-    </ng-template>
-  `, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"] }]
+<ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
+  <span
+    controlAccessor
+    cleanPasteData
+    contentEditable
+    toolbarFab
+    [defaultValue]="formGroup().get(formControlName())?.value"
+    [actionCallback]="actionCallbackBind"
+    [blockOptionActions]="blockOptionActions()"
+    [autofocus]="autofocus()"
+    [formControlName]="formControlName()"
+    [componentContextPositionIndex]="sortIndex()"
+  ></span>
+</ng-template>
+`, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"] }]
         }] });
 
 class ParagraphBlockComponent {
@@ -760,8 +782,8 @@ class ParagraphBlockComponent {
     actionCallback(action) {
         this.savedAction.update(() => action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ParagraphBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ParagraphBlockComponent, isStandalone: true, selector: "paragraph-block", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating" }, hostDirectives: [{ directive: i1$1.CdkDrag }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ParagraphBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ParagraphBlockComponent, isStandalone: true, selector: "paragraph-block", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating" }, hostDirectives: [{ directive: i1$1.CdkDrag }], ngImport: i0, template: `
     <ng-container [formGroup]="formGroup()">
       <p
         controlAccessor
@@ -779,7 +801,7 @@ class ParagraphBlockComponent {
     </ng-container>
   `, isInline: true, styles: [":host{display:block;position:relative}:host .small{font:var(--mat-sys-body-small)}:host .medium{font:var(--mat-sys-body-medium)}:host .large{font:var(--mat-sys-body-large)}:host .title-small{font:var(--mat-sys-title-small)}:host .title-medium{font:var(--mat-sys-title-medium)}:host .title-large{font:var(--mat-sys-title-large)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "directive", type: CleanPasteDataDirective, selector: "[cleanPasteData]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ParagraphBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ParagraphBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'paragraph-block', host: { class: 'cdk-drag-animating' }, hostDirectives: [CdkDrag], imports: [
                         ReactiveFormsModule,
@@ -872,10 +894,10 @@ class NgxEditorJs2Service {
     addBlocksToEditorJs(blocks) {
         return combineLatest(blocks.map((block) => this.editorJsService.addBlockComponent(block)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2Service, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2Service, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2Service, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2Service, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -918,14 +940,14 @@ class EditorJsComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: EditorJsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.5", type: EditorJsComponent, isStandalone: true, selector: "editor-js", inputs: { bootstrapEditorJs: { classPropertyName: "bootstrapEditorJs", publicName: "bootstrapEditorJs", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "ngxEditor", first: true, predicate: ["ngxEditor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EditorJsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: EditorJsComponent, isStandalone: true, selector: "editor-js", inputs: { bootstrapEditorJs: { classPropertyName: "bootstrapEditorJs", publicName: "bootstrapEditorJs", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "ngxEditor", first: true, predicate: ["ngxEditor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
       <ng-container #ngxEditor></ng-container>
     </div>
   `, isInline: true, styles: [":host{display:block}:host .block-list{min-height:60px}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: EditorJsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EditorJsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'editor-js', imports: [CdkDropList], template: `
     <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
@@ -984,8 +1006,8 @@ class ToolbarInlineComponent {
         document.execCommand('createLink', false, this.url);
         this.closeOverlayEmitter.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ToolbarInlineComponent, isStandalone: true, selector: "toolbar-inline", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeOverlayEmitter: "closeOverlay" }, host: { classAttribute: "mat-elevation-z24" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ToolbarInlineComponent, isStandalone: true, selector: "toolbar-inline", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeOverlayEmitter: "closeOverlay" }, host: { classAttribute: "mat-elevation-z24" }, ngImport: i0, template: `
     <div class="panel">
       @for (item of options; track $index) {
       <div class="inline-option" (click)="addInlineTag(item.action)">
@@ -1018,7 +1040,7 @@ class ToolbarInlineComponent {
     }
   `, isInline: true, styles: [":host{color:var(--mat-sys-on-secondary);background:var(--mat-sys-secondary);border-radius:8px}:host .panel{display:flex;width:230px;flex-wrap:wrap;gap:1px}:host .inline-option{cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}:host .block-option-input{width:197px;height:32px;border:none;outline:none;color:var(--mat-sys-on-secondary);background-color:transparent;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toolbar-inline', imports: [MatListModule, MatIconModule, FormsModule], host: { class: 'mat-elevation-z24' }, template: `
     <div class="panel">
@@ -1114,10 +1136,10 @@ class ToolbarInlineService {
             ]),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarInlineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarInlineService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarInlineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarInlineService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ToolbarInlineService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ToolbarInlineService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1138,15 +1160,15 @@ class NgxEditorJs2Component {
         this.ngxEditorJs2Service.loadBlocks$,
         fromEvent(document, 'selectionchange').pipe(debounceTime(200), switchMap((event) => this.inlineToolbarSerivce.determineToDisplayInlineToolbarBlock(event)))
     ]);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: NgxEditorJs2Component, isStandalone: true, selector: "ngx-editor-js2", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, requestBlocks: { classPropertyName: "requestBlocks", publicName: "requestBlocks", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { blocksRequested: "blocksRequested" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: NgxEditorJs2Component, isStandalone: true, selector: "ngx-editor-js2", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, requestBlocks: { classPropertyName: "requestBlocks", publicName: "requestBlocks", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { blocksRequested: "blocksRequested" }, ngImport: i0, template: `
     <editor-js
       [blocks]="blocks()"
       [bootstrapEditorJs]="bootstrapEditorJs$ | async"
     ></editor-js>
   `, isInline: true, dependencies: [{ kind: "component", type: EditorJsComponent, selector: "editor-js", inputs: ["bootstrapEditorJs", "blocks"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2Component, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-editor-js2',