@worktile/theia 15.1.5 → 15.1.6-bugfix

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,22 +1,22 @@
1
- import { reSelection } from '../../../utils/refocus';
2
1
  import { TableEditor } from '../table.editor';
3
2
  import { TableHeaderBackgroundColor, SpecialBackgroundColor } from '../../../constants';
3
+ import { THE_EDITOR_PREVIOUS_SELECTION } from '../../../utils';
4
4
  export const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
5
5
  // 点击自定义颜色面板输入框设置颜色值时,会丢失焦点和选区(目前无法做到焦点同时存在于编辑器和输入框)
6
+ let location;
6
7
  if (!editor.selection) {
7
- reSelection(editor);
8
+ const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
9
+ location = rangeRef.current.anchor;
8
10
  }
9
- if (editor.selection) {
10
- const isHeader = TableEditor.isActiveHeader(editor);
11
- if (color === 'transparent') {
12
- color = null;
13
- }
14
- if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
15
- tableStore.setSelectedCellsBackgroundColor(null);
16
- }
17
- else {
18
- tableStore.setSelectedCellsBackgroundColor(color);
19
- }
11
+ const isHeader = TableEditor.isActiveHeader(editor, location);
12
+ if (color === 'transparent') {
13
+ color = null;
14
+ }
15
+ if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
16
+ tableStore.setSelectedCellsBackgroundColor(null);
17
+ }
18
+ else {
19
+ tableStore.setSelectedCellsBackgroundColor(color);
20
20
  }
21
21
  };
22
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0LWNlbGxzLWJhY2tncm91bmQtY29sb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zcmMvcGx1Z2lucy90YWJsZS91dGlscy9zZXQtY2VsbHMtYmFja2dyb3VuZC1jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFckQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTlDLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXhGLE1BQU0sQ0FBQyxNQUFNLCtCQUErQixHQUFHLENBQUMsTUFBaUIsRUFBRSxLQUFhLEVBQUUsVUFBc0IsRUFBRSxFQUFFO0lBQ3hHLG9EQUFvRDtJQUNwRCxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsRUFBRTtRQUNuQixXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7S0FDdkI7SUFDRCxJQUFJLE1BQU0sQ0FBQyxTQUFTLEVBQUU7UUFDbEIsTUFBTSxRQUFRLEdBQUcsV0FBVyxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwRCxJQUFJLEtBQUssS0FBSyxhQUFhLEVBQUU7WUFDekIsS0FBSyxHQUFHLElBQUksQ0FBQztTQUNoQjtRQUNELElBQUksQ0FBQyxLQUFLLEtBQUssMEJBQTBCLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssc0JBQXNCLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUN2RyxVQUFVLENBQUMsK0JBQStCLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDcEQ7YUFBTTtZQUNILFVBQVUsQ0FBQywrQkFBK0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNyRDtLQUNKO0FBQ0wsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgcmVTZWxlY3Rpb24gfSBmcm9tICcuLi8uLi8uLi91dGlscy9yZWZvY3VzJztcbmltcG9ydCB7IFRhYmxlU3RvcmUgfSBmcm9tICcuLi90YWJsZS5zdG9yZSc7XG5pbXBvcnQgeyBUYWJsZUVkaXRvciB9IGZyb20gJy4uL3RhYmxlLmVkaXRvcic7XG5pbXBvcnQgeyBUaGVFZGl0b3IgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzJztcbmltcG9ydCB7IFRhYmxlSGVhZGVyQmFja2dyb3VuZENvbG9yLCBTcGVjaWFsQmFja2dyb3VuZENvbG9yIH0gZnJvbSAnLi4vLi4vLi4vY29uc3RhbnRzJztcblxuZXhwb3J0IGNvbnN0IHNldFNlbGVjdGVkQ2VsbHNCYWNrZ3JvdW5kQ29sb3IgPSAoZWRpdG9yOiBUaGVFZGl0b3IsIGNvbG9yOiBzdHJpbmcsIHRhYmxlU3RvcmU6IFRhYmxlU3RvcmUpID0+IHtcbiAgICAvLyDngrnlh7voh6rlrprkuYnpopzoibLpnaLmnb/ovpPlhaXmoYborr7nva7popzoibLlgLzml7bvvIzkvJrkuKLlpLHnhKbngrnlkozpgInljLrvvIjnm67liY3ml6Dms5XlgZrliLDnhKbngrnlkIzml7blrZjlnKjkuo7nvJbovpHlmajlkozovpPlhaXmoYbvvIlcbiAgICBpZiAoIWVkaXRvci5zZWxlY3Rpb24pIHtcbiAgICAgICAgcmVTZWxlY3Rpb24oZWRpdG9yKTtcbiAgICB9XG4gICAgaWYgKGVkaXRvci5zZWxlY3Rpb24pIHtcbiAgICAgICAgY29uc3QgaXNIZWFkZXIgPSBUYWJsZUVkaXRvci5pc0FjdGl2ZUhlYWRlcihlZGl0b3IpO1xuICAgICAgICBpZiAoY29sb3IgPT09ICd0cmFuc3BhcmVudCcpIHtcbiAgICAgICAgICAgIGNvbG9yID0gbnVsbDtcbiAgICAgICAgfVxuICAgICAgICBpZiAoKGNvbG9yID09PSBUYWJsZUhlYWRlckJhY2tncm91bmRDb2xvciAmJiBpc0hlYWRlcikgfHwgKGNvbG9yID09PSBTcGVjaWFsQmFja2dyb3VuZENvbG9yICYmICFpc0hlYWRlcikpIHtcbiAgICAgICAgICAgIHRhYmxlU3RvcmUuc2V0U2VsZWN0ZWRDZWxsc0JhY2tncm91bmRDb2xvcihudWxsKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRhYmxlU3RvcmUuc2V0U2VsZWN0ZWRDZWxsc0JhY2tncm91bmRDb2xvcihjb2xvcik7XG4gICAgICAgIH1cbiAgICB9XG59O1xuIl19
22
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0LWNlbGxzLWJhY2tncm91bmQtY29sb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zcmMvcGx1Z2lucy90YWJsZS91dGlscy9zZXQtY2VsbHMtYmFja2dyb3VuZC1jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFOUMsT0FBTyxFQUFFLDBCQUEwQixFQUFFLHNCQUFzQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFeEYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFL0QsTUFBTSxDQUFDLE1BQU0sK0JBQStCLEdBQUcsQ0FBQyxNQUFpQixFQUFFLEtBQWEsRUFBRSxVQUFzQixFQUFFLEVBQUU7SUFDeEcsb0RBQW9EO0lBQ3BELElBQUksUUFBZSxDQUFDO0lBQ3BCLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxFQUFFO1FBQ25CLE1BQU0sRUFBRSxRQUFRLEVBQUUsR0FBRyw2QkFBNkIsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDL0QsUUFBUSxHQUFHLFFBQVEsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDO0tBQ3RDO0lBRUQsTUFBTSxRQUFRLEdBQUcsV0FBVyxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDOUQsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1FBQ3pCLEtBQUssR0FBRyxJQUFJLENBQUM7S0FDaEI7SUFDRCxJQUFJLENBQUMsS0FBSyxLQUFLLDBCQUEwQixJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLHNCQUFzQixJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUU7UUFDdkcsVUFBVSxDQUFDLCtCQUErQixDQUFDLElBQUksQ0FBQyxDQUFDO0tBQ3BEO1NBQU07UUFDSCxVQUFVLENBQUMsK0JBQStCLENBQUMsS0FBSyxDQUFDLENBQUM7S0FDckQ7QUFDTCxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUYWJsZVN0b3JlIH0gZnJvbSAnLi4vdGFibGUuc3RvcmUnO1xuaW1wb3J0IHsgVGFibGVFZGl0b3IgfSBmcm9tICcuLi90YWJsZS5lZGl0b3InO1xuaW1wb3J0IHsgVGhlRWRpdG9yIH0gZnJvbSAnLi4vLi4vLi4vaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBUYWJsZUhlYWRlckJhY2tncm91bmRDb2xvciwgU3BlY2lhbEJhY2tncm91bmRDb2xvciB9IGZyb20gJy4uLy4uLy4uL2NvbnN0YW50cyc7XG5pbXBvcnQgeyBFZGl0b3IsIFBvaW50IH0gZnJvbSAnc2xhdGUnO1xuaW1wb3J0IHsgVEhFX0VESVRPUl9QUkVWSU9VU19TRUxFQ1RJT04gfSBmcm9tICcuLi8uLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzZXRTZWxlY3RlZENlbGxzQmFja2dyb3VuZENvbG9yID0gKGVkaXRvcjogVGhlRWRpdG9yLCBjb2xvcjogc3RyaW5nLCB0YWJsZVN0b3JlOiBUYWJsZVN0b3JlKSA9PiB7XG4gICAgLy8g54K55Ye76Ieq5a6a5LmJ6aKc6Imy6Z2i5p2/6L6T5YWl5qGG6K6+572u6aKc6Imy5YC85pe277yM5Lya5Lii5aSx54Sm54K55ZKM6YCJ5Yy677yI55uu5YmN5peg5rOV5YGa5Yiw54Sm54K55ZCM5pe25a2Y5Zyo5LqO57yW6L6R5Zmo5ZKM6L6T5YWl5qGG77yJXG4gICAgbGV0IGxvY2F0aW9uOiBQb2ludDtcbiAgICBpZiAoIWVkaXRvci5zZWxlY3Rpb24pIHtcbiAgICAgICAgY29uc3QgeyByYW5nZVJlZiB9ID0gVEhFX0VESVRPUl9QUkVWSU9VU19TRUxFQ1RJT04uZ2V0KGVkaXRvcik7XG4gICAgICAgIGxvY2F0aW9uID0gcmFuZ2VSZWYuY3VycmVudC5hbmNob3I7XG4gICAgfVxuXG4gICAgY29uc3QgaXNIZWFkZXIgPSBUYWJsZUVkaXRvci5pc0FjdGl2ZUhlYWRlcihlZGl0b3IsIGxvY2F0aW9uKTtcbiAgICBpZiAoY29sb3IgPT09ICd0cmFuc3BhcmVudCcpIHtcbiAgICAgICAgY29sb3IgPSBudWxsO1xuICAgIH1cbiAgICBpZiAoKGNvbG9yID09PSBUYWJsZUhlYWRlckJhY2tncm91bmRDb2xvciAmJiBpc0hlYWRlcikgfHwgKGNvbG9yID09PSBTcGVjaWFsQmFja2dyb3VuZENvbG9yICYmICFpc0hlYWRlcikpIHtcbiAgICAgICAgdGFibGVTdG9yZS5zZXRTZWxlY3RlZENlbGxzQmFja2dyb3VuZENvbG9yKG51bGwpO1xuICAgIH0gZWxzZSB7XG4gICAgICAgIHRhYmxlU3RvcmUuc2V0U2VsZWN0ZWRDZWxsc0JhY2tncm91bmRDb2xvcihjb2xvcik7XG4gICAgfVxufTtcbiJdfQ==
@@ -6149,25 +6149,26 @@ const TableEditor = {
6149
6149
  }
6150
6150
  return false;
6151
6151
  },
6152
- hasHeaderRow(editor) {
6153
- const [tableEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.table });
6152
+ hasHeaderRow(editor, location) {
6153
+ const [tableEntry] = Editor.nodes(editor, { at: location, match: (n) => n.type === ElementKinds.table });
6154
6154
  const tableComponent = ELEMENT_TO_COMPONENT.get(tableEntry[0]);
6155
6155
  return tableComponent.headerRow;
6156
6156
  },
6157
- hasHeaderColumn(editor) {
6157
+ hasHeaderColumn(editor, location) {
6158
6158
  var _a, _b;
6159
- const [tableEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.table });
6159
+ const [tableEntry] = Editor.nodes(editor, { at: location, match: (n) => n.type === ElementKinds.table });
6160
6160
  return tableEntry && ((_b = (_a = tableEntry[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.headerColumn);
6161
6161
  },
6162
- isActiveHeader(editor) {
6163
- if (!TableEditor.hasHeaderRow(editor) && !TableEditor.hasHeaderColumn(editor)) {
6162
+ isActiveHeader(editor, location) {
6163
+ location = location || editor.selection;
6164
+ if (!TableEditor.hasHeaderRow(editor, location) && !TableEditor.hasHeaderColumn(editor, location)) {
6164
6165
  return false;
6165
6166
  }
6166
- const position = createTablePosition(editor, editor.selection.focus.path);
6167
- if (TableEditor.hasHeaderRow(editor) && position.getRowIndex() === 0) {
6167
+ const position = createTablePosition(editor, location.path);
6168
+ if (TableEditor.hasHeaderRow(editor, location) && position.getRowIndex() === 0) {
6168
6169
  return true;
6169
6170
  }
6170
- if (TableEditor.hasHeaderColumn(editor) && position.getColumnIndex() === 0) {
6171
+ if (TableEditor.hasHeaderColumn(editor, location) && position.getColumnIndex() === 0) {
6171
6172
  return true;
6172
6173
  }
6173
6174
  return false;
@@ -11172,10 +11173,10 @@ class TheContextMenuComponent {
11172
11173
  ngOnInit() { }
11173
11174
  }
11174
11175
  TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
11175
- TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n <ng-container *ngFor=\"let menuItem of menuEntities\">\n <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n (mousedown)=\"itemMousedown($event, item)\"\n (mouseenter)=\"itemMouseenter($event, item)\"\n (mouseleave)=\"itemMouseleave($event, item)\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n thyColorPicker\n thyTrigger=\"hover\"\n thyPlacement=\"right\"\n [(ngModel)]=\"item.backgroundColor\"\n (ngModelChange)=\"changeColor($event, item)\"\n [thyHasBackdrop]=\"false\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n {{ item.name }}\n <thy-input-number\n #inputNumber\n class=\"mx-2\"\n thySize=\"sm\"\n [(ngModel)]=\"item.count\"\n [thyStep]=\"1\"\n [thyMin]=\"1\"\n (click)=\"inputNumberFocus($event)\"\n (thyEnter)=\"itemEnterHandle($event, item)\"\n thyStopPropagation\n ></thy-input-number>\n {{ item.nameSuffix }}\n </span>\n </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
11176
+ TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n <ng-container *ngFor=\"let menuItem of menuEntities\">\n <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n (mousedown)=\"itemMousedown($event, item)\"\n (mouseenter)=\"itemMouseenter($event, item)\"\n (mouseleave)=\"itemMouseleave($event, item)\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n thyColorPicker\n thyTrigger=\"hover\"\n thyPlacement=\"rightTop\"\n [(ngModel)]=\"item.backgroundColor\"\n (ngModelChange)=\"changeColor($event, item)\"\n [thyHasBackdrop]=\"false\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n {{ item.name }}\n <thy-input-number\n #inputNumber\n class=\"mx-2\"\n thySize=\"sm\"\n [(ngModel)]=\"item.count\"\n [thyStep]=\"1\"\n [thyMin]=\"1\"\n (click)=\"inputNumberFocus($event)\"\n (thyEnter)=\"itemEnterHandle($event, item)\"\n thyStopPropagation\n ></thy-input-number>\n {{ item.nameSuffix }}\n </span>\n </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
11176
11177
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheContextMenuComponent, decorators: [{
11177
11178
  type: Component,
11178
- args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n <ng-container *ngFor=\"let menuItem of menuEntities\">\n <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n (mousedown)=\"itemMousedown($event, item)\"\n (mouseenter)=\"itemMouseenter($event, item)\"\n (mouseleave)=\"itemMouseleave($event, item)\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n thyColorPicker\n thyTrigger=\"hover\"\n thyPlacement=\"right\"\n [(ngModel)]=\"item.backgroundColor\"\n (ngModelChange)=\"changeColor($event, item)\"\n [thyHasBackdrop]=\"false\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n {{ item.name }}\n <thy-input-number\n #inputNumber\n class=\"mx-2\"\n thySize=\"sm\"\n [(ngModel)]=\"item.count\"\n [thyStep]=\"1\"\n [thyMin]=\"1\"\n (click)=\"inputNumberFocus($event)\"\n (thyEnter)=\"itemEnterHandle($event, item)\"\n thyStopPropagation\n ></thy-input-number>\n {{ item.nameSuffix }}\n </span>\n </a>\n</ng-template>\n" }]
11179
+ args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n <ng-container *ngFor=\"let menuItem of menuEntities\">\n <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n </ng-container>\n <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n (mousedown)=\"itemMousedown($event, item)\"\n (mouseenter)=\"itemMouseenter($event, item)\"\n (mouseleave)=\"itemMouseleave($event, item)\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n <a\n href=\"javascript:;\"\n thyDropdownMenuItem\n thyColorPicker\n thyTrigger=\"hover\"\n thyPlacement=\"rightTop\"\n [(ngModel)]=\"item.backgroundColor\"\n (ngModelChange)=\"changeColor($event, item)\"\n [thyHasBackdrop]=\"false\"\n >\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n </span>\n </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n <span thyDropdownMenuItemIcon>\n <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n </span>\n <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n {{ item.name }}\n <thy-input-number\n #inputNumber\n class=\"mx-2\"\n thySize=\"sm\"\n [(ngModel)]=\"item.count\"\n [thyStep]=\"1\"\n [thyMin]=\"1\"\n (click)=\"inputNumberFocus($event)\"\n (thyEnter)=\"itemEnterHandle($event, item)\"\n thyStopPropagation\n ></thy-input-number>\n {{ item.nameSuffix }}\n </span>\n </a>\n</ng-template>\n" }]
11179
11180
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
11180
11181
  type: Input
11181
11182
  }], actionHandle: [{
@@ -11217,20 +11218,20 @@ const getSelectedCell = (editor) => {
11217
11218
 
11218
11219
  const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
11219
11220
  // 点击自定义颜色面板输入框设置颜色值时,会丢失焦点和选区(目前无法做到焦点同时存在于编辑器和输入框)
11221
+ let location;
11220
11222
  if (!editor.selection) {
11221
- reSelection(editor);
11223
+ const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
11224
+ location = rangeRef.current.anchor;
11222
11225
  }
11223
- if (editor.selection) {
11224
- const isHeader = TableEditor.isActiveHeader(editor);
11225
- if (color === 'transparent') {
11226
- color = null;
11227
- }
11228
- if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
11229
- tableStore.setSelectedCellsBackgroundColor(null);
11230
- }
11231
- else {
11232
- tableStore.setSelectedCellsBackgroundColor(color);
11233
- }
11226
+ const isHeader = TableEditor.isActiveHeader(editor, location);
11227
+ if (color === 'transparent') {
11228
+ color = null;
11229
+ }
11230
+ if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
11231
+ tableStore.setSelectedCellsBackgroundColor(null);
11232
+ }
11233
+ else {
11234
+ tableStore.setSelectedCellsBackgroundColor(color);
11234
11235
  }
11235
11236
  };
11236
11237
 
@@ -11310,6 +11311,7 @@ class TableStore {
11310
11311
  this.isPrepareSelecting = false;
11311
11312
  this.isCellSelecting = false;
11312
11313
  this.isRightClicking = false;
11314
+ this.isFocusedInput = false;
11313
11315
  this.pointerSelection = false;
11314
11316
  this.isSelectedAllCell = () => {
11315
11317
  if (!this.editor.selection)
@@ -11459,6 +11461,7 @@ class TableStore {
11459
11461
  this.isSelectedTable = false;
11460
11462
  this.isCellSelecting = false;
11461
11463
  this.isRightClicking = false;
11464
+ this.isFocusedInput = false;
11462
11465
  this.selectedCells$.next([]);
11463
11466
  }
11464
11467
  clearLastFocusPath() {
@@ -11595,13 +11598,12 @@ class TableStore {
11595
11598
  Transforms.select(this.editor, path);
11596
11599
  }
11597
11600
  setSelectedCellsBackgroundColor(backgroundColor) {
11598
- const tablePath = getTablePath(this.editor);
11599
- const cells = this.getSelectedCellPositions();
11601
+ const cells = this.selectedCells$.getValue();
11600
11602
  Editor.withoutNormalizing(this.editor, () => {
11601
- for (const { row, col } of cells) {
11602
- const cellPath = [...tablePath, row, col];
11603
+ cells.map(cell => {
11604
+ const cellPath = AngularEditor.findPath(this.editor, cell);
11603
11605
  Transforms.setNodes(this.editor, { backgroundColor }, { at: cellPath });
11604
- }
11606
+ });
11605
11607
  });
11606
11608
  }
11607
11609
  clearSelectedCellsContent() {
@@ -12170,10 +12172,10 @@ class TheTableToolbarComponent {
12170
12172
  }
12171
12173
  }
12172
12174
  TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }], target: i0.ɵɵFactoryTarget.Component });
12173
- TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of cellMenuList\">\n <a\n *ngIf=\"item.visibility\"\n href=\"javascript:;\"\n thyAction\n [thyActionIcon]=\"item.icon\"\n [thyTooltip]=\"item.name\"\n (mousedown)=\"item.actionHandle()\"\n ></a>\n </ng-container>\n <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n thyColorPicker\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"openColorPanel($event)\"\n thyPlacement=\"bottomLeft\"\n >\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n thyAction\n thyTooltip=\"\u5217\u7B49\u5BBD\"\n (mousedown)=\"setEquallyColumnHandle($event)\"\n >\n <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n thyAction\n thyTooltip=\"\u5168\u5C4F\"\n (mousedown)=\"setFullscreen($event)\"\n >\n <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n </a>\n <a\n *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n class=\"fullscreen-hidden\"\n href=\"javascript:;\"\n thyAction\n thyActionIcon=\"copy\"\n thyTooltip=\"\u590D\u5236\"\n (mousedown)=\"onCopy($event)\"\n ></a>\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n <span>\u8868\u683C\u9009\u9879</span>\n <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n [thyActionIcon]=\"deleteIcon\"\n [thyTooltip]=\"iconName\"\n (mousedown)=\"onDelete($event)\"\n (mouseenter)=\"onEnterDelete($event)\"\n (mouseleave)=\"onLeaveDelete($event)\"\n ></a>\n </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
12175
+ TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of cellMenuList\">\n <a\n *ngIf=\"item.visibility\"\n href=\"javascript:;\"\n thyAction\n [thyActionIcon]=\"item.icon\"\n [thyTooltip]=\"item.name\"\n (mousedown)=\"item.actionHandle()\"\n ></a>\n </ng-container>\n <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n thyColorPicker\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"openColorPanel($event)\"\n thyPlacement=\"bottomLeft\"\n [thyHasBackdrop]=\"false\"\n >\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n thyAction\n thyTooltip=\"\u5217\u7B49\u5BBD\"\n (mousedown)=\"setEquallyColumnHandle($event)\"\n >\n <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n thyAction\n thyTooltip=\"\u5168\u5C4F\"\n (mousedown)=\"setFullscreen($event)\"\n >\n <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n </a>\n <a\n *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n class=\"fullscreen-hidden\"\n href=\"javascript:;\"\n thyAction\n thyActionIcon=\"copy\"\n thyTooltip=\"\u590D\u5236\"\n (mousedown)=\"onCopy($event)\"\n ></a>\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n <span>\u8868\u683C\u9009\u9879</span>\n <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n [thyActionIcon]=\"deleteIcon\"\n [thyTooltip]=\"iconName\"\n (mousedown)=\"onDelete($event)\"\n (mouseenter)=\"onEnterDelete($event)\"\n (mouseleave)=\"onLeaveDelete($event)\"\n ></a>\n </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
12174
12176
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
12175
12177
  type: Component,
12176
- args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of cellMenuList\">\n <a\n *ngIf=\"item.visibility\"\n href=\"javascript:;\"\n thyAction\n [thyActionIcon]=\"item.icon\"\n [thyTooltip]=\"item.name\"\n (mousedown)=\"item.actionHandle()\"\n ></a>\n </ng-container>\n <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n thyColorPicker\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"openColorPanel($event)\"\n thyPlacement=\"bottomLeft\"\n >\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n thyAction\n thyTooltip=\"\u5217\u7B49\u5BBD\"\n (mousedown)=\"setEquallyColumnHandle($event)\"\n >\n <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n thyAction\n thyTooltip=\"\u5168\u5C4F\"\n (mousedown)=\"setFullscreen($event)\"\n >\n <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n </a>\n <a\n *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n class=\"fullscreen-hidden\"\n href=\"javascript:;\"\n thyAction\n thyActionIcon=\"copy\"\n thyTooltip=\"\u590D\u5236\"\n (mousedown)=\"onCopy($event)\"\n ></a>\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n <span>\u8868\u683C\u9009\u9879</span>\n <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n [thyActionIcon]=\"deleteIcon\"\n [thyTooltip]=\"iconName\"\n (mousedown)=\"onDelete($event)\"\n (mouseenter)=\"onEnterDelete($event)\"\n (mouseleave)=\"onLeaveDelete($event)\"\n ></a>\n </ng-container>\n</thy-actions>\n" }]
12178
+ args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of cellMenuList\">\n <a\n *ngIf=\"item.visibility\"\n href=\"javascript:;\"\n thyAction\n [thyActionIcon]=\"item.icon\"\n [thyTooltip]=\"item.name\"\n (mousedown)=\"item.actionHandle()\"\n ></a>\n </ng-container>\n <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n thyColorPicker\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"openColorPanel($event)\"\n thyPlacement=\"bottomLeft\"\n [thyHasBackdrop]=\"false\"\n >\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n thyAction\n thyTooltip=\"\u5217\u7B49\u5BBD\"\n (mousedown)=\"setEquallyColumnHandle($event)\"\n >\n <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n thyAction\n thyTooltip=\"\u5168\u5C4F\"\n (mousedown)=\"setFullscreen($event)\"\n >\n <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n </a>\n <a\n *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n class=\"fullscreen-hidden\"\n href=\"javascript:;\"\n thyAction\n thyActionIcon=\"copy\"\n thyTooltip=\"\u590D\u5236\"\n (mousedown)=\"onCopy($event)\"\n ></a>\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n <span>\u8868\u683C\u9009\u9879</span>\n <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n [thyActionIcon]=\"deleteIcon\"\n [thyTooltip]=\"iconName\"\n (mousedown)=\"onDelete($event)\"\n (mouseenter)=\"onEnterDelete($event)\"\n (mouseleave)=\"onLeaveDelete($event)\"\n ></a>\n </ng-container>\n</thy-actions>\n" }]
12177
12179
  }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
12178
12180
  type: Input
12179
12181
  }], tableElement: [{
@@ -13120,7 +13122,10 @@ class TheTableComponent extends TheBaseElementComponent {
13120
13122
  }
13121
13123
  useRowControls() {
13122
13124
  var _a;
13123
- if ((this.selection && !this.readonly) || ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) || this.tableStore.isRightClicking) {
13125
+ if ((this.selection && !this.readonly) ||
13126
+ ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) ||
13127
+ this.tableStore.isRightClicking ||
13128
+ this.tableStore.isFocusedInput) {
13124
13129
  this.rowControls = calculateRowControls(this.editor, this.element);
13125
13130
  }
13126
13131
  }
@@ -13303,6 +13308,10 @@ class TheTableComponent extends TheBaseElementComponent {
13303
13308
  return !isVirtualKey(e) && !this.theTableContextMenuService.isOpened;
13304
13309
  })))
13305
13310
  .pipe(filter((event) => {
13311
+ if (isColorInput(event.target)) {
13312
+ this.tableStore.isFocusedInput = true;
13313
+ return false;
13314
+ }
13306
13315
  if (isColorPanel(event.target)) {
13307
13316
  return false;
13308
13317
  }
@@ -13416,7 +13425,7 @@ class TheTableComponent extends TheBaseElementComponent {
13416
13425
  }
13417
13426
  }
13418
13427
  TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
13419
- TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numberd-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking" } }, providers: [
13428
+ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numberd-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking" } }, providers: [
13420
13429
  TableStore,
13421
13430
  TableService,
13422
13431
  TheTableContextMenuService,
@@ -13428,7 +13437,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
13428
13437
  provide: THE_TABLE_COMPONENT_TOKEN,
13429
13438
  useExisting: TheTableComponent
13430
13439
  }
13431
- ], 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 class=\"the-table-row-controls-wrapper\" #tableRowControlsWrapper>\n <div\n class=\"the-table-corner-controls the-sticky-corner-controls\"\n #cornerControl\n [ngClass]=\"{\n visible: !readonly && (isInTable || tableStore.isRightClicking),\n 'control-active': isSelectedAllCell,\n dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n }\"\n >\n <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n </div>\n <div class=\"the-table-row-controls\">\n <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n <div\n class=\"the-table-row-controls-button-wrap\"\n #rowControlsButtonWrapper\n *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n }\"\n >\n <ng-container *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking) && !element?.options?.numberedColumn\">\n <button\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n type=\"button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n class=\"the-table-row-controls-button the-table-controls-button\"\n ></button>\n </ng-container>\n <ng-container *ngIf=\"element?.options?.numberedColumn\">\n <div\n [contentEditable]=\"false\"\n contenteditable=\"false\"\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n class=\"the-table-numbered-controls-button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n >\n <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n </div>\n </ng-container>\n <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n </div>\n </div>\n </div>\n </div>\n <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n <table class=\"the-table\" #theTable>\n <colgroup #colgroup *ngIf=\"columns\">\n <col *ngFor=\"let col of printColumns ?? columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n </colgroup>\n <thead>\n <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n <th\n #colControl\n class=\"the-table-col-controls\"\n *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedColumnsIndex.includes(i),\n dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n }\"\n (mousedown)=\"onColMousedown($event, i)\"\n >\n <the-table-insert-mark\n *ngIf=\"isInTable || tableStore.isRightClicking\"\n type=\"column\"\n [at]=\"i + 1\"\n [tableStore]=\"tableStore\"\n [parentElement]=\"colControl\"\n >\n </the-table-insert-mark>\n </th>\n </tr>\n </thead>\n <tbody #tbody>\n <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n </tbody>\n <div\n class=\"header-row-shadow header-row-left-shadow\"\n #headerRowLeftShadow\n contenteditable=\"false\"\n *ngIf=\"!element.options?.headerColumn\"\n ></div>\n <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n </table>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "component", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }] });
13440
+ ], 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 class=\"the-table-row-controls-wrapper\" #tableRowControlsWrapper>\n <div\n class=\"the-table-corner-controls the-sticky-corner-controls\"\n #cornerControl\n [ngClass]=\"{\n visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n 'control-active': isSelectedAllCell,\n dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n }\"\n >\n <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n </div>\n <div class=\"the-table-row-controls\">\n <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n <div\n class=\"the-table-row-controls-button-wrap\"\n #rowControlsButtonWrapper\n *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n }\"\n >\n <ng-container\n *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n >\n <button\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n type=\"button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n class=\"the-table-row-controls-button the-table-controls-button\"\n ></button>\n </ng-container>\n <ng-container *ngIf=\"element?.options?.numberedColumn\">\n <div\n [contentEditable]=\"false\"\n contenteditable=\"false\"\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n class=\"the-table-numbered-controls-button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n >\n <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n </div>\n </ng-container>\n <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n </div>\n </div>\n </div>\n </div>\n <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n <table class=\"the-table\" #theTable>\n <colgroup #colgroup *ngIf=\"columns\">\n <col *ngFor=\"let col of printColumns ?? columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n </colgroup>\n <thead>\n <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n <th\n #colControl\n class=\"the-table-col-controls\"\n *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedColumnsIndex.includes(i),\n dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n }\"\n (mousedown)=\"onColMousedown($event, i)\"\n >\n <the-table-insert-mark\n *ngIf=\"isInTable || tableStore.isRightClicking || tableStore.isFocusedInput\"\n type=\"column\"\n [at]=\"i + 1\"\n [tableStore]=\"tableStore\"\n [parentElement]=\"colControl\"\n >\n </the-table-insert-mark>\n </th>\n </tr>\n </thead>\n <tbody #tbody>\n <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n </tbody>\n <div\n class=\"header-row-shadow header-row-left-shadow\"\n #headerRowLeftShadow\n contenteditable=\"false\"\n *ngIf=\"!element.options?.headerColumn\"\n ></div>\n <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n </table>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "component", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }] });
13432
13441
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, decorators: [{
13433
13442
  type: Component,
13434
13443
  args: [{ selector: 'the-table, [theTable]', providers: [
@@ -13444,11 +13453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
13444
13453
  useExisting: TheTableComponent
13445
13454
  }
13446
13455
  ], host: {
13447
- '[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking',
13456
+ '[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
13448
13457
  '[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
13449
13458
  '[class.the-numberd-table]': 'element?.options?.numberedColumn',
13450
13459
  '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
13451
- }, template: "<div class=\"the-table-container\" theColumnResize>\n <div class=\"the-table-row-controls-wrapper\" #tableRowControlsWrapper>\n <div\n class=\"the-table-corner-controls the-sticky-corner-controls\"\n #cornerControl\n [ngClass]=\"{\n visible: !readonly && (isInTable || tableStore.isRightClicking),\n 'control-active': isSelectedAllCell,\n dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n }\"\n >\n <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n </div>\n <div class=\"the-table-row-controls\">\n <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n <div\n class=\"the-table-row-controls-button-wrap\"\n #rowControlsButtonWrapper\n *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n }\"\n >\n <ng-container *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking) && !element?.options?.numberedColumn\">\n <button\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n type=\"button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n class=\"the-table-row-controls-button the-table-controls-button\"\n ></button>\n </ng-container>\n <ng-container *ngIf=\"element?.options?.numberedColumn\">\n <div\n [contentEditable]=\"false\"\n contenteditable=\"false\"\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n class=\"the-table-numbered-controls-button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n >\n <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n </div>\n </ng-container>\n <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n </div>\n </div>\n </div>\n </div>\n <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n <table class=\"the-table\" #theTable>\n <colgroup #colgroup *ngIf=\"columns\">\n <col *ngFor=\"let col of printColumns ?? columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n </colgroup>\n <thead>\n <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n <th\n #colControl\n class=\"the-table-col-controls\"\n *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedColumnsIndex.includes(i),\n dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n }\"\n (mousedown)=\"onColMousedown($event, i)\"\n >\n <the-table-insert-mark\n *ngIf=\"isInTable || tableStore.isRightClicking\"\n type=\"column\"\n [at]=\"i + 1\"\n [tableStore]=\"tableStore\"\n [parentElement]=\"colControl\"\n >\n </the-table-insert-mark>\n </th>\n </tr>\n </thead>\n <tbody #tbody>\n <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n </tbody>\n <div\n class=\"header-row-shadow header-row-left-shadow\"\n #headerRowLeftShadow\n contenteditable=\"false\"\n *ngIf=\"!element.options?.headerColumn\"\n ></div>\n <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n </table>\n </div>\n</div>\n" }]
13460
+ }, template: "<div class=\"the-table-container\" theColumnResize>\n <div class=\"the-table-row-controls-wrapper\" #tableRowControlsWrapper>\n <div\n class=\"the-table-corner-controls the-sticky-corner-controls\"\n #cornerControl\n [ngClass]=\"{\n visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n 'control-active': isSelectedAllCell,\n dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n }\"\n >\n <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n </div>\n </div>\n <div class=\"the-table-row-controls\">\n <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n <div\n class=\"the-table-row-controls-button-wrap\"\n #rowControlsButtonWrapper\n *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n }\"\n >\n <ng-container\n *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n >\n <button\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n type=\"button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n class=\"the-table-row-controls-button the-table-controls-button\"\n ></button>\n </ng-container>\n <ng-container *ngIf=\"element?.options?.numberedColumn\">\n <div\n [contentEditable]=\"false\"\n contenteditable=\"false\"\n (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n class=\"the-table-numbered-controls-button\"\n [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n >\n <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n </div>\n </ng-container>\n <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n </div>\n </div>\n </div>\n </div>\n <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n <table class=\"the-table\" #theTable>\n <colgroup #colgroup *ngIf=\"columns\">\n <col *ngFor=\"let col of printColumns ?? columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n </colgroup>\n <thead>\n <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n <th\n #colControl\n class=\"the-table-col-controls\"\n *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n [ngClass]=\"{\n 'control-active': tableStore.selectedColumnsIndex.includes(i),\n dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n }\"\n (mousedown)=\"onColMousedown($event, i)\"\n >\n <the-table-insert-mark\n *ngIf=\"isInTable || tableStore.isRightClicking || tableStore.isFocusedInput\"\n type=\"column\"\n [at]=\"i + 1\"\n [tableStore]=\"tableStore\"\n [parentElement]=\"colControl\"\n >\n </the-table-insert-mark>\n </th>\n </tr>\n </thead>\n <tbody #tbody>\n <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n </tbody>\n <div\n class=\"header-row-shadow header-row-left-shadow\"\n #headerRowLeftShadow\n contenteditable=\"false\"\n *ngIf=\"!element.options?.headerColumn\"\n ></div>\n <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n </table>\n </div>\n</div>\n" }]
13452
13461
  }], ctorParameters: function () {
13453
13462
  return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }, { type: TheModeConfig, decorators: [{
13454
13463
  type: Inject,