@progress/kendo-angular-chart-wizard
Version:
Kendo UI Angular Chart Wizard component
96 lines (95 loc) • 4.13 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, EventEmitter, HostListener, Input, Output } from "@angular/core";
import { GridComponent } from "@progress/kendo-angular-grid";
import { getWizardDataFromGridSelection } from "./get-wizard-data-from-grid-selection";
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-grid";
/**
* Binds the Chart Wizard to the selection state of the Grid ([see example](slug:grid_integration_with_chart)).
*
* @example
* ```html
* <kendo-grid
* [kendoGridBinding]="data"
* [kendoGridSelectBy]="'id'"
* kendoChartWizardGridBinding
* [(chartWizardData)]="wizardData">
* </kendo-grid>
* ```
* @remarks
* Applied to: {@link GridComponent}
*/
export class ChartWizardGridBindingDirective {
grid;
/**
* Stores the Chart Wizard data.
*
* @default []
*/
chartWizardData = [];
/**
* Emits when the `chartWizardData` collection updates.
*/
chartWizardDataChange = new EventEmitter();
/**
* @hidden
*/
data;
/**
* @hidden
*/
selectionKey;
/**
* @hidden
*/
columnKey;
constructor(grid) {
this.grid = grid;
}
ngOnInit() {
if (!this.selectionKey || !this.data) {
throw new Error('The [kendoChartWizardGridBinding] directive requires that [kendoGridBinding] and [kendoGridSelectBy] are set. ' +
'See the Grid documentation for an example on how to use the Chart Wizard without the directive.');
}
if (typeof this.selectionKey === 'function') {
throw new Error('The [kendoChartWizardGridBinding] directive supports only strings as [kendoGridSelectBy] selection key.');
}
}
onSelectionChange(selectedKeys) {
this.chartWizardData = getWizardDataFromGridSelection({
grid: this.grid,
data: this.data,
selectedKeys,
selectionKey: this.selectionKey
});
this.chartWizardDataChange.emit(this.chartWizardData);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ChartWizardGridBindingDirective, isStandalone: true, selector: "[kendoChartWizardGridBinding]", inputs: { chartWizardData: "chartWizardData", data: ["kendoGridBinding", "data"], selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { chartWizardDataChange: "chartWizardDataChange" }, host: { listeners: { "selectedKeysChange": "onSelectionChange($event)" } }, exportAs: ["kendoChartWizardGridBinding"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoChartWizardGridBinding]',
exportAs: 'kendoChartWizardGridBinding',
standalone: true
}]
}], ctorParameters: () => [{ type: i1.GridComponent }], propDecorators: { chartWizardData: [{
type: Input
}], chartWizardDataChange: [{
type: Output
}], data: [{
type: Input,
args: ['kendoGridBinding']
}], selectionKey: [{
type: Input,
args: ['kendoGridSelectBy']
}], columnKey: [{
type: Input
}], onSelectionChange: [{
type: HostListener,
args: ['selectedKeysChange', ['$event']]
}] } });