@progress/kendo-angular-layout 20.1.0-develop.9 → 20.1.0

package/esm2022/expansionpanel/expansionpanel.component.mjs

@@ -23,6 +23,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/animations";
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
+let incrementingId = 0;
 /**
  * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
  *
@@ -164,6 +165,7 @@ export class ExpansionPanelComponent {
     _expanded = false;
     _svgExpandIcon = chevronDownIcon;
     _svgCollapseIcon = chevronUpIcon;
+    nextId = incrementingId++;
     constructor(renderer, hostElement, ngZone, localizationService, builder) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -248,6 +250,12 @@ export class ExpansionPanelComponent {
             this.emitExpandCollapseEvent();
         }
     }
+    /**
+     * @hidden
+     */
+    get contentWrapperId() {
+        return `k-expansion-panel-content-wrapper-${this.nextId}`;
+    }
     /**
      * @hidden
      */
@@ -367,7 +375,7 @@ export class ExpansionPanelComponent {
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
             tabindex="0"
-            [attr.aria-controls]="title"
+            [attr.aria-controls]="contentWrapperId"
             (click)="onHeaderClick($event)"
         >
             <ng-container *ngIf="!titleTemplate">
@@ -390,7 +398,7 @@ export class ExpansionPanelComponent {
                 </kendo-icon-wrapper>
             </span>
         </div>
-        <div #content [id]="title" class="k-expander-content-wrapper">
+        <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
             <div class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
@@ -418,7 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
             tabindex="0"
-            [attr.aria-controls]="title"
+            [attr.aria-controls]="contentWrapperId"
             (click)="onHeaderClick($event)"
         >
             <ng-container *ngIf="!titleTemplate">
@@ -441,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </kendo-icon-wrapper>
             </span>
         </div>
-        <div #content [id]="title" class="k-expander-content-wrapper">
+        <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
             <div class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759490804,
-    version: '20.1.0-develop.9',
+    publishDate: 1761117193,
+    version: '20.1.0',
     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/esm2022/splitter/splitter-pane.component.mjs

@@ -45,8 +45,11 @@ export class SplitterPaneComponent {
      */
     set size(newSize) {
         this._size = newSize;
-        this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
-        this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
+        // Only set flex-basis if the pane is not collapsed
+        if (!this._collapsed) {
+            this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
+            this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
+        }
         this.setStaticPaneClass();
     }
     get size() {
@@ -105,7 +108,34 @@ export class SplitterPaneComponent {
      *
      * @default false
      */
-    collapsed = false;
+    set collapsed(value) {
+        const hasChanged = this._collapsed !== value;
+        this._collapsed = value;
+        if (hasChanged && this.nativeElement) {
+            if (this._collapsed) {
+                // When collapsing, clear the flex-basis to allow other panes to expand
+                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', '0');
+                this.renderer.setStyle(this.nativeElement, 'flex-basis', '0');
+            }
+            else if (this._size) {
+                // When expanding, restore the size if it was set
+                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', this._size);
+                this.renderer.setStyle(this.nativeElement, 'flex-basis', this._size);
+            }
+            // Trigger the same forceExpand logic that tryToggle does
+            // This ensures remaining panes expand when a pane is collapsed
+            if (this.splitterService?.panes) {
+                const notCollapsed = this.splitterService.panes.filter(p => !p.collapsed);
+                const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
+                notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+                    pane.forceExpand = allHaveFixedSize;
+                });
+            }
+        }
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
     /**
      * @hidden
      */
@@ -159,6 +189,7 @@ export class SplitterPaneComponent {
     _size;
     _order;
     _splitterBarAttributes;
+    _collapsed = false;
     constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;

package/expansionpanel/expansionpanel.component.d.ts

@@ -121,6 +121,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     private _expanded;
     private _svgExpandIcon;
     private _svgCollapseIcon;
+    private nextId;
     constructor(renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, localizationService: LocalizationService, builder: AnimationBuilder);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -141,6 +142,10 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      * @hidden
      */
     onHeaderAction(): void;
+    /**
+     * @hidden
+     */
+    get contentWrapperId(): string;
     /**
      * @hidden
      */

package/fesm2022/progress-kendo-angular-layout.mjs

@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759490804,
-    version: '20.1.0-develop.9',
+    publishDate: 1761117193,
+    version: '20.1.0',
     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'
 };
 
@@ -2011,8 +2011,11 @@ class SplitterPaneComponent {
      */
     set size(newSize) {
         this._size = newSize;
-        this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
-        this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
+        // Only set flex-basis if the pane is not collapsed
+        if (!this._collapsed) {
+            this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
+            this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
+        }
         this.setStaticPaneClass();
     }
     get size() {
@@ -2071,7 +2074,34 @@ class SplitterPaneComponent {
      *
      * @default false
      */
-    collapsed = false;
+    set collapsed(value) {
+        const hasChanged = this._collapsed !== value;
+        this._collapsed = value;
+        if (hasChanged && this.nativeElement) {
+            if (this._collapsed) {
+                // When collapsing, clear the flex-basis to allow other panes to expand
+                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', '0');
+                this.renderer.setStyle(this.nativeElement, 'flex-basis', '0');
+            }
+            else if (this._size) {
+                // When expanding, restore the size if it was set
+                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', this._size);
+                this.renderer.setStyle(this.nativeElement, 'flex-basis', this._size);
+            }
+            // Trigger the same forceExpand logic that tryToggle does
+            // This ensures remaining panes expand when a pane is collapsed
+            if (this.splitterService?.panes) {
+                const notCollapsed = this.splitterService.panes.filter(p => !p.collapsed);
+                const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
+                notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+                    pane.forceExpand = allHaveFixedSize;
+                });
+            }
+        }
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
     /**
      * @hidden
      */
@@ -2125,6 +2155,7 @@ class SplitterPaneComponent {
     _size;
     _order;
     _splitterBarAttributes;
+    _collapsed = false;
     constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;
@@ -8722,6 +8753,7 @@ class ExpansionPanelActionEvent extends PreventableEvent$1 {
 
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
+let incrementingId = 0;
 /**
  * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
  *
@@ -8863,6 +8895,7 @@ class ExpansionPanelComponent {
     _expanded = false;
     _svgExpandIcon = chevronDownIcon;
     _svgCollapseIcon = chevronUpIcon;
+    nextId = incrementingId++;
     constructor(renderer, hostElement, ngZone, localizationService, builder) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -8947,6 +8980,12 @@ class ExpansionPanelComponent {
             this.emitExpandCollapseEvent();
         }
     }
+    /**
+     * @hidden
+     */
+    get contentWrapperId() {
+        return `k-expansion-panel-content-wrapper-${this.nextId}`;
+    }
     /**
      * @hidden
      */
@@ -9066,7 +9105,7 @@ class ExpansionPanelComponent {
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
             tabindex="0"
-            [attr.aria-controls]="title"
+            [attr.aria-controls]="contentWrapperId"
             (click)="onHeaderClick($event)"
         >
             <ng-container *ngIf="!titleTemplate">
@@ -9089,7 +9128,7 @@ class ExpansionPanelComponent {
                 </kendo-icon-wrapper>
             </span>
         </div>
-        <div #content [id]="title" class="k-expander-content-wrapper">
+        <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
             <div class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>
@@ -9117,7 +9156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-expanded]="expanded && !disabled"
             role="button"
             tabindex="0"
-            [attr.aria-controls]="title"
+            [attr.aria-controls]="contentWrapperId"
             (click)="onHeaderClick($event)"
         >
             <ng-container *ngIf="!titleTemplate">
@@ -9140,7 +9179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </kendo-icon-wrapper>
             </span>
         </div>
-        <div #content [id]="title" class="k-expander-content-wrapper">
+        <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
             <div class="k-expander-content" [attr.aria-hidden]="!expanded">
                 <ng-content></ng-content>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "20.1.0-develop.9",
+  "version": "20.1.0",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -50,7 +50,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1759490804,
+      "publishDate": 1761117193,
       "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"
     }
   },
@@ -60,17 +60,17 @@
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "20.1.0-develop.9",
-    "@progress/kendo-angular-l10n": "20.1.0-develop.9",
-    "@progress/kendo-angular-progressbar": "20.1.0-develop.9",
-    "@progress/kendo-angular-icons": "20.1.0-develop.9",
-    "@progress/kendo-angular-buttons": "20.1.0-develop.9",
-    "@progress/kendo-angular-intl": "20.1.0-develop.9",
+    "@progress/kendo-angular-common": "20.1.0",
+    "@progress/kendo-angular-l10n": "20.1.0",
+    "@progress/kendo-angular-progressbar": "20.1.0",
+    "@progress/kendo-angular-icons": "20.1.0",
+    "@progress/kendo-angular-buttons": "20.1.0",
+    "@progress/kendo-angular-intl": "20.1.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.1.0-develop.9",
+    "@progress/kendo-angular-schematics": "20.1.0",
     "@progress/kendo-draggable": "^3.0.2",
     "node-html-parser": "^7.0.1"
   },

package/splitter/splitter-pane.component.d.ts

@@ -87,7 +87,8 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
      *
      * @default false
      */
-    collapsed: boolean;
+    set collapsed(value: boolean);
+    get collapsed(): boolean;
     /**
      * @hidden
      */
@@ -128,6 +129,7 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
     private _size;
     private _order;
     private _splitterBarAttributes;
+    private _collapsed;
     constructor(element: ElementRef<HTMLElement>, renderer: Renderer2, cdr: ChangeDetectorRef, splitterService: SplitterService);
     ngAfterViewChecked(): void;
     ngOnChanges(changes: SimpleChanges): void;