@worktile/theia 20.2.14 → 21.0.0-next.1

package/fesm2022/worktile-theia.mjs

@@ -1,13 +1,13 @@
 import { NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, inject, signal, Injectable, computed, HostBinding, Input, Directive, ViewChild, HostListener, ViewContainerRef, Inject, TemplateRef, forwardRef, ContentChildren, Optional, SkipSelf, EventEmitter, NgZone, ElementRef, DestroyRef, Output, Pipe, ChangeDetectionStrategy, ChangeDetectorRef, ViewChildren, Renderer2, viewChild, Injector, NgModule } from '@angular/core';
+import { InjectionToken, Component, inject, signal, Injectable, computed, HostBinding, Input, Directive, ViewChild, HostListener, ViewContainerRef, Inject, TemplateRef, ContentChildren, forwardRef, Optional, SkipSelf, EventEmitter, NgZone, ElementRef, DestroyRef, Output, Pipe, ChangeDetectionStrategy, ChangeDetectorRef, ViewChildren, Renderer2, viewChild, Injector, NgModule } from '@angular/core';
 import { ThyDivider } from 'ngx-tethys/divider';
 import { ThyAction, ThyActions } from 'ngx-tethys/action';
 import { ThyDropdownMenuItemDirective, ThyDropdownMenuDivider, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemActiveDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemExtendIconDirective } from 'ngx-tethys/dropdown';
 import * as i2$5 from 'ngx-tethys/icon';
 import { ThyIcon, ThyIconRegistry } from 'ngx-tethys/icon';
-import { cloneDeep, map, every, assign, defaults, groupBy, uniq, isEqual } from 'lodash';
-export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
+import { cloneDeep, map, every, assign, defaults, groupBy, uniq, isEqual } from 'lodash-es';
+export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash-es';
 import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import * as i4 from 'slate-angular';
 import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, SlateModule, getBlockCardByNativeElement, SLATE_BLOCK_CARD_CLASS_NAME, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, BaseElementFlavour, hasBlockCard, isCardLeft, getCachedHeightByElement, isDebug, debugLog, cacheHeightByElement, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, SLATE_DEBUG_KEY, withAngular } from 'slate-angular';
@@ -2515,10 +2515,10 @@ class TheBaseElement extends BaseElementComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheBaseElement, isStandalone: true, selector: "TheBaseElement", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheBaseElement, isStandalone: true, selector: "TheBaseElement", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'TheBaseElement',
@@ -3000,15 +3000,15 @@ function normalizeLocale(localeId) {
 class TheI18nService {
     constructor() {
         this.locales = {
-            [TheLocaleType.zhHans]: inject(THE_I18N_ZH_HANS, { optional: true }) || zhHansLocale,
-            [TheLocaleType.zhHant]: inject(THE_I18N_ZH_HANT, { optional: true }) || zhHantLocale,
-            [TheLocaleType.enUs]: inject(THE_I18N_EN_US, { optional: true }) || enUsLocale,
-            [TheLocaleType.jaJp]: inject(THE_I18N_JA_JP, { optional: true }) || jaJpLocale,
-            [TheLocaleType.deDe]: inject(THE_I18N_DE_DE, { optional: true }) || deDeLocale,
-            [TheLocaleType.ruRu]: inject(THE_I18N_RU_RU, { optional: true }) || ruRuLocale
+            [TheLocaleType.zhHans]: inject(THE_I18N_ZH_HANS, { optional: true }) || zhHans,
+            [TheLocaleType.zhHant]: inject(THE_I18N_ZH_HANT, { optional: true }) || zhHant,
+            [TheLocaleType.enUs]: inject(THE_I18N_EN_US, { optional: true }) || enUs,
+            [TheLocaleType.jaJp]: inject(THE_I18N_JA_JP, { optional: true }) || jaJp,
+            [TheLocaleType.deDe]: inject(THE_I18N_DE_DE, { optional: true }) || deDe,
+            [TheLocaleType.ruRu]: inject(THE_I18N_RU_RU, { optional: true }) || ruRu
         };
         this.defaultLocaleId = normalizeLocale(inject(THE_I18N_LOCALE_ID, { optional: true })) || TheLocaleType.zhHans;
-        this.locale = signal(this.locales[this.defaultLocaleId], ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        this.locale = signal(this.locales[this.defaultLocaleId], ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     }
     setLocale(id) {
         let localeId = normalizeLocale(id);
@@ -3020,10 +3020,10 @@ class TheI18nService {
     getLocale() {
         return this.locale;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheI18nService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheI18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3036,7 +3036,7 @@ function injectTranslations(theI18nService) {
     });
 }
 
-var zhHansLocale = {
+var zhHans = {
     id: TheLocaleType.zhHans,
     translations: {
         link: '链接',
@@ -3141,7 +3141,7 @@ var zhHansLocale = {
     }
 };
 
-var zhHantLocale = {
+var zhHant = {
     id: TheLocaleType.zhHant,
     translations: {
         link: '鏈接',
@@ -3246,7 +3246,7 @@ var zhHantLocale = {
     }
 };
 
-var enUsLocale = {
+var enUs = {
     id: TheLocaleType.enUs,
     translations: {
         link: 'Link',
@@ -3351,7 +3351,7 @@ var enUsLocale = {
     }
 };
 
-var jaJpLocale = {
+var jaJp = {
     id: TheLocaleType.jaJp,
     translations: {
         link: 'リンク',
@@ -3456,7 +3456,7 @@ var jaJpLocale = {
     }
 };
 
-var deDeLocale = {
+var deDe = {
     id: TheLocaleType.deDe,
     translations: {
         link: 'Link',
@@ -3561,7 +3561,7 @@ var deDeLocale = {
     }
 };
 
-var ruRuLocale = {
+var ruRu = {
     id: TheLocaleType.ruRu,
     translations: {
         link: 'Ссылка',
@@ -3702,10 +3702,10 @@ class TheBaseToolbarItem {
             this.active = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheBaseToolbarItem, isStandalone: true, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.the-toolbar-item": "this.class", "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheBaseToolbarItem, isStandalone: true, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.the-toolbar-item": "this.class", "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { toolbarItem: [{
                 type: Input
@@ -3743,10 +3743,10 @@ class TheBaseToolbarDropdown extends TheBaseToolbarItem {
             this.activeMenuItem = activeItem ? activeItem : this.defaultDropdownItem;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseToolbarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheBaseToolbarDropdown, isStandalone: true, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseToolbarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheBaseToolbarDropdown, isStandalone: true, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { menus: [{
                 type: Input
@@ -4044,10 +4044,10 @@ class TheToolbarDropdown extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef?.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarDropdown, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheToolbarDropdown, isStandalone: true, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (mode === dropdownMode.icon) {\n  <a\n    href=\"javascript:;\"\n    class=\"icon-mode\"\n    thyAction\n    [thyActionIcon]=\"activeIcon\"\n    [thyActionActive]=\"activeDropdown\"\n    (mousedown)=\"preventDefault($event)\"\n    (click)=\"toggleDropdown($event)\"\n  >\n    @if (!toolbarItem.isHideDropdownActionIcon) {\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    }\n  </a>\n}\n@if (mode !== dropdownMode.icon) {\n  <a href=\"javascript:;\" class=\"text-mode\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"toggleDropdown($event)\">\n    <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n    <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n}\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    @for (menu of menus; track $index) {\n      @if (menu.key !== 'split') {\n        <a\n          class=\"d-flex justify-content-between text-secondary\"\n          href=\"javascript:;\"\n          thyDropdownMenuItem\n          [ngStyle]=\"menu?.styles\"\n          [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n          (mousedown)=\"preventDefault($event)\"\n          (click)=\"itemMousedown($event, menu)\"\n        >\n          <div class=\"d-flex align-items-center\">\n            @if (menu?.icon && mode === dropdownMode.icon) {\n              <thy-icon class=\"text-secondary\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n            }\n            @if (menu?.name) {\n              <span class=\"text-body\" thyDropdownMenuItemName>{{ menu.name }}</span>\n            }\n          </div>\n          @if (menu?.shortcutKey) {\n            <div class=\"menu-item-right font-size-sm text-muted\">{{ menu.shortcutKey }}</div>\n          }\n        </a>\n      }\n      @if (menu.key === 'split') {\n        <thy-dropdown-menu-divider></thy-dropdown-menu-divider>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarDropdown, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheToolbarDropdown, isStandalone: true, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (mode === dropdownMode.icon) {\n  <a\n    href=\"javascript:;\"\n    class=\"icon-mode\"\n    thyAction\n    [thyActionIcon]=\"activeIcon\"\n    [thyActionActive]=\"activeDropdown\"\n    (mousedown)=\"preventDefault($event)\"\n    (click)=\"toggleDropdown($event)\"\n  >\n    @if (!toolbarItem.isHideDropdownActionIcon) {\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    }\n  </a>\n}\n@if (mode !== dropdownMode.icon) {\n  <a href=\"javascript:;\" class=\"text-mode\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"toggleDropdown($event)\">\n    <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n    <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n}\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    @for (menu of menus; track $index) {\n      @if (menu.key !== 'split') {\n        <a\n          class=\"d-flex justify-content-between text-secondary\"\n          href=\"javascript:;\"\n          thyDropdownMenuItem\n          [ngStyle]=\"menu?.styles\"\n          [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n          (mousedown)=\"preventDefault($event)\"\n          (click)=\"itemMousedown($event, menu)\"\n        >\n          <div class=\"d-flex align-items-center\">\n            @if (menu?.icon && mode === dropdownMode.icon) {\n              <thy-icon class=\"text-secondary\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n            }\n            @if (menu?.name) {\n              <span class=\"text-body\" thyDropdownMenuItemName>{{ menu.name }}</span>\n            }\n          </div>\n          @if (menu?.shortcutKey) {\n            <div class=\"menu-item-right font-size-sm text-muted\">{{ menu.shortcutKey }}</div>\n          }\n        </a>\n      }\n      @if (menu.key === 'split') {\n        <thy-dropdown-menu-divider></thy-dropdown-menu-divider>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-dropdown', imports: [
                         NgStyle,
@@ -4096,8 +4096,8 @@ class TheToolbarItem extends TheBaseToolbarItem {
         }
         this.toolbarItem?.execute(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheToolbarItem, isStandalone: true, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheToolbarItem, isStandalone: true, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             thyAction
@@ -4115,7 +4115,7 @@ class TheToolbarItem extends TheBaseToolbarItem {
         <ng-template #tooltip let-data> {{ data?.name }} {{ data?.shortcutKey }} </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
@@ -4369,10 +4369,10 @@ class TheToolbarComponent {
         }
         return TheToolbarItem;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheToolbarComponent, isStandalone: true, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n@if (afterTemplate) {\n  <ng-template [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheToolbarComponent, isStandalone: true, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n@if (afterTemplate) {\n  <ng-template [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar', host: {
                         class: 'the-toolbar-container d-flex align-items-center'
@@ -4432,7 +4432,7 @@ class TheToolbarGroup {
         this.i18n = i18n;
         this.className = 'the-toolbar-group';
         this.active = false;
-        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
     ngOnDestroy() {
@@ -4491,10 +4491,10 @@ class TheToolbarGroup {
             this.groupPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarGroup, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: TheI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheToolbarGroup, isStandalone: true, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarGroup, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: TheI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheToolbarGroup, isStandalone: true, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarGroup, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', imports: [ThyAction, ThyTooltipDirective, TheToolbarComponent], template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ThyPopover }, { type: i0.ViewContainerRef }, { type: TheI18nService }], propDecorators: { className: [{
@@ -4557,15 +4557,15 @@ class TheListboxOptionDirective {
     getActive() {
         return this._active;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheListboxOptionDirective, isStandalone: true, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheListboxOptionDirective, isStandalone: true, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
                 useExisting: TheListboxOptionDirective
             }
         ], queries: [{ propertyName: "_options", predicate: i0.forwardRef(() => TheListboxOptionDirective), descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxOption]',
@@ -4640,15 +4640,15 @@ class TheListboxGroupDirective {
     getLast() {
         return this.options[this.options.length - 1];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheListboxGroupDirective, isStandalone: true, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheListboxGroupDirective, isStandalone: true, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_GROUP_TOKEN,
                 useExisting: TheListboxGroupDirective
             }
         ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxGroup]',
@@ -4860,15 +4860,15 @@ class TheListboxDirective {
         this.activeOption.setActive(false);
         this.activeOption = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheListboxDirective, isStandalone: true, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheListboxDirective, isStandalone: true, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_TOKEN,
                 useExisting: TheListboxDirective
             }
         ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }, { propertyName: "_groups", predicate: TheListboxGroupDirective, descendants: true }], exportAs: ["theListBox"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheListboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheListboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListBox]',
@@ -4902,10 +4902,10 @@ class ThePreventDefaultDirective {
     mousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThePreventDefaultDirective, isStandalone: true, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: ThePreventDefaultDirective, isStandalone: true, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thePreventDefault]',
@@ -4928,10 +4928,10 @@ class ElementStylePipe {
         }
         return style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ElementStylePipe, isStandalone: true, name: "elementStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: ElementStylePipe, isStandalone: true, name: "elementStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ElementStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementStyle',
@@ -4947,10 +4947,10 @@ class ElementClassPipe {
         }
         return classStr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ElementClassPipe, isStandalone: true, name: "elementClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: ElementClassPipe, isStandalone: true, name: "elementClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ElementClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementClass',
@@ -4964,10 +4964,10 @@ class PluginMenuPipe {
         }
         return icon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: PluginMenuPipe, isStandalone: true, name: "getMenuIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: PluginMenuPipe, isStandalone: true, name: "getMenuIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PluginMenuPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PluginMenuPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getMenuIcon',
@@ -7097,10 +7097,10 @@ class TheContextService {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheContextService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -7124,9 +7124,9 @@ class TheCode extends TheBaseElement {
             lineWiseCopyCut: true,
             lineWrapping: false,
             cursorBlinkRate: 500
-        }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.resizeBounds = null;
-        this.isDelayRender = signal(false, ...(ngDevMode ? [{ debugName: "isDelayRender" }] : []));
+        this.isDelayRender = signal(false, ...(ngDevMode ? [{ debugName: "isDelayRender" }] : /* istanbul ignore next */ []));
         this.thyNotifyService = inject(ThyNotifyService);
         this.contextService = inject(TheContextService);
         this.ngZone = inject(NgZone);
@@ -7291,10 +7291,10 @@ class TheCode extends TheBaseElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheCode, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options().readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n    <ng-codemirror\n      #codemirror\n      [isDelayRender]=\"isDelayRender()\"\n      contenteditable=\"false\"\n      class=\"ng-codemirror-wrapper\"\n      [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n      [options]=\"options()\"\n      [ngModel]=\"code\"\n      (ngModelChange)=\"codeChange($event)\"\n      (focusChange)=\"focusChange($event)\"\n    >\n    </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options().lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i2$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["options", "extensions", "languages", "isDelayRender"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheCode, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options().readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n    <ng-codemirror\n      #codemirror\n      [isDelayRender]=\"isDelayRender()\"\n      contenteditable=\"false\"\n      class=\"ng-codemirror-wrapper\"\n      [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n      [options]=\"options()\"\n      [ngModel]=\"code\"\n      (ngModelChange)=\"codeChange($event)\"\n      (focusChange)=\"focusChange($event)\"\n    >\n    </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options().lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i2$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["options", "extensions", "languages", "isDelayRender"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheCode, decorators: [{
             type: Component,
             args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'the-code-container'
@@ -8096,10 +8096,10 @@ class TheBaseSuggestion {
     handleMousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheBaseSuggestion, isStandalone: true, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheBaseSuggestion, isStandalone: true, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheBaseSuggestion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheBaseSuggestion, decorators: [{
             type: Directive
         }], propDecorators: { editor: [{
                 type: Input
@@ -8219,10 +8219,10 @@ class TableCellEventDispatcher {
             complete: () => observer.complete()
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCellEventDispatcher }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableCellEventDispatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -8251,10 +8251,10 @@ class ColumnResizeNotifierSource {
         /** Triggers a resize action. */
         this.triggerResize = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ColumnResizeNotifierSource }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnResizeNotifierSource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 
@@ -8357,10 +8357,10 @@ class TheColumnResizeDirective {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: TheColumnResizeDirective, isStandalone: true, selector: "div[theColumnResize]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: TheColumnResizeDirective, isStandalone: true, selector: "div[theColumnResize]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[theColumnResize]',
@@ -8926,10 +8926,10 @@ class TableStore {
     ngOnDestroy() {
         this.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -9198,10 +9198,10 @@ class TheTableContextMenuService {
             return this.menuRef.afterClosed();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableContextMenuService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableContextMenuService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableContextMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: TableStore }, { type: i1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }] });
 
@@ -9227,10 +9227,10 @@ class TableFreezeColumnPipe {
         }
         return headerColumnWidth + buffer < tableWrapperWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeColumnPipe, isStandalone: true, name: "freezeColumn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeColumnPipe, isStandalone: true, name: "freezeColumn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'freezeColumn',
@@ -9253,10 +9253,10 @@ class TableFreezeRowPipe {
         const mergeRows = table.children[0]?.children.filter(item => item.rowspan && item.rowspan !== 1);
         return !mergeRows.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeRowPipe, isStandalone: true, name: "freezeRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeRowPipe, isStandalone: true, name: "freezeRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'freezeRow',
@@ -9267,10 +9267,10 @@ class TableHasHeaderRowPipe {
     transform(table) {
         return hasHeaderRow(table);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableHasHeaderRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: TableHasHeaderRowPipe, isStandalone: true, name: "hasHeaderRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableHasHeaderRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: TableHasHeaderRowPipe, isStandalone: true, name: "hasHeaderRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableHasHeaderRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableHasHeaderRowPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'hasHeaderRow', standalone: true }]
         }] });
@@ -9324,8 +9324,8 @@ class TheTableOptions {
             Transforms.setNodes(this.editor, { header: null }, { at: rowPath });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableOptions, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheTableOptions, isStandalone: true, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableOptions, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheTableOptions, isStandalone: true, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             @for (option of tableDropdownList; track $index) {
                 <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
@@ -9340,7 +9340,7 @@ class TheTableOptions {
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableOptions, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-options',
@@ -9510,10 +9510,10 @@ class TheTableToolbar {
             viewContainerRef: this.viewContainerRef
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableToolbar, deps: [{ token: i1.ThyPopover }, { token: i1.ThyPopoverRef }, { token: i2$3.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheTableToolbar, isStandalone: true, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  @for (item of cellMenuList; track $index) {\n    @if (item.visibility) {\n      <a href=\"javascript:;\" thyAction [thyActionIcon]=\"item.icon\" [thyTooltip]=\"item.name\" (click)=\"item.actionHandle()\"></a>\n    }\n  }\n  @if (hasDivider) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  }\n  <a\n    href=\"javascript:;\"\n    thyAction\n    [thyTooltip]=\"locale().cellBackground\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  @if (tableStore.isSelectedTable && !isColumnEqual) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().colEqualWidth\" (click)=\"setEquallyColumnHandle($event)\">\n      <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && tableOptions?.showFullscreen) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().fullscreen\" (click)=\"setFullscreen($event)\">\n      <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && !tableStore?.isFullscreen) {\n    <a\n      class=\"fullscreen-hidden\"\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      (click)=\"onCopy($event)\"\n    ></a>\n  }\n  @if (tableStore.isSelectedTable) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>{{ locale().tableOptions }}</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  }\n  @if (tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  }\n</thy-actions>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableToolbar, deps: [{ token: i1.ThyPopover }, { token: i1.ThyPopoverRef }, { token: i2$3.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheTableToolbar, isStandalone: true, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  @for (item of cellMenuList; track $index) {\n    @if (item.visibility) {\n      <a href=\"javascript:;\" thyAction [thyActionIcon]=\"item.icon\" [thyTooltip]=\"item.name\" (click)=\"item.actionHandle()\"></a>\n    }\n  }\n  @if (hasDivider) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  }\n  <a\n    href=\"javascript:;\"\n    thyAction\n    [thyTooltip]=\"locale().cellBackground\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  @if (tableStore.isSelectedTable && !isColumnEqual) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().colEqualWidth\" (click)=\"setEquallyColumnHandle($event)\">\n      <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && tableOptions?.showFullscreen) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().fullscreen\" (click)=\"setFullscreen($event)\">\n      <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && !tableStore?.isFullscreen) {\n    <a\n      class=\"fullscreen-hidden\"\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      (click)=\"onCopy($event)\"\n    ></a>\n  }\n  @if (tableStore.isSelectedTable) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>{{ locale().tableOptions }}</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  }\n  @if (tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  }\n</thy-actions>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableToolbar, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-toolbar', imports: [FormsModule, ThyIcon, ThyAction, ThyActions, ThyTooltipDirective, ThyDivider, ThyColorPickerDirective], template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  @for (item of cellMenuList; track $index) {\n    @if (item.visibility) {\n      <a href=\"javascript:;\" thyAction [thyActionIcon]=\"item.icon\" [thyTooltip]=\"item.name\" (click)=\"item.actionHandle()\"></a>\n    }\n  }\n  @if (hasDivider) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  }\n  <a\n    href=\"javascript:;\"\n    thyAction\n    [thyTooltip]=\"locale().cellBackground\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  @if (tableStore.isSelectedTable && !isColumnEqual) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().colEqualWidth\" (click)=\"setEquallyColumnHandle($event)\">\n      <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && tableOptions?.showFullscreen) {\n    <a href=\"javascript:;\" thyAction [thyTooltip]=\"locale().fullscreen\" (click)=\"setFullscreen($event)\">\n      <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n  }\n  @if (tableStore.isSelectedTable && !tableStore?.isFullscreen) {\n    <a\n      class=\"fullscreen-hidden\"\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      (click)=\"onCopy($event)\"\n    ></a>\n  }\n  @if (tableStore.isSelectedTable) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>{{ locale().tableOptions }}</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  }\n  @if (tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon) {\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  }\n</thy-actions>\n" }]
         }], ctorParameters: () => [{ type: i1.ThyPopover }, { type: i1.ThyPopoverRef }, { type: i2$3.ThyNotifyService }, { type: i0.ViewContainerRef }], propDecorators: { tableStore: [{
@@ -9629,10 +9629,10 @@ class TableService {
             e.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableService, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableService, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ThyPopover }, { type: i2.Overlay }, { type: TableStore }, { type: i0.NgZone }] });
 
@@ -9794,7 +9794,7 @@ class TheInsertMark {
         this.destroy$ = new Subject();
         this.tooltipContent = '';
         this.disabled = false;
-        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.tooltipContent = this.type === 'row' ? this.locale().insertRow : this.locale().insertCol;
@@ -9880,10 +9880,10 @@ class TheInsertMark {
         }
         return this.type === 'column' && this.at === tablePosition.getWidth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: TheI18nService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, viewQueries: [{ propertyName: "insertWrapper", first: true, predicate: ["insertWrapper"], descendants: true }], ngImport: i0, template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  @if (dotWrapperHovered) {\n    <div class=\"the-table-controls-insert-line\" [ngStyle]=\"insertLineStyle\"></div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: TheI18nService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, viewQueries: [{ propertyName: "insertWrapper", first: true, predicate: ["insertWrapper"], descendants: true }], ngImport: i0, template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  @if (dotWrapperHovered) {\n    <div class=\"the-table-controls-insert-line\" [ngStyle]=\"insertLineStyle\"></div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheInsertMark, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheInsertMark, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', host: {
                         class: 'the-table-insert-mark'
@@ -10014,7 +10014,7 @@ class TheTable extends TheBaseElement {
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
-        this.disabledHorizontalScrollbarFixed = signal(false, ...(ngDevMode ? [{ debugName: "disabledHorizontalScrollbarFixed" }] : []));
+        this.disabledHorizontalScrollbarFixed = signal(false, ...(ngDevMode ? [{ debugName: "disabledHorizontalScrollbarFixed" }] : /* istanbul ignore next */ []));
         this.getOutletParent = () => {
             return this.tbodyElement.nativeElement;
         };
@@ -10853,8 +10853,8 @@ class TheTable extends TheBaseElement {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTable, deps: [{ token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.ScrollDispatcher }, { token: i2.Overlay }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheTable, isStandalone: true, selector: "the-table", host: { properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "isFreezeColumn", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-disabled-horizontal-scrollbar-fixed": "disabledHorizontalScrollbarFixed()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTable, deps: [{ token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.ScrollDispatcher }, { token: i2.Overlay }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheTable, isStandalone: true, selector: "the-table", host: { properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "isFreezeColumn", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-disabled-horizontal-scrollbar-fixed": "disabledHorizontalScrollbarFixed()" } }, providers: [
             TableStore,
             TableService,
             TheTableContextMenuService,
@@ -10866,9 +10866,9 @@ class TheTable extends TheBaseElement {
                 provide: THE_TABLE_COMPONENT_TOKEN,
                 useExisting: TheTable
             }
-        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "horizontalScrollbarContainer", first: true, predicate: ["horizontalScrollbarContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "horizontalScrollbarContent", first: true, predicate: ["horizontalScrollbarContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls\"\n      #cornerControl\n      contenteditable=\"false\"\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      @if (!(element | hasHeaderRow) && !isMobileMode) {\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      }\n      @if (!element?.options?.headerColumn && !isMobileMode) {\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      }\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        @for (control of rowControls; track trackByFnRowControls(i); let i = $index) {\n          <div\n            class=\"the-table-row-control-button-wrap\"\n            #rowControlsButtonWrapper\n            contenteditable=\"false\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n              dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n            }\"\n          >\n            @if (!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn) {\n              <button\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                type=\"button\"\n                contenteditable=\"false\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                class=\"the-table-row-controls-button the-table-controls-button\"\n              ></button>\n            }\n            @if (element?.options?.numberedColumn) {\n              <div\n                contenteditable=\"false\"\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                class=\"the-table-numbered-controls-button\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              >\n                <p class=\"row-number d-flex align-items-center\">\n                  {{ (element | hasHeaderRow) && i === 0 ? '' : (element | hasHeaderRow) ? i : i + 1 }}\n                </p>\n              </div>\n            }\n            @if (!isMobileMode) {\n              <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup>\n        <!--\u63A7\u5236\u5E8F\u53F7\u5217\u5BBD\u5EA6-->\n        @if (readonly && element?.options?.numberedColumn) {\n          <col class=\"the-table-number-col\" />\n        }\n        @for (col of columns; track $index) {\n          <col [ngStyle]=\"{ width: col.width + 'px' }\" />\n        }\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          @if (readonly && element?.options?.numberedColumn) {\n            <th class=\"the-table-number-col\"></th>\n          }\n          @for (control of colControls; track trackByFnColControls(i); let i = $index) {\n            <th\n              #colControl\n              class=\"the-table-col-control\"\n              contenteditable=\"false\"\n              [ngClass]=\"{\n                'control-active': tableStore.selectedColumnsIndex.includes(i),\n                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0,\n                'the-sticky-cell': i === 0 && isFreezeColumn\n              }\"\n              (pointerdown)=\"onColMousedown($event, i)\"\n            >\n              @if ((isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode) {\n                <the-table-insert-mark type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\" [parentElement]=\"colControl\">\n                </the-table-insert-mark>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody #tbody></tbody>\n      @if (!element?.options?.headerColumn) {\n        <div #headerRowLeftShadow class=\"header-row-shadow header-row-left-shadow\" contenteditable=\"false\"></div>\n      }\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n  <div class=\"the-table-horizontal-scrollbar-container\" #horizontalScrollbarContainer>\n    <div class=\"the-table-horizontal-scrollbar-content\" #horizontalScrollbarContent></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TheInsertMark, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "pipe", type: TableHasHeaderRowPipe, name: "hasHeaderRow" }] }); }
+        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "horizontalScrollbarContainer", first: true, predicate: ["horizontalScrollbarContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "horizontalScrollbarContent", first: true, predicate: ["horizontalScrollbarContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls\"\n      #cornerControl\n      contenteditable=\"false\"\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      @if (!(element | hasHeaderRow) && !isMobileMode) {\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      }\n      @if (!element?.options?.headerColumn && !isMobileMode) {\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      }\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        @for (control of rowControls; track trackByFnRowControls(i); let i = $index) {\n          <div\n            class=\"the-table-row-control-button-wrap\"\n            #rowControlsButtonWrapper\n            contenteditable=\"false\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n              dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n            }\"\n          >\n            @if (!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn) {\n              <button\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                type=\"button\"\n                contenteditable=\"false\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                class=\"the-table-row-controls-button the-table-controls-button\"\n              ></button>\n            }\n            @if (element?.options?.numberedColumn) {\n              <div\n                contenteditable=\"false\"\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                class=\"the-table-numbered-controls-button\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              >\n                <p class=\"row-number d-flex align-items-center\">\n                  {{ (element | hasHeaderRow) && i === 0 ? '' : (element | hasHeaderRow) ? i : i + 1 }}\n                </p>\n              </div>\n            }\n            @if (!isMobileMode) {\n              <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup>\n        <!--\u63A7\u5236\u5E8F\u53F7\u5217\u5BBD\u5EA6-->\n        @if (readonly && element?.options?.numberedColumn) {\n          <col class=\"the-table-number-col\" />\n        }\n        @for (col of columns; track $index) {\n          <col [ngStyle]=\"{ width: col.width + 'px' }\" />\n        }\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          @if (readonly && element?.options?.numberedColumn) {\n            <th class=\"the-table-number-col\"></th>\n          }\n          @for (control of colControls; track trackByFnColControls(i); let i = $index) {\n            <th\n              #colControl\n              class=\"the-table-col-control\"\n              contenteditable=\"false\"\n              [ngClass]=\"{\n                'control-active': tableStore.selectedColumnsIndex.includes(i),\n                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0,\n                'the-sticky-cell': i === 0 && isFreezeColumn\n              }\"\n              (pointerdown)=\"onColMousedown($event, i)\"\n            >\n              @if ((isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode) {\n                <the-table-insert-mark type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\" [parentElement]=\"colControl\">\n                </the-table-insert-mark>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody #tbody></tbody>\n      @if (!element?.options?.headerColumn) {\n        <div #headerRowLeftShadow class=\"header-row-shadow header-row-left-shadow\" contenteditable=\"false\"></div>\n      }\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n  <div contenteditable=\"false\" class=\"the-table-horizontal-scrollbar-container\" #horizontalScrollbarContainer>\n    <div class=\"the-table-horizontal-scrollbar-content\" #horizontalScrollbarContent></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TheInsertMark, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "pipe", type: TableHasHeaderRowPipe, name: "hasHeaderRow" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTable, decorators: [{
             type: Component,
             args: [{ selector: 'the-table', providers: [
                         TableStore,
@@ -10888,7 +10888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         '[class.the-numbered-table]': 'element?.options?.numberedColumn',
                         '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput',
                         '[class.the-table-disabled-horizontal-scrollbar-fixed]': 'disabledHorizontalScrollbarFixed()'
-                    }, imports: [NgClass, NgStyle, TheInsertMark, TheColumnResizeDirective, TableHasHeaderRowPipe], template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls\"\n      #cornerControl\n      contenteditable=\"false\"\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      @if (!(element | hasHeaderRow) && !isMobileMode) {\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      }\n      @if (!element?.options?.headerColumn && !isMobileMode) {\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      }\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        @for (control of rowControls; track trackByFnRowControls(i); let i = $index) {\n          <div\n            class=\"the-table-row-control-button-wrap\"\n            #rowControlsButtonWrapper\n            contenteditable=\"false\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n              dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n            }\"\n          >\n            @if (!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn) {\n              <button\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                type=\"button\"\n                contenteditable=\"false\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                class=\"the-table-row-controls-button the-table-controls-button\"\n              ></button>\n            }\n            @if (element?.options?.numberedColumn) {\n              <div\n                contenteditable=\"false\"\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                class=\"the-table-numbered-controls-button\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              >\n                <p class=\"row-number d-flex align-items-center\">\n                  {{ (element | hasHeaderRow) && i === 0 ? '' : (element | hasHeaderRow) ? i : i + 1 }}\n                </p>\n              </div>\n            }\n            @if (!isMobileMode) {\n              <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup>\n        <!--\u63A7\u5236\u5E8F\u53F7\u5217\u5BBD\u5EA6-->\n        @if (readonly && element?.options?.numberedColumn) {\n          <col class=\"the-table-number-col\" />\n        }\n        @for (col of columns; track $index) {\n          <col [ngStyle]=\"{ width: col.width + 'px' }\" />\n        }\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          @if (readonly && element?.options?.numberedColumn) {\n            <th class=\"the-table-number-col\"></th>\n          }\n          @for (control of colControls; track trackByFnColControls(i); let i = $index) {\n            <th\n              #colControl\n              class=\"the-table-col-control\"\n              contenteditable=\"false\"\n              [ngClass]=\"{\n                'control-active': tableStore.selectedColumnsIndex.includes(i),\n                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0,\n                'the-sticky-cell': i === 0 && isFreezeColumn\n              }\"\n              (pointerdown)=\"onColMousedown($event, i)\"\n            >\n              @if ((isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode) {\n                <the-table-insert-mark type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\" [parentElement]=\"colControl\">\n                </the-table-insert-mark>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody #tbody></tbody>\n      @if (!element?.options?.headerColumn) {\n        <div #headerRowLeftShadow class=\"header-row-shadow header-row-left-shadow\" contenteditable=\"false\"></div>\n      }\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n  <div class=\"the-table-horizontal-scrollbar-container\" #horizontalScrollbarContainer>\n    <div class=\"the-table-horizontal-scrollbar-content\" #horizontalScrollbarContent></div>\n  </div>\n</div>\n" }]
+                    }, imports: [NgClass, NgStyle, TheInsertMark, TheColumnResizeDirective, TableHasHeaderRowPipe], template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls\"\n      #cornerControl\n      contenteditable=\"false\"\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      @if (!(element | hasHeaderRow) && !isMobileMode) {\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      }\n      @if (!element?.options?.headerColumn && !isMobileMode) {\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      }\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        @for (control of rowControls; track trackByFnRowControls(i); let i = $index) {\n          <div\n            class=\"the-table-row-control-button-wrap\"\n            #rowControlsButtonWrapper\n            contenteditable=\"false\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n              dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n            }\"\n          >\n            @if (!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn) {\n              <button\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                type=\"button\"\n                contenteditable=\"false\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                class=\"the-table-row-controls-button the-table-controls-button\"\n              ></button>\n            }\n            @if (element?.options?.numberedColumn) {\n              <div\n                contenteditable=\"false\"\n                (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n                class=\"the-table-numbered-controls-button\"\n                [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              >\n                <p class=\"row-number d-flex align-items-center\">\n                  {{ (element | hasHeaderRow) && i === 0 ? '' : (element | hasHeaderRow) ? i : i + 1 }}\n                </p>\n              </div>\n            }\n            @if (!isMobileMode) {\n              <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup>\n        <!--\u63A7\u5236\u5E8F\u53F7\u5217\u5BBD\u5EA6-->\n        @if (readonly && element?.options?.numberedColumn) {\n          <col class=\"the-table-number-col\" />\n        }\n        @for (col of columns; track $index) {\n          <col [ngStyle]=\"{ width: col.width + 'px' }\" />\n        }\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          @if (readonly && element?.options?.numberedColumn) {\n            <th class=\"the-table-number-col\"></th>\n          }\n          @for (control of colControls; track trackByFnColControls(i); let i = $index) {\n            <th\n              #colControl\n              class=\"the-table-col-control\"\n              contenteditable=\"false\"\n              [ngClass]=\"{\n                'control-active': tableStore.selectedColumnsIndex.includes(i),\n                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0,\n                'the-sticky-cell': i === 0 && isFreezeColumn\n              }\"\n              (pointerdown)=\"onColMousedown($event, i)\"\n            >\n              @if ((isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode) {\n                <the-table-insert-mark type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\" [parentElement]=\"colControl\">\n                </the-table-insert-mark>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody #tbody></tbody>\n      @if (!element?.options?.headerColumn) {\n        <div #headerRowLeftShadow class=\"header-row-shadow header-row-left-shadow\" contenteditable=\"false\"></div>\n      }\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n  <div contenteditable=\"false\" class=\"the-table-horizontal-scrollbar-container\" #horizontalScrollbarContainer>\n    <div class=\"the-table-horizontal-scrollbar-content\" #horizontalScrollbarContent></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.ScrollDispatcher }, { type: i2.Overlay }, { type: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }, { type: TheModeConfig, decorators: [{
                     type: Inject,
                     args: [THE_MODE_TOKEN]
@@ -11021,10 +11021,10 @@ class TheVerticalToolbarItem extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheVerticalToolbarItem, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    @for (menu of toolbarItem?.includes; track $index) {\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        @if (menu.icon) {\n          <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        }\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheVerticalToolbarItem, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    @for (menu of toolbarItem?.includes; track $index) {\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        @if (menu.icon) {\n          <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        }\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheVerticalToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheVerticalToolbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign'
@@ -11192,7 +11192,11 @@ class TheQuickInsert {
             const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
             const rootNode = AngularEditor.toDOMNode(editor, block);
             const editorDom = AngularEditor.toDOMNode(editor, editor);
-            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop + editorDom.offsetTop);
+            let top = rootNode.offsetTop;
+            if (getComputedStyle(editorDom).position === 'relative') {
+                top = rootNode.offsetTop + editorDom.offsetTop;
+            }
+            this.updatePosition(rootNode.offsetLeft, top);
             return;
         }
         this.addHiddenClass();
@@ -11246,10 +11250,10 @@ class TheQuickInsert {
             this.updateIconDisplay();
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheQuickInsert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheQuickInsert, isStandalone: true, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<thy-icon\n  #iconElement\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  [thyIconName]=\"displayIconName\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mouseup)=\"handleClick($event)\"\n></thy-icon>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheQuickInsert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheQuickInsert, isStandalone: true, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<thy-icon\n  #iconElement\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  [thyIconName]=\"displayIconName\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mouseup)=\"handleClick($event)\"\n></thy-icon>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheQuickInsert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheQuickInsert, decorators: [{
             type: Component,
             args: [{ selector: '[theQuickInsert]', imports: [ThyIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<thy-icon\n  #iconElement\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  [thyIconName]=\"displayIconName\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mouseup)=\"handleClick($event)\"\n></thy-icon>\n" }]
         }], propDecorators: { className: [{
@@ -11408,10 +11412,10 @@ class TheTableSelect {
             this.maxRowIndex = -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableSelect, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheTableSelect, isStandalone: true, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  @for (item of tableData; track $index; let rowIndex = $index) {\n    <div class=\"selector-row\">\n      @for (item of tableData; track $index; let colIndex = $index) {\n        <span\n          [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n          (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n          (mousedown)=\"executeTable($event, rowIndex, colIndex)\"\n        >\n        </span>\n      }\n    </div>\n  }\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableSelect, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheTableSelect, isStandalone: true, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  @for (item of tableData; track $index; let rowIndex = $index) {\n    <div class=\"selector-row\">\n      @for (item of tableData; track $index; let colIndex = $index) {\n        <span\n          [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n          (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n          (mousedown)=\"executeTable($event, rowIndex, colIndex)\"\n        >\n        </span>\n      }\n    </div>\n  }\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableSelect, decorators: [{
             type: Component,
             args: [{ selector: 'table-select', imports: [NgClass], template: "<div class=\"table-selector-container\">\n  @for (item of tableData; track $index; let rowIndex = $index) {\n    <div class=\"selector-row\">\n      @for (item of tableData; track $index; let colIndex = $index) {\n        <span\n          [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n          (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n          (mousedown)=\"executeTable($event, rowIndex, colIndex)\"\n        >\n        </span>\n      }\n    </div>\n  }\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ThyPopoverRef }], propDecorators: { optionsParam: [{
@@ -11428,7 +11432,7 @@ class ThePluginMenuComponent {
         this.autoActiveFirstItem = true;
         this.containerClassName = `the-plugin-menu-container`;
         this.locale = injectTranslations(inject(TheI18nService));
-        this.listBox = viewChild(TheListboxDirective, ...(ngDevMode ? [{ debugName: "listBox" }] : []));
+        this.listBox = viewChild(TheListboxDirective, ...(ngDevMode ? [{ debugName: "listBox" }] : /* istanbul ignore next */ []));
         this.listBoxAutoActiveFirstItem = true;
         this.groupMenu = [];
         this.iconMenu = [];
@@ -11620,10 +11624,10 @@ class ThePluginMenuComponent {
     trackByFn(index, item) {
         return item?.key ?? index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThePluginMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "listBox", first: true, predicate: TheListboxDirective, descendants: true, isSignal: true }, { propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "@if (theDisplaySearch) {\n  <div class=\"menu-search px-5 pt-5 pb-2\">\n    <thy-input-search\n      [placeholder]=\"locale().search\"\n      thyIconPosition=\"after\"\n      [(ngModel)]=\"keyWords\"\n      (ngModelChange)=\"updateKeywords(keyWords)\"\n    >\n    </thy-input-search>\n  </div>\n}\n\n@if (groupMenu.length > 0) {\n  <div\n    class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n    theListBox\n    [keyboardContainer]=\"keyboardContainer\"\n    [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n    (theListboxChange)=\"listBoxChange($event)\"\n  >\n    @if (iconMenu?.length > 0) {\n      <div theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n        @for (item of iconMenu; track trackByFn($index, item)) {\n          @if (item.type === ThePluginMenuItemType.icon) {\n            <a\n              href=\"javascript:;\"\n              class=\"mt-2\"\n              thyAction\n              theListboxOption\n              thePreventDefault\n              [theOptionValue]=\"item\"\n              [thyActionIcon]=\"item.icon\"\n              [thyTooltip]=\"item?.name\"\n              [thyDisabled]=\"item.disabled\"\n              [theOptionDisabled]=\"item.disabled\"\n              (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n              (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n              (click)=\"handleItemSelection(item)\"\n            ></a>\n          }\n        }\n      </div>\n      <thy-divider class=\"my-2\"></thy-divider>\n    }\n\n    <div theListboxGroup>\n      @for (item of groupMenu; track trackByFn($index, item)) {\n        @if (item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table') {\n          <div\n            class=\"py-0\"\n            thyDropdownMenuItem\n            theListboxOption\n            thePreventDefault\n            [theOptionValue]=\"item\"\n            [thyDisabled]=\"item.disabled\"\n            [theOptionDisabled]=\"item.disabled\"\n            (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n            (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n            (click)=\"handleItemSelection(item)\"\n          >\n            @if (item?.menuIcon) {\n              <div class=\"menu-icon mr-2\">\n                <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n              </div>\n            }\n            <div class=\"menu-content d-flex align-items-center\">\n              <div class=\"menu-item-title w-100\">\n                {{ item.name }}\n              </div>\n            </div>\n          </div>\n        }\n        @if (item.isMenuItem && item.children?.length > 0) {\n          <ng-container #hasExpanded>\n            <div\n              #dropdownTriggers\n              class=\"py-0\"\n              thyTrigger=\"hover\"\n              thyDropdownMenuItem\n              theListboxOption\n              thePreventDefault\n              [theOptionValue]=\"item\"\n              [thyDisabled]=\"item.disabled\"\n              [theOptionDisabled]=\"item.disabled\"\n              [thyDropdown]=\"expand\"\n              [thyPopoverOptions]=\"expandPopoverOptions\"\n              [thyPanelClass]=\"subPanelClass\"\n              (click)=\"handleItemSelection(item)\"\n            >\n              @if (item?.menuIcon) {\n                <div class=\"menu-icon mr-2\">\n                  <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                </div>\n              }\n              <div class=\"menu-content d-flex align-items-center\">\n                <div class=\"menu-item-title w-100\">\n                  {{ item.name }}\n                </div>\n              </div>\n              @if (item.children?.length > 0) {\n                <div>\n                  <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n                </div>\n              }\n              <thy-dropdown-menu #expand>\n                <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n                  @for (child of item.children; track trackByFn($index, child)) {\n                    @if (child.type === ThePluginMenuItemType.group) {\n                      <div\n                        class=\"py-0\"\n                        thyDropdownMenuItem\n                        theListboxOption\n                        thePreventDefault\n                        [theOptionDisabled]=\"item.disabled\"\n                        [thyDisabled]=\"child.disabled\"\n                        [theOptionValue]=\"child\"\n                        (mouseenter)=\"listBoxOptionMouseenter($event, child)\"\n                        (mouseleave)=\"listBoxOptionMouseleave($event, child)\"\n                        (click)=\"handleItemSelection(child)\"\n                      >\n                        @if (child?.menuIcon) {\n                          <div class=\"menu-icon mr-2\">\n                            <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                          </div>\n                        }\n                        <div class=\"menu-content d-flex align-items-center\">\n                          <div class=\"menu-item-title w-100\">\n                            {{ child.name }}\n                          </div>\n                        </div>\n                      </div>\n                    } @else if (child === 'divider') {\n                      <thy-divider class=\"my-2\"></thy-divider>\n                    }\n                  }\n                </div>\n              </thy-dropdown-menu>\n            </div>\n          </ng-container>\n        }\n        @if (item.isMenuItem && item.key === 'table') {\n          <div\n            #dropdownTriggers\n            class=\"py-0\"\n            thyPlacement=\"rightTop\"\n            thyTrigger=\"hover\"\n            thyDropdownMenuItem\n            theListboxOption\n            thePreventDefault\n            [theOptionValue]=\"item\"\n            [theOptionDisabled]=\"item.disabled\"\n            [thyDisabled]=\"item.disabled\"\n            [thyPopover]=\"tableSelect\"\n            [thyConfig]=\"tableSelectPopoverConfig\"\n            (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n            (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n            (click)=\"handleItemSelection(item)\"\n          >\n            <div class=\"menu-icon mr-2\">\n              <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n            </div>\n            <div class=\"menu-content d-flex align-items-center\">\n              <div class=\"menu-item-title w-100\">\n                {{ item.name }}\n              </div>\n            </div>\n            <div>\n              <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n            </div>\n            <ng-template #tableSelect>\n              <table-select\n                class=\"plugin-menu-table the-table-selector-panel\"\n                [editor]=\"editor\"\n                [beforeInsert]=\"removeBlock\"\n              ></table-select>\n            </ng-template>\n          </div>\n        }\n        @if (!item.isMenuItem) {\n          <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "component", type: i2$4.ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: TheTableSelect, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyInputSearch, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ThePluginMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "listBox", first: true, predicate: TheListboxDirective, descendants: true, isSignal: true }, { propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "@if (theDisplaySearch) {\n  <div class=\"menu-search px-5 pt-5 pb-2\">\n    <thy-input-search\n      [placeholder]=\"locale().search\"\n      thyIconPosition=\"after\"\n      [(ngModel)]=\"keyWords\"\n      (ngModelChange)=\"updateKeywords(keyWords)\"\n    >\n    </thy-input-search>\n  </div>\n}\n\n@if (groupMenu.length > 0) {\n  <div\n    class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n    theListBox\n    [keyboardContainer]=\"keyboardContainer\"\n    [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n    (theListboxChange)=\"listBoxChange($event)\"\n  >\n    @if (iconMenu?.length > 0) {\n      <div theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n        @for (item of iconMenu; track trackByFn($index, item)) {\n          @if (item.type === ThePluginMenuItemType.icon) {\n            <a\n              href=\"javascript:;\"\n              class=\"mt-2\"\n              thyAction\n              theListboxOption\n              thePreventDefault\n              [theOptionValue]=\"item\"\n              [thyActionIcon]=\"item.icon\"\n              [thyTooltip]=\"item?.name\"\n              [thyDisabled]=\"item.disabled\"\n              [theOptionDisabled]=\"item.disabled\"\n              (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n              (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n              (click)=\"handleItemSelection(item)\"\n            ></a>\n          }\n        }\n      </div>\n      <thy-divider class=\"my-2\"></thy-divider>\n    }\n\n    <div theListboxGroup>\n      @for (item of groupMenu; track trackByFn($index, item)) {\n        @if (item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table') {\n          <div\n            class=\"py-0\"\n            thyDropdownMenuItem\n            theListboxOption\n            thePreventDefault\n            [theOptionValue]=\"item\"\n            [thyDisabled]=\"item.disabled\"\n            [theOptionDisabled]=\"item.disabled\"\n            (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n            (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n            (click)=\"handleItemSelection(item)\"\n          >\n            @if (item?.menuIcon) {\n              <div class=\"menu-icon mr-2\">\n                <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n              </div>\n            }\n            <div class=\"menu-content d-flex align-items-center\">\n              <div class=\"menu-item-title w-100\">\n                {{ item.name }}\n              </div>\n            </div>\n          </div>\n        }\n        @if (item.isMenuItem && item.children?.length > 0) {\n          <ng-container #hasExpanded>\n            <div\n              #dropdownTriggers\n              class=\"py-0\"\n              thyTrigger=\"hover\"\n              thyDropdownMenuItem\n              theListboxOption\n              thePreventDefault\n              [theOptionValue]=\"item\"\n              [thyDisabled]=\"item.disabled\"\n              [theOptionDisabled]=\"item.disabled\"\n              [thyDropdown]=\"expand\"\n              [thyPopoverOptions]=\"expandPopoverOptions\"\n              [thyPanelClass]=\"subPanelClass\"\n              (click)=\"handleItemSelection(item)\"\n            >\n              @if (item?.menuIcon) {\n                <div class=\"menu-icon mr-2\">\n                  <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                </div>\n              }\n              <div class=\"menu-content d-flex align-items-center\">\n                <div class=\"menu-item-title w-100\">\n                  {{ item.name }}\n                </div>\n              </div>\n              @if (item.children?.length > 0) {\n                <div>\n                  <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n                </div>\n              }\n              <thy-dropdown-menu #expand>\n                <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n                  @for (child of item.children; track trackByFn($index, child)) {\n                    @if (child.type === ThePluginMenuItemType.group) {\n                      <div\n                        class=\"py-0\"\n                        thyDropdownMenuItem\n                        theListboxOption\n                        thePreventDefault\n                        [theOptionDisabled]=\"item.disabled\"\n                        [thyDisabled]=\"child.disabled\"\n                        [theOptionValue]=\"child\"\n                        (mouseenter)=\"listBoxOptionMouseenter($event, child)\"\n                        (mouseleave)=\"listBoxOptionMouseleave($event, child)\"\n                        (click)=\"handleItemSelection(child)\"\n                      >\n                        @if (child?.menuIcon) {\n                          <div class=\"menu-icon mr-2\">\n                            <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                          </div>\n                        }\n                        <div class=\"menu-content d-flex align-items-center\">\n                          <div class=\"menu-item-title w-100\">\n                            {{ child.name }}\n                          </div>\n                        </div>\n                      </div>\n                    } @else if (child === 'divider') {\n                      <thy-divider class=\"my-2\"></thy-divider>\n                    }\n                  }\n                </div>\n              </thy-dropdown-menu>\n            </div>\n          </ng-container>\n        }\n        @if (item.isMenuItem && item.key === 'table') {\n          <div\n            #dropdownTriggers\n            class=\"py-0\"\n            thyPlacement=\"rightTop\"\n            thyTrigger=\"hover\"\n            thyDropdownMenuItem\n            theListboxOption\n            thePreventDefault\n            [theOptionValue]=\"item\"\n            [theOptionDisabled]=\"item.disabled\"\n            [thyDisabled]=\"item.disabled\"\n            [thyPopover]=\"tableSelect\"\n            [thyConfig]=\"tableSelectPopoverConfig\"\n            (mouseenter)=\"listBoxOptionMouseenter($event, item)\"\n            (mouseleave)=\"listBoxOptionMouseleave($event, item)\"\n            (click)=\"handleItemSelection(item)\"\n          >\n            <div class=\"menu-icon mr-2\">\n              <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n            </div>\n            <div class=\"menu-content d-flex align-items-center\">\n              <div class=\"menu-item-title w-100\">\n                {{ item.name }}\n              </div>\n            </div>\n            <div>\n              <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n            </div>\n            <ng-template #tableSelect>\n              <table-select\n                class=\"plugin-menu-table the-table-selector-panel\"\n                [editor]=\"editor\"\n                [beforeInsert]=\"removeBlock\"\n              ></table-select>\n            </ng-template>\n          </div>\n        }\n        @if (!item.isMenuItem) {\n          <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "component", type: i2$4.ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: TheTableSelect, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyInputSearch, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-plugin-menu', imports: [
                         FormsModule,
@@ -11751,8 +11755,8 @@ class TheInlineToolbar {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheInlineToolbar, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheInlineToolbar, isStandalone: true, 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, template: `<the-toolbar
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheInlineToolbar, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheInlineToolbar, isStandalone: true, 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, template: `<the-toolbar
         #inlineToolbar
         class="the-inline-toolbar"
         [editor]="editor"
@@ -11760,7 +11764,7 @@ class TheInlineToolbar {
         [isMore]="false"
     ></the-toolbar> `, isInline: true, dependencies: [{ kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheInlineToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheInlineToolbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-inline-toolbar',
@@ -11946,10 +11950,10 @@ class TheConversionHint {
     clearCloseTimer() {
         clearInterval(this.closeTimer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheConversionHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheConversionHint, isStandalone: true, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n  <thy-alert thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" [thyMessage]=\"locale().conversionHint\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> {{ locale().conversion }} </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheConversionHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheConversionHint, isStandalone: true, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n  <thy-alert thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" [thyMessage]=\"locale().conversionHint\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> {{ locale().conversion }} </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheConversionHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheConversionHint, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
                         class: 'the-conversion-hint'
@@ -12013,10 +12017,10 @@ class TheContextMenu {
         item.backgroundColor = color;
         item.activeHandle(undefined, item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheContextMenu, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheContextMenu, isStandalone: true, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  @for (menuItem of menuEntities; track $index) {\n    @if (menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color') {\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.visibility && menuItem.key === 'background-color') {\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.visibility && menuItem?.isInputNumber) {\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.divider && menuItem.visibility) {\n      <thy-dropdown-menu-divider></thy-dropdown-menu-divider>\n    }\n  }\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    @if (item.extendIcon) {\n      <span thyDropdownMenuItemExtendIcon>\n        <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n      </span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    @if (item.extendIcon) {\n      <span thyDropdownMenuItemExtendIcon>\n        <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n      </span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheContextMenu, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheContextMenu, isStandalone: true, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  @for (menuItem of menuEntities; track $index) {\n    @if (menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color') {\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.visibility && menuItem.key === 'background-color') {\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.visibility && menuItem?.isInputNumber) {\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    }\n    @if (menuItem.divider && menuItem.visibility) {\n      <thy-dropdown-menu-divider></thy-dropdown-menu-divider>\n    }\n  }\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    @if (item.extendIcon) {\n      <span thyDropdownMenuItemExtendIcon>\n        <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n      </span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    @if (item.extendIcon) {\n      <span thyDropdownMenuItemExtendIcon>\n        <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n      </span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheContextMenu, decorators: [{
             type: Component,
             args: [{ selector: 'the-contextmenu', imports: [
                         FormsModule,
@@ -12195,10 +12199,10 @@ class TheColumnResizeOverlayHandle {
             this.resizeNotifier.resizeStarted.next(sizeMessage);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
             type: Component,
             args: [{
                     host: { class: 'the-table-resize-overlay-thumb' },
@@ -13018,10 +13022,10 @@ class TheColorToolbarItem extends TheBaseToolbarItem {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColorToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheColorToolbarItem, isStandalone: true, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n  class=\"d-flex p-0\"\n  thySize=\"zero\"\n  thyTooltipPlacement=\"top\"\n  [thyTooltip]=\"toolbarItem.name\"\n  [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n  <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n    <thy-icon\n      thyIconType=\"twotone\"\n      [thyIconName]=\"toolbarItem.icon\"\n      [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n      (mousedown)=\"selectColor($event)\"\n    ></thy-icon>\n  </a>\n  <a\n    class=\"pl-0 pr-0 caret-down\"\n    href=\"javascript:;\"\n    thyAction\n    thyColorPicker\n    thyPlacement=\"bottomLeft\"\n    [(ngModel)]=\"selectedColor\"\n    (thyPanelOpen)=\"pickerActive = true\"\n    (thyPanelOpen)=\"colorPanelOpen($event)\"\n    (thyPanelClose)=\"colorPanelClose()\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"preventDefault($event)\"\n  >\n    <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColorToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheColorToolbarItem, isStandalone: true, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n  class=\"d-flex p-0\"\n  thySize=\"zero\"\n  thyTooltipPlacement=\"top\"\n  [thyTooltip]=\"toolbarItem.name\"\n  [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n  <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n    <thy-icon\n      thyIconType=\"twotone\"\n      [thyIconName]=\"toolbarItem.icon\"\n      [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n      (mousedown)=\"selectColor($event)\"\n    ></thy-icon>\n  </a>\n  <a\n    class=\"pl-0 pr-0 caret-down\"\n    href=\"javascript:;\"\n    thyAction\n    thyColorPicker\n    thyPlacement=\"bottomLeft\"\n    [(ngModel)]=\"selectedColor\"\n    (thyPanelOpen)=\"pickerActive = true\"\n    (thyPanelOpen)=\"colorPanelOpen($event)\"\n    (thyPanelClose)=\"colorPanelClose()\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"preventDefault($event)\"\n  >\n    <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheColorToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheColorToolbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'the-color-toolbar-item', host: {
                         class: 'the-color-toolbar-item'
@@ -13915,7 +13919,7 @@ const createFontSizePlugin = (locale) => createPluginFactory({
 })();
 
 const cleanHeadingEffect = (editor, path) => {
-    if (editor.options.enableVirtualScroll) {
+    if (editor.options?.enableVirtualScroll) {
         return;
     }
     const index = path[0];
@@ -14759,10 +14763,10 @@ class TheImage extends TheBaseElement {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheImage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ThyImageGroup }, { token: THE_IMAGE_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  @if (imageEntry.thumbUrl) {\n    <div #imageContent class=\"image-content\" contenteditable=\"false\" [class.cursor-pointer]=\"!selection\">\n      <img\n        #img\n        thyImage\n        class=\"main-image\"\n        [class.image-collapsed]=\"selection && !uploading\"\n        [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n        [alt]=\"imageEntry.name\"\n        [thySrc]=\"imageEntry.thumbUrl\"\n        [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n        [thyOriginSrc]=\"imageEntry.originUrl\"\n        [thyDisablePreview]=\"disablePreview\"\n        [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n        (load)=\"imageLoaded($event)\"\n        (mousedown)=\"preventDefault($event)\"\n        (error)=\"imageError($event)\"\n        (click)=\"imageClick($event)\"\n      />\n      @if (isCollapsedAndNonReadonly) {\n        <div class=\"image-profile\" [class.outline]=\"selection\">\n          @if (!loadImageError) {\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n          }\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n      @if (!uploading) {\n        <div class=\"layer\" [class.readonly]=\"readonly\"></div>\n      }\n    </div>\n  } @else {\n    @if (!imageEntry.thumbUrl) {\n      <div class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n      </div>\n    }\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n  }\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    @for (item of layoutOptions; track $index) {\n      @if (item.key !== 'split') {\n        <a\n          href=\"javascript:;\"\n          thyAction\n          [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n          [thyActionIcon]=\"item.icon\"\n          [thyActionActive]=\"layoutActive(item.key)\"\n          [thyTooltip]=\"item.name\"\n          thyTooltipPlacement=\"top\"\n          (mousedown)=\"item?.handle($event, item.key)\"\n        ></a>\n      }\n      @if (item.key === 'split') {\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n      }\n    }\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  @if (uploading) {\n    <div 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  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheImage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ThyImageGroup }, { token: THE_IMAGE_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  @if (imageEntry.thumbUrl) {\n    <div #imageContent class=\"image-content\" contenteditable=\"false\" [class.cursor-pointer]=\"!selection\">\n      <img\n        #img\n        thyImage\n        class=\"main-image\"\n        [class.image-collapsed]=\"selection && !uploading\"\n        [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n        [alt]=\"imageEntry.name\"\n        [thySrc]=\"imageEntry.thumbUrl\"\n        [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n        [thyOriginSrc]=\"imageEntry.originUrl\"\n        [thyDisablePreview]=\"disablePreview\"\n        [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n        (load)=\"imageLoaded($event)\"\n        (mousedown)=\"preventDefault($event)\"\n        (error)=\"imageError($event)\"\n        (click)=\"imageClick($event)\"\n      />\n      @if (isCollapsedAndNonReadonly) {\n        <div class=\"image-profile\" [class.outline]=\"selection\">\n          @if (!loadImageError) {\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n          }\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n      @if (!uploading) {\n        <div class=\"layer\" [class.readonly]=\"readonly\"></div>\n      }\n    </div>\n  } @else {\n    @if (!imageEntry.thumbUrl) {\n      <div class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n      </div>\n    }\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n  }\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    @for (item of layoutOptions; track $index) {\n      @if (item.key !== 'split') {\n        <a\n          href=\"javascript:;\"\n          thyAction\n          [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n          [thyActionIcon]=\"item.icon\"\n          [thyActionActive]=\"layoutActive(item.key)\"\n          [thyTooltip]=\"item.name\"\n          thyTooltipPlacement=\"top\"\n          (mousedown)=\"item?.handle($event, item.key)\"\n        ></a>\n      }\n      @if (item.key === 'split') {\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n      }\n    }\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  @if (uploading) {\n    <div 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  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheImage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheImage, decorators: [{
             type: Component,
             args: [{ selector: 'the-image, [theImage]', imports: [NgStyle, NgTemplateOutlet, ThyIcon, ThyImageDirective, ThyAction, ThyDivider, ThyActions, ThyTooltipDirective, ThyProgress], providers: [ThyImageService], template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  @if (imageEntry.thumbUrl) {\n    <div #imageContent class=\"image-content\" contenteditable=\"false\" [class.cursor-pointer]=\"!selection\">\n      <img\n        #img\n        thyImage\n        class=\"main-image\"\n        [class.image-collapsed]=\"selection && !uploading\"\n        [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n        [alt]=\"imageEntry.name\"\n        [thySrc]=\"imageEntry.thumbUrl\"\n        [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n        [thyOriginSrc]=\"imageEntry.originUrl\"\n        [thyDisablePreview]=\"disablePreview\"\n        [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n        (load)=\"imageLoaded($event)\"\n        (mousedown)=\"preventDefault($event)\"\n        (error)=\"imageError($event)\"\n        (click)=\"imageClick($event)\"\n      />\n      @if (isCollapsedAndNonReadonly) {\n        <div class=\"image-profile\" [class.outline]=\"selection\">\n          @if (!loadImageError) {\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n          }\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n      @if (!uploading) {\n        <div class=\"layer\" [class.readonly]=\"readonly\"></div>\n      }\n    </div>\n  } @else {\n    @if (!imageEntry.thumbUrl) {\n      <div class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n      </div>\n    }\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n  }\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    @for (item of layoutOptions; track $index) {\n      @if (item.key !== 'split') {\n        <a\n          href=\"javascript:;\"\n          thyAction\n          [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n          [thyActionIcon]=\"item.icon\"\n          [thyActionActive]=\"layoutActive(item.key)\"\n          [thyTooltip]=\"item.name\"\n          thyTooltipPlacement=\"top\"\n          (mousedown)=\"item?.handle($event, item.key)\"\n        ></a>\n      }\n      @if (item.key === 'split') {\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n      }\n    }\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  @if (uploading) {\n    <div 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  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.ThyImageGroup }, { type: undefined, decorators: [{
@@ -15098,10 +15102,10 @@ class TheLinkHover {
         this.deleteHandle();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheLinkHover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheLinkHover, isStandalone: true, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheLinkHover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheLinkHover, isStandalone: true, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheLinkHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheLinkHover, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-hover', imports: [ThyDivider, ThyAction, ThePreventDefaultDirective], template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { link: [{
@@ -15170,10 +15174,10 @@ class TheLinkEdit {
             form.validator.setElementErrorMessage(`link`, this.locale().linkPattern);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheLinkEdit, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheLinkEdit, isStandalone: true, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group [thyLabelText]=\"locale().text\">\n    <input thyInput [placeholder]=\"locale().enterText\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group [thyLabelText]=\"locale().link\">\n    <input name=\"link\" thyInput [placeholder]=\"locale().enterLink\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">{{ locale().cancel }}</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">{{ locale().apply }}</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "component", type: ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheLinkEdit, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheLinkEdit, isStandalone: true, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group [thyLabelText]=\"locale().text\">\n    <input thyInput [placeholder]=\"locale().enterText\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group [thyLabelText]=\"locale().link\">\n    <input name=\"link\" thyInput [placeholder]=\"locale().enterLink\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">{{ locale().cancel }}</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">{{ locale().apply }}</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "component", type: ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheLinkEdit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheLinkEdit, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', imports: [
                         FormsModule,
@@ -16865,8 +16869,8 @@ class TheTableToolbarItem extends TheBaseToolbarItem {
         });
         return this.tableSelectRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableToolbarItem, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheTableToolbarItem, isStandalone: true, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableToolbarItem, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheTableToolbarItem, isStandalone: true, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             class="link-with-down"
@@ -16882,7 +16886,7 @@ class TheTableToolbarItem extends TheBaseToolbarItem {
         </a>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTableToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTableToolbarItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
@@ -17002,7 +17006,7 @@ class TableRowFlavour extends TheBaseFlavourElement {
         this.renderOrUpdateNumberedColumn();
     }
     useRowHeight() {
-        toggleStyle(this.nativeElement, 'height', this.element.height ? this.element.height + 'px' : '');
+        toggleStyle(this.nativeElement, 'height', this.element.height ? this.element.height + 'px' : null);
     }
     useStickyClass() {
         const rowIndex = this.getRowIndex();
@@ -17228,7 +17232,7 @@ class TableTdFlavour extends TheBaseFlavourElement {
     }
     useStyle() {
         toggleStyle(this.nativeElement, 'backgroundColor', this.element.backgroundColor);
-        toggleStyle(this.nativeElement, 'display', this.element.hidden ? 'none' : '');
+        toggleStyle(this.nativeElement, 'display', this.element.hidden ? 'none' : null);
         toggleStyle(this.nativeElement, 'verticalAlign', this.element.verticalAlign);
     }
     useSpan() {
@@ -18045,15 +18049,15 @@ class TheTodoItem extends TheBaseElement {
         }
         setNode(this.editor, { checked }, this.element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTodoItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TheTodoItem, isStandalone: true, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, viewQueries: [{ propertyName: "childrenOutlet", first: true, predicate: ["childrenOutlet"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTodoItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: TheTodoItem, isStandalone: true, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, viewQueries: [{ propertyName: "childrenOutlet", first: true, predicate: ["childrenOutlet"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
         <span #childrenOutlet></span>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheTodoItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheTodoItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theTodoItem]',
@@ -18409,7 +18413,7 @@ class TheEditorComponent {
         this.virtualScrollConfig = signal({
             enabled: false,
             scrollTop: 0
-        }, ...(ngDevMode ? [{ debugName: "virtualScrollConfig" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "virtualScrollConfig" }] : /* istanbul ignore next */ []));
         this.onChangeCallback = () => { };
         this.onTouchedCallback = () => { };
         this.locale = injectTranslations(inject(TheI18nService));
@@ -18753,14 +18757,14 @@ class TheEditorComponent {
     mousedown(event) {
         this.editor.mousedown(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i2$5.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheEditorComponent, isStandalone: true, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i2$5.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheEditorComponent, isStandalone: true, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
             TheContextService,
             { provide: TheToolbarGroupToken, useValue: TheToolbarGroup },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TheEditorComponent), multi: true }
         ], viewQueries: [{ propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!options?.readonly && !theGlobalToolbar && !isMobileMode) {\n  <the-toolbar\n    [ngClass]=\"{\n      'the-toolbar-disabled': options?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"options?.toolbar?.align\"\n  ></the-toolbar>\n}\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.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    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    [virtualScroll]=\"virtualScrollConfig()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  @if (!isMobileMode) {\n    @if (!options?.readonly && options?.inlineToolbarVisible) {\n      <the-inline-toolbar [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    }\n    @if (!options?.readonly) {\n      <div theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "component", type: i4.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "virtualScroll", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "component", type: TheQuickInsert, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheInlineToolbar, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: ThyImageGroup, selector: "thy-image-group, [thyImageGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', host: { class: 'the-editor', '[class.the-editor-readonly]': 'editor.options?.readonly', '[class.the-mobile-editor]': 'isMobileMode' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, NgClass, FormsModule, SlateModule, TheQuickInsert, TheInlineToolbar, TheToolbarComponent, ThyImageGroup], providers: [
                         TheContextService,
@@ -18799,11 +18803,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             }] } });
 
 class TheEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: TheEditorModule, imports: [TheEditorComponent], exports: [TheEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorModule, providers: [THE_MODE_PROVIDER], imports: [TheEditorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: TheEditorModule, imports: [TheEditorComponent], exports: [TheEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheEditorModule, providers: [THE_MODE_PROVIDER], imports: [TheEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TheEditorComponent],
@@ -18849,10 +18853,10 @@ class TheToolbarService {
             return item;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheToolbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheToolbarService, decorators: [{
             type: Injectable
         }] });
 
@@ -18866,10 +18870,10 @@ class theTethysIconRegistryFaker extends ThyIconRegistry {
     splitIconName(iconName) {
         return ['', ''];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: theTethysIconRegistryFaker, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: theTethysIconRegistryFaker, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: theTethysIconRegistryFaker, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: theTethysIconRegistryFaker, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: theTethysIconRegistryFaker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: theTethysIconRegistryFaker, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -18887,13 +18891,13 @@ class BasicTest {
             }
         ];
         this.plugins = [];
-        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        this.locale = signal(i18n.getLocale()().translations, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     }
     editorCreate(editor) {
         this.editor = editor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BasicTest, deps: [{ token: TheI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: BasicTest, isStandalone: true, selector: "basic-editor-component", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BasicTest, deps: [{ token: TheI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: BasicTest, isStandalone: true, selector: "basic-editor-component", providers: [
             THY_TOOLTIP_DEFAULT_CONFIG_PROVIDER,
             {
                 provide: ThyIconRegistry,
@@ -18901,7 +18905,7 @@ class BasicTest {
             }
         ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: TheEditorComponent, descendants: true, static: true }], ngImport: i0, template: `<the-editor [(ngModel)]="value" [thePlugins]="plugins" (theEditorCreated)="editorCreate($event)"></the-editor>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "ngmodule", type: TheEditorModule }, { kind: "component", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: ["theOptions", "thePlugins", "theGlobalToolbar", "theDecorate", "theOnError"], outputs: ["theOnSave", "theOnDOMEvent", "theEditorCreated", "theUploadingStatus"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BasicTest, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BasicTest, decorators: [{
             type: Component,
             args: [{
                     selector: 'basic-editor-component',
@@ -19064,5 +19068,5 @@ const withTestPlugin = (plugins, initValue) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BLOCK_HIDDEN_CLASS, BasicTest, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_DEFAULT_MAX_HEIGHT, CODEMIRROR_PADDING_TOP, CODE_MODES, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, ColumnResizingStore, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DataTransferFaker, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, EditorPresetConfigFactoryMock, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeaderLevelMap, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LOWEST_TEXT_CONTAINER_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QUICK_INSERT_HOTKEY, QuickInsertEditor, ROOT_ELEMENT_MARGIN_BOTTOM, ResizeRef, SLA_TABLE_CELL_SELECTOR, SLA_TABLE_SELECTOR, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_BG_COLOR, THE_EDITOR_COLOR, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_I18N_DE_DE, THE_I18N_EN_US, THE_I18N_JA_JP, THE_I18N_LOCALE_ID, THE_I18N_RU_RU, THE_I18N_ZH_HANS, THE_I18N_ZH_HANT, THE_IMAGE_SERVICE_TOKEN, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_PRESET_CONFIG_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TablePosition, TheBaseElement, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheCode, TheColumnResizeDirective, TheColumnResizeOverlayHandle, TheContextMenu, TheContextService, TheConversionHint, TheDataMode, TheEditor, TheEditorComponent, TheEditorModule, TheI18nService, TheImage, TheInlineToolbar, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheLocaleType, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheQuickInsert, TheTable, TheTableSelect, TheToolbarComponent, TheToolbarDropdown, TheToolbarGroup, TheToolbarGroupToken, TheToolbarItem, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, bottomLeftPosition, bottomRightPosition, buildPluginMenu, buildPluginMenuItemMap, buildQuickInsertMenus, calcPrintColumnWidth, calcSpanForColumn, calcSpanForRow, calculateHeaderRowHeight, calculateRowControls, coercePixelsFromCssValue, combinePlugins, copyNode, createBreakBarChar, createCell, createEmptyContent, createEmptyParagraph, createMentionPlugin, createPluginFactory, createRow, createTable, createTablePosition, createTest1Plugin, createTestPlugin, createToolbar, createVerticalAlignPlugin, customPluginMock, customPluginMockKey, dataDeserialize, dataSerializing, deDeLocale, deleteElementKey, enUsLocale, errorImageUrlMock, expandPreviousHeadings, extractFragment, extractFragmentByHTML, filterTextFormat, fixBlockWithoutParagraph, fixBlockWithoutText, flattenDeepPlugins, getAllVisibleState, getCellPositionsFromRange, getCollapsedStandardHeadingAbove, getColsTotalWidth, getColumnsWidth, getDirtyElements, getEditorScrollContainer, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getFollowElements, getGridColumns, getMode, getNextCell, getOriginCell, getPlugin, getPluginOptions, getPlugins, getPreviousHeading, getPreviousRelatedHeadingElements, getRowsTotalHeight, getSelectCellNode, getSelectedCellPositions, getStartBlock, getTableByCell, getTableByRow, getTheDefaultPluginMenu, getToolbarClass, hasHeaderRow, hasNumberedColumn, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, injectTranslations, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isColorIndicator, isColorInput, isColorPanel, isDirectionKeydown, isHeadingElement, isInside, isMobileMode, isPrintMode, isPureEmptyParagraph, isPureHeading, isPureParagraph, isRangeInTable, isRectangularInTableCells, isSelectedAllCell, isSelectionInTable, isStandardHeadingElement, isStandardHeadingElementByType, isUrl, isVirtualKey, jaJpLocale, matchOptions, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, normalizeValue, originOptions, plainToTheia, pluginKey, pluginKey1, pluginsByKey, reSelection, recursionNodes, refocus, ruRuLocale, setClipboardDataByDom, setEditorUUID, theTethysIconRegistryFaker, toggleClass, toggleHeadingRelatedElement, toggleProperty, toggleStyle, topLeftPosition, topRightPosition, uniqueCellPosition, updatePopoverPosition, withMention, withTestPlugin, withTheia, zhHansLocale, zhHantLocale };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BLOCK_HIDDEN_CLASS, BasicTest, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_DEFAULT_MAX_HEIGHT, CODEMIRROR_PADDING_TOP, CODE_MODES, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, ColumnResizingStore, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DataTransferFaker, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, EditorPresetConfigFactoryMock, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeaderLevelMap, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LOWEST_TEXT_CONTAINER_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QUICK_INSERT_HOTKEY, QuickInsertEditor, ROOT_ELEMENT_MARGIN_BOTTOM, ResizeRef, SLA_TABLE_CELL_SELECTOR, SLA_TABLE_SELECTOR, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_BG_COLOR, THE_EDITOR_COLOR, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_I18N_DE_DE, THE_I18N_EN_US, THE_I18N_JA_JP, THE_I18N_LOCALE_ID, THE_I18N_RU_RU, THE_I18N_ZH_HANS, THE_I18N_ZH_HANT, THE_IMAGE_SERVICE_TOKEN, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_PRESET_CONFIG_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TablePosition, TheBaseElement, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheCode, TheColumnResizeDirective, TheColumnResizeOverlayHandle, TheContextMenu, TheContextService, TheConversionHint, TheDataMode, TheEditor, TheEditorComponent, TheEditorModule, TheI18nService, TheImage, TheInlineToolbar, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheLocaleType, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheQuickInsert, TheTable, TheTableSelect, TheToolbarComponent, TheToolbarDropdown, TheToolbarGroup, TheToolbarGroupToken, TheToolbarItem, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, bottomLeftPosition, bottomRightPosition, buildPluginMenu, buildPluginMenuItemMap, buildQuickInsertMenus, calcPrintColumnWidth, calcSpanForColumn, calcSpanForRow, calculateHeaderRowHeight, calculateRowControls, coercePixelsFromCssValue, combinePlugins, copyNode, createBreakBarChar, createCell, createEmptyContent, createEmptyParagraph, createMentionPlugin, createPluginFactory, createRow, createTable, createTablePosition, createTest1Plugin, createTestPlugin, createToolbar, createVerticalAlignPlugin, customPluginMock, customPluginMockKey, dataDeserialize, dataSerializing, deDe as deDeLocale, deleteElementKey, enUs as enUsLocale, errorImageUrlMock, expandPreviousHeadings, extractFragment, extractFragmentByHTML, filterTextFormat, fixBlockWithoutParagraph, fixBlockWithoutText, flattenDeepPlugins, getAllVisibleState, getCellPositionsFromRange, getCollapsedStandardHeadingAbove, getColsTotalWidth, getColumnsWidth, getDirtyElements, getEditorScrollContainer, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getFollowElements, getGridColumns, getMode, getNextCell, getOriginCell, getPlugin, getPluginOptions, getPlugins, getPreviousHeading, getPreviousRelatedHeadingElements, getRowsTotalHeight, getSelectCellNode, getSelectedCellPositions, getStartBlock, getTableByCell, getTableByRow, getTheDefaultPluginMenu, getToolbarClass, hasHeaderRow, hasNumberedColumn, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, injectTranslations, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isColorIndicator, isColorInput, isColorPanel, isDirectionKeydown, isHeadingElement, isInside, isMobileMode, isPrintMode, isPureEmptyParagraph, isPureHeading, isPureParagraph, isRangeInTable, isRectangularInTableCells, isSelectedAllCell, isSelectionInTable, isStandardHeadingElement, isStandardHeadingElementByType, isUrl, isVirtualKey, jaJp as jaJpLocale, matchOptions, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, normalizeValue, originOptions, plainToTheia, pluginKey, pluginKey1, pluginsByKey, reSelection, recursionNodes, refocus, ruRu as ruRuLocale, setClipboardDataByDom, setEditorUUID, theTethysIconRegistryFaker, toggleClass, toggleHeadingRelatedElement, toggleProperty, toggleStyle, topLeftPosition, topRightPosition, uniqueCellPosition, updatePopoverPosition, withMention, withTestPlugin, withTheia, zhHans as zhHansLocale, zhHant as zhHantLocale };
 //# sourceMappingURL=worktile-theia.mjs.map