@@ -66,211 +74,53 @@
diff --git a/packages/fiori/test/pages/styles/FCL.css b/packages/fiori/test/pages/styles/FCL.css
index 5e79a3bb053b..e700c028bd34 100644
--- a/packages/fiori/test/pages/styles/FCL.css
+++ b/packages/fiori/test/pages/styles/FCL.css
@@ -34,6 +34,15 @@ html, body {
flex-wrap: wrap;
}
+.status {
+ display: grid;
+ grid-template-columns: max-content auto;
+}
+
+.status [ui5-label] {
+ align-self: center;;
+}
+
.fcl1auto {
background-color: var(--sapBackgroundColor);
}
diff --git a/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx b/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx
index b90c756cac12..384236dd1f0c 100644
--- a/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx
+++ b/packages/website/docs/_components_pages/fiori/FlexibleColumnLayout.mdx
@@ -1,8 +1,16 @@
import Basic from "../../_samples/fiori/FlexibleColumnLayout/Basic/Basic.md";
+import LayoutsConfiguration from "../../_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/LayoutsConfiguration.md";
<%COMPONENT_OVERVIEW%>
## Basic Sample
-<%COMPONENT_METADATA%>
\ No newline at end of file
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### LayoutsConfiguration
+The FlexibleColumnLayout supports customization of the column sizes within the limits of the current layout.
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/LayoutsConfiguration.md b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/LayoutsConfiguration.md
new file mode 100644
index 000000000000..0ac936771661
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/LayoutsConfiguration.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
+
+
diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.css b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.css
new file mode 100644
index 000000000000..80eb9664461d
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.css
@@ -0,0 +1,54 @@
+.layout-grid {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto auto;
+ gap: 0.5rem 1rem;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.layout-grid ui5-label:first-child,
+.layout-grid ui5-label:nth-child(3) {
+ text-align: right;
+ justify-self: end;
+}
+
+.fcl {
+ height: 600px;
+}
+
+.col {
+ height: 100%;
+}
+
+.colHeader {
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid var(--sapList_BorderColor);
+}
+
+.colSubHeader {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.configurationInfo {
+ color: var(--sapInformativeColor);
+}
+
+.product-details {
+ padding: 1rem;
+}
+
+.product-info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.product-info ui5-label {
+ font-weight: bold;
+ margin-top: 0.5rem;
+}
diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.js b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.js
new file mode 100644
index 000000000000..c7b3b96dd070
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/main.js
@@ -0,0 +1,205 @@
+import "@ui5/webcomponents/dist/Select.js";
+import "@ui5/webcomponents/dist/Option.js";
+import "@ui5/webcomponents/dist/Label.js";
+import "@ui5/webcomponents/dist/List.js";
+import "@ui5/webcomponents/dist/ListItemStandard.js";
+import "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+fcl.layoutsConfiguration = {
+ desktop: {
+ "TwoColumnsStartExpanded": {
+ layout: ["80%", "20%", 0],
+ },
+ "TwoColumnsMidExpanded": {
+ layout: ["20%", "80%", 0],
+ },
+ "ThreeColumnsMidExpanded": {
+ layout: ["20%", "50%", "30%"],
+ },
+ "ThreeColumnsEndExpanded": {
+ layout: ["15%", "15%", "70%"],
+ },
+ "ThreeColumnsStartExpandedEndHidden": {
+ layout: ["70%", "30%", 0],
+ },
+ "ThreeColumnsMidExpandedEndHidden": {
+ layout: ["20%", "80%", 0],
+ },
+ },
+ tablet: {
+ "TwoColumnsStartExpanded": {
+ layout: ["60%", "40%", 0],
+ },
+ "TwoColumnsMidExpanded": {
+ layout: ["40%", "60%", 0],
+ },
+ "ThreeColumnsMidExpanded": {
+ layout: [0, "60%", "40%"],
+ },
+ "ThreeColumnsEndExpanded": {
+ layout: [0, "40%", "60%"],
+ },
+ "ThreeColumnsStartExpandedEndHidden": {
+ layout: ["60%", "40%", 0],
+ },
+ "ThreeColumnsMidExpandedEndHidden": {
+ layout: ["40%", "60%", 0],
+ },
+ },
+};
+
+fcl.addEventListener("layout-configuration-change", (e) => {
+ displayCustomLayoutConfigurationInfo();
+});
+
+fcl.addEventListener("layout-change", (e) => {
+ selectLayout.value = e.detail.layout;
+});
+
+selectLayout.addEventListener("ui5-change", (e) => {
+ fcl.layout = e.detail.selectedOption.textContent;
+ displayCustomLayoutConfigurationInfo();
+});
+
+function displayCustomLayoutConfigurationInfo() {
+ const configurationPerMedia = fcl.layoutsConfiguration[fcl.media];
+ const layoutConfiguration = configurationPerMedia ? configurationPerMedia[fcl.layout] : undefined;
+ if (layoutConfiguration) {
+ configurationInfo.innerText = `[${layoutConfiguration.layout.join(", ")}]`;
+ } else {
+ configurationInfo.innerText = `none`;
+ }
+}
+
+// Sample data for navigation
+const categoryData = {
+ electronics: [
+ { id: "laptop", name: "Laptop", description: "High-performance laptop with 16GB RAM and SSD storage. Perfect for work and gaming." },
+ { id: "smartphone", name: "Smartphone", description: "Latest smartphone with advanced camera system and long battery life." },
+ { id: "tablet", name: "Tablet", description: "Lightweight tablet with high-resolution display, ideal for reading and media consumption." }
+ ],
+ clothing: [
+ { id: "jeans", name: "Jeans", description: "Premium denim jeans with comfortable fit and durable construction." },
+ { id: "shirt", name: "Shirt", description: "Cotton shirt with modern cut and breathable fabric, perfect for any occasion." },
+ { id: "jacket", name: "Jacket", description: "Stylish jacket with weather-resistant materials and multiple pockets." }
+ ],
+ books: [
+ { id: "novel", name: "Novel", description: "Bestselling fiction novel with compelling characters and engaging plot." },
+ { id: "cookbook", name: "Cookbook", description: "Collection of delicious recipes from around the world with step-by-step instructions." },
+ { id: "biography", name: "Biography", description: "Inspiring life story of a remarkable person who changed the world." }
+ ],
+ home: [
+ { id: "chair", name: "Chair", description: "Ergonomic office chair with lumbar support and adjustable height." },
+ { id: "lamp", name: "Lamp", description: "Modern LED lamp with adjustable brightness and energy-efficient design." },
+ { id: "plant", name: "Plant", description: "Low-maintenance indoor plant that purifies air and adds natural beauty." }
+ ],
+ sports: [
+ { id: "shoes", name: "Running Shoes", description: "Professional running shoes with advanced cushioning and lightweight design." },
+ { id: "ball", name: "Football", description: "Official size football with durable leather construction and excellent grip." },
+ { id: "racket", name: "Tennis Racket", description: "Professional tennis racket with carbon fiber frame and comfortable grip." }
+ ]
+};
+
+// Navigation functionality
+const categoriesList = document.getElementById("categoriesList");
+const productsList = document.getElementById("productsList");
+const categoryTitle = document.getElementById("categoryTitle");
+const productTitle = document.getElementById("productTitle");
+const productDetails = document.getElementById("productDetails");
+const closeEndColumn = document.getElementById("closeEndColumn");
+const productDetailsTemplate = document.getElementById("productDetailsTemplate");
+
+// Helper function to create product details from template
+function createProductDetailsFromTemplate(product, category) {
+ // Clone the template content
+ const templateContent = productDetailsTemplate.content.cloneNode(true);
+
+ // Populate the template with product data
+ templateContent.getElementById("productName").textContent = product.name;
+ templateContent.getElementById("productDescription").textContent = product.description;
+ templateContent.getElementById("productCategory").textContent = category.charAt(0).toUpperCase() + category.slice(1);
+ templateContent.getElementById("productId").textContent = product.id;
+
+ return templateContent;
+}
+
+// Helper function to clear product details to initial state
+function clearProductDetails() {
+ productDetails.innerHTML = "";
+ const textElement = document.createElement("ui5-text");
+ textElement.textContent = "Select a product to view details";
+ productDetails.appendChild(textElement);
+}
+
+// Handle category selection
+categoriesList.addEventListener("ui5-item-click", (e) => {
+ const category = e.detail.item.dataset.category;
+ const categoryName = e.detail.item.textContent;
+
+ // Update middle column
+ categoryTitle.textContent = categoryName;
+ productsList.innerHTML = "";
+
+ // Populate products list
+ categoryData[category].forEach(product => {
+ const li = document.createElement("ui5-li");
+ li.textContent = product.name;
+ li.dataset.productId = product.id;
+ li.dataset.category = category;
+ li.setAttribute("icon", "slim-arrow-right");
+ li.setAttribute("icon-end", "");
+ productsList.appendChild(li);
+ });
+
+ productsList.style.display = "block";
+
+ // Clear product details
+ clearProductDetails();
+ productTitle.textContent = "Product Details";
+
+ // Navigate to two column layout
+ fcl.layout = "TwoColumnsMidExpanded";
+ selectLayout.value = "TwoColumnsMidExpanded";
+ displayCustomLayoutConfigurationInfo();
+});
+
+// Handle product selection
+productsList.addEventListener("ui5-item-click", (e) => {
+ const productId = e.detail.item.dataset.productId;
+ const category = e.detail.item.dataset.category;
+
+ // Find product data
+ const product = categoryData[category].find(p => p.id === productId);
+
+ if (product) {
+ // Update end column
+ productTitle.textContent = product.name;
+
+ // Clear existing content and add new content from template
+ productDetails.innerHTML = "";
+ const productDetailsContent = createProductDetailsFromTemplate(product, category);
+ productDetails.appendChild(productDetailsContent);
+
+ // Navigate to three column layout
+ fcl.layout = "ThreeColumnsMidExpanded";
+ selectLayout.value = "ThreeColumnsMidExpanded";
+ displayCustomLayoutConfigurationInfo();
+ }
+});
+
+// Handle close button in end column
+closeEndColumn.addEventListener("click", () => {
+ // Clear product details
+ clearProductDetails();
+ productTitle.textContent = "Product Details";
+
+ // Navigate back to two column layout
+ fcl.layout = "TwoColumnsMidExpanded";
+ selectLayout.value = "TwoColumnsMidExpanded";
+ displayCustomLayoutConfigurationInfo();
+});
diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/sample.html b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/sample.html
new file mode 100644
index 000000000000..3d5a599a2d49
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/LayoutsConfiguration/sample.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+ Current layout
+
+ OneColumn
+ TwoColumnsStartExpanded
+ TwoColumnsMidExpanded
+ ThreeColumnsMidExpanded
+ ThreeColumnsEndExpanded
+ ThreeColumnsStartExpandedEndHidden
+ ThreeColumnsMidExpandedEndHidden
+
+ Custom configuration for current layout
+ none
+
+
+
+
+
+ Electronics
+ Clothing
+ Books
+ Home & Garden
+ Sports
+
+
+
+
+
+
+
+
+
+
+ Select a product to view details
+
+
+
+
+
+ Category
+
+
+ Product ID
+
+
+
+
+
+
+
+
+
+