@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
|
@@ -6149,24 +6149,25 @@ 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) {
|
|
6158
|
-
const [tableEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.table });
|
|
6157
|
+
hasHeaderColumn(editor, location) {
|
|
6158
|
+
const [tableEntry] = Editor.nodes(editor, { at: location, match: (n) => n.type === ElementKinds.table });
|
|
6159
6159
|
return tableEntry && tableEntry[0]?.options?.headerColumn;
|
|
6160
6160
|
},
|
|
6161
|
-
isActiveHeader(editor) {
|
|
6162
|
-
|
|
6161
|
+
isActiveHeader(editor, location) {
|
|
6162
|
+
location = location || editor.selection;
|
|
6163
|
+
if (!TableEditor.hasHeaderRow(editor, location) && !TableEditor.hasHeaderColumn(editor, location)) {
|
|
6163
6164
|
return false;
|
|
6164
6165
|
}
|
|
6165
|
-
const position = createTablePosition(editor,
|
|
6166
|
-
if (TableEditor.hasHeaderRow(editor) && position.getRowIndex() === 0) {
|
|
6166
|
+
const position = createTablePosition(editor, location.path);
|
|
6167
|
+
if (TableEditor.hasHeaderRow(editor, location) && position.getRowIndex() === 0) {
|
|
6167
6168
|
return true;
|
|
6168
6169
|
}
|
|
6169
|
-
if (TableEditor.hasHeaderColumn(editor) && position.getColumnIndex() === 0) {
|
|
6170
|
+
if (TableEditor.hasHeaderColumn(editor, location) && position.getColumnIndex() === 0) {
|
|
6170
6171
|
return true;
|
|
6171
6172
|
}
|
|
6172
6173
|
return false;
|
|
@@ -7063,7 +7064,7 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
|
7063
7064
|
}
|
|
7064
7065
|
}
|
|
7065
7066
|
TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7066
|
-
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"] }] });
|
|
7067
|
+
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"] }] });
|
|
7067
7068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
|
|
7068
7069
|
type: Component,
|
|
7069
7070
|
args: [{ selector: 'the-color-toolbar-item', host: {
|
|
@@ -7407,7 +7408,7 @@ const isColorInput = (element) => {
|
|
|
7407
7408
|
};
|
|
7408
7409
|
|
|
7409
7410
|
const withInternalCommon = (editor) => {
|
|
7410
|
-
const { globalMousedown } = editor;
|
|
7411
|
+
const { globalMousedown, onKeydown } = editor;
|
|
7411
7412
|
editor.globalMousedown = (event) => {
|
|
7412
7413
|
const target = event.target;
|
|
7413
7414
|
if (isColorIndicator(target)) {
|
|
@@ -7422,6 +7423,14 @@ const withInternalCommon = (editor) => {
|
|
|
7422
7423
|
}
|
|
7423
7424
|
globalMousedown(event);
|
|
7424
7425
|
};
|
|
7426
|
+
editor.onKeydown = (event) => {
|
|
7427
|
+
const isColorPanel = document.querySelector('.thy-color-picker-panel') || document.querySelector('.thy-color-picker-custom-panel');
|
|
7428
|
+
if (editor.selection && isColorPanel) {
|
|
7429
|
+
const popover = editor.injector.get(ThyPopover);
|
|
7430
|
+
popover.close();
|
|
7431
|
+
}
|
|
7432
|
+
onKeydown(event);
|
|
7433
|
+
};
|
|
7425
7434
|
return editor;
|
|
7426
7435
|
};
|
|
7427
7436
|
const createCommonPlugin = createPluginFactory({
|
|
@@ -11151,10 +11160,10 @@ class TheContextMenuComponent {
|
|
|
11151
11160
|
ngOnInit() { }
|
|
11152
11161
|
}
|
|
11153
11162
|
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 });
|
|
11154
|
-
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=\"
|
|
11163
|
+
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"] }] });
|
|
11155
11164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheContextMenuComponent, decorators: [{
|
|
11156
11165
|
type: Component,
|
|
11157
|
-
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=\"
|
|
11166
|
+
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" }]
|
|
11158
11167
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
|
|
11159
11168
|
type: Input
|
|
11160
11169
|
}], actionHandle: [{
|
|
@@ -11196,20 +11205,20 @@ const getSelectedCell = (editor) => {
|
|
|
11196
11205
|
|
|
11197
11206
|
const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
|
|
11198
11207
|
// 点击自定义颜色面板输入框设置颜色值时，会丢失焦点和选区（目前无法做到焦点同时存在于编辑器和输入框）
|
|
11208
|
+
let location;
|
|
11199
11209
|
if (!editor.selection) {
|
|
11200
|
-
|
|
11210
|
+
const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
|
|
11211
|
+
location = rangeRef.current.anchor;
|
|
11201
11212
|
}
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11207
|
-
|
|
11208
|
-
|
|
11209
|
-
|
|
11210
|
-
|
|
11211
|
-
tableStore.setSelectedCellsBackgroundColor(color);
|
|
11212
|
-
}
|
|
11213
|
+
const isHeader = TableEditor.isActiveHeader(editor, location);
|
|
11214
|
+
if (color === 'transparent') {
|
|
11215
|
+
color = null;
|
|
11216
|
+
}
|
|
11217
|
+
if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
|
|
11218
|
+
tableStore.setSelectedCellsBackgroundColor(null);
|
|
11219
|
+
}
|
|
11220
|
+
else {
|
|
11221
|
+
tableStore.setSelectedCellsBackgroundColor(color);
|
|
11213
11222
|
}
|
|
11214
11223
|
};
|
|
11215
11224
|
|
|
@@ -11293,6 +11302,7 @@ class TableStore {
|
|
|
11293
11302
|
this.isPrepareSelecting = false;
|
|
11294
11303
|
this.isCellSelecting = false;
|
|
11295
11304
|
this.isRightClicking = false;
|
|
11305
|
+
this.isFocusedInput = false;
|
|
11296
11306
|
this.pointerSelection = false;
|
|
11297
11307
|
this.isSelectedAllCell = () => {
|
|
11298
11308
|
if (!this.editor.selection)
|
|
@@ -11440,6 +11450,7 @@ class TableStore {
|
|
|
11440
11450
|
this.isSelectedTable = false;
|
|
11441
11451
|
this.isCellSelecting = false;
|
|
11442
11452
|
this.isRightClicking = false;
|
|
11453
|
+
this.isFocusedInput = false;
|
|
11443
11454
|
this.selectedCells$.next([]);
|
|
11444
11455
|
}
|
|
11445
11456
|
clearLastFocusPath() {
|
|
@@ -11576,13 +11587,12 @@ class TableStore {
|
|
|
11576
11587
|
Transforms.select(this.editor, path);
|
|
11577
11588
|
}
|
|
11578
11589
|
setSelectedCellsBackgroundColor(backgroundColor) {
|
|
11579
|
-
const
|
|
11580
|
-
const cells = this.getSelectedCellPositions();
|
|
11590
|
+
const cells = this.selectedCells$.getValue();
|
|
11581
11591
|
Editor.withoutNormalizing(this.editor, () => {
|
|
11582
|
-
|
|
11583
|
-
const cellPath =
|
|
11592
|
+
cells.map(cell => {
|
|
11593
|
+
const cellPath = AngularEditor.findPath(this.editor, cell);
|
|
11584
11594
|
Transforms.setNodes(this.editor, { backgroundColor }, { at: cellPath });
|
|
11585
|
-
}
|
|
11595
|
+
});
|
|
11586
11596
|
});
|
|
11587
11597
|
}
|
|
11588
11598
|
clearSelectedCellsContent() {
|
|
@@ -12147,10 +12157,10 @@ class TheTableToolbarComponent {
|
|
|
12147
12157
|
}
|
|
12148
12158
|
}
|
|
12149
12159
|
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 });
|
|
12150
|
-
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"] }] });
|
|
12160
|
+
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"] }] });
|
|
12151
12161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
|
|
12152
12162
|
type: Component,
|
|
12153
|
-
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" }]
|
|
12163
|
+
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" }]
|
|
12154
12164
|
}], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
|
|
12155
12165
|
type: Input
|
|
12156
12166
|
}], tableElement: [{
|
|
@@ -12747,18 +12757,22 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
12747
12757
|
* 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
|
|
12748
12758
|
*/
|
|
12749
12759
|
calcPrintColumnsWidth() {
|
|
12750
|
-
|
|
12751
|
-
|
|
12752
|
-
const
|
|
12753
|
-
const tableWidth = columns.reduce((a, b) => a + b.width, 0);
|
|
12754
|
-
const cellsWidthRatio = columns.map(column => Math.floor((column.width / tableWidth) * 100) / 100);
|
|
12760
|
+
if (this.config.mode === TheMode.print) {
|
|
12761
|
+
const columns = this.element?.columns;
|
|
12762
|
+
const numberedColumnWidth = this.element.options?.numberedColumn ? 45 : 0;
|
|
12755
12763
|
// 为什么是 634，按照 DPI 96 的 A4 纸的宽度是 794px, 但打印时会有左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
|
|
12756
|
-
|
|
12757
|
-
|
|
12758
|
-
|
|
12759
|
-
const
|
|
12760
|
-
|
|
12761
|
-
|
|
12764
|
+
// 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
|
|
12765
|
+
const printWidth = 634 - numberedColumnWidth;
|
|
12766
|
+
if (columns) {
|
|
12767
|
+
const opts = new TableOptions();
|
|
12768
|
+
const tableWidth = columns.reduce((a, b) => a + b.width, 0);
|
|
12769
|
+
const cellsWidthRatio = columns.map(column => Math.floor((column.width / tableWidth) * 100) / 100);
|
|
12770
|
+
this.printColumns = cellsWidthRatio.map(item => {
|
|
12771
|
+
// 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
|
|
12772
|
+
const width = parseInt(`${item * printWidth}`) - 1;
|
|
12773
|
+
return { width: width < opts.minWidthPx ? opts.minWidthPx : width };
|
|
12774
|
+
});
|
|
12775
|
+
}
|
|
12762
12776
|
}
|
|
12763
12777
|
}
|
|
12764
12778
|
getWrapperWidth() {
|
|
@@ -13075,7 +13089,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13075
13089
|
});
|
|
13076
13090
|
}
|
|
13077
13091
|
useRowControls() {
|
|
13078
|
-
if ((this.selection && !this.readonly) ||
|
|
13092
|
+
if ((this.selection && !this.readonly) ||
|
|
13093
|
+
this.element.options?.numberedColumn ||
|
|
13094
|
+
this.tableStore.isRightClicking ||
|
|
13095
|
+
this.tableStore.isFocusedInput) {
|
|
13079
13096
|
this.rowControls = calculateRowControls(this.editor, this.element);
|
|
13080
13097
|
}
|
|
13081
13098
|
}
|
|
@@ -13257,6 +13274,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13257
13274
|
return !isVirtualKey(e) && !this.theTableContextMenuService.isOpened;
|
|
13258
13275
|
})))
|
|
13259
13276
|
.pipe(filter((event) => {
|
|
13277
|
+
if (isColorInput(event.target)) {
|
|
13278
|
+
this.tableStore.isFocusedInput = true;
|
|
13279
|
+
return false;
|
|
13280
|
+
}
|
|
13260
13281
|
if (isColorPanel(event.target)) {
|
|
13261
13282
|
return false;
|
|
13262
13283
|
}
|
|
@@ -13369,7 +13390,7 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13369
13390
|
}
|
|
13370
13391
|
}
|
|
13371
13392
|
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 });
|
|
13372
|
-
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: [
|
|
13393
|
+
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: [
|
|
13373
13394
|
TableStore,
|
|
13374
13395
|
TableService,
|
|
13375
13396
|
TheTableContextMenuService,
|
|
@@ -13381,7 +13402,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
13381
13402
|
provide: THE_TABLE_COMPONENT_TOKEN,
|
|
13382
13403
|
useExisting: TheTableComponent
|
|
13383
13404
|
}
|
|
13384
|
-
], 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
|
|
13405
|
+
], 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"] }] });
|
|
13385
13406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, decorators: [{
|
|
13386
13407
|
type: Component,
|
|
13387
13408
|
args: [{ selector: 'the-table, [theTable]', providers: [
|
|
@@ -13397,11 +13418,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
13397
13418
|
useExisting: TheTableComponent
|
|
13398
13419
|
}
|
|
13399
13420
|
], host: {
|
|
13400
|
-
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking',
|
|
13421
|
+
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
|
|
13401
13422
|
'[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
|
|
13402
13423
|
'[class.the-numberd-table]': 'element?.options?.numberedColumn',
|
|
13403
13424
|
'[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
|
|
13404
|
-
}, 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
|
|
13425
|
+
}, 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" }]
|
|
13405
13426
|
}], ctorParameters: function () { 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: [{
|
|
13406
13427
|
type: Inject,
|
|
13407
13428
|
args: [THE_MODE_TOKEN]
|