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

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

@@ -1,97 +1,234 @@
-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', 'sap/ui/webc/common/thirdparty/base/MediaRange', './types/PageBackgroundDesign', './generated/templates/PageTemplate.lit', './generated/themes/Page.css'], function (UI5Element, litRender, ResizeHandler, MediaRange, PageBackgroundDesign, PageTemplate_lit, Page_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);
-	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
-
-	const metadata = {
-		tag: "ui5-page",
-		managedSlots: true,
-		languageAware: true,
-		properties:  {
-			backgroundDesign: {
-				type: String,
-				defaultValue: PageBackgroundDesign.Solid,
-			},
-			disableScrolling: {
-				type: Boolean,
-			},
-			floatingFooter: {
-				type: Boolean,
-			},
-			hideFooter: {
-				type: Boolean,
-			},
-			mediaRange: {
-				type: String,
-			},
-		},
-		slots:  {
-			header: {
-				type: HTMLElement,
-			},
-			"default": {
-				propertyName: "content",
-				type: HTMLElement,
-			},
-			footer: {
-				type: HTMLElement,
-			},
-		},
-		events:  {
-		},
-	};
-	class Page extends UI5Element__default {
-		static get metadata() {
-			return metadata;
-		}
-		static get render() {
-			return litRender__default;
-		}
-		static get styles() {
-			return Page_css;
-		}
-		static get template() {
-			return PageTemplate_lit;
-		}
-		constructor() {
-			super();
-			this._updateMediaRange = this.updateMediaRange.bind(this);
-		}
-		onEnterDOM() {
-			ResizeHandler__default.register(this, this._updateMediaRange);
-		}
-		onExitDOM() {
-			ResizeHandler__default.deregister(this, this._updateMediaRange);
-		}
-		updateMediaRange() {
-			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
-		}
-		get _contentBottom() {
-			return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
-		}
-		get _contentPaddingBottom() {
-			return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
-		}
-		get _contentTop() {
-			return this.header.length ? "2.75rem" : "0rem";
-		}
-		get styles() {
-			return {
-				content: {
-					"padding-bottom": this.footer.length && this._contentPaddingBottom,
-					"bottom": this.footer.length && this._contentBottom,
-					"top": this._contentTop,
-				},
-				footer: {},
-			};
-		}
-	}
-	Page.define();
-
-	return Page;
-
-});
+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", "sap/ui/webc/common/thirdparty/base/MediaRange", "./types/PageBackgroundDesign", "./generated/templates/PageTemplate.lit", "./generated/themes/Page.css"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _MediaRange, _PageBackgroundDesign, _PageTemplate, _Page) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _ResizeHandler = _interopRequireDefault(_ResizeHandler);
+  _MediaRange = _interopRequireDefault(_MediaRange);
+  _PageBackgroundDesign = _interopRequireDefault(_PageBackgroundDesign);
+  _PageTemplate = _interopRequireDefault(_PageTemplate);
+  _Page = _interopRequireDefault(_Page);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  // Template
+  // Styles
+
+  /**
+   * @public
+   */
+  const metadata = {
+    tag: "ui5-page",
+    managedSlots: true,
+    languageAware: true,
+    properties:
+    /** @lends sap.ui.webcomponents.fiori.Page.prototype */
+    {
+      /**
+       * Defines the background color of the <code>ui5-page</code>.
+       * <br><br>
+       * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+       * <br><br>
+       * Available options are:
+       * <ul>
+       * <li><code>Solid</code></li> (default)
+       * <li><code>Transparent</code></li>
+       * <li><code>List</code></li>
+       * </ul>
+       * @type {PageBackgroundDesign}
+       * @defaultvalue "Solid"
+       * @public
+       */
+      backgroundDesign: {
+        type: String,
+        defaultValue: _PageBackgroundDesign.default.Solid
+      },
+
+      /**
+       * Disables vertical scrolling of page content.
+       * If set to true, there will be no vertical scrolling at all.
+       *
+       * @type {boolean}
+       * @defaultvalue false
+       * @public
+       */
+      disableScrolling: {
+        type: Boolean
+      },
+
+      /**
+       * Defines if the footer should float over the content.
+       * <br><br>
+       * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
+       * @type {boolean}
+       * @defaultvalue true
+       * @public
+       */
+      floatingFooter: {
+        type: Boolean
+      },
+
+      /**
+       * Defines the footer visibility.
+       *
+       * @type {boolean}
+       * @defaultvalue false
+       * @public
+       */
+      hideFooter: {
+        type: Boolean
+      },
+
+      /**
+       * Defines the current media query size.
+       *
+       * @type {string}
+       * @private
+       * @since 1.0.0-rc.15
+       */
+      mediaRange: {
+        type: String
+      }
+    },
+    slots:
+    /** @lends sap.ui.webcomponents.fiori.Page.prototype */
+    {
+      /**
+       * Defines the header HTML Element.
+       *
+       * @type {sap.ui.webcomponents.fiori.IBar}
+       * @slot
+       * @public
+       */
+      header: {
+        type: HTMLElement
+      },
+
+      /**
+       * Defines the content HTML Element.
+       *
+       * @type {HTMLElement[]}
+       * @slot content
+       * @public
+       */
+      "default": {
+        propertyName: "content",
+        type: HTMLElement
+      },
+
+      /**
+       * Defines the footer HTML Element.
+       *
+       * @type {sap.ui.webcomponents.fiori.IBar}
+       * @slot
+       * @public
+       */
+      footer: {
+        type: HTMLElement
+      }
+    },
+    events:
+    /** @lends sap.ui.webcomponents.fiori.Page.prototype */
+    {}
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   *
+   * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+   * The page has three distinct areas that can hold content - a header, content area and a footer.
+   * <h3>Structure</h3>
+   * <h4>Header</h4>
+   * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+   * <h4>Content</h4>
+   * The content occupies the main part of the page. Only the content area is scrollable by default.
+   * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
+   * <h4>Footer</h4>
+   * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
+   * This is enabled with the <code>floatingFooter</code> property.
+   *
+   * <b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+   * that there is enough space for the <code>ui5-page</code> to be rendered.
+   *
+   *
+   * <h3>ES6 Module Import</h3>
+   *
+   * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webcomponents.fiori.Page
+   * @extends UI5Element
+   * @tagname ui5-page
+   * @since 1.0.0-rc.12
+   * @public
+   */
+
+  class Page extends _UI5Element.default {
+    static get metadata() {
+      return metadata;
+    }
+
+    static get render() {
+      return _LitRenderer.default;
+    }
+
+    static get styles() {
+      return _Page.default;
+    }
+
+    static get template() {
+      return _PageTemplate.default;
+    }
+
+    constructor() {
+      super();
+      this._updateMediaRange = this.updateMediaRange.bind(this);
+    }
+
+    onEnterDOM() {
+      _ResizeHandler.default.register(this, this._updateMediaRange);
+    }
+
+    onExitDOM() {
+      _ResizeHandler.default.deregister(this, this._updateMediaRange);
+    }
+
+    updateMediaRange() {
+      this.mediaRange = _MediaRange.default.getCurrentRange(_MediaRange.default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+    }
+
+    get _contentBottom() {
+      return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
+    }
+
+    get _contentPaddingBottom() {
+      return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
+    }
+
+    get _contentTop() {
+      return this.header.length ? "2.75rem" : "0rem";
+    }
+
+    get styles() {
+      return {
+        content: {
+          "padding-bottom": this.footer.length && this._contentPaddingBottom,
+          "bottom": this.footer.length && this._contentBottom,
+          "top": this._contentTop
+        },
+        footer: {}
+      };
+    }
+
+  }
+
+  Page.define();
+  var _default = Page;
+  _exports.default = _default;
+});

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

@@ -1,116 +1,206 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', './generated/templates/ProductSwitchTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/ProductSwitch.css'], function (i18nBundle, UI5Element, ItemNavigation, ResizeHandler, Integer, litRender, Keys, ProductSwitchTemplate_lit, i18nDefaults, ProductSwitch_css) { 'use strict';
-
-	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
-
-	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
-	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
-	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
-	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
-	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
-
-	const metadata = {
-		tag: "ui5-product-switch",
-		properties:  {
-			desktopColumns: {
-				type: Integer__default,
-			},
-		},
-		managedSlots: true,
-		slots:  {
-			"default": {
-				propertyName: "items",
-				type: HTMLElement,
-			},
-		},
-	};
-	class ProductSwitch extends UI5Element__default {
-		constructor() {
-			super();
-			this._currentIndex = 0;
-			this._rowSize = 4;
-			this._itemNavigation = new ItemNavigation__default(this, {
-				rowSize: this._rowSize,
-				getItemsCallback: () => this.items,
-			});
-		}
-		static get metadata() {
-			return metadata;
-		}
-		static get render() {
-			return litRender__default;
-		}
-		static get styles() {
-			return ProductSwitch_css;
-		}
-		static get template() {
-			return ProductSwitchTemplate_lit;
-		}
-		static get ROW_MIN_WIDTH() {
-			return {
-				ONE_COLUMN: 600,
-				THREE_COLUMN: 900,
-			};
-		}
-		static async onDefine() {
-			ProductSwitch.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
-		}
-		get _ariaLabelText() {
-			return ProductSwitch.i18nBundle.getText(i18nDefaults.PRODUCT_SWITCH_CONTAINER_LABEL);
-		}
-		onEnterDOM() {
-			this._handleResizeBound = this._handleResize.bind(this);
-			ResizeHandler__default.register(document.body, this._handleResizeBound);
-		}
-		onExitDOM() {
-			ResizeHandler__default.deregister(document.body, this._handleResizeBound);
-		}
-		onBeforeRendering() {
-			this.desktopColumns = this.items.length > 6 ? 4 : 3;
-		}
-		_handleResize() {
-			const documentWidth = document.body.clientWidth;
-			if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
-				this._setRowSize(1);
-			} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
-				this._setRowSize(3);
-			} else {
-				this._setRowSize(4);
-			}
-		}
-		handleProductSwitchItemClick(event) {
-			this.items.forEach(item => { item.selected = false; });
-			event.target.selected = true;
-		}
-		_onfocusin(event) {
-			const target = event.target;
-			this._itemNavigation.setCurrentItem(target);
-			this._currentIndex = this.items.indexOf(target);
-		}
-		_setRowSize(size) {
-			this._rowSize = size;
-			this._itemNavigation.setRowSize(size);
-		}
-		_onkeydown(event) {
-			if (Keys.isDown(event)) {
-				this._handleDown(event);
-			} else if (Keys.isUp(event)) {
-				this._handleUp(event);
-			}
-		}
-		_handleDown(event) {
-			const itemsLength = this.items.length;
-			if (this._currentIndex + this._rowSize > itemsLength) {
-				event.stopPropagation();
-			}
-		}
-		_handleUp(event) {
-			if (this._currentIndex - this._rowSize < 0) {
-				event.stopPropagation();
-			}
-		}
-	}
-	ProductSwitch.define();
-
-	return ProductSwitch;
-
-});
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "./generated/templates/ProductSwitchTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/ProductSwitch.css"], function (_exports, _i18nBundle, _UI5Element, _ItemNavigation, _ResizeHandler, _Integer, _LitRenderer, _Keys, _ProductSwitchTemplate, _i18nDefaults, _ProductSwitch) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _ItemNavigation = _interopRequireDefault(_ItemNavigation);
+  _ResizeHandler = _interopRequireDefault(_ResizeHandler);
+  _Integer = _interopRequireDefault(_Integer);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _ProductSwitchTemplate = _interopRequireDefault(_ProductSwitchTemplate);
+  _ProductSwitch = _interopRequireDefault(_ProductSwitch);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  // Styles
+
+  /**
+   * @public
+   */
+  const metadata = {
+    tag: "ui5-product-switch",
+    properties:
+    /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */
+    {
+      /**
+       * Indicates how many columns are displayed.
+       * @private
+       */
+      desktopColumns: {
+        type: _Integer.default
+      }
+    },
+    managedSlots: true,
+    slots:
+    /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */
+    {
+      /**
+       * Defines the items of the <code>ui5-product-switch</code>.
+       *
+       * @type {sap.ui.webcomponents.fiori.IProductSwitchItem[]}
+       * @slot items
+       * @public
+       */
+      "default": {
+        propertyName: "items",
+        type: HTMLElement
+      }
+    }
+  };
+  /**
+   * @class
+   * <h3 class="comment-api-title">Overview</h3>
+   *
+   * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
+   * and allows the user to easily switch between products.
+   * <br><br>
+   *
+   * <h3>Keyboard Handling</h3>
+   * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+   * When focused, the user can use the following keyboard
+   * shortcuts in order to perform a navigation:
+   * <br>
+   * <ul>
+   * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
+   * <li>[UP/DOWN] - Navigates up and down the items </li>
+   * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
+   * </ul>
+   * <br>
+   * <br>
+   *
+   * <h3>ES6 Module Import</h3>
+   * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
+   * <br>
+   * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webcomponents.fiori.ProductSwitch
+   * @extends sap.ui.webcomponents.base.UI5Element
+   * @tagname ui5-product-switch
+   * @appenddocs ProductSwitchItem
+   * @public
+   * @since 1.0.0-rc.5
+   */
+
+  class ProductSwitch extends _UI5Element.default {
+    constructor() {
+      super();
+      this._currentIndex = 0;
+      this._rowSize = 4;
+      this._itemNavigation = new _ItemNavigation.default(this, {
+        rowSize: this._rowSize,
+        getItemsCallback: () => this.items
+      });
+    }
+
+    static get metadata() {
+      return metadata;
+    }
+
+    static get render() {
+      return _LitRenderer.default;
+    }
+
+    static get styles() {
+      return _ProductSwitch.default;
+    }
+
+    static get template() {
+      return _ProductSwitchTemplate.default;
+    }
+
+    static get ROW_MIN_WIDTH() {
+      return {
+        ONE_COLUMN: 600,
+        THREE_COLUMN: 900
+      };
+    }
+
+    static async onDefine() {
+      ProductSwitch.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents-fiori");
+    }
+
+    get _ariaLabelText() {
+      return ProductSwitch.i18nBundle.getText(_i18nDefaults.PRODUCT_SWITCH_CONTAINER_LABEL);
+    }
+
+    onEnterDOM() {
+      this._handleResizeBound = this._handleResize.bind(this);
+
+      _ResizeHandler.default.register(document.body, this._handleResizeBound);
+    }
+
+    onExitDOM() {
+      _ResizeHandler.default.deregister(document.body, this._handleResizeBound);
+    }
+
+    onBeforeRendering() {
+      this.desktopColumns = this.items.length > 6 ? 4 : 3;
+    }
+
+    _handleResize() {
+      const documentWidth = document.body.clientWidth;
+
+      if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
+        this._setRowSize(1);
+      } else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
+        this._setRowSize(3);
+      } else {
+        this._setRowSize(4);
+      }
+    }
+
+    handleProductSwitchItemClick(event) {
+      this.items.forEach(item => {
+        item.selected = false;
+      });
+      event.target.selected = true;
+    }
+
+    _onfocusin(event) {
+      const target = event.target;
+
+      this._itemNavigation.setCurrentItem(target);
+
+      this._currentIndex = this.items.indexOf(target);
+    }
+
+    _setRowSize(size) {
+      this._rowSize = size;
+
+      this._itemNavigation.setRowSize(size);
+    }
+
+    _onkeydown(event) {
+      if ((0, _Keys.isDown)(event)) {
+        this._handleDown(event);
+      } else if ((0, _Keys.isUp)(event)) {
+        this._handleUp(event);
+      }
+    }
+
+    _handleDown(event) {
+      const itemsLength = this.items.length;
+
+      if (this._currentIndex + this._rowSize > itemsLength) {
+        // border reached, do nothing
+        event.stopPropagation();
+      }
+    }
+
+    _handleUp(event) {
+      if (this._currentIndex - this._rowSize < 0) {
+        // border reached, do nothing
+        event.stopPropagation();
+      }
+    }
+
+  }
+
+  ProductSwitch.define();
+  var _default = ProductSwitch;
+  _exports.default = _default;
+});