@progress/kendo-angular-inputs 21.1.1-develop.1 → 21.2.0-develop.1

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 (28) hide show
  1. package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +105 -97
  2. package/esm2022/colorpicker/color-contrast-svg.component.mjs +10 -7
  3. package/esm2022/colorpicker/color-gradient.component.mjs +287 -279
  4. package/esm2022/colorpicker/color-input.component.mjs +242 -235
  5. package/esm2022/colorpicker/color-palette.component.mjs +47 -39
  6. package/esm2022/colorpicker/colorpicker.component.mjs +228 -222
  7. package/esm2022/colorpicker/contrast-validation.component.mjs +26 -21
  8. package/esm2022/colorpicker/contrast.component.mjs +46 -37
  9. package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +105 -95
  10. package/esm2022/colorpicker/flatcolorpicker.component.mjs +167 -157
  11. package/esm2022/form/form.component.mjs +13 -9
  12. package/esm2022/formfield/formfield.component.mjs +18 -11
  13. package/esm2022/formfieldset/formfieldset.component.mjs +15 -11
  14. package/esm2022/maskedtextbox/maskedtextbox.component.mjs +77 -61
  15. package/esm2022/numerictextbox/numerictextbox.component.mjs +133 -113
  16. package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
  17. package/esm2022/otpinput/otpinput.component.mjs +116 -109
  18. package/esm2022/package-metadata.mjs +2 -2
  19. package/esm2022/rangeslider/rangeslider.component.mjs +114 -113
  20. package/esm2022/rating/rating.component.mjs +273 -271
  21. package/esm2022/signature/signature.component.mjs +170 -161
  22. package/esm2022/slider/slider.component.mjs +130 -125
  23. package/esm2022/sliders-common/slider-ticks.component.mjs +43 -31
  24. package/esm2022/textarea/textarea.component.mjs +73 -69
  25. package/esm2022/textbox/textbox.component.mjs +145 -123
  26. package/fesm2022/progress-kendo-angular-inputs.mjs +2599 -2393
  27. package/package.json +12 -12
  28. package/schematics/ngAdd/index.js +4 -0
package/esm2022/colorpicker/color-input.component.mjs CHANGED
@@ -12,7 +12,6 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
12
12
  import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
13
13
  import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
14
14
  import { NumericLabelDirective } from './color-gradient-numeric-label.directive';
15
- import { NgIf } from '@angular/common';
16
15
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
17
16
  import { TextBoxComponent } from '../textbox/textbox.component';
18
17
  import { TextLabelDirective } from './color-gradient-text-label.directive';
@@ -190,132 +189,136 @@ export class ColorInputComponent {
190
189
  return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
191
190
  }
192
191
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
193
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
192
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
194
193
  <div class="k-vstack">
195
- <button
196
- kendoButton
197
- type="button"
198
- fillMode="flat"
199
- #toggleFormatButton
200
- icon="caret-alt-expand"
201
- [svgIcon]="caretAltExpandIcon"
202
- [size]="size"
203
- class="k-colorgradient-toggle-mode"
204
- [attr.aria-label]="formatButtonTitle"
205
- [attr.title]="formatButtonTitle"
206
- [disabled]="disabled"
207
- [tabindex]="tabindex.toString()"
194
+ <button
195
+ kendoButton
196
+ type="button"
197
+ fillMode="flat"
198
+ #toggleFormatButton
199
+ icon="caret-alt-expand"
200
+ [svgIcon]="caretAltExpandIcon"
201
+ [size]="size"
202
+ class="k-colorgradient-toggle-mode"
203
+ [attr.aria-label]="formatButtonTitle"
204
+ [attr.title]="formatButtonTitle"
205
+ [disabled]="disabled"
206
+ [tabindex]="tabindex.toString()"
208
207
  >
209
- </button>
208
+ </button>
210
209
  </div>
211
- <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
210
+ @if (formatView === 'hex') {
211
+ <div class="k-vstack k-flex-1">
212
212
  <kendo-textbox
213
- #hexInput
214
- kendoTextLabel
215
- [focusableId]="focusableId"
216
- class="k-hex-value"
217
- [size]="size"
218
- [class.k-readonly]="readonly"
213
+ #hexInput
214
+ kendoTextLabel
215
+ [focusableId]="focusableId"
216
+ class="k-hex-value"
217
+ [size]="size"
218
+ [class.k-readonly]="readonly"
219
+ [disabled]="disabled"
220
+ [readonly]="readonly"
221
+ [value]="hex || ''"
222
+ (blur)="handleHexInputBlur()"
223
+ (input)="handleHexValueChange(hexInput.value)"
224
+ [tabindex]="tabindex"
225
+ (keydown.tab)="focusDragHandle($event)">
226
+ </kendo-textbox>
227
+ <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
228
+ </div>
229
+ }
230
+ @if (formatView === 'rgba') {
231
+ <div class="k-vstack">
232
+ <kendo-numerictextbox
233
+ #red
234
+ kendoAdditionalNumericLabel="red"
235
+ [localizationService]="localizationService"
236
+ [disabled]="disabled"
237
+ [size]="size"
238
+ [readonly]="readonly"
239
+ [tabindex]="tabindex"
240
+ [min]="0"
241
+ [max]="255"
242
+ [(value)]="rgba.r"
243
+ [autoCorrect]="true"
244
+ [spinners]="false"
245
+ [format]="'n'"
246
+ [decimals]="0"
247
+ (blur)="handleRgbaInputBlur()"
248
+ (valueChange)="handleRgbaValueChange()">
249
+ </kendo-numerictextbox>
250
+ <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
251
+ </div>
252
+ <div class="k-vstack">
253
+ <kendo-numerictextbox
254
+ #green
255
+ kendoAdditionalNumericLabel="green"
256
+ [localizationService]="localizationService"
257
+ [disabled]="disabled"
258
+ [readonly]="readonly"
259
+ [tabindex]="tabindex"
260
+ [size]="size"
261
+ [min]="0"
262
+ [max]="255"
263
+ [(value)]="rgba.g"
264
+ [autoCorrect]="true"
265
+ [spinners]="false"
266
+ [format]="'n'"
267
+ [decimals]="0"
268
+ (blur)="handleRgbaInputBlur()"
269
+ (valueChange)="handleRgbaValueChange()">
270
+ </kendo-numerictextbox>
271
+ <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
272
+ </div>
273
+ <div class="k-vstack">
274
+ <kendo-numerictextbox
275
+ #blue
276
+ kendoAdditionalNumericLabel="blue"
277
+ [localizationService]="localizationService"
278
+ [disabled]="disabled"
279
+ [readonly]="readonly"
280
+ [tabindex]="tabindex"
281
+ [size]="size"
282
+ [min]="0"
283
+ [max]="255"
284
+ [(value)]="rgba.b"
285
+ [autoCorrect]="true"
286
+ [spinners]="false"
287
+ [format]="'n'"
288
+ [decimals]="0"
289
+ (blur)="handleRgbaInputBlur()"
290
+ (valueChange)="handleRgbaValueChange()"
291
+ (keydown.tab)="onTab()">
292
+ </kendo-numerictextbox>
293
+ <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
294
+ </div>
295
+ @if (opacity) {
296
+ <div class="k-vstack">
297
+ <kendo-numerictextbox #opacityInput
298
+ #alpha
299
+ kendoAdditionalNumericLabel="alpha"
300
+ [localizationService]="localizationService"
219
301
  [disabled]="disabled"
220
302
  [readonly]="readonly"
221
- [value]="hex || ''"
222
- (blur)="handleHexInputBlur()"
223
- (input)="handleHexValueChange(hexInput.value)"
224
303
  [tabindex]="tabindex"
304
+ [size]="size"
305
+ [min]="0"
306
+ [max]="1"
307
+ [(value)]="rgba.a"
308
+ [autoCorrect]="true"
309
+ [spinners]="false"
310
+ [step]="0.01"
311
+ [format]="'n2'"
312
+ [decimals]="2"
313
+ (blur)="handleRgbaInputBlur()"
314
+ (valueChange)="handleRgbaValueChange()"
225
315
  (keydown.tab)="focusDragHandle($event)">
226
- </kendo-textbox>
227
- <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
228
- </div>
229
- <ng-container *ngIf="formatView === 'rgba'">
230
- <div class="k-vstack">
231
- <kendo-numerictextbox
232
- #red
233
- kendoAdditionalNumericLabel="red"
234
- [localizationService]="localizationService"
235
- [disabled]="disabled"
236
- [size]="size"
237
- [readonly]="readonly"
238
- [tabindex]="tabindex"
239
- [min]="0"
240
- [max]="255"
241
- [(value)]="rgba.r"
242
- [autoCorrect]="true"
243
- [spinners]="false"
244
- [format]="'n'"
245
- [decimals]="0"
246
- (blur)="handleRgbaInputBlur()"
247
- (valueChange)="handleRgbaValueChange()">
248
- </kendo-numerictextbox>
249
- <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
250
- </div>
251
- <div class="k-vstack">
252
- <kendo-numerictextbox
253
- #green
254
- kendoAdditionalNumericLabel="green"
255
- [localizationService]="localizationService"
256
- [disabled]="disabled"
257
- [readonly]="readonly"
258
- [tabindex]="tabindex"
259
- [size]="size"
260
- [min]="0"
261
- [max]="255"
262
- [(value)]="rgba.g"
263
- [autoCorrect]="true"
264
- [spinners]="false"
265
- [format]="'n'"
266
- [decimals]="0"
267
- (blur)="handleRgbaInputBlur()"
268
- (valueChange)="handleRgbaValueChange()">
269
- </kendo-numerictextbox>
270
- <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
316
+ </kendo-numerictextbox>
317
+ <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
271
318
  </div>
272
- <div class="k-vstack">
273
- <kendo-numerictextbox
274
- #blue
275
- kendoAdditionalNumericLabel="blue"
276
- [localizationService]="localizationService"
277
- [disabled]="disabled"
278
- [readonly]="readonly"
279
- [tabindex]="tabindex"
280
- [size]="size"
281
- [min]="0"
282
- [max]="255"
283
- [(value)]="rgba.b"
284
- [autoCorrect]="true"
285
- [spinners]="false"
286
- [format]="'n'"
287
- [decimals]="0"
288
- (blur)="handleRgbaInputBlur()"
289
- (valueChange)="handleRgbaValueChange()"
290
- (keydown.tab)="onTab()">
291
- </kendo-numerictextbox>
292
- <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
293
- </div>
294
- <div class="k-vstack" *ngIf="opacity">
295
- <kendo-numerictextbox #opacityInput
296
- #alpha
297
- kendoAdditionalNumericLabel="alpha"
298
- [localizationService]="localizationService"
299
- [disabled]="disabled"
300
- [readonly]="readonly"
301
- [tabindex]="tabindex"
302
- [size]="size"
303
- [min]="0"
304
- [max]="1"
305
- [(value)]="rgba.a"
306
- [autoCorrect]="true"
307
- [spinners]="false"
308
- [step]="0.01"
309
- [format]="'n2'"
310
- [decimals]="2"
311
- (blur)="handleRgbaInputBlur()"
312
- (valueChange)="handleRgbaValueChange()"
313
- (keydown.tab)="focusDragHandle($event)">
314
- </kendo-numerictextbox>
315
- <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
316
- </div>
317
- </ng-container>
318
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
319
+ }
320
+ }
321
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
319
322
  }
320
323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorInputComponent, decorators: [{
321
324
  type: Component,
@@ -323,132 +326,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
323
326
  selector: 'kendo-colorinput',
324
327
  template: `
325
328
  <div class="k-vstack">
326
- <button
327
- kendoButton
328
- type="button"
329
- fillMode="flat"
330
- #toggleFormatButton
331
- icon="caret-alt-expand"
332
- [svgIcon]="caretAltExpandIcon"
333
- [size]="size"
334
- class="k-colorgradient-toggle-mode"
335
- [attr.aria-label]="formatButtonTitle"
336
- [attr.title]="formatButtonTitle"
337
- [disabled]="disabled"
338
- [tabindex]="tabindex.toString()"
329
+ <button
330
+ kendoButton
331
+ type="button"
332
+ fillMode="flat"
333
+ #toggleFormatButton
334
+ icon="caret-alt-expand"
335
+ [svgIcon]="caretAltExpandIcon"
336
+ [size]="size"
337
+ class="k-colorgradient-toggle-mode"
338
+ [attr.aria-label]="formatButtonTitle"
339
+ [attr.title]="formatButtonTitle"
340
+ [disabled]="disabled"
341
+ [tabindex]="tabindex.toString()"
339
342
  >
340
- </button>
343
+ </button>
341
344
  </div>
342
- <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
345
+ @if (formatView === 'hex') {
346
+ <div class="k-vstack k-flex-1">
343
347
  <kendo-textbox
344
- #hexInput
345
- kendoTextLabel
346
- [focusableId]="focusableId"
347
- class="k-hex-value"
348
- [size]="size"
349
- [class.k-readonly]="readonly"
348
+ #hexInput
349
+ kendoTextLabel
350
+ [focusableId]="focusableId"
351
+ class="k-hex-value"
352
+ [size]="size"
353
+ [class.k-readonly]="readonly"
354
+ [disabled]="disabled"
355
+ [readonly]="readonly"
356
+ [value]="hex || ''"
357
+ (blur)="handleHexInputBlur()"
358
+ (input)="handleHexValueChange(hexInput.value)"
359
+ [tabindex]="tabindex"
360
+ (keydown.tab)="focusDragHandle($event)">
361
+ </kendo-textbox>
362
+ <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
363
+ </div>
364
+ }
365
+ @if (formatView === 'rgba') {
366
+ <div class="k-vstack">
367
+ <kendo-numerictextbox
368
+ #red
369
+ kendoAdditionalNumericLabel="red"
370
+ [localizationService]="localizationService"
371
+ [disabled]="disabled"
372
+ [size]="size"
373
+ [readonly]="readonly"
374
+ [tabindex]="tabindex"
375
+ [min]="0"
376
+ [max]="255"
377
+ [(value)]="rgba.r"
378
+ [autoCorrect]="true"
379
+ [spinners]="false"
380
+ [format]="'n'"
381
+ [decimals]="0"
382
+ (blur)="handleRgbaInputBlur()"
383
+ (valueChange)="handleRgbaValueChange()">
384
+ </kendo-numerictextbox>
385
+ <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
386
+ </div>
387
+ <div class="k-vstack">
388
+ <kendo-numerictextbox
389
+ #green
390
+ kendoAdditionalNumericLabel="green"
391
+ [localizationService]="localizationService"
392
+ [disabled]="disabled"
393
+ [readonly]="readonly"
394
+ [tabindex]="tabindex"
395
+ [size]="size"
396
+ [min]="0"
397
+ [max]="255"
398
+ [(value)]="rgba.g"
399
+ [autoCorrect]="true"
400
+ [spinners]="false"
401
+ [format]="'n'"
402
+ [decimals]="0"
403
+ (blur)="handleRgbaInputBlur()"
404
+ (valueChange)="handleRgbaValueChange()">
405
+ </kendo-numerictextbox>
406
+ <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
407
+ </div>
408
+ <div class="k-vstack">
409
+ <kendo-numerictextbox
410
+ #blue
411
+ kendoAdditionalNumericLabel="blue"
412
+ [localizationService]="localizationService"
413
+ [disabled]="disabled"
414
+ [readonly]="readonly"
415
+ [tabindex]="tabindex"
416
+ [size]="size"
417
+ [min]="0"
418
+ [max]="255"
419
+ [(value)]="rgba.b"
420
+ [autoCorrect]="true"
421
+ [spinners]="false"
422
+ [format]="'n'"
423
+ [decimals]="0"
424
+ (blur)="handleRgbaInputBlur()"
425
+ (valueChange)="handleRgbaValueChange()"
426
+ (keydown.tab)="onTab()">
427
+ </kendo-numerictextbox>
428
+ <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
429
+ </div>
430
+ @if (opacity) {
431
+ <div class="k-vstack">
432
+ <kendo-numerictextbox #opacityInput
433
+ #alpha
434
+ kendoAdditionalNumericLabel="alpha"
435
+ [localizationService]="localizationService"
350
436
  [disabled]="disabled"
351
437
  [readonly]="readonly"
352
- [value]="hex || ''"
353
- (blur)="handleHexInputBlur()"
354
- (input)="handleHexValueChange(hexInput.value)"
355
438
  [tabindex]="tabindex"
439
+ [size]="size"
440
+ [min]="0"
441
+ [max]="1"
442
+ [(value)]="rgba.a"
443
+ [autoCorrect]="true"
444
+ [spinners]="false"
445
+ [step]="0.01"
446
+ [format]="'n2'"
447
+ [decimals]="2"
448
+ (blur)="handleRgbaInputBlur()"
449
+ (valueChange)="handleRgbaValueChange()"
356
450
  (keydown.tab)="focusDragHandle($event)">
357
- </kendo-textbox>
358
- <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
359
- </div>
360
- <ng-container *ngIf="formatView === 'rgba'">
361
- <div class="k-vstack">
362
- <kendo-numerictextbox
363
- #red
364
- kendoAdditionalNumericLabel="red"
365
- [localizationService]="localizationService"
366
- [disabled]="disabled"
367
- [size]="size"
368
- [readonly]="readonly"
369
- [tabindex]="tabindex"
370
- [min]="0"
371
- [max]="255"
372
- [(value)]="rgba.r"
373
- [autoCorrect]="true"
374
- [spinners]="false"
375
- [format]="'n'"
376
- [decimals]="0"
377
- (blur)="handleRgbaInputBlur()"
378
- (valueChange)="handleRgbaValueChange()">
379
- </kendo-numerictextbox>
380
- <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
381
- </div>
382
- <div class="k-vstack">
383
- <kendo-numerictextbox
384
- #green
385
- kendoAdditionalNumericLabel="green"
386
- [localizationService]="localizationService"
387
- [disabled]="disabled"
388
- [readonly]="readonly"
389
- [tabindex]="tabindex"
390
- [size]="size"
391
- [min]="0"
392
- [max]="255"
393
- [(value)]="rgba.g"
394
- [autoCorrect]="true"
395
- [spinners]="false"
396
- [format]="'n'"
397
- [decimals]="0"
398
- (blur)="handleRgbaInputBlur()"
399
- (valueChange)="handleRgbaValueChange()">
400
- </kendo-numerictextbox>
401
- <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
451
+ </kendo-numerictextbox>
452
+ <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
402
453
  </div>
403
- <div class="k-vstack">
404
- <kendo-numerictextbox
405
- #blue
406
- kendoAdditionalNumericLabel="blue"
407
- [localizationService]="localizationService"
408
- [disabled]="disabled"
409
- [readonly]="readonly"
410
- [tabindex]="tabindex"
411
- [size]="size"
412
- [min]="0"
413
- [max]="255"
414
- [(value)]="rgba.b"
415
- [autoCorrect]="true"
416
- [spinners]="false"
417
- [format]="'n'"
418
- [decimals]="0"
419
- (blur)="handleRgbaInputBlur()"
420
- (valueChange)="handleRgbaValueChange()"
421
- (keydown.tab)="onTab()">
422
- </kendo-numerictextbox>
423
- <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
424
- </div>
425
- <div class="k-vstack" *ngIf="opacity">
426
- <kendo-numerictextbox #opacityInput
427
- #alpha
428
- kendoAdditionalNumericLabel="alpha"
429
- [localizationService]="localizationService"
430
- [disabled]="disabled"
431
- [readonly]="readonly"
432
- [tabindex]="tabindex"
433
- [size]="size"
434
- [min]="0"
435
- [max]="1"
436
- [(value)]="rgba.a"
437
- [autoCorrect]="true"
438
- [spinners]="false"
439
- [step]="0.01"
440
- [format]="'n2'"
441
- [decimals]="2"
442
- (blur)="handleRgbaInputBlur()"
443
- (valueChange)="handleRgbaValueChange()"
444
- (keydown.tab)="focusDragHandle($event)">
445
- </kendo-numerictextbox>
446
- <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
447
- </div>
448
- </ng-container>
449
- `,
454
+ }
455
+ }
456
+ `,
450
457
  standalone: true,
451
- imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective, TextBoxComponent, TextLabelDirective]
458
+ imports: [ButtonComponent, NumericTextBoxComponent, NumericLabelDirective, TextBoxComponent, TextLabelDirective]
452
459
  }]
453
460
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }], propDecorators: { focusableId: [{
454
461
  type: Input