@progress/kendo-angular-editor 11.0.0-develop.102 → 11.0.0-develop.103

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.
Files changed (13) hide show
  1. package/esm2020/editor.component.mjs +2 -1
  2. package/esm2020/package-metadata.mjs +1 -1
  3. package/esm2020/tools/colorpicker/editor-colorpicker.component.mjs +35 -31
  4. package/esm2020/tools/fontfamily/editor-fontfamily.component.mjs +24 -26
  5. package/esm2020/tools/fontsize/editor-fontsize.component.mjs +24 -26
  6. package/esm2020/tools/format/editor-format.component.mjs +24 -28
  7. package/esm2020/tools/shared/editor-command-button.mjs +10 -2
  8. package/esm2020/tools/shared/editor-command-dialog.mjs +10 -2
  9. package/esm2020/tools/tables/editor-insert-table-button.component.mjs +22 -17
  10. package/fesm2015/progress-kendo-angular-editor.mjs +148 -130
  11. package/fesm2020/progress-kendo-angular-editor.mjs +147 -130
  12. package/package.json +12 -12
  13. package/tools/colorpicker/editor-colorpicker.component.d.ts +4 -0
package/esm2020/editor.component.mjs CHANGED
@@ -426,6 +426,7 @@ export class EditorComponent {
426
426
  if (this.resizable) {
427
427
  this.normalizeSize();
428
428
  }
429
+ this.toolbar.onResize();
429
430
  }
430
431
  ngOnChanges(changes) {
431
432
  if (changes['value'] && this.view) {
@@ -998,7 +999,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
998
999
  </div>
999
1000
 
1000
1001
  <ng-container #dialogsContainer></ng-container>
1001
- `, isInline: true, components: [{ type: i5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i10.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i11.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i12.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i13.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i14.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i15.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i16.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i17.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i18.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i19.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i20.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i21.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i22.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
1002
+ `, isInline: true, components: [{ type: i5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i10.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i11.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i12.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i13.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i14.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i15.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i16.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i17.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i18.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i19.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i20.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i21.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i22.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
1002
1003
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, decorators: [{
1003
1004
  type: Component,
1004
1005
  args: [{
package/esm2020/package-metadata.mjs CHANGED
@@ -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: 1673519270,
12
+ publishDate: 1673523577,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/tools/colorpicker/editor-colorpicker.component.mjs CHANGED
@@ -17,7 +17,7 @@ import * as i1 from "../../localization/editor-localization.service";
17
17
  import * as i2 from "@progress/kendo-angular-dialog";
18
18
  import * as i3 from "../../common/provider.service";
19
19
  import * as i4 from "@progress/kendo-angular-inputs";
20
- import * as i5 from "@progress/kendo-angular-buttons";
20
+ import * as i5 from "@angular/common";
21
21
  /**
22
22
  * A component which configures an existing ColorPickerComponent as a ToolBar tool.
23
23
  * To associate a `kendo-toolbar-colorpicker` with an Editor command that changes the
@@ -150,10 +150,10 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
150
150
  focus() {
151
151
  this.tabindex = 0;
152
152
  if (this.overflows) {
153
- this.colorPickerButton.nativeElement.focus();
153
+ this.colorPickerButton?.nativeElement.focus();
154
154
  }
155
155
  else {
156
- !this.colorPicker.isOpen && this.colorPicker.focus();
156
+ !this.colorPicker.isOpen && this.colorPicker?.focus();
157
157
  }
158
158
  }
159
159
  /**
@@ -163,6 +163,12 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
163
163
  this.tabindex = -1;
164
164
  return false;
165
165
  }
166
+ /**
167
+ * @hidden
168
+ */
169
+ getIconClasses() {
170
+ return `k-icon k-i-${this.icon}`;
171
+ }
166
172
  }
167
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 });
168
174
  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: `
@@ -186,22 +192,21 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
186
192
  </kendo-colorpicker>
187
193
  </ng-template>
188
194
  <ng-template #popupTemplate>
189
- <button
195
+ <div #colorPickerButton
190
196
  tabindex="-1"
191
- type="button"
192
- kendoButton
193
- #colorPickerButton
194
- class="k-overflow-button"
195
- [icon]="icon"
196
- [attr.title]="title"
197
- [disabled]="disabled"
197
+ role="menuitem"
198
+ class="k-item k-menu-item"
199
+ [class.k-disabled]="disabled"
198
200
  [tabindex]="tabindex"
199
- (click)="openDialog()"
200
- >
201
- {{ title }}
202
- </button>
201
+ (click)="openDialog()">
202
+ <span
203
+ class="k-link k-menu-link">
204
+ <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
205
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
206
+ </span>
207
+ </div>
203
208
  </ng-template>
204
- `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { 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"] }] });
209
+ `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
205
210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
206
211
  type: Component,
207
212
  args: [{
@@ -228,20 +233,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
228
233
  </kendo-colorpicker>
229
234
  </ng-template>
230
235
  <ng-template #popupTemplate>
231
- <button
236
+ <div #colorPickerButton
232
237
  tabindex="-1"
233
- type="button"
234
- kendoButton
235
- #colorPickerButton
236
- class="k-overflow-button"
237
- [icon]="icon"
238
- [attr.title]="title"
239
- [disabled]="disabled"
238
+ role="menuitem"
239
+ class="k-item k-menu-item"
240
+ [class.k-disabled]="disabled"
240
241
  [tabindex]="tabindex"
241
- (click)="openDialog()"
242
- >
243
- {{ title }}
244
- </button>
242
+ (click)="openDialog()">
243
+ <span
244
+ class="k-link k-menu-link">
245
+ <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
246
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
247
+ </span>
248
+ </div>
245
249
  </ng-template>
246
250
  `
247
251
  }]
@@ -267,11 +271,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
267
271
  args: ['popupTemplate', { static: true }]
268
272
  }], element: [{
269
273
  type: ViewChild,
270
- args: ['colorpicker', { read: ElementRef, static: false }]
274
+ args: ['colorpicker', { read: ElementRef }]
271
275
  }], colorPicker: [{
272
276
  type: ViewChild,
273
- args: ['colorpicker', { read: ColorPickerComponent, static: false }]
277
+ args: ['colorpicker', { read: ColorPickerComponent }]
274
278
  }], colorPickerButton: [{
275
279
  type: ViewChild,
276
- args: ['colorPickerButton', { read: ElementRef, static: false }]
280
+ args: ['colorPickerButton', { read: ElementRef }]
277
281
  }] } });
package/esm2020/tools/fontfamily/editor-fontfamily.component.mjs CHANGED
@@ -17,7 +17,7 @@ import * as i2 from "../../localization/editor-localization.service";
17
17
  import * as i3 from "../../common/provider.service";
18
18
  import * as i4 from "../tools.service";
19
19
  import * as i5 from "./editor-fontfamily-dropdownlist.component";
20
- import * as i6 from "@progress/kendo-angular-buttons";
20
+ import * as i6 from "@angular/common";
21
21
  /**
22
22
  * A component which configures an existing `DropDownListComponent` as an Editor tool
23
23
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -168,22 +168,21 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
168
168
  </kendo-editor-fontfamily-dropdownlist>
169
169
  </ng-template>
170
170
  <ng-template #popupTemplate>
171
- <button
171
+ <div #fontFamilyButton
172
172
  tabindex="-1"
173
- type="button"
174
- kendoButton
175
- #fontFamilyButton
176
- class="k-overflow-button"
177
- [icon]="'font-family'"
178
- [attr.title]="title"
179
- [disabled]="disabled"
173
+ role="menuitem"
174
+ class="k-item k-menu-item"
175
+ [class.k-disabled]="disabled"
180
176
  [tabindex]="tabindex"
181
- (click)="openDialog()"
182
- >
183
- {{ title }}
184
- </button>
177
+ (click)="openDialog()">
178
+ <span
179
+ class="k-link k-menu-link">
180
+ <span class="k-icon k-i-font-family"></span>
181
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
182
+ </span>
183
+ </div>
185
184
  </ng-template>
186
- `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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"] }] });
185
+ `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
187
186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
188
187
  type: Component,
189
188
  args: [{
@@ -205,20 +204,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
205
204
  </kendo-editor-fontfamily-dropdownlist>
206
205
  </ng-template>
207
206
  <ng-template #popupTemplate>
208
- <button
207
+ <div #fontFamilyButton
209
208
  tabindex="-1"
210
- type="button"
211
- kendoButton
212
- #fontFamilyButton
213
- class="k-overflow-button"
214
- [icon]="'font-family'"
215
- [attr.title]="title"
216
- [disabled]="disabled"
209
+ role="menuitem"
210
+ class="k-item k-menu-item"
211
+ [class.k-disabled]="disabled"
217
212
  [tabindex]="tabindex"
218
- (click)="openDialog()"
219
- >
220
- {{ title }}
221
- </button>
213
+ (click)="openDialog()">
214
+ <span
215
+ class="k-link k-menu-link">
216
+ <span class="k-icon k-i-font-family"></span>
217
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
218
+ </span>
219
+ </div>
222
220
  </ng-template>
223
221
  `
224
222
  }]
package/esm2020/tools/fontsize/editor-fontsize.component.mjs CHANGED
@@ -17,7 +17,7 @@ import * as i2 from "../../localization/editor-localization.service";
17
17
  import * as i3 from "../../common/provider.service";
18
18
  import * as i4 from "../tools.service";
19
19
  import * as i5 from "./editor-fontsize-dropdownlist.component";
20
- import * as i6 from "@progress/kendo-angular-buttons";
20
+ import * as i6 from "@angular/common";
21
21
  /**
22
22
  * A component which configures an existing `DropDownListComponent` as an Editor tool
23
23
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -177,22 +177,21 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
177
177
  </kendo-editor-fontsize-dropdownlist>
178
178
  </ng-template>
179
179
  <ng-template #popupTemplate>
180
- <button
180
+ <div #fontSizeButton
181
181
  tabindex="-1"
182
- type="button"
183
- kendoButton
184
- #fontSizeButton
185
- class="k-overflow-button"
186
- [icon]="'font-size'"
187
- [attr.title]="title"
188
- [disabled]="disabled"
182
+ role="menuitem"
183
+ class="k-item k-menu-item"
184
+ [class.k-disabled]="disabled"
189
185
  [tabindex]="tabindex"
190
- (click)="openDialog()"
191
- >
192
- {{ title }}
193
- </button>
186
+ (click)="openDialog()">
187
+ <span
188
+ class="k-link k-menu-link">
189
+ <span class="k-icon k-i-font-size"></span>
190
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
191
+ </span>
192
+ </div>
194
193
  </ng-template>
195
- `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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"] }] });
194
+ `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
196
195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
197
196
  type: Component,
198
197
  args: [{
@@ -214,20 +213,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
214
213
  </kendo-editor-fontsize-dropdownlist>
215
214
  </ng-template>
216
215
  <ng-template #popupTemplate>
217
- <button
216
+ <div #fontSizeButton
218
217
  tabindex="-1"
219
- type="button"
220
- kendoButton
221
- #fontSizeButton
222
- class="k-overflow-button"
223
- [icon]="'font-size'"
224
- [attr.title]="title"
225
- [disabled]="disabled"
218
+ role="menuitem"
219
+ class="k-item k-menu-item"
220
+ [class.k-disabled]="disabled"
226
221
  [tabindex]="tabindex"
227
- (click)="openDialog()"
228
- >
229
- {{ title }}
230
- </button>
222
+ (click)="openDialog()">
223
+ <span
224
+ class="k-link k-menu-link">
225
+ <span class="k-icon k-i-font-size"></span>
226
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
227
+ </span>
228
+ </div>
231
229
  </ng-template>
232
230
  `
233
231
  }]
package/esm2020/tools/format/editor-format.component.mjs CHANGED
@@ -17,7 +17,7 @@ import * as i2 from "../../localization/editor-localization.service";
17
17
  import * as i3 from "../../common/provider.service";
18
18
  import * as i4 from "../tools.service";
19
19
  import * as i5 from "./editor-format-dropdownlist.component";
20
- import * as i6 from "@progress/kendo-angular-buttons";
20
+ import * as i6 from "@angular/common";
21
21
  /**
22
22
  * A component which configures an existing `DropDownListComponent` as an Editor tool
23
23
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -165,22 +165,20 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
165
165
  </kendo-editor-format-dropdownlist>
166
166
  </ng-template>
167
167
  <ng-template #popupTemplate>
168
- <button
169
- #formatButton
168
+ <div #formatButton
169
+ role="menuitem"
170
+ class="k-item k-menu-item"
171
+ [class.k-disabled]="disabled"
170
172
  [tabindex]="tabindex"
171
- type="button"
172
- kendoButton
173
- class="k-overflow-button"
174
- [icon]="'apply-format'"
175
- [attr.title]="title"
176
- [disabled]="disabled"
177
- [tabindex]="tabindex"
178
- (click)="openDialog()"
179
- >
180
- {{ title }}
181
- </button>
173
+ (click)="openDialog()">
174
+ <span
175
+ class="k-link k-menu-link">
176
+ <span class="k-icon k-i-apply-format"></span>
177
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
178
+ </span>
179
+ </div>
182
180
  </ng-template>
183
- `, isInline: true, components: [{ type: i5.FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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"] }] });
181
+ `, isInline: true, components: [{ type: i5.FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
184
182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, decorators: [{
185
183
  type: Component,
186
184
  args: [{
@@ -202,20 +200,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
202
200
  </kendo-editor-format-dropdownlist>
203
201
  </ng-template>
204
202
  <ng-template #popupTemplate>
205
- <button
206
- #formatButton
203
+ <div #formatButton
204
+ role="menuitem"
205
+ class="k-item k-menu-item"
206
+ [class.k-disabled]="disabled"
207
207
  [tabindex]="tabindex"
208
- type="button"
209
- kendoButton
210
- class="k-overflow-button"
211
- [icon]="'apply-format'"
212
- [attr.title]="title"
213
- [disabled]="disabled"
214
- [tabindex]="tabindex"
215
- (click)="openDialog()"
216
- >
217
- {{ title }}
218
- </button>
208
+ (click)="openDialog()">
209
+ <span
210
+ class="k-link k-menu-link">
211
+ <span class="k-icon k-i-apply-format"></span>
212
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
213
+ </span>
214
+ </div>
219
215
  </ng-template>
220
216
  `
221
217
  }]
package/esm2020/tools/shared/editor-command-button.mjs CHANGED
@@ -23,7 +23,15 @@ export class EditorCommandButton extends EditorCommandBaseDirective {
23
23
  e.preventDefault();
24
24
  }
25
25
  onStateChange(toolBarState) {
26
- this.button.selected = toolBarState[this.command].selected;
27
- this.button.disabled = toolBarState[this.command].disabled;
26
+ if (this.button.overflows) {
27
+ setTimeout(() => {
28
+ this.button.selected = toolBarState[this.command].selected;
29
+ this.button.disabled = toolBarState[this.command].disabled;
30
+ });
31
+ }
32
+ else {
33
+ this.button.selected = toolBarState[this.command].selected;
34
+ this.button.disabled = toolBarState[this.command].disabled;
35
+ }
28
36
  }
29
37
  }
package/esm2020/tools/shared/editor-command-dialog.mjs CHANGED
@@ -18,7 +18,15 @@ export class EditorCommandDialog extends EditorCommandBaseDirective {
18
18
  this.editor.openDialog(this.dialog);
19
19
  }
20
20
  onStateChange(toolBarState) {
21
- this.button.selected = toolBarState[this.command].selected;
22
- this.button.disabled = toolBarState[this.command].disabled;
21
+ if (this.button.overflows) {
22
+ setTimeout(() => {
23
+ this.button.selected = toolBarState[this.command].selected;
24
+ this.button.disabled = toolBarState[this.command].disabled;
25
+ });
26
+ }
27
+ else {
28
+ this.button.selected = toolBarState[this.command].selected;
29
+ this.button.disabled = toolBarState[this.command].disabled;
30
+ }
23
31
  }
24
32
  }
package/esm2020/tools/tables/editor-insert-table-button.component.mjs CHANGED
@@ -20,6 +20,7 @@ import * as i3 from "@progress/kendo-angular-dialog";
20
20
  import * as i4 from "../../common/provider.service";
21
21
  import * as i5 from "@progress/kendo-angular-buttons";
22
22
  import * as i6 from "./popup-table-grid.component";
23
+ import * as i7 from "@angular/common";
23
24
  const popupWrapperWidth = '190px';
24
25
  const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is added;
25
26
  /**
@@ -174,21 +175,23 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
174
175
  ></button>
175
176
  </ng-template>
176
177
  <ng-template #popupTemplate>
177
- <button
178
- kendoButton
179
- #overflowElement
180
- [attr.title]="title"
178
+ <div #overflowElement
179
+ role="menuitem"
180
+ class="k-item k-menu-item"
181
+ [class.k-disabled]="disabled"
181
182
  [attr.tabindex]="tabIndex"
182
- icon="table-add"
183
- [disabled]="disabled"
184
183
  (click)="openDialog()">
185
- {{ title }}
186
- </button>
184
+ <span
185
+ class="k-link k-menu-link">
186
+ <span class="k-icon k-i-table-add"></span>
187
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
188
+ </span>
189
+ </div>
187
190
  </ng-template>
188
191
  <ng-template #popupGridTemplate>
189
192
  <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
190
193
  </ng-template>
191
- `, isInline: true, components: [{ 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"] }, { type: i6.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
194
+ `, isInline: true, components: [{ 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"] }, { type: i6.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
192
195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
193
196
  type: Component,
194
197
  args: [{
@@ -209,16 +212,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
209
212
  ></button>
210
213
  </ng-template>
211
214
  <ng-template #popupTemplate>
212
- <button
213
- kendoButton
214
- #overflowElement
215
- [attr.title]="title"
215
+ <div #overflowElement
216
+ role="menuitem"
217
+ class="k-item k-menu-item"
218
+ [class.k-disabled]="disabled"
216
219
  [attr.tabindex]="tabIndex"
217
- icon="table-add"
218
- [disabled]="disabled"
219
220
  (click)="openDialog()">
220
- {{ title }}
221
- </button>
221
+ <span
222
+ class="k-link k-menu-link">
223
+ <span class="k-icon k-i-table-add"></span>
224
+ <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
225
+ </span>
226
+ </div>
222
227
  </ng-template>
223
228
  <ng-template #popupGridTemplate>
224
229
  <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>