@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
189 lines (186 loc) • 12.3 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 { KeyValuePipe } from '@angular/common';
import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
import { KENDO_DATEPICKER } from '@progress/kendo-angular-dateinputs';
import { KENDO_CHECKBOX, KENDO_FORMFIELD, KENDO_NUMERICTEXTBOX, KENDO_TEXTBOX } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
import { ReactiveFormsModule } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "@angular/forms";
import * as i3 from "@progress/kendo-angular-label";
import * as i4 from "@progress/kendo-angular-inputs";
import * as i5 from "@progress/kendo-angular-dateinputs";
/**
* @hidden
*/
export class FormFormFieldComponent {
localization;
cdr;
control;
floatingLabel;
showError;
input;
constructor(localization, cdr) {
this.localization = localization;
this.cdr = cdr;
}
// required to avoid ExpressionChangedAfterItHasBeenCheckedError caused by
// binding to the label's 'for' attribute dynamically
ngAfterContentInit() {
this.cdr.detectChanges();
}
messageFor(key, errorName, field) {
return replaceMessagePlaceholder(replaceMessagePlaceholder(this.localization.get(key), 'fieldName', field), 'errorName', errorName);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFormFieldComponent, isStandalone: true, selector: "kendo-form-formfield", inputs: { control: "control", floatingLabel: "floatingLabel", showError: "showError" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
<kendo-formfield
[]="control.orientation">
@if (control.label && floatingLabel && $any(control.dataType) !== 'boolean') {
<kendo-floatinglabel
labelCssClass="k-form-label"
[]="control.label">
@if ($any(control.dataType) === 'text') {
<kendo-textbox
[]="control.formControl"></kendo-textbox>
}
@if ($any(control.dataType) === 'numeric') {
<kendo-numerictextbox
[]="control.formControl"></kendo-numerictextbox>
}
@if ($any(control.dataType) === 'date') {
<kendo-datepicker
[]="control.formControl"></kendo-datepicker>
}
</kendo-floatinglabel>
}
@if (control.label && !floatingLabel && $any(control.dataType) !== 'boolean') {
<kendo-label [style.align-items]="'start'"
labelCssClass="k-form-label"
[]="control.label"
[]="input">
</kendo-label>
}
@if (!floatingLabel && (control.dataType) === 'text') {
<kendo-textbox
[]="control.formControl"></kendo-textbox>
}
@if (!floatingLabel && $any(control.dataType) === 'numeric') {
<kendo-numerictextbox
[]="control.formControl"></kendo-numerictextbox>
}
@if (!floatingLabel && $any(control.dataType) === 'date') {
<kendo-datepicker
[]="control.formControl"></kendo-datepicker>
}
@if (control.label && $any(control.dataType) === 'boolean') {
<div
class="k-form-field-checkbox-wrap">
<kendo-checkbox
@if (control.label) {
<kendo-label
class="k-checkbox-label"
[]="cb"
[]="control.label">
</kendo-label>
}
</div>
}
@if (control?.hint) {
<kendo-formhint>{{control.hint}}</kendo-formhint>
}
@if (showError && control.formControl?.invalid && control.formControl.touched) {
@for (err of control?.formControl?.errors | keyvalue; track err) {
<kendo-formerror>{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
}
}
</kendo-formfield>
`, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.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: i4.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: i4.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFormFieldComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-form-formfield',
standalone: true,
imports: [KeyValuePipe, ReactiveFormsModule, KENDO_LABELS, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_BUTTON, KENDO_CHECKBOX, KENDO_DATEPICKER],
template: `
<kendo-formfield
[]="control.orientation">
@if (control.label && floatingLabel && $any(control.dataType) !== 'boolean') {
<kendo-floatinglabel
labelCssClass="k-form-label"
[]="control.label">
@if ($any(control.dataType) === 'text') {
<kendo-textbox
[]="control.formControl"></kendo-textbox>
}
@if ($any(control.dataType) === 'numeric') {
<kendo-numerictextbox
[]="control.formControl"></kendo-numerictextbox>
}
@if ($any(control.dataType) === 'date') {
<kendo-datepicker
[]="control.formControl"></kendo-datepicker>
}
</kendo-floatinglabel>
}
@if (control.label && !floatingLabel && $any(control.dataType) !== 'boolean') {
<kendo-label [style.align-items]="'start'"
labelCssClass="k-form-label"
[]="control.label"
[]="input">
</kendo-label>
}
@if (!floatingLabel && (control.dataType) === 'text') {
<kendo-textbox
[]="control.formControl"></kendo-textbox>
}
@if (!floatingLabel && $any(control.dataType) === 'numeric') {
<kendo-numerictextbox
[]="control.formControl"></kendo-numerictextbox>
}
@if (!floatingLabel && $any(control.dataType) === 'date') {
<kendo-datepicker
[]="control.formControl"></kendo-datepicker>
}
@if (control.label && $any(control.dataType) === 'boolean') {
<div
class="k-form-field-checkbox-wrap">
<kendo-checkbox
@if (control.label) {
<kendo-label
class="k-checkbox-label"
[]="cb"
[]="control.label">
</kendo-label>
}
</div>
}
@if (control?.hint) {
<kendo-formhint>{{control.hint}}</kendo-formhint>
}
@if (showError && control.formControl?.invalid && control.formControl.touched) {
@for (err of control?.formControl?.errors | keyvalue; track err) {
<kendo-formerror>{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
}
}
</kendo-formfield>
`
}]
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { control: [{
type: Input
}], floatingLabel: [{
type: Input
}], showError: [{
type: Input
}], input: [{
type: ViewChild,
args: ['input']
}] } });