@progress/kendo-angular-spreadsheet 17.0.0-develop.2 → 17.0.0-develop.21

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/README.md +30 -19
  2. package/esm2020/package-metadata.mjs +2 -2
  3. package/esm2020/sheets-bar/sheets-bar.component.mjs +38 -30
  4. package/esm2020/spreadsheet.component.mjs +25 -15
  5. package/esm2020/tools/colorpicker/spreadsheet-backcolor.component.mjs +28 -24
  6. package/esm2020/tools/colorpicker/spreadsheet-forecolor.component.mjs +28 -24
  7. package/esm2020/tools/font-family/font-family-dropdownlist.component.mjs +2 -0
  8. package/esm2020/tools/font-size/font-size-dropdownlist.component.mjs +2 -0
  9. package/esm2020/tools/load-file.component.mjs +1 -1
  10. package/fesm2015/progress-kendo-angular-spreadsheet.mjs +126 -96
  11. package/fesm2020/progress-kendo-angular-spreadsheet.mjs +126 -96
  12. package/package.json +16 -16
  13. package/schematics/ngAdd/index.js +2 -2
package/README.md CHANGED
@@ -1,31 +1,42 @@
1
- <a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
1
+ <a href="https://www.telerik.com/kendo-angular-ui/components/spreadsheet" target="_blank">
2
2
  <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
3
3
  </a>
4
4
 
5
5
  ## Kendo UI for Angular Spreadsheet Component
6
6
 
7
- > **Important**
8
- >
9
- > - This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
10
- > - You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet).
11
- > - To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet).
12
- > - The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
13
- >
14
- > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-spreadsheet) and speed up your development process!
7
+ > * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
8
+ > * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
9
+ > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
15
10
 
16
- ## Resources
11
+ The Kendo UI for Angular Spreadsheet allows you to create, edit, and manipulate tabular data with ease. Just like in an MS Excel spreadsheet, you can edit, resize columns and rows, calculate formulas, import and export to Excel, and many more.
12
+
13
+ ## Key Features
14
+
15
+ Among the many features which the Kendo UI for Angular Spreadsheet delivers are:
16
+
17
+ * Toolbar Tools&mdash;The Spreadsheet component provides a variety of built-in tools that help you to create, edit, and style the sheet data. [Read more about the built-in toolbar tools of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/tools)
18
+ * Action Bar&mdash;The Spreadsheet action bar allows you to control the cell selection and calculate cell values by entering formulas into the dedicated formula input. [Read more about the action bar capabilities of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/action-bar)
19
+ * Sheets Bar&mdash;The sheets bar provides a convenient way to rename, duplicate, and delete sheets as necessary. [Read more about the sheets bar options of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/sheets-bar)
20
+ * Appearance&mdash;You can use the options provided by the Spreadsheet component to customize its appearance. [Read more about the customizable appearance of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/appearance)
21
+ * Events&mdash;The Spreadsheet exposes several events to let you easily handle any file operations logic. [Read more about the events of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/events)
22
+ * Accessibility&mdash;The Spreadsheet is accessible for screen readers and supports WAI-ARIA attributes. [Read more about the accessibility of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/accessibility)
23
+ * Keyboard Navigation&mdash;The Spreadsheet supports a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the Spreadsheet...](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/keyboard-navigation)
17
24
 
18
- - [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
19
- - [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
20
- - [Blogs](http://www.telerik.com/blogs/kendo-ui)
21
- - [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
25
+ ## Support Options
22
26
 
23
- ## Questions and Feedback
27
+ For any issues you might encounter while working with the Kendo UI for Angular Spreadsheet, you have the following support channels available:
28
+
29
+ * Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
30
+ * Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
31
+ * Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
32
+
33
+ ## Resources
24
34
 
25
- - [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
26
- - [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
27
- - [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
28
- - [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
35
+ * [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
36
+ * [Getting Started with the Kendo UI for Angular Spreadsheet](https://www.telerik.com/kendo-angular-ui/components/spreadsheet/installation/getting-started)
37
+ * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
38
+ * [Blogs](http://www.telerik.com/blogs/kendo-ui)
39
+ * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
29
40
 
30
41
  _Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved._
31
42
 
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-spreadsheet',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1728914527,
13
- version: '17.0.0-develop.2',
12
+ publishDate: 1729874289,
13
+ version: '17.0.0-develop.21',
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
  };
package/esm2020/sheets-bar/sheets-bar.component.mjs CHANGED
@@ -236,7 +236,7 @@ export class SheetsBarComponent {
236
236
  this.notifySheetsChange();
237
237
  }
238
238
  onTabListKeyDown(ev) {
239
- const buttonEl = ev.target.querySelector('.k-dropdown-button');
239
+ const buttonEl = ev.target.querySelector('kendo-dropdownbutton');
240
240
  const index = Array.from(this.actionDdbRefs).findIndex(el => el.nativeElement === buttonEl);
241
241
  const ddb = Array.from(this.actionDdbs)[index];
242
242
  if (!ddb) {
@@ -302,7 +302,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
302
302
  [tabPosition]="'bottom'"
303
303
  [showContentArea]="false"
304
304
  [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
305
- class="k-spreadsheet-sheets k-overflow-hidden"
305
+ class="k-spreadsheet-sheets"
306
306
  (tabSelect)="onTabSelect($event)">
307
307
  <ng-container *ngFor="let sheet of sheets">
308
308
  <kendo-tabstrip-tab
@@ -310,24 +310,28 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
310
310
  [title]="sheet.text"
311
311
  [selected]="sheet.text === activeSheet">
312
312
  <ng-template kendoTabTemplate>
313
- <span class="k-link">{{sheet.text}}</span>
314
- <kendo-dropdownbutton #sheetDdb
315
- fillMode="flat"
316
- icon="caret-alt-down"
317
- [svgIcon]="caretAltDownIcon"
318
- buttonClass="k-menu-button"
319
- [data]="sheet.sheetActions"
320
- [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
321
- (open)="onOpen(sheetDdb)"
322
- (close)="onClose()"
323
- (click)="$event.stopPropagation()"
324
- (itemClick)="onActionClick($event, sheet)">
325
- </kendo-dropdownbutton>
313
+ <span class="k-link">
314
+ <span class="k-link-text">{{sheet.text}}</span>
315
+ </span>
316
+ <span class="k-item-actions">
317
+ <kendo-dropdownbutton #sheetDdb
318
+ fillMode="flat"
319
+ icon="caret-alt-down"
320
+ [svgIcon]="caretAltDownIcon"
321
+ buttonClass="k-menu-button"
322
+ [data]="sheet.sheetActions"
323
+ [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
324
+ (open)="onOpen(sheetDdb)"
325
+ (close)="onClose()"
326
+ (click)="$event.stopPropagation()"
327
+ (itemClick)="onActionClick($event, sheet)">
328
+ </kendo-dropdownbutton>
329
+ </span>
326
330
  </ng-template>
327
331
  </kendo-tabstrip-tab>
328
332
  </ng-container>
329
333
  </kendo-tabstrip>
330
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
334
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
331
335
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, decorators: [{
332
336
  type: Component,
333
337
  args: [{
@@ -358,7 +362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
358
362
  [tabPosition]="'bottom'"
359
363
  [showContentArea]="false"
360
364
  [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
361
- class="k-spreadsheet-sheets k-overflow-hidden"
365
+ class="k-spreadsheet-sheets"
362
366
  (tabSelect)="onTabSelect($event)">
363
367
  <ng-container *ngFor="let sheet of sheets">
364
368
  <kendo-tabstrip-tab
@@ -366,19 +370,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
366
370
  [title]="sheet.text"
367
371
  [selected]="sheet.text === activeSheet">
368
372
  <ng-template kendoTabTemplate>
369
- <span class="k-link">{{sheet.text}}</span>
370
- <kendo-dropdownbutton #sheetDdb
371
- fillMode="flat"
372
- icon="caret-alt-down"
373
- [svgIcon]="caretAltDownIcon"
374
- buttonClass="k-menu-button"
375
- [data]="sheet.sheetActions"
376
- [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
377
- (open)="onOpen(sheetDdb)"
378
- (close)="onClose()"
379
- (click)="$event.stopPropagation()"
380
- (itemClick)="onActionClick($event, sheet)">
381
- </kendo-dropdownbutton>
373
+ <span class="k-link">
374
+ <span class="k-link-text">{{sheet.text}}</span>
375
+ </span>
376
+ <span class="k-item-actions">
377
+ <kendo-dropdownbutton #sheetDdb
378
+ fillMode="flat"
379
+ icon="caret-alt-down"
380
+ [svgIcon]="caretAltDownIcon"
381
+ buttonClass="k-menu-button"
382
+ [data]="sheet.sheetActions"
383
+ [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
384
+ (open)="onOpen(sheetDdb)"
385
+ (close)="onClose()"
386
+ (click)="$event.stopPropagation()"
387
+ (itemClick)="onActionClick($event, sheet)">
388
+ </kendo-dropdownbutton>
389
+ </span>
382
390
  </ng-template>
383
391
  </kendo-tabstrip-tab>
384
392
  </ng-container>
package/esm2020/spreadsheet.component.mjs CHANGED
@@ -811,6 +811,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
811
811
  </kendo-menu>
812
812
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
813
813
  [attr.aria-label]="messageFor('file')"
814
+ fillMode="flat"
814
815
  class="k-spreadsheet-toolbar"
815
816
  [overflow]="overflow">
816
817
  <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
@@ -819,18 +820,19 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
819
820
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
820
821
  [attr.aria-label]="messageFor('home')"
821
822
  class="k-spreadsheet-toolbar"
823
+ fillMode="flat"
822
824
  [overflow]="overflow">
823
- <kendo-toolbar-buttongroup>
824
- <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
825
- <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
826
- </kendo-toolbar-buttongroup>
825
+ <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
826
+ <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
827
827
  <kendo-toolbar-separator></kendo-toolbar-separator>
828
828
  <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
829
829
  <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
830
- <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
831
- <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
830
+ <kendo-toolbar-buttongroup fillMode="flat">
831
+ <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
832
+ <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
833
+ </kendo-toolbar-buttongroup>
832
834
  <kendo-toolbar-separator></kendo-toolbar-separator>
833
- <kendo-toolbar-buttongroup>
835
+ <kendo-toolbar-buttongroup fillMode="flat">
834
836
  <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
835
837
  <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
836
838
  <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
@@ -847,6 +849,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
847
849
  </kendo-toolbar>
848
850
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
849
851
  [attr.aria-label]="messageFor('insert')"
852
+ fillMode="flat"
850
853
  class="k-spreadsheet-toolbar"
851
854
  [overflow]="overflow">
852
855
  <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
@@ -861,6 +864,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
861
864
  </kendo-toolbar>
862
865
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
863
866
  [attr.aria-label]="messageFor('formatTab')"
867
+ fillMode="flat"
864
868
  class="k-spreadsheet-toolbar"
865
869
  [overflow]="overflow">
866
870
  <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
@@ -868,6 +872,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
868
872
  </kendo-toolbar>
869
873
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
870
874
  [attr.aria-label]="messageFor('view')"
875
+ fillMode="flat"
871
876
  class="k-spreadsheet-toolbar"
872
877
  [overflow]="overflow">
873
878
  <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
@@ -912,7 +917,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
912
917
  (select)="onContextMenuSelect($event)"></kendo-contextmenu>
913
918
 
914
919
  <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
915
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
920
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
916
921
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, decorators: [{
917
922
  type: Component,
918
923
  args: [{
@@ -1097,6 +1102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1097
1102
  </kendo-menu>
1098
1103
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
1099
1104
  [attr.aria-label]="messageFor('file')"
1105
+ fillMode="flat"
1100
1106
  class="k-spreadsheet-toolbar"
1101
1107
  [overflow]="overflow">
1102
1108
  <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
@@ -1105,18 +1111,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1105
1111
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
1106
1112
  [attr.aria-label]="messageFor('home')"
1107
1113
  class="k-spreadsheet-toolbar"
1114
+ fillMode="flat"
1108
1115
  [overflow]="overflow">
1109
- <kendo-toolbar-buttongroup>
1110
- <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
1111
- <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
1112
- </kendo-toolbar-buttongroup>
1116
+ <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
1117
+ <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
1113
1118
  <kendo-toolbar-separator></kendo-toolbar-separator>
1114
1119
  <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
1115
1120
  <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
1116
- <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
1117
- <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
1121
+ <kendo-toolbar-buttongroup fillMode="flat">
1122
+ <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
1123
+ <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
1124
+ </kendo-toolbar-buttongroup>
1118
1125
  <kendo-toolbar-separator></kendo-toolbar-separator>
1119
- <kendo-toolbar-buttongroup>
1126
+ <kendo-toolbar-buttongroup fillMode="flat">
1120
1127
  <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
1121
1128
  <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
1122
1129
  <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
@@ -1133,6 +1140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1133
1140
  </kendo-toolbar>
1134
1141
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
1135
1142
  [attr.aria-label]="messageFor('insert')"
1143
+ fillMode="flat"
1136
1144
  class="k-spreadsheet-toolbar"
1137
1145
  [overflow]="overflow">
1138
1146
  <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
@@ -1147,6 +1155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1147
1155
  </kendo-toolbar>
1148
1156
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
1149
1157
  [attr.aria-label]="messageFor('formatTab')"
1158
+ fillMode="flat"
1150
1159
  class="k-spreadsheet-toolbar"
1151
1160
  [overflow]="overflow">
1152
1161
  <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
@@ -1154,6 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1154
1163
  </kendo-toolbar>
1155
1164
  <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
1156
1165
  [attr.aria-label]="messageFor('view')"
1166
+ fillMode="flat"
1157
1167
  class="k-spreadsheet-toolbar"
1158
1168
  [overflow]="overflow">
1159
1169
  <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
package/esm2020/tools/colorpicker/spreadsheet-backcolor.component.mjs CHANGED
@@ -30,18 +30,20 @@ export class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
30
30
  SpreadsheetBackColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
31
31
  SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
32
32
  <ng-template #toolbarTemplate>
33
- <kendo-colorpicker
34
- #element
35
- [attr.title]="messageFor(command)"
36
- [format]="'hex'"
37
- [(value)]="value"
38
- [tabindex]="tabindex"
39
- (valueChange)="onValueChange($event)"
40
- [clearButton]="false"
41
- fillMode="flat"
42
- [icon]="icon"
43
- [preview]="true"
44
- [svgIcon]="svgIcon"></kendo-colorpicker>
33
+ <div class="k-toolbar-item">
34
+ <kendo-colorpicker
35
+ #element
36
+ [attr.title]="messageFor(command)"
37
+ [format]="'hex'"
38
+ [(value)]="value"
39
+ [tabindex]="tabindex"
40
+ (valueChange)="onValueChange($event)"
41
+ [clearButton]="false"
42
+ fillMode="flat"
43
+ [icon]="icon"
44
+ [preview]="true"
45
+ [svgIcon]="svgIcon"></kendo-colorpicker>
46
+ </div>
45
47
  </ng-template>
46
48
  <ng-template #popupTemplate>
47
49
  <div #popupButton
@@ -64,18 +66,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
64
66
  selector: 'kendo-spreadsheet-backcolor-tool',
65
67
  template: `
66
68
  <ng-template #toolbarTemplate>
67
- <kendo-colorpicker
68
- #element
69
- [attr.title]="messageFor(command)"
70
- [format]="'hex'"
71
- [(value)]="value"
72
- [tabindex]="tabindex"
73
- (valueChange)="onValueChange($event)"
74
- [clearButton]="false"
75
- fillMode="flat"
76
- [icon]="icon"
77
- [preview]="true"
78
- [svgIcon]="svgIcon"></kendo-colorpicker>
69
+ <div class="k-toolbar-item">
70
+ <kendo-colorpicker
71
+ #element
72
+ [attr.title]="messageFor(command)"
73
+ [format]="'hex'"
74
+ [(value)]="value"
75
+ [tabindex]="tabindex"
76
+ (valueChange)="onValueChange($event)"
77
+ [clearButton]="false"
78
+ fillMode="flat"
79
+ [icon]="icon"
80
+ [preview]="true"
81
+ [svgIcon]="svgIcon"></kendo-colorpicker>
82
+ </div>
79
83
  </ng-template>
80
84
  <ng-template #popupTemplate>
81
85
  <div #popupButton
package/esm2020/tools/colorpicker/spreadsheet-forecolor.component.mjs CHANGED
@@ -30,18 +30,20 @@ export class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
30
30
  SpreadsheetForeColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
31
31
  SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
32
32
  <ng-template #toolbarTemplate>
33
- <kendo-colorpicker
34
- #element
35
- [attr.title]="messageFor(command)"
36
- [format]="'hex'"
37
- [(value)]="value"
38
- [tabindex]="tabindex"
39
- (valueChange)="onValueChange($event)"
40
- [clearButton]="false"
41
- fillMode="flat"
42
- [icon]="icon"
43
- [svgIcon]="svgIcon"
44
- [preview]="true"></kendo-colorpicker>
33
+ <div class="k-toolbar-item">
34
+ <kendo-colorpicker
35
+ #element
36
+ [attr.title]="messageFor(command)"
37
+ [format]="'hex'"
38
+ [(value)]="value"
39
+ [tabindex]="tabindex"
40
+ (valueChange)="onValueChange($event)"
41
+ [clearButton]="false"
42
+ fillMode="flat"
43
+ [icon]="icon"
44
+ [svgIcon]="svgIcon"
45
+ [preview]="true"></kendo-colorpicker>
46
+ </div>
45
47
  </ng-template>
46
48
  <ng-template #popupTemplate>
47
49
  <div #popupButton
@@ -64,18 +66,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
64
66
  selector: 'kendo-spreadsheet-forecolor-tool',
65
67
  template: `
66
68
  <ng-template #toolbarTemplate>
67
- <kendo-colorpicker
68
- #element
69
- [attr.title]="messageFor(command)"
70
- [format]="'hex'"
71
- [(value)]="value"
72
- [tabindex]="tabindex"
73
- (valueChange)="onValueChange($event)"
74
- [clearButton]="false"
75
- fillMode="flat"
76
- [icon]="icon"
77
- [svgIcon]="svgIcon"
78
- [preview]="true"></kendo-colorpicker>
69
+ <div class="k-toolbar-item">
70
+ <kendo-colorpicker
71
+ #element
72
+ [attr.title]="messageFor(command)"
73
+ [format]="'hex'"
74
+ [(value)]="value"
75
+ [tabindex]="tabindex"
76
+ (valueChange)="onValueChange($event)"
77
+ [clearButton]="false"
78
+ fillMode="flat"
79
+ [icon]="icon"
80
+ [svgIcon]="svgIcon"
81
+ [preview]="true"></kendo-colorpicker>
82
+ </div>
79
83
  </ng-template>
80
84
  <ng-template #popupTemplate>
81
85
  <div #popupButton
package/esm2020/tools/font-family/font-family-dropdownlist.component.mjs CHANGED
@@ -16,6 +16,7 @@ FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "1
16
16
  FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
17
17
  <kendo-dropdownlist
18
18
  #element
19
+ class="k-toolbar-dropdownlist"
19
20
  [data]="data"
20
21
  [(value)]="value"
21
22
  [tabindex]="tabindex"
@@ -37,6 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
37
38
  template: `
38
39
  <kendo-dropdownlist
39
40
  #element
41
+ class="k-toolbar-dropdownlist"
40
42
  [data]="data"
41
43
  [(value)]="value"
42
44
  [tabindex]="tabindex"
package/esm2020/tools/font-size/font-size-dropdownlist.component.mjs CHANGED
@@ -15,6 +15,7 @@ FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.
15
15
  FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
16
16
  <kendo-dropdownlist
17
17
  #element
18
+ class="k-toolbar-dropdownlist"
18
19
  [data]="data"
19
20
  [(value)]="value"
20
21
  [attr.title]="title"
@@ -30,6 +31,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
30
31
  template: `
31
32
  <kendo-dropdownlist
32
33
  #element
34
+ class="k-toolbar-dropdownlist"
33
35
  [data]="data"
34
36
  [(value)]="value"
35
37
  [attr.title]="title"
package/esm2020/tools/load-file.component.mjs CHANGED
@@ -115,7 +115,7 @@ SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
115
115
  accept=".xlsx,.XLSX" />
116
116
  </div>
117
117
  </ng-template>
118
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
118
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
119
119
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
120
120
  type: Component,
121
121
  args: [{