@progress/kendo-angular-inputs 21.4.1 → 22.0.0

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 (189) hide show
  1. package/colorpicker/localization/messages.d.ts +1 -1
  2. package/common/radio-checkbox.base.d.ts +1 -1
  3. package/fesm2022/progress-kendo-angular-inputs.mjs +321 -321
  4. package/numerictextbox/localization/messages.d.ts +1 -1
  5. package/otpinput/localization/messages.d.ts +1 -1
  6. package/package.json +17 -25
  7. package/rangeslider/localization/messages.d.ts +1 -1
  8. package/signature/localization/messages.d.ts +1 -1
  9. package/slider/localization/messages.d.ts +1 -1
  10. package/sliders-common/slider-base.d.ts +1 -1
  11. package/switch/localization/messages.d.ts +1 -1
  12. package/text-fields-common/text-fields-base.d.ts +1 -1
  13. package/textbox/localization/messages.d.ts +1 -1
  14. package/esm2022/checkbox/checkbox.component.mjs +0 -227
  15. package/esm2022/checkbox/checkbox.directive.mjs +0 -96
  16. package/esm2022/checkbox/checked-state.mjs +0 -5
  17. package/esm2022/checkbox.module.mjs +0 -42
  18. package/esm2022/colorpicker/adaptiveness/adaptive-close-button.component.mjs +0 -62
  19. package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +0 -219
  20. package/esm2022/colorpicker/color-contrast-svg.component.mjs +0 -108
  21. package/esm2022/colorpicker/color-gradient-numeric-label.directive.mjs +0 -37
  22. package/esm2022/colorpicker/color-gradient-text-label.directive.mjs +0 -34
  23. package/esm2022/colorpicker/color-gradient.component.mjs +0 -1110
  24. package/esm2022/colorpicker/color-input.component.mjs +0 -498
  25. package/esm2022/colorpicker/color-palette.component.mjs +0 -629
  26. package/esm2022/colorpicker/colorpicker.component.mjs +0 -1315
  27. package/esm2022/colorpicker/constants.mjs +0 -40
  28. package/esm2022/colorpicker/contrast-validation.component.mjs +0 -83
  29. package/esm2022/colorpicker/contrast.component.mjs +0 -114
  30. package/esm2022/colorpicker/events/active-color-click-event.mjs +0 -55
  31. package/esm2022/colorpicker/events/cancel-event.mjs +0 -18
  32. package/esm2022/colorpicker/events/close-event.mjs +0 -10
  33. package/esm2022/colorpicker/events/kendo-drag-event.mjs +0 -5
  34. package/esm2022/colorpicker/events/open-event.mjs +0 -10
  35. package/esm2022/colorpicker/events.mjs +0 -8
  36. package/esm2022/colorpicker/flatcolorpicker-actions.component.mjs +0 -112
  37. package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +0 -244
  38. package/esm2022/colorpicker/flatcolorpicker.component.mjs +0 -942
  39. package/esm2022/colorpicker/localization/colorgradient-localization.service.mjs +0 -46
  40. package/esm2022/colorpicker/localization/colorpalette-localization.service.mjs +0 -46
  41. package/esm2022/colorpicker/localization/colorpicker-localization.service.mjs +0 -31
  42. package/esm2022/colorpicker/localization/custom-messages.component.mjs +0 -51
  43. package/esm2022/colorpicker/localization/flatcolorpicker-localization.service.mjs +0 -46
  44. package/esm2022/colorpicker/localization/localized-colorpicker-messages.directive.mjs +0 -39
  45. package/esm2022/colorpicker/localization/messages.mjs +0 -201
  46. package/esm2022/colorpicker/models/actions-layout.mjs +0 -5
  47. package/esm2022/colorpicker/models/adaptive-mode.mjs +0 -8
  48. package/esm2022/colorpicker/models/colorpicker-view.mjs +0 -5
  49. package/esm2022/colorpicker/models/gradient-settings.mjs +0 -5
  50. package/esm2022/colorpicker/models/hsva.mjs +0 -5
  51. package/esm2022/colorpicker/models/output-format.mjs +0 -5
  52. package/esm2022/colorpicker/models/palette-presets.mjs +0 -62
  53. package/esm2022/colorpicker/models/palette-settings.mjs +0 -5
  54. package/esm2022/colorpicker/models/popup-settings.mjs +0 -5
  55. package/esm2022/colorpicker/models/rgb.mjs +0 -5
  56. package/esm2022/colorpicker/models/rgba.mjs +0 -5
  57. package/esm2022/colorpicker/models/table-cell.mjs +0 -5
  58. package/esm2022/colorpicker/models/tile-size.mjs +0 -5
  59. package/esm2022/colorpicker/models.mjs +0 -16
  60. package/esm2022/colorpicker/services/color-palette.service.mjs +0 -65
  61. package/esm2022/colorpicker/services/flatcolorpicker.service.mjs +0 -39
  62. package/esm2022/colorpicker/utils/color-parser.mjs +0 -164
  63. package/esm2022/colorpicker/utils/contrast-curve.mjs +0 -85
  64. package/esm2022/colorpicker/utils.mjs +0 -6
  65. package/esm2022/colorpicker.module.mjs +0 -50
  66. package/esm2022/common/dom-utils.mjs +0 -36
  67. package/esm2022/common/formservice.service.mjs +0 -21
  68. package/esm2022/common/math.mjs +0 -65
  69. package/esm2022/common/models/fillmode.mjs +0 -5
  70. package/esm2022/common/models/gutters.mjs +0 -5
  71. package/esm2022/common/models/responsive-breakpoints.mjs +0 -5
  72. package/esm2022/common/models/rounded.mjs +0 -5
  73. package/esm2022/common/models/size.mjs +0 -5
  74. package/esm2022/common/models/styling-classes.mjs +0 -5
  75. package/esm2022/common/models/type.mjs +0 -5
  76. package/esm2022/common/models.mjs +0 -9
  77. package/esm2022/common/radio-checkbox.base.mjs +0 -295
  78. package/esm2022/common/utils.mjs +0 -88
  79. package/esm2022/directives.mjs +0 -430
  80. package/esm2022/form/form.component.mjs +0 -163
  81. package/esm2022/form/formseparator.component.mjs +0 -80
  82. package/esm2022/form/utils.mjs +0 -147
  83. package/esm2022/form.module.mjs +0 -46
  84. package/esm2022/formfield/error.component.mjs +0 -70
  85. package/esm2022/formfield/formfield.component.mjs +0 -353
  86. package/esm2022/formfield/hint.component.mjs +0 -65
  87. package/esm2022/formfield/models/message-align.mjs +0 -5
  88. package/esm2022/formfield/models/orientation.mjs +0 -5
  89. package/esm2022/formfield/models/show-options.mjs +0 -5
  90. package/esm2022/formfield.module.mjs +0 -43
  91. package/esm2022/formfieldset/formfieldset.component.mjs +0 -174
  92. package/esm2022/index.mjs +0 -91
  93. package/esm2022/inputs.module.mjs +0 -91
  94. package/esm2022/maskedtextbox/maskedtextbox.component.mjs +0 -876
  95. package/esm2022/maskedtextbox/masking.service.mjs +0 -189
  96. package/esm2022/maskedtextbox/parsing/combinators.mjs +0 -28
  97. package/esm2022/maskedtextbox/parsing/parsers.mjs +0 -148
  98. package/esm2022/maskedtextbox/parsing/result.mjs +0 -44
  99. package/esm2022/maskedtextbox/parsing/stream.mjs +0 -43
  100. package/esm2022/maskedtextbox.module.mjs +0 -43
  101. package/esm2022/numerictextbox/arrow-direction.mjs +0 -13
  102. package/esm2022/numerictextbox/constants.mjs +0 -28
  103. package/esm2022/numerictextbox/localization/custom-messages.component.mjs +0 -55
  104. package/esm2022/numerictextbox/localization/localized-numerictextbox-messages.directive.mjs +0 -39
  105. package/esm2022/numerictextbox/localization/messages.mjs +0 -33
  106. package/esm2022/numerictextbox/numerictextbox.component.mjs +0 -1314
  107. package/esm2022/numerictextbox/utils.mjs +0 -92
  108. package/esm2022/numerictextbox.module.mjs +0 -46
  109. package/esm2022/otp.module.mjs +0 -44
  110. package/esm2022/otpinput/localization/custom-messages.component.mjs +0 -45
  111. package/esm2022/otpinput/localization/localized-textbox-messages.directive.mjs +0 -39
  112. package/esm2022/otpinput/localization/messages.mjs +0 -34
  113. package/esm2022/otpinput/models/otpinput-type.mjs +0 -5
  114. package/esm2022/otpinput/models/separator-icon.mjs +0 -5
  115. package/esm2022/otpinput/otpinput-separator.component.mjs +0 -93
  116. package/esm2022/otpinput/otpinput.component.mjs +0 -936
  117. package/esm2022/package-metadata.mjs +0 -16
  118. package/esm2022/progress-kendo-angular-inputs.mjs +0 -8
  119. package/esm2022/radiobutton/radiobutton.component.mjs +0 -212
  120. package/esm2022/radiobutton/radiobutton.directive.mjs +0 -81
  121. package/esm2022/radiobutton.module.mjs +0 -43
  122. package/esm2022/rangeslider/localization/custom-messages.component.mjs +0 -53
  123. package/esm2022/rangeslider/localization/localized-rangeslider-messages.directive.mjs +0 -39
  124. package/esm2022/rangeslider/localization/messages.mjs +0 -33
  125. package/esm2022/rangeslider/rangeslider-model.mjs +0 -53
  126. package/esm2022/rangeslider/rangeslider-value.type.mjs +0 -5
  127. package/esm2022/rangeslider/rangeslider.component.mjs +0 -625
  128. package/esm2022/rangeslider.module.mjs +0 -46
  129. package/esm2022/rating/directives/rating-hovered-item.directive.mjs +0 -35
  130. package/esm2022/rating/directives/rating-item.directive.mjs +0 -34
  131. package/esm2022/rating/directives/rating-selected-item.directive.mjs +0 -36
  132. package/esm2022/rating/models/precision.mjs +0 -5
  133. package/esm2022/rating/models/rating-item.interface.mjs +0 -5
  134. package/esm2022/rating/models/selection.mjs +0 -5
  135. package/esm2022/rating/rating.component.mjs +0 -754
  136. package/esm2022/rating.module.mjs +0 -46
  137. package/esm2022/shared/input-separator.component.mjs +0 -55
  138. package/esm2022/shared/input-spacer.component.mjs +0 -56
  139. package/esm2022/shared/shared-events.directive.mjs +0 -102
  140. package/esm2022/shared/utils.mjs +0 -13
  141. package/esm2022/signature/events/close-event.mjs +0 -10
  142. package/esm2022/signature/events/index.mjs +0 -6
  143. package/esm2022/signature/events/open-event.mjs +0 -10
  144. package/esm2022/signature/localization/custom-messages.component.mjs +0 -43
  145. package/esm2022/signature/localization/index.mjs +0 -7
  146. package/esm2022/signature/localization/localized-signature-messages.directive.mjs +0 -39
  147. package/esm2022/signature/localization/messages.mjs +0 -45
  148. package/esm2022/signature/signature.component.mjs +0 -981
  149. package/esm2022/signature.module.mjs +0 -47
  150. package/esm2022/slider/localization/custom-messages.component.mjs +0 -43
  151. package/esm2022/slider/localization/localized-slider-messages.directive.mjs +0 -39
  152. package/esm2022/slider/localization/messages.mjs +0 -39
  153. package/esm2022/slider/slider-model.mjs +0 -32
  154. package/esm2022/slider/slider.component.mjs +0 -671
  155. package/esm2022/slider.module.mjs +0 -48
  156. package/esm2022/sliders-common/label-template.directive.mjs +0 -37
  157. package/esm2022/sliders-common/slider-base.mjs +0 -300
  158. package/esm2022/sliders-common/slider-model.base.mjs +0 -118
  159. package/esm2022/sliders-common/slider-ticks.component.mjs +0 -147
  160. package/esm2022/sliders-common/sliders-util.mjs +0 -206
  161. package/esm2022/sliders-common/title-callback.mjs +0 -5
  162. package/esm2022/switch/events/blur-event.mjs +0 -13
  163. package/esm2022/switch/events/focus-event.mjs +0 -13
  164. package/esm2022/switch/localization/custom-messages.component.mjs +0 -43
  165. package/esm2022/switch/localization/localized-switch-messages.directive.mjs +0 -39
  166. package/esm2022/switch/localization/messages.mjs +0 -33
  167. package/esm2022/switch/switch.component.mjs +0 -585
  168. package/esm2022/switch.module.mjs +0 -44
  169. package/esm2022/text-fields-common/text-fields-base.mjs +0 -150
  170. package/esm2022/textarea/models/adornments-orientation.mjs +0 -5
  171. package/esm2022/textarea/models/flow.mjs +0 -5
  172. package/esm2022/textarea/models/resize.mjs +0 -5
  173. package/esm2022/textarea/models/textarea-settings.mjs +0 -5
  174. package/esm2022/textarea/textarea-prefix.component.mjs +0 -67
  175. package/esm2022/textarea/textarea-suffix.component.mjs +0 -67
  176. package/esm2022/textarea/textarea.component.mjs +0 -740
  177. package/esm2022/textarea/textarea.directive.mjs +0 -288
  178. package/esm2022/textarea.module.mjs +0 -46
  179. package/esm2022/textbox/localization/custom-messages.component.mjs +0 -43
  180. package/esm2022/textbox/localization/localized-textbox-messages.directive.mjs +0 -39
  181. package/esm2022/textbox/localization/messages.mjs +0 -27
  182. package/esm2022/textbox/models/icon-show-options.mjs +0 -5
  183. package/esm2022/textbox/textbox-prefix.directive.mjs +0 -50
  184. package/esm2022/textbox/textbox-suffix.directive.mjs +0 -49
  185. package/esm2022/textbox/textbox.component.mjs +0 -933
  186. package/esm2022/textbox/textbox.directive.mjs +0 -125
  187. package/esm2022/textbox.module.mjs +0 -51
  188. package/esm2022/validators/max.validator.mjs +0 -21
  189. package/esm2022/validators/min.validator.mjs +0 -21
@@ -1,147 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { isDocumentAvailable, processCssValue } from '@progress/kendo-angular-common';
6
- /**
7
- * @hidden
8
- */
9
- export const DEFAULT_FORM_GUTTERS = { rows: '0px', cols: '32px' };
10
- /**
11
- * @hidden
12
- */
13
- export const DEFAULT_FORMFIELDSET_GUTTERS = { rows: '0px', cols: '16px' };
14
- /**
15
- * @hidden
16
- */
17
- export function innerWidth(element) {
18
- if (!isDocumentAvailable()) {
19
- return;
20
- }
21
- let width = element.clientWidth;
22
- const style = getComputedStyle(element);
23
- width -= (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
24
- width -= (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderRightWidth) || 0);
25
- return width;
26
- }
27
- /**
28
- * @hidden
29
- */
30
- export function processBreakpoints(breakpoints, containerWidth) {
31
- if (!breakpoints?.length || containerWidth === null) {
32
- return '';
33
- }
34
- for (const [index, breakpoint] of breakpoints.entries()) {
35
- const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
36
- const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
37
- if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
38
- return breakpoint.value;
39
- }
40
- }
41
- return '';
42
- }
43
- /**
44
- * @hidden
45
- */
46
- export const calculateColumns = (cols, containerWidth) => {
47
- if (!cols) {
48
- return null;
49
- }
50
- if (Array.isArray(cols) && cols.length > 0) {
51
- const processedCols = processBreakpoints(cols, containerWidth) || null;
52
- return typeof processedCols === 'string' ? parseInt(processedCols, 10) : processedCols;
53
- }
54
- else if (typeof cols === 'number') {
55
- return cols;
56
- }
57
- return null;
58
- };
59
- /**
60
- * @hidden
61
- *
62
- * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
63
- */
64
- export const calculateGutters = (gutters, containerWidth) => {
65
- if (!gutters) {
66
- return null;
67
- }
68
- if (typeof gutters === 'number' || typeof gutters === 'string') {
69
- return { cols: gutters, rows: gutters };
70
- }
71
- else if (Array.isArray(gutters)) {
72
- const processedGutters = processBreakpoints(gutters, containerWidth) || null;
73
- return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
74
- }
75
- else if (typeof gutters === 'object') {
76
- const gutterObject = gutters;
77
- const result = { rows: null, cols: null };
78
- if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
79
- if (typeof gutterObject.cols === 'number' || typeof gutterObject.cols === 'string') {
80
- result.cols = gutterObject.cols;
81
- }
82
- else if (Array.isArray(gutterObject.cols)) {
83
- result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
84
- }
85
- }
86
- else {
87
- result.cols = null;
88
- }
89
- if (gutterObject.rows !== undefined) {
90
- if (typeof gutterObject.rows === 'number' || typeof gutterObject.rows === 'string') {
91
- result.rows = gutterObject.rows;
92
- }
93
- else if (Array.isArray(gutterObject.rows)) {
94
- result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
95
- }
96
- }
97
- else {
98
- result.rows = null;
99
- }
100
- return result;
101
- }
102
- return null;
103
- };
104
- /**
105
- * @hidden
106
- *
107
- * Calculates column span value based on responsive breakpoints or fixed number
108
- */
109
- export const calculateColSpan = (colSpan, containerWidth) => {
110
- if (!colSpan) {
111
- return null;
112
- }
113
- if (typeof colSpan === 'number') {
114
- return colSpan;
115
- }
116
- else if (Array.isArray(colSpan) && colSpan.length > 0) {
117
- const processedColSpan = processBreakpoints(colSpan, containerWidth) || null;
118
- return typeof processedColSpan === 'string' ? parseInt(processedColSpan, 10) : processedColSpan;
119
- }
120
- return null;
121
- };
122
- /**
123
- * @hidden
124
- *
125
- * Generates CSS class names for columns
126
- */
127
- export const generateColumnClass = (columnsNumber) => {
128
- return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
129
- };
130
- /**
131
- * @hidden
132
- *
133
- * Generates CSS styles for gutters based on the provided gutters object.
134
- */
135
- export const generateGuttersStyling = (gutters, defaultGutters = DEFAULT_FORM_GUTTERS) => {
136
- const rows = processCssValue(gutters?.rows);
137
- const cols = processCssValue(gutters?.cols);
138
- return `${rows ?? defaultGutters.rows} ${cols ?? defaultGutters.cols}`;
139
- };
140
- /**
141
- * @hidden
142
- *
143
- * Generates CSS class name for column span
144
- */
145
- export const generateColSpanClass = (colSpan) => {
146
- return colSpan ? `k-col-span-${colSpan}` : '';
147
- };
@@ -1,46 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { NgModule } from '@angular/core';
6
- import { KENDO_FORM } from './directives';
7
- import * as i0 from "@angular/core";
8
- import * as i1 from "./form/form.component";
9
- import * as i2 from "./form/formseparator.component";
10
- import * as i3 from "./formfieldset/formfieldset.component";
11
- import * as i4 from "./formfield/formfield.component";
12
- import * as i5 from "./formfield/hint.component";
13
- import * as i6 from "./formfield/error.component";
14
- //IMPORTANT: NgModule export kept for backwards compatibility
15
- /**
16
- * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the FormField, Error, and Hint components.
17
- *
18
- * Use this module to add Form features to your NgModule-based Angular application.
19
- *
20
- * @example
21
- * ```typescript
22
- * import { FormModule } from '@progress/kendo-angular-inputs';
23
- * import { NgModule } from '@angular/core';
24
- * import { BrowserModule } from '@angular/platform-browser';
25
- * import { AppComponent } from './app.component';
26
- *
27
- * @NgModule({
28
- * declarations: [AppComponent],
29
- * imports: [BrowserModule, FormModule],
30
- * bootstrap: [AppComponent]
31
- * })
32
- * export class AppModule {}
33
- * ```
34
- */
35
- export class FormModule {
36
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
37
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FormModule, imports: [i1.FormComponent, i2.FormSeparatorComponent, i3.FormFieldSetComponent, i4.FormFieldComponent, i5.HintComponent, i6.ErrorComponent], exports: [i1.FormComponent, i2.FormSeparatorComponent, i3.FormFieldSetComponent, i4.FormFieldComponent, i5.HintComponent, i6.ErrorComponent] });
38
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormModule, imports: [i1.FormComponent] });
39
- }
40
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormModule, decorators: [{
41
- type: NgModule,
42
- args: [{
43
- imports: [...KENDO_FORM],
44
- exports: [...KENDO_FORM]
45
- }]
46
- }] });
@@ -1,70 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostBinding, Input } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- let serial = 0;
8
- /**
9
- * Represents the Kendo UI FormError component.
10
- * Displays an error message under a Kendo Angular component or native HTML form-bound component after validation.
11
- *
12
- * @example
13
- * ```html
14
- * <kendo-formerror>Error message here</kendo-formerror>
15
- * ```
16
- */
17
- export class ErrorComponent {
18
- hostClass = true;
19
- /**
20
- * Sets the alignment of the error message.
21
- *
22
- * @default 'start'
23
- */
24
- align = 'start';
25
- /**
26
- * @hidden
27
- */
28
- id = `kendo-error-${serial++}`;
29
- roleAttribute = 'alert';
30
- get startClass() {
31
- return this.align === 'start';
32
- }
33
- get endClass() {
34
- return this.align === 'end';
35
- }
36
- get idAttribute() {
37
- return this.id;
38
- }
39
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
40
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ErrorComponent, isStandalone: true, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
41
- <ng-content></ng-content>
42
- `, isInline: true });
43
- }
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ErrorComponent, decorators: [{
45
- type: Component,
46
- args: [{
47
- selector: 'kendo-formerror',
48
- template: `
49
- <ng-content></ng-content>
50
- `,
51
- standalone: true
52
- }]
53
- }], propDecorators: { hostClass: [{
54
- type: HostBinding,
55
- args: ['class.k-form-error']
56
- }], align: [{
57
- type: Input
58
- }], roleAttribute: [{
59
- type: HostBinding,
60
- args: ['attr.role']
61
- }], startClass: [{
62
- type: HostBinding,
63
- args: ['class.k-text-start']
64
- }], endClass: [{
65
- type: HostBinding,
66
- args: ['class.k-text-end']
67
- }], idAttribute: [{
68
- type: HostBinding,
69
- args: ['attr.id']
70
- }] } });
@@ -1,353 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, ContentChild, ContentChildren, ElementRef, HostBinding, Input, isDevMode, Renderer2, QueryList } from '@angular/core';
6
- import { NgControl, RadioControlValueAccessor } from '@angular/forms';
7
- import { Subscription } from 'rxjs';
8
- import { KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
9
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
10
- import { validatePackage } from '@progress/kendo-licensing';
11
- import { packageMetadata } from '../package-metadata';
12
- import { ErrorComponent } from './error.component';
13
- import { HintComponent } from './hint.component';
14
- import { FormService } from '../common/formservice.service';
15
- import { filter } from 'rxjs/operators';
16
- import { calculateColSpan, generateColSpanClass } from '../form/utils';
17
- import * as i0 from "@angular/core";
18
- import * as i1 from "@progress/kendo-angular-l10n";
19
- import * as i2 from "../common/formservice.service";
20
- /**
21
- * Represents the Kendo UI FormField component for Angular.
22
- * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
23
- * Applies styling and behavior rules.
24
- *
25
- * @example
26
- * ```html
27
- * <kendo-formfield>
28
- * <kendo-label [for]="firstName"text="First Name"></kendo-label>
29
- * <kendo-textbox formControlName="firstName" #firstName></kendo-textbox>
30
- * <kendo-formhint>Enter your name.</kendo-formhint>
31
- * <kendo-formerror>First name is required.</kendo-formerror>
32
- * </kendo-formfield>
33
- * ```
34
- *
35
- * @remarks
36
- * Supported children components are: {@link ErrorComponent}, {@link HintComponent}, {@link TextBoxComponent}, {@link NumericTextBoxComponent}, {@link MaskedTextBoxComponent}, {@link TextAreaComponent}, {@link DatePickerComponent}, {@link DateTimePickerComponent}, {@link DateInputComponent}, {@link OTPInputComponent}.
37
- */
38
- export class FormFieldComponent {
39
- renderer;
40
- localizationService;
41
- hostElement;
42
- formService;
43
- hostClass = true;
44
- /**
45
- * @hidden
46
- */
47
- direction;
48
- get errorClass() {
49
- if (!this.control) {
50
- return false;
51
- }
52
- return this.control.invalid && (this.control.touched || this.control.dirty);
53
- }
54
- get disabledClass() {
55
- if (!this.control) {
56
- return false;
57
- }
58
- // radiobutton group
59
- if (this.isRadioControl(this.control)) {
60
- return false;
61
- }
62
- return this.disabledControl() ||
63
- this.disabledElement() ||
64
- this.disabledKendoInput();
65
- }
66
- set formControls(formControls) {
67
- this.validateFormControl(formControls);
68
- this.control = formControls.first;
69
- }
70
- controlElementRefs;
71
- kendoInput;
72
- errorChildren;
73
- hintChildren;
74
- /**
75
- * Specifies when to show the hint messages:
76
- * * `initial`&mdash;Shows hints when the form control is `valid` or `untouched` and `pristine`.
77
- * * `always`&mdash;Always shows hints.
78
- *
79
- * @default 'initial'
80
- */
81
- showHints = 'initial';
82
- /**
83
- * Specifies the layout orientation of the form field.
84
- *
85
- * @hidden
86
- *
87
- * @default 'vertical'
88
- */
89
- orientation = 'vertical';
90
- /**
91
- * Specifies when to show the error messages:
92
- * * `initial`&mdash;Shows errors when the form control is `invalid` and `touched` or `dirty`.
93
- * * `always`&mdash;Always shows errors.
94
- *
95
- * @default 'initial'
96
- */
97
- showErrors = 'initial';
98
- /**
99
- * Defines the colspan for the form field.
100
- * Can be a number or an array of responsive breakpoints.
101
- */
102
- colSpan;
103
- /**
104
- * @hidden
105
- */
106
- get horizontal() {
107
- return this.orientation === 'horizontal';
108
- }
109
- /**
110
- * @hidden
111
- */
112
- get hasHints() {
113
- return this.showHints === 'always' ? true : this.showHintsInitial();
114
- }
115
- /**
116
- * @hidden
117
- */
118
- get hasErrors() {
119
- return this.showErrors === 'always' ? true : this.showErrorsInitial();
120
- }
121
- control;
122
- subscriptions = new Subscription();
123
- rtl = false;
124
- _formWidth = null;
125
- _colSpanClass = null;
126
- _previousColSpan = null;
127
- constructor(renderer, localizationService, hostElement, formService) {
128
- this.renderer = renderer;
129
- this.localizationService = localizationService;
130
- this.hostElement = hostElement;
131
- this.formService = formService;
132
- validatePackage(packageMetadata);
133
- this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
134
- this.rtl = rtl;
135
- this.direction = this.rtl ? 'rtl' : 'ltr';
136
- }));
137
- this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
138
- this._formWidth = width;
139
- this.updateColSpanClass();
140
- }));
141
- }
142
- ngAfterViewInit() {
143
- this.setDescription();
144
- }
145
- ngAfterViewChecked() {
146
- this.updateDescription();
147
- }
148
- ngOnChanges(changes) {
149
- if (changes['colSpan']) {
150
- this.updateColSpanClass();
151
- }
152
- }
153
- ngOnDestroy() {
154
- this.subscriptions.unsubscribe();
155
- }
156
- disabledKendoInput() {
157
- return this.kendoInput && this.kendoInput.disabled;
158
- }
159
- disabledControl() {
160
- return this.control.disabled;
161
- }
162
- disabledElement() {
163
- const elements = this.controlElementRefs.toArray();
164
- return elements.every(e => e.nativeElement.hasAttribute('disabled'));
165
- }
166
- validateFormControl(formControls) {
167
- if (isDevMode() && formControls.length !== 1 && !this.isControlGroup(formControls)) {
168
- throw new Error('The `kendo-formfield` component should contain ' +
169
- 'only one control of type NgControl with a formControlName(https://angular.io/api/forms/FormControlName)' +
170
- 'or an ngModel(https://angular.io/api/forms/NgModel) binding.');
171
- }
172
- }
173
- isControlGroup(formControls) {
174
- if (!formControls.length) {
175
- return false;
176
- }
177
- const name = formControls.first.name;
178
- return formControls.toArray().every(c => c.name === name && (this.isRadioControl(c)));
179
- }
180
- isRadioControl(control) {
181
- return control.valueAccessor instanceof RadioControlValueAccessor;
182
- }
183
- updateDescription() {
184
- const controls = this.findControlElements().filter(c => !!c);
185
- if (!controls) {
186
- return;
187
- }
188
- controls.forEach((control) => {
189
- if (this.errorChildren.length > 0 || this.hintChildren.length > 0) {
190
- const ariaIds = this.generateDescriptionIds(control);
191
- if (ariaIds !== '') {
192
- this.renderer.setAttribute(control, 'aria-describedby', ariaIds);
193
- }
194
- else {
195
- this.renderer.removeAttribute(control, 'aria-describedby');
196
- }
197
- }
198
- });
199
- }
200
- findControlElements() {
201
- if (!this.controlElementRefs) {
202
- return;
203
- }
204
- // the control is KendoInput and has focusableId - dropdowns, dateinputs, editor
205
- if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
206
- // Editor requires special treatment when in iframe mode
207
- const isEditor = this.kendoInput.focusableId.startsWith('k-editor');
208
- return isEditor ? [this.kendoInput.viewMountElement] : [this.hostElement.nativeElement.querySelector(`#${this.kendoInput.focusableId}`)];
209
- }
210
- return this.controlElementRefs.map(el => el.nativeElement);
211
- }
212
- generateDescriptionIds(control) {
213
- const ids = new Set();
214
- let errorAttribute = '';
215
- if (control.hasAttribute('aria-describedby')) {
216
- const attributes = control.getAttribute('aria-describedby').split(' ');
217
- errorAttribute = attributes.filter(attr => attr.includes('kendo-error-'))[0];
218
- attributes.forEach((attr) => {
219
- if (attr.includes('kendo-hint-') || attr.includes('kendo-error-')) {
220
- return;
221
- }
222
- ids.add(attr);
223
- });
224
- }
225
- this.hintChildren.forEach((hint) => {
226
- ids.add(hint.id);
227
- });
228
- if (this.hasErrors) {
229
- this.errorChildren.forEach((error) => {
230
- ids.add(error.id);
231
- });
232
- }
233
- else {
234
- ids.delete(errorAttribute);
235
- }
236
- return Array.from(ids).join(' ');
237
- }
238
- showHintsInitial() {
239
- if (!this.control) {
240
- return true;
241
- }
242
- const { valid, untouched, pristine } = this.control;
243
- return valid || (untouched && pristine);
244
- }
245
- showErrorsInitial() {
246
- if (!this.control) {
247
- return false;
248
- }
249
- const { invalid, dirty, touched } = this.control;
250
- return invalid && (dirty || touched);
251
- }
252
- setDescription() {
253
- this.updateDescription();
254
- this.subscriptions.add(this.errorChildren.changes.subscribe(() => this.updateDescription()));
255
- this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
256
- }
257
- updateColSpanClass() {
258
- const hostElement = this.hostElement.nativeElement;
259
- const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
260
- if (newColSpan !== this._previousColSpan) {
261
- const newClass = generateColSpanClass(newColSpan);
262
- if (this._colSpanClass) {
263
- this.renderer.removeClass(hostElement, this._colSpanClass);
264
- }
265
- if (newClass) {
266
- this.renderer.addClass(hostElement, newClass);
267
- }
268
- this._colSpanClass = newClass;
269
- this._previousColSpan = newColSpan;
270
- }
271
- }
272
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.FormService }], target: i0.ɵɵFactoryTarget.Component });
273
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
274
- LocalizationService,
275
- {
276
- provide: L10N_PREFIX,
277
- useValue: 'kendo.formfield'
278
- }
279
- ], 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: `
280
- <ng-content select="label, kendo-label"></ng-content>
281
- <div class="k-form-field-wrap">
282
- <ng-content></ng-content>
283
- @if (hasHints) {
284
- <ng-content select="kendo-formhint"></ng-content>
285
- }
286
- @if (hasErrors) {
287
- <ng-content select="kendo-formerror"></ng-content>
288
- }
289
- </div>
290
- `, isInline: true });
291
- }
292
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
293
- type: Component,
294
- args: [{
295
- selector: 'kendo-formfield',
296
- template: `
297
- <ng-content select="label, kendo-label"></ng-content>
298
- <div class="k-form-field-wrap">
299
- <ng-content></ng-content>
300
- @if (hasHints) {
301
- <ng-content select="kendo-formhint"></ng-content>
302
- }
303
- @if (hasErrors) {
304
- <ng-content select="kendo-formerror"></ng-content>
305
- }
306
- </div>
307
- `,
308
- providers: [
309
- LocalizationService,
310
- {
311
- provide: L10N_PREFIX,
312
- useValue: 'kendo.formfield'
313
- }
314
- ],
315
- standalone: true,
316
- imports: []
317
- }]
318
- }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.FormService }], propDecorators: { hostClass: [{
319
- type: HostBinding,
320
- args: ['class.k-form-field']
321
- }], direction: [{
322
- type: HostBinding,
323
- args: ['attr.dir']
324
- }], errorClass: [{
325
- type: HostBinding,
326
- args: ['class.k-form-field-error']
327
- }], disabledClass: [{
328
- type: HostBinding,
329
- args: ['class.k-form-field-disabled']
330
- }], formControls: [{
331
- type: ContentChildren,
332
- args: [NgControl, { descendants: true }]
333
- }], controlElementRefs: [{
334
- type: ContentChildren,
335
- args: [NgControl, { read: ElementRef, descendants: true }]
336
- }], kendoInput: [{
337
- type: ContentChild,
338
- args: [KendoInput, { static: true }]
339
- }], errorChildren: [{
340
- type: ContentChildren,
341
- args: [ErrorComponent, { descendants: true }]
342
- }], hintChildren: [{
343
- type: ContentChildren,
344
- args: [HintComponent, { descendants: true }]
345
- }], showHints: [{
346
- type: Input
347
- }], orientation: [{
348
- type: Input
349
- }], showErrors: [{
350
- type: Input
351
- }], colSpan: [{
352
- type: Input
353
- }] } });
@@ -1,65 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostBinding, Input } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- let serial = 0;
8
- /**
9
- * Displays a hint message under a form-bound component.
10
- *
11
- * @example
12
- * ```html
13
- * <kendo-formhint>Hint message here</kendo-formhint>
14
- * ```
15
- */
16
- export class HintComponent {
17
- /**
18
- * Sets the alignment of the hint message.
19
- *
20
- * @default 'start'
21
- */
22
- align = 'start';
23
- /**
24
- * @hidden
25
- */
26
- id = `kendo-hint-${serial++}`;
27
- hostClass = true;
28
- get startClass() {
29
- return this.align === 'start';
30
- }
31
- get endClass() {
32
- return this.align === 'end';
33
- }
34
- get idAttribute() {
35
- return this.id;
36
- }
37
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
38
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HintComponent, isStandalone: true, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
39
- <ng-content></ng-content>
40
- `, isInline: true });
41
- }
42
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, decorators: [{
43
- type: Component,
44
- args: [{
45
- selector: 'kendo-formhint',
46
- template: `
47
- <ng-content></ng-content>
48
- `,
49
- standalone: true
50
- }]
51
- }], propDecorators: { align: [{
52
- type: Input
53
- }], hostClass: [{
54
- type: HostBinding,
55
- args: ['class.k-form-hint']
56
- }], startClass: [{
57
- type: HostBinding,
58
- args: ['class.k-text-start']
59
- }], endClass: [{
60
- type: HostBinding,
61
- args: ['class.k-text-end']
62
- }], idAttribute: [{
63
- type: HostBinding,
64
- args: ['attr.id']
65
- }] } });
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};