@progress/kendo-angular-chart-wizard 16.6.0-develop.10

package/esm2020/property-pane/data-tab.component.mjs

@@ -0,0 +1,229 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { StateService } from '../state.service';
+import { ActionTypes, isCategorical, updateState } from '../chart-wizard-state';
+import { FormBuilder } from '@angular/forms';
+import { CellTemplateDirective, ColumnComponent, CommandColumnComponent, DataBindingDirective, GridComponent, GridToolbarFocusableDirective, ReactiveEditingDirective, RemoveCommandDirective, RowReorderColumnComponent, ToolbarTemplateDirective } from '@progress/kendo-angular-grid';
+import { plusIcon, trashIcon } from '@progress/kendo-svg-icons';
+import { NgIf } from '@angular/common';
+import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
+import { DropDownListComponent, ValueTemplateDirective } from '@progress/kendo-angular-dropdowns';
+import { ButtonComponent, FocusableDirective } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "../state.service";
+import * as i2 from "@angular/forms";
+/**
+ * @hidden
+ */
+export class ChartWizardPropertyPaneFormatTabComponent {
+    constructor(stateService, formBuilder) {
+        this.stateService = stateService;
+        this.formBuilder = formBuilder;
+        this.categoryAxisX = ActionTypes.categoryAxisX;
+        this.valueAxisY = ActionTypes.valueAxisY;
+        this.seriesChange = ActionTypes.seriesChange;
+        this.trashIcon = trashIcon;
+        this.plusIcon = plusIcon;
+        this.isCategorical = isCategorical;
+        this.formGroup = this.formBuilder.group({
+            name: null,
+        });
+    }
+    updateState(action, value) {
+        this.stateService.state = updateState(this.stateService.state, action, value);
+    }
+    createFormGroup(args) {
+        const item = args.isNew ? {} : args.dataItem;
+        this.formGroup = this.formBuilder.group({
+            name: item.name,
+        });
+        return this.formGroup;
+    }
+    addData() {
+        this.stateService.state.series.push(this.stateService.deletedSeries[0]);
+        this.stateService.deletedSeries.shift();
+        this.updateState(this.seriesChange, this.stateService.state.series);
+    }
+    removeData(event) {
+        this.stateService.deletedSeries.push(event.dataItem);
+        this.updateState(this.seriesChange, event.sender.data.data);
+    }
+    onRowReorder(grid) {
+        this.updateState(this.seriesChange, grid.data.data);
+    }
+    isDisabled(grid) {
+        return grid.data.data.length === this.stateService.state.initialSeries.length;
+    }
+}
+ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-data-tab", ngImport: i0, template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                >
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.yField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-data-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                >
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.yField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
+    `,
+                    standalone: true,
+                    imports: [
+                        ExpansionPanelComponent,
+                        DropDownListComponent,
+                        ValueTemplateDirective,
+                        NgIf,
+                        GridComponent,
+                        ReactiveEditingDirective,
+                        DataBindingDirective,
+                        ToolbarTemplateDirective,
+                        ButtonComponent,
+                        RowReorderColumnComponent,
+                        ColumnComponent,
+                        CommandColumnComponent,
+                        CellTemplateDirective,
+                        GridToolbarFocusableDirective,
+                        FocusableDirective,
+                        RemoveCommandDirective
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.StateService }, { type: i2.FormBuilder }]; } });

package/esm2020/property-pane/form-field.component.mjs

@@ -0,0 +1,245 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, ViewChild, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { ComboBoxComponent, DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import { CheckBoxComponent, ColorPickerComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
+import { LabelComponent } from '@progress/kendo-angular-label';
+import { ActionTypes } from '../chart-wizard-state';
+import { NgIf } from '@angular/common';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class ChartWizardPropertyPaneFormFieldComponent {
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+        this.colSpan = 1;
+        this.hasLabel = true;
+        this.isLabelInsideFormFieldWrap = false;
+        this.valueChange = new EventEmitter();
+        this.formField = true;
+    }
+    get isColSpan2() {
+        return this.colSpan === 2;
+    }
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    ngAfterViewInit() {
+        if (this.hasLabel) {
+            this.label.for =
+                this.numericTextBox ||
+                    this.colorPicker ||
+                    this.dropDownList ||
+                    this.textBox ||
+                    this.comboBox ||
+                    this.checkBox;
+        }
+    }
+}
+ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "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"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [
+                        NgIf,
+                        LabelComponent,
+                        NumericTextBoxComponent,
+                        ColorPickerComponent,
+                        DropDownListComponent,
+                        ComboBoxComponent,
+                        TextBoxComponent,
+                        CheckBoxComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentState: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], colSpan: [{
+                type: Input
+            }], hasLabel: [{
+                type: Input
+            }], isLabelInsideFormFieldWrap: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formField: [{
+                type: HostBinding,
+                args: ['class.k-form-field']
+            }], isColSpan2: [{
+                type: HostBinding,
+                args: ['class.k-col-span-2']
+            }], label: [{
+                type: ViewChild,
+                args: [LabelComponent]
+            }], numericTextBox: [{
+                type: ViewChild,
+                args: [NumericTextBoxComponent]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: [ColorPickerComponent]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: [DropDownListComponent]
+            }], textBox: [{
+                type: ViewChild,
+                args: [TextBoxComponent]
+            }], comboBox: [{
+                type: ViewChild,
+                args: [ComboBoxComponent]
+            }], checkBox: [{
+                type: ViewChild,
+                args: [CheckBoxComponent]
+            }] } });