@worktile/theia 2.1.13 → 2.1.16

package/bundles/worktile-theia.umd.js

@@ -52,7 +52,7 @@
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -214,7 +214,11 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -369,6 +373,11 @@
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
 
     var PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
     var PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
@@ -709,9 +718,9 @@
         };
         return TheTextComponent;
     }(i1.BaseTextComponent));
-    TheTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTextComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0__namespace, template: "<slate-leaves [context]=\"context\" [viewContext]=\"viewContext\"></slate-leaves>", isInline: true, components: [{ type: i1__namespace.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTextComponent, decorators: [{
+    TheTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTextComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0__namespace, template: "<slate-leaves [context]=\"context\" [viewContext]=\"viewContext\"></slate-leaves>", isInline: true, components: [{ type: i1__namespace.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTextComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theText]',
@@ -735,9 +744,9 @@
         };
         return TheBaseElementComponent;
     }(i1.BaseElementComponent));
-    TheBaseElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheBaseElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseElementComponent, decorators: [{
+    TheBaseElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBaseElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBaseElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBaseElementComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'TheBaseElementComponent',
@@ -752,9 +761,9 @@
         }
         return TheDefaultElementComponent;
     }(TheBaseElementComponent));
-    TheDefaultElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDefaultElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheDefaultElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDefaultElementComponent, decorators: [{
+    TheDefaultElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheDefaultElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheDefaultElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheDefaultElementComponent, selector: "[theDefaultElement]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheDefaultElementComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[theDefaultElement]',
@@ -2077,6 +2086,13 @@
                         slate.Transforms.setNodes(editor, { type: exports.ElementKinds.paragraph, checked: undefined }, // todo remove checked
                         { at: path });
                     }
+                    else if (slate.Element.isElement(node) && node.type === exports.ElementKinds.paragraph) {
+                        var textIndent = node.textIndent;
+                        if (textIndent) {
+                            slate.Transforms.setNodes(editor, { textIndent: undefined }, // remove textIndent
+                            { at: path });
+                        }
+                    }
                     if (slate.Node.parent(editor, path).type !== exports.ElementKinds.listItem) {
                         slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.listItem, children: [] }, {
                             at: path,
@@ -2382,9 +2398,9 @@
         };
         return TheConversionHintComponent;
     }());
-    TheConversionHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheConversionHintComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0__namespace, 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__namespace$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1__namespace$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, decorators: [{
+    TheConversionHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheConversionHintComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheConversionHintComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0__namespace, 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__namespace$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1__namespace$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheConversionHintComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-conversion-hint',
@@ -2547,6 +2563,7 @@
                         viewContainerRef: viewContainerRef,
                         placement: placement,
                         offset: -100,
+                        minWidth: 0,
                         hasBackdrop: false,
                         backdropClosable: false,
                         closeOnNavigation: false,
@@ -2803,9 +2820,9 @@
         };
         return TheContextService;
     }());
-    TheContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TheContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextService, decorators: [{
+    TheContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheContextService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TheContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheContextService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
 
@@ -2996,9 +3013,9 @@
         };
         return TheImageComponent;
     }(TheBaseElementComponent));
-    TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\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        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [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", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
+    TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\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        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [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", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-image, [theImage]',
@@ -3795,9 +3812,9 @@
         };
         return ElementStylePipe;
     }());
-    ElementStylePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    ElementStylePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, name: "elementStyle" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, decorators: [{
+    ElementStylePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementStylePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ElementStylePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementStylePipe, name: "elementStyle" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementStylePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'elementStyle'
@@ -3816,9 +3833,9 @@
         };
         return ElementClassPipe;
     }());
-    ElementClassPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    ElementClassPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, name: "elementClass" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, decorators: [{
+    ElementClassPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementClassPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ElementClassPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementClassPipe, name: "elementClass" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ElementClassPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'elementClass'
@@ -3856,9 +3873,9 @@
         };
         return TheNumberedListComponent;
     }(TheBaseElementComponent));
-    TheNumberedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheNumberedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheNumberedListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheNumberedListComponent, decorators: [{
+    TheNumberedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheNumberedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheNumberedListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheNumberedListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ol[theOl]',
@@ -3897,9 +3914,9 @@
         };
         return TheBulletedListComponent;
     }(TheBaseElementComponent));
-    TheBulletedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBulletedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheBulletedListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBulletedListComponent, decorators: [{
+    TheBulletedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBulletedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBulletedListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBulletedListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ul[theUl]',
@@ -4002,9 +4019,9 @@
         };
         return TheListItemComponent;
     }(TheBaseElementComponent));
-    TheListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheListItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheListItemComponent, decorators: [{
+    TheListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheListItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheListItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'li[theLi]',
@@ -4331,9 +4348,9 @@
         };
         return TheTodoItemComponent;
     }(TheBaseElementComponent));
-    TheTodoItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, decorators: [{
+    TheTodoItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTodoItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTodoItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'div[theTodoItem]',
@@ -4418,9 +4435,9 @@
         };
         return TheHrComponent;
     }(TheBaseElementComponent));
-    TheHrComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheHrComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheHrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0__namespace, template: "\n        <div class=\"the-hr\" contenteditable=\"false\" [ngClass]=\"{ active: selection }\">\n            <hr class=\"the-hr\" />\n            <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        </div>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheHrComponent, decorators: [{
+    TheHrComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheHrComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheHrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0__namespace, template: "\n        <div class=\"the-hr\" contenteditable=\"false\" [ngClass]=\"{ active: selection }\">\n            <hr class=\"the-hr\" />\n            <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        </div>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheHrComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-hr, [theHr]',
@@ -6435,9 +6452,9 @@
         }
         return TheBlockquoteComponent;
     }(TheBaseElementComponent));
-    TheBlockquoteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBlockquoteComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheBlockquoteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBlockquoteComponent, decorators: [{
+    TheBlockquoteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBlockquoteComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBlockquoteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBlockquoteComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'blockquote[theBlockquote]',
@@ -6633,9 +6650,9 @@
         };
         return TheColorSelectComponent;
     }());
-    TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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__namespace, 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: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
+    TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorSelectComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-color-select',
@@ -6691,6 +6708,7 @@
                     option: option
                 },
                 origin: origin,
+                minWidth: 0,
                 backdropClosable: this.backdropClosable,
                 placement: placement || this.placement,
                 offset: offset !== null ? offset : this.offset,
@@ -6707,9 +6725,9 @@
         };
         return TheColorSelectService;
     }());
-    TheColorSelectService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectService, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TheColorSelectService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectService, decorators: [{
+    TheColorSelectService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorSelectService, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TheColorSelectService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorSelectService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorSelectService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace$3.ThyPopover }]; } });
 
@@ -6769,9 +6787,9 @@
         };
         return TheToolbarBaseItemComponent;
     }());
-    TheToolbarBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TheToolbarBaseItemComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarBaseItemComponent, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, decorators: [{
+    TheToolbarBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TheToolbarBaseItemComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TheToolbarBaseItemComponent, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, decorators: [{
                 type: i0.Directive
             }] });
 
@@ -6828,6 +6846,7 @@
                 backdropClosable: false,
                 placement: 'bottomLeft',
                 offset: 10,
+                minWidth: 0,
                 hasBackdrop: false,
                 insideClosable: false,
                 panelClass: 'color-select-container'
@@ -6841,9 +6860,9 @@
         };
         return TheColorToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
-    TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
+    TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorToolbarItemComponent, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-color-toolbar-item',
@@ -7081,6 +7100,7 @@
                 backdropClosable: true,
                 hasBackdrop: false,
                 offset: 10,
+                minWidth: 0,
                 viewContainerRef: this.viewContainerRef,
                 scrollStrategy: this.overlay.scrollStrategies.reposition()
             });
@@ -7112,9 +7132,9 @@
         };
         return TheToolbarDropdownComponent;
     }(TheToolbarBaseItemComponent));
-    TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, 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__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.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]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.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 === activeMenu.key\"\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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
+    TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, 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__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.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]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.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 === activeMenu.key\"\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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-dropdown',
@@ -7175,9 +7195,9 @@
         NavSplitLineComponent.prototype.ngOnInit = function () { };
         return NavSplitLineComponent;
     }());
-    NavSplitLineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: NavSplitLineComponent, decorators: [{
+    NavSplitLineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavSplitLineComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'nav-split-line',
@@ -7332,10 +7352,41 @@
             }
             i1.AngularEditor.focus(this.editor);
             slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
-            document.execCommand('copy');
-            this.thyNotifyService.success('复制成功');
+            if (i1.IS_SAFARI) {
+                this.safariCopy();
+                return;
+            }
+            document.execCommand('copy') ? this.thyNotifyService.success('复制成功') : this.thyNotifyService.error('复制失败');
             i1.AngularEditor.deselect(this.editor);
         };
+        TheCodeComponent.prototype.safariCopy = function () {
+            var currentElement = i1.AngularEditor.toDOMNode(this.editor, this.element);
+            var blockCard = currentElement.closest('.slate-block-card');
+            var span = document.createElement('pre');
+            span.appendChild(blockCard.cloneNode(true));
+            span.textContent = this.element.content;
+            if (this.element.language) {
+                span.setAttribute('data-language', this.element.language);
+            }
+            if (this.element.autoWrap) {
+                span.setAttribute('data-auto-wrap', String(this.element.autoWrap));
+            }
+            if (this.element.height) {
+                span.setAttribute('data-height', String(this.element.height));
+            }
+            document.body.appendChild(span);
+            var selection = window.getSelection();
+            var range = document.createRange();
+            if (selection) {
+                selection.removeAllRanges();
+                range.selectNode(span);
+                selection.addRange(range);
+                document.execCommand('copy') ? this.thyNotifyService.success('复制成功') : this.thyNotifyService.error('复制失败');
+                selection.removeAllRanges();
+                document.body.removeChild(span);
+                i1.AngularEditor.deselect(this.editor);
+            }
+        };
         TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
             if (codeMirrorFocused) {
                 this.isHightLight = false;
@@ -7378,9 +7429,9 @@
         };
         return TheCodeComponent;
     }(TheBaseElementComponent));
-    TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\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        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\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    </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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
+    TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\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        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\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    </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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'div[theCode]',
@@ -7518,9 +7569,9 @@
         };
         return TheLinkHoverComponent;
     }());
-    TheLinkHoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkHoverComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkHoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0__namespace, template: "<div class=\"link-hover-card\">\n    <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate\">\n        {{ link }}\n    </a>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"edit\" thySize=\"xs\" (mousedown)=\"editLink($event)\"></button>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"unlink-insert\" thySize=\"xs\" (mousedown)=\"removeLink($event)\"></button>\n</div>\n", components: [{ type: i1__namespace$5.ThyButtonIconComponent, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkHoverComponent, decorators: [{
+    TheLinkHoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkHoverComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheLinkHoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0__namespace, template: "<div class=\"link-hover-card\">\n    <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate\">\n        {{ link }}\n    </a>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"edit\" thySize=\"xs\" (mousedown)=\"editLink($event)\"></button>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"unlink-insert\" thySize=\"xs\" (mousedown)=\"removeLink($event)\"></button>\n</div>\n", components: [{ type: i1__namespace$5.ThyButtonIconComponent, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkHoverComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-link-hover',
@@ -7607,9 +7658,9 @@
         };
         return TheLinkEditComponent;
     }());
-    TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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__namespace, 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__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
+    TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-link-edit',
@@ -7722,6 +7773,7 @@
                 origin: dom,
                 placement: 'bottomLeft',
                 offset: 8,
+                minWidth: 0,
                 hasBackdrop: false,
                 outsideClosable: true,
                 viewContainerRef: this.viewContainerRef,
@@ -7763,9 +7815,9 @@
         };
         return TheBaseLinkComponent;
     }(TheBaseElementComponent));
-    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$6.ThyClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheBaseLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseLinkComponent, decorators: [{
+    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$6.ThyClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBaseLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheBaseLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[TheBaseLinkComponent]',
@@ -7781,14 +7833,14 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             // Put this at the start and end of an inline component to work around this Chromium bug:
             // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
-            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+            _this.inlineChromiumBugfix = String.fromCodePoint(160);
             return _this;
         }
         return TheLinkComponent;
     }(TheBaseLinkComponent));
-    TheLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, decorators: [{
+    TheLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theLink]',
@@ -7802,9 +7854,9 @@
         }
         return TheReadonlyLinkComponent;
     }(TheBaseLinkComponent));
-    TheReadonlyLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheReadonlyLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheReadonlyLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheReadonlyLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheReadonlyLinkComponent, decorators: [{
+    TheReadonlyLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheReadonlyLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheReadonlyLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheReadonlyLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheReadonlyLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'a[theLink]',
@@ -7898,9 +7950,9 @@
         };
         return TheTableSelectComponent;
     }());
-    TheTableSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableSelectComponent, deps: [{ token: i1__namespace$6.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, 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: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableSelectComponent, decorators: [{
+    TheTableSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableSelectComponent, deps: [{ token: i1__namespace$6.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, 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: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'table-select',
@@ -7955,6 +8007,7 @@
                     editor: this.editor,
                     optionsParam: optionsParam
                 },
+                minWidth: 0,
                 backdropClosable: false,
                 hasBackdrop: false,
                 insideClosable: false,
@@ -7967,9 +8020,9 @@
         };
         return TheTableToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
-    TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
+    TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table-toolbar-item',
@@ -8018,9 +8071,9 @@
         }
         return ColumnResizeNotifierSource;
     }());
-    ColumnResizeNotifierSource.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizeNotifierSource, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ColumnResizeNotifierSource.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizeNotifierSource });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizeNotifierSource, decorators: [{
+    ColumnResizeNotifierSource.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizeNotifierSource, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ColumnResizeNotifierSource.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizeNotifierSource });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizeNotifierSource, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -8071,9 +8124,9 @@
         };
         return TableCellEventDispatcher;
     }());
-    TableCellEventDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableCellEventDispatcher, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TableCellEventDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableCellEventDispatcher });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableCellEventDispatcher, decorators: [{
+    TableCellEventDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableCellEventDispatcher, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TableCellEventDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableCellEventDispatcher });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableCellEventDispatcher, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
 
@@ -8693,9 +8746,9 @@
         };
         return TableStore;
     }());
-    TableStore.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableStore, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TableStore.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableStore });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableStore, decorators: [{
+    TableStore.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableStore, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TableStore.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableStore });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableStore, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -8860,9 +8913,9 @@
         };
         return TheTableToolbarComponent;
     }());
-    TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, 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=\"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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
+    TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, 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=\"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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table-toolbar',
@@ -8924,9 +8977,9 @@
         TheContextMenuComponent.prototype.ngOnInit = function () { };
         return TheContextMenuComponent;
     }());
-    TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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__namespace, 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: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
+    TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheContextMenuComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-contextmenu',
@@ -9119,6 +9172,7 @@
                         y: event.y
                     },
                     hasBackdrop: false,
+                    minWidth: 0,
                     placement: 'bottomLeft',
                     viewContainerRef: _this.theContextService.getOptions().viewContainerRef,
                     manualClosure: true,
@@ -9138,9 +9192,9 @@
         };
         return TheTableContextMenuService;
     }());
-    TheTableContextMenuService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TheTableContextMenuService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableContextMenuService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableContextMenuService, decorators: [{
+    TheTableContextMenuService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TheTableContextMenuService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableContextMenuService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableContextMenuService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: TheColorSelectService }, { type: TableStore }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.NgZone }, { type: TheContextService }]; } });
 
@@ -9185,6 +9239,7 @@
                 offset: this.offset,
                 hasBackdrop: this.hasBackdrop,
                 insideClosable: this.insideClosable,
+                minWidth: 0,
                 panelClass: 'the-table-toolbar-wrap',
                 scrollStrategy: this.overlay.scrollStrategies.reposition(),
                 manualClosure: true
@@ -9236,9 +9291,9 @@
         };
         return TableService;
     }());
-    TableService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableService, deps: [{ token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TableService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TableService, decorators: [{
+    TableService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableService, deps: [{ token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TableService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TableService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0__namespace.NgZone }, { type: TheContextService }]; } });
 
@@ -9327,9 +9382,9 @@
         TheInsertMarkComponent.prototype.ngOnDestroy = function () { };
         return TheInsertMarkComponent;
     }());
-    TheInsertMarkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInsertMarkComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInsertMarkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0__namespace, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-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-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__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInsertMarkComponent, decorators: [{
+    TheInsertMarkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInsertMarkComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInsertMarkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0__namespace, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-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-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__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInsertMarkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table-insert-mark',
@@ -9431,9 +9486,9 @@
         };
         return TheColumnResizeDirective;
     }());
-    TheColumnResizeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TheColumnResizeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeDirective, decorators: [{
+    TheColumnResizeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TheColumnResizeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: 'div[theColumnResize]'
@@ -9833,8 +9888,8 @@
         };
         return TheTableComponent;
     }(TheBaseElementComponent));
-    TheTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableComponent, deps: [{ token: i0__namespace.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TableService }, { token: TheContextService }, { token: TheTableContextMenuService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
+    TheTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableComponent, deps: [{ token: i0__namespace.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TableService }, { token: TheContextService }, { token: TheTableContextMenuService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
             TableStore,
             TableService,
             TheTableContextMenuService,
@@ -9845,7 +9900,7 @@
                 useExisting: TheTableComponent
             }
         ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: i0.ElementRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-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-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-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <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>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-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-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\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__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table, [theTable]',
@@ -9955,9 +10010,9 @@
         };
         return TheTableRowComponent;
     }(TheBaseElementComponent));
-    TheTableRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableRowComponent, decorators: [{
+    TheTableRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableRowComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTableRowComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tr[theTableRow]',
@@ -10027,7 +10082,7 @@
         ColumnResizingStore.prototype.restoreTopRows = function (deltaY) {
             var index = this.resizeRows.length - 1;
             while (index >= 0 && deltaY > 0) {
-                var currentHeight = coercePixelsFromCssValue(this.resizeRows[index].rowElement.style.height);
+                var currentHeight = this.resizeRows[index].rowElement.getBoundingClientRect().height;
                 if (this.resizeRows[index].baseHeight > currentHeight) {
                     if (this.resizeRows[index].baseHeight > currentHeight + deltaY) {
                         this.resizeRows[index].rowElement.style.height = coercion.coerceCssPixelValue(currentHeight + deltaY);
@@ -10121,9 +10176,9 @@
         };
         return ColumnResizingStore;
     }());
-    ColumnResizingStore.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizingStore, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ColumnResizingStore.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizingStore });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ColumnResizingStore, decorators: [{
+    ColumnResizingStore.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizingStore, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ColumnResizingStore.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizingStore });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColumnResizingStore, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -10278,9 +10333,9 @@
         };
         return TheColumnResizeOverlayHandleComponent;
     }());
-    TheColumnResizeOverlayHandleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: i6.DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColumnResizeOverlayHandleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, decorators: [{
+    TheColumnResizeOverlayHandleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: i6.DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheColumnResizeOverlayHandleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         host: { class: 'the-table-resize-overlay-thumb' },
@@ -10688,10 +10743,23 @@
                 .pipe(takeUntilDestroyed, operators.filter(function (columnSize) { return columnSize.tableCell === _this.elementRef.nativeElement; }))
                 .subscribe(function (_c) {
                 var deltaSize = _c.deltaSize, previousSize = _c.previousSize, completeImmediately = _c.completeImmediately;
-                _this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
-                _this.applySize(deltaSize, previousSize);
-                if (completeImmediately) {
-                    _this._completeResizeOperation();
+                var _d = _this.elementRef.nativeElement.getBoundingClientRect(), top = _d.top, left = _d.left, height = _d.height, width = _d.width;
+                var clientY = event.clientY, clientX = event.clientX;
+                var isApplySize = false;
+                if (_this.isXAxisHover) {
+                    var cellWidth = _this.hoverdDirection === 'left' ? 0 : width;
+                    isApplySize = deltaSize > 0 && left + cellWidth - clientX <= 0;
+                }
+                else {
+                    var cellHeight = _this.hoverdDirection === 'bottom' ? 0 : height;
+                    isApplySize = deltaSize > 0 && top + cellHeight - clientY <= 0;
+                }
+                if (isApplySize || deltaSize < 0) {
+                    _this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
+                    _this.applySize(deltaSize, previousSize);
+                    if (completeImmediately) {
+                        _this._completeResizeOperation();
+                    }
                 }
             });
             rxjs.merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
@@ -10993,9 +11061,9 @@
         };
         return TheTdComponent;
     }(TheBaseElementComponent));
-    TheTdComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTdComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Injector }, { token: i2__namespace.Overlay }, { token: ColumnResizingStore }, { token: i2__namespace.ScrollDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTdComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTdComponent, decorators: [{
+    TheTdComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTdComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Injector }, { token: i2__namespace.Overlay }, { token: ColumnResizingStore }, { token: i2__namespace.ScrollDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTdComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTdComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'td[theTd]',
@@ -11569,6 +11637,7 @@
                 panelClass: ['the-toolbar-dropdown-popover', (_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key],
                 placement: 'bottomLeft',
                 offset: 10,
+                minWidth: 0,
                 viewContainerRef: this.viewContainerRef,
                 insideClosable: false,
                 backdropClosable: false,
@@ -11582,9 +11651,9 @@
         };
         return TheVerticalToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
-    TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, 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: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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]=\"activeMenu?.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 === activeMenu?.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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
+    TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, 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: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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]=\"activeMenu?.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 === activeMenu?.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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-vertical-align-item',
@@ -11827,9 +11896,9 @@
         };
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
-    TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
+    TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-item',
@@ -11838,9 +11907,9 @@
                             class: 'the-toolbar-item'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { item: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { editor: [{
                     type: i0.Input
-                }], editor: [{
+                }], item: [{
                     type: i0.Input
                 }], itemMode: [{
                     type: i0.Input
@@ -11903,9 +11972,9 @@
         };
         return TheQuickToolbarComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
-    TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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__namespace, 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\" [item]=\"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: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
+    TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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\" [item]=\"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: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-quick-toolbar',
@@ -11942,6 +12011,7 @@
                 backdropClosable: true,
                 placement: 'bottomLeft',
                 offset: 4,
+                minWidth: 0,
                 hasBackdrop: false,
                 insideClosable: true,
                 panelClass: 'the-quick-toolbar-container',
@@ -12142,18 +12212,18 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             // Put this at the start and end of an inline component to work around this Chromium bug:
             // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
-            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+            _this.inlineChromiumBugfix = String.fromCodePoint(160);
             return _this;
         }
         return TheInlineCodeComponent;
     }(TheBaseElementComponent));
-    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
+    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: "<span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theInlineCode]',
-                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
+                        template: "<span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
                     }]
             }] });
 
@@ -12329,9 +12399,9 @@
         };
         return TheToolbarService;
     }());
-    TheToolbarService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TheToolbarService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarService, decorators: [{
+    TheToolbarService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TheToolbarService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -12375,8 +12445,9 @@
     };
 
     var TheToolbarComponent = /** @class */ (function () {
-        function TheToolbarComponent(cfr, elementRef, ngZone, toolbarGroupComponent) {
+        function TheToolbarComponent(cfr, cdr, elementRef, ngZone, toolbarGroupComponent) {
             this.cfr = cfr;
+            this.cdr = cdr;
             this.elementRef = elementRef;
             this.ngZone = ngZone;
             this.toolbarGroupComponent = toolbarGroupComponent;
@@ -12487,6 +12558,7 @@
                 }
                 _this.createMoreGroup(group);
             });
+            this.cdr.markForCheck();
         };
         /**
          * calculation display toolbar and more grouped toolbars
@@ -12648,9 +12720,9 @@
         };
         return TheToolbarComponent;
     }());
-    TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, 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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
+    TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, 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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar',
@@ -12660,7 +12732,7 @@
                         }
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+            return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TheToolbarGroupToken]
                         }] }];
@@ -12789,9 +12861,9 @@
         };
         return TheInlineToolbarComponent;
     }());
-    TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
+    TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-inline-toolbar',
@@ -12861,9 +12933,9 @@
         };
         return TheQuickInsertComponent;
     }());
-    TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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: i0.ElementRef }], ngImport: i0__namespace, 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: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
+    TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i0.ElementRef }], ngImport: i0__namespace, 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: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[theQuickInsert]',
@@ -12917,9 +12989,9 @@
         }
         return TheTemplateComponent;
     }());
-    TheTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTemplateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTemplateComponent, decorators: [{
+    TheTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTemplateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheTemplateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-template,[theTemplate]',
@@ -13310,8 +13382,8 @@
         };
         return TheEditorComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
-    TheEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
+    TheEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
             TheToolbarService,
             TheContextService,
             TheColorSelectService,
@@ -13321,7 +13393,7 @@
                 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__namespace, 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__namespace.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: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-editor, theEditor',
@@ -13376,10 +13448,10 @@
         }
         return TheColumnResizeCommonModule;
     }());
-    TheColumnResizeCommonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeCommonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TheColumnResizeCommonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
-    TheColumnResizeCommonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeCommonModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeCommonModule, decorators: [{
+    TheColumnResizeCommonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeCommonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TheColumnResizeCommonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
+    TheColumnResizeCommonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeCommonModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnResizeCommonModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: ENTRY_COMMON_COMPONENTS,
@@ -13392,10 +13464,10 @@
         }
         return TheColumnSizeModule;
     }());
-    TheColumnSizeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnSizeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TheColumnSizeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [i2.OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
-    TheColumnSizeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnSizeModule, imports: [[i2.OverlayModule, TheColumnResizeCommonModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnSizeModule, decorators: [{
+    TheColumnSizeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnSizeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TheColumnSizeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [i2.OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
+    TheColumnSizeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnSizeModule, imports: [[i2.OverlayModule, TheColumnResizeCommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheColumnSizeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i2.OverlayModule, TheColumnResizeCommonModule],
@@ -13481,6 +13553,7 @@
             this.groupPopoverRef = this.thyPopover.open(this.groupTemplate, {
                 panelClass: 'the-toolbar-group-container',
                 offset: 10,
+                minWidth: 0,
                 placement: 'bottomRight',
                 origin: event.currentTarget,
                 viewContainerRef: this.viewContainerRef,
@@ -13498,9 +13571,9 @@
         };
         return TheToolbarGroupComponent;
     }());
-    TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
+    TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-group',
@@ -13589,8 +13662,8 @@
         }
         return TheEditorModule;
     }());
-    TheEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TheEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TheToolbarComponent,
+    TheEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TheEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TheToolbarComponent,
             TheToolbarDropdownComponent,
             TheToolbarGroupComponent,
             TheToolbarItemComponent,
@@ -13641,14 +13714,14 @@
             i1$1.ThyAlertModule,
             i9.ThyResizableModule,
             i6$1.ThySwitchModule, i8.CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
-    TheEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, providers: [
+    TheEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorModule, providers: [
             {
                 provide: TheToolbarGroupToken,
                 useValue: TheToolbarGroupComponent
             },
             THE_CODE_MODE_PROVIDER
         ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TheEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: __spreadArray(__spreadArray(__spreadArray([TheEditorComponent], __read(PIPES)), __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),