@ui5/webcomponents-fiori 2.3.0-rc.2 → 2.3.0

package/src/DynamicPage.hbs

@@ -17,7 +17,7 @@
 				{{> header-actions}}
 			{{/if}}
 		</header>
-
+		
 		{{#if headerInContent}}
 			<slot tabindex="{{headerTabIndex}}" ?aria-hidden="{{headerAriaHidden}}" name="headerArea"></slot>
 		{{/if}}
@@ -42,17 +42,19 @@
 </div>
 
 {{#*inline "header-actions"}}
-	{{#if hasHeading}}
-		<ui5-dynamic-page-header-actions
-			?snapped="{{headerSnapped}}"
-			?pinned="{{headerPinned}}"
-			?hide-pin-button="{{hidePinButton}}"
-			.accessibilityAttributes="{{_accAttributesForHeaderActions}}"
-			@ui5-expand-button-click={{onExpandClick}}
-			@ui5-pin-button-click={{onPinClick}}
-			@ui5-expand-button-hover-in={{onExpandHoverIn}}
-			@ui5-expand-button-hover-out={{onExpandHoverOut}}
-			>
-		</ui5-dynamic-page-header-actions>
-	{{/if}}
+	{{#unless hasSnappedTitleOnMobile}}
+		{{#if hasHeading}}
+			<ui5-dynamic-page-header-actions
+				?snapped="{{headerSnapped}}"
+				?pinned="{{headerPinned}}"
+				?hide-pin-button="{{hidePinButton}}"
+				.accessibilityAttributes="{{_accAttributesForHeaderActions}}"
+				@ui5-expand-button-click={{onExpandClick}}
+				@ui5-pin-button-click={{onPinClick}}
+				@ui5-expand-button-hover-in={{onExpandHoverIn}}
+				@ui5-expand-button-hover-out={{onExpandHoverOut}}
+				>
+			</ui5-dynamic-page-header-actions>
+		{{/if}}
+	{{/unless}}
 {{/inline}}

package/src/DynamicPageHeaderActions.hbs

@@ -6,7 +6,7 @@
             icon="{{arrowButtonIcon}}"
             accessible-name="{{expandLabel}}"
             .accessibilityAttributes="{{accessibilityAttributes}}"
-            title="{{expandLabel}}"
+            tooltip="{{expandLabel}}"
             @mouseover="{{onExpandHoverIn}}"
             @mouseout="{{onExpandHoverOut}}"
         ></ui5-button>
@@ -18,7 +18,7 @@
             ?pressed="{{pinned}}"
             .accessibilityAttributes="{{accessibilityAttributes}}"
             accessible-name="{{pinLabel}}"
-            title="{{pinLabel}}"
+            tooltip="{{pinLabel}}"
         ></ui5-toggle-button>
     {{/if}}
     </div>

package/src/DynamicPageTitle.hbs

@@ -9,39 +9,48 @@
     aria-labelledby="{{_ariaLabelledBy}}"
     aria-describedby="{{_id}}-toggle-description">
   </span>
-  <div class="ui5-dynamic-page-title--top-area">
-    <slot name="breadcrumbs"></slot>
 
-    {{#if mobileNavigationActions}}
-      <slot name="navigationBar"></slot>
-    {{/if}}
-  </div>
+  {{#if hasSnappedTitleOnMobile}}
+    <div id="{{_id}}-heading" class="ui5-dynamic-page--snapped-title-on-mobile">
+        <slot name="snappedTitleOnMobile"></slot>
+        <ui5-icon name="slim-arrow-down" mode="Decorative"></ui5-icon>
+    </div>
+  {{else}}
+    <div class="ui5-dynamic-page-title--top-area">
+      <slot name="breadcrumbs"></slot>
 
-  <div class="ui5-dynamic-page-title--wrapper"
-    @ui5-_min-content-width-change={{onMinContentWidthChange}}>
-    <div id="{{_id}}-heading" class="ui5-dynamic-page-title--heading">
-      <slot name="{{headingSlotName}}"></slot>
+      {{#if mobileNavigationActions}}
+        <slot name="navigationBar"></slot>
+      {{/if}}
     </div>
 
-    {{#if hasContent}}
-      <div class="ui5-dynamic-page-title--content"
-        style="{{styles.content}}">
-        <slot></slot>
+    <div class="ui5-dynamic-page-title--wrapper"
+      @ui5-_min-content-width-change={{onMinContentWidthChange}}>
+      <div id="{{_id}}-heading" class="ui5-dynamic-page-title--heading">
+        <slot name="{{headingSlotName}}"></slot>
+        <slot name="{{subheadingSlotName}}"></slot>
       </div>
-    {{/if}}
 
-    <div class="ui5-dynamic-page-title--actions"
-      style="{{styles.actions}}">
-      <slot name="actionsBar"></slot>
-      {{#unless mobileNavigationActions}}
-        {{#if _needsSeparator}}
-          <div class="ui5-dynamic-page-title--actions-separator"></div>
-        {{/if}}
-        <slot name="navigationBar"></slot>
-      {{/unless}}
+      {{#if hasContent}}
+        <div class="ui5-dynamic-page-title--content"
+          style="{{styles.content}}">
+          <slot></slot>
+        </div>
+      {{/if}}
+
+      <div class="ui5-dynamic-page-title--actions"
+        style="{{styles.actions}}">
+        <slot name="actionsBar"></slot>
+        {{#unless mobileNavigationActions}}
+          {{#if _needsSeparator}}
+            <div class="ui5-dynamic-page-title--actions-separator"></div>
+          {{/if}}
+          <slot name="navigationBar"></slot>
+        {{/unless}}
+      </div>
     </div>
-  </div>
 
-  <slot name="{{subheadingSlotName}}"></slot>
+  {{/if}}
+  
   <span id="{{_id}}-toggle-description" class="ui5-hidden-text">{{_ariaDescribedbyText}}</span>
 </div>

package/src/themes/DynamicPage.css

@@ -126,4 +126,11 @@
 
 :host([media-range="XL"]) ::slotted([slot="headerArea"]) {
     padding: var(--_ui5_dynamic_page_header_padding_XL);
+}
+
+/* snappedTitleOnMobile */
+:host([_header-snapped]) ::slotted([slot="headerArea"]) {
+	height: 0;
+	padding: 0;
+	visibility: hidden;
 }

package/src/themes/DynamicPageTitle.css

@@ -35,6 +35,11 @@
     box-shadow: var(--sapContent_HeaderShadow);
 }
 
+:host([has-snapped-title-on-mobile]) {
+	min-height: var(--_ui5_dynamic_page_snapped_title_on_mobile_min_height);
+	line-height: var(--_ui5_dynamic_page_snapped_title_on_mobile_line_height);
+}
+
 /* breadcrumbs */
 ::slotted([ui5-breadcrumbs][slot="breadcrumbs"]) {
     padding: var(--_ui5_dynamic_page_title_breadcrumbs_padding_top) 0
@@ -80,7 +85,6 @@
 
 .ui5-dynamic-page-title--wrapper {
     display: flex;
-    align-items: center;
 }
 
 .ui5-dynamic-page-title--heading {
@@ -88,11 +92,19 @@
     min-width: 1px;
 }
 
+.ui5-dynamic-page--snapped-title-on-mobile {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	pointer-events: none;
+}
+
 .ui5-dynamic-page-title--content {
-    padding: 0 0 0 1rem;
+    padding: 0.6rem 0 0 1rem;
     flex-shrink: 1.6;
     min-width: 3rem;
     flex-grow: 1;
+    display: flex;
 }
 
 .ui5-dynamic-page-title--actions {
@@ -100,7 +112,6 @@
     min-width: 3rem;
     flex-grow: 1;
     display: flex;
-    align-items: center;
 }
 
 .ui5-dynamic-page-title--actions ::slotted([slot="actionsBar"]) {
@@ -118,7 +129,7 @@
         width: 0.0625rem;
         vertical-align: middle;
         background: var(--sapToolbar_SeparatorColor);
-        margin: 0 0.5rem 0 0.25rem;
+        margin: 0.5rem 0.5rem 0 0.25rem;
     }
 }
 
@@ -130,6 +141,10 @@
     padding-right: 0;
 }
 
+.ui5-dynamic-page-title--top-area ::slotted([slot="navigationBar"]) {
+    flex: 0 1.6 auto;
+}
+
 .ui5-dynamic-page-title--top-area {
     display: flex;
     justify-content: space-between;

package/src/themes/FlexibleColumnLayout.css

@@ -19,6 +19,12 @@
 	overflow-y: auto;
 }
 
+/* disable pointer events on columns while dragging the separator
+ to prevent unintended interaction with the columns content */
+:host([_resizing]) .ui5-fcl-column {
+	pointer-events: none;
+}
+
 .ui5-fcl-column-animation {
 	transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 }

package/src/themes/Page.css

@@ -47,6 +47,11 @@
 }
 /*** Responsive paddings ***/
 
+::slotted([ui5-bar][design="FloatingFooter"]) {
+	margin: auto;
+	padding: 0;
+}
+
 /* S Size */
 @container (max-width: 599px) {
 	:host([floating-footer]) .ui5-page-footer-root,
@@ -59,6 +64,10 @@
 		box-sizing: border-box;
 		padding: 0 .25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 0.5rem);
+	}
 }
 
 /* M Size */
@@ -73,6 +82,10 @@
 		box-sizing: border-box;
 		padding: 0 1.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 2.5rem);
+	}
 }
 
 /* L Size */
@@ -87,6 +100,10 @@
 		box-sizing: border-box;
 		padding: 0 1.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 2.5rem);
+	}
 }
 
 /* XL Size */
@@ -101,6 +118,10 @@
 		box-sizing: border-box;
 		padding: 0 2.25rem;
 	}
+
+	::slotted([ui5-bar][design="FloatingFooter"]) {
+		width: calc(100% - 4.5rem);
+	}
 }
 
 :host([no-scrolling]) .ui5-page-content-root {
@@ -112,11 +133,11 @@
 }
 
 :host(:not([fixed-footer]):not([hide-footer])) .ui5-page-footer-root {
-	animation: bounceShow 0.35s forwards ease-in-out;
+	animation: bounceShow var(--_ui5-page-animation-duration) forwards ease-in-out;
 }
 
 :host(:not([fixed-footer])[hide-footer]) .ui5-page-footer-root {
-	animation: bounceHide 0.35s forwards ease-in-out;
+	animation: bounceHide var(--_ui5-page-animation-duration) forwards ease-in-out;
 }
 
 /* BackgroundDesign */

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

@@ -16,4 +16,6 @@
 
     --_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);
 
+	--_ui5_dynamic_page_snapped_title_on_mobile_line_height: 2rem;
+	--_ui5_dynamic_page_snapped_title_on_mobile_min_height: 2rem;
 }

package/tsconfig.json

@@ -10,8 +10,7 @@
 		"composite": true,
 		"rootDir": "src",
 		"tsBuildInfoFile": "dist/.tsbuildinfo",
-		"importsNotUsedAsValues": "preserve",
-		"ignoreDeprecations": "5.0",
+		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
@@ -25,9 +24,7 @@
 			"@ui5/webcomponents-theming/dist/*": [
 				"../theming/src/*"
 			],
-			// "@ui5/webcomponents-icons/dist/*": ["../icons/src/*"],
-			// "@ui5/webcomponents-icons-business-suite/dist/*": ["../icons-business-suite/src/*"],
-			// "@ui5/webcomponents-icons-tnt/dist/*": ["../icons-tnt/src/*"]
+			"@ui5/webcomponents-fiori/dist/ssr-zxing.js": ["./src/ssr-zxing.ts"],
 		},
 	},
 	"references": [