@ui5/webcomponents-fiori 1.0.1 → 1.1.2

package/dist/FlexibleColumnLayout.js

@@ -39,6 +39,7 @@ 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.
@@ -94,6 +95,8 @@ const metadata = {
 		 *  - <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
@@ -103,6 +106,24 @@ const metadata = {
 			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.
 		*
@@ -235,9 +256,18 @@ const metadata = {
  * <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>
@@ -666,6 +696,34 @@ class FlexibleColumnLayout extends UI5Element {
 		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() {
+		return this.accessibilityRoles.startColumnRole || "region";
+	}
+
+	get accMiddleColumnRole() {
+		return this.accessibilityRoles.midColumnRole || "region";
+	}
+
+	get accEndColumnRole() {
+		return this.accessibilityRoles.endColumnRole || "region";
+	}
+
+	get accStartArrowContainerRole() {
+		return this.accessibilityRoles.startArrowContainerRole || undefined;
+	}
+
+	get accEndArrowContainerRole() {
+		return this.accessibilityRoles.endArrowContainerRole || undefined;
+	}
+
 	get _effectiveLayoutsByMedia() {
 		return this._layoutsConfiguration || getLayoutsByMedia();
 	}

package/dist/IllustratedMessage.js

@@ -67,14 +67,56 @@ const metadata = {
 		 * <li><code>BeforeSearch</code></li>
 		 * <li><code>NoActivities</code></li>
 		 * <li><code>NoData</code></li>
-		 * <li><code>NoEntries</code></li>
 		 * <li><code>NoMail</code></li>
+		 * <li><code>NoMail_v1</code></li>
+		 * <li><code>NoEntries</code></li>
 		 * <li><code>NoNotifications</code></li>
 		 * <li><code>NoSavedItems</code></li>
+		 * <li><code>NoSavedItems_v1</code></li>
 		 * <li><code>NoSearchResults</code></li>
 		 * <li><code>NoTasks</code></li>
+		 * <li><code>NoTasks_v1</code></li>
 		 * <li><code>UnableToLoad</code></li>
+		 * <li><code>UnableToLoadImage</code></li>
 		 * <li><code>UnableToUpload</code></li>
+		 * <li><code>AddColumn</code></li>
+		 * <li><code>AddPeople</code></li>
+		 * <li><code>BalloonSky</code></li>
+		 * <li><code>Connection</code></li>
+		 * <li><code>EmptyCalendar</code></li>
+		 * <li><code>EmptyList</code></li>
+		 * <li><code>EmptyPlanningCalendar</code></li>
+		 * <li><code>ErrorScreen</code></li>
+		 * <li><code>FilterTable</code></li>
+		 * <li><code>GroupTable</code></li>
+		 * <li><code>NoFilterResults</code></li>
+		 * <li><code>PageNotFound</code></li>
+		 * <li><code>ReloadScreen</code></li>
+		 * <li><code>ResizeColumn</code></li>
+		 * <li><code>SearchEarth</code></li>
+		 * <li><code>SearchFolder</code></li>
+		 * <li><code>SimpleBalloon</code></li>
+		 * <li><code>SimpleBell</code></li>
+		 * <li><code>SimpleCalendar</code></li>
+		 * <li><code>SimpleCheckMark</code></li>
+		 * <li><code>SimpleConnection</code></li>
+		 * <li><code>SimpleEmptyDoc</code></li>
+		 * <li><code>SimpleEmptyList</code></li>
+		 * <li><code>SimpleError</code></li>
+		 * <li><code>SimpleMagnifier</code></li>
+		 * <li><code>SimpleMail</code></li>
+		 * <li><code>SimpleNoSavedItems</code></li>
+		 * <li><code>SimpleNotFoundMagnifier</code></li>
+		 * <li><code>SimpleReload</code></li>
+		 * <li><code>SimpleTask</code></li>
+		 * <li><code>SleepingBell</code></li>
+		 * <li><code>SortColumn</code></li>
+		 * <li><code>SuccessBalloon</code></li>
+		 * <li><code>SuccessCheckMark</code></li>
+		 * <li><code>SuccessHighFive</code></li>
+		 * <li><code>SuccessScreen</code></li>
+		 * <li><code>Tent</code></li>
+		 * <li><code>UploadCollection</code></li>
 		 * <li><code>TntCompany</code></li>
 		 * <li><code>TntExternalLink</code></li>
 		 * <li><code>TntFaceID</code></li>

package/dist/Interfaces.js

@@ -16,6 +16,15 @@ const IFilterItem = "sap.ui.webcomponents.fiori.IFilterItem";
  */
 const IFilterItemOption = "sap.ui.webcomponents.fiori.IFilterItemOption";
 
+/**
+ * Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
+ *
+ * @name sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @interface
+ * @public
+ */
+const IMediaGalleryItem = "sap.ui.webcomponents.fiori.IMediaGalleryItem";
+
 /**
  * Interface for components that may be slotted as an action inside <code>ui5-li-notification</code> and <code>ui5-li-notification-group</code>
  *
@@ -109,6 +118,7 @@ const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
 export {
 	IFilterItem,
 	IFilterItemOption,
+	IMediaGalleryItem,
 	INotificationAction,
 	INotificationListItem,
 	IProductSwitchItem,