@ui5/webcomponents-fiori 2.16.0-rc.2 → 2.16.0-rc.3

package/dist/FlexibleColumnLayout.d.ts

@@ -3,7 +3,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import type { PassiveEventListenerObject, AriaLandmarkRole } from "@ui5/webcomponents-base";
 import FCLLayout from "./types/FCLLayout.js";
-import type { LayoutConfiguration } from "./fcl-utils/FCLLayout.js";
 declare enum MEDIA {
     PHONE = "phone",
     TABLET = "tablet",
@@ -19,7 +18,19 @@ type SeparatorMovementSession = {
     cursorPositionX: number;
     tmpFCLLayout: FCLLayout;
 };
-type FlexibleColumnLayoutColumnLayout = Array<string | number>;
+type FlexibleColumnLayoutColumnLayout = Array<string | 0>;
+type LayoutConfiguration = {
+    "tablet"?: {
+        [layoutName in FCLLayout]?: {
+            layout: FlexibleColumnLayoutColumnLayout;
+        };
+    };
+    "desktop"?: {
+        [layoutName in FCLLayout]?: {
+            layout: FlexibleColumnLayoutColumnLayout;
+        };
+    };
+};
 type FlexibleColumnLayoutLayoutChangeEventDetail = {
     layout: `${FCLLayout}`;
     columnLayout: FlexibleColumnLayoutColumnLayout;
@@ -29,6 +40,11 @@ type FlexibleColumnLayoutLayoutChangeEventDetail = {
     separatorsUsed: boolean;
     resized: boolean;
 };
+type FlexibleColumnLayoutLayoutConfigurationChangeEventDetail = {
+    layout: `${FCLLayout}`;
+    media: `${MEDIA}`;
+    columnLayout: FlexibleColumnLayoutColumnLayout;
+};
 type FCLAccessibilityRoles = Extract<AriaLandmarkRole, "none" | "complementary" | "contentinfo" | "main" | "region">;
 type FCLAccessibilityAttributes = {
     startColumn?: {
@@ -52,14 +68,6 @@ type FCLAccessibilityAttributes = {
         name: string;
     };
 };
-type UserDefinedColumnLayouts = {
-    "tablet": {
-        [layoutName in FCLLayout]?: FlexibleColumnLayoutColumnLayout;
-    };
-    "desktop": {
-        [layoutName in FCLLayout]?: FlexibleColumnLayoutColumnLayout;
-    };
-};
 /**
  * @class
  *
@@ -112,6 +120,7 @@ type UserDefinedColumnLayouts = {
 declare class FlexibleColumnLayout extends UI5Element {
     eventDetails: {
         "layout-change": FlexibleColumnLayoutLayoutChangeEventDetail;
+        "layout-configuration-change": FlexibleColumnLayoutLayoutConfigurationChangeEventDetail;
     };
     /**
     * Defines the columns layout and their proportion.
@@ -158,6 +167,24 @@ declare class FlexibleColumnLayout extends UI5Element {
     */
     accessibilityAttributes: FCLAccessibilityAttributes;
     /**
+    * Allows to customize the column proportions per screen size and layout.
+    * If no custom proportion provided for a specific layout, the default will be used.
+    *
+    * **Notes:**
+    *
+    * - The proportions should be given in percentages. For example ["30%", "40%", "30%"], ["70%", "30%", 0], etc.
+    * - The proportions should add up to 100%.
+    * - Hidden columns are marked as "0px", e.g. ["0px", "70%", "30%"]. Specifying 0 or "0%" for hidden columns is also valid.
+    * - If the proportions do not match the layout (e.g. if provided proportions ["70%", "30%", "0px"] for "OneColumn" layout), then the default proportions will be used instead.
+    * - Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).
+    * - No custom configuration available for the phone screen size, as the default of 100% column width is always used there.
+    * @default {}
+    * @public
+    * @since 2.16.0
+    * @experimental
+    */
+    layoutsConfiguration: LayoutConfiguration;
+    /**
     * Defines the component width in px.
     * @default 0
     * @private
@@ -184,10 +211,19 @@ declare class FlexibleColumnLayout extends UI5Element {
     */
     _resizing: boolean;
     /**
-    * Allows the user to replace the whole layouts configuration
-    * @private
+     * This property is no longer used and is replaced by `layoutsConfiguration`.
+     * The property will be removed once all adopters migrate to `layoutsConfiguration`.
     */
-    _layoutsConfiguration?: LayoutConfiguration;
+    _layoutsConfiguration?: {
+        [device in MEDIA]: {
+            [layoutName in FCLLayout]: {
+                layout: Array<string>;
+                separators: Array<{
+                    visible: boolean;
+                }>;
+            };
+        };
+    };
     /**
     * Defines the content in the start column.
     * @public
@@ -210,7 +246,7 @@ declare class FlexibleColumnLayout extends UI5Element {
     onColumnCollapseAnimationEndRef: (e: TransitionEvent) => void;
     static i18nBundle: I18nBundle;
     _prevLayout: `${FCLLayout}` | null;
-    _userDefinedColumnLayouts: UserDefinedColumnLayouts;
+    _prevLayoutsConfiguration: LayoutConfiguration | null;
     _ontouchstart: PassiveEventListenerObject;
     separatorMovementSession?: SeparatorMovementSession | null;
     constructor();
@@ -222,14 +258,50 @@ declare class FlexibleColumnLayout extends UI5Element {
     handleResize(): void;
     updateLayout(): void;
     syncLayout(): void;
+    syncLayoutsConfiguration(): void;
     toggleColumns(): void;
     toggleColumn(column: string): void;
     expandColumn(columnDOM: HTMLElement, columnWidth: string | number): void;
     collapseColumn(columnDOM: HTMLElement): void;
     onColumnCollapseAnimationEnd: (e: Event) => void;
-    nextColumnLayout(layout: `${FCLLayout}`): FlexibleColumnLayoutColumnLayout;
+    nextColumnLayout(layout: `${FCLLayout}`): string[];
+    /**
+     * Gets custom column layout configuration if available and valid.
+     * Ensures all visible columns meet minimum width requirements.
+     * @param layout The FCL layout to get configuration for
+     * @returns Normalized column layout or undefined if invalid/unavailable
+     */
+    getCustomColumnLayout(layout: `${FCLLayout}`): string[] | undefined;
+    getDefaultColumnLayout(layout: `${FCLLayout}`): string[];
+    mediaAllowsCustomConfiguration(media: MEDIA): media is MEDIA.TABLET | MEDIA.DESKTOP;
+    /**
+     * Applies minimum width constraints to column layout configuration.
+     * Ensures all visible columns meet the minimum width requirement by transferring
+     * space from the wider columns to the undersized columns.
+     * @param columnLayout Original column layout (percentages or pixels)
+     * @returns Constraint-compliant column layout in same format as input
+     */
+    applyMinimumWidthConstraints(columnLayout: (string | 0)[]): string[];
+    /**
+     * Adjusts column widths to ensure minimum width constraints.
+     * Takes width from the widest columns to bring undersized columns up to minimum.
+     * @param pxWidths Array of column widths in pixels (modified in place)
+     */
+    adjustColumnsToMinimumWidth(pxWidths: number[]): number[];
+    getColumnProportionsAboveMinWidth(columnPxWidths: number[]): number[];
+    /**
+     * Helper that handles pixel conversion for column width operations.
+     * Converts input to pixels, applies the operation, then converts back to relative widths.
+     * @param columnLayout Column layout in mixed formats
+     * @param operation Function that operates on pixel widths
+     * @returns Column layout in percentage format
+     */
+    doWithPixelConversion(columnLayout: (string | 0)[], operation: (pxWidths: number[]) => number[]): string[];
+    isValidColumnLayout(columnLayout: (string | 0)[]): boolean;
+    verifyColumnWidthsMatchLayout(pxWidths: number[]): boolean;
     calcVisibleColumns(colLayout: FlexibleColumnLayoutColumnLayout): number;
     fireLayoutChange(separatorUsed: boolean, resized: boolean): void;
+    fireLayoutConfigurationChange(): void;
     onSeparatorPress(e: TouchEvent | MouseEvent): void;
     onSeparatorMove(e: TouchEvent | MouseEvent): void;
     private onSeparatorMoveEnd;
@@ -239,7 +311,8 @@ declare class FlexibleColumnLayout extends UI5Element {
         tmpFCLLayout: FCLLayout;
     };
     exitSeparatorMovementSession(): void;
-    saveUserDefinedColumnLayout(newLayout: FCLLayout, newColumnLayout: FlexibleColumnLayoutColumnLayout): void;
+    saveUserDefinedColumnLayout(newLayout: FCLLayout, newColumnLayout: string[]): void;
+    updateLayoutsConfiguration(layout: `${FCLLayout}`, columnLayout: string[]): void;
     private isSeparatorAheadOfCursor;
     calculateNewColumnWidth(columnToResize: typeof COLUMN.START | typeof COLUMN.END, widthDelta: number): number;
     moveSeparator(separator: HTMLElement, offsetX: number, fclLayoutBeforeMove: FCLLayout): FCLLayout;
@@ -293,9 +366,9 @@ declare class FlexibleColumnLayout extends UI5Element {
     * @public
     */
     get visibleColumns(): number;
-    get startColumnWidth(): string | number;
-    get midColumnWidth(): string | number;
-    get endColumnWidth(): string | number;
+    get startColumnWidth(): string | 0;
+    get midColumnWidth(): string | 0;
+    get endColumnWidth(): string | 0;
     get showStartSeparator(): boolean;
     get showEndSeparator(): boolean;
     get showStartSeparatorGrip(): boolean | undefined;
@@ -337,7 +410,6 @@ declare class FlexibleColumnLayout extends UI5Element {
     get accEndColumnRole(): FCLAccessibilityRoles | undefined;
     get accStartSeparatorRole(): "separator" | FCLAccessibilityRoles;
     get accEndSeparatorRole(): "separator" | FCLAccessibilityRoles;
-    get _effectiveLayoutsByMedia(): LayoutConfiguration;
     get _accAttributes(): {
         columns: {
             start: {
@@ -356,4 +428,4 @@ declare class FlexibleColumnLayout extends UI5Element {
     };
 }
 export default FlexibleColumnLayout;
-export type { MEDIA, FlexibleColumnLayoutLayoutChangeEventDetail, FCLAccessibilityAttributes, FlexibleColumnLayoutColumnLayout, };
+export type { MEDIA, FlexibleColumnLayoutLayoutChangeEventDetail, FlexibleColumnLayoutLayoutConfigurationChangeEventDetail, FCLAccessibilityAttributes, FlexibleColumnLayoutColumnLayout, LayoutConfiguration, };

package/dist/FlexibleColumnLayout.js

@@ -22,7 +22,7 @@ import "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isLeft, isRight, isLeftShift, isRightShift, isHome, isEnd, isEnter, isSpace, } from "@ui5/webcomponents-base/dist/Keys.js";
 import FCLLayout from "./types/FCLLayout.js";
-import { getLayoutsByMedia, getNextLayoutByArrowPress, } from "./fcl-utils/FCLLayout.js";
+import { getDefaultLayoutsByMedia, getNextLayoutByArrowPress, } from "./fcl-utils/FCLLayout.js";
 // Texts
 import { FCL_START_COLUMN_TXT, FCL_MIDDLE_COLUMN_TXT, FCL_END_COLUMN_TXT, FCL_START_SEPARATOR_TOOLTIP, FCL_END_SEPARATOR_TOOLTIP, } from "./generated/i18n/i18n-defaults.js";
 // Template
@@ -146,6 +146,24 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         */
         this.accessibilityAttributes = {};
         /**
+        * Allows to customize the column proportions per screen size and layout.
+        * If no custom proportion provided for a specific layout, the default will be used.
+        *
+        * **Notes:**
+        *
+        * - The proportions should be given in percentages. For example ["30%", "40%", "30%"], ["70%", "30%", 0], etc.
+        * - The proportions should add up to 100%.
+        * - Hidden columns are marked as "0px", e.g. ["0px", "70%", "30%"]. Specifying 0 or "0%" for hidden columns is also valid.
+        * - If the proportions do not match the layout (e.g. if provided proportions ["70%", "30%", "0px"] for "OneColumn" layout), then the default proportions will be used instead.
+        * - Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).
+        * - No custom configuration available for the phone screen size, as the default of 100% column width is always used there.
+        * @default {}
+        * @public
+        * @since 2.16.0
+        * @experimental
+        */
+        this.layoutsConfiguration = {};
+        /**
         * Defines the component width in px.
         * @default 0
         * @private
@@ -163,10 +181,6 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         * @private
         */
         this._resizing = false;
-        this._userDefinedColumnLayouts = {
-            tablet: {},
-            desktop: {},
-        };
         this.onColumnCollapseAnimationEnd = (e) => {
             const columnDOM = e.target;
             columnDOM.classList.add("ui5-fcl-column--hidden");
@@ -174,6 +188,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
             columnDOM.removeEventListener("transitionend", this.onColumnCollapseAnimationEndRef);
         };
         this._prevLayout = null;
+        this._prevLayoutsConfiguration = null;
         this.initialRendering = true;
         this._handleResize = this.handleResize.bind(this);
         this._onSeparatorMove = this.onSeparatorMove.bind(this);
@@ -201,6 +216,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
             this.handleInitialRendering();
             return;
         }
+        this.syncLayoutsConfiguration();
         this.syncLayout();
     }
     handleInitialRendering() {
@@ -233,6 +249,14 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
             this._prevLayout = this.layout;
         }
     }
+    syncLayoutsConfiguration() {
+        if (this._prevLayoutsConfiguration !== this.layoutsConfiguration) {
+            this._prevLayoutsConfiguration = this.layoutsConfiguration;
+            if (this.nextColumnLayout(this.layout).join() !== this._columnLayout?.join() && !this.separatorMovementSession) {
+                this.updateLayout();
+            }
+        }
+    }
     toggleColumns() {
         this.toggleColumn("start");
         this.toggleColumn("mid");
@@ -292,19 +316,154 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         }
     }
     nextColumnLayout(layout) {
-        let userDefinedLayout;
-        if (this.media !== MEDIA.PHONE) {
-            userDefinedLayout = this._userDefinedColumnLayouts[this.media][layout];
+        return this.getCustomColumnLayout(layout) || this.getDefaultColumnLayout(layout);
+    }
+    /**
+     * Gets custom column layout configuration if available and valid.
+     * Ensures all visible columns meet minimum width requirements.
+     * @param layout The FCL layout to get configuration for
+     * @returns Normalized column layout or undefined if invalid/unavailable
+     */
+    getCustomColumnLayout(layout) {
+        // Only allow custom configuration for tablet and desktop (not phone)
+        if (!this.mediaAllowsCustomConfiguration(this.media)) {
+            return undefined;
+        }
+        const customLayout = this.layoutsConfiguration[this.media]?.[layout]?.layout;
+        if (!customLayout) {
+            return undefined;
         }
-        return userDefinedLayout || this._effectiveLayoutsByMedia[this.media][layout].layout;
+        // ensure visible columns are above min-width given the current fcl total width
+        const constraintCompliantLayout = this.applyMinimumWidthConstraints(customLayout);
+        if (this.isValidColumnLayout(constraintCompliantLayout)) { // satisfy layout-specific contraints
+            return constraintCompliantLayout;
+        }
+    }
+    getDefaultColumnLayout(layout) {
+        return getDefaultLayoutsByMedia()[this.media][layout].layout;
+    }
+    mediaAllowsCustomConfiguration(media) {
+        return media !== MEDIA.PHONE;
+    }
+    /**
+     * Applies minimum width constraints to column layout configuration.
+     * Ensures all visible columns meet the minimum width requirement by transferring
+     * space from the wider columns to the undersized columns.
+     * @param columnLayout Original column layout (percentages or pixels)
+     * @returns Constraint-compliant column layout in same format as input
+     */
+    applyMinimumWidthConstraints(columnLayout) {
+        return this.doWithPixelConversion(columnLayout, pxWidths => {
+            return this.adjustColumnsToMinimumWidth(pxWidths);
+        });
+    }
+    /**
+     * Adjusts column widths to ensure minimum width constraints.
+     * Takes width from the widest columns to bring undersized columns up to minimum.
+     * @param pxWidths Array of column widths in pixels (modified in place)
+     */
+    adjustColumnsToMinimumWidth(pxWidths) {
+        const adjustedWidths = [...pxWidths];
+        let totalDeficit = 0;
+        for (let i = 0; i < adjustedWidths.length; i++) {
+            const width = adjustedWidths[i];
+            const isBelowMinimum = Math.ceil(width) < COLUMN_MIN_WIDTH; // ceil to avoid floating point precision issues
+            if (!this._isColumnHidden(width) && isBelowMinimum) {
+                totalDeficit += COLUMN_MIN_WIDTH - width;
+                adjustedWidths[i] = COLUMN_MIN_WIDTH;
+            }
+        }
+        if (totalDeficit === 0) {
+            return adjustedWidths; // no adjustments were needed
+        }
+        // Create proportions for redistribution of the deficit based on available space above COLUMN_MIN_WIDTH
+        const columnProportions = this.getColumnProportionsAboveMinWidth(pxWidths);
+        // Redistribute the deficit proportionally among columns that can contribute
+        for (let i = 0; i < adjustedWidths.length; i++) {
+            const isVisible = adjustedWidths[i] > 0;
+            if (isVisible && columnProportions[i] > 0) {
+                adjustedWidths[i] -= totalDeficit * columnProportions[i];
+            }
+        }
+        return adjustedWidths;
+    }
+    getColumnProportionsAboveMinWidth(columnPxWidths) {
+        const widthsAboveMinWidth = columnPxWidths.map(width => {
+            if (width > COLUMN_MIN_WIDTH) {
+                return width - COLUMN_MIN_WIDTH;
+            }
+            return 0;
+        });
+        const total = widthsAboveMinWidth.reduce((sum, width) => sum + width, 0);
+        if (total === 0) {
+            return widthsAboveMinWidth;
+        }
+        return widthsAboveMinWidth.map(width => width / total);
+    }
+    /**
+     * Helper that handles pixel conversion for column width operations.
+     * Converts input to pixels, applies the operation, then converts back to relative widths.
+     * @param columnLayout Column layout in mixed formats
+     * @param operation Function that operates on pixel widths
+     * @returns Column layout in percentage format
+     */
+    doWithPixelConversion(columnLayout, operation) {
+        // Convert to pixels for calculations
+        const pxWidths = columnLayout.map(width => this.convertColumnWidthToPixels(width));
+        // Apply the operation
+        const adjustedPxWidths = operation(pxWidths);
+        // Convert back to percentage-based widths
+        return adjustedPxWidths.map(width => this.convertToRelativeColumnWidth(width));
+    }
+    isValidColumnLayout(columnLayout) {
+        const pxWidths = columnLayout?.map(w => this.convertColumnWidthToPixels(w));
+        const totalWidth = pxWidths.reduce((sum, i) => sum + i, 0);
+        if (Math.round(totalWidth) !== Math.round(this._availableWidthForColumns)) {
+            return false;
+        }
+        return this.verifyColumnWidthsMatchLayout(pxWidths);
+    }
+    verifyColumnWidthsMatchLayout(pxWidths) {
+        const columnWidths = {
+            start: pxWidths[0],
+            mid: pxWidths[1],
+            end: pxWidths[2],
+        }, startWidth = columnWidths.start, startPercentWidth = parseInt(this.convertToRelativeColumnWidth(startWidth));
+        switch (this.layout) {
+            case FCLLayout.TwoColumnsStartExpanded: {
+                return columnWidths.start >= columnWidths.mid;
+            }
+            case FCLLayout.TwoColumnsMidExpanded: {
+                return columnWidths.mid > columnWidths.start;
+            }
+            case FCLLayout.ThreeColumnsEndExpanded: {
+                return (columnWidths.end > columnWidths.mid) && (startPercentWidth < 33);
+            }
+            case FCLLayout.ThreeColumnsStartExpandedEndHidden: {
+                return (columnWidths.start >= columnWidths.mid) && columnWidths.end === 0;
+            }
+            case FCLLayout.ThreeColumnsMidExpanded: {
+                return (columnWidths.mid >= columnWidths.end)
+                    && ((this.media === MEDIA.DESKTOP && startPercentWidth < 33) // desktop
+                        || (this.media === MEDIA.TABLET && startPercentWidth === 0)); // tablet
+            }
+            case FCLLayout.ThreeColumnsMidExpandedEndHidden: {
+                return (columnWidths.mid > columnWidths.start)
+                    && columnWidths.end === 0
+                    && ((this.media === MEDIA.DESKTOP && startPercentWidth >= 33)
+                        || (this.media === MEDIA.TABLET && startWidth >= COLUMN_MIN_WIDTH));
+            }
+        }
+        return false;
     }
     calcVisibleColumns(colLayout) {
         return colLayout.filter(colWidth => !this._isColumnHidden(colWidth)).length;
     }
     fireLayoutChange(separatorUsed, resized) {
+        const columnLayout = [...this._columnLayout]; // do not leak reference to the private _columnLayout array to prevent apps modifying its content
         this.fireDecoratorEvent("layout-change", {
             layout: this.layout,
-            columnLayout: this._columnLayout,
+            columnLayout,
             startColumnVisible: this.startColumnVisible,
             midColumnVisible: this.midColumnVisible,
             endColumnVisible: this.endColumnVisible,
@@ -312,6 +471,14 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
             resized,
         });
     }
+    fireLayoutConfigurationChange() {
+        const columnLayout = [...this._columnLayout]; // do not leak reference to the private _columnLayout array to prevent apps modifying its content
+        this.fireDecoratorEvent("layout-configuration-change", {
+            layout: this.layout,
+            media: this.media,
+            columnLayout,
+        });
+    }
     onSeparatorPress(e) {
         if (e.target === this.startArrowDOM) {
             return;
@@ -353,7 +520,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
             return;
         }
         const newLayout = this.separatorMovementSession.tmpFCLLayout;
-        const newColumnLayout = this._columnLayout;
+        const newColumnLayout = [...this._columnLayout]; // obtain the values only
         this.saveUserDefinedColumnLayout(newLayout, newColumnLayout);
         this.exitSeparatorMovementSession();
     }
@@ -377,12 +544,22 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         this.separatorMovementSession = null;
     }
     saveUserDefinedColumnLayout(newLayout, newColumnLayout) {
-        const media = this.media;
-        this._userDefinedColumnLayouts[media][newLayout] = newColumnLayout;
+        const oldColumnLayout = this.getCustomColumnLayout(newLayout);
         if (this.layout !== newLayout) {
             this.layout = newLayout;
             this.fireLayoutChange(true, false);
         }
+        if (oldColumnLayout?.join() !== newColumnLayout.join()) { // compare arrays' content
+            this.updateLayoutsConfiguration(newLayout, newColumnLayout);
+            this.fireLayoutConfigurationChange();
+        }
+    }
+    updateLayoutsConfiguration(layout, columnLayout) {
+        if (this.mediaAllowsCustomConfiguration(this.media)) {
+            this.layoutsConfiguration[this.media] ??= {};
+            this.layoutsConfiguration[this.media][layout] ??= { layout: [] };
+            this.layoutsConfiguration[this.media][layout].layout = columnLayout;
+        }
     }
     isSeparatorAheadOfCursor(cursorX, separatorX, isForwardMove) {
         if (isForwardMove) {
@@ -804,7 +981,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         return this.shadowRoot.querySelector(".ui5-fcl-arrow--start");
     }
     get effectiveSeparatorsInfo() {
-        return this._effectiveLayoutsByMedia[this.media][this.effectiveLayout].separators;
+        return getDefaultLayoutsByMedia()[this.media][this.effectiveLayout].separators;
     }
     get effectiveLayout() {
         return this.separatorMovementSession?.tmpFCLLayout || this.layout;
@@ -898,9 +1075,6 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
     get accEndSeparatorRole() {
         return this.accessibilityAttributes.endSeparator?.role || "separator";
     }
-    get _effectiveLayoutsByMedia() {
-        return this._layoutsConfiguration || getLayoutsByMedia();
-    }
     get _accAttributes() {
         return {
             columns: {
@@ -929,6 +1103,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], FlexibleColumnLayout.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property({ type: Object })
+], FlexibleColumnLayout.prototype, "layoutsConfiguration", void 0);
 __decorate([
     property({ type: Number })
 ], FlexibleColumnLayout.prototype, "_width", void 0);
@@ -981,6 +1158,19 @@ FlexibleColumnLayout = FlexibleColumnLayout_1 = __decorate([
     event("layout-change", {
         bubbles: true,
     })
+    /**
+     * Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.
+     * @param {FCLLayout} layout The current layout
+     * @param {MEDIA} media The current media type
+     * @param {array} columnLayout The effective column layout, f.e ["67%", "33%", "0px"]
+     * @public
+     * @since 2.16.0
+     * @experimental
+     */
+    ,
+    event("layout-configuration-change", {
+        bubbles: true,
+    })
 ], FlexibleColumnLayout);
 FlexibleColumnLayout.define();
 export default FlexibleColumnLayout;