@progress/kendo-angular-inputs 10.1.1-dev.202210121020 → 10.1.1-dev.202210241319

package/esm2015/colorpicker/flatcolorpicker-actions.component.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild } from '@angular/core';
+import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -12,7 +12,9 @@ export class FlatColorPickerActionButtonsComponent {
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.hostClasses = true;
+        this.innerTabIndex = -1;
         this.actionButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
     }
     getText(text) {
         return this.localizationService.get(text);
@@ -26,18 +28,21 @@ export class FlatColorPickerActionButtonsComponent {
     }
 }
 FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", outputs: { actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        <button
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <button #first
             class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
             type="button"
+            [tabindex]="innerTabIndex.toString()"
         >{{getText('cancelButton')}}</button>
         <button #last
             class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
             type="button"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
@@ -46,17 +51,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoFlatColorPickerActionButtons]',
                     template: `
-        <button
+        <button #first
             class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
             type="button"
+            [tabindex]="innerTabIndex.toString()"
         >{{getText('cancelButton')}}</button>
         <button #last
             class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
             type="button"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `
                 }]
@@ -69,9 +77,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-hstack']
+            }], innerTabIndex: [{
+                type: Input
             }], actionButtonClick: [{
                 type: Output
+            }], tabOut: [{
+                type: Output
+            }], firstButton: [{
+                type: ViewChild,
+                args: ['first', { read: ElementRef }]
             }], lastButton: [{
                 type: ViewChild,
-                args: ['last', { read: ElementRef, static: false }]
+                args: ['last', { read: ElementRef }]
             }] } });

package/esm2015/colorpicker/flatcolorpicker-header.component.js

@@ -13,9 +13,11 @@ export class FlatColorPickerHeaderComponent {
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.hostClasses = true;
+        this.innerTabIndex = -1;
         this.viewChange = new EventEmitter();
         this.valuePaneClick = new EventEmitter();
         this.clearButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
     }
     onViewButtonClick(view) {
         this.activeView = view;
@@ -30,21 +32,30 @@ export class FlatColorPickerHeaderComponent {
     getText(text) {
         return this.localizationService.get(text);
     }
+    onHeaderTabOut(ev, index) {
+        if (index === 0) {
+            ev.preventDefault();
+            this.tabOut.emit();
+        }
+    }
 }
 FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <div class="k-coloreditor-header-actions k-hstack">
-            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views"
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views; let i = index;"
                     #viewButtons
                     type="button"
+                    [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''"
-                >
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
                     <span
                         class="k-button-icon k-icon"
                         [ngClass]="getViewButtonIcon(view)">
@@ -54,7 +65,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
-            <button *ngIf="clearButton"
+            <button
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
                 #clearButton
                 type="button"
                 class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
@@ -63,7 +76,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 (click)="clearButtonClick.emit()">
                     <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
                     class="k-coloreditor-preview-color k-color-preview"
                     [attr.title]="getText('previewColor')"
@@ -84,17 +97,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: '[kendoFlatColorPickerHeader]',
                     template: `
         <div class="k-coloreditor-header-actions k-hstack">
-            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views"
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views; let i = index;"
                     #viewButtons
                     type="button"
+                    [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''"
-                >
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
                     <span
                         class="k-button-icon k-icon"
                         [ngClass]="getViewButtonIcon(view)">
@@ -104,7 +120,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
-            <button *ngIf="clearButton"
+            <button
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
                 #clearButton
                 type="button"
                 class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
@@ -113,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 (click)="clearButtonClick.emit()">
                     <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
                     class="k-coloreditor-preview-color k-color-preview"
                     [attr.title]="getText('previewColor')"
@@ -142,6 +160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], preview: [{
                 type: Input
+            }], innerTabIndex: [{
+                type: Input
             }], value: [{
                 type: Input
             }], selection: [{
@@ -152,10 +172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], clearButtonClick: [{
                 type: Output
+            }], tabOut: [{
+                type: Output
             }], viewButtonsCollection: [{
                 type: ViewChildren,
                 args: ['viewButtons', { read: ElementRef }]
             }], clearButtonElement: [{
                 type: ViewChild,
-                args: ['clearButton', { read: ElementRef, static: false }]
+                args: ['clearButton', { read: ElementRef }]
             }] } });