@progress/kendo-angular-spreadsheet 13.6.0-develop.6

package/esm2020/tools/font-size/font-size-dropdownlist.component.mjs

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } from '@angular/core';
+import { DropDownListBase } from '../shared/spreadsheet-dropdownlist.base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+/**
+ * @hidden
+ */
+export class FontSizeDropDownListComponent extends DropDownListBase {
+}
+FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [attr.title]="title"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [leftRightArrowsNavigation]="false"
+            [fillMode]="fillMode"></kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-spreadsheet-fontsize-dropdownlist',
+                    template: `
+        <kendo-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [attr.title]="title"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [leftRightArrowsNavigation]="false"
+            [fillMode]="fillMode"></kendo-dropdownlist>
+    `
+                }]
+        }] });

package/esm2020/tools/font-size/spreadsheet-fontsize-tool.component.mjs

@@ -0,0 +1,92 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Inject } from '@angular/core';
+import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '../tools.service';
+import { SpreadsheetDropDownToolBase } from '../shared/spreadsheet-dropdown-tools-base';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from "../tools.service";
+import * as i5 from "./font-size-dropdownlist.component";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-toolbar";
+/**
+ * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
+ * ([see example](ToDo).
+ * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font size of a content block and
+ * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
+ *
+ * @hidden
+ */
+export class SpreadsheetFontSizeComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('fontSize', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                #element
+                [data]="data"
+                [(value)]="value"
+                [title]="messageFor(command)"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFontSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }],
+                    selector: 'kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                #element
+                [data]="data"
+                [(value)]="value"
+                [title]="messageFor(command)"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i8.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });

package/esm2020/tools/format-tool.directive.mjs

@@ -0,0 +1,61 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarDropDownButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from './shared/command-icons';
+import { FORMATS } from './shared/constants';
+import { Subscription } from 'rxjs';
+import { SpreadsheetToolsService } from './tools.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../localization/spreadsheet-localization.service";
+import * as i3 from "../common/spreadsheet.service";
+import * as i4 from "./tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetFormatDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.data = FORMATS;
+        this.commandName = 'format';
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this.onItemClick = (item) => {
+            const value = item.value || null;
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: this.commandName, value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        };
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = this.data;
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+    }
+    ngOnInit() {
+        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[this.commandName] ? 'k-selected' : '')));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+SpreadsheetFormatDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFormatDirective, deps: [{ token: i1.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetFormatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFormatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetFormat]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarDropDownButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/gridlines-tool.directive.mjs

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { SpreadsheetToolsService } from './tools.service';
+import { SpreadsheetCommandButton } from './shared/spreadsheet-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../localization/spreadsheet-localization.service";
+import * as i3 from "../common/spreadsheet.service";
+import * as i4 from "./tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('gridLines', button, localization, spreadsheetService, toolsService, {
+            command: 'GridLinesChangeCommand',
+            options: { property: 'gridLines',
+                value: !button.selected
+            }
+        });
+    }
+    clickHandler() {
+        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+        if (sheet) {
+            const value = !sheet.showGridLines();
+            const options = {
+                command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
+    }
+}
+SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/history/redo-tool.mjs

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '.././tools.service';
+import { SpreadsheetCommandButton } from '.././shared/spreadsheet-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from ".././tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetRedoDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('redo', button, localization, spreadsheetService, toolsService, {
+            options: { property: 'redo' }
+        });
+    }
+    clickHandler() {
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['redo']();
+    }
+}
+SpreadsheetRedoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetRedoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetRedo]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/history/undo-tool.mjs

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '.././tools.service';
+import { SpreadsheetCommandButton } from '.././shared/spreadsheet-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from ".././tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetUndoDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('undo', button, localization, spreadsheetService, toolsService, {
+            options: { property: 'undo' }
+        });
+    }
+    clickHandler() {
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['undo']();
+    }
+}
+SpreadsheetUndoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetUndoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetUndoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetUndo]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/index.mjs

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { SpreadsheetBackColorComponent } from './colorpicker/spreadsheet-backcolor.component';
+export { SpreadsheetForeColorComponent } from './colorpicker/spreadsheet-forecolor.component';
+export { SpreadsheetFontFamilyComponent } from './font-family/spreadsheet-fontfamily-tool.component';
+export { SpreadsheetFontSizeComponent } from './font-size/spreadsheet-fontsize-tool.component';
+export { SpreadsheetRedoDirective } from './history/redo-tool';
+export { SpreadsheetUndoDirective } from './history/undo-tool';
+export { SpreadsheetBoldDirective } from './typographical-emphasis/bold-tool.directive';
+export { SpreadsheetItalicDirective } from './typographical-emphasis/italic-tool.directive';
+export { SpreadsheetUnderlineDirective } from './typographical-emphasis/underline-tool.directive';
+export { SpreadsheetTextAlignDirective as SpreadsheetTextAlignComponent } from './align-tool.directive';
+export { SpreadsheetFormatDirective } from './format-tool.directive';
+export { SpreadsheetGridLinesDirective } from './gridlines-tool.directive';
+export { SpreadsheetLoadFileComponent } from './load-file.component';
+export { SpreadsheetSaveFileDirective } from './save-file-tool.directive';
+export { SpreadsheetTextWrapDirective } from './text-wrap-tool.directive';
+export * from './tables';

package/esm2020/tools/load-file.component.mjs

@@ -0,0 +1,186 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, Inject, TemplateRef, ViewChild, forwardRef } from '@angular/core';
+import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from './shared/command-icons';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "../localization/spreadsheet-localization.service";
+import * as i2 from "../common/spreadsheet.service";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-toolbar";
+export class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
+    constructor(localization, spreadsheetService, toolbar) {
+        super();
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolbar = toolbar;
+        this.icon = commandIcons['folderOpen'];
+        this.svgIcon = commandSVGIcons['folderOpen'];
+        this.tabindex = -1;
+        this.onFileSelect = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                this.spreadsheetService.spreadsheet.fromFile(file);
+                e.target.value = null;
+            }
+        };
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return true;
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.tabindex = 0;
+        if (this.overflows) {
+            this.overflowButtonElement.nativeElement.focus();
+        }
+        else {
+            this.button.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+}
+SpreadsheetLoadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: i1.SpreadsheetLocalizationService }, { token: i2.SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool", providers: [
+        {
+            provide: ToolBarToolComponent,
+            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
+        },
+    ], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #button
+                type="button"
+                kendoButton
+                [title]="messageFor('loadFile')"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                (click)="fileSelectEl.click()"></button>
+            <input
+                #fileSelectEl
+                type="file"
+                (change)="onFileSelect($event)"
+                [style.display]="'none'"
+                aria-hidden="true"
+                accept=".xlsx,.XLSX" />
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div
+                #overflowButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
+                </span>
+                <input
+                    #popupFileSelectEl
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [style.display]="'none'"
+                    aria-hidden="true"
+                    accept=".xlsx,.XLSX" />
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i3.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"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-spreadsheet-load-file-tool',
+                    providers: [
+                        {
+                            provide: ToolBarToolComponent,
+                            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
+                        },
+                    ],
+                    template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #button
+                type="button"
+                kendoButton
+                [title]="messageFor('loadFile')"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                (click)="fileSelectEl.click()"></button>
+            <input
+                #fileSelectEl
+                type="file"
+                (change)="onFileSelect($event)"
+                [style.display]="'none'"
+                aria-hidden="true"
+                accept=".xlsx,.XLSX" />
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div
+                #overflowButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
+                </span>
+                <input
+                    #popupFileSelectEl
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [style.display]="'none'"
+                    aria-hidden="true"
+                    accept=".xlsx,.XLSX" />
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SpreadsheetLocalizationService }, { type: i2.SpreadsheetService }, { type: i5.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], overflowButtonElement: [{
+                type: ViewChild,
+                args: ['overflowButton', { read: ElementRef, static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button']
+            }] } });

package/esm2020/tools/save-file-tool.directive.mjs

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from './shared/command-icons';
+import { Subscription } from 'rxjs';
+import { saveAs } from '@progress/kendo-file-saver';
+import { Workbook } from '@progress/kendo-ooxml';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../localization/spreadsheet-localization.service";
+import * as i3 from "../common/spreadsheet.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetSaveFileDirective {
+    constructor(button, localization, spreadsheetService) {
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.subs = new Subscription();
+    }
+    ngOnInit() {
+        this.button.title = this.localization.get('saveFile');
+        this.button.icon = commandIcons['download'];
+        this.button.svgIcon = commandSVGIcons['download'];
+        this.button.fillMode = 'flat';
+        this.subs.add(this.button.click.subscribe(() => {
+            const spreadsheet = this.spreadsheetService.spreadsheet;
+            if (spreadsheet) {
+                spreadsheet.saveAsExcel({
+                    ...spreadsheet.options.excel,
+                    saveAs,
+                    Workbook
+                });
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+SpreadsheetSaveFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetSaveFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoSpreadsheetSaveFile]' }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }]; } });