@worktile/theia 15.1.5 → 15.1.6-bugfix
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/components/contextmenu/contextmenu.component.mjs +3 -3
- package/esm2020/plugins/common/common.plugin.mjs +1 -1
- package/esm2020/plugins/table/components/table.component.mjs +14 -7
- 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 +44 -35
- package/fesm2015/worktile-theia.mjs.map +1 -1
- package/fesm2020/worktile-theia.mjs +44 -35
- 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;
|
|
@@ -11159,10 +11160,10 @@ class TheContextMenuComponent {
|
|
|
11159
11160
|
ngOnInit() { }
|
|
11160
11161
|
}
|
|
11161
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 });
|
|
11162
|
-
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"] }] });
|
|
11163
11164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheContextMenuComponent, decorators: [{
|
|
11164
11165
|
type: Component,
|
|
11165
|
-
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" }]
|
|
11166
11167
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
|
|
11167
11168
|
type: Input
|
|
11168
11169
|
}], actionHandle: [{
|
|
@@ -11204,20 +11205,20 @@ const getSelectedCell = (editor) => {
|
|
|
11204
11205
|
|
|
11205
11206
|
const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
|
|
11206
11207
|
// 点击自定义颜色面板输入框设置颜色值时，会丢失焦点和选区（目前无法做到焦点同时存在于编辑器和输入框）
|
|
11208
|
+
let location;
|
|
11207
11209
|
if (!editor.selection) {
|
|
11208
|
-
|
|
11210
|
+
const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
|
|
11211
|
+
location = rangeRef.current.anchor;
|
|
11209
11212
|
}
|
|
11210
|
-
|
|
11211
|
-
|
|
11212
|
-
|
|
11213
|
-
|
|
11214
|
-
|
|
11215
|
-
|
|
11216
|
-
|
|
11217
|
-
|
|
11218
|
-
|
|
11219
|
-
tableStore.setSelectedCellsBackgroundColor(color);
|
|
11220
|
-
}
|
|
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);
|
|
11221
11222
|
}
|
|
11222
11223
|
};
|
|
11223
11224
|
|
|
@@ -11301,6 +11302,7 @@ class TableStore {
|
|
|
11301
11302
|
this.isPrepareSelecting = false;
|
|
11302
11303
|
this.isCellSelecting = false;
|
|
11303
11304
|
this.isRightClicking = false;
|
|
11305
|
+
this.isFocusedInput = false;
|
|
11304
11306
|
this.pointerSelection = false;
|
|
11305
11307
|
this.isSelectedAllCell = () => {
|
|
11306
11308
|
if (!this.editor.selection)
|
|
@@ -11448,6 +11450,7 @@ class TableStore {
|
|
|
11448
11450
|
this.isSelectedTable = false;
|
|
11449
11451
|
this.isCellSelecting = false;
|
|
11450
11452
|
this.isRightClicking = false;
|
|
11453
|
+
this.isFocusedInput = false;
|
|
11451
11454
|
this.selectedCells$.next([]);
|
|
11452
11455
|
}
|
|
11453
11456
|
clearLastFocusPath() {
|
|
@@ -11584,13 +11587,12 @@ class TableStore {
|
|
|
11584
11587
|
Transforms.select(this.editor, path);
|
|
11585
11588
|
}
|
|
11586
11589
|
setSelectedCellsBackgroundColor(backgroundColor) {
|
|
11587
|
-
const
|
|
11588
|
-
const cells = this.getSelectedCellPositions();
|
|
11590
|
+
const cells = this.selectedCells$.getValue();
|
|
11589
11591
|
Editor.withoutNormalizing(this.editor, () => {
|
|
11590
|
-
|
|
11591
|
-
const cellPath =
|
|
11592
|
+
cells.map(cell => {
|
|
11593
|
+
const cellPath = AngularEditor.findPath(this.editor, cell);
|
|
11592
11594
|
Transforms.setNodes(this.editor, { backgroundColor }, { at: cellPath });
|
|
11593
|
-
}
|
|
11595
|
+
});
|
|
11594
11596
|
});
|
|
11595
11597
|
}
|
|
11596
11598
|
clearSelectedCellsContent() {
|
|
@@ -12155,10 +12157,10 @@ class TheTableToolbarComponent {
|
|
|
12155
12157
|
}
|
|
12156
12158
|
}
|
|
12157
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 });
|
|
12158
|
-
TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of cellMenuList\">\n <a\n *ngIf=\"item.visibility\"\n href=\"javascript:;\"\n thyAction\n [thyActionIcon]=\"item.icon\"\n [thyTooltip]=\"item.name\"\n (mousedown)=\"item.actionHandle()\"\n ></a>\n </ng-container>\n <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n thyColorPicker\n [(ngModel)]=\"selectedColor\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"openColorPanel($event)\"\n thyPlacement=\"bottomLeft\"\n >\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n thyAction\n thyTooltip=\"\u5217\u7B49\u5BBD\"\n (mousedown)=\"setEquallyColumnHandle($event)\"\n >\n <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n </a>\n <a\n href=\"javascript:;\"\n *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n thyAction\n thyTooltip=\"\u5168\u5C4F\"\n (mousedown)=\"setFullscreen($event)\"\n >\n <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n </a>\n <a\n *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n class=\"fullscreen-hidden\"\n href=\"javascript:;\"\n thyAction\n thyActionIcon=\"copy\"\n thyTooltip=\"\u590D\u5236\"\n (mousedown)=\"onCopy($event)\"\n ></a>\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($event)\" (click)=\"openTableOptionMenu($event)\">\n <span>\u8868\u683C\u9009\u9879</span>\n <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n [thyActionIcon]=\"deleteIcon\"\n [thyTooltip]=\"iconName\"\n (mousedown)=\"onDelete($event)\"\n (mouseenter)=\"onEnterDelete($event)\"\n (mouseleave)=\"onLeaveDelete($event)\"\n ></a>\n </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] });
|
|
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"] }] });
|
|
12159
12161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
|
|
12160
12162
|
type: Component,
|
|
12161
|
-
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" }]
|
|
12162
12164
|
}], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
|
|
12163
12165
|
type: Input
|
|
12164
12166
|
}], tableElement: [{
|
|
@@ -13087,7 +13089,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13087
13089
|
});
|
|
13088
13090
|
}
|
|
13089
13091
|
useRowControls() {
|
|
13090
|
-
if ((this.selection && !this.readonly) ||
|
|
13092
|
+
if ((this.selection && !this.readonly) ||
|
|
13093
|
+
this.element.options?.numberedColumn ||
|
|
13094
|
+
this.tableStore.isRightClicking ||
|
|
13095
|
+
this.tableStore.isFocusedInput) {
|
|
13091
13096
|
this.rowControls = calculateRowControls(this.editor, this.element);
|
|
13092
13097
|
}
|
|
13093
13098
|
}
|
|
@@ -13269,6 +13274,10 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13269
13274
|
return !isVirtualKey(e) && !this.theTableContextMenuService.isOpened;
|
|
13270
13275
|
})))
|
|
13271
13276
|
.pipe(filter((event) => {
|
|
13277
|
+
if (isColorInput(event.target)) {
|
|
13278
|
+
this.tableStore.isFocusedInput = true;
|
|
13279
|
+
return false;
|
|
13280
|
+
}
|
|
13272
13281
|
if (isColorPanel(event.target)) {
|
|
13273
13282
|
return false;
|
|
13274
13283
|
}
|
|
@@ -13381,7 +13390,7 @@ class TheTableComponent extends TheBaseElementComponent {
|
|
|
13381
13390
|
}
|
|
13382
13391
|
}
|
|
13383
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 });
|
|
13384
|
-
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: [
|
|
13385
13394
|
TableStore,
|
|
13386
13395
|
TableService,
|
|
13387
13396
|
TheTableContextMenuService,
|
|
@@ -13393,7 +13402,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
13393
13402
|
provide: THE_TABLE_COMPONENT_TOKEN,
|
|
13394
13403
|
useExisting: TheTableComponent
|
|
13395
13404
|
}
|
|
13396
|
-
], 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"] }] });
|
|
13397
13406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, decorators: [{
|
|
13398
13407
|
type: Component,
|
|
13399
13408
|
args: [{ selector: 'the-table, [theTable]', providers: [
|
|
@@ -13409,11 +13418,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
13409
13418
|
useExisting: TheTableComponent
|
|
13410
13419
|
}
|
|
13411
13420
|
], host: {
|
|
13412
|
-
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking',
|
|
13421
|
+
'[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
|
|
13413
13422
|
'[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
|
|
13414
13423
|
'[class.the-numberd-table]': 'element?.options?.numberedColumn',
|
|
13415
13424
|
'[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
|
|
13416
|
-
}, 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" }]
|
|
13417
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: [{
|
|
13418
13427
|
type: Inject,
|
|
13419
13428
|
args: [THE_MODE_TOKEN]
|