@progress/kendo-angular-spreadsheet 16.12.0-develop.1 → 17.0.0-develop.10

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 (12) hide show
  1. package/esm2020/package-metadata.mjs +2 -2
  2. package/esm2020/sheets-bar/sheets-bar.component.mjs +38 -30
  3. package/esm2020/spreadsheet.component.mjs +25 -15
  4. package/esm2020/tools/colorpicker/spreadsheet-backcolor.component.mjs +28 -24
  5. package/esm2020/tools/colorpicker/spreadsheet-forecolor.component.mjs +28 -24
  6. package/esm2020/tools/font-family/font-family-dropdownlist.component.mjs +2 -0
  7. package/esm2020/tools/font-size/font-size-dropdownlist.component.mjs +2 -0
  8. package/esm2020/tools/load-file.component.mjs +1 -1
  9. package/fesm2015/progress-kendo-angular-spreadsheet.mjs +126 -96
  10. package/fesm2020/progress-kendo-angular-spreadsheet.mjs +126 -96
  11. package/package.json +15 -15
  12. package/schematics/ngAdd/index.js +2 -2
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: 1728572837,
13
- version: '16.12.0-develop.1',
12
+ publishDate: 1729176178,
13
+ version: '17.0.0-develop.10',
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: [{