@progress/kendo-angular-spreadsheet
Version:
A Spreadsheet Component for Angular
143 lines (142 loc) • 5.67 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 { NgForOf } from '@angular/common';
import { Component, EventEmitter, Output, ViewChildren, QueryList, ElementRef, NgZone } from '@angular/core';
import { Keys } from '@progress/kendo-angular-common';
import { SpreadsheetService } from './spreadsheet.service';
import { take } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "./spreadsheet.service";
/**
* @hidden
*/
export class ListEditorComponent {
ngZone;
spreadsheetService;
data = [];
focusedIndex = 0;
itemSelect = new EventEmitter();
close = new EventEmitter();
listItems;
constructor(ngZone, spreadsheetService) {
this.ngZone = ngZone;
this.spreadsheetService = spreadsheetService;
}
ngAfterViewInit() {
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
this.spreadsheetService.spreadsheet.view.clipboard.blur();
this.focusItem(0);
});
}
onItemClick(item) {
this.itemSelect.emit(item);
}
onKeyDown(event, index) {
const altKey = event.altKey;
switch (event.keyCode) {
case Keys.ArrowDown:
case Keys.ArrowRight:
event.preventDefault();
this.focusNext();
break;
case Keys.ArrowUp:
if (altKey) {
this.closeList();
}
else {
this.focusPrev();
}
break;
case Keys.ArrowLeft:
event.preventDefault();
this.focusPrev();
break;
case Keys.Enter:
case Keys.Space:
event.preventDefault();
this.onItemClick(this.data[index]);
break;
case Keys.Escape:
event.preventDefault();
this.closeList();
break;
}
}
focusNext() {
if (this.focusedIndex + 1 === this.data.length) {
this.focusItem(0);
}
else {
this.focusItem(this.focusedIndex + 1);
}
}
focusPrev() {
if (this.focusedIndex - 1 < 0) {
this.focusItem(this.data.length - 1);
}
else {
this.focusItem(this.focusedIndex - 1);
}
}
closeList() {
this.close.emit();
this.spreadsheetService.spreadsheet.view.clipboard.focus();
}
focusItem(index) {
if (this.data.length === 0) {
return;
}
this.focusedIndex = index;
const items = this.listItems.toArray();
if (items[index]) {
items[index].nativeElement.focus();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListEditorComponent, deps: [{ token: i0.NgZone }, { token: i1.SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListEditorComponent, isStandalone: true, selector: "ng-component", outputs: { itemSelect: "itemSelect", close: "close" }, viewQueries: [{ propertyName: "listItems", predicate: ["listItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
<ul class="k-list k-reset k-list-ul" role="listbox">
<li *ngFor="let item of data; let i = index"
role="option"
class="k-list-item"
[class.k-focus]="i === focusedIndex"
[attr.aria-selected]="i === focusedIndex"
[attr.tabindex]="i === focusedIndex ? 0 : -1"
(click)="onItemClick(item)"
(keydown)="onKeyDown($event, i)"
#listItem>
<span class="k-list-item-text">{{item.value}}</span>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListEditorComponent, decorators: [{
type: Component,
args: [{
template: `
<ul class="k-list k-reset k-list-ul" role="listbox">
<li *ngFor="let item of data; let i = index"
role="option"
class="k-list-item"
[class.k-focus]="i === focusedIndex"
[attr.aria-selected]="i === focusedIndex"
[attr.tabindex]="i === focusedIndex ? 0 : -1"
(click)="onItemClick(item)"
(keydown)="onKeyDown($event, i)"
#listItem>
<span class="k-list-item-text">{{item.value}}</span>
</li>
</ul>
`,
standalone: true,
imports: [NgForOf]
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.SpreadsheetService }]; }, propDecorators: { itemSelect: [{
type: Output
}], close: [{
type: Output
}], listItems: [{
type: ViewChildren,
args: ['listItem', { read: ElementRef }]
}] } });