@progress/kendo-angular-spreadsheet
Version:
A Spreadsheet Component for Angular
135 lines (134 loc) • 6.43 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, HostBinding, HostListener, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
import { map } from 'rxjs/operators';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "../localization/spreadsheet-localization.service";
/**
* @hidden
*/
export class NameBoxComponent {
ngZone;
host;
localization;
renderer;
hostClass = true;
keyDownHandler() {
const editor = this.spreadsheetWidget.view.nameEditor;
if (editor) {
const name = this.inputElement.value;
editor.trigger('enter', { value: name });
}
}
combobox;
data;
spreadsheetWidget;
constructor(ngZone, host, localization, renderer) {
this.ngZone = ngZone;
this.host = host;
this.localization = localization;
this.renderer = renderer;
}
ngAfterViewInit() {
this.renderer.setAttribute(this.inputElement, 'title', this.title);
this.renderer.setAttribute(this.inputElement, 'aria-label', this.title);
}
value;
get inputElement() {
return this.host.nativeElement.querySelector('.k-input-inner');
}
get current() {
return {
value: (val) => {
if (val === undefined) {
const item = this.combobox && this.combobox.value;
return item ? (item.name || item) : item;
}
else {
this.ngZone.run(() => {
this.value = { name: val } || null;
});
}
}
};
}
get title() {
return this.localization.get('nameBox');
}
onSelectionChange(value) {
const editor = this.spreadsheetWidget.view.nameEditor;
if (editor && value) {
const name = value.name;
if (name !== this.value.name) {
editor.trigger('select', { name });
this.value = { name };
}
}
}
onOpen() {
const editor = this.spreadsheetWidget.view.nameEditor;
if (editor) {
this.data = editor.readData();
}
}
valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.SpreadsheetLocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NameBoxComponent, isStandalone: true, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
<kendo-combobox #combobox
[popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
fillMode="flat"
[clearButton]="false"
textField="name"
valueField="name"
[data]="data"
[allowCustom]="true"
(selectionChange)="onSelectionChange($event)"
[value]="value"
(open)="onOpen()"
[valueNormalizer]="valueNormalizer"
[attr.title]="title"
></kendo-combobox>
`, isInline: true, dependencies: [{ kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NameBoxComponent, decorators: [{
type: Component,
args: [{
selector: '[kendoSpreadsheetNameBox]',
template: `
<kendo-combobox #combobox
[popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
fillMode="flat"
[clearButton]="false"
textField="name"
valueField="name"
[data]="data"
[allowCustom]="true"
(selectionChange)="onSelectionChange($event)"
[value]="value"
(open)="onOpen()"
[valueNormalizer]="valueNormalizer"
[attr.title]="title"
></kendo-combobox>
`,
standalone: true,
imports: [ComboBoxComponent]
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.SpreadsheetLocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-spreadsheet-name-editor']
}], keyDownHandler: [{
type: HostListener,
args: ['keydown.enter']
}], combobox: [{
type: ViewChild,
args: ['combobox']
}], data: [{
type: Input
}], spreadsheetWidget: [{
type: Input
}] } });