@openui5/sap.ui.webc.main 1.119.0 → 1.120.0

package/src/sap/ui/webc/main/thirdparty/ToolbarButton.js

@@ -0,0 +1,116 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/types/CSSSize", "./Button", "./types/ButtonDesign", "./ToolbarItem", "./generated/templates/ToolbarButtonTemplate.lit", "./generated/templates/ToolbarPopoverButtonTemplate.lit", "./generated/themes/ToolbarButtonPopover.css", "./ToolbarRegistry"], function (_exports, _customElement, _property, _event, _CSSSize, _Button, _ButtonDesign, _ToolbarItem, _ToolbarButtonTemplate, _ToolbarPopoverButtonTemplate, _ToolbarButtonPopover, _ToolbarRegistry) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _event = _interopRequireDefault(_event);
+  _CSSSize = _interopRequireDefault(_CSSSize);
+  _Button = _interopRequireDefault(_Button);
+  _ButtonDesign = _interopRequireDefault(_ButtonDesign);
+  _ToolbarItem = _interopRequireDefault(_ToolbarItem);
+  _ToolbarButtonTemplate = _interopRequireDefault(_ToolbarButtonTemplate);
+  _ToolbarPopoverButtonTemplate = _interopRequireDefault(_ToolbarPopoverButtonTemplate);
+  _ToolbarButtonPopover = _interopRequireDefault(_ToolbarButtonPopover);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The <code>ui5-toolbar-button</code> represents an abstract action,
+   * used in the <code>ui5-toolbar</code>.
+   *
+   * <h3>ES6 Module Import</h3>
+   * <code>import "@ui5/webcomponents/dist/ToolbarButton";</code>
+   *
+   * @constructor
+   * @abstract
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarButton
+   * @extends sap.ui.webc.main.ToolbarItem
+   * @tagname ui5-toolbar-button
+   * @public
+   * @implements sap.ui.webc.main.IToolbarItem
+   * @since 1.17.0
+   */
+  let ToolbarButton = class ToolbarButton extends _ToolbarItem.default {
+    static get staticAreaStyles() {
+      return _ToolbarButtonPopover.default;
+    }
+    get styles() {
+      return {
+        width: this.width,
+        display: this.hidden ? "none" : "inline-block"
+      };
+    }
+    get containsText() {
+      return true;
+    }
+    static get toolbarTemplate() {
+      return _ToolbarButtonTemplate.default;
+    }
+    static get toolbarPopoverTemplate() {
+      return _ToolbarPopoverButtonTemplate.default;
+    }
+    get subscribedEvents() {
+      const map = new Map();
+      map.set("click", {
+        preventClosing: false
+      });
+      return map;
+    }
+  };
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarButton.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)({
+    type: _ButtonDesign.default,
+    defaultValue: _ButtonDesign.default.Default
+  })], ToolbarButton.prototype, "design", void 0);
+  __decorate([(0, _property.default)()], ToolbarButton.prototype, "icon", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarButton.prototype, "iconEnd", void 0);
+  __decorate([(0, _property.default)()], ToolbarButton.prototype, "tooltip", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: undefined
+  })], ToolbarButton.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: ""
+  })], ToolbarButton.prototype, "accessibleNameRef", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ToolbarButton.prototype, "accessibilityAttributes", void 0);
+  __decorate([(0, _property.default)()], ToolbarButton.prototype, "text", void 0);
+  __decorate([(0, _property.default)({
+    validator: _CSSSize.default
+  })], ToolbarButton.prototype, "width", void 0);
+  ToolbarButton = __decorate([(0, _customElement.default)({
+    tag: "ui5-toolbar-button",
+    dependencies: [_Button.default]
+  })
+  /**
+   * Fired when the component is activated either with a
+   * mouse/tap or by using the Enter or Space key.
+   * <br><br>
+   * <b>Note:</b> The event will not be fired if the <code>disabled</code>
+   * property is set to <code>true</code>.
+   *
+   * @event sap.ui.webc.main.ToolbarButton#click
+   * @public
+   */, (0, _event.default)("click")], ToolbarButton);
+  (0, _ToolbarRegistry.registerToolbarItem)(ToolbarButton);
+  ToolbarButton.define();
+  var _default = ToolbarButton;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarItem.js

@@ -0,0 +1,115 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "./types/ToolbarItemOverflowBehavior"], function (_exports, _UI5Element, _property, _ToolbarItemOverflowBehavior) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _property = _interopRequireDefault(_property);
+  _ToolbarItemOverflowBehavior = _interopRequireDefault(_ToolbarItemOverflowBehavior);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @class
+   *
+   * The <code>ui5-tb-item</code> represents an abstract class for items,
+   * used in the <code>ui5-toolbar</code>.
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarItem
+   * @extends sap.ui.webc.base.UI5Element
+   * @abstract
+   * @public
+   * @since 1.17.0
+   */
+  class ToolbarItem extends _UI5Element.default {
+    /**
+    * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
+    * @returns {boolean}
+    * @protected
+    */
+    get ignoreSpace() {
+      return false;
+    }
+    /**
+     * Returns if the item contains text. Used to position the text properly inside the popover.
+     * Aligned left if the item has text, default aligned otherwise.
+     * @protected
+     * @returns {boolean}
+     */
+    get containsText() {
+      return false;
+    }
+    /**
+     * Returns if the item is flexible. An item that is returning true for this property will make
+     * the toolbar expand to fill the 100% width of its container.
+     * @protected
+     * @returns {Boolean}
+     */
+    get hasFlexibleWidth() {
+      return false;
+    }
+    /**
+     * Returns if the item is interactive.
+     * This value is used to determinate if the toolbar should have its accessibility role and attributes set.
+     * At least two interactive items are needed for the toolbar to have the role="toolbar" attribute set.
+     * @protected
+     * @returns {boolean}
+     */
+    get isInteractive() {
+      return true;
+    }
+    /**
+     * Returns if the item is separator.
+     * @protected
+     * @returns {boolean}
+     */
+    get isSeparator() {
+      return false;
+    }
+    /**
+     * Returns the template for the toolbar item.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarTemplate() {
+      throw new Error("Template must be defined");
+    }
+    /**
+     * Returns the template for the toolbar item popover.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarPopoverTemplate() {
+      throw new Error("Popover template must be defined");
+    }
+    /**
+     * Returns the events that the item is subscribed to.
+     * @protected
+     * @returns {Map}
+     */
+    get subscribedEvents() {
+      return new Map();
+    }
+    get stableDomRef() {
+      return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+  }
+  __decorate([(0, _property.default)({
+    type: _ToolbarItemOverflowBehavior.default,
+    defaultValue: _ToolbarItemOverflowBehavior.default.Default
+  })], ToolbarItem.prototype, "overflowPriority", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarItem.prototype, "preventOverflowClosing", void 0);
+  var _default = ToolbarItem;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarRegistry.js

@@ -0,0 +1,34 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/getSharedResource"], function (_exports, _getSharedResource) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.registerToolbarItem = _exports.getRegisteredToolbarItem = _exports.getRegisteredStyles = _exports.getRegisteredStaticAreaStyles = _exports.getRegisteredDependencies = void 0;
+  _getSharedResource = _interopRequireDefault(_getSharedResource);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  const registry = (0, _getSharedResource.default)("ToolbarItem.registry", new Map());
+  const registerToolbarItem = ElementClass => {
+    registry.set(ElementClass.name, ElementClass);
+  };
+  _exports.registerToolbarItem = registerToolbarItem;
+  const getRegisteredToolbarItem = name => {
+    if (!registry.has(name)) {
+      throw new Error(`No template found for ${name}`);
+    }
+    return registry.get(name);
+  };
+  _exports.getRegisteredToolbarItem = getRegisteredToolbarItem;
+  const getRegisteredStyles = () => {
+    return [...registry.values()].map(ElementClass => ElementClass.styles);
+  };
+  _exports.getRegisteredStyles = getRegisteredStyles;
+  const getRegisteredStaticAreaStyles = () => {
+    return [...registry.values()].map(ElementClass => ElementClass.staticAreaStyles);
+  };
+  _exports.getRegisteredStaticAreaStyles = getRegisteredStaticAreaStyles;
+  const getRegisteredDependencies = () => {
+    return [...registry.values()].map(ElementClass => ElementClass.dependencies).flat();
+  };
+  _exports.getRegisteredDependencies = getRegisteredDependencies;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarSelect.js

@@ -0,0 +1,166 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/types/CSSSize", "./ToolbarRegistry", "./generated/templates/ToolbarSelectTemplate.lit", "./generated/templates/ToolbarPopoverSelectTemplate.lit", "./ToolbarItem", "./Select", "./Option", "./ToolbarSelectOption"], function (_exports, _customElement, _property, _slot, _event, _ValueState, _CSSSize, _ToolbarRegistry, _ToolbarSelectTemplate, _ToolbarPopoverSelectTemplate, _ToolbarItem, _Select, _Option, _ToolbarSelectOption) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
+  _event = _interopRequireDefault(_event);
+  _ValueState = _interopRequireDefault(_ValueState);
+  _CSSSize = _interopRequireDefault(_CSSSize);
+  _ToolbarSelectTemplate = _interopRequireDefault(_ToolbarSelectTemplate);
+  _ToolbarPopoverSelectTemplate = _interopRequireDefault(_ToolbarPopoverSelectTemplate);
+  _ToolbarItem = _interopRequireDefault(_ToolbarItem);
+  _Select = _interopRequireDefault(_Select);
+  _Option = _interopRequireDefault(_Option);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+
+  // Templates
+
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
+   * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
+   *
+   * <h3>ES6 Module Import</h3>
+   * <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
+   * <br>
+   * <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
+   * @constructor
+   * @abstract
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarSelect
+   * @extends sap.ui.webc.base.UI5Element
+   * @tagname ui5-toolbar-select
+   * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+   * @public
+   * @implements sap.ui.webc.main.IToolbarItem
+   * @since 1.17.0
+   */
+  let ToolbarSelect = class ToolbarSelect extends _ToolbarItem.default {
+    static get toolbarTemplate() {
+      return _ToolbarSelectTemplate.default;
+    }
+    static get toolbarPopoverTemplate() {
+      return _ToolbarPopoverSelectTemplate.default;
+    }
+    get subscribedEvents() {
+      const map = new Map();
+      map.set("click", {
+        preventClosing: true
+      });
+      map.set("change", {
+        preventClosing: false
+      });
+      map.set("open", {
+        preventClosing: true
+      });
+      map.set("close", {
+        preventClosing: true
+      });
+      return map;
+    }
+    constructor() {
+      super();
+      this._onEvent = this._onEventHandler.bind(this);
+    }
+    onEnterDOM() {
+      this.attachEventListeners();
+    }
+    onExitDOM() {
+      this.detachEventListeners();
+    }
+    attachEventListeners() {
+      [...this.subscribedEvents.keys()].forEach(e => {
+        this.addEventListener(e, this._onEvent);
+      });
+    }
+    detachEventListeners() {
+      [...this.subscribedEvents.keys()].forEach(e => {
+        this.removeEventListener(e, this._onEvent);
+      });
+    }
+    _onEventHandler(e) {
+      if (e.type === "change") {
+        // update options
+        const selectedOption = e.detail.selectedOption;
+        const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
+        this.options.forEach((option, index) => {
+          if (index === selectedOptionIndex) {
+            option.setAttribute("selected", "");
+          } else {
+            option.removeAttribute("selected");
+          }
+        });
+      }
+    }
+    get styles() {
+      return {
+        width: this.width
+      };
+    }
+  };
+  __decorate([(0, _property.default)({
+    validator: _CSSSize.default
+  })], ToolbarSelect.prototype, "width", void 0);
+  __decorate([(0, _slot.default)({
+    "default": true,
+    type: HTMLElement,
+    invalidateOnChildChange: true
+  })], ToolbarSelect.prototype, "options", void 0);
+  __decorate([(0, _property.default)({
+    type: _ValueState.default,
+    defaultValue: _ValueState.default.None
+  })], ToolbarSelect.prototype, "valueState", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarSelect.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)()], ToolbarSelect.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)()], ToolbarSelect.prototype, "accessibleNameRef", void 0);
+  ToolbarSelect = __decorate([(0, _customElement.default)({
+    tag: "ui5-toolbar-select",
+    dependencies: [_Select.default, _Option.default]
+  })
+  /**
+   * Fired when the selected option changes.
+   *
+   * @event sap.ui.webc.main.ToolbarSelect#change
+   * @allowPreventDefault
+   * @param {HTMLElement} selectedOption the selected option.
+   * @public
+   */, (0, _event.default)("change", {
+    detail: {
+      selectedOption: {
+        type: HTMLElement
+      }
+    }
+  })
+  /**
+   * Fired after the component's dropdown menu opens.
+   *
+   * @event sap.ui.webc.main.ToolbarSelect#open
+   * @public
+   */, (0, _event.default)("open")
+  /**
+   * Fired after the component's dropdown menu closes.
+   *
+   * @event sap.ui.webc.main.ToolbarSelect#close
+   * @public
+   */, (0, _event.default)("close")], ToolbarSelect);
+  (0, _ToolbarRegistry.registerToolbarItem)(ToolbarSelect);
+  ToolbarSelect.define();
+  var _default = ToolbarSelect;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarSelectOption.js

@@ -0,0 +1,50 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/property"], function (_exports, _UI5Element, _customElement, _slot, _property) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _slot = _interopRequireDefault(_slot);
+  _property = _interopRequireDefault(_property);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   *
+   * The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarSelectOption
+   * @extends sap.ui.webc.base.UI5Element
+   * @abstract
+   * @tagname ui5-toolbar-select-option
+   * @implements sap.ui.webc.main.IToolbarSelectOption
+   * @public
+   * @since 1.17.0
+   */
+  let ToolbarSelectOption = class ToolbarSelectOption extends _UI5Element.default {};
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarSelectOption.prototype, "selected", void 0);
+  __decorate([(0, _slot.default)({
+    type: Node,
+    "default": true,
+    invalidateOnChildChange: true
+  })], ToolbarSelectOption.prototype, "text", void 0);
+  ToolbarSelectOption = __decorate([(0, _customElement.default)("ui5-toolbar-select-option")], ToolbarSelectOption);
+  ToolbarSelectOption.define();
+  var _default = ToolbarSelectOption;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarSeparator.js

@@ -0,0 +1,62 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "./generated/templates/ToolbarSeparatorTemplate.lit", "./generated/templates/ToolbarPopoverSeparatorTemplate.lit", "./ToolbarRegistry", "./ToolbarItem"], function (_exports, _customElement, _property, _ToolbarSeparatorTemplate, _ToolbarPopoverSeparatorTemplate, _ToolbarRegistry, _ToolbarItem) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _ToolbarSeparatorTemplate = _interopRequireDefault(_ToolbarSeparatorTemplate);
+  _ToolbarPopoverSeparatorTemplate = _interopRequireDefault(_ToolbarPopoverSeparatorTemplate);
+  _ToolbarItem = _interopRequireDefault(_ToolbarItem);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The <code>ui5-toolbar-separator</code> is an element, used for visual separation between two elements.
+   * It takes no space in calculating toolbar items width.
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarSeparator
+   * @extends sap.ui.webc.main.ToolbarItem
+   * @tagname ui5-toolbar-separator
+   * @since 1.17.0
+   * @abstract
+   * @implements sap.ui.webc.main.IToolbarItem
+   * @public
+   */
+  let ToolbarSeparator = class ToolbarSeparator extends _ToolbarItem.default {
+    static get toolbarTemplate() {
+      return _ToolbarSeparatorTemplate.default;
+    }
+    static get toolbarPopoverTemplate() {
+      return _ToolbarPopoverSeparatorTemplate.default;
+    }
+    get isSeparator() {
+      return true;
+    }
+    get isInteractive() {
+      return false;
+    }
+  };
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ToolbarSeparator.prototype, "visible", void 0);
+  ToolbarSeparator = __decorate([(0, _customElement.default)({
+    tag: "ui5-toolbar-separator"
+  })], ToolbarSeparator);
+  (0, _ToolbarRegistry.registerToolbarItem)(ToolbarSeparator);
+  ToolbarSeparator.define();
+  var _default = ToolbarSeparator;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/ToolbarSpacer.js

@@ -0,0 +1,72 @@
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/types/CSSSize", "./generated/templates/ToolbarSpacerTemplate.lit", "./ToolbarItem", "./ToolbarRegistry"], function (_exports, _property, _customElement, _CSSSize, _ToolbarSpacerTemplate, _ToolbarItem, _ToolbarRegistry) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _property = _interopRequireDefault(_property);
+  _customElement = _interopRequireDefault(_customElement);
+  _CSSSize = _interopRequireDefault(_CSSSize);
+  _ToolbarSpacerTemplate = _interopRequireDefault(_ToolbarSpacerTemplate);
+  _ToolbarItem = _interopRequireDefault(_ToolbarItem);
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The <code>ui5-toolbar-spacer</code> is an element, used for taking needed space for toolbar items to take 100% width.
+   * It takes no space in calculating toolbar items width.
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.ToolbarSpacer
+   * @extends sap.ui.webc.main.ToolbarItem
+   * @tagname ui5-toolbar-spacer
+   * @abstract
+   * @since 1.17.0
+   * @implements sap.ui.webc.main.IToolbarItem
+   * @public
+   */
+  let ToolbarSpacer = class ToolbarSpacer extends _ToolbarItem.default {
+    get styles() {
+      return this.width ? {
+        width: this.width
+      } : {
+        flex: "auto"
+      };
+    }
+    get ignoreSpace() {
+      return this.width === "";
+    }
+    get hasFlexibleWidth() {
+      return this.width === "";
+    }
+    static get toolbarTemplate() {
+      return _ToolbarSpacerTemplate.default;
+    }
+    static get toolbarPopoverTemplate() {
+      return _ToolbarSpacerTemplate.default;
+    }
+    get isInteractive() {
+      return false;
+    }
+  };
+  __decorate([(0, _property.default)({
+    validator: _CSSSize.default
+  })], ToolbarSpacer.prototype, "width", void 0);
+  ToolbarSpacer = __decorate([(0, _customElement.default)({
+    tag: "ui5-toolbar-spacer"
+  })], ToolbarSpacer);
+  (0, _ToolbarRegistry.registerToolbarItem)(ToolbarSpacer);
+  ToolbarSpacer.define();
+  var _default = ToolbarSpacer;
+  _exports.default = _default;
+});

package/src/sap/ui/webc/main/thirdparty/Tree.js

@@ -25,6 +25,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/TreeItem.js

@@ -19,6 +19,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    * <h3 class="comment-api-title">Overview</h3>