@ui5/webcomponents-fiori 1.4.0 → 1.5.0

package/src/themes/MediaGalleryItem.css

@@ -1,131 +1,130 @@
-: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;
-}
+: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;
+    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/NotificationListItem.css

@@ -27,23 +27,6 @@
 	font-weight: normal;
 }
 
-/* IE */
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-description {
-	max-height: 32px;
-}
-
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: 32px;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: inherit;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-description  {
-	max-height: inherit;
-}
-
 :host(:first-of-type) {
 	border-top-left-radius: var(--_ui5-notification_item-border-raius);
 	border-top-right-radius: var(--_ui5-notification_item-border-raius);
@@ -144,4 +127,4 @@
 .ui5-nli-actions {
 	display: flex;
 	box-sizing: border-box;
-}
+}

package/src/themes/ProductSwitchItem.css

@@ -43,7 +43,6 @@
 
 .ui5-product-switch-item-root {
 	user-select: none;
-	-ms-user-select: none;
 	width: 100%;
 	height: 100%;
 	flex-direction: column;

package/src/themes/ShellBar.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
@@ -42,6 +44,10 @@
 	text-overflow: initial;
 }
 
+::slotted([ui5-button][slot="startButton"]) {
+	margin-inline-start: 0;
+}
+
 ::slotted([ui5-button][slot="startButton"]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
@@ -89,7 +95,8 @@ slot[name="profile"] {
 	border: none;
 }
 
-.ui5-shellbar-menu-button-title {
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
@@ -97,6 +104,7 @@ slot[name="profile"] {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	color: var(--sapShell_TextColor);
 	flex: auto;
 }
 
@@ -105,17 +113,8 @@ slot[name="profile"] {
 	justify-content: center;
 }
 
-:host(:not([primary-title])) .ui5-shellbar-menu-button span {
-	margin-inline-start: 0;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
-	margin-inline-start: .5rem;
-}
-
 .ui5-shellbar-secondary-title {
 	display: inline-block;
-	margin: 0 0.5rem;
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapShell_TextColor);
 	line-height: 1rem;
@@ -157,16 +156,8 @@ slot[name="profile"] {
 	width: 3rem;
 }
 
-@keyframes Behind_layer {
-	0% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes Top_layer {
-	0% {
-		transform: rotate(-360deg);
-	}
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-root {
@@ -177,10 +168,6 @@ slot[name="profile"] {
 	padding: 0 1rem;
 }
 
-:host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
-	margin-inline-end: 0;
-}
-
 :host([breakpoint-size="M"]) .ui5-shellbar-root {
 	padding: 0 2rem;
 }
@@ -257,6 +244,10 @@ slot[name="profile"] {
 	flex-grow: 0;
 }
 
+.ui5-shellbar-overflow-container-left > :nth-child(n) {
+	margin-inline-end: 0.5rem;
+}
+
 :host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 1.5rem);
@@ -272,14 +263,12 @@ slot[name="profile"] {
 	cursor: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
-	-ms-user-select: text;
 	user-select: text;
 }
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	cursor: pointer;
 	border: var(--_ui5_shellbar_button_border);
@@ -327,11 +316,6 @@ slot[name="profile"] {
 	display: none;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-logo + .ui5-shellbar-menu-button-title,
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button + .ui5-shellbar-menu-button-title {
-	display: none;
-}
-
 :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
 	margin-inline-start: 0;
 }
@@ -449,26 +433,6 @@ slot[name="profile"] {
 	pointer-events: none;
 }
 
-
-/**
-* IE styles
-*/
-[ui5-input][value-state]:not([readonly]) {
-	background: var(--sapShellColor);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-}
-
-[ui5-input][value-state]:not([readonly]):hover,
-[ui5-input]:not([value-state]):not([readonly]):hover {
-	background: var(--sapShell_Hover_Background);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-}
-
-[ui5-input][value-state]:not([value-state="None"])[focused] {
-	outline: 1px dotted var(--sapContent_ContrastFocusColor);
-}
-/* IE styles end */
-
 .ui5-shellbar-copilot-wrapper {
 	position: relative;
 	outline: none;
@@ -502,7 +466,6 @@ slot[name="profile"] {
 .ui5-shellbar-copilot-wrapper:hover::after {
 	background: transparent;
 	box-shadow: var(--sapContent_Interaction_Shadow);
-	
 }
 
 .ui5-shellbar-copilot-wrapper:focus::after {

package/src/themes/TimelineItem.css

@@ -223,7 +223,6 @@
 
 .ui5-tli-title span {
 	display: inline-block;
-	vertical-align: top;
 }
 
 .ui5-tli-subtitle {

package/src/themes/Wizard.css

@@ -75,7 +75,6 @@
 	padding: 1rem 2rem;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	background-color: var(--sapObjectHeader_Background);
 	font-size: .875rem;
@@ -93,4 +92,4 @@
 [ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] + [ui5-wizard-tab][data-ui5-wizard-expanded-tab-prev="true"] {
 	width: 2rem;
 	padding-right: .75rem;
-}
+}

package/src/themes/WizardTab.css

@@ -162,11 +162,6 @@
 	border-bottom-style: dashed;
 }
 
-/* Workaround for IE to make the focus outline visible */
-[ui5-wizard-tab] .ui5-wiz-step-main {
-	pointer-events: none;
-}
-
 :host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-root {
 	display: inline;
 	position: absolute;
@@ -179,4 +174,4 @@
 
 :host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-hr {
 	display: none;
-}
+}

package/src/types/FCLLayout.js

@@ -19,7 +19,7 @@ const FCLLayouts = {
 	 * Tablet:  67/33/-  Start (expanded) and Mid columns are displayed
 	 * Phone:   -/100/-  only the Mid column is displayed
 	 *
-	 * Use to display both a master and a detail page when the user should focus on the master page.
+	 * Use to display both a list and a detail page when the user should focus on the list page.
 	 *
 	 * @type {TwoColumnsStartExpanded}
 	 * @public
@@ -31,7 +31,7 @@ const FCLLayouts = {
 	 * Tablet:  33/67/-  Start and Mid (expanded) columns are displayed
 	 * Phone:   -/100/-  only the Mid column is displayed
 	 *
-	 * Use to display both a master and a detail page when the user should focus on the detail page.
+	 * Use to display both a list and a detail page when the user should focus on the detail page.
 	 *
 	 * @type {TwoColumnsMidExpanded}
 	 * @public
@@ -43,7 +43,7 @@ const FCLLayouts = {
 	 * Tablet:  0/67/33  Mid (expanded) and End columns are displayed, Start is accessible by a layout arrow
 	 * Phone:   -/-/100  only the End column is displayed
 	 *
-	 * Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail.
+	 * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail.
 	 *
 	 * @type {ThreeColumnsMidExpanded}
 	 * @public
@@ -55,7 +55,7 @@ const FCLLayouts = {
 	 * Tablet:  0/33/67  Mid and End (expanded) columns are displayed, Start is accessible by layout arrows
 	 * Phone:   -/-/100  (only the End column is displayed)
 	 *
-	 * Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail-detail.
+	 * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail-detail.
 	 *
 	 * @public
 	 * @type ThreeColumnsEndExpanded
@@ -67,7 +67,7 @@ const FCLLayouts = {
 	 * Tablet:  67/33/0  Start (expanded) and Mid columns are displayed, End is accessible by layout arrows
 	 * Phone:   -/-/100  only the End column is displayed
 	 *
-	 * Use to display the master and detail pages when the user should focus on the master.
+	 * Use to display the list and detail pages when the user should focus on the list.
 	 * The detail-detail is still loaded and easily accessible with layout arrows.
 	 *
 	 * @public
@@ -80,7 +80,7 @@ const FCLLayouts = {
 	 * Tablet:  33/67/0  Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow
 	 * Phone:   -/-/100  only the End column is displayed
 	 *
-	 * Use to display the master and detail pages when the user should focus on the detail.
+	 * Use to display the list and detail pages when the user should focus on the detail.
 	 * The detail-detail is still loaded and easily accessible with a layout arrow.
 	 *
 	 * @public

package/src/types/IllustrationMessageSize.js

@@ -0,0 +1,66 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of IllustrationMessageSize.
+ * @lends sap.ui.webcomponents.fiori.types.IllustrationMessageSize.prototype
+ * @public
+ * @since 1.5.0
+ */
+const IllustrationMessageSizes = {
+	/**
+	 * Automatically decides the <code>Illustration</code> size (<code>Base</code>, <code>Spot</code>,
+	 * <code>Dialog</code>, or <code>Scene</code>) depending on the <code>IllustratedMessage</code> container width.
+	 *
+	 * <b>Note:</b> <code>Auto</code> is the only option where the illustration size is changed according to
+	 * the available container width. If any other <code>IllustratedMessageSize</code> is chosen, it remains
+	 * until changed by the app developer.
+	 *
+	 * @public
+	 */
+	Auto: "Auto",
+	/**
+	 * Base <code>Illustration</code> size (XS breakpoint). Suitable for cards (two columns).
+	 *
+	 * <b>Note:</b> When <code>Base</code> is in use, no illustration is displayed.
+	 *
+	 * @public
+	 */
+	Base: "Base",
+
+	/**
+	 * Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).
+	 * @public
+	 */
+	Spot: "Spot",
+
+	/**
+	 * Dialog <code>Illustration</code> size (M breakpoint). Suitable for dialogs.
+	 * @public
+	 */
+	Dialog: "Dialog",
+
+	/**
+	 * Scene <code>Illustration</code> size (L breakpoint). Suitable for a <code>Page</code> or a table.
+	 * @public
+	 */
+	Scene: "Scene",
+};
+
+/**
+ * @class
+ * Different types of IllustrationMessageSize.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.types.IllustrationMessageSize
+ * @public
+ * @enum {string}
+ */
+class IllustrationMessageSize extends DataType {
+	static isValid(value) {
+		return !!IllustrationMessageSizes[value];
+	}
+}
+
+IllustrationMessageSize.generateTypeAccessors(IllustrationMessageSizes);
+
+export default IllustrationMessageSize;