@progress/kendo-angular-spreadsheet
Version:
A Spreadsheet Component for Angular
227 lines (226 loc) • 9.45 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, Inject, ViewChild, forwardRef } from '@angular/core';
import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { SpreadsheetService } from '../common/spreadsheet.service';
import { commandIcons, commandSVGIcons } from './shared/command-icons';
import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
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-toolbar";
/**
* @hidden
*/
export class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
localization;
spreadsheetService;
toolbar;
overflowButtonElement;
button;
icon = commandIcons['folderOpen'];
svgIcon = commandSVGIcons['folderOpen'];
tabindex = -1;
constructor(localization, spreadsheetService, toolbar) {
super();
this.localization = localization;
this.spreadsheetService = spreadsheetService;
this.toolbar = toolbar;
this.isBuiltInTool = true;
}
/**
* @hidden
*/
messageFor(key) {
return this.localization.get(key);
}
onFileSelect = (e) => {
const file = e.target.files[0];
if (file) {
this.spreadsheetService.spreadsheet.executeCommand({ command: 'OpenCommand', options: { file } });
e.target.value = null;
}
};
/**
* @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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: i1.SpreadsheetLocalizationService }, { token: i2.SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetLoadFileComponent, isStandalone: true, selector: "kendo-spreadsheet-load-file-tool", providers: [
{
provide: ToolBarToolComponent,
useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
},
], viewQueries: [{ 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
<button
type="button"
kendoButton
[ ]="messageFor('loadFile')"
fillMode="flat"
[ ]="icon"
[ ]="svgIcon"
(click)="fileSelectEl.click()"></button>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</ng-template>
<ng-template
<div
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
[ ]="icon"
[ ]="svgIcon"
></kendo-icon-wrapper>
<span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
</span>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</div>
</ng-template>
<ng-template
<button
type="button"
kendoButton
[ ]="messageFor('loadFile')"
fillMode="flat"
[ ]="icon"
[ ]="svgIcon"
(click)="fileSelectEl.click()"></button>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</ng-template>
`, 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-spreadsheet-load-file-tool',
providers: [
{
provide: ToolBarToolComponent,
useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
},
],
template: `
<ng-template
<button
type="button"
kendoButton
[ ]="messageFor('loadFile')"
fillMode="flat"
[ ]="icon"
[ ]="svgIcon"
(click)="fileSelectEl.click()"></button>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</ng-template>
<ng-template
<div
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
[ ]="icon"
[ ]="svgIcon"
></kendo-icon-wrapper>
<span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
</span>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</div>
</ng-template>
<ng-template
<button
type="button"
kendoButton
[ ]="messageFor('loadFile')"
fillMode="flat"
[ ]="icon"
[ ]="svgIcon"
(click)="fileSelectEl.click()"></button>
<input
type="file"
(change)="onFileSelect($event)"
[ ]="'none'"
aria-hidden="true"
accept=".xlsx,.XLSX" />
</ng-template>
`,
standalone: true,
imports: [ButtonComponent, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i1.SpreadsheetLocalizationService }, { type: i2.SpreadsheetService }, { type: i3.ToolBarComponent, decorators: [{
type: Inject,
args: [ToolBarComponent]
}] }]; }, propDecorators: { overflowButtonElement: [{
type: ViewChild,
args: ['overflowButton', { read: ElementRef, static: false }]
}], button: [{
type: ViewChild,
args: ['button']
}] } });