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

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

@@ -0,0 +1,248 @@
+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/types/Integer", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Device", "./generated/templates/SelectMenuTemplate.lit", "./generated/themes/SelectMenu.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/ResponsivePopoverCommon.css", "./ResponsivePopover", "./List", "./Button"], function (_exports, _UI5Element, _customElement, _Integer, _slot, _event, _property, _LitRenderer, _ValueState, _Device, _SelectMenuTemplate, _SelectMenu, _ValueStateMessage, _ResponsivePopoverCommon, _ResponsivePopover, _List, _Button) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _Integer = _interopRequireDefault(_Integer);
+  _slot = _interopRequireDefault(_slot);
+  _event = _interopRequireDefault(_event);
+  _property = _interopRequireDefault(_property);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _ValueState = _interopRequireDefault(_ValueState);
+  _SelectMenuTemplate = _interopRequireDefault(_SelectMenuTemplate);
+  _SelectMenu = _interopRequireDefault(_SelectMenu);
+  _ValueStateMessage = _interopRequireDefault(_ValueStateMessage);
+  _ResponsivePopoverCommon = _interopRequireDefault(_ResponsivePopoverCommon);
+  _ResponsivePopover = _interopRequireDefault(_ResponsivePopover);
+  _List = _interopRequireDefault(_List);
+  _Button = _interopRequireDefault(_Button);
+  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;
+  };
+
+  // Template
+
+  // Styles
+
+  // Deps
+
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   *
+   * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative
+   * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.
+   * <br></br>
+   * The component gives the possibility to the user to customize the <code>ui5-select</code>'s dropdown
+   * by slotting custom options and adding custom styles.
+   *
+   * <h3>Usage</h3>
+   *
+   * To use <code>ui5-select</code> with a <code>ui5-select-menu</code>,
+   * you need to set the <code>ui5-select</code> <code>menu</code> property to reference <code>ui5-select-menu</code> either by ID or DOM reference.
+   * <br></br>
+   *
+   * For the <code>ui5-select-menu</code>
+   * <h3>ES6 Module Import</h3>
+   *
+   * <code>import @ui5/webcomponents/dist/SelectMenu.js";</code>
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.SelectMenu
+   * @extends sap.ui.webc.base.UI5Element
+   * @tagname ui5-select-menu
+   * @public
+   * @since 1.17.0
+   */
+  let SelectMenu = class SelectMenu extends _UI5Element.default {
+    constructor() {
+      super();
+      this.valueStateMessageText = [];
+    }
+    /**
+     * Shows the dropdown at the given element.
+     */
+    showAt(opener, openerWidth) {
+      this.selectWidth = openerWidth;
+      this.respPopover.open = true;
+      this.respPopover.opener = opener;
+      this.hasValueState = !!opener.hasValueState;
+      this.hasValueStateSlot = opener.valueStateMessageText.length > 0;
+      this.valueStateText = opener.valueStateText;
+      this.valueStateMessageText = opener.valueStateMessageText;
+      this.valueState = opener.valueState;
+      this._headerTitleText = opener._headerTitleText;
+    }
+    /**
+     * Closes the dropdown.
+     */
+    close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+      this.respPopover.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+    }
+    onBeforeRendering() {
+      this._syncSelection();
+    }
+    _syncSelection() {
+      let lastSelectedOptionIndex = -1,
+        firstEnabledOptionIndex = -1,
+        text,
+        selectedIndex;
+      const options = this.options;
+      options.forEach((opt, index) => {
+        if (opt.selected || opt.textContent === this.value) {
+          // The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
+          lastSelectedOptionIndex = index;
+        }
+        if (firstEnabledOptionIndex === -1) {
+          firstEnabledOptionIndex = index;
+        }
+        opt.selected = false;
+        opt.focused = false;
+        return opt;
+      });
+      if (lastSelectedOptionIndex > -1) {
+        const lastSelectedOption = options[lastSelectedOptionIndex];
+        lastSelectedOption.selected = true;
+        lastSelectedOption.focused = true;
+        text = lastSelectedOption.displayText || String(lastSelectedOption.textContent);
+        selectedIndex = lastSelectedOptionIndex;
+      } else {
+        text = "";
+        selectedIndex = -1;
+        const firstSelectedOption = options[firstEnabledOptionIndex];
+        if (firstSelectedOption) {
+          firstSelectedOption.selected = true;
+          firstSelectedOption.focused = true;
+          selectedIndex = firstEnabledOptionIndex;
+          text = firstSelectedOption.displayText || String(firstSelectedOption.textContent);
+        }
+      }
+      this.fireEvent("menu-change", {
+        text,
+        selectedIndex
+      });
+    }
+    _onOptionClick(e) {
+      const option = e.detail.item;
+      const optionIndex = this.options.findIndex(_option => option.__id === _option.__id);
+      this.fireEvent("option-click", {
+        option,
+        optionIndex
+      });
+    }
+    _onBeforeOpen() {
+      this.fireEvent("before-open");
+    }
+    _onAfterOpen() {
+      this.fireEvent("after-open");
+    }
+    _onAfterClose() {
+      this.fireEvent("after-close");
+    }
+    _onCloseBtnClick() {
+      this.close();
+    }
+    get open() {
+      return !!this.respPopover?.open;
+    }
+    get respPopover() {
+      return this.shadowRoot.querySelector(".ui5-select-menu");
+    }
+    get classes() {
+      return {
+        popoverValueState: {
+          "ui5-valuestatemessage-root": true,
+          "ui5-valuestatemessage--success": this.valueState === _ValueState.default.Success,
+          "ui5-valuestatemessage--error": this.valueState === _ValueState.default.Error,
+          "ui5-valuestatemessage--warning": this.valueState === _ValueState.default.Warning,
+          "ui5-valuestatemessage--information": this.valueState === _ValueState.default.Information
+        },
+        popover: {
+          "ui5-select-popover-valuestate": this.hasValueState
+        }
+      };
+    }
+    get styles() {
+      return {
+        responsivePopoverHeader: {
+          "display": this.options.length && this.respPopover?.offsetWidth === 0 ? "none" : "inline-block",
+          "width": `${this.selectWidth}px`
+        },
+        responsivePopover: {
+          "min-width": `${this.selectWidth}px`
+        }
+      };
+    }
+    get _valueStateMessageInputIcon() {
+      const iconPerValueState = {
+        Error: "error",
+        Warning: "alert",
+        Success: "sys-enter-2",
+        Information: "information"
+      };
+      return this.valueState !== _ValueState.default.None ? iconPerValueState[this.valueState] : "";
+    }
+    get _isPhone() {
+      return (0, _Device.isPhone)();
+    }
+  };
+  __decorate([(0, _slot.default)({
+    "default": true,
+    type: HTMLElement,
+    invalidateOnChildChange: true
+  })], SelectMenu.prototype, "options", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default
+  })], SelectMenu.prototype, "selectWidth", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], SelectMenu.prototype, "hasValueState", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], SelectMenu.prototype, "hasValueStateSlot", void 0);
+  __decorate([(0, _property.default)({
+    type: _ValueState.default,
+    defaultValue: _ValueState.default.None
+  })], SelectMenu.prototype, "valueState", void 0);
+  __decorate([(0, _property.default)()], SelectMenu.prototype, "valueStateText", void 0);
+  __decorate([(0, _property.default)()], SelectMenu.prototype, "value", void 0);
+  SelectMenu = __decorate([(0, _customElement.default)({
+    tag: "ui5-select-menu",
+    renderer: _LitRenderer.default,
+    styles: [_SelectMenu.default, _ValueStateMessage.default, _ResponsivePopoverCommon.default],
+    template: _SelectMenuTemplate.default,
+    dependencies: [_ResponsivePopover.default, _List.default, _Button.default]
+  }), (0, _event.default)("option-click", {
+    detail: {
+      option: {
+        type: HTMLElement
+      },
+      optionIndex: {
+        type: _Integer.default
+      }
+    }
+  }), (0, _event.default)("before-open"), (0, _event.default)("after-open"), (0, _event.default)("after-close"), (0, _event.default)("menu-change", {
+    detail: {
+      text: {
+        type: String
+      },
+      selectedIndex: {
+        type: _Integer.default
+      }
+    }
+  })], SelectMenu);
+  SelectMenu.define();
+  var _default = SelectMenu;
+  _exports.default = _default;
+});

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

@@ -0,0 +1,100 @@
+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/renderer/LitRenderer", "./generated/templates/CustomListItemTemplate.lit", "./CustomListItem", "./types/ListItemType"], function (_exports, _customElement, _property, _LitRenderer, _CustomListItemTemplate, _CustomListItem, _ListItemType) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _CustomListItemTemplate = _interopRequireDefault(_CustomListItemTemplate);
+  _CustomListItem = _interopRequireDefault(_CustomListItem);
+  _ListItemType = _interopRequireDefault(_ListItemType);
+  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;
+  };
+
+  // Template
+
+  // Styles
+
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   * The code>ui5-select-menu-option</code> component represents an option in the <code>ui5-select-menu</code>.
+   *
+   * <h3>Usage</h3>
+   *
+   * For the <code>ui5-select-menu-option</code>
+   * <h3>ES6 Module Import</h3>
+   *
+   * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webc.main.SelectMenuOption
+   * @extends sap.ui.webc.base.UI5Element
+   * @implements sap.ui.webc.main.ISelectMenuOption
+   * @tagname ui5-select-menu-option
+   * @public
+   * @since 1.17.0
+   */
+  let SelectMenuOption = class SelectMenuOption extends _CustomListItem.default {
+    /**
+     * Defines the content of the component.
+     * <br><br>
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.default
+     * @slot
+     * @public
+     */
+    /**
+     * <b>Note:</b> The slot is inherited and not supported. If set, it won't take any effect.
+     *
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton
+     * @type {Node[]}
+     * @slot
+     * @public
+     * @deprecated
+     */
+    get _accInfo() {
+      const accInfoSettings = {
+        ariaSelected: this.selected
+      };
+      return {
+        ...super._accInfo,
+        ...accInfoSettings
+      };
+    }
+  };
+  __decorate([(0, _property.default)()], SelectMenuOption.prototype, "displayText", void 0);
+  __decorate([(0, _property.default)()], SelectMenuOption.prototype, "value", void 0);
+  __decorate([(0, _property.default)({
+    type: _ListItemType.default,
+    defaultValue: _ListItemType.default.Active
+  })], SelectMenuOption.prototype, "type", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], SelectMenuOption.prototype, "accessibilityAttributes", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], SelectMenuOption.prototype, "navigated", void 0);
+  SelectMenuOption = __decorate([(0, _customElement.default)({
+    tag: "ui5-select-menu-option",
+    renderer: _LitRenderer.default,
+    styles: _CustomListItem.default.styles,
+    template: _CustomListItemTemplate.default,
+    dependencies: []
+  })], SelectMenuOption);
+  SelectMenuOption.define();
+  var _default = SelectMenuOption;
+  _exports.default = _default;
+});

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

@@ -20,6 +20,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Slider_1;
+
+  // Template
+
+  // Texts
+
   /**
    * @class
    *

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

@@ -23,6 +23,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var SliderBase_1;
+
+  // Styles
+
   /**
    * @class
    *
@@ -33,7 +36,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * @author SAP SE
    * @alias sap.ui.webc.main.SliderBase
    * @extends sap.ui.webc.base.UI5Element
-   * @tagname ui5-slider
    * @public
    */
   let SliderBase = SliderBase_1 = class SliderBase extends _UI5Element.default {

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

@@ -24,6 +24,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var SplitButton_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *

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

@@ -40,6 +40,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
    * <li>description - Used to style the description of the list item</li>
    * <li>additional-text - Used to style the additionalText of the list item</li>
    * <li>icon - Used to style the icon of the list item</li>
+   * <li>native-li - Used to style the main li tag of the list item</li>
+   * <li>content - Used to style the content area of the list item</li>
+   * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+   * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+   * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+   * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
    * </ul>
    *
    * @constructor

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

@@ -28,6 +28,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var StepInput_1;
+
+  // Styles
+
   // Spin variables
   const INITIAL_WAIT_TIMEOUT = 500; // milliseconds
   const ACCELERATION = 0.8;

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

@@ -1,4 +1,4 @@
-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/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/icons/accept", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/less", "./Icon", "./types/SwitchDesign", "./generated/templates/SwitchTemplate.lit", "./generated/themes/Switch.css"], function (_exports, _UI5Element, _customElement, _property, _event, _LitRenderer, _Keys, _Device, _i18nBundle, _AriaLabelHelper, _accept, _decline, _less, _Icon, _SwitchDesign, _SwitchTemplate, _Switch) {
+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/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/icons/accept", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/less", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "./Icon", "./types/SwitchDesign", "./generated/templates/SwitchTemplate.lit", "./generated/themes/Switch.css"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _LitRenderer, _Keys, _Device, _i18nBundle, _AriaLabelHelper, _accept, _decline, _less, _FeaturesRegistry, _Icon, _SwitchDesign, _SwitchTemplate, _Switch) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -9,6 +9,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _customElement = _interopRequireDefault(_customElement);
   _property = _interopRequireDefault(_property);
   _event = _interopRequireDefault(_event);
+  _slot = _interopRequireDefault(_slot);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _Icon = _interopRequireDefault(_Icon);
   _SwitchDesign = _interopRequireDefault(_SwitchDesign);
@@ -23,6 +24,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Switch_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *
@@ -64,6 +70,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * @since 0.8.0
    */
   let Switch = Switch_1 = class Switch extends _UI5Element.default {
+    onBeforeRendering() {
+      this._enableFormSupport();
+    }
+    _enableFormSupport() {
+      const formSupport = (0, _FeaturesRegistry.getFeature)("FormSupport");
+      if (formSupport) {
+        formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+          const switchComponent = element;
+          nativeInput.checked = !!switchComponent.checked;
+          nativeInput.disabled = !!switchComponent.disabled;
+          nativeInput.value = switchComponent.checked ? "on" : "";
+        });
+      } else if (this.name) {
+        console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+      }
+    }
+
     get sapNextIcon() {
       return this.checked ? "accept" : "less";
     }
@@ -88,8 +111,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this.checked = !this.checked;
         const changePrevented = !this.fireEvent("change", null, true);
         // Angular two way data binding;
-        const valueChagnePrevented = !this.fireEvent("value-changed", null, true);
-        if (changePrevented || valueChagnePrevented) {
+        const valueChangePrevented = !this.fireEvent("value-changed", null, true);
+        if (changePrevented || valueChangePrevented) {
           this.checked = !this.checked;
         }
       }
@@ -157,6 +180,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     defaultValue: ""
   })], Switch.prototype, "accessibleNameRef", void 0);
   __decorate([(0, _property.default)()], Switch.prototype, "tooltip", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Switch.prototype, "required", void 0);
+  __decorate([(0, _property.default)()], Switch.prototype, "name", void 0);
+  __decorate([(0, _slot.default)()], Switch.prototype, "formSupport", void 0);
   Switch = Switch_1 = __decorate([(0, _customElement.default)({
     tag: "ui5-switch",
     languageAware: true,

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

@@ -33,6 +33,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Tab_1;
+
+  // Templates
+
+  // Styles
+
   const DESIGN_DESCRIPTIONS = {
     [_SemanticColor.default.Positive]: _i18nDefaults.TAB_ARIA_DESIGN_POSITIVE,
     [_SemanticColor.default.Negative]: _i18nDefaults.TAB_ARIA_DESIGN_NEGATIVE,
@@ -86,6 +91,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get isSingleClickArea() {
       return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
     }
+    get isTwoClickArea() {
+      return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+    }
     get isOnSelectedTabPath() {
       return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
     }
@@ -188,6 +196,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       if (this.isSingleClickArea) {
         classes.push(`ui5-tab-strip-item--singleClickArea`);
       }
+      if (this.isTwoClickArea) {
+        classes.push(`ui5-tab-strip-item--twoClickArea`);
+      }
       return {
         itemClasses: classes.join(" "),
         additionalTextClasses: this.additionalTextClasses

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

@@ -1,4 +1,4 @@
-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/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/common/thirdparty/base/animations/slideDown", "sap/ui/webc/common/thirdparty/base/animations/slideUp", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/MediaRange", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/slim-arrow-up", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "./generated/i18n/i18n-defaults", "./Button", "./Icon", "./List", "./ResponsivePopover", "./types/TabContainerTabsPlacement", "./types/SemanticColor", "./types/TabContainerBackgroundDesign", "./types/TabLayout", "./types/TabsOverflowMode", "./generated/templates/TabContainerTemplate.lit", "./generated/templates/TabContainerPopoverTemplate.lit", "./generated/themes/TabContainer.css", "./generated/themes/ResponsivePopoverCommon.css"], function (_exports, _UI5Element, _customElement, _event, _property, _slot, _LitRenderer, _ResizeHandler, _Render, _slideDown, _slideUp, _Integer, _AnimationMode, _AnimationMode2, _ItemNavigation, _Keys, _MediaRange, _i18nBundle, _slimArrowUp, _slimArrowDown, _i18nDefaults, _Button, _Icon, _List, _ResponsivePopover, _TabContainerTabsPlacement, _SemanticColor, _TabContainerBackgroundDesign, _TabLayout, _TabsOverflowMode, _TabContainerTemplate, _TabContainerPopoverTemplate, _TabContainer, _ResponsivePopoverCommon) {
+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/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/common/thirdparty/base/animations/slideDown", "sap/ui/webc/common/thirdparty/base/animations/slideUp", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/MediaRange", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "sap/ui/webc/common/thirdparty/icons/slim-arrow-up", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "./generated/i18n/i18n-defaults", "./Button", "./Icon", "./List", "./ResponsivePopover", "./types/TabContainerTabsPlacement", "./types/SemanticColor", "./types/TabContainerBackgroundDesign", "./types/TabLayout", "./types/TabsOverflowMode", "./generated/templates/TabContainerTemplate.lit", "./generated/templates/TabContainerPopoverTemplate.lit", "./generated/themes/TabContainer.css", "./generated/themes/ResponsivePopoverCommon.css"], function (_exports, _UI5Element, _customElement, _event, _property, _slot, _LitRenderer, _ResizeHandler, _Render, _slideDown, _slideUp, _Integer, _AnimationMode, _AnimationMode2, _ItemNavigation, _Keys, _MediaRange, _i18nBundle, _CustomElementsScope, _slimArrowUp, _slimArrowDown, _i18nDefaults, _Button, _Icon, _List, _ResponsivePopover, _TabContainerTabsPlacement, _SemanticColor, _TabContainerBackgroundDesign, _TabLayout, _TabsOverflowMode, _TabContainerTemplate, _TabContainerPopoverTemplate, _TabContainer, _ResponsivePopoverCommon) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -40,6 +40,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var TabContainer_1;
+
+  // Templates
+
+  // Styles
+
   const tabStyles = [];
   const staticAreaTabStyles = [];
   const PAGE_UP_DOWN_SIZE = 5;
@@ -218,9 +223,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       let button = e.target;
       let tabInstance = button.tab;
       if (tabInstance) {
-        tabInstance.focus({
-          focusVisible: true
-        });
+        tabInstance.focus();
       }
       if (e.type === "keydown" && !e.target._realTab.isSingleClickArea) {
         button = e.target.querySelectorAll(".ui5-tab-expand-button")[0];
@@ -304,9 +307,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.responsivePopover.close();
       await (0, _Render.renderFinished)();
       const selectedTopLevel = this._getRootTab(this._selectedTab);
-      selectedTopLevel.getTabInStripDomRef().focus({
-        focusVisible: true
-      });
+      selectedTopLevel.getTabInStripDomRef().focus();
     }
     /**
      * Returns all slotted tabs and their subTabs in a flattened array.
@@ -454,8 +455,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           level += 1;
         }
         tab._style = {
-          "--_ui5-tab-indentation-level": level,
-          "--_ui5-tab-extra-indent": extraIndent ? 1 : null
+          [(0, _CustomElementsScope.getScopedVarName)("--_ui5-tab-indentation-level")]: level,
+          [(0, _CustomElementsScope.getScopedVarName)("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null
         };
       });
     }

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

@@ -23,6 +23,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var TabSeparator_1;
+
+  // Templates
+
+  // Styles
+
   /**
    * @class
    * The <code>ui5-tab-separator</code> represents a vertical line to separate tabs inside a <code>ui5-tabcontainer</code>.
@@ -31,6 +36,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * @author SAP SE
    * @alias sap.ui.webc.main.TabSeparator
    * @extends sap.ui.webc.base.UI5Element
+   * @abstract
    * @tagname ui5-tab-separator
    * @implements sap.ui.webc.main.ITab
    * @public

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

@@ -34,6 +34,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Table_1;
+
+  // Ensure the dependency as it is being used in the renderer
+  // Texts
+  // Template
+  // Styles
   const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
   const PAGE_UP_DOWN_SIZE = 20;
   var TableFocusTargetElement;

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

@@ -21,6 +21,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var TableCell_1;
+
+  // Styles
+
+  // Texts
+
   /**
    * @class
    *

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

@@ -21,6 +21,9 @@ 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;
   };
+
+  // Styles
+
   /**
    * @class
    *

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

@@ -23,6 +23,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var TableGroupRow_1;
+
+  // Texts
+
+  // Styles
+
   /**
    * @class
    *