@progress/kendo-angular-chart-wizard/esm2022/property-pane/form-field.component.mjs

Kendo UI Angular Chart Wizard component

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { LocalizationService } from '@progress/kendo-angular-l10n';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
 * @hidden
 */
export class ChartWizardPropertyPaneFormFieldComponent {
    localization;
    cdr;
    currentState;
    action;
    class;
    inputType;
    text;
    data;
    placeholder;
    colSpan = 1;
    hasLabel = true;
    isLabelInsideFormFieldWrap = false;
    value;
    disabled = false;
    valueChange = new EventEmitter();
    formField = true;
    get isColSpan2() {
        return this.colSpan === 2;
    }
    label;
    numericTextBox;
    colorPicker;
    dropDownList;
    textBox;
    comboBox;
    checkBox;
    constructor(localization, cdr) {
        this.localization = localization;
        this.cdr = cdr;
    }
    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;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-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", disabled: "disabled" }, 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: `
        @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
          <kendo-label class="k-form-label" [text]="text"></kendo-label>
        }
        <div class="k-form-field-wrap">
          @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
            <kendo-label
              class="k-form-label"
              [text]="text"
            ></kendo-label>
          }
          @if (inputType === 'numeric') {
            <kendo-numerictextbox
              fillMode="outline"
              rounded="medium"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
              [placeholder]="placeholder"
            ></kendo-numerictextbox>
          }
          @if (inputType === 'colorPicker') {
            <kendo-colorpicker
              fillMode="outline"
              rounded="medium"
              [value]="value"
              [disabled]="disabled"
              (valueChange)="valueChange.emit($event)"
            ></kendo-colorpicker>
          }
          @if (inputType === 'dropDownList') {
            <kendo-dropdownlist
              [data]="data"
              textField="text"
              valueField="value"
              [valuePrimitive]="true"
              fillMode="outline"
              rounded="medium"
              size="medium"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
            ></kendo-dropdownlist>
          }
          @if (inputType === 'comboBox') {
            <kendo-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>
          }
          @if (inputType === 'text') {
            <kendo-textbox
              fillMode="outline"
              rounded="medium"
              [placeholder]="placeholder"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
            ></kendo-textbox>
          }
          @if (inputType === 'checkbox') {
            <kendo-checkbox
              class="k-checkbox-md k-rounded-md"
              [checkedState]="value"
              (checkedStateChange)="valueChange.emit($event)"
            ></kendo-checkbox>
          }
          @if (hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox') {
            <kendo-label
              class="k-checkbox-label"
              [text]="text"
            ></kendo-label>
          }
        </div>
        `, isInline: true, dependencies: [{ 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", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "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", "adaptiveTitle", "adaptiveSubtitle", "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", "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"] }, { 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: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-chartwizard-property-pane-form-field',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: `
        @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
          <kendo-label class="k-form-label" [text]="text"></kendo-label>
        }
        <div class="k-form-field-wrap">
          @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
            <kendo-label
              class="k-form-label"
              [text]="text"
            ></kendo-label>
          }
          @if (inputType === 'numeric') {
            <kendo-numerictextbox
              fillMode="outline"
              rounded="medium"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
              [placeholder]="placeholder"
            ></kendo-numerictextbox>
          }
          @if (inputType === 'colorPicker') {
            <kendo-colorpicker
              fillMode="outline"
              rounded="medium"
              [value]="value"
              [disabled]="disabled"
              (valueChange)="valueChange.emit($event)"
            ></kendo-colorpicker>
          }
          @if (inputType === 'dropDownList') {
            <kendo-dropdownlist
              [data]="data"
              textField="text"
              valueField="value"
              [valuePrimitive]="true"
              fillMode="outline"
              rounded="medium"
              size="medium"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
            ></kendo-dropdownlist>
          }
          @if (inputType === 'comboBox') {
            <kendo-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>
          }
          @if (inputType === 'text') {
            <kendo-textbox
              fillMode="outline"
              rounded="medium"
              [placeholder]="placeholder"
              [value]="value"
              (valueChange)="valueChange.emit($event)"
            ></kendo-textbox>
          }
          @if (inputType === 'checkbox') {
            <kendo-checkbox
              class="k-checkbox-md k-rounded-md"
              [checkedState]="value"
              (checkedStateChange)="valueChange.emit($event)"
            ></kendo-checkbox>
          }
          @if (hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox') {
            <kendo-label
              class="k-checkbox-label"
              [text]="text"
            ></kendo-label>
          }
        </div>
        `,
                    standalone: true,
                    imports: [
                        LabelComponent,
                        NumericTextBoxComponent,
                        ColorPickerComponent,
                        DropDownListComponent,
                        ComboBoxComponent,
                        TextBoxComponent,
                        CheckBoxComponent
                    ]
                }]
        }], ctorParameters: () => [{ 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
            }], disabled: [{
                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]
            }] } });