@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/dist/FlexibleColumnLayout.js

@@ -3,10 +3,9 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
@@ -39,12 +38,13 @@ import FlexibleColumnLayoutCss from "./generated/themes/FlexibleColumnLayout.css
  */
 const metadata = {
 	tag: "ui5-flexible-column-layout",
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ {
 		/**
 		 * Defines the columns layout and their proportion.
 		 * <br><br>
-		 * <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 900px,
-		 * two columns between 900px and 1280px and three columns for sizes bigger than 1280px.
+		 * <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 599px,
+		 * two columns between 599px and 1023px and three columns for sizes bigger than 1023px.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -77,11 +77,52 @@ const metadata = {
 		* @type {boolean}
 		* @defaultvalue false
 		* @public
+		* @since 1.0.0-rc.15
 		*/
-		noArrows: {
+		hideArrows: {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts for even further customization.
+		 *
+		 * It supports the following fields:
+		 *  - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region
+		 *  - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region
+		 *  - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region
+		 *  - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left
+		 *  - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right
+		 *  - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left
+		 *  - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right
+		 *  - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code>
+		 *  - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.0.0-rc.11
+		 */
+		accessibilityTexts: {
+			type: Object,
+		},
+
+		/**
+		 * An object of strings that defines additional accessibility roles for further customization.
+		 *
+		 * It supports the following fields:
+		 *  - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code>
+		 *  - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns)
+		 *  - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code>
+		 *  - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns)
+		 *  - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibilityRoles: {
+			type: Object,
+		},
+
 		/**
 		* Defines the component width in px.
 		*
@@ -168,13 +209,13 @@ const metadata = {
 		 * Fired when the layout changes via user interaction by clicking the arrows
 		 * or by changing the component size due to resizing.
 		 *
-		 * @param {FCLLayout} layout the current layout
-		 * @param {Array} columnLayout the effective column layout, f.e [67%, 33%, 0]
-		 * @param {boolean} startColumnVisible indicates if the start column is currently visible
-		 * @param {boolean} midColumnVisible indicates if the middle column is currently visible
-		 * @param {boolean} endColumnVisible indicates if the end column is currently visible
-		 * @param {boolean} arrowsUsed indicates if the layout is changed via the arrows
-		 * @param {boolean} resize indicates if the layout is changed via resizing
+		 * @param {FCLLayout} layout The current layout
+		 * @param {Array} columnLayout The effective column layout, f.e [67%, 33%, 0]
+		 * @param {boolean} startColumnVisible Indicates if the start column is currently visible
+		 * @param {boolean} midColumnVisible Indicates if the middle column is currently visible
+		 * @param {boolean} endColumnVisible Indicates if the end column is currently visible
+		 * @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows
+		 * @param {boolean} resize Indicates if the layout is changed via resizing
 		 * @event sap.ui.webcomponents.fiori.FlexibleColumnLayout#layout-change
 		 * @public
 		 */
@@ -197,7 +238,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>FlexibleColumnLayout</code> implements the master-detail-detail paradigm by displaying up to three pages in separate columns.
+ * The <code>FlexibleColumnLayout</code> implements the list-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.
  *
  * <h3>Usage</h3>
@@ -208,12 +249,29 @@ const metadata = {
  * <h3>Responsive Behavior</h3>
  *
  * The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size.
- * The component would display 1 column for window size smaller than 900px, up to two columns between 900px and 1280px,
- * and 3 columns for sizes bigger than 1280px.
+ * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,
+ * and 3 columns for sizes bigger than 1023px.
+ *
+ * <br><br>
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Basic Navigation</h4>
+ * <ul>
+ * <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li>
+ * <li>This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code></li>
+ * </ul>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -230,7 +288,6 @@ class FlexibleColumnLayout extends UI5Element {
 		this._prevLayout = null;
 		this.initialRendering = true;
 		this._handleResize = this.handleResize.bind(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	static get metadata() {
@@ -254,7 +311,7 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		FlexibleColumnLayout.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	static get BREAKPOINTS() {
@@ -282,6 +339,10 @@ class FlexibleColumnLayout extends UI5Element {
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResize);
+
+		["start", "mid", "end"].forEach(column => {
+			this[`${column}ColumnDOM`].removeEventListener("transitionend", this.columnResizeHandler);
+		});
 	}
 
 	onAfterRendering() {
@@ -378,20 +439,23 @@ class FlexibleColumnLayout extends UI5Element {
 			columnDOM.style.width = columnWidth;
 
 			// hide column with delay to allow the animation runs entirely
-			setTimeout(() => {
-				columnDOM.classList.add("ui5-fcl-column--hidden");
-			}, FlexibleColumnLayout.ANIMATION_DURATION);
+			columnDOM.addEventListener("transitionend", this.columnResizeHandler);
 
 			return;
 		}
 
 		// show column: from 0 to 33%, from 0 to 25%, etc.
 		if (previouslyHidden) {
+			columnDOM.removeEventListener("transitionend", this.columnResizeHandler);
 			columnDOM.classList.remove("ui5-fcl-column--hidden");
 			columnDOM.style.width = columnWidth;
 		}
 	}
 
+	columnResizeHandler(event) {
+		event.target.classList.add("ui5-fcl-column--hidden");
+	}
+
 	nextLayout(layout, arrowsInfo = {}) {
 		if (arrowsInfo.start) {
 			return getNextLayoutByStartArrow()[layout];
@@ -417,7 +481,8 @@ class FlexibleColumnLayout extends UI5Element {
 			startColumnVisible: this.startColumnVisible,
 			midColumnVisible: this.midColumnVisible,
 			endColumnVisible: this.endColumnVisible,
-			arrowUsed,
+			arrowUsed, // for backwards compatibility
+			arrowsUsed: arrowUsed, // as documented
 			resize,
 		});
 	}
@@ -498,7 +563,6 @@ class FlexibleColumnLayout extends UI5Element {
 		return {
 			root: {
 				"ui5-fcl-root": true,
-				"ui5-fcl--ie": isIE(),
 			},
 			columns: {
 				start: {
@@ -564,11 +628,11 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get showStartArrow() {
-		return this.noArrows ? false : this.startArrowVisibility;
+		return this.hideArrows ? false : this.startArrowVisibility;
 	}
 
 	get showEndArrow() {
-		return this.noArrows ? false : this.endArrowVisibility;
+		return this.hideArrows ? false : this.endArrowVisibility;
 	}
 
 	get startArrowVisibility() {
@@ -620,35 +684,95 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get accStartColumnText() {
-		return this.i18nBundle.getText(FCL_START_COLUMN_TXT);
+		return this.accessibilityTexts.startColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_TXT);
 	}
 
 	get accMiddleColumnText() {
-		return this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
+		return this.accessibilityTexts.midColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
 	}
 
 	get accEndColumnText() {
-		return this.i18nBundle.getText(FCL_END_COLUMN_TXT);
+		return this.accessibilityTexts.endColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_TXT);
+	}
+
+	get accStartArrowContainerText() {
+		return this.accessibilityTexts.startArrowContainerAccessibleName || undefined;
+	}
+
+	get accEndArrowContainerText() {
+		return this.accessibilityTexts.endArrowContainerAccessibleName || undefined;
+	}
+
+	get accStartColumnRole() {
+		if (this.startColumnVisible) {
+			return this.accessibilityRoles.startColumnRole || "region";
+		}
+		return undefined;
+	}
+
+	get accMiddleColumnRole() {
+		if (this.midColumnVisible) {
+			return this.accessibilityRoles.midColumnRole || "region";
+		}
+		return undefined;
+	}
+
+	get accEndColumnRole() {
+		if (this.endColumnVisible) {
+			return this.accessibilityRoles.endColumnRole || "region";
+		}
+		return undefined;
+	}
+
+	get accStartArrowContainerRole() {
+		return this.accessibilityRoles.startArrowContainerRole || undefined;
+	}
+
+	get accEndArrowContainerRole() {
+		return this.accessibilityRoles.endArrowContainerRole || undefined;
 	}
 
 	get _effectiveLayoutsByMedia() {
 		return this._layoutsConfiguration || getLayoutsByMedia();
 	}
 
+	get _accAttributes() {
+		return {
+			columns: {
+				start: {
+					role: this.accStartColumnRole,
+					ariaHidden: !this.startColumnVisible || undefined,
+				},
+				middle: {
+					role: this.accMiddleColumnRole,
+					ariaHidden: !this.midColumnVisible || undefined,
+				},
+				end: {
+					role: this.accEndColumnRole,
+					ariaHidden: !this.endColumnVisible || undefined,
+				},
+			},
+		};
+	}
+
 	get accStartArrowText() {
+		const customTexts = this.accessibilityTexts;
+
 		if (this.startArrowDirection === "mirror") {
-			return this.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
+			return customTexts.startArrowLeftText || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
 		}
 
-		return this.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);
+		return customTexts.startArrowRightText || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);
 	}
 
 	get accEndArrowText() {
+		const customTexts = this.accessibilityTexts;
+
 		if (this.endArrowDirection === "mirror") {
-			return this.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
+			return customTexts.endArrowRightText || FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
 		}
 
-		return this.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);
+		return customTexts.endArrowLeftText || FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);
 	}
 }