@openui5/sap.ui.webc.fiori 1.103.1 → 1.106.0

package/src/sap/ui/webc/fiori/library.config.js

@@ -1,3 +1,18 @@
-sap.ui.define([], function() {
+sap.ui.define([
+	"sap/ui/webc/common/thirdparty/base/CSP"
+], function(CSP) {
 	"use strict";
+
+	// configure third parties
+	window.sap.ui.loader.config({
+		shim: {
+			'sap/ui/webc/fiori/lib/zxing': {
+				amd: true,
+				exports: 'ZXing'
+			}
+		}
+	});
+
+	// configure CSS paths for CSP
+	CSP.setPackageCSSRoot("@ui5/webcomponents-fiori", sap.ui.require.toUrl("sap/ui/webc/fiori/thirdparty/css/"));
 });

package/src/sap/ui/webc/fiori/library.js

@@ -9,11 +9,10 @@
  */
 sap.ui.define([
 		"sap/ui/webc/common/library",
-		"sap/ui/webc/common/thirdparty/base/CSP",
 		"./thirdparty/Assets",
 		"./library.config"
 	], // library dependency
-	function(commonLibrary, CSP) {
+	function(commonLibrary) {
 
 		"use strict";
 
@@ -23,14 +22,14 @@ sap.ui.define([
 		 * @namespace
 		 * @alias sap.ui.webc.fiori
 		 * @author SAP SE
-		 * @version 1.103.1
+		 * @version 1.106.0
 		 * @public
 		 * @since 1.92.0
 		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
 		 */
 		var thisLib = sap.ui.getCore().initLibrary({
 			name: "sap.ui.webc.fiori",
-			version: "1.103.1",
+			version: "1.106.0",
 			dependencies: ["sap.ui.core", "sap.ui.webc.common"],
 			noLibraryCSS: true,
 			designtime: "sap/ui/webc/main/designtime/library.designtime",
@@ -53,6 +52,7 @@ sap.ui.define([
 			types: [
 				"sap.ui.webc.fiori.BarDesign",
 				"sap.ui.webc.fiori.FCLLayout",
+				"sap.ui.webc.fiori.IllustrationMessageSize",
 				"sap.ui.webc.fiori.IllustrationMessageType",
 				"sap.ui.webc.fiori.MediaGalleryItemLayout",
 				"sap.ui.webc.fiori.MediaGalleryLayout",
@@ -349,7 +349,7 @@ Use to display a detail page only, when the user should focus entirely on it.
 			/**
 				 * Desktop: 25/25/50 Start, Mid and End (expanded) columns are displayed 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
 				 */
 			ThreeColumnsEndExpanded: "ThreeColumnsEndExpanded",
@@ -357,7 +357,7 @@ Use to display all three pages (master, detail, detail-detail) when the user sho
 			/**
 				 * Desktop: 25/50/25 Start, Mid (expanded) and End columns are displayed 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.
 				 * @public
 				 */
 			ThreeColumnsMidExpanded: "ThreeColumnsMidExpanded",
@@ -365,7 +365,7 @@ Use to display all three pages (master, detail, detail-detail) when the user sho
 			/**
 				 * Desktop: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow 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. The detail-detail is still loaded and easily accessible with a layout arrow.
+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
 				 */
 			ThreeColumnsMidExpandedEndHidden: "ThreeColumnsMidExpandedEndHidden",
@@ -373,7 +373,7 @@ Use to display the master and detail pages when the user should focus on the det
 			/**
 				 * Desktop: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows 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. The detail-detail is still loaded and easily accessible with layout arrows.
+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
 				 */
 			ThreeColumnsStartExpandedEndHidden: "ThreeColumnsStartExpandedEndHidden",
@@ -381,7 +381,7 @@ Use to display the master and detail pages when the user should focus on the mas
 			/**
 				 * Desktop: 33/67/- Start and Mid (expanded) columns are displayed 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.
 				 * @public
 				 */
 			TwoColumnsMidExpanded: "TwoColumnsMidExpanded",
@@ -389,13 +389,60 @@ Use to display both a master and a detail page when the user should focus on the
 			/**
 				 * Desktop: 67/33/- Start (expanded) and Mid columns are displayed 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.
 				 * @public
 				 */
 			TwoColumnsStartExpanded: "TwoColumnsStartExpanded"
 		};
 
 
+		/**
+		 * Different types of IllustrationMessageSize.
+		 *
+		 * @enum {string}
+		 * @public
+		 * @since 1.106.0
+		 * @experimental Since 1.106.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+		thisLib.IllustrationMessageSize = {
+
+			/**
+				 * 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",
+
+			/**
+			 * 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",
+
+			/**
+			 * Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).
+			 * @public
+			 */
+			Spot: "Spot"
+		};
+
+
 		/**
 		 * Different illustration types of Illustrated Message.
 		 *
@@ -1240,8 +1287,6 @@ Use to display both a master and a detail page when the user should focus on the
 			Uploading: "Uploading"
 		};
 
-		CSP.setPackageCSSRoot("@ui5/webcomponents-fiori", sap.ui.require.toUrl("sap/ui/webc/fiori/thirdparty/css/"));
-
 		return thisLib;
 
 	});

package/src/sap/ui/webc/fiori/thirdparty/Assets.js

@@ -1,5 +1,3 @@
-sap.ui.define(['sap/ui/webc/main/thirdparty/Assets', './generated/json-imports/Themes', './generated/json-imports/i18n'], function (Assets, Themes, i18n) { 'use strict';
-
-
-
-});
+sap.ui.define(["sap/ui/webc/main/thirdparty/Assets", "./generated/json-imports/Themes", "./generated/json-imports/i18n"], function (_Assets, _Themes, _i18n) {
+  "use strict";
+});

package/src/sap/ui/webc/fiori/thirdparty/Bar.js

@@ -1,88 +1,211 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', './generated/templates/BarTemplate.lit', './types/BarDesign', './generated/themes/Bar.css'], function (UI5Element, litRender, ResizeHandler, BarTemplate_lit, BarDesign, Bar_css) { 'use strict';
-
-	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
-
-	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
-	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
-	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
-
-	const metadata = {
-		tag: "ui5-bar",
-		managedSlots: true,
-		fastNavigation: true,
-		properties:  {
-			design: {
-				type: BarDesign,
-				defaultValue: BarDesign.Header,
-			},
-			_shrinked: {
-				type: Boolean,
-			},
-		},
-		slots:  {
-			startContent: {
-				type: HTMLElement,
-			},
-			"default": {
-				type: HTMLElement,
-				propertyName: "middleContent",
-			},
-			endContent: {
-				type: HTMLElement,
-			},
-		},
-		events:  {
-		},
-	};
-	class Bar extends UI5Element__default {
-		static get metadata() {
-			return metadata;
-		}
-		static get render() {
-			return litRender__default;
-		}
-		static get styles() {
-			return Bar_css;
-		}
-		static get template() {
-			return BarTemplate_lit;
-		}
-		get accInfo() {
-			return {
-				"label": this.design,
-			};
-		}
-		constructor() {
-			super();
-			this._handleResizeBound = this.handleResize.bind(this);
-		}
-		handleResize() {
-			const bar = this.getDomRef();
-			const barWidth = bar.offsetWidth;
-			this._shrinked = Array.from(bar.children).some(element => {
-				return barWidth / 3 < element.offsetWidth;
-			});
-		}
-		get classes() {
-			return {
-				root: {
-					"ui5-bar-root": true,
-					"ui5-bar-root-shrinked": this._shrinked,
-				},
-			};
-		}
-		onBeforeRendering() {
-			[...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add("ui5-bar-content"));
-		}
-		onEnterDOM() {
-			ResizeHandler__default.register(this, this._handleResizeBound);
-		}
-		onExitDOM() {
-			ResizeHandler__default.deregister(this, this._handleResizeBound);
-		}
-	}
-	Bar.define();
-
-	return Bar;
-
-});
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "./generated/templates/BarTemplate.lit", "./types/BarDesign", "./generated/themes/Bar.css"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _BarTemplate, _BarDesign, _Bar) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _ResizeHandler = _interopRequireDefault(_ResizeHandler);
+  _BarTemplate = _interopRequireDefault(_BarTemplate);
+  _BarDesign = _interopRequireDefault(_BarDesign);
+  _Bar = _interopRequireDefault(_Bar);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  // Styles
+
+  /**
+   * @public
+   */
+  const metadata = {
+    tag: "ui5-bar",
+    managedSlots: true,
+    fastNavigation: true,
+    properties:
+    /** @lends sap.ui.webcomponents.fiori.Bar.prototype */
+    {
+      /**
+       * Defines the component's design.
+       *
+       * <br><br>
+       * <b>Note:</b>
+       * Available options are:
+       * <ul>
+       * <li><code>Header</code></li>
+       * <li><code>Subheader</code></li>
+       * <li><code>Footer</code></li>
+       * <li><code>FloatingFooter</code></li>
+       * </ul>
+       *
+       * @type {BarDesign}
+       * @defaultvalue "Header"
+       * @public
+       */
+      design: {
+        type: _BarDesign.default,
+        defaultValue: _BarDesign.default.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 */
+    {
+      /**
+       * Defines the content at the start of the bar
+       * @type {HTMLElement[]}
+       * @slot
+       * @public
+       */
+      startContent: {
+        type: HTMLElement
+      },
+
+      /**
+       * Defines the content in the middle of the bar
+       * @type {HTMLElement[]}
+       * @slot middleContent
+       * @public
+       */
+      "default": {
+        type: HTMLElement,
+        propertyName: "middleContent"
+      },
+
+      /**
+       * Defines the content at the end of the bar
+       * @type {HTMLElement[]}
+       * @slot
+       * @public
+       */
+      endContent: {
+        type: HTMLElement
+      }
+    },
+    events:
+    /** @lends sap.ui.webcomponents.fiori.Bar.prototype */
+    {//
+    }
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The Bar is a container which is primarily used to hold titles, buttons and input elements
+   * and its design and functionality is the basis for page headers and footers.
+   * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.
+   * It has the capability to center content, such as a title, while having other components on the left and right side.
+   *
+   * <h3>Usage</h3>
+   * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
+   * <br>
+   * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
+   *
+   * <h3>Responsive Behavior</h3>
+   * The default slot will be centered in the available space between the startContent and the endContent areas,
+   * therefore it might not always be centered in the entire bar.
+   *
+   * <h3>CSS Shadow Parts</h3>
+   *
+   * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+   * <br>
+   * The <code>ui5-bar</code> exposes the following CSS Shadow Parts:
+   * <ul>
+   * <li>bar - Used to style the wrapper of the content of the component</li>
+   * </ul>
+   *
+   * <h3>Keyboard Handling</h3>
+   *
+   * <h4>Fast Navigation</h4>
+   * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+   * In order to use this functionality, you need to import the following module:
+   * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+   * <br><br>
+   *
+   * <h3>ES6 Module Import</h3>
+   *
+   * <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webcomponents.fiori.Bar
+   * @implements sap.ui.webcomponents.fiori.IBar
+   * @extends UI5Element
+   * @tagname ui5-bar
+   * @public
+   * @since 1.0.0-rc.11
+   */
+
+  class Bar extends _UI5Element.default {
+    static get metadata() {
+      return metadata;
+    }
+
+    static get render() {
+      return _LitRenderer.default;
+    }
+
+    static get styles() {
+      return _Bar.default;
+    }
+
+    static get template() {
+      return _BarTemplate.default;
+    }
+
+    get accInfo() {
+      return {
+        "label": this.design
+      };
+    }
+
+    constructor() {
+      super();
+      this._handleResizeBound = this.handleResize.bind(this);
+    }
+
+    handleResize() {
+      const bar = this.getDomRef();
+      const barWidth = bar.offsetWidth;
+      this._shrinked = Array.from(bar.children).some(element => {
+        return barWidth / 3 < element.offsetWidth;
+      });
+    }
+
+    get classes() {
+      return {
+        root: {
+          "ui5-bar-root": true,
+          "ui5-bar-root-shrinked": this._shrinked
+        }
+      };
+    }
+
+    onBeforeRendering() {
+      // Next row is specific for IE11. Please remove after stop support and edit css file
+      [...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add("ui5-bar-content"));
+    }
+
+    onEnterDOM() {
+      _ResizeHandler.default.register(this, this._handleResizeBound);
+    }
+
+    onExitDOM() {
+      _ResizeHandler.default.deregister(this, this._handleResizeBound);
+    }
+
+  }
+
+  Bar.define();
+  var _default = Bar;
+  _exports.default = _default;
+});