@progress/kendo-angular-layout 7.1.5-dev.202210191350 → 7.1.5-dev.202210210934

package/esm2015/expansionpanel/expansionpanel.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { isFocusable, hasClass } from './../common/dom-queries';
-import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, HostListener, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
 import { ExpansionPanelTitleDirective } from './expansionpanel-title.directive';
 import { collapse, expand } from './animations';
 import { isPresent } from '../common/util';
@@ -93,7 +93,6 @@ export class ExpansionPanelComponent {
          */
         this.collapse = new EventEmitter();
         this.hostClass = true;
-        this.tabindex = 0;
         /**
          * @hidden
          */
@@ -128,31 +127,13 @@ export class ExpansionPanelComponent {
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
-    get focusClass() {
-        return this.focused;
-    }
-    get disabledClass() {
-        return this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    onComponentBlur() {
-        if (this.focused) {
-            this.focused = false;
-        }
-    }
-    /**
-     * @hidden
-     */
-    onComponentFocus() {
-        if (!this.focused) {
-            this.focused = true;
-        }
-    }
     ngOnInit() {
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
         this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
+        const elem = this.hostElement.nativeElement;
+        const header = this.header.nativeElement;
+        this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
+        this.subscriptions.add(this.renderer.listen(header, 'blur', () => this.blurExpansionPanel(elem)));
     }
     ngAfterViewInit() {
         this.initDomEvents();
@@ -172,8 +153,8 @@ export class ExpansionPanelComponent {
         }
         if (!this.disabled) {
             this.ngZone.runOutsideAngular(() => {
-                const nativeElement = this.hostElement.nativeElement;
-                this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
+                const elem = this.hostElement.nativeElement;
+                this.subscriptions.add(this.renderer.listen(elem, 'keydown', this.keyDownHandler.bind(this)));
             });
         }
     }
@@ -185,7 +166,7 @@ export class ExpansionPanelComponent {
         if (!isEnterOrSpace) {
             return;
         }
-        if (hasClass(ev.target, 'k-expander')) {
+        if (hasClass(ev.target, 'k-expander-header')) {
             ev.preventDefault();
             this.ngZone.run(() => {
                 this.onHeaderAction();
@@ -196,7 +177,8 @@ export class ExpansionPanelComponent {
      * @hidden
      */
     onHeaderClick(ev) {
-        if (!isFocusable(ev.target) && !this.disabled) {
+        const header = this.header.nativeElement;
+        if (!isFocusable(ev.target) || (ev.target === header) && !this.disabled) {
             this.onHeaderAction();
         }
     }
@@ -204,7 +186,6 @@ export class ExpansionPanelComponent {
      * @hidden
      */
     onHeaderAction() {
-        this.focused = true;
         const eventArgs = new ExpansionPanelActionEvent();
         eventArgs.action = this.expanded ? 'collapse' : 'expand';
         this.action.emit(eventArgs);
@@ -259,6 +240,18 @@ export class ExpansionPanelComponent {
         }
         this.emitExpandCollapseEvent();
     }
+    focusExpansionPanel(el) {
+        if (!this.focused) {
+            this.focused = true;
+            this.renderer.addClass(el, 'k-focus');
+        }
+    }
+    blurExpansionPanel(el) {
+        if (this.focused) {
+            this.focused = false;
+            this.renderer.removeClass(el, 'k-focus');
+        }
+    }
     setExpanded(value) {
         this._expanded = value;
         this.expandedChange.emit(value);
@@ -299,18 +292,24 @@ export class ExpansionPanelComponent {
     }
 }
 ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { listeners: { "blur": "onComponentBlur()", "focus": "onComponentFocus()" }, properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "class.k-focus": "this.focusClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction", "attr.tabindex": "this.tabindex" } }, providers: [
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.expansionpanel'
         }
-    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
+    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
         <div
+            #header
             [class.k-expander-header]="true"
+            [class.k-disabled]="disabled"
+            [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
-            (click)="onHeaderClick($event)">
+            tabindex="0"
+            [attr.aria-controls]="title"
+            (click)="onHeaderClick($event)"
+        >
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
                 <span class="k-spacer"></span>
@@ -327,7 +326,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
-            <div  class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
         </div>
@@ -346,10 +345,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-expansionpanel',
                     template: `
         <div
+            #header
             [class.k-expander-header]="true"
+            [class.k-disabled]="disabled"
+            [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
-            (click)="onHeaderClick($event)">
+            tabindex="0"
+            [attr.aria-controls]="title"
+            (click)="onHeaderClick($event)"
+        >
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
                 <span class="k-spacer"></span>
@@ -366,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
-            <div  class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
         </div>
@@ -400,31 +405,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
+            }], header: [{
+                type: ViewChild,
+                args: ['header', { static: true }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-expander']
             }], expandedClass: [{
                 type: HostBinding,
                 args: ['class.k-expanded']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }, {
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onComponentBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], onComponentFocus: [{
-                type: HostListener,
-                args: ['focus']
             }] } });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666187359,
+    publishDate: 1666344829,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/expansionpanel/expansionpanel.component.d.ts

@@ -102,12 +102,10 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      */
     titleTemplate: ExpansionPanelTitleDirective;
     content: ElementRef;
+    header: ElementRef;
     hostClass: boolean;
     get expandedClass(): boolean;
-    get focusClass(): boolean;
-    get disabledClass(): boolean;
     direction: string;
-    tabindex: number;
     /**
      * @hidden
      */
@@ -115,14 +113,6 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     private animationEnd;
     private subscriptions;
     private _expanded;
-    /**
-     * @hidden
-     */
-    onComponentBlur(): void;
-    /**
-     * @hidden
-     */
-    onComponentFocus(): void;
     constructor(renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, localizationService: LocalizationService, builder: AnimationBuilder);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -154,6 +144,8 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      * @param expanded? - Boolean. Specifies, whether the ExpansionPanel will be expanded or collapsed.
      */
     toggle(expanded?: boolean): void;
+    private focusExpansionPanel;
+    private blurExpansionPanel;
     private setExpanded;
     private animateContent;
     private createPlayer;

package/fesm2015/kendo-angular-layout.js

@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666187359,
+    publishDate: 1666344829,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -6940,7 +6940,6 @@ class ExpansionPanelComponent {
          */
         this.collapse = new EventEmitter();
         this.hostClass = true;
-        this.tabindex = 0;
         /**
          * @hidden
          */
@@ -6975,31 +6974,13 @@ class ExpansionPanelComponent {
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
-    get focusClass() {
-        return this.focused;
-    }
-    get disabledClass() {
-        return this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    onComponentBlur() {
-        if (this.focused) {
-            this.focused = false;
-        }
-    }
-    /**
-     * @hidden
-     */
-    onComponentFocus() {
-        if (!this.focused) {
-            this.focused = true;
-        }
-    }
     ngOnInit() {
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
         this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
+        const elem = this.hostElement.nativeElement;
+        const header = this.header.nativeElement;
+        this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
+        this.subscriptions.add(this.renderer.listen(header, 'blur', () => this.blurExpansionPanel(elem)));
     }
     ngAfterViewInit() {
         this.initDomEvents();
@@ -7019,8 +7000,8 @@ class ExpansionPanelComponent {
         }
         if (!this.disabled) {
             this.ngZone.runOutsideAngular(() => {
-                const nativeElement = this.hostElement.nativeElement;
-                this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
+                const elem = this.hostElement.nativeElement;
+                this.subscriptions.add(this.renderer.listen(elem, 'keydown', this.keyDownHandler.bind(this)));
             });
         }
     }
@@ -7032,7 +7013,7 @@ class ExpansionPanelComponent {
         if (!isEnterOrSpace) {
             return;
         }
-        if (hasClass(ev.target, 'k-expander')) {
+        if (hasClass(ev.target, 'k-expander-header')) {
             ev.preventDefault();
             this.ngZone.run(() => {
                 this.onHeaderAction();
@@ -7043,7 +7024,8 @@ class ExpansionPanelComponent {
      * @hidden
      */
     onHeaderClick(ev) {
-        if (!isFocusable(ev.target) && !this.disabled) {
+        const header = this.header.nativeElement;
+        if (!isFocusable(ev.target) || (ev.target === header) && !this.disabled) {
             this.onHeaderAction();
         }
     }
@@ -7051,7 +7033,6 @@ class ExpansionPanelComponent {
      * @hidden
      */
     onHeaderAction() {
-        this.focused = true;
         const eventArgs = new ExpansionPanelActionEvent();
         eventArgs.action = this.expanded ? 'collapse' : 'expand';
         this.action.emit(eventArgs);
@@ -7106,6 +7087,18 @@ class ExpansionPanelComponent {
         }
         this.emitExpandCollapseEvent();
     }
+    focusExpansionPanel(el) {
+        if (!this.focused) {
+            this.focused = true;
+            this.renderer.addClass(el, 'k-focus');
+        }
+    }
+    blurExpansionPanel(el) {
+        if (this.focused) {
+            this.focused = false;
+            this.renderer.removeClass(el, 'k-focus');
+        }
+    }
     setExpanded(value) {
         this._expanded = value;
         this.expandedChange.emit(value);
@@ -7146,18 +7139,24 @@ class ExpansionPanelComponent {
     }
 }
 ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { listeners: { "blur": "onComponentBlur()", "focus": "onComponentFocus()" }, properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "class.k-focus": "this.focusClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction", "attr.tabindex": "this.tabindex" } }, providers: [
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.expansionpanel'
         }
-    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
+    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
         <div
+            #header
             [class.k-expander-header]="true"
+            [class.k-disabled]="disabled"
+            [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
-            (click)="onHeaderClick($event)">
+            tabindex="0"
+            [attr.aria-controls]="title"
+            (click)="onHeaderClick($event)"
+        >
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
                 <span class="k-spacer"></span>
@@ -7174,7 +7173,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
-            <div  class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
         </div>
@@ -7193,10 +7192,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-expansionpanel',
                     template: `
         <div
+            #header
             [class.k-expander-header]="true"
+            [class.k-disabled]="disabled"
+            [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
-            (click)="onHeaderClick($event)">
+            tabindex="0"
+            [attr.aria-controls]="title"
+            (click)="onHeaderClick($event)"
+        >
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
                 <span class="k-spacer"></span>
@@ -7213,7 +7218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
-            <div  class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
         </div>
@@ -7247,33 +7252,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
+            }], header: [{
+                type: ViewChild,
+                args: ['header', { static: true }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-expander']
             }], expandedClass: [{
                 type: HostBinding,
                 args: ['class.k-expanded']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }, {
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onComponentBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], onComponentFocus: [{
-                type: HostListener,
-                args: ['focus']
             }] } });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "7.1.5-dev.202210191350",
+  "version": "7.1.5-dev.202210210934",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",