@ui5/webcomponents-fiori 1.5.0 → 1.7.1

package/dist/generated/templates/UploadCollectionItemTemplate.lit.js

@@ -5,7 +5,7 @@ const block0 = (context, tags, suffix) => html`<li part="native-li" tabindex="${
 const block1 = (context, tags, suffix) => html``;
 const block2 = (context, tags, suffix) => suffix ? html`<div class="ui5-uci-edit-container"><${scopeTag("ui5-input", tags, suffix)} id="ui5-uci-edit-input" data-sap-focus-ref @focusin="${context._onInputFocusin}" @keydown="${context._onInputKeyDown}"></${scopeTag("ui5-input", tags, suffix)}><span class="ui5-uci-file-extension">${ifDefined(context._fileExtension)}</span></div>` : html`<div class="ui5-uci-edit-container"><ui5-input id="ui5-uci-edit-input" data-sap-focus-ref @focusin="${context._onInputFocusin}" @keydown="${context._onInputKeyDown}"></ui5-input><span class="ui5-uci-file-extension">${ifDefined(context._fileExtension)}</span></div>`;
 const block3 = (context, tags, suffix) => html`${ context.fileNameClickable ? block4(context, tags, suffix) : block5(context, tags, suffix) }`;
-const block4 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-link", tags, suffix)} class="ui5-uci-file-name" @click="${context._onFileNameClick}">${ifDefined(context.fileName)}</${scopeTag("ui5-link", tags, suffix)}>` : html`<ui5-link class="ui5-uci-file-name" @click="${context._onFileNameClick}">${ifDefined(context.fileName)}</ui5-link>`;
+const block4 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-link", tags, suffix)} class="ui5-uci-file-name" @ui5-click="${ifDefined(context._onFileNameClick)}">${ifDefined(context.fileName)}</${scopeTag("ui5-link", tags, suffix)}>` : html`<ui5-link class="ui5-uci-file-name" @ui5-click="${ifDefined(context._onFileNameClick)}">${ifDefined(context.fileName)}</ui5-link>`;
 const block5 = (context, tags, suffix) => html`<span class="ui5-uci-file-name ui5-uci-file-name-text">${ifDefined(context.fileName)}</span>`;
 const block6 = (context, tags, suffix) => suffix ? html`<div class="ui5-uci-progress-box"><${scopeTag("ui5-progress-indicator", tags, suffix)} class="ui5-uci-progress-indicator" hide-value value="${ifDefined(context.progress)}" value-state="${ifDefined(context.valueStateName)}"></${scopeTag("ui5-progress-indicator", tags, suffix)}><div class="ui5-uci-progress-labels"><${scopeTag("ui5-label", tags, suffix)} show-colon>${ifDefined(context._progressText)}</${scopeTag("ui5-label", tags, suffix)}><${scopeTag("ui5-label", tags, suffix)}>${ifDefined(context.progress)}%</${scopeTag("ui5-label", tags, suffix)}></div></div>` : html`<div class="ui5-uci-progress-box"><ui5-progress-indicator class="ui5-uci-progress-indicator" hide-value value="${ifDefined(context.progress)}" value-state="${ifDefined(context.valueStateName)}"></ui5-progress-indicator><div class="ui5-uci-progress-labels"><ui5-label show-colon>${ifDefined(context._progressText)}</ui5-label><ui5-label>${ifDefined(context.progress)}%</ui5-label></div></div>`;
 const block7 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-button", tags, suffix)} design="Transparent" class="ui5-uci-edit-rename-btn" @click="${context._onRename}" @keyup="${context._onRenameKeyup}">${ifDefined(context._renameBtnText)}</${scopeTag("ui5-button", tags, suffix)}><${scopeTag("ui5-button", tags, suffix)} design="Transparent" id="ui5-uci-edit-cancel" @click="${context._onRenameCancel}" @keyup="${context._onRenameCancelKeyup}">${ifDefined(context._cancelRenameBtnText)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button design="Transparent" class="ui5-uci-edit-rename-btn" @click="${context._onRename}" @keyup="${context._onRenameKeyup}">${ifDefined(context._renameBtnText)}</ui5-button><ui5-button design="Transparent" id="ui5-uci-edit-cancel" @click="${context._onRenameCancel}" @keyup="${context._onRenameCancelKeyup}">${ifDefined(context._cancelRenameBtnText)}</ui5-button>`;

package/dist/generated/themes/NotificationOverflowActionsPopover.css.js

@@ -5,4 +5,4 @@ import defaultTheme from "./sap_fiori_3/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => defaultThemeBase);
 registerThemePropertiesLoader("@ui5/webcomponents-fiori", "sap_fiori_3", () => defaultTheme);
-export default {packageName:"@ui5/webcomponents-fiori",fileName:"themes/NotificationOverflowActionsPopover.css",content:".ui5-notification-overflow-list{display:flex;flex-direction:column}.ui5-notification-overflow-popover::part(content){padding:var(--_ui5-notification-overflow-popover-padding)}"}
+export default {packageName:"@ui5/webcomponents-fiori",fileName:"themes/NotificationOverflowActionsPopover.css",content:".ui5-notification-overflow-list{display:flex;flex-direction:column}.ui5-notification-overflow-popover::part(content){padding:var(--_ui5-notification-overflow-popover-padding)}.ui5-notification-overflow-list-btn::part(button){justify-content:flex-start}"}

package/dist/types/IllustrationMessageSize.js

@@ -16,6 +16,7 @@ const IllustrationMessageSizes = {
 	 * until changed by the app developer.
 	 *
 	 * @public
+	 * @type {Auto}
 	 */
 	Auto: "Auto",
 	/**
@@ -24,24 +25,28 @@ const IllustrationMessageSizes = {
 	 * <b>Note:</b> When <code>Base</code> is in use, no illustration is displayed.
 	 *
 	 * @public
+	 * @type {Base}
 	 */
 	Base: "Base",
 
 	/**
 	 * Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).
 	 * @public
+	 * @type {Spot}
 	 */
 	Spot: "Spot",
 
 	/**
 	 * Dialog <code>Illustration</code> size (M breakpoint). Suitable for dialogs.
 	 * @public
+	 * @type {Dialog}
 	 */
 	Dialog: "Dialog",
 
 	/**
 	 * Scene <code>Illustration</code> size (L breakpoint). Suitable for a <code>Page</code> or a table.
 	 * @public
+	 * @type {Scene}
 	 */
 	Scene: "Scene",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.5.0",
+  "version": "1.7.1",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -39,14 +39,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.5.0",
-    "@ui5/webcomponents-base": "1.5.0",
-    "@ui5/webcomponents-icons": "1.5.0",
-    "@ui5/webcomponents-theming": "1.5.0",
+    "@ui5/webcomponents": "1.7.1",
+    "@ui5/webcomponents-base": "1.7.1",
+    "@ui5/webcomponents-icons": "1.7.1",
+    "@ui5/webcomponents-theming": "1.7.1",
     "@zxing/library": "^0.18.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.5.0",
-    "chromedriver": "102.0.0"
+    "@ui5/webcomponents-tools": "1.7.1",
+    "chromedriver": "104.0.0"
   }
 }

package/src/Bar.js

@@ -36,15 +36,6 @@ const metadata = {
 			type: BarDesign,
 			defaultValue: BarDesign.Header,
 		},
-
-		/**
-		 * Defines if the component middle area needs to be centered between start and end area
-		 * @type {boolean}
-		 * @private
-		 */
-		_shrinked: {
-			type: Boolean,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
 		/**
@@ -163,17 +154,17 @@ class Bar extends UI5Element {
 	handleResize() {
 		const bar = this.getDomRef();
 		const barWidth = bar.offsetWidth;
-
-		this._shrinked = Array.from(bar.children).some(element => {
-			return barWidth / 3 < element.offsetWidth;
+		const needShrinked = Array.from(bar.children).some(slot => {
+			return slot.offsetWidth > barWidth / 3;
 		});
+
+		bar.classList.toggle("ui5-bar-root-shrinked", needShrinked);
 	}
 
 	get classes() {
 		return {
 			root: {
 				"ui5-bar-root": true,
-				"ui5-bar-root-shrinked": this._shrinked,
 			},
 		};
 	}
@@ -185,11 +176,19 @@ class Bar extends UI5Element {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
+
+		this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(slot => {
+			ResizeHandler.register(slot, this._handleResizeBound);
+		}, this);
 	}
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResizeBound);
-	}
+
+		this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(slot => {
+			ResizeHandler.deregister(slot, this._handleResizeBound);
+		}, this);
+	 }
 }
 
 Bar.define();

package/src/IllustratedMessage.hbs

@@ -3,7 +3,11 @@
 		{{{effectiveIllustration}}}
 	</div>
 	{{#if hasTitle}}
-	<ui5-title level="H2" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+			{{#if hasFormattedTitle}}
+				<slot name="title"></slot>
+			{{else}}
+				<ui5-title level="H2" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+			{{/if}}
 	{{/if}}
 
 	{{#if hasSubtitle}}

package/src/IllustratedMessage.js

@@ -222,6 +222,18 @@ const metadata = {
 		subtitle: {
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the title of the component.
+		 * <br><br>
+		 * <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.
+		 * @type {HTMLElement}
+		 * @slot title
+		 * @public
+		 * @since 1.7.0
+		 */
+		title: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.IllustratedMessage.prototype */ {
 		//
@@ -410,6 +422,10 @@ class IllustratedMessage extends UI5Element {
 		return !!this.subtitle.length;
 	}
 
+	get hasFormattedTitle() {
+		return !!this.title.length;
+	}
+
 	get effectiveTitleText() {
 		return this.titleText ? this.titleText : this.illustrationTitle;
 	}
@@ -419,11 +435,11 @@ class IllustratedMessage extends UI5Element {
 	}
 
 	get hasTitle() {
-		return this.titleText || this.illustrationTitle;
+		return this.hasFormattedTitle || this.titleText || this.illustrationTitle;
 	}
 
 	get hasSubtitle() {
-		return this.subtitleText || this.illustrationSubtitle;
+		return this.hasFormattedSubtitle || this.subtitleText || this.illustrationSubtitle;
 	}
 
 	get hasActions() {

package/src/NotificationAction.js

@@ -58,7 +58,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/NotificationListItem.hbs

@@ -77,7 +77,7 @@
 			<ui5-link
 				class="ui5-nli-footer-showMore"
 				?hidden="{{hideShowMore}}"
-				@click="{{_onShowMoreClick}}"
+				@ui5-click="{{_onShowMoreClick}}"
 				aria-hidden="true"
 				href="#" {{!--without href ENTER does not trigger click --}}
 				showMore-btn

package/src/NotificationOverflowActionsPopover.hbs

@@ -13,6 +13,7 @@
 				?disabled="{{this.disabled}}"
 				design="{{this.design}}"
 				data-ui5-external-action-item-id="{{this.refItemid}}"
+				class="ui5-notification-overflow-list-btn"
 				>{{this.text}}
 			</ui5-button>
 		{{/each}}

package/src/ProductSwitchItem.js

@@ -42,7 +42,7 @@ const metadata = {
 		 * <br>
 		 * <pre>ui5-product-switch-item icon="palette"</pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/ShellBar.hbs

@@ -13,7 +13,7 @@
 		{{#if hasMenuItems}}
 				{{#unless showLogoInMenuButton}}
 					<span class="ui5-shellbar-logo"
-						role="button"
+						role="{{accLogoRole}}"
 						aria-label="{{_logoText}}"
 						title="{{_logoText}}"
 						@click="{{_logoPress}}"
@@ -40,7 +40,11 @@
 						data-ui5-stable="menu"
 					>
 						{{#if showLogoInMenuButton}}
-							<span class="ui5-shellbar-logo" aria-label="{{_logoText}}" title="{{_logoText}}">
+							<span
+								class="ui5-shellbar-logo"
+								role="{{accLogoRole}}"
+								aria-label="{{_logoText}}"
+								title="{{_logoText}}">
 								<slot name="logo"></slot>
 							</span>
 						{{/if}}
@@ -60,7 +64,7 @@
 		{{#unless hasMenuItems}}
 			{{#if hasLogo}}
 				<span class="ui5-shellbar-logo"
-					role="button"
+					role="{{accLogoRole}}"
 					aria-label="{{_logoText}}"
 					title="{{_logoText}}"
 					@click="{{_logoPress}}"

package/src/ShellBar.js

@@ -115,6 +115,20 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines additional accessibility roles for further customization.
+		 *
+		 * It supports the following fields:
+		 *  - <code>logoRole</code>: the accessibility role for the <code>logo</code>
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.6.0
+		 */
+		accessibilityRoles: {
+			type: Object,
+		},
+
 		/**
 		 * An object of strings that defines several additional accessibility texts
 		 * for even further customization.
@@ -1181,6 +1195,10 @@ class ShellBar extends UI5Element {
 		};
 	}
 
+	get accLogoRole() {
+		return this.accessibilityRoles.logoRole || "button";
+	}
+
 	static get dependencies() {
 		return [
 			Button,

package/src/SideNavigationItem.js

@@ -24,7 +24,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""

package/src/SideNavigationSubItem.js

@@ -34,7 +34,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""

package/src/Timeline.js

@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""

package/src/TimelineItem.hbs

@@ -31,7 +31,7 @@
 
 {{#*inline "name"}}
 	{{#if nameClickable}}
-		<ui5-link @click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
+		<ui5-link @ui5-click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
 	{{else}}
 		<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
 	{{/if}}

package/src/TimelineItem.js

@@ -33,7 +33,7 @@ const metadata = {
 		 * SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/UploadCollection.js

@@ -106,7 +106,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/UploadCollectionItem.hbs

@@ -22,7 +22,7 @@
 					</div>
 				{{else }}
 					{{#if fileNameClickable}}
-						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
+						<ui5-link class="ui5-uci-file-name" @ui5-click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
 						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}

package/src/ViewSettingsDialog.js

@@ -633,9 +633,8 @@ class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Resets the control settings to their initial state.
 	 */
-	_resetSettings() {
+	 _resetSettings() {
 		this._restoreSettings(this._initialSettings);
-		this._filterStepTwo = false;
 		this._recentlyFocused = this._sortOrder;
 		this._focusRecentlyUsedControl();
 	}
@@ -647,6 +646,8 @@ class ViewSettingsDialog extends UI5Element {
 	 */
 	_restoreSettings(settings) {
 		this._currentSettings = JSON.parse(JSON.stringify(settings));
+		this._currentMode = ViewSettingsDialogMode.Sort;
+		this._filterStepTwo = false;
 	}
 
 	/**
@@ -682,10 +683,13 @@ class ViewSettingsDialog extends UI5Element {
 	 * This method can be used after the dialog is initially open, as the dialog need to set its initial settings.
 	 * The <code>ui5-view-settings-dialog</code> throws an event called "before-open", this can be used as trigger point.
 	 * The object should have the following format:
-	 * <code>{
-	 *	{ "sortOrder" : "Ascending", "sortBy" : "Name", "filters" : [{"Filter 1": ["Some filter 1", "Some filter 2"]}, {"Filter 2": ["Some filter 4"]}]}
-	 * }</code>
-	 * @param {string} settings A value to be set as predefined settings.
+	 * <code>
+	 *  {sortOrder: "Ascending", sortBy: "Name", filters: [{"Filter 1": ["Some filter 1", "Some filter 2"]}, {"Filter 2": ["Some filter 4"]}]}
+	 * </code>
+   * @param {Object} settings - predefined settings.
+   * @param {string} settings.sortOrder - sort order
+   * @param {string} settings.sortBy - sort by
+   * @param {Array.<Object>} settings.filters - filters
 	 * @public
 	 */
 	setConfirmedSettings(settings) {

package/src/WizardStep.js

@@ -44,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 *
 		 * The SAP-icons font provides numerous options.
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public

package/src/themes/NotificationOverflowActionsPopover.css

@@ -5,4 +5,8 @@
 
 .ui5-notification-overflow-popover::part(content) {
 	padding: var(--_ui5-notification-overflow-popover-padding);
+}
+
+.ui5-notification-overflow-list-btn::part(button) {
+	justify-content: flex-start;
 }

package/src/types/IllustrationMessageSize.js

@@ -16,6 +16,7 @@ const IllustrationMessageSizes = {
 	 * until changed by the app developer.
 	 *
 	 * @public
+	 * @type {Auto}
 	 */
 	Auto: "Auto",
 	/**
@@ -24,24 +25,28 @@ const IllustrationMessageSizes = {
 	 * <b>Note:</b> When <code>Base</code> is in use, no illustration is displayed.
 	 *
 	 * @public
+	 * @type {Base}
 	 */
 	Base: "Base",
 
 	/**
 	 * Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).
 	 * @public
+	 * @type {Spot}
 	 */
 	Spot: "Spot",
 
 	/**
 	 * Dialog <code>Illustration</code> size (M breakpoint). Suitable for dialogs.
 	 * @public
+	 * @type {Dialog}
 	 */
 	Dialog: "Dialog",
 
 	/**
 	 * Scene <code>Illustration</code> size (L breakpoint). Suitable for a <code>Page</code> or a table.
 	 * @public
+	 * @type {Scene}
 	 */
 	Scene: "Scene",
 };