@worktile/theia 19.3.4 → 19.4.0

package/fesm2022/worktile-theia.mjs

@@ -10,7 +10,7 @@ import { cloneDeep, map, assign, defaults, groupBy, uniq, isEqual } from 'lodash
 export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
 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, isClipboardWriteSupported, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, BaseTextComponent, SlateModule, hasBlockCard, isCardLeft, SlateChildrenOutlet, defaultScrollSelectionIntoView, getDataTransferClipboard, withAngular } 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, BaseTextComponent, SlateModule, hasBlockCard, isCardLeft, SlateChildrenOutlet, defaultScrollSelectionIntoView, getDataTransferClipboard, withAngular } from 'slate-angular';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { NODE_TO_PARENT, NODE_TO_INDEX, NODE_TO_ELEMENT, EDITOR_TO_ELEMENT } from 'slate-dom';
 import { TheiaConverter } from '@atinc/selene';
@@ -219,6 +219,18 @@ const DEFAULT_LANGUAGE = {
     value: 'javascript'
 };
 const CODE_MODES = [
+    {
+        showName: 'APL',
+        value: 'apl'
+    },
+    {
+        showName: 'ASN.1',
+        value: 'asn.1'
+    },
+    {
+        showName: 'Brainfuck',
+        value: 'brainfuck'
+    },
     {
         showName: 'C',
         value: 'c'
@@ -235,66 +247,510 @@ const CODE_MODES = [
         showName: 'C-like',
         value: 'clike'
     },
+    {
+        showName: 'Ceylon',
+        value: 'ceylon'
+    },
+    {
+        showName: 'Clojure',
+        value: 'clojure'
+    },
+    {
+        showName: 'Closure Stylesheets (GSS)',
+        value: 'gss'
+    },
+    {
+        showName: 'CMake',
+        value: 'cmake'
+    },
+    {
+        showName: 'COBOL',
+        value: 'cobol'
+    },
+    {
+        showName: 'CoffeeScript',
+        value: 'coffeescript'
+    },
+    {
+        showName: 'Common Lisp',
+        value: 'commonlisp'
+    },
+    {
+        showName: 'Crystal',
+        value: 'crystal'
+    },
     {
         showName: 'CSS',
         value: 'css'
     },
+    {
+        showName: 'Cypher',
+        value: 'cypher'
+    },
+    {
+        showName: 'Cython',
+        value: 'cython'
+    },
+    {
+        showName: 'D',
+        value: 'd'
+    },
     {
         showName: 'Dart',
         value: 'dart'
     },
     {
-        showName: 'Django',
+        showName: 'Django (templating language)',
         value: 'django'
     },
     {
         showName: 'Dockerfile',
         value: 'dockerfile'
     },
+    {
+        showName: 'diff',
+        value: 'diff'
+    },
+    {
+        showName: 'DTD',
+        value: 'dtd'
+    },
+    {
+        showName: 'Dylan',
+        value: 'dylan'
+    },
+    {
+        showName: 'EBNF',
+        value: 'ebnf'
+    },
+    {
+        showName: 'ECL',
+        value: 'ecl'
+    },
+    {
+        showName: 'Eiffel',
+        value: 'eiffel'
+    },
+    {
+        showName: 'Elixir',
+        value: 'elixir'
+    },
+    {
+        showName: 'Elm',
+        value: 'elm'
+    },
+    {
+        showName: 'Erlang',
+        value: 'erlang'
+    },
+    {
+        showName: 'Factor',
+        value: 'factor'
+    },
+    {
+        showName: 'FCL',
+        value: 'fcl'
+    },
+    {
+        showName: 'Forth',
+        value: 'forth'
+    },
+    {
+        showName: 'Fortran',
+        value: 'fortran'
+    },
+    {
+        showName: 'F#',
+        value: 'fsharp'
+    },
+    {
+        showName: 'Gas (AT&T-style assembly)',
+        value: 'gas'
+    },
+    {
+        showName: 'Gherkin',
+        value: 'gherkin'
+    },
     {
         showName: 'Go',
         value: 'go'
     },
     {
-        showName: 'HTML',
-        value: 'html'
+        showName: 'Groovy',
+        value: 'groovy'
+    },
+    {
+        showName: 'HAML',
+        value: 'haml'
+    },
+    {
+        showName: 'Handlebars',
+        value: 'handlebars'
+    },
+    {
+        showName: 'Haskell (Literate)',
+        value: 'haskell-literate'
+    },
+    {
+        showName: 'Haxe',
+        value: 'haxe'
+    },
+    {
+        showName: 'HTML embedded (JSP, ASP.NET)',
+        value: 'htmlembedded'
+    },
+    {
+        showName: 'HTML mixed-mode',
+        value: 'htmlmixed'
+    },
+    {
+        showName: 'HTTP',
+        value: 'http'
+    },
+    {
+        showName: 'IDL',
+        value: 'idl'
     },
     {
         showName: 'Java',
         value: 'java'
     },
     DEFAULT_LANGUAGE,
+    {
+        showName: 'JavaScript (JSX)',
+        value: 'jsx'
+    },
+    {
+        showName: 'Jinja2',
+        value: 'jinja2'
+    },
+    {
+        showName: 'Julia',
+        value: 'julia'
+    },
+    {
+        showName: 'Kotlin',
+        value: 'kotlin'
+    },
+    {
+        showName: 'LESS',
+        value: 'less'
+    },
+    {
+        showName: 'LiveScript',
+        value: 'livescript'
+    },
+    {
+        showName: 'Lua',
+        value: 'lua'
+    },
     {
         showName: 'Markdown',
         value: 'markdown'
     },
+    {
+        showName: 'Mathematica',
+        value: 'mathematica'
+    },
+    {
+        showName: 'mbox',
+        value: 'mbox'
+    },
+    {
+        showName: 'mIRC',
+        value: 'mirc'
+    },
+    {
+        showName: 'Modelica',
+        value: 'modelica'
+    },
+    {
+        showName: 'MscGen',
+        value: 'mscgen'
+    },
+    {
+        showName: 'MUMPS',
+        value: 'mumps'
+    },
     {
         showName: 'Nginx',
         value: 'nginx'
     },
     {
-        showName: 'Python',
-        value: 'python'
+        showName: 'NSIS',
+        value: 'nsis'
+    },
+    {
+        showName: 'N-Triples/N-Quads',
+        value: 'ntriples'
+    },
+    {
+        showName: 'Objective C',
+        value: 'objective-c'
+    },
+    {
+        showName: 'OCaml',
+        value: 'ocaml'
+    },
+    {
+        showName: 'Octave (MATLAB)',
+        value: 'octave'
+    },
+    {
+        showName: 'Oz',
+        value: 'oz'
+    },
+    {
+        showName: 'Pascal',
+        value: 'pascal'
+    },
+    {
+        showName: 'PEG.js',
+        value: 'pegjs'
+    },
+    {
+        showName: 'Perl',
+        value: 'perl'
+    },
+    {
+        showName: 'PGP (ASCII armor)',
+        value: 'asciiarmor'
     },
     {
         showName: 'PHP',
         value: 'php'
     },
+    {
+        showName: 'Pig Latin',
+        value: 'pig'
+    },
+    {
+        showName: 'PowerShell',
+        value: 'powershell'
+    },
+    {
+        showName: 'Properties files',
+        value: 'properties'
+    },
+    {
+        showName: 'ProtoBuf',
+        value: 'protobuf'
+    },
+    {
+        showName: 'Pug',
+        value: 'pug'
+    },
+    {
+        showName: 'Puppet',
+        value: 'puppet'
+    },
+    {
+        showName: 'Python',
+        value: 'python'
+    },
+    {
+        showName: 'Q',
+        value: 'q'
+    },
+    {
+        showName: 'R',
+        value: 'r'
+    },
+    {
+        showName: 'RPM',
+        value: 'rpm'
+    },
+    {
+        showName: 'reStructuredText',
+        value: 'rst'
+    },
+    {
+        showName: 'Ruby',
+        value: 'ruby'
+    },
+    {
+        showName: 'Rust',
+        value: 'rust'
+    },
+    {
+        showName: 'SAS',
+        value: 'sas'
+    },
+    {
+        showName: 'Sass',
+        value: 'sass'
+    },
+    {
+        showName: 'Spreadsheet',
+        value: 'spreadsheet'
+    },
+    {
+        showName: 'Scala',
+        value: 'scala'
+    },
+    {
+        showName: 'Scheme',
+        value: 'scheme'
+    },
+    {
+        showName: 'SCSS',
+        value: 'scss'
+    },
     {
         showName: 'Shell',
         value: 'shell'
     },
     {
-        showName: 'SQL',
+        showName: 'Sieve',
+        value: 'sieve'
+    },
+    {
+        showName: 'Slim',
+        value: 'slim'
+    },
+    {
+        showName: 'Smalltalk',
+        value: 'smalltalk'
+    },
+    {
+        showName: 'Smarty',
+        value: 'smarty'
+    },
+    {
+        showName: 'Solr',
+        value: 'solr'
+    },
+    {
+        showName: 'Soy',
+        value: 'soy'
+    },
+    {
+        showName: 'Stylus',
+        value: 'stylus'
+    },
+    {
+        showName: 'SQL (several dialects)',
         value: 'sql'
     },
+    {
+        showName: 'SPARQL',
+        value: 'sparql'
+    },
+    {
+        showName: 'Squirrel',
+        value: 'squirrel'
+    },
     {
         showName: 'Swift',
         value: 'swift'
     },
+    {
+        showName: 'sTeX, LaTeX',
+        value: 'stex'
+    },
+    {
+        showName: 'Tcl',
+        value: 'tcl'
+    },
+    {
+        showName: 'Textile',
+        value: 'textile'
+    },
+    {
+        showName: 'Tiddlywiki',
+        value: 'tiddlywiki'
+    },
+    {
+        showName: 'Tiki wiki',
+        value: 'tiki'
+    },
+    {
+        showName: 'TOML',
+        value: 'toml'
+    },
+    {
+        showName: 'Tornado (templating language)',
+        value: 'tornado'
+    },
+    {
+        showName: 'troff (for manpages)',
+        value: 'troff'
+    },
+    {
+        showName: 'TTCN',
+        value: 'ttcn'
+    },
+    {
+        showName: 'TTCN Configuration',
+        value: 'ttcn-cfg'
+    },
+    {
+        showName: 'Turtle',
+        value: 'turtle'
+    },
+    {
+        showName: 'Twig',
+        value: 'twig'
+    },
     {
         showName: 'TypeScript',
         value: 'typescript'
+    },
+    {
+        showName: 'VB.NET',
+        value: 'vb'
+    },
+    {
+        showName: 'VBScript',
+        value: 'vbscript'
+    },
+    {
+        showName: 'Velocity',
+        value: 'velocity'
+    },
+    {
+        showName: 'Verilog/SystemVerilog',
+        value: 'verilog'
+    },
+    {
+        showName: 'VHDL',
+        value: 'vhdl'
+    },
+    {
+        showName: 'Vue.js app',
+        value: 'vue'
+    },
+    {
+        showName: 'Web IDL',
+        value: 'webidl'
+    },
+    {
+        showName: 'WebAssembly Text Format',
+        value: 'wast'
+    },
+    {
+        showName: 'XML/HTML',
+        value: 'xml'
+    },
+    {
+        showName: 'XQuery',
+        value: 'xquery'
+    },
+    {
+        showName: 'Yacas',
+        value: 'yacas'
+    },
+    {
+        showName: 'YAML',
+        value: 'yaml'
+    },
+    {
+        showName: 'YAML frontmatter',
+        value: 'yaml-frontmatter'
+    },
+    {
+        showName: 'Z80',
+        value: 'z80'
     }
 ];
 const CODEMIRROR_PADDING_TOP = 10;
@@ -1750,10 +2206,6 @@ const setClipboardDataByDom = async (e, fragment, data) => {
 function copyNode(e, element, thyNotifyService, locale) {
     const copyFailTips = (locale && locale() && locale().copyFailed) ?? '复制失败';
     const copySuccessTips = (locale && locale() && locale().copySuccess) ?? '复制成功';
-    if (!isClipboardWriteSupported()) {
-        thyNotifyService?.error(copyFailTips);
-        return;
-    }
     const fragment = cloneDeep(element);
     return setClipboardDataByDom(e, fragment)
         .then(() => {
@@ -4744,6 +5196,7 @@ const TABLE_BORDER$1 = 1;
 const TABLE_PADDING$1 = 8;
 const TABLE_CONTROL = 11;
 const TABLE_NUMBER_COLUMN = 45;
+const TABLE_HORIZONTAL_SCROLL_HEIGHT = 16; // table component horizontal scrollbar height
 const TableWithStickyRowClass = 'the-table-with-sticky-row';
 var FullscreenState;
 (function (FullscreenState) {
@@ -11655,7 +12108,7 @@ const createImagePlugin = (locale) => createPluginFactory({
     menuItems: [
         {
             key: ElementKinds.image,
-            keywords: `tp,tupian,image,photo,picture,${locale().image}`,
+            keywords: `tp,tupian,image,picture,${locale().image}`,
             execute: editor => ImageEditor.openUpload(editor),
             active: editor => ImageEditor.isActive(editor),
             name: locale().image,
@@ -15311,6 +15764,8 @@ class TheTable extends TheBaseElement {
                 this.theTableContextMenuService.closeContextMenu();
                 this.tableStore.isExistSelectedCell && this.tableStore.clearSelectedCells();
             }
+            // 表格数据变化，更新横向滚动条
+            this.updateHorizontalScrollbar();
         }
     }
     // 需要等待内容更新后，才可以执行 useRowControls，否则获取的高度可能不正确
@@ -15343,6 +15798,7 @@ class TheTable extends TheBaseElement {
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
+        this.isMouseOverTable = false;
         this.getOutletParent = () => {
             return this.tbodyElement.nativeElement;
         };
@@ -15454,6 +15910,7 @@ class TheTable extends TheBaseElement {
             this.listenTableContextMenuEvent();
             this.listenTableWrapperScroll();
             this.subscribeScrollContainerScroll(this.tableWrapperLeft);
+            this.initHorizontalScrollbar();
             if (isPrintMode) {
                 this.cdr.markForCheck();
             }
@@ -15464,6 +15921,7 @@ class TheTable extends TheBaseElement {
                     this.getWrapperWidthAndLeft();
                     this.setHeaderRowShadow();
                     this.setStickyElementLeftStyle();
+                    this.updateHorizontalScrollbar();
                 });
                 this.contextService.theEditorResized$.pipe(takeUntil(this.destroy$)).subscribe(result => {
                     if (result.widthChanged) {
@@ -15471,6 +15929,7 @@ class TheTable extends TheBaseElement {
                         this.setTableScrollingShadow();
                         this.setGridColumnsStyle();
                         this.setHeaderRowShadow();
+                        this.updateHorizontalScrollbar();
                     }
                 });
             });
@@ -15536,6 +15995,8 @@ class TheTable extends TheBaseElement {
                         const maxHeaderRowHeight = (24 + 8) * 11; // 超出 11 行，取消冻结
                         this.isStickyTop = headerRowHeight <= maxHeaderRowHeight;
                     }
+                    // 更新漂浮滚动条
+                    this.updateHorizontalScrollbar();
                 }
                 return this.isStickyTop;
             }), distinctUntilChanged())
@@ -16064,6 +16525,161 @@ class TheTable extends TheBaseElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    initHorizontalScrollbar() {
+        if (!this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
+            return;
+        }
+        this.bindTableMouseEvents();
+        this.bindScrollbarEvents();
+        this.updateHorizontalScrollbar();
+    }
+    // 绑定鼠标和滚轮事件，用于处理表格横向滚动条显隐
+    bindTableMouseEvents() {
+        if (!this.nativeElement) {
+            return;
+        }
+        // 鼠标移入表格时，更新滚动条是否显示固定
+        fromEvent(this.nativeElement, 'mouseenter')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isMouseOverTable = true;
+            this.updateHorizontalScrollbar();
+        });
+        fromEvent(this.nativeElement, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isMouseOverTable = false;
+            this.updateHorizontalScrollbar();
+        });
+        // 在表格上的滚轮滚动监听，处理滚动过程中超过可视范围滚动条的显隐
+        // 页面的垂直滚动由使用方的页面决定，表格组件无法准确获取，这里通过监听滚轮实现
+        fromEvent(this.nativeElement, 'wheel', { passive: false })
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            // 只有在鼠标在表格上时才处理
+            if (!this.isMouseOverTable) {
+                return;
+            }
+            const isHorizontalScroll = Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey;
+            if (isHorizontalScroll && this.horizontalScrollbarContainer) {
+                event.preventDefault();
+                let deltaX = event.deltaX;
+                // 如果是 Shift + 滚轮，将垂直滚动转换为横向滚动
+                if (event.shiftKey && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                    deltaX = event.deltaY;
+                }
+                const scrollbarContainer = this.horizontalScrollbarContainer.nativeElement;
+                const newScrollLeft = Math.max(0, Math.min(scrollbarContainer.scrollLeft + deltaX, scrollbarContainer.scrollWidth - scrollbarContainer.clientWidth));
+                // 同步滚动到滚动条
+                scrollbarContainer.scrollLeft = newScrollLeft;
+            }
+            else {
+                // 纵向滚动，需要延迟执行是否需要固定滚动条
+                setTimeout(() => {
+                    this.updateScrollbarFixedState();
+                }, 100);
+            }
+        });
+    }
+    // 监听横向滚动条滚动事件
+    bindScrollbarEvents() {
+        if (!this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
+            return;
+        }
+        // 滚动条滚动事件同步到表格
+        fromEvent(this.horizontalScrollbarContainer.nativeElement, 'scroll')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            const scrollLeft = this.horizontalScrollbarContainer.nativeElement.scrollLeft;
+            if (this.tableWrapper.nativeElement.scrollLeft !== scrollLeft) {
+                this.tableWrapper.nativeElement.scrollLeft = scrollLeft;
+            }
+        });
+    }
+    updateHorizontalScrollbar() {
+        this.updateScrollbarVisibility();
+        this.updateScrollbarFixedState();
+    }
+    // 更新横向滚动条可见性
+    updateScrollbarVisibility() {
+        if (!this.tableWrapper || !this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
+            return;
+        }
+        const tableWrapper = this.tableWrapper.nativeElement;
+        const scrollbarContainer = this.horizontalScrollbarContainer.nativeElement;
+        const scrollbarContent = this.horizontalScrollbarContent.nativeElement;
+        const hasHorizontalScroll = tableWrapper.scrollWidth > tableWrapper.clientWidth;
+        if (!hasHorizontalScroll) {
+            this.renderer.removeClass(scrollbarContainer, 'visible');
+            return;
+        }
+        this.renderer.setStyle(scrollbarContent, 'width', `${tableWrapper.scrollWidth}px`);
+        this.renderer.addClass(scrollbarContainer, 'visible');
+    }
+    // 更新横向滚动条固定状态
+    updateScrollbarFixedState() {
+        if (this.editor.options.disabledTableStickyScrollbar || !this.horizontalScrollbarContainer) {
+            return;
+        }
+        if (!this.isMouseOverTable) {
+            this.setScrollbarFixed(false, 0);
+            return;
+        }
+        const tableRect = this.nativeElement.getBoundingClientRect();
+        const viewportHeight = this.getViewportHeight();
+        const scrollbarBottomPosition = tableRect.bottom;
+        // 是否在可视范围内
+        const isScrollbarOutOfView = scrollbarBottomPosition > viewportHeight && tableRect.top < viewportHeight;
+        this.setScrollbarFixed(isScrollbarOutOfView, viewportHeight);
+    }
+    getViewportHeight() {
+        try {
+            const scrollContainer = this.contextService.getScrollContainer();
+            if (scrollContainer && scrollContainer !== document.documentElement && scrollContainer !== document.body) {
+                // 如果有自定义滚动容器且不是 html/body 元素，使用容器的可视高度
+                const containerRect = scrollContainer.getBoundingClientRect();
+                return containerRect.height > window.innerHeight ? window.innerHeight : containerRect.bottom;
+            }
+            else if (scrollContainer === null) {
+                // 没有自定义滚动容器，使用 theEditor 的滚动容器
+                const theRect = this.contextService.getOptions().nativeElement.getBoundingClientRect();
+                // 判断大于视窗高度为了兼容 theEditor 不是滚动容器，且高度已经超过视窗高度，导致滚动条位置计算错误
+                return theRect.height > window.innerHeight ? window.innerHeight : theRect.bottom;
+            }
+            return window.innerHeight;
+        }
+        catch (error) {
+            // 获取失败使用视窗高度
+            return window.innerHeight;
+        }
+    }
+    setScrollbarFixed(fixed, viewportHeight) {
+        if (!this.horizontalScrollbarContainer) {
+            return;
+        }
+        const scrollbar = this.horizontalScrollbarContainer.nativeElement;
+        const currentScrollLeft = scrollbar.scrollLeft;
+        if (fixed) {
+            const tableRect = this.nativeElement.getBoundingClientRect();
+            this.renderer.addClass(scrollbar, 'fixed');
+            this.renderer.setStyle(scrollbar, 'left', `${Math.max(0, tableRect.left)}px`);
+            this.renderer.setStyle(scrollbar, 'width', `${tableRect.width}px`);
+            this.renderer.setStyle(scrollbar, 'top', `${viewportHeight - TABLE_HORIZONTAL_SCROLL_HEIGHT}px`);
+            this.renderer.removeStyle(scrollbar, 'bottom');
+        }
+        else {
+            this.renderer.removeClass(scrollbar, 'fixed');
+            this.renderer.removeStyle(scrollbar, 'left');
+            this.renderer.removeStyle(scrollbar, 'width');
+            this.renderer.removeStyle(scrollbar, 'top');
+            this.renderer.setStyle(scrollbar, 'bottom', `-${TABLE_HORIZONTAL_SCROLL_HEIGHT}px`);
+        }
+        requestAnimationFrame(() => {
+            if (scrollbar.scrollLeft !== currentScrollLeft) {
+                scrollbar.scrollLeft = currentScrollLeft;
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TheTable, deps: [{ token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TheTable, isStandalone: true, selector: "ng-component", 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" } }, providers: [
             TableStore,
@@ -16077,7 +16693,7 @@ 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: "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>\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 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: "19.2.14", ngImport: i0, type: TheTable, decorators: [{
             type: Component,
@@ -16098,7 +16714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[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'
-                    }, 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>\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 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: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }, { type: TheModeConfig, decorators: [{
                     type: Inject,
                     args: [THE_MODE_TOKEN]
@@ -16135,6 +16751,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], rowControlsButtonWrapper: [{
                 type: ViewChildren,
                 args: ['rowControlsButtonWrapper', { read: ElementRef }]
+            }], horizontalScrollbarContainer: [{
+                type: ViewChild,
+                args: ['horizontalScrollbarContainer', { read: ElementRef, static: true }]
+            }], horizontalScrollbarContent: [{
+                type: ViewChild,
+                args: ['horizontalScrollbarContent', { read: ElementRef, static: true }]
             }] } });
 
 const OVERLAY_ACTIVE_CLASS = 'the-resizable-overlay-thumb-active';