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

package/src/FlexibleColumnLayout.hbs

@@ -1,39 +1,41 @@
 <div class="{{classes.root}}">
 	<div
-		role="region"
+		role="{{_accAttributes.columns.start.role}}"
+		aria-hidden="{{_accAttributes.columns.start.ariaHidden}}"
 		class="{{classes.columns.start}}"
 		aria-labelledby="{{_id}}-startColumnText"
 	>
+		<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
 		<slot name="startColumn"></slot>
 	</div>
 
-	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.start}}">
+	<div role="{{accStartArrowContainerRole}}" aria-label={{accStartArrowContainerText}} class="ui5-fcl-arrow-container ui5-fcl-arrow-container-start" style="{{styles.arrowsContainer.start}}">
 		{{> startArrow}}
 	</div>
 
 	<div
-		role="region"
+		role="{{_accAttributes.columns.middle.role}}"
+		aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"
 		class="{{classes.columns.middle}}"
 		aria-labelledby="{{_id}}-midColumnText"
 	>
+		<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
 		<slot name="midColumn"></slot>
 	</div>
 
-	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.end}}">
+	<div role="{{accEndArrowContainerRole}}" aria-label="{{accEndArrowContainerText}}" class="ui5-fcl-arrow-container ui5-fcl-arrow-container-end" style="{{styles.arrowsContainer.end}}">
 		{{> endArrow}}
 	</div>
 
 	<div
-		role="region"
+		role="{{_accAttributes.columns.end.role}}"
+		aria-hidden="{{_accAttributes.columns.end.ariaHidden}}"
 		class="{{classes.columns.end}}"
 		aria-labelledby="{{_id}}-endColumnText"
 	>
+		<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
 		<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>
 
 {{#*inline "startArrow"}}
@@ -43,8 +45,7 @@
 		design="Transparent"
 		@click="{{startArrowClick}}"
 		style="{{styles.arrows.start}}"
-		aria-label="{{accStartArrowText}}"
-		title="{{accStartArrowText}}"
+		tooltip="{{accStartArrowText}}"
 	></ui5-button>
 {{/inline}}
 
@@ -56,7 +57,6 @@
 		icon="slim-arrow-left"
 		design="Transparent"
 		@click="{{endArrowClick}}"
-		aria-label="{{accEndArrowText}}"
-		title="{{accEndArrowText}}"
+		tooltip="{{accEndArrowText}}"
 	></ui5-button>
 {{/inline}}

package/src/FlexibleColumnLayout.js

@@ -3,7 +3,7 @@ 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";
@@ -39,12 +39,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 +78,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 +210,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
 		 */
@@ -208,12 +250,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 +289,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 +312,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 +340,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 +440,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 +482,8 @@ class FlexibleColumnLayout extends UI5Element {
 			startColumnVisible: this.startColumnVisible,
 			midColumnVisible: this.midColumnVisible,
 			endColumnVisible: this.endColumnVisible,
-			arrowUsed,
+			arrowUsed, // for backwards compatibility
+			arrowsUsed: arrowUsed, // as documented
 			resize,
 		});
 	}
@@ -564,11 +630,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 +686,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);
 	}
 }
 

package/src/IllustratedMessage.hbs

@@ -0,0 +1,58 @@
+<div class="ui5-illustrated-message-root">
+	<div class="ui5-illustrated-message-illustration">
+		{{{effectiveIllustration}}}
+	</div>
+	{{#if hasTitle}}
+	<ui5-title level="H2" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+	{{/if}}
+
+	{{#if hasSubtitle}}
+		<div class="ui5-illustrated-message-subtitle">
+			{{#if hasFormattedSubtitle}}
+				<slot name="subtitle"></slot>
+			{{else}}
+				{{effectiveSubitleText}}
+			{{/if}}
+		</div>
+	{{/if}}
+
+	{{#if hasActions}}
+		<div class="ui5-illustrated-message-actions">
+			<slot></slot>
+		</div>
+	{{/if}}
+
+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+		class="ui5-illustrated-message-util">
+		<defs>
+			<pattern id="sapIllus_PatternShadow" data-name="sapIllus_PatternShadow" width="3" height="5.5"
+				patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+				<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+					cy="5.5001" r="0.5" />
+				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="5.5001"
+					r="0.5" />
+				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="1.5"
+					cy="2.7501" r="0.5" />
+				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+					cy="0.0001" r="0.5" />
+				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="0.0001"
+					r="0.5" />
+			</pattern>
+			<pattern id="sapIllus_PatternHighlight" data-name="sapIllus_PatternHighlight" width="3" height="5.5"
+				patternTransform="translate(35.9059 309.6208)" patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+				<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+					cy="5.5001" r="0.5" />
+				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+					cy="5.5001" r="0.5" />
+				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="1.5001"
+					cy="2.7501" r="0.5" />
+				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+					cy="0.0001" r="0.5" />
+				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+					cy="0.0001" r="0.5" />
+			</pattern>
+		</defs>
+	</svg>
+</div>