@progress/kendo-angular-editor 3.0.0 → 3.0.2
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/dist/cdn/js/kendo-angular-editor.js +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/dialogs/colorpicker-dialog.component.js +3 -2
- package/dist/es/editor.component.js +12 -4
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/tools/colorpicker/editor-colorpicker.component.js +6 -1
- package/dist/es2015/dialogs/colorpicker-dialog.component.d.ts +1 -0
- package/dist/es2015/dialogs/colorpicker-dialog.component.js +3 -2
- package/dist/es2015/editor.component.js +12 -4
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/tools/colorpicker/editor-colorpicker.component.js +7 -2
- package/dist/fesm2015/index.js +23 -9
- package/dist/fesm5/index.js +22 -8
- package/dist/npm/dialogs/colorpicker-dialog.component.js +3 -2
- package/dist/npm/editor.component.js +12 -4
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/tools/colorpicker/editor-colorpicker.component.js +6 -1
- package/dist/systemjs/kendo-angular-editor.js +1 -1
- package/package.json +2 -2
- package/schematics/ngAdd/index.js +1 -1
|
@@ -37,6 +37,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
|
|
|
37
37
|
this.editor.exec(this.editorCommand, this.value);
|
|
38
38
|
}
|
|
39
39
|
this.dialog.close();
|
|
40
|
+
this.editor.view.focus();
|
|
40
41
|
};
|
|
41
42
|
ColorPickerDialogComponent.prototype.setData = function (args) {
|
|
42
43
|
this.editor = args.editor;
|
|
@@ -44,7 +45,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
|
|
|
44
45
|
this.editorCommand = args.editorCommand;
|
|
45
46
|
this.paletteSettings = args.paletteSettings;
|
|
46
47
|
this.icon = args.icon;
|
|
47
|
-
this.
|
|
48
|
+
this.views = args.view ? [args.view] : args.views;
|
|
48
49
|
};
|
|
49
50
|
ColorPickerDialogComponent.prototype.textFor = function (key) {
|
|
50
51
|
return this.localization.get(key);
|
|
@@ -59,7 +60,7 @@ var ColorPickerDialogComponent = /** @class */ (function (_super) {
|
|
|
59
60
|
], ColorPickerDialogComponent.prototype, "colorPicker", void 0);
|
|
60
61
|
ColorPickerDialogComponent = tslib_1.__decorate([
|
|
61
62
|
Component({
|
|
62
|
-
template: "\n <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n {{ textFor(editorCommand) }}\n </kendo-dialog-titlebar>\n <div class=\"k-editor-dialog\">\n <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n <kendo-colorpicker\n #colorpicker\n [views]=\"
|
|
63
|
+
template: "\n <kendo-dialog-titlebar (close)=\"onCancelAction()\">\n {{ textFor(editorCommand) }}\n </kendo-dialog-titlebar>\n <div class=\"k-editor-dialog\">\n <div class=\"k-editor-dialog k-popup-edit-form k-window-content k-content\">\n <div class=\"k-edit-form-container k-window-content\" style=\"text-align: center;\">\n <kendo-colorpicker\n #colorpicker\n [views]=\"views\"\n [format]=\"'hex'\"\n [attr.title]=\"title\"\n [icon]=\"icon\"\n [(value)]=\"value\"\n [paletteSettings]=\"paletteSettings\"\n (activeColorClick)=\"handleActiveColorClick($event)\"\n >\n </kendo-colorpicker>\n </div>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"onCancelAction()\">{{ textFor('dialogCancel') }}</button>\n <button kendoButton\n (click)=\"onConfirmAction()\" [primary]=\"true\">{{ textFor('dialogApply') }}</button>\n </kendo-dialog-actions>\n "
|
|
63
64
|
}),
|
|
64
65
|
tslib_1.__metadata("design:paramtypes", [DialogRef,
|
|
65
66
|
EditorLocalizationService])
|
|
@@ -759,22 +759,30 @@ var EditorComponent = /** @class */ (function () {
|
|
|
759
759
|
containerElement = this.container.element.nativeElement;
|
|
760
760
|
}
|
|
761
761
|
this.subs.add(fromEvent(containerElement, 'focusin')
|
|
762
|
-
.subscribe(function () {
|
|
762
|
+
.subscribe(function (e) {
|
|
763
763
|
if (_this.readonly) {
|
|
764
764
|
contentAreaClasslist_1.add('k-focus');
|
|
765
765
|
}
|
|
766
766
|
if (!_this.focusChangedProgrammatically || _this.shouldEmitFocus) {
|
|
767
|
-
|
|
767
|
+
var relatedTarget = e.relatedTarget;
|
|
768
|
+
var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
|
|
769
|
+
if (!isActiveColorButton || _this.shouldEmitFocus) {
|
|
770
|
+
_this.ngZone.run(function () { return _this.onFocus.emit(); });
|
|
771
|
+
}
|
|
768
772
|
_this.shouldEmitFocus = false;
|
|
769
773
|
}
|
|
770
774
|
}));
|
|
771
775
|
this.subs.add(fromEvent(containerElement, 'focusout')
|
|
772
|
-
.subscribe(function () {
|
|
776
|
+
.subscribe(function (e) {
|
|
773
777
|
if (_this.readonly) {
|
|
774
778
|
contentAreaClasslist_1.remove('k-focus');
|
|
775
779
|
}
|
|
776
780
|
if (!_this.focusChangedProgrammatically) {
|
|
777
|
-
|
|
781
|
+
var relatedTarget = e.relatedTarget;
|
|
782
|
+
var isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
|
|
783
|
+
if (!isActiveColorButton) {
|
|
784
|
+
_this.ngZone.run(function () { return _this.onBlur.emit(); });
|
|
785
|
+
}
|
|
778
786
|
}
|
|
779
787
|
}));
|
|
780
788
|
}
|
|
@@ -9,7 +9,7 @@ export var packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-editor',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1643372848,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
15
15
|
};
|
|
@@ -41,6 +41,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
|
|
|
41
41
|
}
|
|
42
42
|
EditorColorPickerComponent_1 = EditorColorPickerComponent;
|
|
43
43
|
Object.defineProperty(EditorColorPickerComponent.prototype, "view", {
|
|
44
|
+
get: function () {
|
|
45
|
+
return (this.views && this.views.length > 0) ? this.views[0] : null;
|
|
46
|
+
},
|
|
44
47
|
/**
|
|
45
48
|
* @hidden
|
|
46
49
|
*
|
|
@@ -79,6 +82,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
|
|
|
79
82
|
*/
|
|
80
83
|
EditorColorPickerComponent.prototype.handleValueChange = function (color) {
|
|
81
84
|
this.editor.exec(this.editorCommand, color);
|
|
85
|
+
this.editor.view.focus();
|
|
82
86
|
};
|
|
83
87
|
/**
|
|
84
88
|
* @hidden
|
|
@@ -102,6 +106,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
|
|
|
102
106
|
if (!picker.value) {
|
|
103
107
|
picker.value = this.valueCache;
|
|
104
108
|
}
|
|
109
|
+
this.editor.shouldEmitFocus = true;
|
|
105
110
|
this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.editor.view.focus(); });
|
|
106
111
|
};
|
|
107
112
|
Object.defineProperty(EditorColorPickerComponent.prototype, "outerWidth", {
|
|
@@ -215,7 +220,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
|
|
|
215
220
|
Component({
|
|
216
221
|
providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return EditorColorPickerComponent_1; }) }],
|
|
217
222
|
selector: 'kendo-toolbar-colorpicker',
|
|
218
|
-
template: "\n <ng-template #toolbarTemplate>\n <kendo-colorpicker\n #colorpicker\n [
|
|
223
|
+
template: "\n <ng-template #toolbarTemplate>\n <kendo-colorpicker\n #colorpicker\n [attr.title]=\"title\"\n [icon]=\"icon\"\n [views]=\"views\"\n [format]=\"'hex'\"\n [value]=\"value\"\n [paletteSettings]=\"paletteSettings\"\n [disabled]=\"disabled\"\n [tabindex]=\"tabindex\"\n (valueChange)=\"handleValueChange($event)\"\n (activeColorClick)=\"handleActiveColorClick($event)\"\n (open)=\"onOpen(colorpicker)\"\n (close)=\"onClose(colorpicker)\"\n >\n </kendo-colorpicker>\n </ng-template>\n <ng-template #popupTemplate>\n <button\n tabindex=\"-1\"\n type=\"button\"\n kendoButton\n #colorPickerButton\n class=\"k-overflow-button\"\n [icon]=\"icon\"\n [attr.title]=\"title\"\n [disabled]=\"disabled\"\n [tabindex]=\"tabindex\"\n (click)=\"openDialog()\"\n >\n {{ title }}\n </button>\n </ng-template>\n "
|
|
219
224
|
}),
|
|
220
225
|
tslib_1.__param(0, Host()),
|
|
221
226
|
tslib_1.__metadata("design:paramtypes", [EditorComponent,
|
|
@@ -20,6 +20,7 @@ export declare class ColorPickerDialogComponent extends DialogContentBase {
|
|
|
20
20
|
paletteSettings: PaletteSettings;
|
|
21
21
|
icon: string;
|
|
22
22
|
view: ColorPickerView;
|
|
23
|
+
views: ColorPickerView[];
|
|
23
24
|
constructor(dialog: DialogRef, localization: EditorLocalizationService);
|
|
24
25
|
ngAfterViewInit(): void;
|
|
25
26
|
handleActiveColorClick(event: ActiveColorClickEvent): void;
|
|
@@ -34,6 +34,7 @@ let ColorPickerDialogComponent = class ColorPickerDialogComponent extends Dialog
|
|
|
34
34
|
this.editor.exec(this.editorCommand, this.value);
|
|
35
35
|
}
|
|
36
36
|
this.dialog.close();
|
|
37
|
+
this.editor.view.focus();
|
|
37
38
|
}
|
|
38
39
|
setData(args) {
|
|
39
40
|
this.editor = args.editor;
|
|
@@ -41,7 +42,7 @@ let ColorPickerDialogComponent = class ColorPickerDialogComponent extends Dialog
|
|
|
41
42
|
this.editorCommand = args.editorCommand;
|
|
42
43
|
this.paletteSettings = args.paletteSettings;
|
|
43
44
|
this.icon = args.icon;
|
|
44
|
-
this.
|
|
45
|
+
this.views = args.view ? [args.view] : args.views;
|
|
45
46
|
}
|
|
46
47
|
textFor(key) {
|
|
47
48
|
return this.localization.get(key);
|
|
@@ -66,7 +67,7 @@ ColorPickerDialogComponent = tslib_1.__decorate([
|
|
|
66
67
|
<div class="k-edit-form-container k-window-content" style="text-align: center;">
|
|
67
68
|
<kendo-colorpicker
|
|
68
69
|
#colorpicker
|
|
69
|
-
[views]="
|
|
70
|
+
[views]="views"
|
|
70
71
|
[format]="'hex'"
|
|
71
72
|
[attr.title]="title"
|
|
72
73
|
[icon]="icon"
|
|
@@ -675,22 +675,30 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
|
|
|
675
675
|
containerElement = this.container.element.nativeElement;
|
|
676
676
|
}
|
|
677
677
|
this.subs.add(fromEvent(containerElement, 'focusin')
|
|
678
|
-
.subscribe(() => {
|
|
678
|
+
.subscribe((e) => {
|
|
679
679
|
if (this.readonly) {
|
|
680
680
|
contentAreaClasslist.add('k-focus');
|
|
681
681
|
}
|
|
682
682
|
if (!this.focusChangedProgrammatically || this.shouldEmitFocus) {
|
|
683
|
-
|
|
683
|
+
const relatedTarget = e.relatedTarget;
|
|
684
|
+
const isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
|
|
685
|
+
if (!isActiveColorButton || this.shouldEmitFocus) {
|
|
686
|
+
this.ngZone.run(() => this.onFocus.emit());
|
|
687
|
+
}
|
|
684
688
|
this.shouldEmitFocus = false;
|
|
685
689
|
}
|
|
686
690
|
}));
|
|
687
691
|
this.subs.add(fromEvent(containerElement, 'focusout')
|
|
688
|
-
.subscribe(() => {
|
|
692
|
+
.subscribe((e) => {
|
|
689
693
|
if (this.readonly) {
|
|
690
694
|
contentAreaClasslist.remove('k-focus');
|
|
691
695
|
}
|
|
692
696
|
if (!this.focusChangedProgrammatically) {
|
|
693
|
-
|
|
697
|
+
const relatedTarget = e.relatedTarget;
|
|
698
|
+
const isActiveColorButton = relatedTarget && relatedTarget.classList.contains('k-colorpicker');
|
|
699
|
+
if (!isActiveColorButton) {
|
|
700
|
+
this.ngZone.run(() => this.onBlur.emit());
|
|
701
|
+
}
|
|
694
702
|
}
|
|
695
703
|
}));
|
|
696
704
|
}
|