@ui5/webcomponents-fiori 1.0.2 → 1.1.0

package/src/themes/NotificationListGroupItem.css

@@ -9,6 +9,10 @@
 	transform: rotate(90deg);
 }
 
+:host(:not([collapsed])) [dir="rtl"] .ui5-nli-group-toggle-btn {
+	transform: rotate(270deg);
+}
+
 :host([collapsed]) .ui5-nli-group-items {
 	display: none;
 }
@@ -35,6 +39,10 @@
 	cursor: default;
 }
 
+[dir="rtl"] .ui5-nli-group-header {
+	padding: 0.75rem 0.75rem 0.25rem 0.5rem;
+}
+
 .ui5-nli-group-toggle-btn {
 	margin-right: 0.75rem;
 	cursor: pointer;
@@ -64,9 +72,15 @@
 
 [dir="rtl"] .ui5-nli-group-toggle-btn {
 	margin-left: 1rem;
+	margin-right: 0;
 }
 
 [dir="rtl"] .ui5-nli-group-counter {
 	margin-right: 0.25rem;
 	margin-left: 1rem;
 }
+
+/* fix for blue background color on tap (touchscreen devices) */
+:host([ui5-li-notification-group]) { 
+	-webkit-tap-highlight-color: transparent;
+}

package/src/themes/NotificationListItem.css

@@ -74,6 +74,10 @@
 	cursor: pointer;
 }
 
+[dir="rtl"].ui5-nli-root {
+	padding: 1rem 1rem 1rem 0.5rem;
+}
+
 .ui5-nli-content {
 	display: flex;
 	flex-direction: column;

package/src/themes/SideNavigation.css

@@ -37,14 +37,4 @@
 .ui5-sn-spacer {
     flex: auto;
     min-height: 3rem;
-}
-
-.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
-.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
+}

package/src/themes/SideNavigationPopover.css

@@ -0,0 +1,9 @@
+.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
+	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
+}
+
+.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
+	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
+}

package/src/themes/UploadCollectionItem.css

@@ -6,15 +6,6 @@
 	display: block;
 }
 
-:host([active][actionable]) .ui5-uci-file-name,
-:host([active][actionable]) .ui5-uci-description,
-:host([active][actionable]) .ui5-uci-edit-buttons ui5-button,
-:host([active][actionable]) .ui5-li-deletebtn ui5-button,
-:host([active][actionable]) .ui5-uci-progress-labels ui5-label {
-	color: var(--sapList_Active_TextColor);
-}
-
-
 .ui5-li-root.ui5-uci-root {
 	padding: 1rem;
 }
@@ -30,10 +21,6 @@
 	margin-right: 0.75rem;
 }
 
-:host([active][actionable]) ::slotted([ui5-icon][slot=thumbnail]) {
-	color: var(--sapList_Active_TextColor);
-}
-
 ::slotted([ui5-icon][slot="thumbnail"]) {
 	width: 3rem;
 	height: 3rem;

package/src/themes/ViewSettingsDialog.css

@@ -7,7 +7,7 @@
 	width: 100%;
 }
 
-.ui5-vsd-header > ui5-bar {
+.ui5-vsd-header > [ui5-bar] {
 	height: 4rem;
 }
 

package/src/themes/Wizard.css

@@ -24,7 +24,7 @@
 .ui5-wiz-content-item {
 	display: block;
 	box-sizing: border-box;
-	padding-bottom: 2rem;
+	padding: 1rem 2rem;
 }
 
 .ui5-wiz-content-item[hidden] {
@@ -65,7 +65,7 @@
 .ui5-wiz-nav {
 	box-sizing: border-box;
 	height: 4rem;
-	padding: 0.875rem 1rem;
+	padding: 0.875rem 2rem;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;

package/src/themes/base/MediaGallery-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Neutral_Background);
+	--_ui5_media_gallery_overflow_btn_color:  var(--sapBaseColor);
+	--_ui5_media_gallery_overflow_btn_border:  none;
+}

package/src/themes/base/MediaGalleryItem-parameters.css

@@ -0,0 +1,6 @@
+:root {
+	--_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);
+	--_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);
+	--_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	--_ui5_media_gallery_item_overlay_box_shadow: inset 0px 0px 80px rgba(0, 0, 0, 0.2);
+}

package/src/themes/sap_belize/parameters-bundle.css

@@ -1,5 +1,7 @@
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
+@import "../base/MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/Page-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";

package/src/themes/sap_belize_hcb/MediaGallery-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
+	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
+	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);
+}

package/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "./MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_belize_hcw/MediaGallery-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
+	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
+	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);
+}

package/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "./MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "../base/MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "../base/Page-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "../base/MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "../base/Page-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_fiori_3_hcb/MediaGallery-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
+	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
+	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);
+}

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "./MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_fiori_3_hcw/MediaGallery-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
+	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
+	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);
+}

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "./MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";

package/src/themes/sap_horizon/parameters-bundle.css

@@ -1,6 +1,8 @@
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
+@import "../base/MediaGallery-parameters.css";
+@import "../base/MediaGalleryItem-parameters.css";
 @import "../base/Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";

package/src/types/IllustrationMessageType.js

@@ -6,71 +6,323 @@ import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
  */
 const IllustrationMessageTypes = {
 	/**
-	 * "BeforeSearch" illustration type.
+	 * "Before Search" illustration type.
 	 * @public
 	 * @type {BeforeSearch}
 	 */
 	BeforeSearch: "BeforeSearch",
 	/**
-	 * "NoActivities" illustration type.
+	 * "No Activities" illustration type.
 	 * @public
 	 * @type {NoActivities}
 	 */
 	NoActivities: "NoActivities",
 	/**
-	 * "NoData" illustration type.
+	 * "No Data" illustration type.
 	 * @public
 	 * @type {NoData}
 	 */
 	NoData: "NoData",
 	/**
-	 * "NoEntries" illustration type.
+	 * "No Email" illustration type.
 	 * @public
-	 * @type {NoEntries}
+	 * @type {NoMail}
 	 */
-	NoEntries: "NoEntries",
+	NoMail: "NoMail",
 	/**
-	 * "NoMail" illustration type.
+	 * "No Email v1" illustration type.
 	 * @public
-	 * @type {NoMail}
+	 * @type {NoMail_v1}
 	 */
-	NoMail: "NoMail",
+	NoMail_v1: "NoMail_v1",
 	/**
-	 * "NoNotifications" illustration type.
+	 * "No Entries" illustration type.
+	 * @public
+	 * @type {NoEntries}
+	 */
+	NoEntries: "NoEntries",
+	/**
+	 * "No Notifications" illustration type.
 	 * @public
 	 * @type {NoNotifications}
 	 */
 	NoNotifications: "NoNotifications",
 	/**
-	 * "NoSavedItems" illustration type.
+	 * "No Saved Items" illustration type.
 	 * @public
 	 * @type {NoSavedItems}
 	 */
 	NoSavedItems: "NoSavedItems",
 	/**
-	 * "NoSearchResults" illustration type.
+	 * "No Saved Items v1" illustration type.
+	 * @public
+	 * @type {NoSavedItems_v1}
+	 */
+	NoSavedItems_v1: "NoSavedItems_v1",
+	/**
+	 * "No Search Results" illustration type.
 	 * @public
 	 * @type {NoSearchResults}
 	 */
 	NoSearchResults: "NoSearchResults",
 	/**
-	 * "NoTasks" illustration type.
+	 * "No Tasks" illustration type.
 	 * @public
 	 * @type {NoTasks}
 	 */
 	NoTasks: "NoTasks",
 	/**
-	 * "UnableToLoad" illustration type.
+	 * "No Tasks v1" illustration type.
+	 * @public
+	 * @type {NoTasks_v1}
+	 */
+	NoTasks_v1: "NoTasks_v1",
+	/**
+	 * "Unable To Load" illustration type.
 	 * @public
 	 * @type {UnableToLoad}
 	 */
 	UnableToLoad: "UnableToLoad",
 	/**
-	 * "UnableToUpload" illustration type.
+	 * "Unable To Load Image" illustration type.
+	 * @public
+	 * @type {UnableToLoadImage}
+	 */
+	UnableToLoadImage: "UnableToLoadImage",
+	/**
+	 * "Unable To Upload" illustration type.
 	 * @public
 	 * @type {UnableToUpload}
 	 */
 	UnableToUpload: "UnableToUpload",
+	/**
+	 * "Add Column" illustration type.
+	 * @public
+	 * @type {AddColumn}
+	 */
+	AddColumn: "AddColumn",
+	/**
+	 * "Add People" illustration type.
+	 * @public
+	 * @type {AddPeople}
+	 */
+	AddPeople: "AddPeople",
+	/**
+	 * "Balloon Sky" illustration type.
+	 * @public
+	 * @type {BalloonSky}
+	 */
+	BalloonSky: "BalloonSky",
+	/**
+	 * "Connection" illustration type.
+	 * @public
+	 * @type {Connection}
+	 */
+	Connection: "Connection",
+	/**
+	 * "Empty Calendar" illustration type.
+	 * @public
+	 * @type {EmptyCalendar}
+	 */
+	EmptyCalendar: "EmptyCalendar",
+	/**
+	 * "Empty List" illustration type.
+	 * @public
+	 * @type {EmptyList}
+	 */
+	EmptyList: "EmptyList",
+	/**
+	 * "Empty Planning Calendar" illustration type.
+	 * @public
+	 * @type {EmptyPlanningCalendar}
+	 */
+	EmptyPlanningCalendar: "EmptyPlanningCalendar",
+	/**
+	 * "Error Screen" illustration type.
+	 * @public
+	 * @type {ErrorScreen}
+	 */
+	ErrorScreen: "ErrorScreen",
+	/**
+	 * "Filter Table" illustration type.
+	 * @public
+	 * @type {FilterTable}
+	 */
+	FilterTable: "FilterTable",
+	/**
+	 * "Group Table" illustration type.
+	 * @public
+	 * @type {GroupTable}
+	 */
+	GroupTable: "GroupTable",
+	/**
+	 * "No Filter Results" illustration type.
+	 * @public
+	 * @type {NoFilterResults}
+	 */
+	NoFilterResults: "NoFilterResults",
+	/**
+	 * "Page Not Found" illustration type.
+	 * @public
+	 * @type {PageNotFound}
+	 */
+	PageNotFound: "PageNotFound",
+	/**
+	 * "Reload Screen" illustration type.
+	 * @public
+	 * @type {ReloadScreen}
+	 */
+	ReloadScreen: "ReloadScreen",
+	/**
+	 * "Resize Column" illustration type.
+	 * @public
+	 * @type {ResizeColumn}
+	 */
+	ResizeColumn: "ResizeColumn",
+	/**
+	 * "Search Earth" illustration type.
+	 * @public
+	 * @type {SearchEarth}
+	 */
+	SearchEarth: "SearchEarth",
+	/**
+	 * "Search Folder" illustration type.
+	 * @public
+	 * @type {SearchFolder}
+	 */
+	SearchFolder: "SearchFolder",
+	/**
+	 * "Simple Balloon" illustration type.
+	 * @public
+	 * @type {SimpleBalloon}
+	 */
+	SimpleBalloon: "SimpleBalloon",
+	/**
+	 * "Simple Bell" illustration type.
+	 * @public
+	 * @type {SimpleBell}
+	 */
+	SimpleBell: "SimpleBell",
+	/**
+	 * "Simple Calendar" illustration type.
+	 * @public
+	 * @type {SimpleCalendar}
+	 */
+	SimpleCalendar: "SimpleCalendar",
+	/**
+	 * "Simple CheckMark" illustration type.
+	 * @public
+	 * @type {SimpleCheckMark}
+	 */
+	SimpleCheckMark: "SimpleCheckMark",
+	/**
+	 * "Simple Connection" illustration type.
+	 * @public
+	 * @type {SimpleConnection}
+	 */
+	SimpleConnection: "SimpleConnection",
+	/**
+	 * "Simple Empty Doc" illustration type.
+	 * @public
+	 * @type {SimpleEmptyDoc}
+	 */
+	SimpleEmptyDoc: "SimpleEmptyDoc",
+	/**
+	 * "Simple Empty List" illustration type.
+	 * @public
+	 * @type {SimpleEmptyList}
+	 */
+	SimpleEmptyList: "SimpleEmptyList",
+	/**
+	 * "Simple Error" illustration type.
+	 * @public
+	 * @type {SimpleError}
+	 */
+	SimpleError: "SimpleError",
+	/**
+	 * "Simple Magnifier" illustration type.
+	 * @public
+	 * @type {SimpleMagnifier}
+	 */
+	SimpleMagnifier: "SimpleMagnifier",
+	/**
+	 * "Simple Mail" illustration type.
+	 * @public
+	 * @type {SimpleMail}
+	 */
+	SimpleMail: "SimpleMail",
+	/**
+	 * "Simple No Saved Items" illustration type.
+	 * @public
+	 * @type {SimpleNoSavedItems}
+	 */
+	SimpleNoSavedItems: "SimpleNoSavedItems",
+	/**
+	 * "Simple Not Found Magnifier" illustration type.
+	 * @public
+	 * @type {SimpleNotFoundMagnifier}
+	 */
+	SimpleNotFoundMagnifier: "SimpleNotFoundMagnifier",
+	/**
+	 * "Simple Reload" illustration type.
+	 * @public
+	 * @type {SimpleReload}
+	 */
+	SimpleReload: "SimpleReload",
+	/**
+	 * "Simple Task" illustration type.
+	 * @public
+	 * @type {SimpleTask}
+	 */
+	SimpleTask: "SimpleTask",
+	/**
+	 * "Sleeping Bell" illustration type.
+	 * @public
+	 * @type {SleepingBell}
+	 */
+	SleepingBell: "SleepingBell",
+	/**
+	 * "Sort Column" illustration type.
+	 * @public
+	 * @type {SortColumn}
+	 */
+	SortColumn: "SortColumn",
+	/**
+	 * "Success Balloon" illustration type.
+	 * @public
+	 * @type {SuccessBalloon}
+	 */
+	SuccessBalloon: "SuccessBalloon",
+	/**
+	 * "Success CheckMark" illustration type.
+	 * @public
+	 * @type {SuccessCheckMark}
+	 */
+	SuccessCheckMark: "SuccessCheckMark",
+	/**
+	 * "Success HighFive" illustration type.
+	 * @public
+	 * @type {SuccessHighFive}
+	 */
+	SuccessHighFive: "SuccessHighFive",
+	/**
+	 * "Success Screen" illustration type.
+	 * @public
+	 * @type {SuccessScreen}
+	 */
+	SuccessScreen: "SuccessScreen",
+	/**
+	 * "Tent" illustration type.
+	 * @public
+	 * @type {Tent}
+	 */
+	Tent: "Tent",
+	/**
+	 * "Upload Collection" illustration type.
+	 * @public
+	 * @type {UploadCollection}
+	 */
+	UploadCollection: "UploadCollection",
 	/**
 	* "TntCodePlaceholder" illustration type.
 	* @public

package/src/types/MediaGalleryItemLayout.js

@@ -0,0 +1,44 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout.prototype
+ * @public
+ */
+const MediaGalleryItemLayouts = {
+
+	/**
+	 * Recommended to use when the item contains an image.<br>
+	 * When a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area.
+	 * @public
+	 * @type {Square}
+	 */
+	 Square: "Square",
+
+	/**
+	 * Recommended to use when the item contains video content.<br>
+	 * When a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area
+	 * (stretched to fill all of the available width) for optimal user experiance.
+	 * @public
+	 * @type {Wide}
+	 */
+	Wide: "Wide",
+};
+
+/**
+ * @class
+ * Defines the layout of the content displayed in the <code>ui5-media-gallery-item</code>.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout
+ * @public
+ * @enum {string}
+ */
+class MediaGalleryItemLayout extends DataType {
+	static isValid(value) {
+		return !!MediaGalleryItemLayouts[value];
+	}
+}
+
+MediaGalleryItemLayout.generateTypeAccessors(MediaGalleryItemLayouts);
+
+export default MediaGalleryItemLayout;

package/src/types/MediaGalleryLayout.js

@@ -0,0 +1,48 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.fiori.types.MediaGalleryLayout.prototype
+ * @public
+ */
+const MediaGalleryLayouts = {
+
+	/**
+	 * The layout is determined automatically.
+	 * @public
+	 * @type {Left}
+	 */
+	 Auto: "Auto",
+
+	/**
+	 * Displays the layout as a vertical split between the thumbnails list and the selected image.
+	 * @public
+	 * @type {Left}
+	 */
+	Vertical: "Vertical",
+
+	/**
+	 * Displays the layout as a horizontal split between the thumbnails list and the selected image.
+	 * @public
+	 * @type {Right}
+	 */
+	Horizontal: "Horizontal",
+};
+
+/**
+ * @class
+ * Defines the layout type of the thumbnails list of the <code>ui5-media-gallery</code> component.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.types.MediaGalleryLayout
+ * @public
+ * @enum {string}
+ */
+class MediaGalleryLayout extends DataType {
+	static isValid(value) {
+		return !!MediaGalleryLayouts[value];
+	}
+}
+
+MediaGalleryLayout.generateTypeAccessors(MediaGalleryLayouts);
+
+export default MediaGalleryLayout;