@progress/kendo-angular-spreadsheet
Version:
A Spreadsheet Component for Angular
195 lines (194 loc) • 7.69 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, EventEmitter, Inject, Output, ViewChild } from "@angular/core";
import { ToolBarComponent, ToolBarToolComponent } from "@progress/kendo-angular-toolbar";
import { SpreadsheetService } from "../../common/spreadsheet.service";
import { SpreadsheetLocalizationService } from "../../localization/spreadsheet-localization.service";
import { SpreadsheetToolsService } from "../tools.service";
import { hasObservers, isPresent } from '@progress/kendo-angular-common';
import { DEFAULT_FONT_VALUES, FONT_DATA, MY_TOKEN } from "./constants";
import { commandIcons, commandSVGIcons } from './command-icons';
import { outerWidth } from '../utils';
import { DialogService } from "@progress/kendo-angular-dialog";
import { DialogContentComponent } from "./dialog-content.component";
import { take } from "rxjs/operators";
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 "@progress/kendo-angular-toolbar";
/**
* @hidden
*/
export class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
command;
dialogService;
localization;
spreadsheetService;
toolsService;
toolbar;
element;
dropDownListRef;
popupButton;
data;
constructor(command, dialogService, localization, spreadsheetService, toolsService, toolbar) {
super();
this.command = command;
this.dialogService = dialogService;
this.localization = localization;
this.spreadsheetService = spreadsheetService;
this.toolsService = toolsService;
this.toolbar = toolbar;
this.value = DEFAULT_FONT_VALUES[this.command];
this.data = FONT_DATA[this.command];
this.isBuiltInTool = true;
}
/**
* Fires when the user updates the value of the drop-down list.
*/
valueChange = new EventEmitter();
value;
tabindex = -1;
itemDisabled;
svgIcon;
icon;
subs;
ngOnInit() {
this.value = this.toolsService.toolsState[this.command];
this.subs = this.toolsService.stateChange.subscribe(state => {
this.value = state[this.command];
});
this.svgIcon = commandSVGIcons[this.command];
this.icon = commandIcons[this.command];
}
ngOnDestroy() {
if (this.subs) {
this.subs.unsubscribe();
}
}
/**
* @hidden
*/
messageFor(key) {
return this.localization.get(key);
}
/**
* @hidden
*/
onValueChange(ev) {
if (isPresent(ev)) {
if (hasObservers(this.valueChange)) {
this.valueChange.emit(ev);
}
const options = {
command: 'PropertyChangeCommand',
options: { property: this.command, value: ev || null }
};
this.spreadsheetService.spreadsheet.executeCommand(options);
}
}
/**
* @hidden
*/
get outerWidth() {
if (this.element) {
return outerWidth(this.element.nativeElement);
}
}
/**
* @hidden
*/
openDialog() {
const dialogSettings = {
appendTo: this.spreadsheetService.dialogContainer,
title: this.messageFor(this.command),
content: DialogContentComponent,
actions: [{
text: this.messageFor('dialogApply'),
themeColor: 'primary'
}, {
text: this.messageFor('dialogCancel')
}],
actionsLayout: 'start',
width: 400,
autoFocusedElement: '.k-picker'
};
this.toolbar.toggle(false);
const dialog = this.dialogService.open(dialogSettings);
const dialogInstance = dialog.dialog.instance;
const dialogContent = dialog.content.instance;
dialogInstance.action.pipe(take(1)).subscribe((event) => {
if (event.text === this.messageFor('dialogApply')) {
const options = {
command: 'PropertyChangeCommand',
options: { property: this.command, value: dialogContent.value || null }
};
this.spreadsheetService.spreadsheet.executeCommand(options);
}
this.toolbar.toggle();
});
dialogInstance.close.pipe(take(1)).subscribe(() => {
this.toolbar.toggle();
});
dialogContent.setData({
data: this.data,
value: this.value,
tabindex: this.tabindex,
componentType: this.command,
title: this.localization.get(this.command)
});
}
/**
* @hidden
*/
focus(e) {
this.tabindex = 0;
if (e instanceof PointerEvent) {
return;
}
if (this.overflows) {
this.popupButton.nativeElement.focus();
}
else {
this.dropDownListRef.focus();
}
}
/**
* @hidden
*/
canFocus() {
return true;
}
/**
* @hidden
*/
handleKey() {
this.tabindex = -1;
return false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDropDownToolBase, deps: [{ token: MY_TOKEN }, { token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDropDownToolBase, selector: "ng-component", outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "dropDownListRef", first: true, predicate: ["element"], descendants: true }, { propertyName: "popupButton", first: true, predicate: ["popupButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDropDownToolBase, decorators: [{
type: Component,
args: [{
template: ``
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [MY_TOKEN]
}] }, { type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ToolBarComponent }]; }, propDecorators: { element: [{
type: ViewChild,
args: ['element', { read: ElementRef }]
}], dropDownListRef: [{
type: ViewChild,
args: ['element']
}], popupButton: [{
type: ViewChild,
args: ['popupButton', { read: ElementRef }]
}], valueChange: [{
type: Output
}] } });