feat(ui5-flexible-column-layout): new component (#1867)

Introduce new component in the "fiori" package, called FlexibleColumnLayout. The component implements the master-detail-detail paradigm by displaying up to three pages in separate columns. There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.

Fixes: #1851

Author: ilhan007

packages/fiori/bundle.esm.js

@@ -7,6 +7,7 @@ import "./dist/Assets.js";
 import "./dist/features/CoPilotAnimation.js";
 
 // FIORI components
+import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
 import ProductSwitch from "./dist/ProductSwitch.js";
 import ProductSwitchItem from "./dist/ProductSwitchItem.js";
 import ShellBar from "./dist/ShellBar.js";

packages/fiori/src/FlexibleColumnLayout.hbs

@@ -0,0 +1,52 @@
+<div class="ui5-fcl-root">
+	<div
+		role="region"
+		class="{{classes.columns.start}}"
+		style="{{styles.columns.start}}"
+		aria-labelledby="{{_id}}-startColumnText"
+	>
+		<slot name="startColumn"></slot>
+	</div>
+
+	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.start}}">
+		<ui5-button
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+			icon="slim-arrow-right"
+			design="Transparent"
+			@click="{{startArrowClick}}"
+			style="{{styles.arrows.start}}"
+		></ui5-button>
+	</div>
+
+	<div
+		role="region"
+		class="{{classes.columns.middle}}"
+		style="{{styles.columns.middle}}"
+		aria-labelledby="{{_id}}-midColumnText"
+	>
+		<slot name="midColumn"></slot>
+	</div>
+
+	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.end}}">
+		<ui5-button
+			class="ui5-fcl-arrow ui5-fcl-arrow--end"
+			style="{{styles.arrows.end}}"
+			icon="slim-arrow-left"
+			design="Transparent"
+			@click="{{endArrowClick}}"
+		></ui5-button>
+	</div>
+
+	<div
+		role="region"
+		class="{{classes.columns.end}}"
+		style="{{styles.columns.end}}"
+		aria-labelledby="{{_id}}-endColumnText"
+	>
+		<slot name="endColumn"></slot>
+	</div>
+
+	<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
+	<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
+	<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
+</div>