@progress/kendo-angular-spreadsheet/esm2022/tools/load-file.component.mjs

A Spreadsheet Component for Angular

/**-----------------------------------------------------------------------------------------
* 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 #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>
        <ng-template #sectionTemplate>
            <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>
    `, 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 #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>
        <ng-template #sectionTemplate>
            <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>
    `,
                    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']
            }] } });