@progress/kendo-angular-inputs 19.3.0-develop.1 → 19.3.0-develop.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/common/formservice.service.d.ts +14 -0
  2. package/common/models/gutters.d.ts +22 -0
  3. package/common/models/responsive-breakpoints.d.ts +24 -0
  4. package/common/utils.d.ts +0 -4
  5. package/directives.d.ts +19 -1
  6. package/esm2022/common/formservice.service.mjs +21 -0
  7. package/esm2022/common/models/gutters.mjs +5 -0
  8. package/esm2022/common/models/responsive-breakpoints.mjs +5 -0
  9. package/esm2022/common/utils.mjs +0 -4
  10. package/esm2022/directives.mjs +24 -0
  11. package/esm2022/form/form.component.mjs +152 -0
  12. package/esm2022/form/formseparator.component.mjs +80 -0
  13. package/esm2022/form/utils.mjs +134 -0
  14. package/esm2022/form.module.mjs +46 -0
  15. package/esm2022/formfield/formfield.component.mjs +47 -5
  16. package/esm2022/formfieldset/formfieldset.component.mjs +175 -0
  17. package/esm2022/index.mjs +5 -0
  18. package/esm2022/inputs.module.mjs +26 -23
  19. package/esm2022/otpinput/otpinput.component.mjs +2 -2
  20. package/esm2022/package-metadata.mjs +2 -2
  21. package/esm2022/rangeslider/rangeslider.component.mjs +3 -0
  22. package/esm2022/textarea/textarea.component.mjs +7 -1
  23. package/fesm2022/progress-kendo-angular-inputs.mjs +627 -15
  24. package/form/form.component.d.ts +70 -0
  25. package/form/formseparator.component.d.ts +32 -0
  26. package/form/utils.d.ts +57 -0
  27. package/form.module.d.ts +36 -0
  28. package/formfield/formfield.component.d.ts +19 -4
  29. package/formfieldset/formfieldset.component.d.ts +72 -0
  30. package/index.d.ts +6 -0
  31. package/inputs.module.d.ts +25 -22
  32. package/package.json +12 -12
  33. package/textarea/textarea.component.d.ts +3 -2
@@ -10,7 +10,7 @@ import { take, tap, filter, concatMap, startWith, takeUntil, skip, debounceTime,
10
10
  import * as i1 from '@progress/kendo-angular-l10n';
11
11
  import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
12
12
  import * as i7 from '@progress/kendo-angular-common';
13
- import { Keys, guid, anyChanged, isDocumentAvailable, hasObservers, KendoInput, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
13
+ import { Keys, guid, anyChanged, isDocumentAvailable, hasObservers, KendoInput, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, replaceMessagePlaceholder, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
14
14
  export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
15
15
  import { validatePackage } from '@progress/kendo-licensing';
16
16
  import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
@@ -111,10 +111,6 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
111
111
  * Used to differentiate between the Radio and CheckBox components in their base class.
112
112
  */
113
113
  const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
114
- /**
115
- * @hidden
116
- */
117
- const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
118
114
 
119
115
  /**
120
116
  * @hidden
@@ -554,8 +550,8 @@ const packageMetadata = {
554
550
  productName: 'Kendo UI for Angular',
555
551
  productCode: 'KENDOUIANGULAR',
556
552
  productCodes: ['KENDOUIANGULAR'],
557
- publishDate: 1751896380,
558
- version: '19.3.0-develop.1',
553
+ publishDate: 1752746728,
554
+ version: '19.3.0-develop.11',
559
555
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
560
556
  };
561
557
 
@@ -1872,6 +1868,7 @@ class RangeSliderComponent extends SliderBase {
1872
1868
  this.ngZone = ngZone;
1873
1869
  this.changeDetector = changeDetector;
1874
1870
  this.hostElement = hostElement;
1871
+ validatePackage(packageMetadata);
1875
1872
  }
1876
1873
  /**
1877
1874
  * Focuses the RangeSlider.
@@ -14203,6 +14200,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14203
14200
  args: ['attr.id']
14204
14201
  }] } });
14205
14202
 
14203
+ /**
14204
+ * @hidden
14205
+ */
14206
+ class FormService {
14207
+ formWidth = new BehaviorSubject(null);
14208
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
14209
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, providedIn: 'root' });
14210
+ }
14211
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, decorators: [{
14212
+ type: Injectable,
14213
+ args: [{
14214
+ providedIn: 'root',
14215
+ }]
14216
+ }] });
14217
+
14218
+ /**
14219
+ * @hidden
14220
+ */
14221
+ function innerWidth(element) {
14222
+ let width = element.clientWidth;
14223
+ const style = getComputedStyle(element);
14224
+ width -= (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
14225
+ width -= (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderRightWidth) || 0);
14226
+ return width;
14227
+ }
14228
+ /**
14229
+ * @hidden
14230
+ */
14231
+ function processBreakpoints(breakpoints, containerWidth) {
14232
+ if (!breakpoints?.length || containerWidth === null) {
14233
+ return null;
14234
+ }
14235
+ for (const [index, breakpoint] of breakpoints.entries()) {
14236
+ const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
14237
+ const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
14238
+ if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
14239
+ return breakpoint.value;
14240
+ }
14241
+ }
14242
+ return null;
14243
+ }
14244
+ /**
14245
+ * @hidden
14246
+ */
14247
+ const calculateColumns = (cols, containerWidth) => {
14248
+ if (!cols) {
14249
+ return null;
14250
+ }
14251
+ if (Array.isArray(cols) && cols.length > 0) {
14252
+ return processBreakpoints(cols, containerWidth);
14253
+ }
14254
+ else if (typeof cols === 'number') {
14255
+ return cols;
14256
+ }
14257
+ return null;
14258
+ };
14259
+ /**
14260
+ * @hidden
14261
+ *
14262
+ * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
14263
+ */
14264
+ const calculateGutters = (gutters, containerWidth) => {
14265
+ if (!gutters) {
14266
+ return null;
14267
+ }
14268
+ if (typeof gutters === 'number') {
14269
+ return { cols: gutters, rows: gutters };
14270
+ }
14271
+ else if (Array.isArray(gutters)) {
14272
+ const processedGutters = processBreakpoints(gutters, containerWidth);
14273
+ return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
14274
+ }
14275
+ else if (typeof gutters === 'object') {
14276
+ const gutterObject = gutters;
14277
+ const result = { rows: null, cols: null };
14278
+ if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
14279
+ if (typeof gutterObject.cols === 'number') {
14280
+ result.cols = gutterObject.cols;
14281
+ }
14282
+ else if (Array.isArray(gutterObject.cols)) {
14283
+ result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
14284
+ }
14285
+ }
14286
+ else {
14287
+ result.cols = null;
14288
+ }
14289
+ if (gutterObject.rows !== undefined) {
14290
+ if (typeof gutterObject.rows === 'number') {
14291
+ result.rows = gutterObject.rows;
14292
+ }
14293
+ else if (Array.isArray(gutterObject.rows)) {
14294
+ result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
14295
+ }
14296
+ }
14297
+ else {
14298
+ result.rows = null;
14299
+ }
14300
+ return result;
14301
+ }
14302
+ return null;
14303
+ };
14304
+ /**
14305
+ * @hidden
14306
+ *
14307
+ * Calculates column span value based on responsive breakpoints or fixed number
14308
+ */
14309
+ const calculateColSpan = (colSpan, containerWidth) => {
14310
+ if (!colSpan) {
14311
+ return null;
14312
+ }
14313
+ if (typeof colSpan === 'number') {
14314
+ return colSpan;
14315
+ }
14316
+ else if (Array.isArray(colSpan) && colSpan.length > 0) {
14317
+ return processBreakpoints(colSpan, containerWidth);
14318
+ }
14319
+ return null;
14320
+ };
14321
+ /**
14322
+ * @hidden
14323
+ *
14324
+ * Generates CSS class names for columns
14325
+ */
14326
+ const generateColumnClass = (columnsNumber) => {
14327
+ return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
14328
+ };
14329
+ /**
14330
+ * @hidden
14331
+ *
14332
+ * Generates CSS class names for gutters
14333
+ */
14334
+ const generateGutterClasses = (gutters) => {
14335
+ return {
14336
+ rows: gutters?.rows ? `k-gap-y-${gutters.rows}` : '',
14337
+ cols: gutters?.cols ? `k-gap-x-${gutters.cols}` : ''
14338
+ };
14339
+ };
14340
+ /**
14341
+ * @hidden
14342
+ *
14343
+ * Generates CSS class name for column span
14344
+ */
14345
+ const generateColSpanClass = (colSpan) => {
14346
+ return colSpan ? `k-col-span-${colSpan}` : '';
14347
+ };
14348
+
14206
14349
  /**
14207
14350
  * Represents the Kendo UI FormField component for Angular.
14208
14351
  * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
@@ -14225,6 +14368,7 @@ class FormFieldComponent {
14225
14368
  renderer;
14226
14369
  localizationService;
14227
14370
  hostElement;
14371
+ formService;
14228
14372
  hostClass = true;
14229
14373
  /**
14230
14374
  * @hidden
@@ -14267,6 +14411,8 @@ class FormFieldComponent {
14267
14411
  /**
14268
14412
  * Specifies the layout orientation of the form field.
14269
14413
  *
14414
+ * @hidden
14415
+ *
14270
14416
  * @default 'vertical'
14271
14417
  */
14272
14418
  orientation = 'vertical';
@@ -14278,6 +14424,11 @@ class FormFieldComponent {
14278
14424
  * @default 'initial'
14279
14425
  */
14280
14426
  showErrors = 'initial';
14427
+ /**
14428
+ * Defines the colspan for the form field.
14429
+ * Can be a number or an array of responsive breakpoints.
14430
+ */
14431
+ colSpan;
14281
14432
  /**
14282
14433
  * @hidden
14283
14434
  */
@@ -14299,15 +14450,23 @@ class FormFieldComponent {
14299
14450
  control;
14300
14451
  subscriptions = new Subscription();
14301
14452
  rtl = false;
14302
- constructor(renderer, localizationService, hostElement) {
14453
+ _formWidth = null;
14454
+ _colSpanClass = null;
14455
+ _previousColSpan = null;
14456
+ constructor(renderer, localizationService, hostElement, formService) {
14303
14457
  this.renderer = renderer;
14304
14458
  this.localizationService = localizationService;
14305
14459
  this.hostElement = hostElement;
14460
+ this.formService = formService;
14306
14461
  validatePackage(packageMetadata);
14307
14462
  this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
14308
14463
  this.rtl = rtl;
14309
14464
  this.direction = this.rtl ? 'rtl' : 'ltr';
14310
14465
  }));
14466
+ this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
14467
+ this._formWidth = width;
14468
+ this.updateColSpanClass();
14469
+ }));
14311
14470
  }
14312
14471
  ngAfterViewInit() {
14313
14472
  this.setDescription();
@@ -14315,6 +14474,11 @@ class FormFieldComponent {
14315
14474
  ngAfterViewChecked() {
14316
14475
  this.updateDescription();
14317
14476
  }
14477
+ ngOnChanges(changes) {
14478
+ if (changes['colSpan']) {
14479
+ this.updateColSpanClass();
14480
+ }
14481
+ }
14318
14482
  ngOnDestroy() {
14319
14483
  this.subscriptions.unsubscribe();
14320
14484
  }
@@ -14419,14 +14583,29 @@ class FormFieldComponent {
14419
14583
  this.subscriptions.add(this.errorChildren.changes.subscribe(() => this.updateDescription()));
14420
14584
  this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
14421
14585
  }
14422
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
14423
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
14586
+ updateColSpanClass() {
14587
+ const hostElement = this.hostElement.nativeElement;
14588
+ const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
14589
+ if (newColSpan !== this._previousColSpan) {
14590
+ const newClass = generateColSpanClass(newColSpan);
14591
+ if (this._colSpanClass) {
14592
+ this.renderer.removeClass(hostElement, this._colSpanClass);
14593
+ }
14594
+ if (newClass) {
14595
+ this.renderer.addClass(hostElement, newClass);
14596
+ }
14597
+ this._colSpanClass = newClass;
14598
+ this._previousColSpan = newColSpan;
14599
+ }
14600
+ }
14601
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
14602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
14424
14603
  LocalizationService,
14425
14604
  {
14426
14605
  provide: L10N_PREFIX,
14427
14606
  useValue: 'kendo.formfield'
14428
14607
  }
14429
- ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], ngImport: i0, template: `
14608
+ ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
14430
14609
  <ng-content select="label, kendo-label"></ng-content>
14431
14610
  <div class="k-form-field-wrap">
14432
14611
  <ng-content></ng-content>
@@ -14457,7 +14636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14457
14636
  standalone: true,
14458
14637
  imports: [NgIf]
14459
14638
  }]
14460
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
14639
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: FormService }]; }, propDecorators: { hostClass: [{
14461
14640
  type: HostBinding,
14462
14641
  args: ['class.k-form-field']
14463
14642
  }], direction: [{
@@ -14490,6 +14669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14490
14669
  type: Input
14491
14670
  }], showErrors: [{
14492
14671
  type: Input
14672
+ }], colSpan: [{
14673
+ type: Input
14493
14674
  }] } });
14494
14675
 
14495
14676
  /**
@@ -17253,6 +17434,12 @@ class TextAreaComponent extends TextFieldsBase {
17253
17434
  validatePackage(packageMetadata);
17254
17435
  this.direction = localizationService.rtl ? 'rtl' : 'ltr';
17255
17436
  }
17437
+ ngAfterContentInit() {
17438
+ this.ngZone.onStable.pipe((take(1))).subscribe(() => {
17439
+ this.prefix && (this.prefix.orientation = this.adornmentsOrientation);
17440
+ this.suffix && (this.suffix.orientation = this.adornmentsOrientation);
17441
+ });
17442
+ }
17256
17443
  ngAfterViewInit() {
17257
17444
  this.ngZone.runOutsideAngular(() => {
17258
17445
  this.handleFlow();
@@ -18810,6 +18997,376 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
18810
18997
  }]
18811
18998
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
18812
18999
 
19000
+ /**
19001
+ * Represents the Kendo UI Form component for Angular.
19002
+ *
19003
+ * @remarks
19004
+ * Supported children components are: {@link FormFieldComponent}, {@link FormSeparatorComponent}, and {@link FormFieldSetComponent}.
19005
+ */
19006
+ class FormComponent {
19007
+ element;
19008
+ cdr;
19009
+ formService;
19010
+ /**
19011
+ * Defines the orientation of the form.
19012
+ *
19013
+ * @default 'vertical'
19014
+ */
19015
+ orientation = 'vertical';
19016
+ /**
19017
+ * Defines the number of columns in the form.
19018
+ * Can be a number or an array of responsive breakpoints.
19019
+ */
19020
+ cols;
19021
+ /**
19022
+ * Defines the gutters for the form.
19023
+ * You can specify gutters for rows and columns.
19024
+ */
19025
+ gutters;
19026
+ /**
19027
+ * @hidden
19028
+ */
19029
+ columnsClass = '';
19030
+ /**
19031
+ * @hidden
19032
+ */
19033
+ rowsGutterClass = '';
19034
+ /**
19035
+ * @hidden
19036
+ */
19037
+ colsGutterClass = '';
19038
+ /**
19039
+ * @hidden
19040
+ */
19041
+ showLicenseWatermark = false;
19042
+ formClass = true;
19043
+ get horizontalClass() {
19044
+ return this.orientation === 'horizontal';
19045
+ }
19046
+ _formColumnsNumber;
19047
+ _formGutters;
19048
+ constructor(element, cdr, formService) {
19049
+ this.element = element;
19050
+ this.cdr = cdr;
19051
+ this.formService = formService;
19052
+ const isValid = validatePackage(packageMetadata);
19053
+ this.showLicenseWatermark = shouldShowValidationUI(isValid);
19054
+ }
19055
+ ngAfterContentInit() {
19056
+ this.applyColumns();
19057
+ this.applyGutters();
19058
+ this.formService.formWidth.next(innerWidth(this.element.nativeElement));
19059
+ }
19060
+ ngOnChanges(changes) {
19061
+ if (changes['cols']) {
19062
+ this.applyColumns();
19063
+ }
19064
+ else if (changes['gutters']) {
19065
+ this.applyGutters();
19066
+ }
19067
+ }
19068
+ /**
19069
+ * @hidden
19070
+ */
19071
+ onResize() {
19072
+ this.formService.formWidth.next(innerWidth(this.element.nativeElement));
19073
+ const previousColumnsNumber = this._formColumnsNumber;
19074
+ const previousGutters = this._formGutters;
19075
+ this.applyColumns();
19076
+ this.applyGutters();
19077
+ if (previousColumnsNumber !== this._formColumnsNumber) {
19078
+ this.cdr.detectChanges();
19079
+ }
19080
+ if (previousGutters?.cols !== this._formGutters?.cols || previousGutters?.rows !== this._formGutters?.rows) {
19081
+ this.cdr.detectChanges();
19082
+ }
19083
+ }
19084
+ applyColumns() {
19085
+ const containerWidth = innerWidth(this.element.nativeElement);
19086
+ this._formColumnsNumber = calculateColumns(this.cols, containerWidth);
19087
+ this.updateColumnClasses();
19088
+ }
19089
+ applyGutters() {
19090
+ const containerWidth = innerWidth(this.element.nativeElement);
19091
+ this._formGutters = calculateGutters(this.gutters, containerWidth);
19092
+ this.updateGutterClasses();
19093
+ }
19094
+ updateColumnClasses() {
19095
+ this.columnsClass = generateColumnClass(this._formColumnsNumber);
19096
+ }
19097
+ updateGutterClasses() {
19098
+ const gutterClasses = generateGutterClasses(this._formGutters);
19099
+ this.rowsGutterClass = gutterClasses.rows;
19100
+ this.colsGutterClass = gutterClasses.cols;
19101
+ }
19102
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
19103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class.k-form": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
19104
+ <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
19105
+ <ng-content></ng-content>
19106
+ </div>
19107
+ <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
19108
+ <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
19109
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
19110
+ }
19111
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
19112
+ type: Component,
19113
+ args: [{
19114
+ exportAs: 'kendoForm',
19115
+ selector: 'form[kendoForm]',
19116
+ template: `
19117
+ <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
19118
+ <ng-content></ng-content>
19119
+ </div>
19120
+ <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
19121
+ <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
19122
+ `,
19123
+ standalone: true,
19124
+ imports: [NgClass, NgIf, ResizeSensorComponent, WatermarkOverlayComponent],
19125
+ }]
19126
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: FormService }]; }, propDecorators: { orientation: [{
19127
+ type: Input
19128
+ }], cols: [{
19129
+ type: Input
19130
+ }], gutters: [{
19131
+ type: Input
19132
+ }], formClass: [{
19133
+ type: HostBinding,
19134
+ args: ['class.k-form']
19135
+ }], horizontalClass: [{
19136
+ type: HostBinding,
19137
+ args: ['class.k-form-horizontal']
19138
+ }] } });
19139
+
19140
+ /**
19141
+ * Represents the Kendo UI Form Separator component for Angular.
19142
+ */
19143
+ class FormSeparatorComponent {
19144
+ renderer;
19145
+ hostElement;
19146
+ formService;
19147
+ hostClass = true;
19148
+ /**
19149
+ * Defines the colspan for the separator element related to the parent Form component columns.
19150
+ * Can be a number or an array of responsive breakpoints.
19151
+ */
19152
+ colSpan;
19153
+ _formWidth = null;
19154
+ _colSpanClass = null;
19155
+ _previousColSpan = null;
19156
+ subscriptions = new Subscription();
19157
+ constructor(renderer, hostElement, formService) {
19158
+ this.renderer = renderer;
19159
+ this.hostElement = hostElement;
19160
+ this.formService = formService;
19161
+ validatePackage(packageMetadata);
19162
+ this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
19163
+ this._formWidth = width;
19164
+ this.updateColSpanClass();
19165
+ }));
19166
+ }
19167
+ ngOnChanges(changes) {
19168
+ if (changes['colSpan']) {
19169
+ this.updateColSpanClass();
19170
+ }
19171
+ }
19172
+ ngOnDestroy() {
19173
+ this.subscriptions.unsubscribe();
19174
+ }
19175
+ updateColSpanClass() {
19176
+ const hostElement = this.hostElement.nativeElement;
19177
+ const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
19178
+ if (newColSpan !== this._previousColSpan) {
19179
+ const newClass = generateColSpanClass(newColSpan);
19180
+ if (this._colSpanClass) {
19181
+ this.renderer.removeClass(hostElement, this._colSpanClass);
19182
+ }
19183
+ if (newClass) {
19184
+ this.renderer.addClass(hostElement, newClass);
19185
+ }
19186
+ this._colSpanClass = newClass;
19187
+ this._previousColSpan = newColSpan;
19188
+ }
19189
+ }
19190
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
19191
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSeparatorComponent, isStandalone: true, selector: "kendo-form-separator", inputs: { colSpan: "colSpan" }, host: { properties: { "class.k-form-separator": "this.hostClass" } }, exportAs: ["kendoFormSeparator"], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
19192
+ }
19193
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSeparatorComponent, decorators: [{
19194
+ type: Component,
19195
+ args: [{
19196
+ exportAs: 'kendoFormSeparator',
19197
+ selector: 'kendo-form-separator',
19198
+ template: ``,
19199
+ standalone: true,
19200
+ }]
19201
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FormService }]; }, propDecorators: { hostClass: [{
19202
+ type: HostBinding,
19203
+ args: ['class.k-form-separator']
19204
+ }], colSpan: [{
19205
+ type: Input
19206
+ }] } });
19207
+
19208
+ /**
19209
+ * Represents the Kendo UI FormFieldSet component for Angular.
19210
+ *
19211
+ * @remarks
19212
+ * Supported children components are: {@link FormFieldComponent} and {@link FormSeparatorComponent}.
19213
+ */
19214
+ class FormFieldSetComponent {
19215
+ elementRef;
19216
+ renderer;
19217
+ formService;
19218
+ cdr;
19219
+ formFieldSetClass = true;
19220
+ /**
19221
+ * Defines the legend for the fieldset.
19222
+ */
19223
+ legend;
19224
+ /**
19225
+ * Defines the number of columns the fieldset.
19226
+ * Can be a number or an array of responsive breakpoints.
19227
+ */
19228
+ cols;
19229
+ /**
19230
+ * Defines the gutters for the fieldset.
19231
+ * You can specify gutters for rows and columns.
19232
+ */
19233
+ gutters;
19234
+ /**
19235
+ * Defines the colspan for the fieldset related to the parent Form component columns.
19236
+ * Can be a number or an array of responsive breakpoints.
19237
+ */
19238
+ colSpan;
19239
+ /**
19240
+ * @hidden
19241
+ */
19242
+ columnsClass = '';
19243
+ /**
19244
+ * @hidden
19245
+ */
19246
+ rowsGutterClass = '';
19247
+ /**
19248
+ * @hidden
19249
+ */
19250
+ colsGutterClass = '';
19251
+ _formColumnsNumber;
19252
+ _colSpanClass = null;
19253
+ _formWidth = null;
19254
+ _formGutters = null;
19255
+ _previousColSpan = null;
19256
+ _previousCols = null;
19257
+ _previousGutters = null;
19258
+ subs = new Subscription();
19259
+ constructor(elementRef, renderer, formService, cdr) {
19260
+ this.elementRef = elementRef;
19261
+ this.renderer = renderer;
19262
+ this.formService = formService;
19263
+ this.cdr = cdr;
19264
+ validatePackage(packageMetadata);
19265
+ }
19266
+ ngOnInit() {
19267
+ this.subs.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
19268
+ this._formWidth = width;
19269
+ this.applyColumns();
19270
+ this.applyGutters();
19271
+ this.updateColSpanClass();
19272
+ }));
19273
+ }
19274
+ ngOnChanges(changes) {
19275
+ if (changes['colSpan']) {
19276
+ this.updateColSpanClass();
19277
+ }
19278
+ if (changes['cols']) {
19279
+ this.applyColumns();
19280
+ }
19281
+ if (changes['gutters']) {
19282
+ this.applyGutters();
19283
+ }
19284
+ }
19285
+ ngOnDestroy() {
19286
+ this.subs.unsubscribe();
19287
+ }
19288
+ applyColumns() {
19289
+ const containerWidth = this._formWidth;
19290
+ const newColumnsNumber = calculateColumns(this.cols, containerWidth);
19291
+ if (newColumnsNumber !== this._previousCols) {
19292
+ this._formColumnsNumber = newColumnsNumber;
19293
+ this.updateColumnClasses();
19294
+ this._previousCols = newColumnsNumber;
19295
+ }
19296
+ }
19297
+ applyGutters() {
19298
+ const containerWidth = this._formWidth;
19299
+ const newGutters = calculateGutters(this.gutters, containerWidth);
19300
+ if (newGutters && (newGutters.cols !== this._previousGutters?.cols || newGutters.rows !== this._previousGutters?.rows)) {
19301
+ this._formGutters = newGutters;
19302
+ this.updateGutterClasses();
19303
+ this._previousGutters = newGutters;
19304
+ }
19305
+ }
19306
+ updateColumnClasses() {
19307
+ this.columnsClass = generateColumnClass(this._formColumnsNumber);
19308
+ this.cdr.detectChanges();
19309
+ }
19310
+ updateGutterClasses() {
19311
+ const gutterClasses = generateGutterClasses(this._formGutters);
19312
+ this.rowsGutterClass = gutterClasses.rows;
19313
+ this.colsGutterClass = gutterClasses.cols;
19314
+ }
19315
+ updateColSpanClass() {
19316
+ const hostElement = this.elementRef.nativeElement;
19317
+ const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
19318
+ if (newColSpan !== this._previousColSpan) {
19319
+ const newClass = generateColSpanClass(newColSpan);
19320
+ if (this._colSpanClass) {
19321
+ this.renderer.removeClass(hostElement, this._colSpanClass);
19322
+ }
19323
+ if (newClass) {
19324
+ this.renderer.addClass(hostElement, newClass);
19325
+ }
19326
+ this._colSpanClass = newClass;
19327
+ this._previousColSpan = newColSpan;
19328
+ this.cdr.detectChanges();
19329
+ }
19330
+ }
19331
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
19332
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass" } }, exportAs: ["kendoFormFieldSet"], usesOnChanges: true, ngImport: i0, template: `
19333
+ <legend *ngIf="legend" class="k-form-legend">
19334
+ {{ legend }}
19335
+ </legend>
19336
+ <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
19337
+ <ng-content></ng-content>
19338
+ </div>
19339
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
19340
+ }
19341
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSetComponent, decorators: [{
19342
+ type: Component,
19343
+ args: [{
19344
+ exportAs: 'kendoFormFieldSet',
19345
+ selector: 'fieldset[kendoFormFieldSet]',
19346
+ template: `
19347
+ <legend *ngIf="legend" class="k-form-legend">
19348
+ {{ legend }}
19349
+ </legend>
19350
+ <div class="k-form-layout k-d-grid" [ngClass]="[columnsClass, rowsGutterClass, colsGutterClass]">
19351
+ <ng-content></ng-content>
19352
+ </div>
19353
+ `,
19354
+ standalone: true,
19355
+ imports: [NgIf, NgClass],
19356
+ }]
19357
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formFieldSetClass: [{
19358
+ type: HostBinding,
19359
+ args: ['class.k-form-fieldset']
19360
+ }], legend: [{
19361
+ type: Input
19362
+ }], cols: [{
19363
+ type: Input
19364
+ }], gutters: [{
19365
+ type: Input
19366
+ }], colSpan: [{
19367
+ type: Input
19368
+ }] } });
19369
+
18813
19370
  /**
18814
19371
  * Use the `KENDO_TEXTBOX` utility array to add all TextBox-related components and directives to a standalone Angular component.
18815
19372
  *
@@ -18988,6 +19545,26 @@ const KENDO_FORMFIELD = [
18988
19545
  HintComponent,
18989
19546
  ErrorComponent
18990
19547
  ];
19548
+ /**
19549
+ * Use the `KENDO_FORM` utility array to add all Form-related components and directives to a standalone Angular component.
19550
+ *
19551
+ * @example
19552
+ * ```typescript
19553
+ * import { KENDO_FORM } from '@progress/kendo-angular-inputs';
19554
+ * @Component({
19555
+ * standalone: true,
19556
+ * imports: [KENDO_FORM],
19557
+ * template: `<form kendoForm>...</form>`
19558
+ * })
19559
+ * export class MyComponent {}
19560
+ * ```
19561
+ */
19562
+ const KENDO_FORM = [
19563
+ FormComponent,
19564
+ FormSeparatorComponent,
19565
+ FormFieldSetComponent,
19566
+ ...KENDO_FORMFIELD
19567
+ ];
18991
19568
  /**
18992
19569
  * Use the `KENDO_SLIDER` utility array to add all Slider-related components and directives to a standalone Angular component.
18993
19570
  *
@@ -19158,6 +19735,7 @@ const KENDO_INPUTS = [
19158
19735
  ...KENDO_CHECKBOX,
19159
19736
  ...KENDO_RADIOBUTTON,
19160
19737
  ...KENDO_SWITCH,
19738
+ ...KENDO_FORM,
19161
19739
  ...KENDO_FORMFIELD,
19162
19740
  ...KENDO_SLIDER,
19163
19741
  ...KENDO_RANGESLIDER,
@@ -19193,8 +19771,8 @@ const KENDO_INPUTS = [
19193
19771
  */
19194
19772
  class InputsModule {
19195
19773
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
19196
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
19197
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i7.SeparatorComponent] });
19774
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
19775
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, FormComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i7.SeparatorComponent] });
19198
19776
  }
19199
19777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
19200
19778
  type: NgModule,
@@ -19643,6 +20221,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
19643
20221
  }]
19644
20222
  }] });
19645
20223
 
20224
+ //IMPORTANT: NgModule export kept for backwards compatibility
20225
+ /**
20226
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the FormField, Error, and Hint components.
20227
+ *
20228
+ * Use this module to add Form features to your NgModule-based Angular application.
20229
+ *
20230
+ * @example
20231
+ * ```typescript
20232
+ * import { FormModule } from '@progress/kendo-angular-inputs';
20233
+ * import { NgModule } from '@angular/core';
20234
+ * import { BrowserModule } from '@angular/platform-browser';
20235
+ * import { AppComponent } from './app.component';
20236
+ *
20237
+ * @NgModule({
20238
+ * declarations: [AppComponent],
20239
+ * imports: [BrowserModule, FormModule],
20240
+ * bootstrap: [AppComponent]
20241
+ * })
20242
+ * export class AppModule {}
20243
+ * ```
20244
+ */
20245
+ class FormModule {
20246
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
20247
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent], exports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent] });
20248
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, imports: [FormComponent] });
20249
+ }
20250
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormModule, decorators: [{
20251
+ type: NgModule,
20252
+ args: [{
20253
+ imports: [...KENDO_FORM],
20254
+ exports: [...KENDO_FORM]
20255
+ }]
20256
+ }] });
20257
+
19646
20258
  //IMPORTANT: NgModule export kept for backwards compatibility
19647
20259
  /**
19648
20260
  * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Signature component.
@@ -19717,5 +20329,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
19717
20329
  * Generated bundle index. Do not edit.
19718
20330
  */
19719
20331
 
19720
- export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, OTPInputModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
20332
+ export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormComponent, FormFieldComponent, FormFieldModule, FormFieldSetComponent, FormModule, FormSeparatorComponent, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORM, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, OTPInputModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
19721
20333