@progress/kendo-angular-inputs 11.3.0-develop.5 → 11.3.0-develop.6

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 (13) hide show
  1. package/colorpicker/color-input.component.d.ts +1 -0
  2. package/colorpicker/color-palette.component.d.ts +1 -0
  3. package/colorpicker/flatcolorpicker.component.d.ts +8 -4
  4. package/esm2020/colorpicker/color-gradient.component.mjs +0 -1
  5. package/esm2020/colorpicker/color-input.component.mjs +9 -4
  6. package/esm2020/colorpicker/color-palette.component.mjs +14 -14
  7. package/esm2020/colorpicker/colorpicker.component.mjs +4 -5
  8. package/esm2020/colorpicker/flatcolorpicker-header.component.mjs +7 -3
  9. package/esm2020/colorpicker/flatcolorpicker.component.mjs +30 -15
  10. package/esm2020/package-metadata.mjs +2 -2
  11. package/fesm2015/progress-kendo-angular-inputs.mjs +66 -43
  12. package/fesm2020/progress-kendo-angular-inputs.mjs +64 -43
  13. package/package.json +10 -10
package/colorpicker/color-input.component.d.ts CHANGED
@@ -81,6 +81,7 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
81
81
  ngOnChanges(changes: SimpleChanges): void;
82
82
  get formatButtonTitle(): string;
83
83
  handleRgbaValueChange(): void;
84
+ focusDragHandle(event: any): void;
84
85
  handleHexValueChange(hex: string): void;
85
86
  handleRgbaInputBlur(): void;
86
87
  handleHexInputBlur(): void;
package/colorpicker/color-palette.component.d.ts CHANGED
@@ -155,6 +155,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
155
155
  private _columns;
156
156
  private _palette;
157
157
  private _tabindex;
158
+ private subs;
158
159
  private dynamicRTLSubscription;
159
160
  constructor(host: ElementRef, service: ColorPaletteService, cdr: ChangeDetectorRef, renderer: Renderer2, localizationService: LocalizationService, ngZone: NgZone);
160
161
  ngOnInit(): void;
package/colorpicker/flatcolorpicker.component.d.ts CHANGED
@@ -178,15 +178,19 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
178
178
  * @hidden
179
179
  */
180
180
  get firstFocusable(): any;
181
- /**
182
- * @hidden
183
- */
184
- get lastFocusable(): any;
185
181
  constructor(host: ElementRef, service: FlatColorPickerService, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone, injector: Injector);
186
182
  ngOnInit(): void;
187
183
  ngAfterViewInit(): void;
188
184
  ngOnChanges(changes: SimpleChanges): void;
189
185
  ngOnDestroy(): void;
186
+ /**
187
+ * @hidden
188
+ */
189
+ focusFirstHeaderButton(): void;
190
+ /**
191
+ * @hidden
192
+ */
193
+ lastFocusable(event: any): any;
190
194
  /**
191
195
  * @hidden
192
196
  */
package/esm2020/colorpicker/color-gradient.component.mjs CHANGED
@@ -300,7 +300,6 @@ export class ColorGradientComponent {
300
300
  reset() {
301
301
  this.handleValueChange(undefined);
302
302
  this.updateUI();
303
- this.host.nativeElement.focus();
304
303
  }
305
304
  /**
306
305
  * @hidden
package/esm2020/colorpicker/color-input.component.mjs CHANGED
@@ -108,6 +108,11 @@ export class ColorInputComponent {
108
108
  this.hex = parseColor(color, 'hex', this.opacity);
109
109
  this.valueChange.emit(color);
110
110
  }
111
+ focusDragHandle(event) {
112
+ event.preventDefault();
113
+ event.stopImmediatePropagation();
114
+ this.tabOut.emit();
115
+ }
111
116
  handleHexValueChange(hex) {
112
117
  this.hex = hex;
113
118
  const color = parseColor(hex, 'rgba', this.opacity);
@@ -176,7 +181,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
176
181
  (blur)="handleHexInputBlur()"
177
182
  (input)="handleHexValueChange(hexInput.value)"
178
183
  [tabindex]="tabindex.toString()"
179
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
184
+ (keydown.tab)="focusDragHandle($event)"
180
185
  />
181
186
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
182
187
  </div>
@@ -260,7 +265,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
260
265
  [decimals]="2"
261
266
  (blur)="handleRgbaInputBlur()"
262
267
  (valueChange)="handleRgbaValueChange()"
263
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
268
+ (keydown.tab)="focusDragHandle($event)">
264
269
  </kendo-numerictextbox>
265
270
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
266
271
  </div>
@@ -298,7 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
298
303
  (blur)="handleHexInputBlur()"
299
304
  (input)="handleHexValueChange(hexInput.value)"
300
305
  [tabindex]="tabindex.toString()"
301
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
306
+ (keydown.tab)="focusDragHandle($event)"
302
307
  />
303
308
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
304
309
  </div>
@@ -382,7 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
382
387
  [decimals]="2"
383
388
  (blur)="handleRgbaInputBlur()"
384
389
  (valueChange)="handleRgbaValueChange()"
385
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
390
+ (keydown.tab)="focusDragHandle($event)">
386
391
  </kendo-numerictextbox>
387
392
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
388
393
  </div>
package/esm2020/colorpicker/color-palette.component.mjs CHANGED
@@ -2,11 +2,13 @@
2
2
  * Copyright © 2023 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 { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
5
+ /* eslint-disable @typescript-eslint/no-explicit-any */
6
+ import { Component, Input, EventEmitter, Output, HostBinding, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
6
7
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
8
  import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
8
9
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
10
  import { validatePackage } from '@progress/kendo-licensing';
11
+ import { Subscription } from 'rxjs';
10
12
  import { take } from 'rxjs/operators';
11
13
  import { ColorPaletteLocalizationService } from './localization/colorpalette-localization.service';
12
14
  import { packageMetadata } from '../package-metadata';
@@ -94,6 +96,7 @@ export class ColorPaletteComponent {
94
96
  */
95
97
  this.uniqueId = guid();
96
98
  this._tabindex = 0;
99
+ this.subs = new Subscription();
97
100
  this.notifyNgTouched = () => { };
98
101
  this.notifyNgChanged = () => { };
99
102
  validatePackage(packageMetadata);
@@ -200,6 +203,10 @@ export class ColorPaletteComponent {
200
203
  this.palette = this.palette || defaultPreset;
201
204
  this.setRows();
202
205
  }
206
+ const elem = this.host.nativeElement;
207
+ this.subs.add(this.renderer.listen(elem, 'keydown', event => this.handleKeydown(event)));
208
+ this.subs.add(this.renderer.listen(elem, 'focus', () => this.handleFocus()));
209
+ this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
203
210
  }
204
211
  ngAfterViewInit() {
205
212
  this.setHostElementAriaLabel();
@@ -210,6 +217,7 @@ export class ColorPaletteComponent {
210
217
  }
211
218
  }
212
219
  ngOnDestroy() {
220
+ this.subs.unsubscribe();
213
221
  if (this.dynamicRTLSubscription) {
214
222
  this.dynamicRTLSubscription.unsubscribe();
215
223
  }
@@ -353,7 +361,8 @@ export class ColorPaletteComponent {
353
361
  this.focusedCell = this.selectedCell;
354
362
  }
355
363
  selectCell(value) {
356
- this.selectedCell = this.service.getCellCoordsFor(value);
364
+ const parsedColor = parseColor(value, 'hex');
365
+ this.selectedCell = this.service.getCellCoordsFor(parsedColor);
357
366
  this.focusedCell = this.selectedCell;
358
367
  }
359
368
  setRows() {
@@ -383,7 +392,7 @@ export class ColorPaletteComponent {
383
392
  }
384
393
  }
385
394
  ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
386
- ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
395
+ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
387
396
  {
388
397
  multi: true,
389
398
  provide: NG_VALUE_ACCESSOR,
@@ -415,7 +424,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
415
424
  role="gridcell"
416
425
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
417
426
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
418
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
427
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
419
428
  [attr.aria-label]="color"
420
429
  class="k-colorpalette-tile"
421
430
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -471,7 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
471
480
  role="gridcell"
472
481
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
473
482
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
474
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
483
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
475
484
  [attr.aria-label]="color"
476
485
  class="k-colorpalette-tile"
477
486
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -541,13 +550,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
541
550
  }], readonlyAttribute: [{
542
551
  type: HostBinding,
543
552
  args: ['attr.aria-readonly']
544
- }], handleKeydown: [{
545
- type: HostListener,
546
- args: ['keydown', ['$event']]
547
- }], handleFocus: [{
548
- type: HostListener,
549
- args: ['focus', ['$event']]
550
- }], handleHostBlur: [{
551
- type: HostListener,
552
- args: ['blur']
553
553
  }] } });
package/esm2020/colorpicker/colorpicker.component.mjs CHANGED
@@ -492,6 +492,7 @@ export class ColorPickerComponent {
492
492
  open = isPresent(open) ? open : !this.isOpen;
493
493
  if (open) {
494
494
  this.openPopup();
495
+ this.focusFirstElement();
495
496
  }
496
497
  }
497
498
  /**
@@ -622,9 +623,9 @@ export class ColorPickerComponent {
622
623
  focusFirstElement() {
623
624
  this.ngZone.onStable.pipe(take(1)).subscribe(() => {
624
625
  if (this.flatColorPicker) {
625
- const gradient = this.flatColorPicker.gradient;
626
- const elementToFocus = gradient ? gradient.gradientDragHandle :
627
- this.flatColorPicker.palette.host;
626
+ const gradientDragHandle = this.flatColorPicker.gradient?.gradientDragHandle;
627
+ const palette = this.flatColorPicker.palette?.host;
628
+ const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
628
629
  elementToFocus.nativeElement.focus();
629
630
  }
630
631
  });
@@ -818,7 +819,6 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
818
819
  kendoButton
819
820
  tabindex="-1"
820
821
  type="button"
821
- role="none"
822
822
  icon="caret-alt-down"
823
823
  [svgIcon]="arrowDownIcon"
824
824
  aria-hidden="true"
@@ -942,7 +942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
942
942
  kendoButton
943
943
  tabindex="-1"
944
944
  type="button"
945
- role="none"
946
945
  icon="caret-alt-down"
947
946
  [svgIcon]="arrowDownIcon"
948
947
  aria-hidden="true"
package/esm2020/colorpicker/flatcolorpicker-header.component.mjs CHANGED
@@ -57,7 +57,7 @@ export class FlatColorPickerHeaderComponent {
57
57
  onHeaderTabOut(ev, index) {
58
58
  if (index === 0) {
59
59
  ev.preventDefault();
60
- this.tabOut.emit();
60
+ this.tabOut.emit(ev);
61
61
  }
62
62
  }
63
63
  }
@@ -66,7 +66,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
66
66
  <div class="k-coloreditor-header-actions k-hstack">
67
67
  <div
68
68
  *ngIf="viewButtons"
69
- class="k-button-group k-button-group-flat">
69
+ class="k-button-group k-button-group-flat"
70
+ role="group"
71
+ >
70
72
  <button
71
73
  *ngFor="let view of views; let i = index;"
72
74
  kendoButton
@@ -125,7 +127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
125
127
  <div class="k-coloreditor-header-actions k-hstack">
126
128
  <div
127
129
  *ngIf="viewButtons"
128
- class="k-button-group k-button-group-flat">
130
+ class="k-button-group k-button-group-flat"
131
+ role="group"
132
+ >
129
133
  <button
130
134
  *ngFor="let view of views; let i = index;"
131
135
  kendoButton
package/esm2020/colorpicker/flatcolorpicker.component.mjs CHANGED
@@ -240,15 +240,6 @@ export class FlatColorPickerComponent {
240
240
  }
241
241
  return this.activeView === 'gradient' ? this.gradient : this.palette;
242
242
  }
243
- /**
244
- * @hidden
245
- */
246
- get lastFocusable() {
247
- if (this.preview) {
248
- return this.footer.lastButton.nativeElement;
249
- }
250
- return this.activeView === 'gradient' ? this.gradient : this.palette;
251
- }
252
243
  ngOnInit() {
253
244
  this.selection = this.value;
254
245
  this.control = this.injector.get(NgControl, null);
@@ -276,6 +267,30 @@ export class FlatColorPickerComponent {
276
267
  }
277
268
  this.subscriptions.unsubscribe();
278
269
  }
270
+ /**
271
+ * @hidden
272
+ */
273
+ focusFirstHeaderButton() {
274
+ if (this.gradientElement.nativeElement === document.activeElement) {
275
+ if (this.headerHasContent && !this.preview) {
276
+ const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
277
+ firstHeaderButton.focus();
278
+ }
279
+ }
280
+ }
281
+ /**
282
+ * @hidden
283
+ */
284
+ lastFocusable(event) {
285
+ if (this.preview) {
286
+ this.footer.lastButton.nativeElement.focus();
287
+ return;
288
+ }
289
+ event.stopImmediatePropagation();
290
+ const gradient = this.gradientElement?.nativeElement;
291
+ const palette = this.palette?.host.nativeElement;
292
+ this.activeView === 'gradient' ? gradient.focus() : palette.focus();
293
+ }
279
294
  /**
280
295
  * @hidden
281
296
  */
@@ -358,8 +373,6 @@ export class FlatColorPickerComponent {
358
373
  */
359
374
  onClearButtonClick() {
360
375
  this.resetInnerComponentValue();
361
- this.internalNavigation = false;
362
- this.host.nativeElement.focus();
363
376
  this.clearButtonClick.emit();
364
377
  }
365
378
  /**
@@ -549,7 +562,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
549
562
  hexInputPlaceholder="HEX">
550
563
  </ng-container>
551
564
  <div kendoFlatColorPickerHeader
552
- [innerTabIndex]="this.innerTabIndex"
565
+ [innerTabIndex]="innerTabIndex"
553
566
  *ngIf="headerHasContent"
554
567
  #header
555
568
  [clearButton]="clearButton"
@@ -561,7 +574,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
561
574
  (clearButtonClick)="onClearButtonClick()"
562
575
  (viewChange)="onViewChange($event)"
563
576
  (valuePaneClick)="resetSelection($event)"
564
- (tabOut)="lastFocusable.focus()"></div>
577
+ (tabOut)="lastFocusable($event)"></div>
565
578
  <div class="k-coloreditor-views k-vstack">
566
579
  <kendo-colorgradient #gradient
567
580
  [tabindex]="innerTabIndex"
@@ -574,6 +587,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
574
587
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
575
588
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
576
589
  [readonly]="readonly"
590
+ (keydown.tab)="focusFirstHeaderButton()"
577
591
  (valueChange)="handleValueChange($event)"
578
592
  ></kendo-colorgradient>
579
593
  <kendo-colorpalette #palette
@@ -672,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
672
686
  hexInputPlaceholder="HEX">
673
687
  </ng-container>
674
688
  <div kendoFlatColorPickerHeader
675
- [innerTabIndex]="this.innerTabIndex"
689
+ [innerTabIndex]="innerTabIndex"
676
690
  *ngIf="headerHasContent"
677
691
  #header
678
692
  [clearButton]="clearButton"
@@ -684,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
684
698
  (clearButtonClick)="onClearButtonClick()"
685
699
  (viewChange)="onViewChange($event)"
686
700
  (valuePaneClick)="resetSelection($event)"
687
- (tabOut)="lastFocusable.focus()"></div>
701
+ (tabOut)="lastFocusable($event)"></div>
688
702
  <div class="k-coloreditor-views k-vstack">
689
703
  <kendo-colorgradient #gradient
690
704
  [tabindex]="innerTabIndex"
@@ -697,6 +711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
697
711
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
698
712
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
699
713
  [readonly]="readonly"
714
+ (keydown.tab)="focusFirstHeaderButton()"
700
715
  (valueChange)="handleValueChange($event)"
701
716
  ></kendo-colorgradient>
702
717
  <kendo-colorpalette #palette
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-inputs',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1677050914,
13
- version: '11.3.0-develop.5',
12
+ publishDate: 1677055970,
13
+ version: '11.3.0-develop.6',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-inputs.mjs CHANGED
@@ -539,8 +539,8 @@ const packageMetadata = {
539
539
  name: '@progress/kendo-angular-inputs',
540
540
  productName: 'Kendo UI for Angular',
541
541
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
542
- publishDate: 1677050914,
543
- version: '11.3.0-develop.5',
542
+ publishDate: 1677055970,
543
+ version: '11.3.0-develop.6',
544
544
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
545
545
  };
546
546
 
@@ -8556,7 +8556,7 @@ class FlatColorPickerHeaderComponent {
8556
8556
  onHeaderTabOut(ev, index) {
8557
8557
  if (index === 0) {
8558
8558
  ev.preventDefault();
8559
- this.tabOut.emit();
8559
+ this.tabOut.emit(ev);
8560
8560
  }
8561
8561
  }
8562
8562
  }
@@ -8565,7 +8565,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
8565
8565
  <div class="k-coloreditor-header-actions k-hstack">
8566
8566
  <div
8567
8567
  *ngIf="viewButtons"
8568
- class="k-button-group k-button-group-flat">
8568
+ class="k-button-group k-button-group-flat"
8569
+ role="group"
8570
+ >
8569
8571
  <button
8570
8572
  *ngFor="let view of views; let i = index;"
8571
8573
  kendoButton
@@ -8624,7 +8626,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
8624
8626
  <div class="k-coloreditor-header-actions k-hstack">
8625
8627
  <div
8626
8628
  *ngIf="viewButtons"
8627
- class="k-button-group k-button-group-flat">
8629
+ class="k-button-group k-button-group-flat"
8630
+ role="group"
8631
+ >
8628
8632
  <button
8629
8633
  *ngFor="let view of views; let i = index;"
8630
8634
  kendoButton
@@ -8950,6 +8954,11 @@ class ColorInputComponent {
8950
8954
  this.hex = parseColor(color, 'hex', this.opacity);
8951
8955
  this.valueChange.emit(color);
8952
8956
  }
8957
+ focusDragHandle(event) {
8958
+ event.preventDefault();
8959
+ event.stopImmediatePropagation();
8960
+ this.tabOut.emit();
8961
+ }
8953
8962
  handleHexValueChange(hex) {
8954
8963
  this.hex = hex;
8955
8964
  const color = parseColor(hex, 'rgba', this.opacity);
@@ -9019,7 +9028,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
9019
9028
  (blur)="handleHexInputBlur()"
9020
9029
  (input)="handleHexValueChange(hexInput.value)"
9021
9030
  [tabindex]="tabindex.toString()"
9022
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
9031
+ (keydown.tab)="focusDragHandle($event)"
9023
9032
  />
9024
9033
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
9025
9034
  </div>
@@ -9103,7 +9112,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
9103
9112
  [decimals]="2"
9104
9113
  (blur)="handleRgbaInputBlur()"
9105
9114
  (valueChange)="handleRgbaValueChange()"
9106
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
9115
+ (keydown.tab)="focusDragHandle($event)">
9107
9116
  </kendo-numerictextbox>
9108
9117
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
9109
9118
  </div>
@@ -9141,7 +9150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
9141
9150
  (blur)="handleHexInputBlur()"
9142
9151
  (input)="handleHexValueChange(hexInput.value)"
9143
9152
  [tabindex]="tabindex.toString()"
9144
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
9153
+ (keydown.tab)="focusDragHandle($event)"
9145
9154
  />
9146
9155
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
9147
9156
  </div>
@@ -9225,7 +9234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
9225
9234
  [decimals]="2"
9226
9235
  (blur)="handleRgbaInputBlur()"
9227
9236
  (valueChange)="handleRgbaValueChange()"
9228
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
9237
+ (keydown.tab)="focusDragHandle($event)">
9229
9238
  </kendo-numerictextbox>
9230
9239
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
9231
9240
  </div>
@@ -9791,7 +9800,6 @@ class ColorGradientComponent {
9791
9800
  reset() {
9792
9801
  this.handleValueChange(undefined);
9793
9802
  this.updateUI();
9794
- this.host.nativeElement.focus();
9795
9803
  }
9796
9804
  /**
9797
9805
  * @hidden
@@ -10593,6 +10601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
10593
10601
  type: Injectable
10594
10602
  }] });
10595
10603
 
10604
+ /* eslint-disable @typescript-eslint/no-explicit-any */
10596
10605
  const DEFAULT_TILE_SIZE = 24;
10597
10606
  const DEFAULT_COLUMNS_COUNT = 10;
10598
10607
  const DEFAULT_PRESET = 'office';
@@ -10668,6 +10677,7 @@ class ColorPaletteComponent {
10668
10677
  */
10669
10678
  this.uniqueId = guid();
10670
10679
  this._tabindex = 0;
10680
+ this.subs = new Subscription();
10671
10681
  this.notifyNgTouched = () => { };
10672
10682
  this.notifyNgChanged = () => { };
10673
10683
  validatePackage(packageMetadata);
@@ -10774,6 +10784,10 @@ class ColorPaletteComponent {
10774
10784
  this.palette = this.palette || defaultPreset;
10775
10785
  this.setRows();
10776
10786
  }
10787
+ const elem = this.host.nativeElement;
10788
+ this.subs.add(this.renderer.listen(elem, 'keydown', event => this.handleKeydown(event)));
10789
+ this.subs.add(this.renderer.listen(elem, 'focus', () => this.handleFocus()));
10790
+ this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
10777
10791
  }
10778
10792
  ngAfterViewInit() {
10779
10793
  this.setHostElementAriaLabel();
@@ -10784,6 +10798,7 @@ class ColorPaletteComponent {
10784
10798
  }
10785
10799
  }
10786
10800
  ngOnDestroy() {
10801
+ this.subs.unsubscribe();
10787
10802
  if (this.dynamicRTLSubscription) {
10788
10803
  this.dynamicRTLSubscription.unsubscribe();
10789
10804
  }
@@ -10927,7 +10942,8 @@ class ColorPaletteComponent {
10927
10942
  this.focusedCell = this.selectedCell;
10928
10943
  }
10929
10944
  selectCell(value) {
10930
- this.selectedCell = this.service.getCellCoordsFor(value);
10945
+ const parsedColor = parseColor(value, 'hex');
10946
+ this.selectedCell = this.service.getCellCoordsFor(parsedColor);
10931
10947
  this.focusedCell = this.selectedCell;
10932
10948
  }
10933
10949
  setRows() {
@@ -10957,7 +10973,7 @@ class ColorPaletteComponent {
10957
10973
  }
10958
10974
  }
10959
10975
  ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
10960
- ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
10976
+ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
10961
10977
  {
10962
10978
  multi: true,
10963
10979
  provide: NG_VALUE_ACCESSOR,
@@ -10989,7 +11005,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
10989
11005
  role="gridcell"
10990
11006
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10991
11007
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
10992
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11008
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
10993
11009
  [attr.aria-label]="color"
10994
11010
  class="k-colorpalette-tile"
10995
11011
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -11045,7 +11061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11045
11061
  role="gridcell"
11046
11062
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11047
11063
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
11048
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11064
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
11049
11065
  [attr.aria-label]="color"
11050
11066
  class="k-colorpalette-tile"
11051
11067
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -11115,15 +11131,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11115
11131
  }], readonlyAttribute: [{
11116
11132
  type: HostBinding,
11117
11133
  args: ['attr.aria-readonly']
11118
- }], handleKeydown: [{
11119
- type: HostListener,
11120
- args: ['keydown', ['$event']]
11121
- }], handleFocus: [{
11122
- type: HostListener,
11123
- args: ['focus', ['$event']]
11124
- }], handleHostBlur: [{
11125
- type: HostListener,
11126
- args: ['blur']
11127
11134
  }] } });
11128
11135
 
11129
11136
  /**
@@ -11425,15 +11432,6 @@ class FlatColorPickerComponent {
11425
11432
  }
11426
11433
  return this.activeView === 'gradient' ? this.gradient : this.palette;
11427
11434
  }
11428
- /**
11429
- * @hidden
11430
- */
11431
- get lastFocusable() {
11432
- if (this.preview) {
11433
- return this.footer.lastButton.nativeElement;
11434
- }
11435
- return this.activeView === 'gradient' ? this.gradient : this.palette;
11436
- }
11437
11435
  ngOnInit() {
11438
11436
  this.selection = this.value;
11439
11437
  this.control = this.injector.get(NgControl, null);
@@ -11461,6 +11459,31 @@ class FlatColorPickerComponent {
11461
11459
  }
11462
11460
  this.subscriptions.unsubscribe();
11463
11461
  }
11462
+ /**
11463
+ * @hidden
11464
+ */
11465
+ focusFirstHeaderButton() {
11466
+ if (this.gradientElement.nativeElement === document.activeElement) {
11467
+ if (this.headerHasContent && !this.preview) {
11468
+ const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
11469
+ firstHeaderButton.focus();
11470
+ }
11471
+ }
11472
+ }
11473
+ /**
11474
+ * @hidden
11475
+ */
11476
+ lastFocusable(event) {
11477
+ var _a, _b;
11478
+ if (this.preview) {
11479
+ this.footer.lastButton.nativeElement.focus();
11480
+ return;
11481
+ }
11482
+ event.stopImmediatePropagation();
11483
+ const gradient = (_a = this.gradientElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
11484
+ const palette = (_b = this.palette) === null || _b === void 0 ? void 0 : _b.host.nativeElement;
11485
+ this.activeView === 'gradient' ? gradient.focus() : palette.focus();
11486
+ }
11464
11487
  /**
11465
11488
  * @hidden
11466
11489
  */
@@ -11544,8 +11567,6 @@ class FlatColorPickerComponent {
11544
11567
  */
11545
11568
  onClearButtonClick() {
11546
11569
  this.resetInnerComponentValue();
11547
- this.internalNavigation = false;
11548
- this.host.nativeElement.focus();
11549
11570
  this.clearButtonClick.emit();
11550
11571
  }
11551
11572
  /**
@@ -11735,7 +11756,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11735
11756
  hexInputPlaceholder="HEX">
11736
11757
  </ng-container>
11737
11758
  <div kendoFlatColorPickerHeader
11738
- [innerTabIndex]="this.innerTabIndex"
11759
+ [innerTabIndex]="innerTabIndex"
11739
11760
  *ngIf="headerHasContent"
11740
11761
  #header
11741
11762
  [clearButton]="clearButton"
@@ -11747,7 +11768,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11747
11768
  (clearButtonClick)="onClearButtonClick()"
11748
11769
  (viewChange)="onViewChange($event)"
11749
11770
  (valuePaneClick)="resetSelection($event)"
11750
- (tabOut)="lastFocusable.focus()"></div>
11771
+ (tabOut)="lastFocusable($event)"></div>
11751
11772
  <div class="k-coloreditor-views k-vstack">
11752
11773
  <kendo-colorgradient #gradient
11753
11774
  [tabindex]="innerTabIndex"
@@ -11760,6 +11781,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11760
11781
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
11761
11782
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
11762
11783
  [readonly]="readonly"
11784
+ (keydown.tab)="focusFirstHeaderButton()"
11763
11785
  (valueChange)="handleValueChange($event)"
11764
11786
  ></kendo-colorgradient>
11765
11787
  <kendo-colorpalette #palette
@@ -11858,7 +11880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11858
11880
  hexInputPlaceholder="HEX">
11859
11881
  </ng-container>
11860
11882
  <div kendoFlatColorPickerHeader
11861
- [innerTabIndex]="this.innerTabIndex"
11883
+ [innerTabIndex]="innerTabIndex"
11862
11884
  *ngIf="headerHasContent"
11863
11885
  #header
11864
11886
  [clearButton]="clearButton"
@@ -11870,7 +11892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11870
11892
  (clearButtonClick)="onClearButtonClick()"
11871
11893
  (viewChange)="onViewChange($event)"
11872
11894
  (valuePaneClick)="resetSelection($event)"
11873
- (tabOut)="lastFocusable.focus()"></div>
11895
+ (tabOut)="lastFocusable($event)"></div>
11874
11896
  <div class="k-coloreditor-views k-vstack">
11875
11897
  <kendo-colorgradient #gradient
11876
11898
  [tabindex]="innerTabIndex"
@@ -11883,6 +11905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11883
11905
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
11884
11906
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
11885
11907
  [readonly]="readonly"
11908
+ (keydown.tab)="focusFirstHeaderButton()"
11886
11909
  (valueChange)="handleValueChange($event)"
11887
11910
  ></kendo-colorgradient>
11888
11911
  <kendo-colorpalette #palette
@@ -12464,6 +12487,7 @@ class ColorPickerComponent {
12464
12487
  open = isPresent(open) ? open : !this.isOpen;
12465
12488
  if (open) {
12466
12489
  this.openPopup();
12490
+ this.focusFirstElement();
12467
12491
  }
12468
12492
  }
12469
12493
  /**
@@ -12593,10 +12617,11 @@ class ColorPickerComponent {
12593
12617
  }
12594
12618
  focusFirstElement() {
12595
12619
  this.ngZone.onStable.pipe(take(1)).subscribe(() => {
12620
+ var _a, _b;
12596
12621
  if (this.flatColorPicker) {
12597
- const gradient = this.flatColorPicker.gradient;
12598
- const elementToFocus = gradient ? gradient.gradientDragHandle :
12599
- this.flatColorPicker.palette.host;
12622
+ const gradientDragHandle = (_a = this.flatColorPicker.gradient) === null || _a === void 0 ? void 0 : _a.gradientDragHandle;
12623
+ const palette = (_b = this.flatColorPicker.palette) === null || _b === void 0 ? void 0 : _b.host;
12624
+ const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
12600
12625
  elementToFocus.nativeElement.focus();
12601
12626
  }
12602
12627
  });
@@ -12790,7 +12815,6 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
12790
12815
  kendoButton
12791
12816
  tabindex="-1"
12792
12817
  type="button"
12793
- role="none"
12794
12818
  icon="caret-alt-down"
12795
12819
  [svgIcon]="arrowDownIcon"
12796
12820
  aria-hidden="true"
@@ -12914,7 +12938,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
12914
12938
  kendoButton
12915
12939
  tabindex="-1"
12916
12940
  type="button"
12917
- role="none"
12918
12941
  icon="caret-alt-down"
12919
12942
  [svgIcon]="arrowDownIcon"
12920
12943
  aria-hidden="true"
package/fesm2020/progress-kendo-angular-inputs.mjs CHANGED
@@ -538,8 +538,8 @@ const packageMetadata = {
538
538
  name: '@progress/kendo-angular-inputs',
539
539
  productName: 'Kendo UI for Angular',
540
540
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
541
- publishDate: 1677050914,
542
- version: '11.3.0-develop.5',
541
+ publishDate: 1677055970,
542
+ version: '11.3.0-develop.6',
543
543
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
544
544
  };
545
545
 
@@ -8642,6 +8642,11 @@ class ColorInputComponent {
8642
8642
  this.hex = parseColor(color, 'hex', this.opacity);
8643
8643
  this.valueChange.emit(color);
8644
8644
  }
8645
+ focusDragHandle(event) {
8646
+ event.preventDefault();
8647
+ event.stopImmediatePropagation();
8648
+ this.tabOut.emit();
8649
+ }
8645
8650
  handleHexValueChange(hex) {
8646
8651
  this.hex = hex;
8647
8652
  const color = parseColor(hex, 'rgba', this.opacity);
@@ -8710,7 +8715,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
8710
8715
  (blur)="handleHexInputBlur()"
8711
8716
  (input)="handleHexValueChange(hexInput.value)"
8712
8717
  [tabindex]="tabindex.toString()"
8713
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
8718
+ (keydown.tab)="focusDragHandle($event)"
8714
8719
  />
8715
8720
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
8716
8721
  </div>
@@ -8794,7 +8799,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
8794
8799
  [decimals]="2"
8795
8800
  (blur)="handleRgbaInputBlur()"
8796
8801
  (valueChange)="handleRgbaValueChange()"
8797
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
8802
+ (keydown.tab)="focusDragHandle($event)">
8798
8803
  </kendo-numerictextbox>
8799
8804
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
8800
8805
  </div>
@@ -8832,7 +8837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
8832
8837
  (blur)="handleHexInputBlur()"
8833
8838
  (input)="handleHexValueChange(hexInput.value)"
8834
8839
  [tabindex]="tabindex.toString()"
8835
- (keydown.tab)="$event.preventDefault(); tabOut.emit();"
8840
+ (keydown.tab)="focusDragHandle($event)"
8836
8841
  />
8837
8842
  <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
8838
8843
  </div>
@@ -8916,7 +8921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
8916
8921
  [decimals]="2"
8917
8922
  (blur)="handleRgbaInputBlur()"
8918
8923
  (valueChange)="handleRgbaValueChange()"
8919
- (keydown.tab)="$event.preventDefault(); tabOut.emit();">
8924
+ (keydown.tab)="focusDragHandle($event)">
8920
8925
  </kendo-numerictextbox>
8921
8926
  <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
8922
8927
  </div>
@@ -9565,7 +9570,6 @@ class ColorGradientComponent {
9565
9570
  reset() {
9566
9571
  this.handleValueChange(undefined);
9567
9572
  this.updateUI();
9568
- this.host.nativeElement.focus();
9569
9573
  }
9570
9574
  /**
9571
9575
  * @hidden
@@ -10365,6 +10369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
10365
10369
  type: Injectable
10366
10370
  }] });
10367
10371
 
10372
+ /* eslint-disable @typescript-eslint/no-explicit-any */
10368
10373
  const DEFAULT_TILE_SIZE = 24;
10369
10374
  const DEFAULT_COLUMNS_COUNT = 10;
10370
10375
  const DEFAULT_PRESET = 'office';
@@ -10440,6 +10445,7 @@ class ColorPaletteComponent {
10440
10445
  */
10441
10446
  this.uniqueId = guid();
10442
10447
  this._tabindex = 0;
10448
+ this.subs = new Subscription();
10443
10449
  this.notifyNgTouched = () => { };
10444
10450
  this.notifyNgChanged = () => { };
10445
10451
  validatePackage(packageMetadata);
@@ -10546,6 +10552,10 @@ class ColorPaletteComponent {
10546
10552
  this.palette = this.palette || defaultPreset;
10547
10553
  this.setRows();
10548
10554
  }
10555
+ const elem = this.host.nativeElement;
10556
+ this.subs.add(this.renderer.listen(elem, 'keydown', event => this.handleKeydown(event)));
10557
+ this.subs.add(this.renderer.listen(elem, 'focus', () => this.handleFocus()));
10558
+ this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
10549
10559
  }
10550
10560
  ngAfterViewInit() {
10551
10561
  this.setHostElementAriaLabel();
@@ -10556,6 +10566,7 @@ class ColorPaletteComponent {
10556
10566
  }
10557
10567
  }
10558
10568
  ngOnDestroy() {
10569
+ this.subs.unsubscribe();
10559
10570
  if (this.dynamicRTLSubscription) {
10560
10571
  this.dynamicRTLSubscription.unsubscribe();
10561
10572
  }
@@ -10699,7 +10710,8 @@ class ColorPaletteComponent {
10699
10710
  this.focusedCell = this.selectedCell;
10700
10711
  }
10701
10712
  selectCell(value) {
10702
- this.selectedCell = this.service.getCellCoordsFor(value);
10713
+ const parsedColor = parseColor(value, 'hex');
10714
+ this.selectedCell = this.service.getCellCoordsFor(parsedColor);
10703
10715
  this.focusedCell = this.selectedCell;
10704
10716
  }
10705
10717
  setRows() {
@@ -10729,7 +10741,7 @@ class ColorPaletteComponent {
10729
10741
  }
10730
10742
  }
10731
10743
  ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
10732
- ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
10744
+ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
10733
10745
  {
10734
10746
  multi: true,
10735
10747
  provide: NG_VALUE_ACCESSOR,
@@ -10761,7 +10773,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
10761
10773
  role="gridcell"
10762
10774
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10763
10775
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
10764
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10776
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
10765
10777
  [attr.aria-label]="color"
10766
10778
  class="k-colorpalette-tile"
10767
10779
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -10817,7 +10829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
10817
10829
  role="gridcell"
10818
10830
  [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10819
10831
  [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
10820
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10832
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
10821
10833
  [attr.aria-label]="color"
10822
10834
  class="k-colorpalette-tile"
10823
10835
  [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -10887,15 +10899,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
10887
10899
  }], readonlyAttribute: [{
10888
10900
  type: HostBinding,
10889
10901
  args: ['attr.aria-readonly']
10890
- }], handleKeydown: [{
10891
- type: HostListener,
10892
- args: ['keydown', ['$event']]
10893
- }], handleFocus: [{
10894
- type: HostListener,
10895
- args: ['focus', ['$event']]
10896
- }], handleHostBlur: [{
10897
- type: HostListener,
10898
- args: ['blur']
10899
10902
  }] } });
10900
10903
 
10901
10904
  /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -10946,7 +10949,7 @@ class FlatColorPickerHeaderComponent {
10946
10949
  onHeaderTabOut(ev, index) {
10947
10950
  if (index === 0) {
10948
10951
  ev.preventDefault();
10949
- this.tabOut.emit();
10952
+ this.tabOut.emit(ev);
10950
10953
  }
10951
10954
  }
10952
10955
  }
@@ -10955,7 +10958,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
10955
10958
  <div class="k-coloreditor-header-actions k-hstack">
10956
10959
  <div
10957
10960
  *ngIf="viewButtons"
10958
- class="k-button-group k-button-group-flat">
10961
+ class="k-button-group k-button-group-flat"
10962
+ role="group"
10963
+ >
10959
10964
  <button
10960
10965
  *ngFor="let view of views; let i = index;"
10961
10966
  kendoButton
@@ -11014,7 +11019,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11014
11019
  <div class="k-coloreditor-header-actions k-hstack">
11015
11020
  <div
11016
11021
  *ngIf="viewButtons"
11017
- class="k-button-group k-button-group-flat">
11022
+ class="k-button-group k-button-group-flat"
11023
+ role="group"
11024
+ >
11018
11025
  <button
11019
11026
  *ngFor="let view of views; let i = index;"
11020
11027
  kendoButton
@@ -11397,15 +11404,6 @@ class FlatColorPickerComponent {
11397
11404
  }
11398
11405
  return this.activeView === 'gradient' ? this.gradient : this.palette;
11399
11406
  }
11400
- /**
11401
- * @hidden
11402
- */
11403
- get lastFocusable() {
11404
- if (this.preview) {
11405
- return this.footer.lastButton.nativeElement;
11406
- }
11407
- return this.activeView === 'gradient' ? this.gradient : this.palette;
11408
- }
11409
11407
  ngOnInit() {
11410
11408
  this.selection = this.value;
11411
11409
  this.control = this.injector.get(NgControl, null);
@@ -11433,6 +11431,30 @@ class FlatColorPickerComponent {
11433
11431
  }
11434
11432
  this.subscriptions.unsubscribe();
11435
11433
  }
11434
+ /**
11435
+ * @hidden
11436
+ */
11437
+ focusFirstHeaderButton() {
11438
+ if (this.gradientElement.nativeElement === document.activeElement) {
11439
+ if (this.headerHasContent && !this.preview) {
11440
+ const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
11441
+ firstHeaderButton.focus();
11442
+ }
11443
+ }
11444
+ }
11445
+ /**
11446
+ * @hidden
11447
+ */
11448
+ lastFocusable(event) {
11449
+ if (this.preview) {
11450
+ this.footer.lastButton.nativeElement.focus();
11451
+ return;
11452
+ }
11453
+ event.stopImmediatePropagation();
11454
+ const gradient = this.gradientElement?.nativeElement;
11455
+ const palette = this.palette?.host.nativeElement;
11456
+ this.activeView === 'gradient' ? gradient.focus() : palette.focus();
11457
+ }
11436
11458
  /**
11437
11459
  * @hidden
11438
11460
  */
@@ -11515,8 +11537,6 @@ class FlatColorPickerComponent {
11515
11537
  */
11516
11538
  onClearButtonClick() {
11517
11539
  this.resetInnerComponentValue();
11518
- this.internalNavigation = false;
11519
- this.host.nativeElement.focus();
11520
11540
  this.clearButtonClick.emit();
11521
11541
  }
11522
11542
  /**
@@ -11706,7 +11726,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11706
11726
  hexInputPlaceholder="HEX">
11707
11727
  </ng-container>
11708
11728
  <div kendoFlatColorPickerHeader
11709
- [innerTabIndex]="this.innerTabIndex"
11729
+ [innerTabIndex]="innerTabIndex"
11710
11730
  *ngIf="headerHasContent"
11711
11731
  #header
11712
11732
  [clearButton]="clearButton"
@@ -11718,7 +11738,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11718
11738
  (clearButtonClick)="onClearButtonClick()"
11719
11739
  (viewChange)="onViewChange($event)"
11720
11740
  (valuePaneClick)="resetSelection($event)"
11721
- (tabOut)="lastFocusable.focus()"></div>
11741
+ (tabOut)="lastFocusable($event)"></div>
11722
11742
  <div class="k-coloreditor-views k-vstack">
11723
11743
  <kendo-colorgradient #gradient
11724
11744
  [tabindex]="innerTabIndex"
@@ -11731,6 +11751,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
11731
11751
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
11732
11752
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
11733
11753
  [readonly]="readonly"
11754
+ (keydown.tab)="focusFirstHeaderButton()"
11734
11755
  (valueChange)="handleValueChange($event)"
11735
11756
  ></kendo-colorgradient>
11736
11757
  <kendo-colorpalette #palette
@@ -11829,7 +11850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11829
11850
  hexInputPlaceholder="HEX">
11830
11851
  </ng-container>
11831
11852
  <div kendoFlatColorPickerHeader
11832
- [innerTabIndex]="this.innerTabIndex"
11853
+ [innerTabIndex]="innerTabIndex"
11833
11854
  *ngIf="headerHasContent"
11834
11855
  #header
11835
11856
  [clearButton]="clearButton"
@@ -11841,7 +11862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11841
11862
  (clearButtonClick)="onClearButtonClick()"
11842
11863
  (viewChange)="onViewChange($event)"
11843
11864
  (valuePaneClick)="resetSelection($event)"
11844
- (tabOut)="lastFocusable.focus()"></div>
11865
+ (tabOut)="lastFocusable($event)"></div>
11845
11866
  <div class="k-coloreditor-views k-vstack">
11846
11867
  <kendo-colorgradient #gradient
11847
11868
  [tabindex]="innerTabIndex"
@@ -11854,6 +11875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11854
11875
  [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
11855
11876
  [gradientSliderStep]="gradientSettings.gradientSliderStep"
11856
11877
  [readonly]="readonly"
11878
+ (keydown.tab)="focusFirstHeaderButton()"
11857
11879
  (valueChange)="handleValueChange($event)"
11858
11880
  ></kendo-colorgradient>
11859
11881
  <kendo-colorpalette #palette
@@ -12434,6 +12456,7 @@ class ColorPickerComponent {
12434
12456
  open = isPresent(open) ? open : !this.isOpen;
12435
12457
  if (open) {
12436
12458
  this.openPopup();
12459
+ this.focusFirstElement();
12437
12460
  }
12438
12461
  }
12439
12462
  /**
@@ -12564,9 +12587,9 @@ class ColorPickerComponent {
12564
12587
  focusFirstElement() {
12565
12588
  this.ngZone.onStable.pipe(take(1)).subscribe(() => {
12566
12589
  if (this.flatColorPicker) {
12567
- const gradient = this.flatColorPicker.gradient;
12568
- const elementToFocus = gradient ? gradient.gradientDragHandle :
12569
- this.flatColorPicker.palette.host;
12590
+ const gradientDragHandle = this.flatColorPicker.gradient?.gradientDragHandle;
12591
+ const palette = this.flatColorPicker.palette?.host;
12592
+ const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
12570
12593
  elementToFocus.nativeElement.focus();
12571
12594
  }
12572
12595
  });
@@ -12760,7 +12783,6 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
12760
12783
  kendoButton
12761
12784
  tabindex="-1"
12762
12785
  type="button"
12763
- role="none"
12764
12786
  icon="caret-alt-down"
12765
12787
  [svgIcon]="arrowDownIcon"
12766
12788
  aria-hidden="true"
@@ -12884,7 +12906,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
12884
12906
  kendoButton
12885
12907
  tabindex="-1"
12886
12908
  type="button"
12887
- role="none"
12888
12909
  icon="caret-alt-down"
12889
12910
  [svgIcon]="arrowDownIcon"
12890
12911
  aria-hidden="true"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-inputs",
3
- "version": "11.3.0-develop.5",
3
+ "version": "11.3.0-develop.6",
4
4
  "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -33,19 +33,19 @@
33
33
  "@angular/platform-browser": "13 - 15",
34
34
  "@progress/kendo-drawing": "^1.17.2",
35
35
  "@progress/kendo-licensing": "^1.0.2",
36
- "@progress/kendo-angular-buttons": "11.3.0-develop.5",
37
- "@progress/kendo-angular-common": "11.3.0-develop.5",
38
- "@progress/kendo-angular-dialog": "11.3.0-develop.5",
39
- "@progress/kendo-angular-intl": "11.3.0-develop.5",
40
- "@progress/kendo-angular-l10n": "11.3.0-develop.5",
41
- "@progress/kendo-angular-popup": "11.3.0-develop.5",
42
- "@progress/kendo-angular-icons": "11.3.0-develop.5",
36
+ "@progress/kendo-angular-buttons": "11.3.0-develop.6",
37
+ "@progress/kendo-angular-common": "11.3.0-develop.6",
38
+ "@progress/kendo-angular-dialog": "11.3.0-develop.6",
39
+ "@progress/kendo-angular-intl": "11.3.0-develop.6",
40
+ "@progress/kendo-angular-l10n": "11.3.0-develop.6",
41
+ "@progress/kendo-angular-popup": "11.3.0-develop.6",
42
+ "@progress/kendo-angular-icons": "11.3.0-develop.6",
43
43
  "rxjs": "^6.5.3 || ^7.0.0",
44
- "@progress/kendo-angular-upload": "11.3.0-develop.5"
44
+ "@progress/kendo-angular-upload": "11.3.0-develop.6"
45
45
  },
46
46
  "dependencies": {
47
47
  "tslib": "^2.3.1",
48
- "@progress/kendo-angular-schematics": "11.3.0-develop.5",
48
+ "@progress/kendo-angular-schematics": "11.3.0-develop.6",
49
49
  "@progress/kendo-common": "^0.2.2",
50
50
  "@progress/kendo-draggable": "^3.0.0",
51
51
  "@progress/kendo-inputs-common": "^3.1.0"