@progress/kendo-angular-layout 21.3.0 → 21.4.0-develop.1

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 (9) hide show
  1. package/esm2022/package-metadata.mjs +2 -2
  2. package/esm2022/panelbar/panelbar-item.component.mjs +23 -17
  3. package/esm2022/tabstrip/tabstrip.component.mjs +78 -74
  4. package/fesm2022/progress-kendo-angular-layout.mjs +103 -93
  5. package/package.json +9 -9
  6. package/panelbar/panelbar-item.component.d.ts +1 -1
  7. package/panelbar/panelbar.component.d.ts +2 -2
  8. package/panelbar/panelbar.service.d.ts +2 -2
  9. package/tabstrip/tabstrip.component.d.ts +4 -2
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1765467901,
14
- version: '21.3.0',
13
+ publishDate: 1765536305,
14
+ version: '21.4.0-develop.1',
15
15
  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'
16
16
  };
package/esm2022/panelbar/panelbar-item.component.mjs CHANGED
@@ -378,13 +378,14 @@ export class PanelBarItemComponent {
378
378
  </kendo-icon-wrapper>
379
379
  }
380
380
  </span>
381
- @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
382
- <div
383
- #contentWrapper
384
- [@toggle]="state"
385
- [attr.role]="'group'"
386
- [attr.aria-hidden]="!disabled && !expanded"
387
- >
381
+ @if ((!disabled && expanded) || keepContent !== false) {
382
+ @defer (when ((!disabled && expanded && keepContent !== true) || keepContent === true); prefetch on idle) {
383
+ <div
384
+ #contentWrapper
385
+ [@toggle]="state"
386
+ [attr.role]="'group'"
387
+ [attr.aria-hidden]="!disabled && !expanded"
388
+ >
388
389
  @if (hasChildItems && !items?.length) {
389
390
  <div
390
391
  [style.overflow]="contentOverflow"
@@ -463,7 +464,9 @@ export class PanelBarItemComponent {
463
464
  </div>
464
465
  }
465
466
  </div>
466
- }`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
467
+ }
468
+ }
469
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
467
470
  trigger('toggle', [
468
471
  state('inactive', style({ display: 'none' })),
469
472
  transition('* => active', [
@@ -475,7 +478,7 @@ export class PanelBarItemComponent {
475
478
  animate(200, style({ height: 0, display: 'none' }))
476
479
  ])
477
480
  ])
478
- ] });
481
+ ], deferBlockDependencies: [() => [PanelBarItemComponent, NgTemplateOutlet]] });
479
482
  }
480
483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarItemComponent, decorators: [{
481
484
  type: Component,
@@ -549,13 +552,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
549
552
  </kendo-icon-wrapper>
550
553
  }
551
554
  </span>
552
- @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
553
- <div
554
- #contentWrapper
555
- [@toggle]="state"
556
- [attr.role]="'group'"
557
- [attr.aria-hidden]="!disabled && !expanded"
558
- >
555
+ @if ((!disabled && expanded) || keepContent !== false) {
556
+ @defer (when ((!disabled && expanded && keepContent !== true) || keepContent === true); prefetch on idle) {
557
+ <div
558
+ #contentWrapper
559
+ [@toggle]="state"
560
+ [attr.role]="'group'"
561
+ [attr.aria-hidden]="!disabled && !expanded"
562
+ >
559
563
  @if (hasChildItems && !items?.length) {
560
564
  <div
561
565
  [style.overflow]="contentOverflow"
@@ -634,7 +638,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
634
638
  </div>
635
639
  }
636
640
  </div>
637
- }`,
641
+ }
642
+ }
643
+ `,
638
644
  standalone: true,
639
645
  imports: [IconWrapperComponent, NgTemplateOutlet]
640
646
  }]
package/esm2022/tabstrip/tabstrip.component.mjs CHANGED
@@ -84,7 +84,9 @@ export class TabStripComponent {
84
84
  */
85
85
  tabPosition = 'top';
86
86
  /**
87
- * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)).
87
+ * When set to `true`, all tabs' content is eagerly rendered and kept in the DOM ([see example](slug:rendering_tabstrip)).
88
+ * When set to `false`, only the active tab's content is rendered. Inactive tabs' content is removed from the DOM.
89
+ * When set to `'loadOnDemand'`, the active tab's content is rendered initially. Inactive tabs' content is rendered only when the tab is activated for the first time and kept in the DOM afterwards.
88
90
  *
89
91
  * @default false
90
92
  */
@@ -518,10 +520,10 @@ export class TabStripComponent {
518
520
  <ng-container kendoTabStripLocalizedMessages
519
521
  i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
520
522
  closeTitle="Close"
521
-
523
+
522
524
  i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
523
525
  previousTabButton="Previous Tab"
524
-
526
+
525
527
  i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
526
528
  nextTabButton="Next Tab"
527
529
  >
@@ -532,7 +534,7 @@ export class TabStripComponent {
532
534
  <ng-container *ngTemplateOutlet="content"></ng-container>
533
535
  }
534
536
  }
535
-
537
+
536
538
  @if (tabsAtBottom) {
537
539
  @if (showContentArea) {
538
540
  <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -591,23 +593,23 @@ export class TabStripComponent {
591
593
  >
592
594
  @for (tab of tabs; track tab; let i = $index) {
593
595
  <li
594
- #tabHeaderContainer
595
- kendoTabStripTab
596
- [class.k-first]="i === 0"
597
- [class.k-last]="i === tabs.length - 1"
598
- [ngClass]="tab.cssClass"
599
- [ngStyle]="tab.cssStyle"
600
- [tab]="tab"
601
- [index]="i"
602
- role="tab"
603
- [tabStripClosable]="closable"
604
- [tabStripCloseIcon]="closeIcon"
605
- [customTabstripCloseIcon]="closeIconClass"
606
- [closeSVGIcon]="closeSVGIcon"
607
- (tabClose)="tabClose.emit($event)"
608
- (click)="onTabClick($event, i)"
609
- [id]="getTabId(i)"
610
- [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
596
+ #tabHeaderContainer
597
+ kendoTabStripTab
598
+ [class.k-first]="i === 0"
599
+ [class.k-last]="i === tabs.length - 1"
600
+ [ngClass]="tab.cssClass"
601
+ [ngStyle]="tab.cssStyle"
602
+ [tab]="tab"
603
+ [index]="i"
604
+ role="tab"
605
+ [tabStripClosable]="closable"
606
+ [tabStripCloseIcon]="closeIcon"
607
+ [customTabstripCloseIcon]="closeIconClass"
608
+ [closeSVGIcon]="closeSVGIcon"
609
+ (tabClose)="tabClose.emit($event)"
610
+ (click)="onTabClick($event, i)"
611
+ [id]="getTabId(i)"
612
+ [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
611
613
  }
612
614
  </ul>
613
615
  @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
@@ -649,23 +651,24 @@ export class TabStripComponent {
649
651
  </div>
650
652
  </ng-template>
651
653
  <ng-template #content>
652
- @for (tab of tabs; track tab; let i = $index) {
653
- @if (tab.selected || keepTabContent) {
654
- <div
655
- [@state]="tab.selected && animate ? 'active' : 'inactive'"
656
- [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
657
- [tabIndex]="0"
658
- role="tabpanel"
659
- [id]="getTabPanelId(i)"
660
- [attr.aria-hidden]="!tab.selected"
661
- [attr.aria-labelledby]="getTabId(i)"
662
- [attr.aria-disabled]="tab.disabled"
663
- >
664
- <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
665
- </ng-template>
666
- </div>
654
+ @for (tab of tabs; track tab; let i = $index) {
655
+ @if (tab.selected || keepTabContent !== false) {
656
+ @defer (when tab.selected || keepTabContent === true; prefetch on idle) {
657
+ <div
658
+ [@state]="tab.selected && animate ? 'active' : 'inactive'"
659
+ [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
660
+ [tabIndex]="0"
661
+ role="tabpanel"
662
+ [id]="getTabPanelId(i)"
663
+ [attr.aria-hidden]="!tab.selected"
664
+ [attr.aria-labelledby]="getTabId(i)"
665
+ [attr.aria-disabled]="tab.disabled"
666
+ >
667
+ <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
668
+ </div>
669
+ }
670
+ }
667
671
  }
668
- }
669
672
  </ng-template>
670
673
  @if (isScrollable) {
671
674
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -681,7 +684,7 @@ export class TabStripComponent {
681
684
  animate('400ms ease-in')
682
685
  ])
683
686
  ])
684
- ] });
687
+ ], deferBlockDependencies: [() => [NgTemplateOutlet, NgClass]] });
685
688
  }
686
689
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripComponent, decorators: [{
687
690
  type: Component,
@@ -710,10 +713,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
710
713
  <ng-container kendoTabStripLocalizedMessages
711
714
  i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
712
715
  closeTitle="Close"
713
-
716
+
714
717
  i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
715
718
  previousTabButton="Previous Tab"
716
-
719
+
717
720
  i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
718
721
  nextTabButton="Next Tab"
719
722
  >
@@ -724,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
724
727
  <ng-container *ngTemplateOutlet="content"></ng-container>
725
728
  }
726
729
  }
727
-
730
+
728
731
  @if (tabsAtBottom) {
729
732
  @if (showContentArea) {
730
733
  <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -783,23 +786,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
783
786
  >
784
787
  @for (tab of tabs; track tab; let i = $index) {
785
788
  <li
786
- #tabHeaderContainer
787
- kendoTabStripTab
788
- [class.k-first]="i === 0"
789
- [class.k-last]="i === tabs.length - 1"
790
- [ngClass]="tab.cssClass"
791
- [ngStyle]="tab.cssStyle"
792
- [tab]="tab"
793
- [index]="i"
794
- role="tab"
795
- [tabStripClosable]="closable"
796
- [tabStripCloseIcon]="closeIcon"
797
- [customTabstripCloseIcon]="closeIconClass"
798
- [closeSVGIcon]="closeSVGIcon"
799
- (tabClose)="tabClose.emit($event)"
800
- (click)="onTabClick($event, i)"
801
- [id]="getTabId(i)"
802
- [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
789
+ #tabHeaderContainer
790
+ kendoTabStripTab
791
+ [class.k-first]="i === 0"
792
+ [class.k-last]="i === tabs.length - 1"
793
+ [ngClass]="tab.cssClass"
794
+ [ngStyle]="tab.cssStyle"
795
+ [tab]="tab"
796
+ [index]="i"
797
+ role="tab"
798
+ [tabStripClosable]="closable"
799
+ [tabStripCloseIcon]="closeIcon"
800
+ [customTabstripCloseIcon]="closeIconClass"
801
+ [closeSVGIcon]="closeSVGIcon"
802
+ (tabClose)="tabClose.emit($event)"
803
+ (click)="onTabClick($event, i)"
804
+ [id]="getTabId(i)"
805
+ [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
803
806
  }
804
807
  </ul>
805
808
  @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
@@ -841,23 +844,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
841
844
  </div>
842
845
  </ng-template>
843
846
  <ng-template #content>
844
- @for (tab of tabs; track tab; let i = $index) {
845
- @if (tab.selected || keepTabContent) {
846
- <div
847
- [@state]="tab.selected && animate ? 'active' : 'inactive'"
848
- [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
849
- [tabIndex]="0"
850
- role="tabpanel"
851
- [id]="getTabPanelId(i)"
852
- [attr.aria-hidden]="!tab.selected"
853
- [attr.aria-labelledby]="getTabId(i)"
854
- [attr.aria-disabled]="tab.disabled"
855
- >
856
- <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
857
- </ng-template>
858
- </div>
847
+ @for (tab of tabs; track tab; let i = $index) {
848
+ @if (tab.selected || keepTabContent !== false) {
849
+ @defer (when tab.selected || keepTabContent === true; prefetch on idle) {
850
+ <div
851
+ [@state]="tab.selected && animate ? 'active' : 'inactive'"
852
+ [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
853
+ [tabIndex]="0"
854
+ role="tabpanel"
855
+ [id]="getTabPanelId(i)"
856
+ [attr.aria-hidden]="!tab.selected"
857
+ [attr.aria-labelledby]="getTabId(i)"
858
+ [attr.aria-disabled]="tab.disabled"
859
+ >
860
+ <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
861
+ </div>
862
+ }
863
+ }
859
864
  }
860
- }
861
865
  </ng-template>
862
866
  @if (isScrollable) {
863
867
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
package/fesm2022/progress-kendo-angular-layout.mjs CHANGED
@@ -29,8 +29,8 @@ const packageMetadata = {
29
29
  productName: 'Kendo UI for Angular',
30
30
  productCode: 'KENDOUIANGULAR',
31
31
  productCodes: ['KENDOUIANGULAR'],
32
- publishDate: 1765467901,
33
- version: '21.3.0',
32
+ publishDate: 1765536305,
33
+ version: '21.4.0-develop.1',
34
34
  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'
35
35
  };
36
36
 
@@ -662,13 +662,14 @@ class PanelBarItemComponent {
662
662
  </kendo-icon-wrapper>
663
663
  }
664
664
  </span>
665
- @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
666
- <div
667
- #contentWrapper
668
- [@toggle]="state"
669
- [attr.role]="'group'"
670
- [attr.aria-hidden]="!disabled && !expanded"
671
- >
665
+ @if ((!disabled && expanded) || keepContent !== false) {
666
+ @defer (when ((!disabled && expanded && keepContent !== true) || keepContent === true); prefetch on idle) {
667
+ <div
668
+ #contentWrapper
669
+ [@toggle]="state"
670
+ [attr.role]="'group'"
671
+ [attr.aria-hidden]="!disabled && !expanded"
672
+ >
672
673
  @if (hasChildItems && !items?.length) {
673
674
  <div
674
675
  [style.overflow]="contentOverflow"
@@ -747,7 +748,9 @@ class PanelBarItemComponent {
747
748
  </div>
748
749
  }
749
750
  </div>
750
- }`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
751
+ }
752
+ }
753
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
751
754
  trigger('toggle', [
752
755
  state('inactive', style({ display: 'none' })),
753
756
  transition('* => active', [
@@ -759,7 +762,7 @@ class PanelBarItemComponent {
759
762
  animate(200, style({ height: 0, display: 'none' }))
760
763
  ])
761
764
  ])
762
- ] });
765
+ ], deferBlockDependencies: [() => [PanelBarItemComponent, NgTemplateOutlet]] });
763
766
  }
764
767
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarItemComponent, decorators: [{
765
768
  type: Component,
@@ -833,13 +836,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
833
836
  </kendo-icon-wrapper>
834
837
  }
835
838
  </span>
836
- @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
837
- <div
838
- #contentWrapper
839
- [@toggle]="state"
840
- [attr.role]="'group'"
841
- [attr.aria-hidden]="!disabled && !expanded"
842
- >
839
+ @if ((!disabled && expanded) || keepContent !== false) {
840
+ @defer (when ((!disabled && expanded && keepContent !== true) || keepContent === true); prefetch on idle) {
841
+ <div
842
+ #contentWrapper
843
+ [@toggle]="state"
844
+ [attr.role]="'group'"
845
+ [attr.aria-hidden]="!disabled && !expanded"
846
+ >
843
847
  @if (hasChildItems && !items?.length) {
844
848
  <div
845
849
  [style.overflow]="contentOverflow"
@@ -918,7 +922,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
918
922
  </div>
919
923
  }
920
924
  </div>
921
- }`,
925
+ }
926
+ }
927
+ `,
922
928
  standalone: true,
923
929
  imports: [IconWrapperComponent, NgTemplateOutlet]
924
930
  }]
@@ -4139,7 +4145,9 @@ class TabStripComponent {
4139
4145
  */
4140
4146
  tabPosition = 'top';
4141
4147
  /**
4142
- * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)).
4148
+ * When set to `true`, all tabs' content is eagerly rendered and kept in the DOM ([see example](slug:rendering_tabstrip)).
4149
+ * When set to `false`, only the active tab's content is rendered. Inactive tabs' content is removed from the DOM.
4150
+ * When set to `'loadOnDemand'`, the active tab's content is rendered initially. Inactive tabs' content is rendered only when the tab is activated for the first time and kept in the DOM afterwards.
4143
4151
  *
4144
4152
  * @default false
4145
4153
  */
@@ -4573,10 +4581,10 @@ class TabStripComponent {
4573
4581
  <ng-container kendoTabStripLocalizedMessages
4574
4582
  i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
4575
4583
  closeTitle="Close"
4576
-
4584
+
4577
4585
  i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
4578
4586
  previousTabButton="Previous Tab"
4579
-
4587
+
4580
4588
  i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
4581
4589
  nextTabButton="Next Tab"
4582
4590
  >
@@ -4587,7 +4595,7 @@ class TabStripComponent {
4587
4595
  <ng-container *ngTemplateOutlet="content"></ng-container>
4588
4596
  }
4589
4597
  }
4590
-
4598
+
4591
4599
  @if (tabsAtBottom) {
4592
4600
  @if (showContentArea) {
4593
4601
  <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -4646,23 +4654,23 @@ class TabStripComponent {
4646
4654
  >
4647
4655
  @for (tab of tabs; track tab; let i = $index) {
4648
4656
  <li
4649
- #tabHeaderContainer
4650
- kendoTabStripTab
4651
- [class.k-first]="i === 0"
4652
- [class.k-last]="i === tabs.length - 1"
4653
- [ngClass]="tab.cssClass"
4654
- [ngStyle]="tab.cssStyle"
4655
- [tab]="tab"
4656
- [index]="i"
4657
- role="tab"
4658
- [tabStripClosable]="closable"
4659
- [tabStripCloseIcon]="closeIcon"
4660
- [customTabstripCloseIcon]="closeIconClass"
4661
- [closeSVGIcon]="closeSVGIcon"
4662
- (tabClose)="tabClose.emit($event)"
4663
- (click)="onTabClick($event, i)"
4664
- [id]="getTabId(i)"
4665
- [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
4657
+ #tabHeaderContainer
4658
+ kendoTabStripTab
4659
+ [class.k-first]="i === 0"
4660
+ [class.k-last]="i === tabs.length - 1"
4661
+ [ngClass]="tab.cssClass"
4662
+ [ngStyle]="tab.cssStyle"
4663
+ [tab]="tab"
4664
+ [index]="i"
4665
+ role="tab"
4666
+ [tabStripClosable]="closable"
4667
+ [tabStripCloseIcon]="closeIcon"
4668
+ [customTabstripCloseIcon]="closeIconClass"
4669
+ [closeSVGIcon]="closeSVGIcon"
4670
+ (tabClose)="tabClose.emit($event)"
4671
+ (click)="onTabClick($event, i)"
4672
+ [id]="getTabId(i)"
4673
+ [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
4666
4674
  }
4667
4675
  </ul>
4668
4676
  @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
@@ -4704,23 +4712,24 @@ class TabStripComponent {
4704
4712
  </div>
4705
4713
  </ng-template>
4706
4714
  <ng-template #content>
4707
- @for (tab of tabs; track tab; let i = $index) {
4708
- @if (tab.selected || keepTabContent) {
4709
- <div
4710
- [@state]="tab.selected && animate ? 'active' : 'inactive'"
4711
- [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
4712
- [tabIndex]="0"
4713
- role="tabpanel"
4714
- [id]="getTabPanelId(i)"
4715
- [attr.aria-hidden]="!tab.selected"
4716
- [attr.aria-labelledby]="getTabId(i)"
4717
- [attr.aria-disabled]="tab.disabled"
4718
- >
4719
- <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
4720
- </ng-template>
4721
- </div>
4715
+ @for (tab of tabs; track tab; let i = $index) {
4716
+ @if (tab.selected || keepTabContent !== false) {
4717
+ @defer (when tab.selected || keepTabContent === true; prefetch on idle) {
4718
+ <div
4719
+ [@state]="tab.selected && animate ? 'active' : 'inactive'"
4720
+ [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
4721
+ [tabIndex]="0"
4722
+ role="tabpanel"
4723
+ [id]="getTabPanelId(i)"
4724
+ [attr.aria-hidden]="!tab.selected"
4725
+ [attr.aria-labelledby]="getTabId(i)"
4726
+ [attr.aria-disabled]="tab.disabled"
4727
+ >
4728
+ <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
4729
+ </div>
4730
+ }
4731
+ }
4722
4732
  }
4723
- }
4724
4733
  </ng-template>
4725
4734
  @if (isScrollable) {
4726
4735
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -4736,7 +4745,7 @@ class TabStripComponent {
4736
4745
  animate('400ms ease-in')
4737
4746
  ])
4738
4747
  ])
4739
- ] });
4748
+ ], deferBlockDependencies: [() => [NgTemplateOutlet, NgClass]] });
4740
4749
  }
4741
4750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripComponent, decorators: [{
4742
4751
  type: Component,
@@ -4765,10 +4774,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
4765
4774
  <ng-container kendoTabStripLocalizedMessages
4766
4775
  i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
4767
4776
  closeTitle="Close"
4768
-
4777
+
4769
4778
  i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
4770
4779
  previousTabButton="Previous Tab"
4771
-
4780
+
4772
4781
  i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
4773
4782
  nextTabButton="Next Tab"
4774
4783
  >
@@ -4779,7 +4788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
4779
4788
  <ng-container *ngTemplateOutlet="content"></ng-container>
4780
4789
  }
4781
4790
  }
4782
-
4791
+
4783
4792
  @if (tabsAtBottom) {
4784
4793
  @if (showContentArea) {
4785
4794
  <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -4838,23 +4847,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
4838
4847
  >
4839
4848
  @for (tab of tabs; track tab; let i = $index) {
4840
4849
  <li
4841
- #tabHeaderContainer
4842
- kendoTabStripTab
4843
- [class.k-first]="i === 0"
4844
- [class.k-last]="i === tabs.length - 1"
4845
- [ngClass]="tab.cssClass"
4846
- [ngStyle]="tab.cssStyle"
4847
- [tab]="tab"
4848
- [index]="i"
4849
- role="tab"
4850
- [tabStripClosable]="closable"
4851
- [tabStripCloseIcon]="closeIcon"
4852
- [customTabstripCloseIcon]="closeIconClass"
4853
- [closeSVGIcon]="closeSVGIcon"
4854
- (tabClose)="tabClose.emit($event)"
4855
- (click)="onTabClick($event, i)"
4856
- [id]="getTabId(i)"
4857
- [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
4850
+ #tabHeaderContainer
4851
+ kendoTabStripTab
4852
+ [class.k-first]="i === 0"
4853
+ [class.k-last]="i === tabs.length - 1"
4854
+ [ngClass]="tab.cssClass"
4855
+ [ngStyle]="tab.cssStyle"
4856
+ [tab]="tab"
4857
+ [index]="i"
4858
+ role="tab"
4859
+ [tabStripClosable]="closable"
4860
+ [tabStripCloseIcon]="closeIcon"
4861
+ [customTabstripCloseIcon]="closeIconClass"
4862
+ [closeSVGIcon]="closeSVGIcon"
4863
+ (tabClose)="tabClose.emit($event)"
4864
+ (click)="onTabClick($event, i)"
4865
+ [id]="getTabId(i)"
4866
+ [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
4858
4867
  }
4859
4868
  </ul>
4860
4869
  @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
@@ -4896,23 +4905,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
4896
4905
  </div>
4897
4906
  </ng-template>
4898
4907
  <ng-template #content>
4899
- @for (tab of tabs; track tab; let i = $index) {
4900
- @if (tab.selected || keepTabContent) {
4901
- <div
4902
- [@state]="tab.selected && animate ? 'active' : 'inactive'"
4903
- [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
4904
- [tabIndex]="0"
4905
- role="tabpanel"
4906
- [id]="getTabPanelId(i)"
4907
- [attr.aria-hidden]="!tab.selected"
4908
- [attr.aria-labelledby]="getTabId(i)"
4909
- [attr.aria-disabled]="tab.disabled"
4910
- >
4911
- <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
4912
- </ng-template>
4913
- </div>
4908
+ @for (tab of tabs; track tab; let i = $index) {
4909
+ @if (tab.selected || keepTabContent !== false) {
4910
+ @defer (when tab.selected || keepTabContent === true; prefetch on idle) {
4911
+ <div
4912
+ [@state]="tab.selected && animate ? 'active' : 'inactive'"
4913
+ [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
4914
+ [tabIndex]="0"
4915
+ role="tabpanel"
4916
+ [id]="getTabPanelId(i)"
4917
+ [attr.aria-hidden]="!tab.selected"
4918
+ [attr.aria-labelledby]="getTabId(i)"
4919
+ [attr.aria-disabled]="tab.disabled"
4920
+ >
4921
+ <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef"></ng-template>
4922
+ </div>
4923
+ }
4924
+ }
4914
4925
  }
4915
- }
4916
4926
  </ng-template>
4917
4927
  @if (isScrollable) {
4918
4928
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-layout",
3
- "version": "21.3.0",
3
+ "version": "21.4.0-develop.1",
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",
@@ -50,7 +50,7 @@
50
50
  "package": {
51
51
  "productName": "Kendo UI for Angular",
52
52
  "productCode": "KENDOUIANGULAR",
53
- "publishDate": 1765467901,
53
+ "publishDate": 1765536305,
54
54
  "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"
55
55
  }
56
56
  },
@@ -60,17 +60,17 @@
60
60
  "@angular/core": "18 - 21",
61
61
  "@angular/platform-browser": "18 - 21",
62
62
  "@progress/kendo-licensing": "^1.7.0",
63
- "@progress/kendo-angular-common": "21.3.0",
64
- "@progress/kendo-angular-l10n": "21.3.0",
65
- "@progress/kendo-angular-progressbar": "21.3.0",
66
- "@progress/kendo-angular-icons": "21.3.0",
67
- "@progress/kendo-angular-buttons": "21.3.0",
68
- "@progress/kendo-angular-intl": "21.3.0",
63
+ "@progress/kendo-angular-common": "21.4.0-develop.1",
64
+ "@progress/kendo-angular-l10n": "21.4.0-develop.1",
65
+ "@progress/kendo-angular-progressbar": "21.4.0-develop.1",
66
+ "@progress/kendo-angular-icons": "21.4.0-develop.1",
67
+ "@progress/kendo-angular-buttons": "21.4.0-develop.1",
68
+ "@progress/kendo-angular-intl": "21.4.0-develop.1",
69
69
  "rxjs": "^6.5.3 || ^7.0.0"
70
70
  },
71
71
  "dependencies": {
72
72
  "tslib": "^2.3.1",
73
- "@progress/kendo-angular-schematics": "21.3.0",
73
+ "@progress/kendo-angular-schematics": "21.4.0-develop.1",
74
74
  "@progress/kendo-draggable": "^3.0.2"
75
75
  },
76
76
  "schematics": "./schematics/collection.json",
package/panelbar/panelbar-item.component.d.ts CHANGED
@@ -94,7 +94,7 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
94
94
  contentWrapper: ElementRef;
95
95
  contentHeight: string;
96
96
  contentOverflow: string;
97
- keepContent: boolean;
97
+ keepContent: boolean | 'loadOnDemand';
98
98
  childrenItems: Array<PanelBarItemComponent>;
99
99
  hasChildItems: boolean;
100
100
  hasItems: boolean;
package/panelbar/panelbar.component.d.ts CHANGED
@@ -67,8 +67,8 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
67
67
  *
68
68
  * @default false
69
69
  */
70
- get keepItemContent(): boolean;
71
- set keepItemContent(keepItemContent: boolean);
70
+ get keepItemContent(): boolean | 'loadOnDemand';
71
+ set keepItemContent(keepItemContent: boolean | 'loadOnDemand');
72
72
  /**
73
73
  * Sets the items of the PanelBar as an array of `PanelBarItemModel` instances
74
74
  * ([see example]({% slug items_panelbar %})).
package/panelbar/panelbar.service.d.ts CHANGED
@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
12
12
  */
13
13
  export declare class PanelBarService {
14
14
  children$: Observable<PanelBarItemComponent>;
15
- keepContent$: Observable<boolean>;
15
+ keepContent$: Observable<boolean | 'loadOnDemand'>;
16
16
  parent$: Observable<boolean>;
17
17
  pbId: number;
18
18
  animate: boolean;
@@ -21,7 +21,7 @@ export declare class PanelBarService {
21
21
  private childSource;
22
22
  private keepContentSource;
23
23
  private parentSource;
24
- onKeepContent(keepContent: boolean): void;
24
+ onKeepContent(keepContent: boolean | 'loadOnDemand'): void;
25
25
  onSelect(event: PanelBarItemComponent): void;
26
26
  onFocus(): void;
27
27
  onBlur(): void;
package/tabstrip/tabstrip.component.d.ts CHANGED
@@ -71,11 +71,13 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
71
71
  */
72
72
  tabPosition: TabPosition;
73
73
  /**
74
- * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)).
74
+ * When set to `true`, all tabs' content is eagerly rendered and kept in the DOM ([see example](slug:rendering_tabstrip)).
75
+ * When set to `false`, only the active tab's content is rendered. Inactive tabs' content is removed from the DOM.
76
+ * When set to `'loadOnDemand'`, the active tab's content is rendered initially. Inactive tabs' content is rendered only when the tab is activated for the first time and kept in the DOM afterwards.
75
77
  *
76
78
  * @default false
77
79
  */
78
- keepTabContent: boolean;
80
+ keepTabContent: boolean | 'loadOnDemand';
79
81
  /**
80
82
  * When set to `true`, renders a close button inside each tab.
81
83
  *