@progress/kendo-angular-editor 11.0.0-develop.104 → 11.0.0-develop.106
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/dialogs/file-link-dialog.component.d.ts +2 -2
- package/dialogs/image-dialog.component.d.ts +2 -2
- package/dialogs/source-dialog.component.d.ts +2 -2
- package/editor.component.d.ts +3 -2
- package/editor.module.d.ts +2 -1
- package/esm2020/dialogs/colorpicker-dialog.component.mjs +26 -34
- package/esm2020/dialogs/file-link-dialog.component.mjs +79 -77
- package/esm2020/dialogs/font-family-dialog.component.mjs +20 -28
- package/esm2020/dialogs/font-size-dialog.component.mjs +20 -28
- package/esm2020/dialogs/format-dialog.component.mjs +20 -28
- package/esm2020/dialogs/image-dialog.component.mjs +74 -63
- package/esm2020/dialogs/insert-table-dialog.component.mjs +6 -14
- package/esm2020/dialogs/source-dialog.component.mjs +9 -7
- package/esm2020/editor.component.mjs +29 -9
- package/esm2020/editor.module.mjs +11 -4
- package/esm2020/package-metadata.mjs +1 -1
- package/esm2020/tools/colorpicker/editor-colorpicker.component.mjs +8 -5
- package/esm2020/tools/fontfamily/editor-fontfamily.component.mjs +8 -5
- package/esm2020/tools/fontsize/editor-fontsize.component.mjs +8 -5
- package/esm2020/tools/format/editor-format.component.mjs +8 -5
- package/esm2020/tools/tables/editor-insert-table-button.component.mjs +8 -5
- package/fesm2015/progress-kendo-angular-editor.mjs +332 -321
- package/fesm2020/progress-kendo-angular-editor.mjs +332 -321
- package/package.json +12 -12
- package/tools/colorpicker/editor-colorpicker.component.d.ts +3 -2
- package/tools/fontfamily/editor-fontfamily.component.d.ts +3 -2
- package/tools/fontsize/editor-fontsize.component.d.ts +3 -2
- package/tools/format/editor-format.component.d.ts +3 -2
- package/tools/tables/editor-insert-table-button.component.d.ts +3 -2
|
@@ -51,21 +51,17 @@ FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
51
51
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
52
52
|
{{ textFor('format') }}
|
|
53
53
|
</kendo-dialog-titlebar>
|
|
54
|
-
<div
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
>
|
|
64
|
-
</kendo-editor-format-dropdownlist>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
54
|
+
<div [style.text-align]="'center'">
|
|
55
|
+
<kendo-editor-format-dropdownlist
|
|
56
|
+
#formatDropDownList
|
|
57
|
+
[defaultItem]="defaultItem"
|
|
58
|
+
[data]="data"
|
|
59
|
+
[(value)]="value"
|
|
60
|
+
[itemDisabled]="itemDisabled"
|
|
61
|
+
>
|
|
62
|
+
</kendo-editor-format-dropdownlist>
|
|
67
63
|
</div>
|
|
68
|
-
<kendo-dialog-actions>
|
|
64
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
69
65
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
70
66
|
<button kendoButton
|
|
71
67
|
(click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
|
|
@@ -78,21 +74,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
78
74
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
79
75
|
{{ textFor('format') }}
|
|
80
76
|
</kendo-dialog-titlebar>
|
|
81
|
-
<div
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
>
|
|
91
|
-
</kendo-editor-format-dropdownlist>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
77
|
+
<div [style.text-align]="'center'">
|
|
78
|
+
<kendo-editor-format-dropdownlist
|
|
79
|
+
#formatDropDownList
|
|
80
|
+
[defaultItem]="defaultItem"
|
|
81
|
+
[data]="data"
|
|
82
|
+
[(value)]="value"
|
|
83
|
+
[itemDisabled]="itemDisabled"
|
|
84
|
+
>
|
|
85
|
+
</kendo-editor-format-dropdownlist>
|
|
94
86
|
</div>
|
|
95
|
-
<kendo-dialog-actions>
|
|
87
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
96
88
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
97
89
|
<button kendoButton
|
|
98
90
|
(click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
|
|
@@ -2,18 +2,21 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Input, ViewChild
|
|
5
|
+
import { Component, Input, ViewChild } from '@angular/core';
|
|
6
6
|
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
|
7
7
|
import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
|
|
8
8
|
import { getNodeFromSelection } from '@progress/kendo-editor-common';
|
|
9
9
|
import { safeString } from '../util';
|
|
10
10
|
import { EditorLocalizationService } from '../localization/editor-localization.service';
|
|
11
11
|
import { guid } from '@progress/kendo-angular-common';
|
|
12
|
+
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
|
|
12
13
|
import * as i0 from "@angular/core";
|
|
13
14
|
import * as i1 from "@progress/kendo-angular-dialog";
|
|
14
15
|
import * as i2 from "../localization/editor-localization.service";
|
|
15
|
-
import * as i3 from "@progress/kendo-angular-
|
|
16
|
-
import * as i4 from "@angular
|
|
16
|
+
import * as i3 from "@progress/kendo-angular-label";
|
|
17
|
+
import * as i4 from "@progress/kendo-angular-inputs";
|
|
18
|
+
import * as i5 from "@progress/kendo-angular-buttons";
|
|
19
|
+
import * as i6 from "@angular/forms";
|
|
17
20
|
/**
|
|
18
21
|
* @hidden
|
|
19
22
|
*/
|
|
@@ -47,7 +50,7 @@ export class ImageDialogComponent extends DialogContentBase {
|
|
|
47
50
|
}
|
|
48
51
|
ngAfterViewInit() {
|
|
49
52
|
Promise.resolve(null).then(() => {
|
|
50
|
-
this.srcInput.
|
|
53
|
+
this.srcInput.focus();
|
|
51
54
|
});
|
|
52
55
|
}
|
|
53
56
|
onCancelAction() {
|
|
@@ -85,46 +88,50 @@ export class ImageDialogComponent extends DialogContentBase {
|
|
|
85
88
|
}
|
|
86
89
|
}
|
|
87
90
|
ImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
-
ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true
|
|
91
|
+
ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
89
92
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
90
93
|
{{ textFor('insertImage') }}
|
|
91
94
|
</kendo-dialog-titlebar>
|
|
92
|
-
<div class="k-
|
|
93
|
-
<div class="k-
|
|
94
|
-
<div class="k-
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
95
|
+
<div class="k-form k-form-md k-form-horizontal">
|
|
96
|
+
<div class="k-form-field">
|
|
97
|
+
<div class="k-form-label">
|
|
98
|
+
<kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="k-form-field-wrap">
|
|
101
|
+
<kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="k-form-field">
|
|
105
|
+
<div class="k-form-label">
|
|
106
|
+
<kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="k-form-field-wrap">
|
|
109
|
+
<kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="k-form-field">
|
|
113
|
+
<div class="k-form-label">
|
|
114
|
+
<kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="k-form-field-wrap">
|
|
117
|
+
<kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="k-form-field">
|
|
121
|
+
<div class="k-form-label">
|
|
122
|
+
<kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="k-form-field-wrap">
|
|
125
|
+
<kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
|
|
119
126
|
</div>
|
|
120
127
|
</div>
|
|
121
128
|
</div>
|
|
122
|
-
<kendo-dialog-actions>
|
|
129
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
123
130
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
124
131
|
<button kendoButton [disabled]="imageData.invalid"
|
|
125
132
|
(click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
|
|
126
133
|
</kendo-dialog-actions>
|
|
127
|
-
`, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type:
|
|
134
|
+
`, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
128
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, decorators: [{
|
|
129
136
|
type: Component,
|
|
130
137
|
args: [{
|
|
@@ -132,37 +139,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
132
139
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
133
140
|
{{ textFor('insertImage') }}
|
|
134
141
|
</kendo-dialog-titlebar>
|
|
135
|
-
<div class="k-
|
|
136
|
-
<div class="k-
|
|
137
|
-
<div class="k-
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
142
|
+
<div class="k-form k-form-md k-form-horizontal">
|
|
143
|
+
<div class="k-form-field">
|
|
144
|
+
<div class="k-form-label">
|
|
145
|
+
<kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="k-form-field-wrap">
|
|
148
|
+
<kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="k-form-field">
|
|
152
|
+
<div class="k-form-label">
|
|
153
|
+
<kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="k-form-field-wrap">
|
|
156
|
+
<kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="k-form-field">
|
|
160
|
+
<div class="k-form-label">
|
|
161
|
+
<kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="k-form-field-wrap">
|
|
164
|
+
<kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="k-form-field">
|
|
168
|
+
<div class="k-form-label">
|
|
169
|
+
<kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="k-form-field-wrap">
|
|
172
|
+
<kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
|
|
162
173
|
</div>
|
|
163
174
|
</div>
|
|
164
175
|
</div>
|
|
165
|
-
<kendo-dialog-actions>
|
|
176
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
166
177
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
167
178
|
<button kendoButton [disabled]="imageData.invalid"
|
|
168
179
|
(click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
|
|
@@ -173,5 +184,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
173
184
|
type: Input
|
|
174
185
|
}], srcInput: [{
|
|
175
186
|
type: ViewChild,
|
|
176
|
-
args: ['srcInput'
|
|
187
|
+
args: ['srcInput']
|
|
177
188
|
}] } });
|
|
@@ -41,14 +41,10 @@ InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
|
|
|
41
41
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
42
42
|
{{ textFor('insertTable') }}
|
|
43
43
|
</kendo-dialog-titlebar>
|
|
44
|
-
<div
|
|
45
|
-
<
|
|
46
|
-
<div class="k-ct-popup k-window-content" [style.text-align]="'center'">
|
|
47
|
-
<kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
44
|
+
<div [style.text-align]="'center'">
|
|
45
|
+
<kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
|
|
50
46
|
</div>
|
|
51
|
-
<kendo-dialog-actions>
|
|
47
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
52
48
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
53
49
|
</kendo-dialog-actions>
|
|
54
50
|
`, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
@@ -59,14 +55,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
59
55
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
60
56
|
{{ textFor('insertTable') }}
|
|
61
57
|
</kendo-dialog-titlebar>
|
|
62
|
-
<div
|
|
63
|
-
<
|
|
64
|
-
<div class="k-ct-popup k-window-content" [style.text-align]="'center'">
|
|
65
|
-
<kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
58
|
+
<div [style.text-align]="'center'">
|
|
59
|
+
<kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
|
|
68
60
|
</div>
|
|
69
|
-
<kendo-dialog-actions>
|
|
61
|
+
<kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
|
|
70
62
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
71
63
|
</kendo-dialog-actions>
|
|
72
64
|
`
|
|
@@ -2,14 +2,16 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ViewChild,
|
|
5
|
+
import { Component, ViewChild, Input } from '@angular/core';
|
|
6
6
|
// import { EditorService } from '../editor.service';
|
|
7
7
|
import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
|
|
8
|
+
import { TextAreaComponent } from '@progress/kendo-angular-inputs';
|
|
8
9
|
import { EditorLocalizationService } from '../localization/editor-localization.service';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
import * as i1 from "@progress/kendo-angular-dialog";
|
|
11
12
|
import * as i2 from "../localization/editor-localization.service";
|
|
12
|
-
import * as i3 from "@progress/kendo-angular-
|
|
13
|
+
import * as i3 from "@progress/kendo-angular-inputs";
|
|
14
|
+
import * as i4 from "@progress/kendo-angular-buttons";
|
|
13
15
|
/**
|
|
14
16
|
* @hidden
|
|
15
17
|
*/
|
|
@@ -22,7 +24,7 @@ export class SourceDialogComponent extends DialogContentBase {
|
|
|
22
24
|
}
|
|
23
25
|
ngAfterViewInit() {
|
|
24
26
|
Promise.resolve(null).then(() => {
|
|
25
|
-
this.textarea.
|
|
27
|
+
this.textarea.focus();
|
|
26
28
|
});
|
|
27
29
|
}
|
|
28
30
|
onCancelAction() {
|
|
@@ -34,7 +36,7 @@ export class SourceDialogComponent extends DialogContentBase {
|
|
|
34
36
|
this.editor.view.focus();
|
|
35
37
|
}
|
|
36
38
|
getData() {
|
|
37
|
-
return this.textarea.
|
|
39
|
+
return this.textarea.value;
|
|
38
40
|
}
|
|
39
41
|
setData() {
|
|
40
42
|
this.data = this.indent(this.editor.getSource());
|
|
@@ -55,12 +57,12 @@ SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
55
57
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
56
58
|
{{ textFor('viewSource') }}
|
|
57
59
|
</kendo-dialog-titlebar>
|
|
58
|
-
<textarea [value]="data" #textarea
|
|
60
|
+
<kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
|
|
59
61
|
<kendo-dialog-actions>
|
|
60
62
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
61
63
|
<button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
|
|
62
64
|
</kendo-dialog-actions>
|
|
63
|
-
`, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type:
|
|
65
|
+
`, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
64
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SourceDialogComponent, decorators: [{
|
|
65
67
|
type: Component,
|
|
66
68
|
args: [{
|
|
@@ -68,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
68
70
|
<kendo-dialog-titlebar (close)="onCancelAction()">
|
|
69
71
|
{{ textFor('viewSource') }}
|
|
70
72
|
</kendo-dialog-titlebar>
|
|
71
|
-
<textarea [value]="data" #textarea
|
|
73
|
+
<kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
|
|
72
74
|
<kendo-dialog-actions>
|
|
73
75
|
<button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
|
|
74
76
|
<button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, ViewChild, ContentChild, ViewContainerRef, Output, ElementRef, EventEmitter, forwardRef, Input, ChangeDetectorRef, NgZone, isDevMode } from '@angular/core';
|
|
5
|
+
import { Component, HostBinding, ViewChild, ContentChild, ViewContainerRef, Output, ElementRef, EventEmitter, forwardRef, Input, ChangeDetectorRef, NgZone, isDevMode, Renderer2 } from '@angular/core';
|
|
6
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { BehaviorSubject, fromEvent, Subject, zip } from 'rxjs';
|
|
8
8
|
import { map, filter, take } from 'rxjs/operators';
|
|
@@ -75,7 +75,7 @@ const getPasteCleanupAttributes = (config) => {
|
|
|
75
75
|
* Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
|
|
76
76
|
*/
|
|
77
77
|
export class EditorComponent {
|
|
78
|
-
constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService) {
|
|
78
|
+
constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
|
|
79
79
|
this.dialogService = dialogService;
|
|
80
80
|
this.localization = localization;
|
|
81
81
|
this.cdr = cdr;
|
|
@@ -83,6 +83,7 @@ export class EditorComponent {
|
|
|
83
83
|
this.element = element;
|
|
84
84
|
this.providerService = providerService;
|
|
85
85
|
this.toolsService = toolsService;
|
|
86
|
+
this.renderer = renderer;
|
|
86
87
|
/**
|
|
87
88
|
* If set to `false`, the Editor will run in style non-encapsulated mode. This means
|
|
88
89
|
* that the styles of the page will be persisted in the Editor and its content will be affected by them.
|
|
@@ -426,6 +427,9 @@ export class EditorComponent {
|
|
|
426
427
|
if (this.resizable) {
|
|
427
428
|
this.normalizeSize();
|
|
428
429
|
}
|
|
430
|
+
if (this.userToolBarComponent) {
|
|
431
|
+
this.renderer.addClass(this.userToolBarComponent.element.nativeElement, 'k-editor-toolbar');
|
|
432
|
+
}
|
|
429
433
|
this.toolbar.onResize();
|
|
430
434
|
}
|
|
431
435
|
ngOnChanges(changes) {
|
|
@@ -541,13 +545,16 @@ export class EditorComponent {
|
|
|
541
545
|
openDialog(dialogName) {
|
|
542
546
|
const editorDialogs = {
|
|
543
547
|
createLink: {
|
|
544
|
-
content: FileLinkDialogComponent
|
|
548
|
+
content: FileLinkDialogComponent,
|
|
549
|
+
width: 400
|
|
545
550
|
},
|
|
546
551
|
insertFile: {
|
|
547
|
-
content: FileLinkDialogComponent
|
|
552
|
+
content: FileLinkDialogComponent,
|
|
553
|
+
width: 400
|
|
548
554
|
},
|
|
549
555
|
insertImage: {
|
|
550
|
-
content: ImageDialogComponent
|
|
556
|
+
content: ImageDialogComponent,
|
|
557
|
+
width: 400
|
|
551
558
|
},
|
|
552
559
|
viewSource: {
|
|
553
560
|
content: SourceDialogComponent,
|
|
@@ -561,6 +568,7 @@ export class EditorComponent {
|
|
|
561
568
|
const dialog = Object.assign({ appendTo: this.dialogContainer }, editorDialogs[dialogName]);
|
|
562
569
|
this.toolbar.toggle(false);
|
|
563
570
|
const dialogContent = this.dialogService.open(dialog).content.instance;
|
|
571
|
+
this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
|
|
564
572
|
if (dialogName === 'createLink' || dialogName === 'insertFile') {
|
|
565
573
|
dialogContent.command = dialogName;
|
|
566
574
|
}
|
|
@@ -828,7 +836,7 @@ export class EditorComponent {
|
|
|
828
836
|
}
|
|
829
837
|
;
|
|
830
838
|
}
|
|
831
|
-
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
839
|
+
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
832
840
|
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorComponent, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "class.k-ie": "this.isIE", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
|
|
833
841
|
EditorLocalizationService,
|
|
834
842
|
ProviderService,
|
|
@@ -966,7 +974,13 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
966
974
|
>
|
|
967
975
|
</ng-container>
|
|
968
976
|
<ng-content select="kendo-toolbar"></ng-content>
|
|
969
|
-
<kendo-toolbar
|
|
977
|
+
<kendo-toolbar
|
|
978
|
+
#defaultToolbar
|
|
979
|
+
*ngIf="!userToolBarElement"
|
|
980
|
+
class="k-editor-toolbar"
|
|
981
|
+
[overflow]="true"
|
|
982
|
+
[tabindex]="readonly ? -1 : 0"
|
|
983
|
+
>
|
|
970
984
|
<kendo-toolbar-buttongroup>
|
|
971
985
|
<kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
|
|
972
986
|
<kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
|
|
@@ -1142,7 +1156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1142
1156
|
>
|
|
1143
1157
|
</ng-container>
|
|
1144
1158
|
<ng-content select="kendo-toolbar"></ng-content>
|
|
1145
|
-
<kendo-toolbar
|
|
1159
|
+
<kendo-toolbar
|
|
1160
|
+
#defaultToolbar
|
|
1161
|
+
*ngIf="!userToolBarElement"
|
|
1162
|
+
class="k-editor-toolbar"
|
|
1163
|
+
[overflow]="true"
|
|
1164
|
+
[tabindex]="readonly ? -1 : 0"
|
|
1165
|
+
>
|
|
1146
1166
|
<kendo-toolbar-buttongroup>
|
|
1147
1167
|
<kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
|
|
1148
1168
|
<kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
|
|
@@ -1177,7 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1177
1197
|
<ng-container #dialogsContainer></ng-container>
|
|
1178
1198
|
`
|
|
1179
1199
|
}]
|
|
1180
|
-
}], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; }, propDecorators: { value: [{
|
|
1200
|
+
}], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.ProviderService }, { type: i4.EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
|
|
1181
1201
|
type: Input
|
|
1182
1202
|
}], disabled: [{
|
|
1183
1203
|
type: Input
|
|
@@ -9,7 +9,8 @@ import { ToolBarModule } from '@progress/kendo-angular-toolbar';
|
|
|
9
9
|
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
|
|
10
10
|
import { DialogModule } from '@progress/kendo-angular-dialog';
|
|
11
11
|
import { ButtonModule } from '@progress/kendo-angular-buttons';
|
|
12
|
-
import { NumericTextBoxModule, TextBoxModule, ColorPickerModule, CheckBoxModule } from '@progress/kendo-angular-inputs';
|
|
12
|
+
import { NumericTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerModule, CheckBoxModule } from '@progress/kendo-angular-inputs';
|
|
13
|
+
import { LabelModule } from "@progress/kendo-angular-label";
|
|
13
14
|
import { EditorComponent } from './editor.component';
|
|
14
15
|
import { ImageDialogComponent } from './dialogs/image-dialog.component';
|
|
15
16
|
import { SourceDialogComponent } from './dialogs/source-dialog.component';
|
|
@@ -285,7 +286,9 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
|
|
|
285
286
|
NumericTextBoxModule,
|
|
286
287
|
CheckBoxModule,
|
|
287
288
|
ToolBarModule,
|
|
288
|
-
TextBoxModule
|
|
289
|
+
TextBoxModule,
|
|
290
|
+
TextAreaModule,
|
|
291
|
+
LabelModule], exports: [EditorComponent,
|
|
289
292
|
//alignment
|
|
290
293
|
EditorAlignLeftButtonDirective,
|
|
291
294
|
EditorAlignCenterButtonDirective,
|
|
@@ -365,7 +368,9 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
|
365
368
|
NumericTextBoxModule,
|
|
366
369
|
CheckBoxModule,
|
|
367
370
|
ToolBarModule,
|
|
368
|
-
TextBoxModule
|
|
371
|
+
TextBoxModule,
|
|
372
|
+
TextAreaModule,
|
|
373
|
+
LabelModule
|
|
369
374
|
], ToolBarModule,
|
|
370
375
|
ButtonModule,
|
|
371
376
|
FormsModule,
|
|
@@ -406,7 +411,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
406
411
|
NumericTextBoxModule,
|
|
407
412
|
CheckBoxModule,
|
|
408
413
|
ToolBarModule,
|
|
409
|
-
TextBoxModule
|
|
414
|
+
TextBoxModule,
|
|
415
|
+
TextAreaModule,
|
|
416
|
+
LabelModule
|
|
410
417
|
]
|
|
411
418
|
}]
|
|
412
419
|
}] });
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-editor',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1673542332,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
// eslint-disable no-forward-ref
|
|
6
|
-
import { Component, Input, forwardRef, ViewChild, ElementRef, TemplateRef, NgZone } from '@angular/core';
|
|
6
|
+
import { Component, Input, forwardRef, ViewChild, ElementRef, TemplateRef, NgZone, Renderer2 } from '@angular/core';
|
|
7
7
|
import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
|
|
8
8
|
import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
|
|
9
9
|
import { EditorLocalizationService } from '../../localization/editor-localization.service';
|
|
@@ -24,11 +24,12 @@ import * as i5 from "@angular/common";
|
|
|
24
24
|
* foreground or the background color of the text, use the `kendoEditorForeColor` or `kendoEditorBackColor` directive.
|
|
25
25
|
*/
|
|
26
26
|
export class EditorColorPickerComponent extends ToolBarToolComponent {
|
|
27
|
-
constructor(localization, dialogService, ngZone, providerService) {
|
|
27
|
+
constructor(localization, dialogService, ngZone, providerService, renderer) {
|
|
28
28
|
super();
|
|
29
29
|
this.localization = localization;
|
|
30
30
|
this.dialogService = dialogService;
|
|
31
31
|
this.ngZone = ngZone;
|
|
32
|
+
this.renderer = renderer;
|
|
32
33
|
this.tabindex = -1;
|
|
33
34
|
/**
|
|
34
35
|
* Specifies if the component should be disabled.
|
|
@@ -124,10 +125,12 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
|
|
|
124
125
|
openDialog() {
|
|
125
126
|
const dialogSettings = {
|
|
126
127
|
appendTo: this.editor.dialogContainer,
|
|
127
|
-
content: ColorPickerDialogComponent
|
|
128
|
+
content: ColorPickerDialogComponent,
|
|
129
|
+
width: 400
|
|
128
130
|
};
|
|
129
131
|
this.editor.toolbar.toggle(false);
|
|
130
132
|
const dialogContent = this.dialogService.open(dialogSettings).content.instance;
|
|
133
|
+
this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
|
|
131
134
|
dialogContent.setData({
|
|
132
135
|
editor: this.editor,
|
|
133
136
|
value: this.value,
|
|
@@ -170,7 +173,7 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
|
|
|
170
173
|
return `k-icon k-i-${this.icon}`;
|
|
171
174
|
}
|
|
172
175
|
}
|
|
173
|
-
EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.DialogService }, { token: i0.NgZone }, { token: i3.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
+
EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.DialogService }, { token: i0.NgZone }, { token: i3.ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
174
177
|
EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
|
|
175
178
|
<ng-template #toolbarTemplate>
|
|
176
179
|
<kendo-colorpicker
|
|
@@ -249,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
249
252
|
</ng-template>
|
|
250
253
|
`
|
|
251
254
|
}]
|
|
252
|
-
}], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.DialogService }, { type: i0.NgZone }, { type: i3.ProviderService }]; }, propDecorators: { value: [{
|
|
255
|
+
}], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.DialogService }, { type: i0.NgZone }, { type: i3.ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
|
|
253
256
|
type: Input
|
|
254
257
|
}], icon: [{
|
|
255
258
|
type: Input
|