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

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 (7) hide show
  1. package/bundles/kendo-angular-layout.umd.js +1 -1
  2. package/esm2015/expansionpanel/expansionpanel.component.js +43 -53
  3. package/esm2015/package-metadata.js +1 -1
  4. package/esm2015/panelbar/panelbar-item.component.js +14 -8
  5. package/expansionpanel/expansionpanel.component.d.ts +3 -11
  6. package/fesm2015/kendo-angular-layout.js +57 -61
  7. package/package.json +1 -1
package/esm2015/expansionpanel/expansionpanel.component.js CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { isFocusable, hasClass } from './../common/dom-queries';
6
- import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, HostListener, ViewChild } from '@angular/core';
6
+ import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
7
7
  import { ExpansionPanelTitleDirective } from './expansionpanel-title.directive';
8
8
  import { collapse, expand } from './animations';
9
9
  import { isPresent } from '../common/util';
@@ -93,7 +93,6 @@ export class ExpansionPanelComponent {
93
93
  */
94
94
  this.collapse = new EventEmitter();
95
95
  this.hostClass = true;
96
- this.tabindex = 0;
97
96
  /**
98
97
  * @hidden
99
98
  */
@@ -128,31 +127,13 @@ export class ExpansionPanelComponent {
128
127
  get expandedClass() {
129
128
  return this.expanded && !this.disabled;
130
129
  }
131
- get focusClass() {
132
- return this.focused;
133
- }
134
- get disabledClass() {
135
- return this.disabled;
136
- }
137
- /**
138
- * @hidden
139
- */
140
- onComponentBlur() {
141
- if (this.focused) {
142
- this.focused = false;
143
- }
144
- }
145
- /**
146
- * @hidden
147
- */
148
- onComponentFocus() {
149
- if (!this.focused) {
150
- this.focused = true;
151
- }
152
- }
153
130
  ngOnInit() {
154
131
  this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
155
132
  this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
133
+ const elem = this.hostElement.nativeElement;
134
+ const header = this.header.nativeElement;
135
+ this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
136
+ this.subscriptions.add(this.renderer.listen(header, 'blur', () => this.blurExpansionPanel(elem)));
156
137
  }
157
138
  ngAfterViewInit() {
158
139
  this.initDomEvents();
@@ -172,8 +153,8 @@ export class ExpansionPanelComponent {
172
153
  }
173
154
  if (!this.disabled) {
174
155
  this.ngZone.runOutsideAngular(() => {
175
- const nativeElement = this.hostElement.nativeElement;
176
- this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
156
+ const elem = this.hostElement.nativeElement;
157
+ this.subscriptions.add(this.renderer.listen(elem, 'keydown', this.keyDownHandler.bind(this)));
177
158
  });
178
159
  }
179
160
  }
@@ -185,7 +166,7 @@ export class ExpansionPanelComponent {
185
166
  if (!isEnterOrSpace) {
186
167
  return;
187
168
  }
188
- if (hasClass(ev.target, 'k-expander')) {
169
+ if (hasClass(ev.target, 'k-expander-header')) {
189
170
  ev.preventDefault();
190
171
  this.ngZone.run(() => {
191
172
  this.onHeaderAction();
@@ -196,7 +177,8 @@ export class ExpansionPanelComponent {
196
177
  * @hidden
197
178
  */
198
179
  onHeaderClick(ev) {
199
- if (!isFocusable(ev.target) && !this.disabled) {
180
+ const header = this.header.nativeElement;
181
+ if (!isFocusable(ev.target) || (ev.target === header) && !this.disabled) {
200
182
  this.onHeaderAction();
201
183
  }
202
184
  }
@@ -204,7 +186,6 @@ export class ExpansionPanelComponent {
204
186
  * @hidden
205
187
  */
206
188
  onHeaderAction() {
207
- this.focused = true;
208
189
  const eventArgs = new ExpansionPanelActionEvent();
209
190
  eventArgs.action = this.expanded ? 'collapse' : 'expand';
210
191
  this.action.emit(eventArgs);
@@ -259,6 +240,18 @@ export class ExpansionPanelComponent {
259
240
  }
260
241
  this.emitExpandCollapseEvent();
261
242
  }
243
+ focusExpansionPanel(el) {
244
+ if (!this.focused) {
245
+ this.focused = true;
246
+ this.renderer.addClass(el, 'k-focus');
247
+ }
248
+ }
249
+ blurExpansionPanel(el) {
250
+ if (this.focused) {
251
+ this.focused = false;
252
+ this.renderer.removeClass(el, 'k-focus');
253
+ }
254
+ }
262
255
  setExpanded(value) {
263
256
  this._expanded = value;
264
257
  this.expandedChange.emit(value);
@@ -299,18 +292,24 @@ export class ExpansionPanelComponent {
299
292
  }
300
293
  }
301
294
  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 });
302
- 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: [
295
+ 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: [
303
296
  LocalizationService,
304
297
  {
305
298
  provide: L10N_PREFIX,
306
299
  useValue: 'kendo.expansionpanel'
307
300
  }
308
- ], 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: `
301
+ ], 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: `
309
302
  <div
303
+ #header
310
304
  [class.k-expander-header]="true"
305
+ [class.k-disabled]="disabled"
306
+ [attr.aria-disabled]="disabled"
311
307
  [attr.aria-expanded]="expanded && !disabled"
312
308
  role="button"
313
- (click)="onHeaderClick($event)">
309
+ tabindex="0"
310
+ [attr.aria-controls]="title"
311
+ (click)="onHeaderClick($event)"
312
+ >
314
313
  <ng-container *ngIf="!titleTemplate">
315
314
  <div *ngIf="title" class="k-expander-title">{{ title }}</div>
316
315
  <span class="k-spacer"></span>
@@ -327,7 +326,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
327
326
  </span>
328
327
  </div>
329
328
  <div #content class="k-expander-content-wrapper">
330
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
329
+ <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
331
330
  <ng-content></ng-content>
332
331
  </div>
333
332
  </div>
@@ -346,10 +345,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
346
345
  selector: 'kendo-expansionpanel',
347
346
  template: `
348
347
  <div
348
+ #header
349
349
  [class.k-expander-header]="true"
350
+ [class.k-disabled]="disabled"
351
+ [attr.aria-disabled]="disabled"
350
352
  [attr.aria-expanded]="expanded && !disabled"
351
353
  role="button"
352
- (click)="onHeaderClick($event)">
354
+ tabindex="0"
355
+ [attr.aria-controls]="title"
356
+ (click)="onHeaderClick($event)"
357
+ >
353
358
  <ng-container *ngIf="!titleTemplate">
354
359
  <div *ngIf="title" class="k-expander-title">{{ title }}</div>
355
360
  <span class="k-spacer"></span>
@@ -366,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
366
371
  </span>
367
372
  </div>
368
373
  <div #content class="k-expander-content-wrapper">
369
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
374
+ <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
370
375
  <ng-content></ng-content>
371
376
  </div>
372
377
  </div>
@@ -400,31 +405,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
400
405
  }], content: [{
401
406
  type: ViewChild,
402
407
  args: ['content', { static: true }]
408
+ }], header: [{
409
+ type: ViewChild,
410
+ args: ['header', { static: true }]
403
411
  }], hostClass: [{
404
412
  type: HostBinding,
405
413
  args: ['class.k-expander']
406
414
  }], expandedClass: [{
407
415
  type: HostBinding,
408
416
  args: ['class.k-expanded']
409
- }], focusClass: [{
410
- type: HostBinding,
411
- args: ['class.k-focus']
412
- }], disabledClass: [{
413
- type: HostBinding,
414
- args: ['attr.aria-disabled']
415
- }, {
416
- type: HostBinding,
417
- args: ['class.k-disabled']
418
417
  }], direction: [{
419
418
  type: HostBinding,
420
419
  args: ['attr.dir']
421
- }], tabindex: [{
422
- type: HostBinding,
423
- args: ['attr.tabindex']
424
- }], onComponentBlur: [{
425
- type: HostListener,
426
- args: ['blur']
427
- }], onComponentFocus: [{
428
- type: HostListener,
429
- args: ['focus']
430
420
  }] } });
package/esm2015/package-metadata.js CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-layout',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1666003534,
12
+ publishDate: 1666344829,
13
13
  version: '',
14
14
  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'
15
15
  };
package/esm2015/panelbar/panelbar-item.component.js CHANGED
@@ -278,17 +278,20 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
278
278
  [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
279
279
  </span>
280
280
  </span>
281
- <div #contentWrapper
281
+ <div
282
+ #contentWrapper
282
283
  *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
283
284
  [@toggle]="state"
284
285
  [attr.role]="'group'"
285
- [attr.aria-hidden]="!disabled && !expanded">
286
+ [attr.aria-hidden]="!disabled && !expanded"
287
+ >
286
288
  <div
287
289
  *ngIf="hasChildItems && !items?.length"
288
290
  [style.overflow]="contentOverflow"
289
291
  [style.height]="contentHeight"
290
- class="k-panel k-group k-panelbar-group">
291
- <ng-content select="kendo-panelbar-item"></ng-content>
292
+ class="k-panel k-group k-panelbar-group"
293
+ >
294
+ <ng-content select="kendo-panelbar-item"></ng-content>
292
295
  </div>
293
296
  <div
294
297
  *ngIf="hasContent && !content"
@@ -420,17 +423,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
420
423
  [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
421
424
  </span>
422
425
  </span>
423
- <div #contentWrapper
426
+ <div
427
+ #contentWrapper
424
428
  *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
425
429
  [@toggle]="state"
426
430
  [attr.role]="'group'"
427
- [attr.aria-hidden]="!disabled && !expanded">
431
+ [attr.aria-hidden]="!disabled && !expanded"
432
+ >
428
433
  <div
429
434
  *ngIf="hasChildItems && !items?.length"
430
435
  [style.overflow]="contentOverflow"
431
436
  [style.height]="contentHeight"
432
- class="k-panel k-group k-panelbar-group">
433
- <ng-content select="kendo-panelbar-item"></ng-content>
437
+ class="k-panel k-group k-panelbar-group"
438
+ >
439
+ <ng-content select="kendo-panelbar-item"></ng-content>
434
440
  </div>
435
441
  <div
436
442
  *ngIf="hasContent && !content"
package/expansionpanel/expansionpanel.component.d.ts CHANGED
@@ -102,12 +102,10 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
102
102
  */
103
103
  titleTemplate: ExpansionPanelTitleDirective;
104
104
  content: ElementRef;
105
+ header: ElementRef;
105
106
  hostClass: boolean;
106
107
  get expandedClass(): boolean;
107
- get focusClass(): boolean;
108
- get disabledClass(): boolean;
109
108
  direction: string;
110
- tabindex: number;
111
109
  /**
112
110
  * @hidden
113
111
  */
@@ -115,14 +113,6 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
115
113
  private animationEnd;
116
114
  private subscriptions;
117
115
  private _expanded;
118
- /**
119
- * @hidden
120
- */
121
- onComponentBlur(): void;
122
- /**
123
- * @hidden
124
- */
125
- onComponentFocus(): void;
126
116
  constructor(renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, localizationService: LocalizationService, builder: AnimationBuilder);
127
117
  ngOnInit(): void;
128
118
  ngAfterViewInit(): void;
@@ -154,6 +144,8 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
154
144
  * @param expanded? - Boolean. Specifies, whether the ExpansionPanel will be expanded or collapsed.
155
145
  */
156
146
  toggle(expanded?: boolean): void;
147
+ private focusExpansionPanel;
148
+ private blurExpansionPanel;
157
149
  private setExpanded;
158
150
  private animateContent;
159
151
  private createPlayer;
package/fesm2015/kendo-angular-layout.js CHANGED
@@ -26,7 +26,7 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-layout',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1666003534,
29
+ publishDate: 1666344829,
30
30
  version: '',
31
31
  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'
32
32
  };
@@ -544,17 +544,20 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
544
544
  [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
545
545
  </span>
546
546
  </span>
547
- <div #contentWrapper
547
+ <div
548
+ #contentWrapper
548
549
  *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
549
550
  [@toggle]="state"
550
551
  [attr.role]="'group'"
551
- [attr.aria-hidden]="!disabled && !expanded">
552
+ [attr.aria-hidden]="!disabled && !expanded"
553
+ >
552
554
  <div
553
555
  *ngIf="hasChildItems && !items?.length"
554
556
  [style.overflow]="contentOverflow"
555
557
  [style.height]="contentHeight"
556
- class="k-panel k-group k-panelbar-group">
557
- <ng-content select="kendo-panelbar-item"></ng-content>
558
+ class="k-panel k-group k-panelbar-group"
559
+ >
560
+ <ng-content select="kendo-panelbar-item"></ng-content>
558
561
  </div>
559
562
  <div
560
563
  *ngIf="hasContent && !content"
@@ -686,17 +689,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
686
689
  [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
687
690
  </span>
688
691
  </span>
689
- <div #contentWrapper
692
+ <div
693
+ #contentWrapper
690
694
  *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
691
695
  [@toggle]="state"
692
696
  [attr.role]="'group'"
693
- [attr.aria-hidden]="!disabled && !expanded">
697
+ [attr.aria-hidden]="!disabled && !expanded"
698
+ >
694
699
  <div
695
700
  *ngIf="hasChildItems && !items?.length"
696
701
  [style.overflow]="contentOverflow"
697
702
  [style.height]="contentHeight"
698
- class="k-panel k-group k-panelbar-group">
699
- <ng-content select="kendo-panelbar-item"></ng-content>
703
+ class="k-panel k-group k-panelbar-group"
704
+ >
705
+ <ng-content select="kendo-panelbar-item"></ng-content>
700
706
  </div>
701
707
  <div
702
708
  *ngIf="hasContent && !content"
@@ -6934,7 +6940,6 @@ class ExpansionPanelComponent {
6934
6940
  */
6935
6941
  this.collapse = new EventEmitter();
6936
6942
  this.hostClass = true;
6937
- this.tabindex = 0;
6938
6943
  /**
6939
6944
  * @hidden
6940
6945
  */
@@ -6969,31 +6974,13 @@ class ExpansionPanelComponent {
6969
6974
  get expandedClass() {
6970
6975
  return this.expanded && !this.disabled;
6971
6976
  }
6972
- get focusClass() {
6973
- return this.focused;
6974
- }
6975
- get disabledClass() {
6976
- return this.disabled;
6977
- }
6978
- /**
6979
- * @hidden
6980
- */
6981
- onComponentBlur() {
6982
- if (this.focused) {
6983
- this.focused = false;
6984
- }
6985
- }
6986
- /**
6987
- * @hidden
6988
- */
6989
- onComponentFocus() {
6990
- if (!this.focused) {
6991
- this.focused = true;
6992
- }
6993
- }
6994
6977
  ngOnInit() {
6995
6978
  this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
6996
6979
  this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
6980
+ const elem = this.hostElement.nativeElement;
6981
+ const header = this.header.nativeElement;
6982
+ this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
6983
+ this.subscriptions.add(this.renderer.listen(header, 'blur', () => this.blurExpansionPanel(elem)));
6997
6984
  }
6998
6985
  ngAfterViewInit() {
6999
6986
  this.initDomEvents();
@@ -7013,8 +7000,8 @@ class ExpansionPanelComponent {
7013
7000
  }
7014
7001
  if (!this.disabled) {
7015
7002
  this.ngZone.runOutsideAngular(() => {
7016
- const nativeElement = this.hostElement.nativeElement;
7017
- this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
7003
+ const elem = this.hostElement.nativeElement;
7004
+ this.subscriptions.add(this.renderer.listen(elem, 'keydown', this.keyDownHandler.bind(this)));
7018
7005
  });
7019
7006
  }
7020
7007
  }
@@ -7026,7 +7013,7 @@ class ExpansionPanelComponent {
7026
7013
  if (!isEnterOrSpace) {
7027
7014
  return;
7028
7015
  }
7029
- if (hasClass(ev.target, 'k-expander')) {
7016
+ if (hasClass(ev.target, 'k-expander-header')) {
7030
7017
  ev.preventDefault();
7031
7018
  this.ngZone.run(() => {
7032
7019
  this.onHeaderAction();
@@ -7037,7 +7024,8 @@ class ExpansionPanelComponent {
7037
7024
  * @hidden
7038
7025
  */
7039
7026
  onHeaderClick(ev) {
7040
- if (!isFocusable(ev.target) && !this.disabled) {
7027
+ const header = this.header.nativeElement;
7028
+ if (!isFocusable(ev.target) || (ev.target === header) && !this.disabled) {
7041
7029
  this.onHeaderAction();
7042
7030
  }
7043
7031
  }
@@ -7045,7 +7033,6 @@ class ExpansionPanelComponent {
7045
7033
  * @hidden
7046
7034
  */
7047
7035
  onHeaderAction() {
7048
- this.focused = true;
7049
7036
  const eventArgs = new ExpansionPanelActionEvent();
7050
7037
  eventArgs.action = this.expanded ? 'collapse' : 'expand';
7051
7038
  this.action.emit(eventArgs);
@@ -7100,6 +7087,18 @@ class ExpansionPanelComponent {
7100
7087
  }
7101
7088
  this.emitExpandCollapseEvent();
7102
7089
  }
7090
+ focusExpansionPanel(el) {
7091
+ if (!this.focused) {
7092
+ this.focused = true;
7093
+ this.renderer.addClass(el, 'k-focus');
7094
+ }
7095
+ }
7096
+ blurExpansionPanel(el) {
7097
+ if (this.focused) {
7098
+ this.focused = false;
7099
+ this.renderer.removeClass(el, 'k-focus');
7100
+ }
7101
+ }
7103
7102
  setExpanded(value) {
7104
7103
  this._expanded = value;
7105
7104
  this.expandedChange.emit(value);
@@ -7140,18 +7139,24 @@ class ExpansionPanelComponent {
7140
7139
  }
7141
7140
  }
7142
7141
  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 });
7143
- 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: [
7142
+ 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: [
7144
7143
  LocalizationService,
7145
7144
  {
7146
7145
  provide: L10N_PREFIX,
7147
7146
  useValue: 'kendo.expansionpanel'
7148
7147
  }
7149
- ], 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: `
7148
+ ], 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: `
7150
7149
  <div
7150
+ #header
7151
7151
  [class.k-expander-header]="true"
7152
+ [class.k-disabled]="disabled"
7153
+ [attr.aria-disabled]="disabled"
7152
7154
  [attr.aria-expanded]="expanded && !disabled"
7153
7155
  role="button"
7154
- (click)="onHeaderClick($event)">
7156
+ tabindex="0"
7157
+ [attr.aria-controls]="title"
7158
+ (click)="onHeaderClick($event)"
7159
+ >
7155
7160
  <ng-container *ngIf="!titleTemplate">
7156
7161
  <div *ngIf="title" class="k-expander-title">{{ title }}</div>
7157
7162
  <span class="k-spacer"></span>
@@ -7168,7 +7173,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
7168
7173
  </span>
7169
7174
  </div>
7170
7175
  <div #content class="k-expander-content-wrapper">
7171
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
7176
+ <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
7172
7177
  <ng-content></ng-content>
7173
7178
  </div>
7174
7179
  </div>
@@ -7187,10 +7192,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
7187
7192
  selector: 'kendo-expansionpanel',
7188
7193
  template: `
7189
7194
  <div
7195
+ #header
7190
7196
  [class.k-expander-header]="true"
7197
+ [class.k-disabled]="disabled"
7198
+ [attr.aria-disabled]="disabled"
7191
7199
  [attr.aria-expanded]="expanded && !disabled"
7192
7200
  role="button"
7193
- (click)="onHeaderClick($event)">
7201
+ tabindex="0"
7202
+ [attr.aria-controls]="title"
7203
+ (click)="onHeaderClick($event)"
7204
+ >
7194
7205
  <ng-container *ngIf="!titleTemplate">
7195
7206
  <div *ngIf="title" class="k-expander-title">{{ title }}</div>
7196
7207
  <span class="k-spacer"></span>
@@ -7207,7 +7218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
7207
7218
  </span>
7208
7219
  </div>
7209
7220
  <div #content class="k-expander-content-wrapper">
7210
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
7221
+ <div [id]="title" class="k-expander-content" [attr.aria-hidden]="!expanded">
7211
7222
  <ng-content></ng-content>
7212
7223
  </div>
7213
7224
  </div>
@@ -7241,33 +7252,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
7241
7252
  }], content: [{
7242
7253
  type: ViewChild,
7243
7254
  args: ['content', { static: true }]
7255
+ }], header: [{
7256
+ type: ViewChild,
7257
+ args: ['header', { static: true }]
7244
7258
  }], hostClass: [{
7245
7259
  type: HostBinding,
7246
7260
  args: ['class.k-expander']
7247
7261
  }], expandedClass: [{
7248
7262
  type: HostBinding,
7249
7263
  args: ['class.k-expanded']
7250
- }], focusClass: [{
7251
- type: HostBinding,
7252
- args: ['class.k-focus']
7253
- }], disabledClass: [{
7254
- type: HostBinding,
7255
- args: ['attr.aria-disabled']
7256
- }, {
7257
- type: HostBinding,
7258
- args: ['class.k-disabled']
7259
7264
  }], direction: [{
7260
7265
  type: HostBinding,
7261
7266
  args: ['attr.dir']
7262
- }], tabindex: [{
7263
- type: HostBinding,
7264
- args: ['attr.tabindex']
7265
- }], onComponentBlur: [{
7266
- type: HostListener,
7267
- args: ['blur']
7268
- }], onComponentFocus: [{
7269
- type: HostListener,
7270
- args: ['focus']
7271
7267
  }] } });
7272
7268
 
7273
7269
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-layout",
3
- "version": "7.1.5-dev.202210171046",
3
+ "version": "7.1.5-dev.202210210934",
4
4
  "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",