@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
127 lines (126 loc) • 4.79 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 { Directive, Input, Output, EventEmitter } from '@angular/core';
import { getter } from '@progress/kendo-common';
import { GanttComponent } from '../gantt.component';
import { isPresent, isString } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../gantt.component";
/**
* Handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt component.
* ([See example]({% slug selection_gantt %}#toc-built-in-directive)).
*
* @example
* ```html
* <kendo-gantt kendoGanttSelectable [(selectedKeys)]="selectedKeys"></kendo-gantt>
* ```
*
* @remarks
* Applied to: {@link GanttComponent}
*/
export class SelectableDirective {
gantt;
/**
* @hidden
*/
set selectable(value) {
if (value) {
this.gantt.isSelected = this.isSelected;
this.subscribeSelection();
}
else {
this.gantt.isSelected = () => false;
this.unsubscribeSelection();
}
this.gantt.selectable = value;
this.gantt.updateView();
}
/**
* Sets the selected keys.
*/
set selectedKeys(value) {
if (isPresent(value) && value === this.lastChange) {
return;
}
// prevent multiple items displayed as selected as multiple selection still not supported fully
const keys = (value || []).slice(0, 1);
this.state = new Set(keys);
this.gantt.updateView();
}
/**
* Emits when the selected keys change.
*/
selectedKeysChange = new EventEmitter();
/**
* Sets the field name or function that identifies the unique key for a data item.
* Uses the string field `id` by default.
*/
set itemKey(value) {
if (isString(value)) {
this._keyGetter = getter(value);
}
else {
this._keyGetter = value;
}
}
get keyGetter() {
return this._keyGetter || this.gantt.idGetter;
}
selectionSubscription;
state = new Set();
lastChange;
_keyGetter;
constructor(gantt) {
this.gantt = gantt;
this.isSelected = this.isSelected.bind(this);
this.selectionChange = this.selectionChange.bind(this);
this.selectable = true;
}
ngOnDestroy() {
this.unsubscribeSelection();
}
isSelected(dataItem) {
return this.state.has(this.keyGetter(dataItem));
}
selectionChange({ action, items }) {
this.state.clear();
if (action === 'select') {
items.forEach(item => this.state.add(this.keyGetter(item)));
}
this.emitSelectedItemsChange();
}
emitSelectedItemsChange() {
this.lastChange = Array.from(this.state);
this.selectedKeysChange.emit(this.lastChange);
}
subscribeSelection() {
this.unsubscribeSelection();
this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
}
unsubscribeSelection() {
if (this.selectionSubscription) {
this.selectionSubscription.unsubscribe();
this.selectionSubscription = null;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectableDirective, isStandalone: true, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectableDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'kendoGanttSelectable',
selector: '[kendoGanttSelectable]',
standalone: true
}]
}], ctorParameters: () => [{ type: i1.GanttComponent }], propDecorators: { selectable: [{
type: Input
}], selectedKeys: [{
type: Input
}], selectedKeysChange: [{
type: Output
}], itemKey: [{
type: Input
}] } });