@worktile/theia 14.0.2 → 14.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Injectable, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
2
+ import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Injectable, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Inject, ViewChild, Directive, TemplateRef, ElementRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
3
3
  import * as i2 from '@angular/common';
4
4
  import { DOCUMENT, CommonModule } from '@angular/common';
5
5
  import * as i2$1 from '@angular/forms';
@@ -25,8 +25,8 @@ import { Overlay, OverlayModule } from '@angular/cdk/overlay';
25
25
  import marked from 'marked';
26
26
  import * as i1$2 from 'ngx-tethys/alert';
27
27
  import { ThyAlertModule } from 'ngx-tethys/alert';
28
- import { map as map$1, takeUntil, take, delay, startWith, distinctUntilChanged, skip, share, filter, mapTo, debounceTime, pairwise } from 'rxjs/operators';
29
28
  import { ThyUploadStatus } from 'ngx-tethys/upload';
29
+ import { map as map$1, takeUntil, take, delay, startWith, distinctUntilChanged, skip, share, filter, mapTo, debounceTime, pairwise } from 'rxjs/operators';
30
30
  import * as i4 from 'ngx-tethys/image';
31
31
  import { ThyImageModule } from 'ngx-tethys/image';
32
32
  import * as i4$1 from 'ngx-tethys/tooltip';
@@ -37,15 +37,15 @@ import * as i5$1 from 'ngx-tethys/action';
37
37
  import { ThyActionModule } from 'ngx-tethys/action';
38
38
  import * as i11 from 'ngx-tethys/divider';
39
39
  import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
40
- import * as i11$1 from 'ng-codemirror';
40
+ import * as i13 from 'ng-codemirror';
41
41
  import { CodeMirrorComponent, CodemirrorModule } from 'ng-codemirror';
42
42
  import * as i6 from 'ngx-tethys/dropdown';
43
43
  import { ThyDropdownModule } from 'ngx-tethys/dropdown';
44
44
  import * as i1$3 from 'ngx-tethys/notify';
45
45
  import { ThyNotifyModule } from 'ngx-tethys/notify';
46
- import * as i7 from 'ngx-tethys/resizable';
46
+ import * as i9$1 from 'ngx-tethys/resizable';
47
47
  import { ThyResizableModule } from 'ngx-tethys/resizable';
48
- import * as i8 from 'ngx-tethys/switch';
48
+ import * as i10 from 'ngx-tethys/switch';
49
49
  import { ThySwitchModule } from 'ngx-tethys/switch';
50
50
  import isUrl from 'is-url';
51
51
  import * as i1$4 from 'ngx-tethys/button';
@@ -2967,20 +2967,24 @@ class TheImageComponent extends TheBaseElementComponent {
2967
2967
  }
2968
2968
  isShouldOpen() {
2969
2969
  const { theOptions: { richMedia } } = this.theContextService.getOptions();
2970
- return !this?.readonly && richMedia && this.isCollapsedAndNonReadonly && !this.uploading && !this.isOpen;
2970
+ return (!this?.readonly &&
2971
+ richMedia &&
2972
+ this.isCollapsedAndNonReadonly &&
2973
+ isGlobalCollapsed(this.editor) &&
2974
+ !this.uploading &&
2975
+ !this.isOpen);
2971
2976
  }
2972
2977
  isShouldClose() {
2973
- return this.isOpen && (this?.readonly || !this.isCollapsedAndNonReadonly || this.uploading);
2978
+ return (this.isOpen &&
2979
+ (this?.readonly || !this.isCollapsedAndNonReadonly || !isGlobalCollapsed(this.editor) || this.uploading));
2974
2980
  }
2975
2981
  openLayoutToolbar() {
2976
2982
  this.layoutToolbarRef = this.thyPopover.open(this.layoutToolbar, {
2977
2983
  origin: this.imageContent,
2978
- panelClass: ['the-block-toolbar-popover'],
2979
- placement: 'bottom',
2984
+ panelClass: 'the-plugin-toolbar-popover',
2980
2985
  insideClosable: false,
2981
2986
  backdropClosable: true,
2982
2987
  hasBackdrop: false,
2983
- offset: 10,
2984
2988
  minWidth: 0,
2985
2989
  viewContainerRef: this.viewContainerRef,
2986
2990
  scrollStrategy: this.overlay.scrollStrategies.reposition()
@@ -3027,7 +3031,7 @@ class TheImageComponent extends TheBaseElementComponent {
3027
3031
  overlayX: 'center',
3028
3032
  overlayY: 'top',
3029
3033
  offsetX: 0,
3030
- offsetY: 10
3034
+ offsetY: 4
3031
3035
  };
3032
3036
  return this.overlay
3033
3037
  .position()
@@ -3049,10 +3053,10 @@ class TheImageComponent extends TheBaseElementComponent {
3049
3053
  }
3050
3054
  }
3051
3055
  TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$2.Overlay }, { token: i4.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
3052
- TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions contenteditable=\"false\" thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { kind: "directive", type: i4.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
3056
+ TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { kind: "directive", type: i4.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
3053
3057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheImageComponent, decorators: [{
3054
3058
  type: Component,
3055
- args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions contenteditable=\"false\" thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\n</ng-template>\n" }]
3059
+ args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n <img\n #img\n thyImage\n [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n [class.image-collapsed]=\"selection && !uploading\"\n class=\"main-image\"\n (load)=\"imageLoaded($event)\"\n (mousedown)=\"preventDefault($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n [alt]=\"imageEntry.name\"\n />\n <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n </div>\n <div *ngIf=\"uploading\" class=\"uploading\">\n <div class=\"uploading-percentage\">\n <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n </div>\n </div>\n <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n </div>\n <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n <thy-icon thyIconName=\"image\"></thy-icon>\n </div>\n</div>\n\n<ng-template #layoutToolbar>\n <thy-actions thySize=\"xxs\">\n <ng-container *ngFor=\"let item of layoutOptions\">\n <a\n *ngIf=\"item.key !== 'split'\"\n href=\"javascript:;\"\n thyAction\n [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n [thyActionIcon]=\"item.icon\"\n [thyActionActive]=\"layoutActive(item.key)\"\n [thyTooltip]=\"item.name\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"item?.handle($event, item.key)\"\n ></a>\n <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n </ng-container>\n </thy-actions>\n</ng-template>\n" }]
3056
3060
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
3057
3061
  type: Inject,
3058
3062
  args: [THE_UPLOAD_SERVICE_TOKEN]
@@ -6981,7 +6985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
6981
6985
  }] } });
6982
6986
 
6983
6987
  class TheCodeComponent extends TheBaseElementComponent {
6984
- constructor(elementRef, cdr, thyNotifyService, contextService, ngZone, config) {
6988
+ constructor(elementRef, cdr, thyNotifyService, contextService, ngZone, config, thyPopover, viewContainerRef, overlay) {
6985
6989
  super(elementRef, cdr);
6986
6990
  this.elementRef = elementRef;
6987
6991
  this.cdr = cdr;
@@ -6989,6 +6993,9 @@ class TheCodeComponent extends TheBaseElementComponent {
6989
6993
  this.contextService = contextService;
6990
6994
  this.ngZone = ngZone;
6991
6995
  this.config = config;
6996
+ this.thyPopover = thyPopover;
6997
+ this.viewContainerRef = viewContainerRef;
6998
+ this.overlay = overlay;
6992
6999
  this.startRenderCodemirror = false;
6993
7000
  this.dropdownMode = DropdownMode;
6994
7001
  this.maxHeight = this.config.mode === TheMode.print ? 0 : 350 - CODEMIRROR_PADDING_TOP * 2;
@@ -7019,8 +7026,17 @@ class TheCodeComponent extends TheBaseElementComponent {
7019
7026
  get code() {
7020
7027
  return this.element.content;
7021
7028
  }
7029
+ get isToolbarOpen() {
7030
+ return this.toolbarPopoverRef && this.toolbarPopoverRef.getOverlayRef() && this.toolbarPopoverRef.getOverlayRef().hasAttached();
7031
+ }
7022
7032
  onContextChange() {
7023
7033
  super.onContextChange();
7034
+ if (this.isCollapsedAndNonReadonly) {
7035
+ this.openToolbar();
7036
+ }
7037
+ else {
7038
+ this.closeToolbar();
7039
+ }
7024
7040
  if (this.initialized) {
7025
7041
  if (this.options.readOnly !== this.readonly) {
7026
7042
  this.useReadonly();
@@ -7044,8 +7060,8 @@ class TheCodeComponent extends TheBaseElementComponent {
7044
7060
  .subscribe(event => {
7045
7061
  event.stopPropagation();
7046
7062
  const isBlockOperation = this.isCollapsedAndNonReadonly &&
7047
- this.nativeElement.querySelector('.the-code-block-operation').contains(event.target);
7048
- const isCodemirror = this.nativeElement.querySelector('.ng-codemirror').contains(event.target);
7063
+ this.nativeElement.querySelector('.the-code-block-operation')?.contains(event.target);
7064
+ const isCodemirror = this.nativeElement.querySelector('.ng-codemirror')?.contains(event.target);
7049
7065
  this.isHightLight = !isCodemirror && !isBlockOperation;
7050
7066
  });
7051
7067
  });
@@ -7070,6 +7086,45 @@ class TheCodeComponent extends TheBaseElementComponent {
7070
7086
  });
7071
7087
  }
7072
7088
  }
7089
+ openToolbar() {
7090
+ if (!isGlobalCollapsed(this.editor) || this.isToolbarOpen) {
7091
+ return;
7092
+ }
7093
+ this.toolbarPopoverRef = this.thyPopover.open(this.toolbar, {
7094
+ origin: this.elementRef.nativeElement,
7095
+ viewContainerRef: this.viewContainerRef,
7096
+ panelClass: 'the-plugin-toolbar-popover',
7097
+ minWidth: 0,
7098
+ manualClosure: true,
7099
+ hasBackdrop: false,
7100
+ insideClosable: false,
7101
+ outsideClosable: false,
7102
+ scrollStrategy: this.overlay.scrollStrategies.reposition()
7103
+ });
7104
+ this.toolbarPopoverRef?.getOverlayRef().updatePositionStrategy(this.createPositionStrategy());
7105
+ }
7106
+ closeToolbar() {
7107
+ if (this.isToolbarOpen) {
7108
+ this.toolbarPopoverRef.close();
7109
+ }
7110
+ }
7111
+ createPositionStrategy() {
7112
+ const topLeftPosition = {
7113
+ originX: 'start',
7114
+ originY: 'top',
7115
+ overlayX: 'start',
7116
+ overlayY: 'bottom',
7117
+ offsetX: 0,
7118
+ offsetY: -4
7119
+ };
7120
+ return this.overlay
7121
+ .position()
7122
+ .flexibleConnectedTo(this.elementRef.nativeElement)
7123
+ .withFlexibleDimensions(false)
7124
+ .withGrowAfterOpen(false)
7125
+ .withPush(false)
7126
+ .withPositions([topLeftPosition]);
7127
+ }
7073
7128
  renderCodemirror() {
7074
7129
  this.startRenderCodemirror = true;
7075
7130
  this.useReadonly();
@@ -7184,15 +7239,18 @@ class TheCodeComponent extends TheBaseElementComponent {
7184
7239
  this.destroy$.complete();
7185
7240
  }
7186
7241
  }
7187
- TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
7188
- TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<thy-actions\n *ngIf=\"(isCollapsedAndNonReadonly && codemirror) || toolbarDropdownComponent?.isOpen\"\n contenteditable=\"false\"\n class=\"the-code-block-operation\"\n thySize=\"xxs\"\n>\n <the-toolbar-dropdown\n [menus]=\"menus\"\n [toolbarItem]=\"activeLanguage\"\n [dropdownItemKey]=\"activeLanguage?.key\"\n [itemMousedownHandle]=\"onChangeLanguage\"\n >\n </the-toolbar-dropdown>\n <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n <span>\u81EA\u52A8\u6362\u884C</span>\n <thy-switch\n class=\"auto-wrap-btn d-flex ml-1\"\n [(ngModel)]=\"options.lineWrapping\"\n (ngModelChange)=\"onChangeWrap($event)\"\n thySize=\"sm\"\n ></thy-switch>\n </span>\n <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (mousedown)=\"onCopy($event)\"></a>\n <thy-divider class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n thyActionIcon=\"trash\"\n thyTooltip=\"\u5220\u9664\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"onDelete($event)\"\n ></a>\n</thy-actions>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761 -->\n<div\n thyResizable\n [thyMinHeight]=\"46\"\n [thyBounds]=\"resizeBounds\"\n [style.height.px]=\"resizeHeight\"\n (thyResize)=\"onResize($event)\"\n (thyResizeEnd)=\"onEndResize()\"\n class=\"resize-code-container\"\n [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n <ng-codemirror\n *ngIf=\"startRenderCodemirror\"\n #codemirror\n contenteditable=\"false\"\n class=\"ng-codemirror-wrapper\"\n [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n [options]=\"options\"\n [ngModel]=\"code\"\n [delayRefreshTime]=\"300\"\n (ngModelChange)=\"codeChange($event)\"\n (focusChange)=\"focusChange($event)\"\n [autoMaxHeight]=\"maxHeight\"\n >\n </ng-codemirror>\n <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i7.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i7.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i8.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i11$1.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7242
+ TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
7243
+ TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761 -->\n<div\n thyResizable\n [thyMinHeight]=\"46\"\n [thyBounds]=\"resizeBounds\"\n [style.height.px]=\"resizeHeight\"\n (thyResize)=\"onResize($event)\"\n (thyResizeEnd)=\"onEndResize()\"\n class=\"resize-code-container\"\n [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n <ng-codemirror\n *ngIf=\"startRenderCodemirror\"\n #codemirror\n contenteditable=\"false\"\n class=\"ng-codemirror-wrapper\"\n [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n [options]=\"options\"\n [ngModel]=\"code\"\n [delayRefreshTime]=\"300\"\n (ngModelChange)=\"codeChange($event)\"\n (focusChange)=\"focusChange($event)\"\n [autoMaxHeight]=\"maxHeight\"\n >\n </ng-codemirror>\n <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n <thy-actions thySize=\"xxs\">\n <the-toolbar-dropdown\n [menus]=\"menus\"\n [toolbarItem]=\"activeLanguage\"\n [dropdownItemKey]=\"activeLanguage?.key\"\n [itemMousedownHandle]=\"onChangeLanguage\"\n >\n </the-toolbar-dropdown>\n <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n <span>\u81EA\u52A8\u6362\u884C</span>\n <thy-switch\n class=\"auto-wrap-btn d-flex ml-1\"\n [(ngModel)]=\"options.lineWrapping\"\n (ngModelChange)=\"onChangeWrap($event)\"\n thySize=\"sm\"\n ></thy-switch>\n </span>\n <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (mousedown)=\"onCopy($event)\"></a>\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=\"trash\"\n thyTooltip=\"\u5220\u9664\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"onDelete($event)\"\n ></a>\n </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9$1.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i9$1.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7189
7244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, decorators: [{
7190
7245
  type: Component,
7191
- args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<thy-actions\n *ngIf=\"(isCollapsedAndNonReadonly && codemirror) || toolbarDropdownComponent?.isOpen\"\n contenteditable=\"false\"\n class=\"the-code-block-operation\"\n thySize=\"xxs\"\n>\n <the-toolbar-dropdown\n [menus]=\"menus\"\n [toolbarItem]=\"activeLanguage\"\n [dropdownItemKey]=\"activeLanguage?.key\"\n [itemMousedownHandle]=\"onChangeLanguage\"\n >\n </the-toolbar-dropdown>\n <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n <span>\u81EA\u52A8\u6362\u884C</span>\n <thy-switch\n class=\"auto-wrap-btn d-flex ml-1\"\n [(ngModel)]=\"options.lineWrapping\"\n (ngModelChange)=\"onChangeWrap($event)\"\n thySize=\"sm\"\n ></thy-switch>\n </span>\n <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (mousedown)=\"onCopy($event)\"></a>\n <thy-divider class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n <a\n href=\"javascript:;\"\n thyAction\n thyType=\"danger\"\n thyActionIcon=\"trash\"\n thyTooltip=\"\u5220\u9664\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"onDelete($event)\"\n ></a>\n</thy-actions>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761 -->\n<div\n thyResizable\n [thyMinHeight]=\"46\"\n [thyBounds]=\"resizeBounds\"\n [style.height.px]=\"resizeHeight\"\n (thyResize)=\"onResize($event)\"\n (thyResizeEnd)=\"onEndResize()\"\n class=\"resize-code-container\"\n [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n <ng-codemirror\n *ngIf=\"startRenderCodemirror\"\n #codemirror\n contenteditable=\"false\"\n class=\"ng-codemirror-wrapper\"\n [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n [options]=\"options\"\n [ngModel]=\"code\"\n [delayRefreshTime]=\"300\"\n (ngModelChange)=\"codeChange($event)\"\n (focusChange)=\"focusChange($event)\"\n [autoMaxHeight]=\"maxHeight\"\n >\n </ng-codemirror>\n <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n" }]
7246
+ args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761 -->\n<div\n thyResizable\n [thyMinHeight]=\"46\"\n [thyBounds]=\"resizeBounds\"\n [style.height.px]=\"resizeHeight\"\n (thyResize)=\"onResize($event)\"\n (thyResizeEnd)=\"onEndResize()\"\n class=\"resize-code-container\"\n [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n <ng-codemirror\n *ngIf=\"startRenderCodemirror\"\n #codemirror\n contenteditable=\"false\"\n class=\"ng-codemirror-wrapper\"\n [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n [options]=\"options\"\n [ngModel]=\"code\"\n [delayRefreshTime]=\"300\"\n (ngModelChange)=\"codeChange($event)\"\n (focusChange)=\"focusChange($event)\"\n [autoMaxHeight]=\"maxHeight\"\n >\n </ng-codemirror>\n <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n <thy-actions thySize=\"xxs\">\n <the-toolbar-dropdown\n [menus]=\"menus\"\n [toolbarItem]=\"activeLanguage\"\n [dropdownItemKey]=\"activeLanguage?.key\"\n [itemMousedownHandle]=\"onChangeLanguage\"\n >\n </the-toolbar-dropdown>\n <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n <span>\u81EA\u52A8\u6362\u884C</span>\n <thy-switch\n class=\"auto-wrap-btn d-flex ml-1\"\n [(ngModel)]=\"options.lineWrapping\"\n (ngModelChange)=\"onChangeWrap($event)\"\n thySize=\"sm\"\n ></thy-switch>\n </span>\n <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (mousedown)=\"onCopy($event)\"></a>\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=\"trash\"\n thyTooltip=\"\u5220\u9664\"\n thyTooltipPlacement=\"top\"\n (mousedown)=\"onDelete($event)\"\n ></a>\n </thy-actions>\n</ng-template>\n" }]
7192
7247
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: TheModeConfig, decorators: [{
7193
7248
  type: Inject,
7194
7249
  args: [THE_MODE_TOKEN]
7195
- }] }]; }, propDecorators: { codemirror: [{
7250
+ }] }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$2.Overlay }]; }, propDecorators: { toolbar: [{
7251
+ type: ViewChild,
7252
+ args: ['toolbar', { read: TemplateRef, static: true }]
7253
+ }], codemirror: [{
7196
7254
  type: ViewChild,
7197
7255
  args: ['codemirror', { read: CodeMirrorComponent, static: false }]
7198
7256
  }], toolbarDropdownComponent: [{
@@ -7524,7 +7582,7 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
7524
7582
  },
7525
7583
  origin: dom,
7526
7584
  placement: 'bottomLeft',
7527
- offset: 8,
7585
+ offset: 4,
7528
7586
  minWidth: 0,
7529
7587
  hasBackdrop: false,
7530
7588
  outsideClosable: true,
@@ -8630,10 +8688,10 @@ class TheTableToolbarComponent {
8630
8688
  }
8631
8689
  }
8632
8690
  TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
8633
- TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", 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=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></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\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mx-2 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 thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n <thy-divider class=\"mx-2 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: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
8691
+ TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", 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 href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></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\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 thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\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: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5$1.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5$1.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i11.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
8634
8692
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
8635
8693
  type: Component,
8636
- 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=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></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\n <ng-container *ngIf=\"tableStore.isSelectedTable\">\n <thy-divider class=\"mx-2 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 thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n <thy-divider class=\"mx-2 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" }]
8694
+ 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 href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></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\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 thyIconName=\"caret-down\"></thy-icon>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\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" }]
8637
8695
  }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
8638
8696
  type: Input
8639
8697
  }], isFromControls: [{
@@ -8919,12 +8977,12 @@ class TableService {
8919
8977
  viewContainerRef: this.theContextService.getOptions().viewContainerRef,
8920
8978
  origin: this.getOrigin(origin),
8921
8979
  backdropClosable: this.backdropClosable,
8980
+ panelClass: 'the-plugin-toolbar-popover',
8922
8981
  placement: this.placement,
8923
8982
  offset: this.offset,
8924
8983
  hasBackdrop: this.hasBackdrop,
8925
8984
  insideClosable: this.insideClosable,
8926
8985
  minWidth: 0,
8927
- panelClass: 'the-block-toolbar-popover',
8928
8986
  scrollStrategy: this.overlay.scrollStrategies.reposition(),
8929
8987
  manualClosure: true
8930
8988
  });