@worktile/theia 13.0.1 → 13.0.2

package/fesm2020/worktile-theia.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Injectable, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -13,7 +13,7 @@ import { HistoryEditor, withHistory } from 'slate-history';
 import { Subject, fromEvent, timer, combineLatest, Observable, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopover } from 'ngx-tethys/popover';
-import * as i3 from 'ngx-tethys/icon';
+import * as i2 from 'ngx-tethys/icon';
 import { ThyIconModule } from 'ngx-tethys/icon';
 import * as i5 from 'ngx-tethys/input';
 import { ThyInputModule } from 'ngx-tethys/input';
@@ -32,26 +32,30 @@ import * as i5$1 from 'ngx-tethys/image';
 import { ThyImageModule } from 'ngx-tethys/image';
 import * as i7 from 'ngx-tethys/progress';
 import { ThyProgressModule } from 'ngx-tethys/progress';
-import * as i3$1 from 'ngx-tethys/nav';
+import * as i9 from 'ngx-tethys/nav';
 import { ThyNavModule } from 'ngx-tethys/nav';
-import * as i5$2 from 'ngx-tethys/tooltip';
+import * as i3$1 from 'ngx-tethys/action';
+import { ThyActionModule } from 'ngx-tethys/action';
+import * as i4$1 from 'ngx-tethys/divider';
+import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
+import * as i4$2 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
 import * as i8 from 'ng-codemirror';
 import { CodeMirrorComponent, CodemirrorModule } from 'ng-codemirror';
 import * as i1$4 from 'ngx-tethys/notify';
 import { ThyNotifyModule } from 'ngx-tethys/notify';
-import * as i2$2 from 'ngx-tethys/action-menu';
-import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
-import * as i5$3 from 'ngx-tethys/switch';
+import * as i5$2 from 'ngx-tethys/dropdown';
+import { ThyDropdownModule } from 'ngx-tethys/dropdown';
+import * as i4$3 from 'ngx-tethys/switch';
 import { ThySwitchModule } from 'ngx-tethys/switch';
-import * as i9 from 'ngx-tethys/resizable';
+import * as i9$1 from 'ngx-tethys/resizable';
 import { ThyResizableModule } from 'ngx-tethys/resizable';
 import isUrl from 'is-url';
 import * as i1$5 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
-import * as i2$3 from 'ngx-tethys/form';
+import * as i2$2 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
-import * as i5$4 from 'ngx-tethys/shared';
+import * as i5$3 from 'ngx-tethys/shared';
 import { ThySharedModule } from 'ngx-tethys/shared';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
@@ -702,7 +706,7 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-color-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n" }]
@@ -2412,7 +2416,7 @@ class TheConversionHintComponent {
     }
 }
 TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$2.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$2.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$2.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$2.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheConversionHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
@@ -2750,40 +2754,6 @@ const getAllNodesByType = (nodes, type) => {
     return allNodes.filter(item => item.type && item.type === type);
 };
 
-class NavSplitLineComponent {
-    constructor() {
-        this.mode = ToolbarItemMode.vertical;
-        this.theNavSplitLine = true;
-    }
-    get horizontal() {
-        return this.mode === ToolbarItemMode.horizontal;
-    }
-    get vertical() {
-        return this.mode === ToolbarItemMode.vertical;
-    }
-    ngOnInit() { }
-}
-NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NavSplitLineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nav-split-line',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
-                type: Input
-            }], theNavSplitLine: [{
-                type: HostBinding,
-                args: ['class.the-nav-split-line']
-            }], horizontal: [{
-                type: HostBinding,
-                args: ['class.horizontal']
-            }], vertical: [{
-                type: HostBinding,
-                args: ['class.vertical']
-            }] } });
-
 class TheImageComponent extends TheBaseElementComponent {
     constructor(elementRef, sanitizer, imageUploaderService, cdr, theContextService, thyPopover, overlay, thyImageService, viewContainerRef) {
         super(elementRef, cdr);
@@ -3123,10 +3093,10 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i5$1.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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 }], 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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\">\n        <img #img [ngStyle]=\"{'width.px': imageBindingWidth}\" class=\"main-image\" (load)=\"imageLoaded($event)\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i7.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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 }], 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.pointer]=\"!selection\">\n        <img\n            #img\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            [src]=\"imageEntry.thumbUrl\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    thyAction\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=\"mx-2\" thyColor=\"light\"></thy-divider>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i7.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i9.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i4$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.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: "13.3.8", 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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\">\n        <img #img [ngStyle]=\"{'width.px': imageBindingWidth}\" class=\"main-image\" (load)=\"imageLoaded($event)\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n" }]
+            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.pointer]=\"!selection\">\n        <img\n            #img\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            [src]=\"imageEntry.thumbUrl\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    thyAction\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=\"mx-2\" thyColor=\"light\"></thy-divider>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [THE_UPLOAD_SERVICE_TOKEN]
@@ -4475,7 +4445,7 @@ TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             <hr class="the-hr" />
             <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         </div>
-    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheHrComponent, decorators: [{
             type: Component,
             args: [{
@@ -6916,7 +6886,7 @@ class TheBaseToolbarDropdown extends TheBaseToolbarItem {
         this.mode = DropdownMode.text;
     }
     get defaultDropdownItem() {
-        const activeItem = this.dropdownItemKey && this.menus.find((item) => item.key === this.dropdownItemKey);
+        const activeItem = this.dropdownItemKey && this.menus.find(item => item.key === this.dropdownItemKey);
         return activeItem ? activeItem : this.menus[0];
     }
     selectionChange(editor) {
@@ -7036,12 +7006,12 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, 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: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, 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: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a\n        href=\"javascript:;\"\n        class=\"icon-mode link-with-down\"\n        thyAction\n        [thyActionIcon]=\"activeMenuItem?.icon\"\n        [thyTooltip]=\"activeMenuItem?.name\"\n        thyTooltipPlacement=\"top\"\n    >\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a href=\"javascript:;\" class=\"text-mode\" thyAction [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n        <thy-icon class=\"font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\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                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <thy-icon *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                <span *ngIf=\"menu.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n        </ng-container>\n    </div>\n</ng-template>\n", components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$2.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$2.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { type: i5$2.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-dropdown', host: {
                         class: 'the-toolbar-dropdown-container'
-                    }, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n" }]
+                    }, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a\n        href=\"javascript:;\"\n        class=\"icon-mode link-with-down\"\n        thyAction\n        [thyActionIcon]=\"activeMenuItem?.icon\"\n        [thyTooltip]=\"activeMenuItem?.name\"\n        thyTooltipPlacement=\"top\"\n    >\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a href=\"javascript:;\" class=\"text-mode\" thyAction [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n        <thy-icon class=\"font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\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                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <thy-icon *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                <span *ngIf=\"menu.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\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: { itemMousedownHandle: [{
                 type: Input
             }], iconModeTemplate: [{
@@ -7266,10 +7236,10 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\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\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<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: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\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=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { type: i5$3.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation align-items-center\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\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\">\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\" (mousedown)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n        href=\"javascript:;\"\n        class=\"remove-link\"\n        thyAction\n        thyActionIcon=\"trash\"\n        thyTooltip=\"\u5220\u9664\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"onDelete($event)\"\n    ></a>\n</div>\n\n<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: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\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=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { type: i4$3.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i4$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { type: i9$1.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9$1.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\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\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<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: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\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=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n" }]
+            args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div contenteditable=\"false\" class=\"the-code-block-operation align-items-center\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\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\">\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\" (mousedown)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n        href=\"javascript:;\"\n        class=\"remove-link\"\n        thyAction\n        thyActionIcon=\"trash\"\n        thyTooltip=\"\u5220\u9664\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"onDelete($event)\"\n    ></a>\n</div>\n\n<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: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\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=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: TheModeConfig, decorators: [{
                     type: Inject,
                     args: [THE_MODE_TOKEN]
@@ -7505,7 +7475,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$3.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$3.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$3.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$4.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$3.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
@@ -8541,32 +8511,32 @@ class TheTableOptionsComponent {
 }
 TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
 TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: `
-        <thy-action-menu class="table-drop-menu">
+        <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
-                <a thyActionMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
-                    <span thyActionMenuItemName>{{ option.name }}</span>
-                    <span thyActionMenuItemExtendIcon class="text-primary" *ngIf="option.isActive">
+                <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
+                    <span thyDropdownMenuItemName>{{ option.name }}</span>
+                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
                         <thy-icon thyIconName="check"></thy-icon>
                     </span>
                 </a>
             </ng-container>
-        </thy-action-menu>
-    `, isInline: true, components: [{ type: i2$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+        </div>
+    `, isInline: true, components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$2.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-options',
                     template: `
-        <thy-action-menu class="table-drop-menu">
+        <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
-                <a thyActionMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
-                    <span thyActionMenuItemName>{{ option.name }}</span>
-                    <span thyActionMenuItemExtendIcon class="text-primary" *ngIf="option.isActive">
+                <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
+                    <span thyDropdownMenuItemName>{{ option.name }}</span>
+                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
                         <thy-icon thyIconName="check"></thy-icon>
                     </span>
                 </a>
             </ng-container>
-        </thy-action-menu>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
@@ -8669,7 +8639,7 @@ class TheTableToolbarComponent {
     openSelectColor(event) {
         event.preventDefault();
         event.stopPropagation();
-        const element = event.target.closest('.thy-icon-nav-link');
+        const element = event.target.closest('.thy-action');
         const isHeader = TableEditor.isActiveHeader(this.editor);
         this.ngZone.run(() => {
             this.colorSelectService.toggleColorSelect(element, this.selectedColor, BackgroundColors, {
@@ -8706,10 +8676,12 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, host: { classAttribute: "d-flex align-items-center" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n        *ngIf=\"!item.invisibility\"\n        href=\"javascript:;\"\n        thyAction\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item.name\"\n        (mousedown)=\"item.actionHandle()\"\n    ></a>\n</ng-container>\n<thy-divider *ngIf=\"!isActiveSelect && isShowSplitLine\" class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n<a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n</a>\n\n<ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <button class=\"table-options mr-0\" thyButton=\"default\" thySize=\"md\" (mousedown)=\"openTableOptionMenu($event)\">\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n</ng-container>\n\n<thy-divider *ngIf=\"deleteIcon\" class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n<a\n    *ngIf=\"deleteIcon\"\n    href=\"javascript:;\"\n    class=\"danger\"\n    thyAction\n    [thyActionIcon]=\"deleteIcon\"\n    [thyTooltip]=\"iconName\"\n    (mousedown)=\"onDelete($event)\"\n    (mouseenter)=\"onEnterDelete($event)\"\n    (mouseleave)=\"onLeaveDelete($event)\"\n></a>\n", components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i4$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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: "13.3.8", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-table-toolbar', template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n" }]
+            args: [{ selector: 'the-table-toolbar', host: {
+                        class: 'd-flex align-items-center'
+                    }, template: "<ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n        *ngIf=\"!item.invisibility\"\n        href=\"javascript:;\"\n        thyAction\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item.name\"\n        (mousedown)=\"item.actionHandle()\"\n    ></a>\n</ng-container>\n<thy-divider *ngIf=\"!isActiveSelect && isShowSplitLine\" class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n<a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n</a>\n\n<ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <button class=\"table-options mr-0\" thyButton=\"default\" thySize=\"md\" (mousedown)=\"openTableOptionMenu($event)\">\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n</ng-container>\n\n<thy-divider *ngIf=\"deleteIcon\" class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n<a\n    *ngIf=\"deleteIcon\"\n    href=\"javascript:;\"\n    class=\"danger\"\n    thyAction\n    [thyActionIcon]=\"deleteIcon\"\n    [thyTooltip]=\"iconName\"\n    (mousedown)=\"onDelete($event)\"\n    (mouseenter)=\"onEnterDelete($event)\"\n    (mouseleave)=\"onLeaveDelete($event)\"\n></a>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
                 type: Input
             }], isActiveSelect: [{
@@ -8766,10 +8738,10 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i2$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, 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        <a\n            *ngIf=\"!menuItem.invisibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n", components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$2.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { type: i5$2.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { type: i5$2.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-contextmenu', template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n" }]
+            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"!menuItem.invisibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
                 type: Input
             }], actionHandle: [{
@@ -9142,7 +9114,7 @@ class TheInsertMarkComponent {
     ngOnDestroy() { }
 }
 TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-temp-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-temp-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", directives: [{ type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-temp-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-temp-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", directives: [{ type: i4$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-temp-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-temp-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" }]
@@ -9628,7 +9600,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: TheTableToken,
             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 }], usesInheritance: true, ngImport: i0, template: "<!-- \u7C7B\u540D the-temp-*: \u4E34\u65F6\u89E3\u51B3\u56E0\u53D7portal\u5F71\u54CD\u8868\u683C\u6837\u5F0F\u95EE\u9898\uFF0C\u540E\u671F\u6539\u56DEthe-* -->\n<div\n    class=\"the-temp-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-temp-table-with-controls': isInTable,\n        'the-temp-numbered-column-container': element?.options?.numberedColumn,\n        'the-temp-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-temp-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-temp-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-temp-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                active: isSelectedAllCell,\n                dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n            }\"\n        >\n            <div class=\"the-temp-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n            <div class=\"the-temp-table-corner-controls-insert-row-marker\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-temp-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-temp-table-row-controls\">\n            <div class=\"the-temp-table-row-controls-inner\">\n                <div\n                    class=\"the-temp-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-temp-table-row-controls-button the-temp-table-controls-button\"\n                        ></button>\n                    </ng-container>\n                    <ng-container *ngIf=\"element?.options?.numberedColumn\">\n                        <div\n                            [contentEditable]=\"false\"\n                            contenteditable=\"false\"\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            class=\"the-temp-table-numbered-controls-button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                        >\n                            <p class=\"row-number d-flex align-items-center\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-temp-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-temp-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-temp-table\" #theTable [ngClass]=\"{ 'the-temp-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-temp-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-temp-table-col-controls\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark *ngIf=\"isInTable\" type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\">\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        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], 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 }], usesInheritance: true, ngImport: i0, template: "<!-- \u7C7B\u540D the-temp-*: \u4E34\u65F6\u89E3\u51B3\u56E0\u53D7portal\u5F71\u54CD\u8868\u683C\u6837\u5F0F\u95EE\u9898\uFF0C\u540E\u671F\u6539\u56DEthe-* -->\n<div\n    class=\"the-temp-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-temp-table-with-controls': isInTable,\n        'the-temp-numbered-column-container': element?.options?.numberedColumn,\n        'the-temp-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-temp-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-temp-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-temp-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                active: isSelectedAllCell,\n                dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n            }\"\n        >\n            <div class=\"the-temp-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n            <div class=\"the-temp-table-corner-controls-insert-row-marker\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-temp-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-temp-table-row-controls\">\n            <div class=\"the-temp-table-row-controls-inner\">\n                <div\n                    class=\"the-temp-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-temp-table-row-controls-button the-temp-table-controls-button\"\n                        ></button>\n                    </ng-container>\n                    <ng-container *ngIf=\"element?.options?.numberedColumn\">\n                        <div\n                            [contentEditable]=\"false\"\n                            contenteditable=\"false\"\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            class=\"the-temp-table-numbered-controls-button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                        >\n                            <p class=\"row-number d-flex align-items-center\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-temp-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-temp-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-temp-table\" #theTable [ngClass]=\"{ 'the-temp-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-temp-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-temp-table-col-controls\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark *ngIf=\"isInTable\" type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\">\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        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table, [theTable]', providers: [
@@ -10804,7 +10776,7 @@ class TheTableSelectComponent {
     }
 }
 TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\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", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\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", directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-select', template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\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" }]
@@ -10859,31 +10831,33 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
 TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
 TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
-            thyIconNavLink
+            href="javascript:;"
             class="link-with-down"
+            thyAction
+            [thyActionIcon]="toolbarItem.icon"
+            [thyActionActive]="active"
             [thyTooltip]="toolbarItem?.name"
             thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="toolbarItem.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i4$2.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: "13.3.8", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
                     template: `
         <a
-            thyIconNavLink
+            href="javascript:;"
             class="link-with-down"
+            thyAction
+            [thyActionIcon]="toolbarItem.icon"
+            [thyActionActive]="active"
             [thyTooltip]="toolbarItem?.name"
             thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="toolbarItem.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
     `,
@@ -11386,12 +11360,13 @@ TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
-                thyIconNavLink
-                [thyIconNavLinkIcon]="toolbarItem.icon"
+                href="javascript:;"
+                thyAction
+                [thyActionIcon]="toolbarItem.icon"
+                [thyActionActive]="active"
                 [thyTooltip]="tooltip"
                 [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
                 thyTooltipPlacement="top"
-                [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
             ></a>
         </ng-container>
@@ -11403,7 +11378,7 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </ng-template>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
-    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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: "13.3.8", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11411,12 +11386,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     template: `
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
-                thyIconNavLink
-                [thyIconNavLinkIcon]="toolbarItem.icon"
+                href="javascript:;"
+                thyAction
+                [thyActionIcon]="toolbarItem.icon"
+                [thyActionActive]="active"
                 [thyTooltip]="tooltip"
                 [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
                 thyTooltipPlacement="top"
-                [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
             ></a>
         </ng-container>
@@ -11490,10 +11466,10 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i1$6.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$4.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <thy-divider class=\"my-2\" thyColor=\"light\"></thy-divider>\n</ng-template>\n", components: [{ type: i1$6.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["itemMode"] }, { type: i4$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-quick-toolbar', template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n" }]
+            args: [{ selector: 'the-quick-toolbar', template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <thy-divider class=\"my-2\" thyColor=\"light\"></thy-divider>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
                 type: Input
             }], quickToolbarItems: [{
@@ -12051,13 +12027,13 @@ class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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=\"caret-down-icon font-size-sm text-desc\" 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", components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i4$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$2.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { type: i5$2.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign',
                         '[class.hide]': '!active'
-                    }, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n" }]
+                    }, 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=\"caret-down-icon font-size-sm text-desc\" 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: [{
                 type: ViewChild,
                 args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
@@ -12253,7 +12229,7 @@ const ColorEditor = {
     selectColor(editor, type) {
         const rangeRef = Editor.rangeRef(editor, editor.selection);
         const colorSelectService = editor.injector.get(TheColorSelectService);
-        const element = event.target.closest('.thy-icon-nav-link');
+        const element = event.target.closest('.thy-action');
         colorSelectService.toggleColorSelect(element, ColorEditor.getActiveColor(editor, type), Colors, {
             showCustom: true,
             perRowColorNumbers: 8,
@@ -12324,13 +12300,13 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
 TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
 TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
         <a
-            class="link-width-down"
-            thyIconNavLink
+            href="javascript:;"
+            thyAction
+            [thyActionActive]="active"
             [ngStyle]="{
                 width: toolbarItem.key === 'color' ? '42px' : 'auto'
             }"
             [thyTooltip]="toolbarItem.name"
-            [thyIconNavLinkActive]="active"
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
@@ -12348,20 +12324,20 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 thyIconName="caret-down"
             ></thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-color-toolbar-item',
                     template: `
         <a
-            class="link-width-down"
-            thyIconNavLink
+            href="javascript:;"
+            thyAction
+            [thyActionActive]="active"
             [ngStyle]="{
                 width: toolbarItem.key === 'color' ? '42px' : 'auto'
             }"
             [thyTooltip]="toolbarItem.name"
-            [thyIconNavLinkActive]="active"
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
@@ -12484,6 +12460,9 @@ class TheToolbarComponent {
         this.moreGroupMenu = ToolbarMoreGroup;
         this.elementWidth = 0;
     }
+    get justifyContent() {
+        return this.align;
+    }
     ngOnInit() {
         this.setToolbarClass();
         this.renderToolbarView();
@@ -12561,17 +12540,19 @@ class TheToolbarComponent {
      *	| |                                  \---------- only when toolbar items overflow --------/   | |
      *	| └───────────────────────────────────────────────────────────────────────────────────────────┘ |
      *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
-     * split width: 6px
-     * item width: default item: 35px; dropdown item: 50px
+     * split width: 17px
+     * item width: default item: 35px; dropdown item: 42px
      * set aside 50px
      */
     toolbarItemsCompose() {
         let elementWidth = this.isMore ? this.elementWidth : null;
-        const maxItemWidth = 50;
+        const maxItemWidth = 42;
         const defaultItemWidth = 35;
-        const splitWidth = 6;
+        const splitWidth = 17;
+        const splitPadding = 8;
         // special type
-        const headingWidth = 70;
+        const headingWidth = 75;
+        const fontSizeWidth = 52;
         const items = [];
         const group = [];
         for (const item of this.toolbarItems) {
@@ -12584,6 +12565,7 @@ class TheToolbarComponent {
             if (allowRender && item.key === ToolbarActionTypes.split) {
                 items.push(item);
                 elementWidth -= splitWidth;
+                elementWidth -= splitPadding;
                 continue;
             }
             if (allowRender) {
@@ -12596,6 +12578,10 @@ class TheToolbarComponent {
                 elementWidth -= headingWidth;
                 continue;
             }
+            if (item.key === MarkTypes.fontSize) {
+                elementWidth -= fontSizeWidth;
+                continue;
+            }
             const isCustomComponent = item?.type === ToolbarItemType.dropdown || !!item?.iconComponent;
             elementWidth -= isCustomComponent ? maxItemWidth : defaultItemWidth;
         }
@@ -12654,7 +12640,10 @@ class TheToolbarComponent {
         }
     }
     createToolbarSplit() {
-        this.toolbarContainer.createComponent(NavSplitLineComponent);
+        const compRef = this.toolbarContainer.createComponent(ThyDividerComponent);
+        compRef.instance.thyVertical = true;
+        compRef.instance.thyColor = 'light';
+        compRef.location.nativeElement.classList.add('mx-2');
     }
     createMoreGroup(group) {
         if (group.length > 0) {
@@ -12676,12 +12665,12 @@ class TheToolbarComponent {
     }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar', host: {
-                        class: 'the-toolbar-container'
-                    }, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n" }]
+                        class: 'the-toolbar-container d-flex align-items-center'
+                    }, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TheToolbarGroupToken]
@@ -12700,6 +12689,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], toolbarContainer: [{
                 type: ViewChild,
                 args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
+            }], justifyContent: [{
+                type: HostBinding,
+                args: ['style.justifyContent']
             }] } });
 
 class TheInlineToolbarComponent {
@@ -12895,7 +12887,7 @@ class TheQuickInsertComponent {
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{ selector: '[theQuickInsert]', host: {
@@ -12984,7 +12976,7 @@ class TheTemplateComponent {
     }
 }
 TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-template,[theTemplate]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n" }]
@@ -13370,7 +13362,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => TheEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\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    class=\"the-editable-container\"\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    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\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    class=\"the-editable-container\"\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    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', providers: [
@@ -13525,12 +13517,12 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, 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", components: [{ type: i3$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyActionIcon", "thyActionActive", "thyType"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i4$2.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: "13.3.8", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', host: {
                         class: 'the-toolbar-group'
-                    }, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n" }]
+                    }, 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: { menus: [{
                 type: Input
             }], item: [{
@@ -13556,7 +13548,6 @@ const TETHYS = [
     ThyTooltipModule,
     ThyProgressModule,
     ThyAutocompleteModule,
-    ThyActionMenuModule,
     ThyInputModule,
     ThySelectModule,
     ThyButtonModule,
@@ -13565,7 +13556,10 @@ const TETHYS = [
     ThyResizableModule,
     ThySwitchModule,
     ThyImageModule,
-    ThyDialogModule
+    ThyDialogModule,
+    ThyActionModule,
+    ThyDividerModule,
+    ThyDropdownModule
 ];
 const COMPONENTS = [
     TheToolbarComponent,
@@ -13573,7 +13567,6 @@ const COMPONENTS = [
     TheToolbarGroupComponent,
     TheToolbarItemComponent,
     TheInlineToolbarComponent,
-    NavSplitLineComponent,
     TheTextComponent,
     TheDefaultElementComponent,
     TheQuickInsertComponent,
@@ -13616,7 +13609,6 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
         TheInlineToolbarComponent,
-        NavSplitLineComponent,
         TheTextComponent,
         TheDefaultElementComponent,
         TheQuickInsertComponent,
@@ -13654,7 +13646,6 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ThyTooltipModule,
         ThyProgressModule,
         ThyAutocompleteModule,
-        ThyActionMenuModule,
         ThyInputModule,
         ThySelectModule,
         ThyButtonModule,
@@ -13663,7 +13654,10 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ThyResizableModule,
         ThySwitchModule,
         ThyImageModule,
-        ThyDialogModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
+        ThyDialogModule,
+        ThyActionModule,
+        ThyDividerModule,
+        ThyDropdownModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
 TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheEditorModule, providers: [
         {
             provide: TheToolbarGroupToken,