@worktile/theia 16.3.3 → 16.4.0-next.0

package/fesm2022/worktile-theia.mjs

@@ -4,14 +4,14 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, HostBinding, InjectionToken, Pipe, TemplateRef, ViewChild, Directive, Input, HostListener, ViewContainerRef, Inject, Injectable, ElementRef, ChangeDetectorRef, Optional, SkipSelf, ContentChildren, forwardRef, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
 import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1 from 'slate-angular';
+import * as i1$1 from 'slate-angular';
 import { BaseElementComponent, BaseTextComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, IS_SAFARI, ELEMENT_TO_COMPONENT, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, defaultScrollSelectionIntoView, withAngular, SlateModule } from 'slate-angular';
 import { Range, Editor, Span, Path, Node, Element as Element$1, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import { map, cloneDeep, assign, defaults, groupBy, uniq, isEqual } from 'lodash';
 import { isObject, isArray, isString, isUndefined } from 'ngx-tethys/util';
 import { TheiaConverter } from '@atinc/selene';
 import { HistoryEditor, withHistory } from 'slate-history';
-import * as i1$1 from 'ngx-tethys/popover';
+import * as i1 from 'ngx-tethys/popover';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import * as i2$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
@@ -21,9 +21,9 @@ import * as i7 from 'ngx-tethys/action';
 import { ThyActionModule } from 'ngx-tethys/action';
 import * as i6 from 'ngx-tethys/dropdown';
 import { ThyDropdownDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
-import * as i8 from 'ngx-tethys/tooltip';
+import * as i7$1 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
-import * as i8$1 from 'ngx-tethys/divider';
+import * as i8 from 'ngx-tethys/divider';
 import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
 import { mixinUnsubscribe, MixinBase, ScrollToService } from 'ngx-tethys/core';
 import { isKeyHotkey } from 'is-hotkey';
@@ -34,13 +34,13 @@ import { ThyInputModule } from 'ngx-tethys/input';
 import * as i10 from 'ngx-tethys/empty';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ENTER } from '@angular/cdk/keycodes';
-import * as i13 from 'ng-codemirror';
+import * as i12 from 'ng-codemirror';
 import { CodeMirrorComponent, CodemirrorModule } from 'ng-codemirror';
 import * as i1$2 from 'ngx-tethys/notify';
 import { ThyNotifyModule } from 'ngx-tethys/notify';
-import * as i9 from 'ngx-tethys/resizable';
+import * as i8$1 from 'ngx-tethys/resizable';
 import { ThyResizableModule } from 'ngx-tethys/resizable';
-import * as i10$1 from 'ngx-tethys/switch';
+import * as i9 from 'ngx-tethys/switch';
 import { ThySwitchModule } from 'ngx-tethys/switch';
 import * as i5 from 'ngx-tethys/color-picker';
 import { ThyColorPickerModule } from 'ngx-tethys/color-picker';
@@ -50,7 +50,7 @@ import { ThyAlertModule } from 'ngx-tethys/alert';
 import * as i4$1 from 'ngx-tethys/image';
 import { ThyImageDirective, ThyImageModule } from 'ngx-tethys/image';
 import { ThyUploadStatus } from 'ngx-tethys/upload';
-import * as i9$1 from 'ngx-tethys/progress';
+import * as i8$2 from 'ngx-tethys/progress';
 import { ThyProgressModule } from 'ngx-tethys/progress';
 import isUrl from 'is-url';
 import * as i3 from 'ngx-tethys/form';
@@ -59,7 +59,7 @@ import * as i5$1 from 'ngx-tethys/shared';
 import { ThySharedModule } from 'ngx-tethys/shared';
 import * as i6$2 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
-import * as i7$1 from 'ngx-tethys/input-number';
+import * as i7$2 from 'ngx-tethys/input-number';
 import { ThyInputNumberModule } from 'ngx-tethys/input-number';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
@@ -115,13 +115,13 @@ class TheDefaultElementComponent extends TheBaseElementComponent {
         return this.element?.indent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[theDefaultElement]',
-                    template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>',
+                    template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { indent: [{
@@ -884,13 +884,13 @@ class TheTextComponent extends BaseTextComponent {
         this.applyTextMark();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: `<slate-leaves [context]="context" [viewContext]="viewContext"></slate-leaves>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateLeaves, selector: "slate-leaves", inputs: ["context"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theText]',
-                    template: `<slate-leaves [context]="context" [viewContext]="viewContext"></slate-leaves>`,
+                    template: ``,
                     host: {
                         'data-slate-node': 'text'
                     }
@@ -2840,13 +2840,13 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             .withPush(false)
             .withPositions([bottomPosition, topPosition]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-dropdown', template: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }], iconModeTemplate: [{
@@ -2897,7 +2897,7 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
             (click)="execute($event)"
         ></a>
         <ng-template #tooltip let-data> {{ data?.name }} {{ data?.shortcutKey }} </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
@@ -3251,7 +3251,7 @@ class TheContextService {
         this.windowResizeObserver = this.elementResize(document.documentElement, this.windowResized$);
     }
     elementResize(element, subject) {
-        let previousContainerRect = element.getBoundingClientRect();
+        let previousContainerRect = { width: 0, height: 0 };
         const resizeObserver = new ResizeObserver(entires => {
             const currentRect = entires[0].contentRect;
             const result = { entry: entires[0], widthChanged: false, heightChanged: false };
@@ -5585,13 +5585,13 @@ class TheTableSelectComponent {
             this.maxRowIndex = -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\n    <span\n      *ngFor=\"let item of tableData; let colIndex = index\"\n      [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n      (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n    >\n    </span>\n  </div>\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-select', template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\n    <span\n      *ngFor=\"let item of tableData; let colIndex = index\"\n      [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n      (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n    >\n    </span>\n  </div>\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { optionsParam: [{
+        }], ctorParameters: function () { return [{ type: i1.ThyPopoverRef }]; }, propDecorators: { optionsParam: [{
                 type: Input
             }], editor: [{
                 type: Input
@@ -6146,13 +6146,13 @@ class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i6$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: i6.ThyDropdownMenuGroupComponent, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: i10.ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: i1$1.ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "component", type: TheTableSelectComponent, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i6$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: i6.ThyDropdownMenuGroupComponent, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: i10.ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: i1.ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "component", type: TheTableSelectComponent, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-plugin-menu', template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { dropdownTriggers: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ThyPopoverRef }]; }, propDecorators: { dropdownTriggers: [{
                 type: ViewChildren,
                 args: ['dropdownTriggers', { read: ThyDropdownDirective }]
             }], containerClassName: [{
@@ -6317,8 +6317,8 @@ class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
@@ -6326,7 +6326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                         class: 'the-toolbar-dropdown-container verticalAlign',
                         '[class.hide]': '!active'
                     }, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
             }], handleDocumentMouseDown: [{
@@ -7329,7 +7329,7 @@ class TheBlockquoteComponent extends TheBaseElementComponent {
         this.cdr = cdr;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
             type: Component,
@@ -7421,7 +7421,7 @@ class TheCodeComponent extends TheBaseElementComponent {
     get isToolbarOpen() {
         return this.toolbarPopoverRef && this.toolbarPopoverRef.getOverlayRef() && this.toolbarPopoverRef.getOverlayRef().hasAttached();
     }
-    constructor(elementRef, cdr, thyNotifyService, contextService, ngZone, thyPopover, viewContainerRef, overlay) {
+    constructor(elementRef, cdr, thyNotifyService, contextService, ngZone, thyPopover, overlay) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
@@ -7429,7 +7429,6 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.contextService = contextService;
         this.ngZone = ngZone;
         this.thyPopover = thyPopover;
-        this.viewContainerRef = viewContainerRef;
         this.overlay = overlay;
         this.startRenderCodemirror = false;
         this.dropdownMode = DropdownMode;
@@ -7627,13 +7626,13 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i8$1.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "component", type: i8$1.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i9.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i12.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { toolbar: [{
+            args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: i1.ThyPopover }, { type: i2$1.Overlay }]; }, propDecorators: { toolbar: [{
                 type: ViewChild,
                 args: ['toolbar', { read: TemplateRef, static: true }]
             }], codemirror: [{
@@ -7742,7 +7741,7 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
         ColorEditor.setColor(this.editor, this.selectedColor, this.type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"toolbarItem.name\"\n  thyTooltipPlacement=\"top\"\n  thyColorPicker\n  thyPlacement=\"bottomLeft\"\n  [(ngModel)]=\"selectedColor\"\n  (ngModelChange)=\"changeColor($event)\"\n  (mousedown)=\"preventDefault($event)\"\n>\n  <thy-icon\n    [thyIconName]=\"toolbarItem.icon\"\n    thyIconType=\"twotone\"\n    [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n  ></thy-icon>\n  <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"toolbarItem.name\"\n  thyTooltipPlacement=\"top\"\n  thyColorPicker\n  thyPlacement=\"bottomLeft\"\n  [(ngModel)]=\"selectedColor\"\n  (ngModelChange)=\"changeColor($event)\"\n  (mousedown)=\"preventDefault($event)\"\n>\n  <thy-icon\n    [thyIconName]=\"toolbarItem.icon\"\n    thyIconType=\"twotone\"\n    [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n  ></thy-icon>\n  <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
@@ -8877,7 +8876,7 @@ class TheHrComponent extends TheBaseElementComponent {
             <hr class="the-hr" />
             <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheHrComponent, decorators: [{
             type: Component,
@@ -8951,7 +8950,7 @@ class TheImageComponent extends TheBaseElementComponent {
             ? this.layoutDefaultWidth
             : this.imageEntry.width;
     }
-    constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, viewContainerRef, imageGroupComponent) {
+    constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, imageGroupComponent) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.imageUploaderService = imageUploaderService;
@@ -8959,7 +8958,6 @@ class TheImageComponent extends TheBaseElementComponent {
         this.theContextService = theContextService;
         this.thyPopover = thyPopover;
         this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
         this.imageGroupComponent = imageGroupComponent;
         this.naturalWidth = 0;
         this.naturalHeight = 0;
@@ -9330,16 +9328,16 @@ class TheImageComponent extends TheBaseElementComponent {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2$1.Overlay }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i8$2.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n" }]
+            args: [{ selector: 'the-image, [theImage]', template: "<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [THE_UPLOAD_SERVICE_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i4$1.ThyImageGroupComponent }]; }, propDecorators: { imageContent: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1.ThyPopover }, { type: i2$1.Overlay }, { type: i4$1.ThyImageGroupComponent }]; }, propDecorators: { imageContent: [{
                 type: ViewChild,
                 args: ['imageContent']
             }], img: [{
@@ -9534,7 +9532,7 @@ class TheInlineCodeComponent extends TheBaseElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
-        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
             type: Component,
@@ -9637,7 +9635,7 @@ class TheLinkHoverComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
             type: Component,
@@ -9717,13 +9715,13 @@ class TheLinkEditComponent {
             form.validator.setElementErrorMessage(`link`, '请输入正确的链接');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i6$1.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: i6$2.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i1.ThyPopoverRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }], tag: [{
@@ -9748,13 +9746,12 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
     get linkEditOpened() {
         return this.thyPopoverEditRef && this.thyPopoverEditRef.componentInstance;
     }
-    constructor(elementRef, cdr, thyPopover, overlay, viewContainerRef) {
+    constructor(elementRef, cdr, thyPopover, overlay) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.thyPopover = thyPopover;
         this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
         this.beforeContextChange = (value) => {
             if (this.thyPopoverEditRef && this.thyPopoverEditRef.componentInstance) {
                 let { originText } = this.thyPopoverEditRef.componentInstance;
@@ -9858,7 +9855,7 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
         this.close(LinkCloseTypes.destroy);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
@@ -9867,7 +9864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                     selector: '[TheBaseLinkComponent]',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { mousedownHandle: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ThyPopover }, { type: i2$1.Overlay }]; }, propDecorators: { mousedownHandle: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -9881,7 +9878,7 @@ class TheLinkComponent extends TheBaseLinkComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
-        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: Component,
@@ -10539,7 +10536,7 @@ class TheNumberedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheNumberedListComponent, decorators: [{
             type: Component,
@@ -10571,7 +10568,7 @@ class TheBulletedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBulletedListComponent, decorators: [{
             type: Component,
@@ -10660,7 +10657,7 @@ class TheListItemComponent extends TheBaseElementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListItemComponent, decorators: [{
             type: Component,
@@ -11474,8 +11471,7 @@ class TheTableRowComponent extends TheBaseElementComponent {
         <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
             {{ rowNumber }}
         </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableRowComponent, decorators: [{
             type: Component,
@@ -11485,7 +11481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
         <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
             {{ rowNumber }}
         </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { height: [{
@@ -11582,13 +11577,13 @@ class TheToolbarGroupComponent {
             this.groupPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }], menus: [{
@@ -11738,13 +11733,13 @@ class TheContextMenuComponent {
         this.wrap = true;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$2.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
                 type: Input
             }], actionHandle: [{
                 type: Input
@@ -12573,12 +12568,12 @@ class TheTableContextMenuService {
             return this.menuRef.afterClosed();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1$1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: TableStore }, { type: i1$1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
+        }], ctorParameters: function () { return [{ type: TableStore }, { type: i1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
 class TableFreezeColumnPipe {
     transform(table, tablePluginOptions) {
@@ -12671,7 +12666,7 @@ class TheTableOptionsComponent {
             Transforms.setNodes(this.editor, { header: null }, { at: rowPath });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
@@ -12705,7 +12700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                         class: 'the-table-options'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { editor: [{
+        }], ctorParameters: function () { return [{ type: i1.ThyPopoverRef }]; }, propDecorators: { editor: [{
                 type: Input
             }] } });
 
@@ -12845,13 +12840,13 @@ class TheTableToolbarComponent {
             viewContainerRef: this.viewContainerRef
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i1.ThyPopover }, { token: i1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tableStore: [{
+        }], ctorParameters: function () { return [{ type: i1.ThyPopover }, { type: i1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tableStore: [{
                 type: Input
             }], tableElement: [{
                 type: Input
@@ -12993,12 +12988,12 @@ class TableService {
             e.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService, deps: [{ token: i1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }]; } });
 
 function calculateAnchorPositionInCell(editor, at) {
     at = at || editor.selection.anchor;
@@ -13281,7 +13276,7 @@ class TheInsertMarkComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, ngImport: i0, template: "<div\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"insert($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [attr.data-dot-type]=\"type\"\n    [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, ngImport: i0, template: "<div\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"insert($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [attr.data-dot-type]=\"type\"\n    [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
@@ -13319,6 +13314,7 @@ class TheTableComponent extends TheBaseElementComponent {
         super.onContextChange();
         if (this.initialized) {
             Promise.resolve().then(() => {
+                this.isStickyColumn = this.freezeColumnPipe.transform(this.element, this.tablePluginOptions);
                 this.tableStore.emitTableChange();
                 this.tableStore.setSelectedColumnsAndRowIndex();
                 this.bindTableScrollingShadow();
@@ -13353,6 +13349,9 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
+        this.getOutletElement = () => {
+            return this.tbodyElement.nativeElement;
+        };
         this.getColControlButtonWidth = () => {
             let result = 0;
             result += this.element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
@@ -13416,6 +13415,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 blockCardElement.classList.add(`slate-block-card-${this.element.type}`);
             }
             this.tableStore.initEditor(this.editor);
+            this.isStickyColumn = this.freezeColumnPipe.transform(this.element, this.tablePluginOptions);
             this.subscribeCellsChange();
             this.subscribeCellPositionChange();
             this.listenTableContextMenuEvent();
@@ -13578,7 +13578,7 @@ class TheTableComponent extends TheBaseElementComponent {
             return TheEditor.toDOMNode(this.editor, item);
         });
         [...headerColumnElements, headerColControl].map(item => {
-            if (this.freezeColumnPipe.transform(this.element, this.tablePluginOptions)) {
+            if (this.isStickyColumn) {
                 this.renderer.addClass(item, 'the-sticky-cell');
             }
             else {
@@ -13677,8 +13677,7 @@ class TheTableComponent extends TheBaseElementComponent {
         this.isRightShadow = scrollLeft + clientWidth < scrollWidth;
         const rows = nativeElement.querySelectorAll(`tr`);
         const stickyCells = Array.from(rows).map(item => item.querySelector('th.the-table-col-controls') || item.querySelector('td.slate-element-table-cell'));
-        const isColumnHeader = this.freezeColumnPipe.transform(this.element, this.tablePluginOptions);
-        const elements = isColumnHeader ? stickyCells : [nativeElement.parentElement];
+        const elements = this.isStickyColumn ? stickyCells : [nativeElement.parentElement];
         if (this.isLeftShadow) {
             elements.forEach(element => {
                 element.classList.add('the-table-left-shadow');
@@ -14058,7 +14057,7 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "isStickyColumn", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
             TableStore,
             TableService,
             TheTableContextMenuService,
@@ -14070,7 +14069,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 provide: THE_TABLE_COMPONENT_TOKEN,
                 useExisting: TheTableComponent
             }
-        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow && !isMobileMode\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (pointerdown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n      </tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "component", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }] }); }
+        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow && !isMobileMode\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (pointerdown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n      </tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "component", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
@@ -14088,10 +14087,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                         }
                     ], host: {
                         '[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
-                        '[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
+                        '[class.the-table-with-sticky-column]': 'isStickyColumn',
                         '[class.the-numbered-table]': 'element?.options?.numberedColumn',
                         '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput'
-                    }, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow && !isMobileMode\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (pointerdown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n      </tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n" }]
+                    }, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow && !isMobileMode\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (pointerdown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n      </tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }, { type: TheModeConfig, decorators: [{
                     type: Inject,
                     args: [THE_MODE_TOKEN]
@@ -14528,21 +14527,22 @@ class TheTdComponent extends TheBaseElementComponent {
             this.useState();
         }
     }
-    constructor(elementRef, cdr, renderer, viewContainerRef, ngZone, injector, overlay, resizingStore, scrollDispatcher, freezeColumnPipe) {
+    constructor(elementRef, cdr, renderer, ngZone, injector, overlay, resizingStore, scrollDispatcher) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.renderer = renderer;
-        this.viewContainerRef = viewContainerRef;
         this.ngZone = ngZone;
         this.injector = injector;
         this.overlay = overlay;
         this.resizingStore = resizingStore;
         this.scrollDispatcher = scrollDispatcher;
-        this.freezeColumnPipe = freezeColumnPipe;
         this.destroy$ = new Subject();
         this.tableOptions = new TableOptions();
         this.cellInnerMinHeight = null;
+        this.getOutletElement = () => {
+            return this.cellInner.nativeElement;
+        };
     }
     ngOnInit() {
         super.ngOnInit();
@@ -15095,13 +15095,16 @@ class TheTdComponent extends TheBaseElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2$1.Overlay }, { token: ColumnResizingStore }, { token: i2$1.ScrollDispatcher }, { token: TableFreezeColumnPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2$1.Overlay }, { token: ColumnResizingStore }, { token: i2$1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td[theTd]', providers: [ColumnResizingStore], template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2$1.Overlay }, { type: ColumnResizingStore }, { type: i2$1.ScrollDispatcher }, { type: TableFreezeColumnPipe }]; }, propDecorators: { backgroundColor: [{
+            args: [{ selector: 'td[theTd]', providers: [ColumnResizingStore], template: "<div #cellInner>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2$1.Overlay }, { type: ColumnResizingStore }, { type: i2$1.ScrollDispatcher }]; }, propDecorators: { cellInner: [{
+                type: ViewChild,
+                args: ['cellInner', { read: ElementRef, static: true }]
+            }], backgroundColor: [{
                 type: HostBinding,
                 args: ['style.backgroundColor']
             }], colspan: [{
@@ -15157,7 +15160,7 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
         });
         return this.tableSelectRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
@@ -15172,7 +15175,7 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
         >
             <thy-icon class="link-down-icon font-size-sm text-desc ml-1" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i7$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
@@ -15197,7 +15200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                         class: 'the-toolbar-dropdown-container'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ThyPopover }, { type: i2$1.Overlay }]; } });
 
 /**
  * Clear the content of the given node
@@ -15234,6 +15237,15 @@ const isLegalTable = (editor, element, path) => {
         return false;
     }
 };
+const isInTable = (editor, element) => {
+    const table = NODE_TO_PARENT.get(element);
+    return table.type === ElementKinds.table;
+};
+const isInTableRow = (editor, element) => {
+    const tableRow = NODE_TO_PARENT.get(element);
+    const table = tableRow && NODE_TO_PARENT.get(tableRow);
+    return table && table.type === ElementKinds.table && tableRow.type === ElementKinds.tableRow;
+};
 
 const normalizeTable = (table) => {
     const normalizedNodes = [];
@@ -15682,10 +15694,10 @@ const withTable = (editor) => {
         if (element.type === ElementKinds.table) {
             return TheTableComponent;
         }
-        if (element.type === ElementKinds.tableRow && isLegalTable(editor, element)) {
+        if (element.type === ElementKinds.tableRow && isInTable(editor, element)) {
             return TheTableRowComponent;
         }
-        if (element.type === ElementKinds.tableCell && isLegalTable(editor, element)) {
+        if (element.type === ElementKinds.tableCell && isInTableRow(editor, element)) {
             return TheTdComponent;
         }
         return renderElement(element);
@@ -15810,7 +15822,7 @@ class TheTodoItemComponent extends TheBaseElementComponent {
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
-    `, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTodoItemComponent, decorators: [{
             type: Component,
@@ -16466,6 +16478,10 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         }
     }
     writeValue(value) {
+        const firstNil = value === null && !this.editorValue;
+        if (firstNil) {
+            return;
+        }
         const data = dataDeserialize(this.theOptions?.mode, value);
         // data-deserialize
         this.editorValue = data;
@@ -16606,7 +16622,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
                 useExisting: forwardRef(() => TheEditorComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!theOptions?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': theOptions?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': theOptions?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    (ngModelChange)=\"valueChange($event)\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"theOptions?.placeholder\"\n    [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [isStrictDecorate]=\"false\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    (mousedown)=\"mousedown($event)\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n  ></slate-editable>\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!theOptions?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!theOptions?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': theOptions?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': theOptions?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    (ngModelChange)=\"valueChange($event)\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"theOptions?.placeholder\"\n    [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [isStrictDecorate]=\"false\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    (mousedown)=\"mousedown($event)\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n  ></slate-editable>\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!theOptions?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,