@ui5/webcomponents-fiori 1.0.1 → 1.1.2

package/src/themes/MediaGallery.css

@@ -0,0 +1,158 @@
+:host {
+    height:100%;
+}
+
+:host,
+.ui5-media-gallery-display-wrapper,
+.ui5-media-gallery-display {
+    width: 100%;
+}
+
+.ui5-media-gallery-root {
+    width: inherit;
+    height: inherit;
+    background: var(--sapBaseColor);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
+    flex-direction: column-reverse;
+}
+
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
+    flex-direction: row-reverse;
+}
+
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
+    flex-direction: row;
+}
+
+/* DISPLAY */
+
+.ui5-media-gallery-display-wrapper {
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
+/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
+:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
+    flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
+    flex-basis: 0;
+}
+
+.ui5-media-gallery-display {
+    position:relative;
+    margin: 1rem;
+    display: flex;
+    justify-content: center;
+}
+
+.ui5-media-gallery-display [ui5-media-gallery-item] {
+    z-index: 1;
+}
+
+/* mobile platform */
+[ui5-carousel] {
+    width: calc(100% - 2rem);
+}
+[ui5-carousel]::part(item) {
+    padding: 0;
+    overflow: hidden;
+}
+
+/* THUMBNAILS */
+.ui5-media-gallery-thumbnails-wrapper {
+    margin: 1rem 0 0 0;
+}
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
+    margin: 0 0 1rem 0;
+}
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
+    margin: 0 1rem 0 0;
+}
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
+    margin: 0 0 0 1rem;
+}
+:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
+    margin-right: 1rem;
+}
+
+/* show all thumbnails in a single scrollable row */
+:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+/* show all thumbnails in a scrollable area with multiple columns */
+:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
+    flex-basis: 0;
+}
+
+.ui5-media-gallery-thumbnails-wrapper ul {
+    height: 5rem;
+    display: flex;
+    flex-wrap: nowrap;
+    padding-left: 0; /* disable browser default css */
+    margin-top: 0; /* disable browser default css */
+    margin-bottom: 0; /* disable browser default css */
+    list-style-type: none; /* disable browser default css */
+    padding-inline-start: 0; /* disable browser default css */
+}
+
+/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
+:host([effective-layout="Horizontal"]) ul {
+    width: 5rem;
+    flex-wrap: wrap;
+}
+/* two columns on M-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
+    width: 10rem;
+}
+/* three columns on L-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
+    width: 15rem;
+}
+/* four columns on XL-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
+    width: 20rem;
+}
+
+.ui5-media-gallery-thumbnail,
+.ui5-media-gallery-overflow [ui5-button] {
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
+}
+
+.ui5-media-gallery-overflow [ui5-button] {
+    background: var(--_ui5_media_gallery_overflow_btn_background);
+    color: var(--_ui5_media_gallery_overflow_btn_color);
+    border: var(--_ui5_media_gallery_overflow_btn_border);
+}
+
+.ui5-media-gallery-thumbnail,
+.ui5-media-gallery-overflow {
+    margin: 0 0 0 1rem;
+}
+
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
+    margin: 1rem 0 0 1rem;
+}
+
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
+    margin: 1rem 0 0 1rem;
+}
+
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
+    margin: 1rem 1rem 0 0;
+}

package/src/themes/MediaGalleryItem.css

@@ -0,0 +1,131 @@
+:host {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+}
+
+:host([_square]) {
+    height: 0;
+    padding-top: 100%;
+}
+
+.ui5-media-gallery-item-root {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+:host([_square]) .ui5-media-gallery-item-root {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-root {
+    align-items: center;
+}
+
+:host([_thumbnail-design]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_border);
+    box-sizing: border-box;
+}
+
+:host([_interactive]) .ui5-media-gallery-item-root {
+    cursor: pointer;
+}
+
+/* hover */
+:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
+    border-color: var(--sapTile_Interactive_BorderColor);
+    background: var(--sapList_Hover_Background);
+}
+
+/* focused */
+:host([focused]) .ui5-media-gallery-item-root {
+	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
+	outline-offset: -1px;
+}
+
+/* selected */
+:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_selected_border);
+}
+
+/* selected focused */
+:host([_thumbnail-design][focused][selected]) .ui5-media-gallery-item-root {
+    outline-offset: -3px;
+}
+
+.ui5-media-gallery-item-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
+    z-index: 1;
+}
+
+:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
+    height: calc(100% / 16 * 9);
+}
+
+/* resource not found icon */
+[ui5-icon] {
+    position: absolute;
+    width: 4.5rem;
+    height: 4.55rem;
+    align-self: center;
+}
+
+.ui5-media-gallery-item-mask-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapBaseColor);
+    mix-blend-mode: multiply;
+    opacity: 0.2;
+    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
+    pointer-events: none;
+}
+
+:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
+    z-index: 0;
+}
+
+/* disabled state */
+:host([disabled]) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapContent_ImagePlaceholderBackground);
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* stretch the slotted thumbnails and videos */
+::slotted([slot^=thumbnail]),
+:host([layout="Wide"]) ::slotted(*) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* fit the slotted images within the host container,
+preserving their proportions */
+::slotted(*) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    margin: auto;
+}

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";