@worktile/theia 15.1.4 → 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.
- package/esm2020/components/contextmenu/contextmenu.component.mjs +3 -3
- package/esm2020/plugins/color/toolbar-item.component.mjs +1 -1
- package/esm2020/plugins/common/common.plugin.mjs +11 -2
- package/esm2020/plugins/table/components/table.component.mjs +29 -18
- package/esm2020/plugins/table/components/toolbar/table-toolbar.component.mjs +3 -3
- package/esm2020/plugins/table/table.editor.mjs +11 -10
- package/esm2020/plugins/table/table.store.mjs +7 -6
- package/esm2020/plugins/table/utils/set-cells-background-color.mjs +14 -14
- package/fesm2015/worktile-theia.mjs +70 -49
- package/fesm2015/worktile-theia.mjs.map +1 -1
- package/fesm2020/worktile-theia.mjs +69 -48
- package/fesm2020/worktile-theia.mjs.map +1 -1
- package/package.json +1 -1
- package/plugins/table/table.editor.d.ts +4 -4
- package/plugins/table/table.store.d.ts +1 -0
|
@@ -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
|
-
|
|
8
|
+
const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
|
|
9
|
+
location = rangeRef.current.anchor;
|
|
8
10
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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,
|
|
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
|
-
|
|
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,
|
|
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;
|
|
@@ -7074,7 +7075,7 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
|
7074
7075
|
}
|
|
7075
7076
|
}
|
|
7076
7077
|
TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7077
|
-
TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n href=\"javascript:;\"\n thyAction\n [thyActionActive]=\"active\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n>\n <thy-icon\n [thyIconName]=\"toolbarItem.icon\"\n thyIconType=\"twotone\"\n [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n ></thy-icon>\n <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ 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: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
|
|
7078
|
+
TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n href=\"javascript:;\"\n thyAction\n [thyActionActive]=\"active\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n>\n <thy-icon\n [thyIconName]=\"toolbarItem.icon\"\n thyIconType=\"twotone\"\n [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n ></thy-icon>\n <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ 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: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
|
|
7078
7079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
|
|
7079
7080
|
type: Component,
|
|
7080
7081
|
args: [{ selector: 'the-color-toolbar-item', host: {
|
|
@@ -7418,7 +7419,7 @@ const isColorInput = (element) => {
|
|
|
7418
7419
|
};
|
|
7419
7420
|
|
|
7420
7421
|
const withInternalCommon = (editor) => {
|
|
7421
|
-
const { globalMousedown } = editor;
|
|
7422
|
+
const { globalMousedown, onKeydown } = editor;
|
|
7422
7423
|
editor.globalMousedown = (event) => {
|
|
7423
7424
|
const target = event.target;
|
|
7424
7425
|
if (isColorIndicator(target)) {
|
|
@@ -7433,6 +7434,14 @@ const withInternalCommon = (editor) => {
|
|
|
7433
7434
|
}
|
|
7434
7435
|
globalMousedown(event);
|
|
7435
7436
|
};
|
|
7437
|
+
editor.onKeydown = (event) => {
|
|
7438
|
+
const isColorPanel = document.querySelector('.thy-color-picker-panel') || document.querySelector('.thy-color-picker-custom-panel');
|
|
7439
|
+
if (editor.selection && isColorPanel) {
|
|
7440
|
+
const popover = editor.injector.get(ThyPopover);
|
|
7441
|
+
popover.close();
|
|
7442
|
+
}
|
|
7443
|
+
onKeydown(event);
|
|
7444
|
+
};
|
|
7436
7445
|
return editor;
|
|
7437
7446
|
};
|
|
7438
7447
|
const createCommonPlugin = createPluginFactory({
|
|
@@ -11164,10 +11173,10 @@ class TheContextMenuComponent {
|
|
|
11164
11173
|
ngOnInit() { }
|
|
11165
11174
|
}
|
|
11166
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 });
|
|
11167
|
-
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=\"
|
|
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"] }] });
|
|
11168
11177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheContextMenuComponent, decorators: [{
|
|
11169
11178
|
type: Component,
|
|
11170
|
-
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=\"
|
|
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" }]
|
|
11171
11180
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
|
|
11172
11181
|
type: Input
|
|
11173
11182
|
}], actionHandle: [{
|
|
@@ -11209,20 +11218,20 @@ const getSelectedCell = (editor) => {
|
|
|
11209
11218
|
|
|
11210
11219
|
const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
|
|
11211
11220
|
// 点击自定义颜色面板输入框设置颜色值时，会丢失焦点和选区（目前无法做到焦点同时存在于编辑器和输入框）
|
|
11221
|
+
let location;
|
|
11212
11222
|
if (!editor.selection) {
|
|
11213
|
-
|
|
11223
|
+
const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
|
|
11224
|
+
location = rangeRef.current.anchor;
|
|
11214
11225
|
}
|
|
11215
|
-
|
|
11216
|
-
|
|
11217
|
-
|
|
11218
|
-
|
|
11219
|
-
|
|
11220
|
-
|
|
11221
|
-
|
|
11222
|
-
|
|
11223
|
-
|
|
11224
|
-
tableStore.setSelectedCellsBackgroundColor(color);
|
|
11225
|
-
}
|
|
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);
|
|
11226
11235
|
}
|
|
11227
11236
|
};
|
|
11228
11237
|
|
|
@@ -11302,6 +11311,7 @@ class TableStore {
|
|
|
11302
11311
|
this.isPrepareSelecting = false;
|
|
11303
11312
|
this.isCellSelecting = false;
|
|
11304
11313
|
this.isRightClicking = false;
|
|
11314
|
+
this.isFocusedInput = false;
|
|
11305
11315
|
this.pointerSelection = false;
|
|
11306
11316
|
this.isSelectedAllCell = () => {
|
|
11307
11317
|
if (!this.editor.selection)
|
|
@@ -11451,6 +11461,7 @@ class TableStore {
|
|
|
11451
11461
|
this.isSelectedTable = false;
|
|
11452
11462
|
this.isCellSelecting = false;
|
|
11453
11463
|
this.isRightClicking = false;
|
|
11464
|
+
this.isFocusedInput = false;
|
|
11454
11465
|
this.selectedCells$.next([]);
|
|
11455
11466
|
}
|
|
11456
11467
|
clearLastFocusPath() {
|
|
@@ -11587,13 +11598,12 @@ class TableStore {
|
|
|
11587
11598
|
Transforms.select(this.editor, path);
|
|
11588
11599
|
}
|
|
11589
11600
|
setSelectedCellsBackgroundColor(backgroundColor) {
|
|
11590
|
-
const
|
|
11591
|
-
const cells = this.getSelectedCellPositions();
|
|
11601
|
+
const cells = this.selectedCells$.getValue();
|
|
11592
11602
|
Editor.withoutNormalizing(this.editor, () => {
|
|
11593
|
-
|
|
11594
|
-
const cellPath =
|
|
11603
|
+
cells.map(cell => {
|
|
11604
|
+
const cellPath = AngularEditor.findPath(this.editor, cell);
|
|
11595
11605
|
Transforms.setNodes(this.editor, { backgroundColor }, { at: cellPath });
|
|
11596
|
-
}
|
|
11606
|
+
});
|
|
11597
11607
|
});
|
|
11598
11608
|
}
|
|
11599
11609
|
clearSelectedCellsContent() {
|
|
@@ -12162,10 +12172,10 @@ class TheTableToolbarComponent {
|
|
|
12162
12172
|
}
|
|
12163
12173
|
}
|
|
12164
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 });
|
|
12165
|
-
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"], 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"] }] });
|
|
12166
12176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
|
|
12167
12177
|
type: Component,
|
|
12168
|
-
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" }]
|
|
12169
12179
|
}], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
|
|
12170
12180
|
type: Input
|
|
12171
12181
|
}], tableElement: [{
|
|
@@ -12770,19 +12780,23 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
12770
12780
|
* 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
|
|
12771
12781
|
*/
|
|
12772
12782
|
calcPrintColumnsWidth() {
|
|
12773
|
-
var _a;
|
|
12774
|
-
|
|
12775
|
-
|
|
12776
|
-
const
|
|
12777
|
-
const tableWidth = columns.reduce((a, b) => a + b.width, 0);
|
|
12778
|
-
const cellsWidthRatio = columns.map(column => Math.floor((column.width / tableWidth) * 100) / 100);
|
|
12783
|
+
var _a, _b;
|
|
12784
|
+
if (this.config.mode === TheMode.print) {
|
|
12785
|
+
const columns = (_a = this.element) === null || _a === void 0 ? void 0 : _a.columns;
|
|
12786
|
+
const numberedColumnWidth = ((_b = this.element.options) === null || _b === void 0 ? void 0 : _b.numberedColumn) ? 45 : 0;
|
|
12779
12787
|
// 为什么是 634，按照 DPI 96 的 A4 纸的宽度是 794px, 但打印时会有左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
|
|
12780
|
-
|
|
12781
|
-
|
|
12782
|
-
|
|
12783
|
-
const
|
|
12784
|
-
|
|
12785
|
-
|
|
12788
|
+
// 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
|
|
12789
|
+
const printWidth = 634 - numberedColumnWidth;
|
|
12790
|
+
if (columns) {
|
|
12791
|
+
const opts = new TableOptions();
|
|
12792
|
+
const tableWidth = columns.reduce((a, b) => a + b.width, 0);
|
|
12793
|
+
const cellsWidthRatio = columns.map(column => Math.floor((column.width / tableWidth) * 100) / 100);
|
|
12794
|
+
this.printColumns = cellsWidthRatio.map(item => {
|
|
12795
|
+
// 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
|
|
12796
|
+
const width = parseInt(`${item * printWidth}`) - 1;
|
|
12797
|
+
return { width: width < opts.minWidthPx ? opts.minWidthPx : width };
|
|
12798
|
+
});
|
|
12799
|
+
}
|
|
12786
12800
|
}
|
|
12787
12801
|
}
|
|
12788
12802
|
getWrapperWidth() {
|
|
@@ -13108,7 +13122,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13108
13122
|
}
|
|
13109
13123
|
useRowControls() {
|
|
13110
13124
|
var _a;
|
|
13111
|
-
if ((this.selection && !this.readonly) ||
|
|
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) {
|
|
13112
13129
|
this.rowControls = calculateRowControls(this.editor, this.element);
|
|
13113
13130
|
}
|
|
13114
13131
|
}
|
|
@@ -13291,6 +13308,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13291
13308
|
return !isVirtualKey(e) && !this.theTableContextMenuService.isOpened;
|
|
13292
13309
|
})))
|
|
13293
13310
|
.pipe(filter((event) => {
|
|
13311
|
+
if (isColorInput(event.target)) {
|
|
13312
|
+
this.tableStore.isFocusedInput = true;
|
|
13313
|
+
return false;
|
|
13314
|
+
}
|
|
13294
13315
|
if (isColorPanel(event.target)) {
|
|
13295
13316
|
return false;
|
|
13296
13317
|
}
|
|
@@ -13404,7 +13425,7 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13404
13425
|
}
|
|
13405
13426
|
}
|
|
13406
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 });
|
|
13407
|
-
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: [
|
|
13408
13429
|
TableStore,
|
|
13409
13430
|
TableService,
|
|
13410
13431
|
TheTableContextMenuService,
|
|
@@ -13416,7 +13437,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
13416
13437
|
provide: THE_TABLE_COMPONENT_TOKEN,
|
|
13417
13438
|
useExisting: TheTableComponent
|
|
13418
13439
|
}
|
|
13419
|
-
], 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
|
|
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"] }] });
|
|
13420
13441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, decorators: [{
|
|
13421
13442
|
type: Component,
|
|
13422
13443
|
args: [{ selector: 'the-table, [theTable]', providers: [
|
|
@@ -13432,11 +13453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
13432
13453
|
useExisting: TheTableComponent
|
|
13433
13454
|
}
|
|
13434
13455
|
], host: {
|
|
13435
|
-
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking',
|
|
13456
|
+
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
|
|
13436
13457
|
'[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
|
|
13437
13458
|
'[class.the-numberd-table]': 'element?.options?.numberedColumn',
|
|
13438
13459
|
'[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
|
|
13439
|
-
}, 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
|
|
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" }]
|
|
13440
13461
|
}], ctorParameters: function () {
|
|
13441
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: [{
|
|
13442
13463
|
type: Inject,
|