@worktile/theia 15.1.15 → 15.1.16
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/interfaces/image.mjs +1 -1
- package/esm2020/plugins/image/image.component.mjs +10 -5
- package/fesm2015/worktile-theia.mjs +9 -4
- package/fesm2015/worktile-theia.mjs.map +1 -1
- package/fesm2020/worktile-theia.mjs +9 -4
- package/fesm2020/worktile-theia.mjs.map +1 -1
- package/interfaces/image.d.ts +1 -0
- package/package.json +1 -1
- package/plugins/image/image.component.d.ts +2 -0
|
@@ -8366,8 +8366,13 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8366
8366
|
this.uploadImage(this.fileItem.file);
|
|
8367
8367
|
}
|
|
8368
8368
|
super.ngOnInit();
|
|
8369
|
-
|
|
8370
|
-
this.disablePreview = imagePluginOptions.disablePreview;
|
|
8369
|
+
this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
|
|
8370
|
+
this.disablePreview = this.imagePluginOptions.disablePreview;
|
|
8371
|
+
}
|
|
8372
|
+
click(event) {
|
|
8373
|
+
if (this.imagePluginOptions.preview) {
|
|
8374
|
+
this.imagePluginOptions.preview(event);
|
|
8375
|
+
}
|
|
8371
8376
|
}
|
|
8372
8377
|
onContextChange() {
|
|
8373
8378
|
super.onContextChange();
|
|
@@ -8607,10 +8612,10 @@ class TheImageComponent extends TheBaseElementComponent {
|
|
|
8607
8612
|
}
|
|
8608
8613
|
}
|
|
8609
8614
|
TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i4$1.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8610
|
-
TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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 [thyDisablePreview]=\"disablePreview\"\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: 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: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { 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"] }] });
|
|
8615
|
+
TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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 (click)=\"click($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyDisablePreview]=\"disablePreview\"\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: 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: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { 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"] }] });
|
|
8611
8616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TheImageComponent, decorators: [{
|
|
8612
8617
|
type: Component,
|
|
8613
|
-
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 [thyDisablePreview]=\"disablePreview\"\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" }]
|
|
8618
|
+
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 (click)=\"click($event)\"\n [thySrc]=\"imageEntry.thumbUrl\"\n [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n [thyOriginSrc]=\"imageEntry.originUrl\"\n [thyDisablePreview]=\"disablePreview\"\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" }]
|
|
8614
8619
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
8615
8620
|
type: Inject,
|
|
8616
8621
|
args: [THE_UPLOAD_SERVICE_TOKEN]
|