@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

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

@@ -1,4 +1,4 @@
-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/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/NavigationMode", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/util/getNormalizedTarget", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/base/util/TabbableElements", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/debounce", "sap/ui/webc/common/thirdparty/base/util/isElementInView", "./types/TableGrowingMode", "./BusyIndicator", "./types/TableMode", "./CheckBox", "./generated/i18n/i18n-defaults", "./generated/templates/TableTemplate.lit", "./generated/themes/Table.css"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _ItemNavigation, _Integer, _NavigationMode, _Keys, _getNormalizedTarget, _getActiveElement, _TabbableElements, _AriaLabelHelper, _i18nBundle, _debounce, _isElementInView, _TableGrowingMode, _BusyIndicator, _TableMode, _CheckBox, _i18nDefaults, _TableTemplate, _Table) {
+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/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/NavigationMode", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/util/getNormalizedTarget", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/base/util/TabbableElements", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/debounce", "sap/ui/webc/common/thirdparty/base/util/isElementInView", "./types/TableGrowingMode", "./BusyIndicator", "./types/TableMode", "./CheckBox", "./generated/i18n/i18n-defaults", "./generated/templates/TableTemplate.lit", "./generated/themes/Table.css"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _LitRenderer, _ResizeHandler, _ItemNavigation, _Integer, _NavigationMode, _Keys, _getNormalizedTarget, _getActiveElement, _TabbableElements, _AriaLabelHelper, _i18nBundle, _debounce, _isElementInView, _TableGrowingMode, _BusyIndicator, _TableMode, _CheckBox, _i18nDefaults, _TableTemplate, _Table) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,6 +6,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _event = _interopRequireDefault(_event);
+  _slot = _interopRequireDefault(_slot);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _ItemNavigation = _interopRequireDefault(_ItemNavigation);
@@ -22,333 +26,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _TableTemplate = _interopRequireDefault(_TableTemplate);
   _Table = _interopRequireDefault(_Table);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Ensure the dependency as it is being used in the renderer
-
-  // Texts
-
-  // Template
-
-  // Styles
-
+  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;
+  };
+  var Table_1;
   const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
-
   const PAGE_UP_DOWN_SIZE = 20;
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-table",
-    managedSlots: true,
-    fastNavigation: true,
-    slots: /** @lends sap.ui.webcomponents.main.Table.prototype */{
-      /**
-       * Defines the component rows.
-       * <br><br>
-       * <b>Note:</b> Use <code>ui5-table-row</code> for the intended design.
-       *
-       * @type {sap.ui.webcomponents.main.ITableRow[]}
-       * @slot rows
-       * @public
-       */
-      "default": {
-        propertyName: "rows",
-        type: HTMLElement,
-        individualSlots: true,
-        invalidateOnChildChange: true
-      },
-      /**
-       * Defines the configuration for the columns of the component.
-       * <br><br>
-       * <b>Note:</b> Use <code>ui5-table-column</code> for the intended design.
-       *
-       * @type {sap.ui.webcomponents.main.ITableColumn[]}
-       * @slot
-       * @public
-       */
-      columns: {
-        type: HTMLElement,
-        individualSlots: true,
-        invalidateOnChildChange: {
-          properties: true,
-          slots: false
-        }
-      }
-    },
-    properties: /** @lends sap.ui.webcomponents.main.Table.prototype */{
-      /**
-       * Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       */
-      noDataText: {
-        type: String
-      },
-      /**
-       * Defines the text that will be displayed inside the growing button at the bottom of the table,
-       * meant for loading more rows upon press.
-       *
-       * <br><br>
-       * <b>Note:</b> If not specified a built-in text will be displayed.
-       * <br>
-       * <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @since 1.0.0-rc.15
-       * @public
-       */
-      growingButtonText: {
-        type: String
-      },
-      /**
-       * Defines the subtext that will be displayed under the <code>growingButtonText</code>.
-       *
-       * <br><br>
-       * <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @since 1.0.0-rc.15
-       * @public
-       */
-      growingButtonSubtext: {
-        type: String
-      },
-      /**
-       * Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       * @since 1.0.0-rc.15
-       */
-      hideNoData: {
-        type: Boolean
-      },
-      /**
-       * Defines whether the table will have growing capability either by pressing a <code>More</code> button,
-       * or via user scroll. In both cases <code>load-more</code> event is fired.
-       * <br><br>
-       *
-       * Available options:
-       * <br><br>
-       * <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event.
-       * <br>
-       * <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table;
-       * <br>
-       * <code>None</code> (default) - The growing is off.
-       * <br><br>
-       *
-       * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
-       * and the component will fallback to <code>growing="Button"</code>.
-       * @type {TableGrowingMode}
-       * @defaultvalue "None"
-       * @since 1.0.0-rc.12
-       * @public
-       */
-      growing: {
-        type: _TableGrowingMode.default,
-        defaultValue: _TableGrowingMode.default.None
-      },
-      /**
-       * Defines if the table is in busy state.
-       * <b>
-       *
-       * In this state the component's opacity is reduced
-       * and busy indicator is displayed at the bottom of the table.
-       * @type {boolean}
-       * @defaultvalue false
-       * @since 1.0.0-rc.12
-       * @public
-      */
-      busy: {
-        type: Boolean
-      },
-      /**
-       * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
-       *
-       * @type {Integer}
-       * @defaultValue 1000
-       * @public
-       */
-      busyDelay: {
-        type: _Integer.default,
-        defaultValue: 1000
-      },
-      /**
-       * Determines whether the column headers remain fixed at the top of the page during
-       * vertical scrolling as long as the Web Component is in the viewport.
-       * <br><br>
-       * <b>Restrictions:</b>
-       * <ul>
-       * <li>Browsers that do not support this feature:
-       * <ul>
-       * <li>Internet Explorer</li>
-       * <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li>
-       * <li>Mozilla Firefox lower than version 59</li>
-       * </ul>
-       * </li>
-       * <li>Scrolling behavior:
-       * <ul>
-       * <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code>
-       * or <code>overflow: auto</code> style definition, this can
-       * prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li>
-       * </ul>
-       * </li>
-       * </ul>
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      stickyColumnHeader: {
-        type: Boolean
-      },
-      /**
-       * Defines the mode of the component.
-       * <br><br>
-       * Available options are:
-       * <ul>
-       * <li><code>MultiSelect</code></li>
-       * <li><code>SingleSelect</code></li>
-       * <li><code>None</code></li>
-       * <ul>
-       * @type {TableMode}
-       * @defaultvalue "None"
-       * @since 1.0.0-rc.15
-       * @public
-       */
-      mode: {
-        type: _TableMode.default,
-        defaultValue: _TableMode.default.None
-      },
-      /**
-       * Defines the accessible aria name of the component.
-       *
-       * @type {string}
-       * @defaultvalue: ""
-       * @public
-       * @since 1.3.0
-       */
-      accessibleName: {
-        type: String,
-        defaultValue: undefined
-      },
-      /**
-       * Receives id(or many ids) of the elements that label the component.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       * @since 1.3.0
-       */
-      accessibleNameRef: {
-        type: String,
-        defaultValue: ""
-      },
-      _hiddenColumns: {
-        type: Object,
-        multiple: true
-      },
-      _noDataDisplayed: {
-        type: Boolean
-      },
-      /**
-       * Defines the active state of the <code>More</code> button.
-       * @private
-       */
-      _loadMoreActive: {
-        type: Boolean
-      },
-      /**
-       * Used to represent the table column header for the purpose of the item navigation as it does not work with DOM objects directly
-       * @private
-       */
-      _columnHeader: {
-        type: Object
-      },
-      /**
-       * Defines if the entire table is in view port.
-       * @private
-       */
-      _inViewport: {
-        type: Boolean
-      },
-      /**
-       * Defines whether all rows are selected or not when table is in MultiSelect mode.
-       * @type {boolean}
-       * @defaultvalue false
-       * @since 1.0.0-rc.15
-       * @private
-       */
-      _allRowsSelected: {
-        type: Boolean
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.Table.prototype */{
-      /**
-       * Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
-       *
-       * @event sap.ui.webcomponents.main.Table#row-click
-       * @param {HTMLElement} row the activated row.
-       * @public
-       */
-      "row-click": {
-        detail: {
-          row: {
-            type: HTMLElement
-          }
-        }
-      },
-      /**
-       * Fired when <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
-       *
-       * @event sap.ui.webcomponents.main.Table#popin-change
-       * @param {Array} poppedColumns popped-in columns.
-       * @since 1.0.0-rc.6
-       * @public
-       */
-      "popin-change": {
-        detail: {
-          poppedColumns: {}
-        }
-      },
-      /**
-       * Fired when the user presses the <code>More</code> button or scrolls to the table's end.
-       * <br><br>
-       *
-       * <b>Note:</b> The event will be fired if <code>growing</code> is set to <code>Button</code> or <code>Scroll</code>.
-       * @event sap.ui.webcomponents.main.Table#load-more
-       * @public
-       * @since 1.0.0-rc.11
-       */
-      "load-more": {},
-      /**
-       * Fired when selection is changed by user interaction
-       * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
-       *
-       * @event sap.ui.webcomponents.main.Table#selection-change
-       * @param {Array} selectedRows An array of the selected rows.
-       * @param {Array} previouslySelectedRows An array of the previously selected rows.
-       * @public
-       * @since 1.0.0-rc.15
-       */
-      "selection-change": {
-        detail: {
-          selectedRows: {
-            type: Array
-          },
-          previouslySelectedRows: {
-            type: Array
-          }
-        }
-      }
-    }
-  };
-
+  var TableFocusTargetElement;
+  (function (TableFocusTargetElement) {
+    TableFocusTargetElement["Row"] = "tableRow";
+    TableFocusTargetElement["GroupRow"] = "tableGroupRow";
+    TableFocusTargetElement["ColumnHeader"] = "columnHeader";
+    TableFocusTargetElement["MoreButton"] = "moreButton";
+  })(TableFocusTargetElement || (TableFocusTargetElement = {}));
   /**
    * @class
    *
@@ -413,34 +107,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Table
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.main.Table
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-table
-   * @appenddocs TableColumn TableRow TableGroupRow TableCell
+   * @appenddocs sap.ui.webc.main.TableColumn sap.ui.webc.main.TableRow sap.ui.webc.main.TableGroupRow sap.ui.webc.main.TableCell
    * @public
    */
-  class Table extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get styles() {
-      return _Table.default;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _TableTemplate.default;
-    }
-    static get dependencies() {
-      return [_BusyIndicator.default, _CheckBox.default];
-    }
+  let Table = Table_1 = class Table extends _UI5Element.default {
     static async onDefine() {
-      Table.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      Table_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     constructor() {
       super();
-
+      this.visibleColumns = []; // template loop should always have a defined array
       // The ItemNavigation requires each item to 1) have a "_tabIndex" property and 2) be either a UI5Element, or have an id property (to find it in the component's shadow DOM by)
       this._columnHeader = {
         id: `${this._id}-columnHeader`,
@@ -452,34 +131,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         getItemsCallback: () => [this._columnHeader, ...this.rows],
         skipItemsSize: PAGE_UP_DOWN_SIZE
       });
-      this.fnOnRowFocused = this.onRowFocused.bind(this);
       this._handleResize = this.popinContent.bind(this);
+      this.fnOnRowFocused = this.onRowFocused.bind(this);
       this.fnHandleF7 = this._handleF7.bind(this);
       this.tableEndObserved = false;
-      this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this));
-      this.addEventListener("ui5-_forward-after", this._onForwardAfter.bind(this));
-      this.addEventListener("ui5-_forward-before", this._onForwardBefore.bind(this));
-
       // Stores the last focused element within the table.
       this.lastFocusedElement = null;
-
       // Indicates whether the table is forwarding focus before or after the current table row.
       this._forwardingFocus = false;
-
       // Stores the last focused nested element index (within a table row) for F7 navigation.
       this._prevNestedElementIndex = 0;
     }
     onBeforeRendering() {
       const columnSettings = this.getColumnPropagationSettings();
       const columnSettingsString = JSON.stringify(columnSettings);
-      const rowsCount = this.rows.length;
+      const rowsCount = this.rows.length + 1;
       const selectedRows = this.selectedRows;
       this.rows.forEach((row, index) => {
         if (row._columnsInfoString !== columnSettingsString) {
           row._columnsInfo = columnSettings;
           row._columnsInfoString = JSON.stringify(row._columnsInfo);
         }
-        row._ariaPosition = Table.i18nBundle.getText(_i18nDefaults.TABLE_ROW_POSITION, index + 1, rowsCount);
+        row._ariaPosition = Table_1.i18nBundle.getText(_i18nDefaults.TABLE_ROW_POSITION, index + 2, rowsCount);
         row._busy = this.busy;
         row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
         row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -516,74 +189,74 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.growingIntersectionObserver = null;
       this.tableEndObserved = false;
     }
-    _onkeydown(event) {
-      if ((0, _Keys.isTabNext)(event) || (0, _Keys.isTabPrevious)(event)) {
-        this._handleTab(event);
+    _onkeydown(e) {
+      if ((0, _Keys.isTabNext)(e) || (0, _Keys.isTabPrevious)(e)) {
+        this._handleTab(e);
       }
-      if ((0, _Keys.isCtrlA)(event)) {
-        event.preventDefault();
-        this.isMultiSelect && this._selectAll(event);
+      if ((0, _Keys.isCtrlA)(e)) {
+        e.preventDefault();
+        this.isMultiSelect && this._selectAll();
       }
-      if ((0, _Keys.isUpAlt)(event) || (0, _Keys.isDownAlt)(event)) {
-        this._handleArrowAlt(event);
+      if ((0, _Keys.isUpAlt)(e) || (0, _Keys.isDownAlt)(e)) {
+        this._handleArrowAlt(e);
       }
-      if (((0, _Keys.isUpShift)(event) || (0, _Keys.isDownShift)(event)) && this.isMultiSelect) {
-        this._handleArrowNav(event);
+      if (((0, _Keys.isUpShift)(e) || (0, _Keys.isDownShift)(e)) && this.isMultiSelect) {
+        this._handleArrowNav(e);
       }
-      if ((0, _Keys.isHomeCtrl)(event)) {
-        event.preventDefault();
-        this._itemNavigation._handleHome(event);
+      if ((0, _Keys.isHomeCtrl)(e)) {
+        e.preventDefault();
+        this._itemNavigation._handleHome();
         this._itemNavigation._applyTabIndex();
         this._itemNavigation._focusCurrentItem();
       }
-      if ((0, _Keys.isEndCtrl)(event)) {
-        event.preventDefault();
-        this._itemNavigation._handleEnd(event);
+      if ((0, _Keys.isEndCtrl)(e)) {
+        e.preventDefault();
+        this._itemNavigation._handleEnd();
         this._itemNavigation._applyTabIndex();
         this._itemNavigation._focusCurrentItem();
       }
-      if (((0, _Keys.isHomeShift)(event) || (0, _Keys.isEndShift)(event)) && this.isMultiSelect) {
-        this._handleHomeEndSelection(event);
+      if (((0, _Keys.isHomeShift)(e) || (0, _Keys.isEndShift)(e)) && this.isMultiSelect) {
+        this._handleHomeEndSelection(e);
       }
     }
-    _handleTab(event) {
-      const isNext = (0, _Keys.isTabNext)(event);
-      const target = (0, _getNormalizedTarget.default)(event.target);
-      const targetType = this.getFocusedElementType(event.target);
+    _handleTab(e) {
+      const isNext = (0, _Keys.isTabNext)(e);
+      const target = (0, _getNormalizedTarget.default)(e.target);
+      const targetType = this.getFocusedElementType(e.target);
       if (this.columnHeaderTabbables.includes(target)) {
         if (isNext && this.columnHeaderLastElement === target) {
-          return this._focusNextElement(event);
+          return this._focusNextElement();
         }
         return;
       }
-      if (isNext && targetType === "columnHeader" && !this.columnHeaderTabbables.length) {
-        return this._focusNextElement(event);
+      if (isNext && targetType === TableFocusTargetElement.ColumnHeader && !this.columnHeaderTabbables.length) {
+        return this._focusNextElement();
       }
-      if (targetType === "tableRow" || !targetType) {
+      if (targetType === TableFocusTargetElement.Row || !targetType) {
         return;
       }
       switch (targetType) {
-        case "tableGroupRow":
-          return isNext ? this._focusNextElement(event) : this._focusForwardElement(event, false);
-        case "columnHeader":
-          return !isNext && this._focusForwardElement(event, false);
-        case "moreButton":
+        case TableFocusTargetElement.GroupRow:
+          return isNext ? this._focusNextElement() : this._focusForwardElement(false);
+        case TableFocusTargetElement.ColumnHeader:
+          return !isNext && this._focusForwardElement(false);
+        case TableFocusTargetElement.MoreButton:
           if (isNext) {
-            this._focusForwardElement(event, true);
+            this._focusForwardElement(true);
           } else {
-            event.preventDefault();
-            this.currentElement.focus();
+            e.preventDefault();
+            this.currentElement?.focus();
           }
       }
     }
-    _focusNextElement(event) {
+    _focusNextElement() {
       if (!this.growsWithButton) {
-        this._focusForwardElement(event, true);
+        this._focusForwardElement(true);
       } else {
         this.morеBtn.focus();
       }
     }
-    _handleArrowNav(event) {
+    _handleArrowNav(e) {
       const isRowFocused = this.currentElement.localName === "tr";
       if (!isRowFocused) {
         return;
@@ -595,16 +268,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const nextItemIdx = currentItemIdx + 1;
       const prevItem = this.rows[prevItemIdx];
       const nextItem = this.rows[nextItemIdx];
-      const wasSelected = currentItem.selected;
-      if ((0, _Keys.isUpShift)(event) && !prevItem || (0, _Keys.isDownShift)(event) && !nextItem) {
+      const wasSelected = !!currentItem.selected;
+      if ((0, _Keys.isUpShift)(e) && !prevItem || (0, _Keys.isDownShift)(e) && !nextItem) {
         return;
       }
-      if ((0, _Keys.isUpShift)(event)) {
+      if ((0, _Keys.isUpShift)(e)) {
         currentItem.selected = currentItem.selected && !prevItem.selected;
         prevItem.selected = currentItem.selected || wasSelected && !currentItem.selected;
         prevItem.focus();
       }
-      if ((0, _Keys.isDownShift)(event)) {
+      if ((0, _Keys.isDownShift)(e)) {
         currentItem.selected = currentItem.selected && !nextItem.selected;
         nextItem.selected = currentItem.selected || wasSelected && !currentItem.selected;
         nextItem.focus();
@@ -615,7 +288,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         previouslySelectedRows
       });
     }
-    _handleHomeEndSelection(event) {
+    _handleHomeEndSelection(e) {
       const isRowFocused = this.currentElement.localName === "tr";
       if (!isRowFocused) {
         return;
@@ -623,13 +296,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const rows = this.rows;
       const previouslySelectedRows = this.selectedRows;
       const currentItemIdx = this.currentItemIdx;
-      if ((0, _Keys.isHomeShift)(event)) {
+      if ((0, _Keys.isHomeShift)(e)) {
         rows.slice(0, currentItemIdx + 1).forEach(item => {
           item.selected = true;
         });
         rows[0].focus();
       }
-      if ((0, _Keys.isEndShift)(event)) {
+      if ((0, _Keys.isEndShift)(e)) {
         rows.slice(currentItemIdx).forEach(item => {
           item.selected = true;
         });
@@ -641,46 +314,45 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         previouslySelectedRows
       });
     }
-
     /**
      * Handles Alt + Up/Down.
      * Switches focus between column header, last focused item, and "More" button (if applicable).
      * @private
-     * @param {CustomEvent} event
+     * @param { KeyboardEvent } e
      */
-    _handleArrowAlt(event) {
-      const shouldMoveUp = (0, _Keys.isUpAlt)(event);
-      const focusedElementType = this.getFocusedElementType(event.target);
+    _handleArrowAlt(e) {
+      const shouldMoveUp = (0, _Keys.isUpAlt)(e);
+      const target = e.target;
+      const focusedElementType = this.getFocusedElementType(target);
       if (shouldMoveUp) {
         switch (focusedElementType) {
-          case "tableRow":
-          case "tableGroupRow":
-            this._prevFocusedRow = event.target;
-            return this._onColumnHeaderClick(event);
-          case "columnHeader":
-            return this.morеBtn ? this.morеBtn.focus() : this._prevFocusedRow.focus();
-          case "moreButton":
-            return this._prevFocusedRow ? this._prevFocusedRow.focus() : this._onColumnHeaderClick(event);
+          case TableFocusTargetElement.Row:
+          case TableFocusTargetElement.GroupRow:
+            this._prevFocusedRow = target;
+            return this._onColumnHeaderClick(e);
+          case TableFocusTargetElement.ColumnHeader:
+            return this.morеBtn ? this.morеBtn.focus() : this._prevFocusedRow?.focus();
+          case TableFocusTargetElement.MoreButton:
+            return this._prevFocusedRow ? this._prevFocusedRow.focus() : this._onColumnHeaderClick(e);
         }
       } else {
         switch (focusedElementType) {
-          case "tableRow":
-          case "tableGroupRow":
-            this._prevFocusedRow = event.target;
-            return this.morеBtn ? this.morеBtn.focus() : this._onColumnHeaderClick(event);
-          case "columnHeader":
+          case TableFocusTargetElement.Row:
+          case TableFocusTargetElement.GroupRow:
+            this._prevFocusedRow = target;
+            return this.morеBtn ? this.morеBtn.focus() : this._onColumnHeaderClick(e);
+          case TableFocusTargetElement.ColumnHeader:
             if (this._prevFocusedRow) {
               this._prevFocusedRow.focus();
             } else if (this.morеBtn) {
               this.morеBtn.focus();
             }
             return;
-          case "moreButton":
-            return this._onColumnHeaderClick(event);
+          case TableFocusTargetElement.MoreButton:
+            return this._onColumnHeaderClick(e);
         }
       }
     }
-
     /**
      * Determines the type of the currently focused element.
      * @private
@@ -689,24 +361,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
      */
     getFocusedElementType(element) {
       if (element === this.columnHeader) {
-        return "columnHeader";
+        return TableFocusTargetElement.ColumnHeader;
       }
       if (element === this.morеBtn) {
-        return "moreButton";
+        return TableFocusTargetElement.MoreButton;
       }
       if (this.rows.includes(element)) {
         const isGroupRow = element.hasAttribute("ui5-table-group-row");
-        return isGroupRow ? "tableGroupRow" : "tableRow";
+        return isGroupRow ? TableFocusTargetElement.GroupRow : TableFocusTargetElement.Row;
       }
     }
-
     /**
      * Toggles focus between the table row's root and the last focused nested element.
      * @private
-     * @param {CustomEvent} event "ui5-f7-pressed"
+     * @param { CustomEvent } e "ui5-f7-pressed"
      */
-    _handleF7(event) {
-      const row = event.detail.row;
+    _handleF7(e) {
+      const row = e.detail.row;
       row._tabbables = (0, _TabbableElements.getTabbableElements)(row);
       const activeElement = (0, _getActiveElement.default)();
       const lastFocusedElement = row._tabbables[this._prevNestedElementIndex] || row._tabbables[0];
@@ -721,8 +392,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         row.root.focus();
       }
     }
-    _onfocusin(event) {
-      const target = (0, _getNormalizedTarget.default)(event.target);
+    _onfocusin(e) {
+      const target = (0, _getNormalizedTarget.default)(e.target);
       if (!this._isForwardElement(target)) {
         this.lastFocusedElement = target;
         return;
@@ -733,77 +404,88 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         } else {
           this.currentElement.focus();
         }
-        event.stopImmediatePropagation();
+        e.stopImmediatePropagation();
       }
       this._forwardingFocus = false;
     }
-    _onForwardBefore(event) {
-      this.lastFocusedElement = event.detail.target;
-      this._focusForwardElement(event, false);
-      event.stopImmediatePropagation();
+    _onForwardBefore(e) {
+      this.lastFocusedElement = e.detail.target;
+      this._focusForwardElement(false);
+      e.stopImmediatePropagation();
     }
-    _onForwardAfter(event) {
-      this.lastFocusedElement = event.detail.target;
+    _onForwardAfter(e) {
+      this.lastFocusedElement = e.detail.target;
       if (!this.growsWithButton) {
-        this._focusForwardElement(event, true);
+        this._focusForwardElement(true);
       } else {
         this.morеBtn.focus();
       }
     }
-    _focusForwardElement(event, isAfter) {
+    _focusForwardElement(isAfter) {
       this._forwardingFocus = true;
       this.shadowRoot.querySelector(`#${this._id}-${isAfter ? "after" : "before"}`).focus();
     }
-    _isForwardElement(node) {
-      const nodeId = node.id;
+    _isForwardElement(element) {
+      const elementId = element.id;
       const afterElement = this._getForwardElement(true);
       const beforeElement = this._getForwardElement(false);
-      if (this._id === nodeId || beforeElement && beforeElement.id === nodeId) {
+      if (this._id === elementId || beforeElement && beforeElement.id === elementId) {
         return true;
       }
-      return afterElement && afterElement.id === nodeId;
+      return !!(afterElement && afterElement.id === elementId);
     }
     _getForwardElement(isAfter) {
-      const dir = isAfter ? "after" : "before";
-      if (!this[`_${dir}Element`]) {
-        this[`_${dir}Element`] = this.shadowRoot.querySelector(`#${this._id}-${dir}`);
+      if (isAfter) {
+        return this._getAfterForwardElement();
       }
-      return this[`_${dir}Element`];
+      return this._getBeforeForwardElement();
     }
-    onRowFocused(event) {
-      this._itemNavigation.setCurrentItem(event.target);
+    _getAfterForwardElement() {
+      if (!this._afterElement) {
+        this._afterElement = this.shadowRoot.querySelector(`#${this._id}-after`);
+      }
+      return this._afterElement;
+    }
+    _getBeforeForwardElement() {
+      if (!this._beforeElement) {
+        this._beforeElement = this.shadowRoot.querySelector(`#${this._id}-before`);
+      }
+      return this._beforeElement;
     }
-    _onColumnHeaderFocused(event) {
+    onRowFocused(e) {
+      this._itemNavigation.setCurrentItem(e.target);
+    }
+    _onColumnHeaderFocused() {
       this._itemNavigation.setCurrentItem(this._columnHeader);
     }
-    _onColumnHeaderClick(event) {
-      if (!event.target) {
+    _onColumnHeaderClick(e) {
+      if (!e.target) {
         this.columnHeader.focus();
       }
-      const target = (0, _getNormalizedTarget.default)(event.target);
+      const target = (0, _getNormalizedTarget.default)(e.target);
       const isNestedElement = this.columnHeaderTabbables.includes(target);
       if (!isNestedElement) {
         this.columnHeader.focus();
       }
     }
-    _onColumnHeaderKeydown(event) {
-      if ((0, _Keys.isSpace)(event)) {
-        event.preventDefault();
+    _onColumnHeaderKeydown(e) {
+      if ((0, _Keys.isSpace)(e)) {
+        e.preventDefault();
         this.isMultiSelect && this._selectAll();
       }
     }
-    _onLoadMoreKeydown(event) {
-      if ((0, _Keys.isSpace)(event)) {
-        event.preventDefault();
+    _onLoadMoreKeydown(e) {
+      if ((0, _Keys.isSpace)(e)) {
+        e.preventDefault();
         this._loadMoreActive = true;
       }
-      if ((0, _Keys.isEnter)(event)) {
+      if ((0, _Keys.isEnter)(e)) {
         this._onLoadMoreClick();
         this._loadMoreActive = true;
       }
     }
-    _onLoadMoreKeyup(event) {
-      if ((0, _Keys.isSpace)(event)) {
+    _onLoadMoreKeyup(e) {
+      if ((0, _Keys.isSpace)(e)) {
         this._onLoadMoreClick();
       }
       this._loadMoreActive = false;
@@ -825,8 +507,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     loadMore() {
       this.fireEvent("load-more");
     }
-    _handleSingleSelect(event) {
-      const row = this.getRowParent(event.target);
+    _handleSingleSelect(e) {
+      const row = this.getRowParent(e.target);
+      if (!row) {
+        return;
+      }
       if (!row.selected) {
         const previouslySelectedRows = this.selectedRows;
         this.rows.forEach(item => {
@@ -841,9 +526,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         });
       }
     }
-    _handleMultiSelect(event) {
-      const row = this.getRowParent(event.target);
+    _handleMultiSelect(e) {
+      const row = this.getRowParent(e.target);
       const previouslySelectedRows = this.selectedRows;
+      if (!row) {
+        return;
+      }
       row.selected = !row.selected;
       const selectedRows = this.selectedRows;
       if (selectedRows.length === this.rows.length) {
@@ -856,10 +544,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         previouslySelectedRows
       });
     }
-    _handleSelect(event) {
-      this[`_handle${this.mode}`](event);
+    _handleSelect(e) {
+      if (this.isSingleSelect) {
+        this._handleSingleSelect(e);
+        return;
+      }
+      if (this.isMultiSelect) {
+        this._handleMultiSelect(e);
+      }
     }
-    _selectAll(event) {
+    _selectAll() {
       const bAllSelected = !this._allRowsSelected;
       const previouslySelectedRows = this.rows.filter(row => row.selected);
       this._allRowsSelected = bAllSelected;
@@ -873,34 +567,41 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       });
     }
     getRowParent(child) {
-      const parent = child.parentElement;
       if (child.hasAttribute("ui5-table-row")) {
         return child;
       }
-      if (parent && parent.hasAttribute("ui5-table-row")) {
+      const parent = child.parentElement;
+      if (!parent) {
+        return;
+      }
+      if (parent.hasAttribute("ui5-table-row")) {
         return parent;
       }
-      this.getRowParent(parent);
+      return this.getRowParent(parent);
     }
     get columnHeader() {
-      return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
+      const domRef = this.getDomRef();
+      return domRef ? domRef.querySelector(`#${this._id}-columnHeader`) : null;
     }
     get morеBtn() {
-      return this.growsWithButton && this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-growingButton`);
+      const domRef = this.getDomRef();
+      if (this.growsWithButton && domRef) {
+        return domRef.querySelector(`#${this._id}-growingButton`);
+      }
+      return null;
     }
-    handleResize(event) {
+    handleResize() {
       this.checkTableInViewport();
-      this.popinContent(event);
+      this.popinContent();
     }
     checkTableInViewport() {
       this._inViewport = (0, _isElementInView.default)(this.getDomRef());
     }
-    popinContent(_event) {
+    popinContent() {
       const clientRect = this.getDomRef().getBoundingClientRect();
       const tableWidth = clientRect.width;
       const hiddenColumns = [];
       const visibleColumnsIndexes = [];
-
       // store the hidden columns
       this.columns.forEach((column, index) => {
         if (tableWidth < column.minWidth && column.minWidth !== Infinity) {
@@ -919,9 +620,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
         this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
       }
-
+      const hiddenColumnsChange = this._hiddenColumns.length !== hiddenColumns.length || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
       // invalidate only if hidden columns count has changed
-      if (this._hiddenColumns.length !== hiddenColumns.length) {
+      if (hiddenColumnsChange) {
         this._hiddenColumns = hiddenColumns;
         if (hiddenColumns.length) {
           this.fireEvent("popin-change", {
@@ -930,11 +631,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
       }
     }
-
     /**
      * Gets settings to be propagated from columns to rows.
      *
-     * @returns {object}
+     * @returns { array }
      * @memberof Table
      */
     getColumnPropagationSettings() {
@@ -945,6 +645,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           demandPopin: column.demandPopin,
           text: column.textContent,
           popinText: column.popinText,
+          popinDisplay: column.popinDisplay,
           visible: !this._hiddenColumns[index]
         };
       }, this);
@@ -973,10 +674,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this.growing === _TableGrowingMode.default.Scroll;
     }
     get _growingButtonText() {
-      return this.growingButtonText || Table.i18nBundle.getText(_i18nDefaults.LOAD_MORE_TEXT);
+      return this.growingButtonText || Table_1.i18nBundle.getText(_i18nDefaults.LOAD_MORE_TEXT);
     }
     get ariaLabelText() {
-      const headerRowText = Table.i18nBundle.getText(_i18nDefaults.TABLE_HEADER_ROW_TEXT);
+      const rowsCount = this.rows.length + 1;
+      const headerRowText = Table_1.i18nBundle.getText(_i18nDefaults.TABLE_HEADER_ROW_INFORMATION, rowsCount);
       const columnsTitle = this.columns.map(column => {
         return column.textContent.trim();
       }).join(" ");
@@ -986,7 +688,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return (0, _AriaLabelHelper.getEffectiveAriaLabelText)(this);
     }
     get ariaLabelSelectAllText() {
-      return Table.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_SELECT_ALL_CHECKBOX);
+      return Table_1.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_SELECT_ALL_CHECKBOX);
     }
     get loadMoreAriaLabelledBy() {
       if (this.moreDataText) {
@@ -1001,7 +703,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this._inViewport ? "absolute" : "sticky";
     }
     get isMultiSelect() {
-      return this.mode === "MultiSelect";
+      return this.mode === _TableMode.default.MultiSelect;
+    }
+    get isSingleSelect() {
+      return this.mode === _TableMode.default.SingleSelect;
     }
     get selectedRows() {
       return this.rows.filter(row => row.selected);
@@ -1016,12 +721,137 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this._itemNavigation._getCurrentItem();
     }
     get columnHeaderTabbables() {
-      return (0, _TabbableElements.getTabbableElements)(this.columnHeader);
+      return this.columnHeader ? (0, _TabbableElements.getTabbableElements)(this.columnHeader) : [];
     }
     get columnHeaderLastElement() {
-      return (0, _TabbableElements.getLastTabbableElement)(this.columnHeader);
+      return this.columnHeader && (0, _TabbableElements.getLastTabbableElement)(this.columnHeader);
+    }
+  };
+  __decorate([(0, _property.default)()], Table.prototype, "noDataText", void 0);
+  __decorate([(0, _property.default)()], Table.prototype, "growingButtonText", void 0);
+  __decorate([(0, _property.default)()], Table.prototype, "growingButtonSubtext", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "hideNoData", void 0);
+  __decorate([(0, _property.default)({
+    type: _TableGrowingMode.default,
+    defaultValue: _TableGrowingMode.default.None
+  })], Table.prototype, "growing", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "busy", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default,
+    defaultValue: 1000
+  })], Table.prototype, "busyDelay", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "stickyColumnHeader", void 0);
+  __decorate([(0, _property.default)({
+    type: _TableMode.default,
+    defaultValue: _TableMode.default.None
+  })], Table.prototype, "mode", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: undefined
+  })], Table.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: ""
+  })], Table.prototype, "accessibleNameRef", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    multiple: true
+  })], Table.prototype, "_hiddenColumns", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "_noDataDisplayed", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "_loadMoreActive", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], Table.prototype, "_columnHeader", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "_inViewport", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Table.prototype, "_allRowsSelected", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true,
+    individualSlots: true,
+    invalidateOnChildChange: true
+  })], Table.prototype, "rows", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    individualSlots: true,
+    invalidateOnChildChange: {
+      properties: true,
+      slots: false
+    }
+  })], Table.prototype, "columns", void 0);
+  Table = Table_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-table",
+    fastNavigation: true,
+    styles: _Table.default,
+    renderer: _LitRenderer.default,
+    template: _TableTemplate.default,
+    dependencies: [_BusyIndicator.default, _CheckBox.default]
+  })
+  /** Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
+  *
+  * @event sap.ui.webc.main.Table#row-click
+  * @param {HTMLElement} row the activated row.
+  * @public
+  */, (0, _event.default)("row-click", {
+    detail: {
+      row: {
+        type: HTMLElement
+      }
+    }
+  })
+  /**
+  * Fired when <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
+  *
+  * @event sap.ui.webc.main.Table#popin-change
+  * @param {Array} poppedColumns popped-in columns.
+  * @since 1.0.0-rc.6
+  * @public
+  */, (0, _event.default)("popin-change", {
+    detail: {
+      poppedColumns: {
+        type: Array
+      }
+    }
+  })
+  /**
+  * Fired when the user presses the <code>More</code> button or scrolls to the table's end.
+  * <br><br>
+  *
+  * <b>Note:</b> The event will be fired if <code>growing</code> is set to <code>Button</code> or <code>Scroll</code>.
+  * @event sap.ui.webc.main.Table#load-more
+  * @public
+  * @since 1.0.0-rc.11
+  */, (0, _event.default)("load-more")
+  /**
+  * Fired when selection is changed by user interaction
+  * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+  *
+  * @event sap.ui.webc.main.Table#selection-change
+  * @param {Array} selectedRows An array of the selected rows.
+  * @param {Array} previouslySelectedRows An array of the previously selected rows.
+  * @public
+  * @since 1.0.0-rc.15
+  */, (0, _event.default)("selection-change", {
+    detail: {
+      selectedRows: {
+        type: Array
+      },
+      previouslySelectedRows: {
+        type: Array
+      }
     }
-  }
+  })], Table);
   Table.define();
   var _default = Table;
   _exports.default = _default;