@progress/kendo-angular-inputs 7.5.1 → 8.0.0-dev.202112211528

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 (229) hide show
  1. package/dist/cdn/js/kendo-angular-inputs.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/checkbox/checkbox.directive.js +79 -3
  4. package/dist/es/colorpicker/color-contrast-svg.component.js +95 -0
  5. package/dist/es/colorpicker/color-gradient.component.js +109 -81
  6. package/dist/es/colorpicker/color-input.component.js +39 -18
  7. package/dist/es/colorpicker/color-palette.component.js +28 -18
  8. package/dist/es/colorpicker/colorpicker.component.js +279 -80
  9. package/dist/es/colorpicker/constants.js +12 -0
  10. package/dist/es/colorpicker/contrast-validation.component.js +8 -6
  11. package/dist/es/colorpicker/contrast.component.js +6 -8
  12. package/dist/es/colorpicker/{models → events}/active-color-click-event.js +0 -0
  13. package/dist/es/colorpicker/events/cancel-event.js +19 -0
  14. package/dist/es/colorpicker/events/close-event.js +17 -0
  15. package/dist/es/colorpicker/{models → events}/kendo-drag-event.js +0 -0
  16. package/dist/es/colorpicker/events/open-event.js +17 -0
  17. package/dist/es/colorpicker/events.js +8 -0
  18. package/dist/es/colorpicker/flatcolorpicker-actions.component.js +50 -0
  19. package/dist/es/colorpicker/flatcolorpicker-header.component.js +94 -0
  20. package/dist/es/colorpicker/flatcolorpicker.component.js +553 -0
  21. package/dist/es/colorpicker/localization/colorgradient-localization.service.js +7 -7
  22. package/dist/es/colorpicker/localization/colorpalette-localization.service.js +7 -7
  23. package/dist/es/colorpicker/localization/custom-messages.component.js +1 -1
  24. package/dist/es/colorpicker/localization/flatcolorpicker-localization.service.js +34 -0
  25. package/dist/es/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  26. package/dist/es/colorpicker/localization/messages.js +36 -0
  27. package/dist/es/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
  28. package/dist/{es2015/colorpicker/models/color-picker-view.js → es/colorpicker/models/colorpicker-view.js} +0 -0
  29. package/dist/es/colorpicker/{utils → models}/palette-presets.js +0 -0
  30. package/dist/es/colorpicker/models.js +1 -2
  31. package/dist/es/colorpicker/services/flatcolorpicker.service.js +41 -0
  32. package/dist/es/colorpicker/utils/color-parser.js +18 -5
  33. package/dist/es/colorpicker/utils/contrast-curve.js +91 -0
  34. package/dist/es/colorpicker/utils.js +1 -1
  35. package/dist/es/colorpicker.module.js +9 -1
  36. package/dist/es/common/models/fillmode.js +4 -0
  37. package/dist/es/common/models/rounded.js +4 -0
  38. package/dist/es/common/models/size.js +4 -0
  39. package/dist/es/common/models/styling-classes.js +4 -0
  40. package/dist/{es2015/colorpicker/models/kendo-drag-event.js → es/common/models.js} +0 -0
  41. package/dist/es/common/utils.js +37 -0
  42. package/dist/es/index.js +5 -0
  43. package/dist/es/main.js +4 -2
  44. package/dist/es/maskedtextbox/maskedtextbox.component.js +101 -6
  45. package/dist/es/numerictextbox/numerictextbox.component.js +116 -20
  46. package/dist/es/package-metadata.js +1 -1
  47. package/dist/es/radiobutton/radiobutton.directive.js +52 -3
  48. package/dist/es/shared/textarea.directive.js +3 -2
  49. package/dist/es/shared/utils.js +23 -0
  50. package/dist/es/switch/switch.component.js +167 -21
  51. package/dist/es/text-fields-common/text-fields-base.js +1 -1
  52. package/dist/es/textarea/textarea.component.js +101 -5
  53. package/dist/es/textbox/textbox.component.js +111 -12
  54. package/dist/es/textbox/textbox.directive.js +3 -2
  55. package/dist/es/textbox.module.js +0 -3
  56. package/dist/es2015/checkbox/checkbox.directive.d.ts +31 -0
  57. package/dist/es2015/checkbox/checkbox.directive.js +68 -10
  58. package/dist/es2015/colorpicker/color-contrast-svg.component.d.ts +26 -0
  59. package/dist/es2015/colorpicker/color-contrast-svg.component.js +97 -0
  60. package/dist/es2015/colorpicker/color-gradient.component.d.ts +32 -43
  61. package/dist/es2015/colorpicker/color-gradient.component.js +126 -93
  62. package/dist/es2015/colorpicker/color-input.component.d.ts +11 -4
  63. package/dist/es2015/colorpicker/color-input.component.js +52 -32
  64. package/dist/es2015/colorpicker/color-palette.component.d.ts +8 -3
  65. package/dist/es2015/colorpicker/color-palette.component.js +28 -18
  66. package/dist/es2015/colorpicker/colorpicker.component.d.ts +127 -25
  67. package/dist/es2015/colorpicker/colorpicker.component.js +305 -125
  68. package/dist/es2015/colorpicker/constants.d.ts +12 -0
  69. package/dist/es2015/colorpicker/constants.js +12 -0
  70. package/dist/es2015/colorpicker/contrast-validation.component.d.ts +1 -1
  71. package/dist/es2015/colorpicker/contrast-validation.component.js +16 -12
  72. package/dist/es2015/colorpicker/contrast.component.d.ts +1 -3
  73. package/dist/es2015/colorpicker/contrast.component.js +17 -17
  74. package/dist/es2015/colorpicker/{models → events}/active-color-click-event.d.ts +0 -0
  75. package/dist/es2015/colorpicker/{models → events}/active-color-click-event.js +0 -0
  76. package/dist/es2015/colorpicker/events/cancel-event.d.ts +15 -0
  77. package/dist/es2015/colorpicker/events/cancel-event.js +14 -0
  78. package/dist/es2015/colorpicker/events/close-event.d.ts +10 -0
  79. package/dist/es2015/colorpicker/events/close-event.js +10 -0
  80. package/dist/es2015/colorpicker/{models → events}/kendo-drag-event.d.ts +0 -0
  81. package/dist/es2015/colorpicker/events/kendo-drag-event.js +4 -0
  82. package/dist/es2015/colorpicker/events/open-event.d.ts +10 -0
  83. package/dist/es2015/colorpicker/events/open-event.js +10 -0
  84. package/dist/es2015/colorpicker/events.d.ts +8 -0
  85. package/dist/es2015/colorpicker/events.js +8 -0
  86. package/dist/es2015/colorpicker/flatcolorpicker-actions.component.d.ts +18 -0
  87. package/dist/es2015/colorpicker/flatcolorpicker-actions.component.js +60 -0
  88. package/dist/es2015/colorpicker/flatcolorpicker-header.component.d.ts +30 -0
  89. package/dist/es2015/colorpicker/flatcolorpicker-header.component.js +131 -0
  90. package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts +214 -0
  91. package/dist/es2015/colorpicker/flatcolorpicker.component.js +593 -0
  92. package/dist/es2015/colorpicker/localization/colorgradient-localization.service.d.ts +3 -3
  93. package/dist/es2015/colorpicker/localization/colorgradient-localization.service.js +7 -7
  94. package/dist/es2015/colorpicker/localization/colorpalette-localization.service.d.ts +3 -3
  95. package/dist/es2015/colorpicker/localization/colorpalette-localization.service.js +7 -7
  96. package/dist/es2015/colorpicker/localization/custom-messages.component.js +1 -1
  97. package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.d.ts +14 -0
  98. package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.js +31 -0
  99. package/dist/es2015/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  100. package/dist/es2015/colorpicker/localization/messages.d.ts +36 -0
  101. package/dist/es2015/colorpicker/localization/messages.js +36 -0
  102. package/dist/es2015/colorpicker/models/actions-layout.d.ts +8 -0
  103. package/dist/es2015/colorpicker/models/actions-layout.js +4 -0
  104. package/dist/es2015/colorpicker/models/colorpicker-view.d.ts +8 -0
  105. package/dist/es2015/colorpicker/models/colorpicker-view.js +4 -0
  106. package/dist/es2015/colorpicker/models/gradient-settings.d.ts +4 -3
  107. package/dist/es2015/colorpicker/models/output-format.d.ts +0 -5
  108. package/dist/es2015/colorpicker/{utils → models}/palette-presets.d.ts +0 -0
  109. package/dist/es2015/colorpicker/{utils → models}/palette-presets.js +0 -0
  110. package/dist/es2015/colorpicker/models/palette-settings.d.ts +2 -3
  111. package/dist/es2015/colorpicker/models/tile-size.d.ts +1 -5
  112. package/dist/es2015/colorpicker/models.d.ts +10 -10
  113. package/dist/es2015/colorpicker/models.js +1 -2
  114. package/dist/es2015/colorpicker/services/flatcolorpicker.service.d.ts +12 -0
  115. package/dist/es2015/colorpicker/services/flatcolorpicker.service.js +38 -0
  116. package/dist/es2015/colorpicker/utils/color-parser.d.ts +8 -2
  117. package/dist/es2015/colorpicker/utils/color-parser.js +15 -5
  118. package/dist/es2015/colorpicker/utils/contrast-curve.d.ts +37 -0
  119. package/dist/es2015/colorpicker/utils/contrast-curve.js +85 -0
  120. package/dist/es2015/colorpicker/utils.d.ts +1 -1
  121. package/dist/es2015/colorpicker/utils.js +1 -1
  122. package/dist/es2015/colorpicker.module.js +9 -1
  123. package/dist/es2015/{colorpicker/models/color-picker-view.d.ts → common/models/fillmode.d.ts} +5 -5
  124. package/dist/es2015/common/models/fillmode.js +4 -0
  125. package/dist/es2015/common/models/rounded.d.ts +23 -0
  126. package/dist/es2015/common/models/rounded.js +4 -0
  127. package/dist/es2015/common/models/size.d.ts +14 -0
  128. package/dist/es2015/common/models/size.js +4 -0
  129. package/dist/es2015/common/models/styling-classes.d.ts +11 -0
  130. package/dist/es2015/common/models/styling-classes.js +4 -0
  131. package/dist/es2015/common/models.d.ts +8 -0
  132. package/dist/es2015/common/models.js +4 -0
  133. package/dist/es2015/common/utils.d.ts +7 -0
  134. package/dist/es2015/common/utils.js +37 -0
  135. package/dist/es2015/index.d.ts +5 -0
  136. package/dist/es2015/index.js +5 -0
  137. package/dist/es2015/index.metadata.json +1 -1
  138. package/dist/es2015/main.d.ts +5 -2
  139. package/dist/es2015/main.js +4 -2
  140. package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts +39 -1
  141. package/dist/es2015/maskedtextbox/maskedtextbox.component.js +88 -6
  142. package/dist/es2015/numerictextbox/numerictextbox.component.d.ts +39 -2
  143. package/dist/es2015/numerictextbox/numerictextbox.component.js +124 -40
  144. package/dist/es2015/package-metadata.js +1 -1
  145. package/dist/es2015/radiobutton/radiobutton.directive.d.ts +18 -0
  146. package/dist/es2015/radiobutton/radiobutton.directive.js +46 -11
  147. package/dist/es2015/shared/textarea.directive.d.ts +1 -1
  148. package/dist/es2015/shared/textarea.directive.js +3 -2
  149. package/dist/es2015/shared/utils.d.ts +16 -0
  150. package/dist/es2015/shared/utils.js +23 -0
  151. package/dist/es2015/switch/switch.component.d.ts +48 -5
  152. package/dist/es2015/switch/switch.component.js +166 -24
  153. package/dist/es2015/text-fields-common/text-fields-base.js +1 -1
  154. package/dist/es2015/textarea/textarea.component.d.ts +39 -1
  155. package/dist/es2015/textarea/textarea.component.js +89 -5
  156. package/dist/es2015/textbox/textbox.component.d.ts +40 -1
  157. package/dist/es2015/textbox/textbox.component.js +99 -12
  158. package/dist/es2015/textbox/textbox.directive.d.ts +1 -1
  159. package/dist/es2015/textbox/textbox.directive.js +3 -2
  160. package/dist/es2015/textbox.module.js +0 -3
  161. package/dist/fesm2015/index.js +3118 -1477
  162. package/dist/fesm5/index.js +3040 -1387
  163. package/dist/npm/checkbox/checkbox.directive.js +78 -2
  164. package/dist/npm/colorpicker/color-contrast-svg.component.js +97 -0
  165. package/dist/npm/colorpicker/color-gradient.component.js +109 -81
  166. package/dist/npm/colorpicker/color-input.component.js +38 -17
  167. package/dist/npm/colorpicker/color-palette.component.js +29 -19
  168. package/dist/npm/colorpicker/colorpicker.component.js +285 -86
  169. package/dist/npm/colorpicker/constants.js +12 -0
  170. package/dist/npm/colorpicker/contrast-validation.component.js +8 -6
  171. package/dist/npm/colorpicker/contrast.component.js +6 -8
  172. package/dist/npm/colorpicker/{models → events}/active-color-click-event.js +0 -0
  173. package/dist/npm/colorpicker/events/cancel-event.js +21 -0
  174. package/dist/npm/colorpicker/events/close-event.js +19 -0
  175. package/dist/npm/colorpicker/{models → events}/kendo-drag-event.js +0 -0
  176. package/dist/npm/colorpicker/events/open-event.js +19 -0
  177. package/dist/npm/colorpicker/events.js +11 -0
  178. package/dist/npm/colorpicker/flatcolorpicker-actions.component.js +52 -0
  179. package/dist/npm/colorpicker/flatcolorpicker-header.component.js +96 -0
  180. package/dist/npm/colorpicker/flatcolorpicker.component.js +555 -0
  181. package/dist/npm/colorpicker/localization/colorgradient-localization.service.js +7 -7
  182. package/dist/npm/colorpicker/localization/colorpalette-localization.service.js +7 -7
  183. package/dist/npm/colorpicker/localization/custom-messages.component.js +1 -1
  184. package/dist/npm/colorpicker/localization/flatcolorpicker-localization.service.js +36 -0
  185. package/dist/npm/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  186. package/dist/npm/colorpicker/localization/messages.js +36 -0
  187. package/dist/npm/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
  188. package/dist/npm/colorpicker/models/colorpicker-view.js +6 -0
  189. package/dist/npm/colorpicker/{utils → models}/palette-presets.js +0 -0
  190. package/dist/npm/colorpicker/models.js +1 -2
  191. package/dist/npm/colorpicker/services/flatcolorpicker.service.js +43 -0
  192. package/dist/npm/colorpicker/utils/color-parser.js +18 -5
  193. package/dist/npm/colorpicker/utils/contrast-curve.js +93 -0
  194. package/dist/npm/colorpicker/utils.js +1 -1
  195. package/dist/npm/colorpicker.module.js +9 -1
  196. package/dist/npm/common/models/fillmode.js +6 -0
  197. package/dist/npm/common/models/rounded.js +6 -0
  198. package/dist/npm/common/models/size.js +6 -0
  199. package/dist/npm/common/models/styling-classes.js +6 -0
  200. package/dist/npm/common/models.js +6 -0
  201. package/dist/npm/common/utils.js +37 -0
  202. package/dist/npm/index.js +10 -0
  203. package/dist/npm/main.js +7 -4
  204. package/dist/npm/maskedtextbox/maskedtextbox.component.js +100 -5
  205. package/dist/npm/numerictextbox/numerictextbox.component.js +115 -19
  206. package/dist/npm/package-metadata.js +1 -1
  207. package/dist/npm/radiobutton/radiobutton.directive.js +51 -2
  208. package/dist/npm/shared/textarea.directive.js +3 -2
  209. package/dist/npm/shared/utils.js +25 -0
  210. package/dist/npm/switch/switch.component.js +166 -20
  211. package/dist/npm/text-fields-common/text-fields-base.js +1 -1
  212. package/dist/npm/textarea/textarea.component.js +100 -4
  213. package/dist/npm/textbox/textbox.component.js +113 -14
  214. package/dist/npm/textbox/textbox.directive.js +3 -2
  215. package/dist/npm/textbox.module.js +0 -3
  216. package/dist/systemjs/kendo-angular-inputs.js +1 -1
  217. package/package.json +15 -12
  218. package/dist/es/colorpicker/models/preventable-event.js +0 -29
  219. package/dist/es/textbox/floating-label-input-adapter.js +0 -58
  220. package/dist/es/textbox/textbox-container.component.js +0 -224
  221. package/dist/es2015/colorpicker/models/preventable-event.d.ts +0 -21
  222. package/dist/es2015/colorpicker/models/preventable-event.js +0 -27
  223. package/dist/es2015/textbox/floating-label-input-adapter.d.ts +0 -20
  224. package/dist/es2015/textbox/floating-label-input-adapter.js +0 -52
  225. package/dist/es2015/textbox/textbox-container.component.d.ts +0 -59
  226. package/dist/es2015/textbox/textbox-container.component.js +0 -209
  227. package/dist/npm/colorpicker/models/preventable-event.js +0 -31
  228. package/dist/npm/textbox/floating-label-input-adapter.js +0 -60
  229. package/dist/npm/textbox/textbox-container.component.js +0 -226
@@ -3,18 +3,20 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
+ import { isJapanese } from './../shared/utils';
6
7
  import { closest } from './../common/dom-utils';
7
8
  import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
8
9
  import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2 } from '@angular/core';
9
10
  import { validatePackage } from '@progress/kendo-licensing';
10
11
  import { packageMetadata } from '../package-metadata';
11
12
  import { invokeElementMethod } from '../common/dom-utils';
12
- import { areSame, requiresZoneOnBlur } from '../common/utils';
13
+ import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
13
14
  import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
14
15
  import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
15
16
  import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
16
17
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
17
- var FOCUSED = 'k-state-focused';
18
+ import { isSafari } from '../shared/utils';
19
+ var FOCUSED = 'k-focus';
18
20
  var TextBoxComponent = /** @class */ (function () {
19
21
  function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
20
22
  var _this = this;
@@ -149,9 +151,12 @@ var TextBoxComponent = /** @class */ (function () {
149
151
  * ```
150
152
  */
151
153
  this.onBlur = new EventEmitter();
152
- this.hostClass = true;
154
+ this.hostClasses = true;
153
155
  this._isFocused = false;
154
156
  this.focusChangedProgrammatically = false;
157
+ this._size = 'medium';
158
+ this._rounded = 'medium';
159
+ this._fillMode = 'solid';
155
160
  /**
156
161
  * @hidden
157
162
  */
@@ -197,7 +202,7 @@ var TextBoxComponent = /** @class */ (function () {
197
202
  * @hidden
198
203
  */
199
204
  this.handleInput = function (ev) {
200
- var incomingValue = ev.target.value;
205
+ var incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
201
206
  _this.updateValue(incomingValue);
202
207
  };
203
208
  this.ngChange = function (_) { };
@@ -206,6 +211,70 @@ var TextBoxComponent = /** @class */ (function () {
206
211
  this.direction = localizationService.rtl ? 'rtl' : 'ltr';
207
212
  }
208
213
  TextBoxComponent_1 = TextBoxComponent;
214
+ Object.defineProperty(TextBoxComponent.prototype, "size", {
215
+ get: function () {
216
+ return this._size;
217
+ },
218
+ /**
219
+ * The size property specifies the font size and line height of the TextBox
220
+ * ([see example]({% slug appearance_textbox %}#toc-size)).
221
+ *
222
+ * The possible values are:
223
+ * * `'small'`
224
+ * * `'medium'` (default)
225
+ * * `'large'`
226
+ * * `null`
227
+ */
228
+ set: function (size) {
229
+ this.handleClasses(size, 'size');
230
+ this._size = size;
231
+ },
232
+ enumerable: true,
233
+ configurable: true
234
+ });
235
+ Object.defineProperty(TextBoxComponent.prototype, "rounded", {
236
+ get: function () {
237
+ return this._rounded;
238
+ },
239
+ /**
240
+ * The rounded property specifies the border radius of the TextBox
241
+ * ([see example]({% slug appearance_textbox %}#toc-rounded)).
242
+ *
243
+ * The possible values are:
244
+ * * `'small'`
245
+ * * `'medium'` (default)
246
+ * * `'large'`
247
+ * * `'full'`
248
+ * * `null`
249
+ */
250
+ set: function (rounded) {
251
+ this.handleClasses(rounded, 'rounded');
252
+ this._rounded = rounded;
253
+ },
254
+ enumerable: true,
255
+ configurable: true
256
+ });
257
+ Object.defineProperty(TextBoxComponent.prototype, "fillMode", {
258
+ get: function () {
259
+ return this._fillMode;
260
+ },
261
+ /**
262
+ * The fillMode property specifies the background and border styles of the TextBox
263
+ * ([see example]({% slug appearance_textbox %}#toc-fillMode)).
264
+ *
265
+ * The possible values are:
266
+ * * `'flat'`
267
+ * * `'solid'` (default)
268
+ * * `'outline'`
269
+ * * `null`
270
+ */
271
+ set: function (fillMode) {
272
+ this.handleClasses(fillMode, 'fillMode');
273
+ this._fillMode = fillMode;
274
+ },
275
+ enumerable: true,
276
+ configurable: true
277
+ });
209
278
  Object.defineProperty(TextBoxComponent.prototype, "tabIndex", {
210
279
  get: function () {
211
280
  return this.tabindex;
@@ -282,6 +351,10 @@ var TextBoxComponent = /** @class */ (function () {
282
351
  }
283
352
  }));
284
353
  });
354
+ var stylingInputs = ['size', 'rounded', 'fillMode'];
355
+ stylingInputs.forEach(function (input) {
356
+ _this.handleClasses(_this[input], input);
357
+ });
285
358
  };
286
359
  TextBoxComponent.prototype.ngOnChanges = function (changes) {
287
360
  if (changes.disabled || changes.readonly || changes.value) {
@@ -415,8 +488,8 @@ var TextBoxComponent = /** @class */ (function () {
415
488
  */
416
489
  get: function () {
417
490
  return this.successIcon
418
- ? "k-text-success " + this.successIcon
419
- : "k-text-success k-icon k-i-check-outline";
491
+ ? "" + this.successIcon
492
+ : "k-validation-icon k-icon k-i-check";
420
493
  },
421
494
  enumerable: true,
422
495
  configurable: true
@@ -427,8 +500,8 @@ var TextBoxComponent = /** @class */ (function () {
427
500
  */
428
501
  get: function () {
429
502
  return this.errorIcon
430
- ? "k-text-error " + this.errorIcon
431
- : "k-text-error k-icon k-i-warning";
503
+ ? "" + this.errorIcon
504
+ : "k-validation-icon k-icon k-i-warning";
432
505
  },
433
506
  enumerable: true,
434
507
  configurable: true
@@ -440,7 +513,7 @@ var TextBoxComponent = /** @class */ (function () {
440
513
  get: function () {
441
514
  return this.clearButtonIcon
442
515
  ? this.clearButtonIcon
443
- : "k-icon k-i-close-circle";
516
+ : "k-icon k-i-x";
444
517
  },
445
518
  enumerable: true,
446
519
  configurable: true
@@ -519,6 +592,16 @@ var TextBoxComponent = /** @class */ (function () {
519
592
  _this.isFocused = false;
520
593
  });
521
594
  };
595
+ TextBoxComponent.prototype.handleClasses = function (value, input) {
596
+ var elem = this.hostElement.nativeElement;
597
+ var classes = getStylingClasses('input', input, this[input], value);
598
+ if (classes.toRemove) {
599
+ this.renderer.removeClass(elem, classes.toRemove);
600
+ }
601
+ if (classes.toAdd) {
602
+ this.renderer.addClass(elem, classes.toAdd);
603
+ }
604
+ };
522
605
  var TextBoxComponent_1;
523
606
  tslib_1.__decorate([
524
607
  Input(),
@@ -572,6 +655,21 @@ var TextBoxComponent = /** @class */ (function () {
572
655
  Input(),
573
656
  tslib_1.__metadata("design:type", String)
574
657
  ], TextBoxComponent.prototype, "clearButtonIcon", void 0);
658
+ tslib_1.__decorate([
659
+ Input(),
660
+ tslib_1.__metadata("design:type", String),
661
+ tslib_1.__metadata("design:paramtypes", [String])
662
+ ], TextBoxComponent.prototype, "size", null);
663
+ tslib_1.__decorate([
664
+ Input(),
665
+ tslib_1.__metadata("design:type", String),
666
+ tslib_1.__metadata("design:paramtypes", [String])
667
+ ], TextBoxComponent.prototype, "rounded", null);
668
+ tslib_1.__decorate([
669
+ Input(),
670
+ tslib_1.__metadata("design:type", String),
671
+ tslib_1.__metadata("design:paramtypes", [String])
672
+ ], TextBoxComponent.prototype, "fillMode", null);
575
673
  tslib_1.__decorate([
576
674
  Input(),
577
675
  tslib_1.__metadata("design:type", Number),
@@ -618,14 +716,15 @@ var TextBoxComponent = /** @class */ (function () {
618
716
  tslib_1.__metadata("design:type", TextBoxPrefixTemplateDirective)
619
717
  ], TextBoxComponent.prototype, "prefixTemplate", void 0);
620
718
  tslib_1.__decorate([
621
- HostBinding('class.k-state-disabled'),
719
+ HostBinding('class.k-disabled'),
622
720
  tslib_1.__metadata("design:type", Boolean),
623
721
  tslib_1.__metadata("design:paramtypes", [])
624
722
  ], TextBoxComponent.prototype, "disabledClass", null);
625
723
  tslib_1.__decorate([
626
724
  HostBinding('class.k-textbox'),
725
+ HostBinding('class.k-input'),
627
726
  tslib_1.__metadata("design:type", Boolean)
628
- ], TextBoxComponent.prototype, "hostClass", void 0);
727
+ ], TextBoxComponent.prototype, "hostClasses", void 0);
629
728
  tslib_1.__decorate([
630
729
  HostBinding('attr.dir'),
631
730
  tslib_1.__metadata("design:type", String)
@@ -644,7 +743,7 @@ var TextBoxComponent = /** @class */ (function () {
644
743
  { provide: KendoInput, useExisting: forwardRef(function () { return TextBoxComponent_1; }) }
645
744
  ],
646
745
  selector: 'kendo-textbox',
647
- template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input\n class=\"k-input\"\n #input\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"/>\n <span class=\"k-input-suffix\">\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\"\n >\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
746
+ template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input\n class=\"k-input-inner\"\n #input\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"/>\n <span class=\"k-input-suffix\">\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\"\n >\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
648
747
  }),
649
748
  tslib_1.__metadata("design:paramtypes", [LocalizationService,
650
749
  NgZone,
@@ -21,7 +21,7 @@ var TextBoxDirective = /** @class */ (function () {
21
21
  this.renderer = renderer;
22
22
  this.inputElement = inputElement;
23
23
  this.ngZone = ngZone;
24
- this.hostClass = true;
24
+ this.hostClasses = true;
25
25
  /**
26
26
  * @hidden
27
27
  */
@@ -99,8 +99,9 @@ var TextBoxDirective = /** @class */ (function () {
99
99
  var TextBoxDirective_1;
100
100
  tslib_1.__decorate([
101
101
  HostBinding('class.k-textbox'),
102
+ HostBinding('class.k-input'),
102
103
  tslib_1.__metadata("design:type", Boolean)
103
- ], TextBoxDirective.prototype, "hostClass", void 0);
104
+ ], TextBoxDirective.prototype, "hostClasses", void 0);
104
105
  tslib_1.__decorate([
105
106
  Input(),
106
107
  tslib_1.__metadata("design:type", String),
@@ -5,7 +5,6 @@
5
5
  import * as tslib_1 from "tslib";
6
6
  import { NgModule } from "@angular/core";
7
7
  import { TextBoxDirective } from "./textbox/textbox.directive";
8
- import { TextBoxContainerComponent } from "./textbox/textbox-container.component";
9
8
  import { TextBoxComponent } from "./textbox/textbox.component";
10
9
  import { CommonModule } from "@angular/common";
11
10
  import { EventsModule } from "@progress/kendo-angular-common";
@@ -52,7 +51,6 @@ var TextBoxModule = /** @class */ (function () {
52
51
  NgModule({
53
52
  declarations: [
54
53
  TextBoxDirective,
55
- TextBoxContainerComponent,
56
54
  TextBoxComponent,
57
55
  TextBoxSuffixTemplateDirective,
58
56
  TextBoxPrefixTemplateDirective,
@@ -61,7 +59,6 @@ var TextBoxModule = /** @class */ (function () {
61
59
  ],
62
60
  exports: [
63
61
  TextBoxDirective,
64
- TextBoxContainerComponent,
65
62
  TextBoxComponent,
66
63
  TextBoxSuffixTemplateDirective,
67
64
  TextBoxPrefixTemplateDirective,
@@ -2,6 +2,8 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
+ import { ElementRef, Renderer2 } from '@angular/core';
6
+ import { CheckBoxRounded, InputSize } from '../common/models';
5
7
  /**
6
8
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
7
9
  * The directive is placed on input type="checkbox" elements.
@@ -12,5 +14,34 @@
12
14
  * ```
13
15
  */
14
16
  export declare class CheckBoxDirective {
17
+ private renderer;
18
+ private hostElement;
15
19
  kendoClass: boolean;
20
+ /**
21
+ * The size property specifies the width and height of the CheckBox
22
+ * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
23
+ *
24
+ * The possible values are:
25
+ * * `'small'`
26
+ * * `'medium'` (default)
27
+ * * `'large'`
28
+ * * `null`
29
+ */
30
+ size: InputSize;
31
+ /**
32
+ * The rounded property specifies the border radius of the CheckBox
33
+ * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
34
+ *
35
+ * The possible values are:
36
+ * * `'small'`
37
+ * * `'medium'` (default)
38
+ * * `'large'`
39
+ * * `null`
40
+ */
41
+ rounded: CheckBoxRounded;
42
+ private _size;
43
+ private _rounded;
44
+ constructor(renderer: Renderer2, hostElement: ElementRef);
45
+ ngAfterViewInit(): void;
46
+ private handleClasses;
16
47
  }
@@ -3,7 +3,8 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
- import { Directive, HostBinding } from '@angular/core';
6
+ import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
7
+ import { getStylingClasses } from '../common/utils';
7
8
  /**
8
9
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
9
10
  * The directive is placed on input type="checkbox" elements.
@@ -14,26 +15,83 @@ import { Directive, HostBinding } from '@angular/core';
14
15
  * ```
15
16
  */
16
17
  let CheckBoxDirective = class CheckBoxDirective {
18
+ constructor(renderer, hostElement) {
19
+ this.renderer = renderer;
20
+ this.hostElement = hostElement;
21
+ this.kendoClass = true;
22
+ this._size = 'medium';
23
+ this._rounded = 'medium';
24
+ }
17
25
  /**
18
- * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
19
- * The directive is placed on input type="checkbox" elements.
26
+ * The size property specifies the width and height of the CheckBox
27
+ * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
20
28
  *
21
- * @example
22
- * ```ts-no-run
23
- * <input type="checkbox" kendoCheckBox />
24
- * ```
29
+ * The possible values are:
30
+ * * `'small'`
31
+ * * `'medium'` (default)
32
+ * * `'large'`
33
+ * * `null`
25
34
  */
26
- constructor() {
27
- this.kendoClass = true;
35
+ set size(size) {
36
+ this.handleClasses(size, 'size');
37
+ this._size = size;
38
+ }
39
+ get size() {
40
+ return this._size;
41
+ }
42
+ /**
43
+ * The rounded property specifies the border radius of the CheckBox
44
+ * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
45
+ *
46
+ * The possible values are:
47
+ * * `'small'`
48
+ * * `'medium'` (default)
49
+ * * `'large'`
50
+ * * `null`
51
+ */
52
+ set rounded(rounded) {
53
+ this.handleClasses(rounded, 'rounded');
54
+ this._rounded = rounded;
55
+ }
56
+ get rounded() {
57
+ return this._rounded;
58
+ }
59
+ ngAfterViewInit() {
60
+ const stylingInputs = ['size', 'rounded'];
61
+ stylingInputs.forEach(input => {
62
+ this.handleClasses(this[input], input);
63
+ });
64
+ }
65
+ handleClasses(value, input) {
66
+ const elem = this.hostElement.nativeElement;
67
+ const classes = getStylingClasses('checkbox', input, this[input], value);
68
+ if (classes.toRemove) {
69
+ this.renderer.removeClass(elem, classes.toRemove);
70
+ }
71
+ if (classes.toAdd) {
72
+ this.renderer.addClass(elem, classes.toAdd);
73
+ }
28
74
  }
29
75
  };
30
76
  tslib_1.__decorate([
31
77
  HostBinding('class.k-checkbox'),
32
78
  tslib_1.__metadata("design:type", Boolean)
33
79
  ], CheckBoxDirective.prototype, "kendoClass", void 0);
80
+ tslib_1.__decorate([
81
+ Input(),
82
+ tslib_1.__metadata("design:type", String),
83
+ tslib_1.__metadata("design:paramtypes", [String])
84
+ ], CheckBoxDirective.prototype, "size", null);
85
+ tslib_1.__decorate([
86
+ Input(),
87
+ tslib_1.__metadata("design:type", String),
88
+ tslib_1.__metadata("design:paramtypes", [String])
89
+ ], CheckBoxDirective.prototype, "rounded", null);
34
90
  CheckBoxDirective = tslib_1.__decorate([
35
91
  Directive({
36
92
  selector: 'input[kendoCheckBox]'
37
- })
93
+ }),
94
+ tslib_1.__metadata("design:paramtypes", [Renderer2,
95
+ ElementRef])
38
96
  ], CheckBoxDirective);
39
97
  export { CheckBoxDirective };
@@ -0,0 +1,26 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { SimpleChanges, AfterViewInit, OnChanges } from '@angular/core';
6
+ import { BehaviorSubject } from 'rxjs';
7
+ import { HSVA } from './models';
8
+ /**
9
+ * @hidden
10
+ */
11
+ export declare class ColorContrastSvgComponent implements AfterViewInit, OnChanges {
12
+ hostClass: boolean;
13
+ wrapper: any;
14
+ hsva: BehaviorSubject<HSVA>;
15
+ backgroundColor: string;
16
+ paths: any[];
17
+ oldHsva: HSVA;
18
+ oldH: number;
19
+ oldA: number;
20
+ metrics: any;
21
+ ngAfterViewInit(): void;
22
+ ngOnChanges(changes: SimpleChanges): void;
23
+ setPaths(): void;
24
+ private findValue;
25
+ private getPaths;
26
+ }
@@ -0,0 +1,97 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as tslib_1 from "tslib";
6
+ import { Component, HostBinding, Input } from '@angular/core';
7
+ import { BehaviorSubject } from 'rxjs';
8
+ import { isPresent } from '../common/utils';
9
+ import { AA_RATIO, STEP_COUNT, AAA_RATIO } from './constants';
10
+ import { bezierCommand, getContrastFromTwoRGBAs, getRGBA, getColorFromHSV, svgPath, controlPoint, line } from './utils';
11
+ /**
12
+ * @hidden
13
+ */
14
+ let ColorContrastSvgComponent = class ColorContrastSvgComponent {
15
+ /**
16
+ * @hidden
17
+ */
18
+ constructor() {
19
+ this.hostClass = true;
20
+ }
21
+ ngAfterViewInit() {
22
+ this.metrics = this.wrapper.getBoundingClientRect();
23
+ this.oldA = this.hsva.value.a;
24
+ this.oldH = this.hsva.value.h;
25
+ this.hsva.subscribe((value) => {
26
+ if (value.h !== this.oldH || value.a !== this.oldA) {
27
+ this.oldH = value.h;
28
+ this.oldA = value.a;
29
+ this.setPaths();
30
+ }
31
+ });
32
+ }
33
+ ngOnChanges(changes) {
34
+ if (isPresent(changes.backgroundColor) && this.metrics) {
35
+ this.setPaths();
36
+ }
37
+ }
38
+ setPaths() {
39
+ const bezierCommandCalc = bezierCommand(controlPoint(line));
40
+ this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
41
+ svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
42
+ svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
43
+ svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
44
+ }
45
+ findValue(contrast, saturation, low, high, comparer) {
46
+ const mid = (low + high) / 2;
47
+ const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
48
+ const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
49
+ if (low + 0.5 > high) {
50
+ if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
51
+ return mid;
52
+ }
53
+ else {
54
+ return null;
55
+ }
56
+ }
57
+ if (comparer(currentContrast, contrast)) {
58
+ return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
59
+ }
60
+ return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
61
+ }
62
+ getPaths(contrast, stepCount, reversed = false) {
63
+ const points = [];
64
+ for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
65
+ const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
66
+ if (value !== null) {
67
+ points.push([i, value]);
68
+ }
69
+ }
70
+ return points;
71
+ }
72
+ };
73
+ tslib_1.__decorate([
74
+ HostBinding('class.k-color-contrast-svg'),
75
+ tslib_1.__metadata("design:type", Boolean)
76
+ ], ColorContrastSvgComponent.prototype, "hostClass", void 0);
77
+ tslib_1.__decorate([
78
+ Input(),
79
+ tslib_1.__metadata("design:type", Object)
80
+ ], ColorContrastSvgComponent.prototype, "wrapper", void 0);
81
+ tslib_1.__decorate([
82
+ Input(),
83
+ tslib_1.__metadata("design:type", BehaviorSubject)
84
+ ], ColorContrastSvgComponent.prototype, "hsva", void 0);
85
+ tslib_1.__decorate([
86
+ Input(),
87
+ tslib_1.__metadata("design:type", String)
88
+ ], ColorContrastSvgComponent.prototype, "backgroundColor", void 0);
89
+ ColorContrastSvgComponent = tslib_1.__decorate([
90
+ Component({
91
+ selector: '[kendoColorContrastSvg]',
92
+ template: `
93
+ <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
94
+ `
95
+ })
96
+ ], ColorContrastSvgComponent);
97
+ export { ColorContrastSvgComponent };