@skyux/indicators 7.20.0 → 7.21.0

package/fesm2020/skyux-indicators.mjs

@@ -476,12 +476,28 @@ class SkyChevronComponent {
         this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';
         this.directionChange.emit(this.directionOrDefault);
     }
+    chevronKeyDown(event) {
+        /* istanbul ignore else */
+        if (event.key) {
+            switch (event.key.toLowerCase()) {
+                case ' ':
+                case 'enter':
+                    this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';
+                    this.directionChange.emit(this.directionOrDefault);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
 }
 SkyChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyChevronComponent, selector: "sky-chevron", inputs: { ariaControls: "ariaControls", ariaLabel: "ariaLabel", direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, ngImport: i0, template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n>\n  <sky-expansion-indicator\n    [direction]=\"directionOrDefault\"\n  ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: ["direction"] }] });
+SkyChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyChevronComponent, selector: "sky-chevron", inputs: { ariaControls: "ariaControls", ariaLabel: "ariaLabel", direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, ngImport: i0, template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n  (keydown)=\"chevronKeyDown($event)\"\n>\n  <sky-expansion-indicator\n    [direction]=\"directionOrDefault\"\n  ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: ["direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyChevronComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-chevron', template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n>\n  <sky-expansion-indicator\n    [direction]=\"directionOrDefault\"\n  ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"] }]
+            args: [{ selector: 'sky-chevron', template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n  (keydown)=\"chevronKeyDown($event)\"\n>\n  <sky-expansion-indicator\n    [direction]=\"directionOrDefault\"\n  ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"] }]
         }], propDecorators: { ariaControls: [{
                 type: Input
             }], ariaLabel: [{