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

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

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/base/util/TabbableElements", "./CheckBox", "./types/TableMode", "./types/TableRowType", "./generated/templates/TableRowTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/TableRow.css"], function (_exports, _UI5Element, _i18nBundle, _LitRenderer, _Keys, _getActiveElement, _TabbableElements, _CheckBox, _TableMode, _TableRowType, _TableRowTemplate, _i18nDefaults, _TableRow) {
+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/i18nBundle", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/base/util/TabbableElements", "sap/ui/webc/common/thirdparty/base/MarkedEvents", "./CheckBox", "./types/TableMode", "./types/TableRowType", "./types/TableColumnPopinDisplay", "./generated/templates/TableRowTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/TableRow.css"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _i18nBundle, _LitRenderer, _Keys, _getActiveElement, _TabbableElements, _MarkedEvents, _CheckBox, _TableMode, _TableRowType, _TableColumnPopinDisplay, _TableRowTemplate, _i18nDefaults, _TableRow) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,139 +6,27 @@ 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);
   _getActiveElement = _interopRequireDefault(_getActiveElement);
   _CheckBox = _interopRequireDefault(_CheckBox);
   _TableMode = _interopRequireDefault(_TableMode);
   _TableRowType = _interopRequireDefault(_TableRowType);
+  _TableColumnPopinDisplay = _interopRequireDefault(_TableColumnPopinDisplay);
   _TableRowTemplate = _interopRequireDefault(_TableRowTemplate);
   _TableRow = _interopRequireDefault(_TableRow);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-table-row",
-    managedSlots: true,
-    slots: /** @lends sap.ui.webcomponents.main.TableRow.prototype */{
-      /**
-       * Defines the cells of the component.
-       * <br><br>
-       * <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design.
-       *
-       * @type {sap.ui.webcomponents.main.ITableCell[]}
-       * @slot cells
-       * @public
-       */
-      "default": {
-        propertyName: "cells",
-        type: HTMLElement,
-        individualSlots: true
-      }
-    },
-    properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */{
-      /**
-       * Defines the mode of the row (None, SingleSelect, MultiSelect).
-       * @type {TableMode}
-       * @defaultvalue "None"
-       * @since 1.0.0-rc.15
-       * @private
-       */
-      mode: {
-        type: _TableMode.default,
-        defaultValue: _TableMode.default.None
-      },
-      /**
-       * Defines the visual indication and behavior of the component.
-       * <br><br>
-       * Available options are:
-       * <ul>
-       * <li><code>Active</code></li>
-       * <li><code>Inactive</code></li>
-       * </ul>
-       * <br><br>
-       * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press,
-       * while with type <code>Inactive</code> - will not.
-       *
-       * @type {TableRowType}
-       * @defaultvalue "Inactive"
-       * @since 1.0.0-rc.15
-       * @public
-      */
-      type: {
-        type: _TableRowType.default,
-        defaultValue: _TableRowType.default.Inactive
-      },
-      /**
-       * Defines the row's selected state.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @since 1.0.0-rc.15
-       * @public
-       */
-      selected: {
-        type: Boolean
-      },
-      /**
-       * Indicates if the table row is active.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @since 1.0.0-rc.15
-       * @private
-      */
-      active: {
-        type: Boolean
-      },
-      _columnsInfo: {
-        type: Object,
-        multiple: true
-      },
-      _tabIndex: {
-        type: String,
-        defaultValue: "-1"
-      },
-      _busy: {
-        type: Boolean
-      },
-      _ariaPosition: {
-        type: String,
-        defaultValue: "",
-        noAttribute: true
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */{
-      /**
-       * Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
-       *
-       * @event sap.ui.webcomponents.main.TableRow#row-click
-       * @since 1.0.0-rc.15
-       * @private
-       */
-      "row-click": {},
-      _focused: {},
-      /**
-       * Fired on selection change of an active row.
-       *
-       * @event sap.ui.webcomponents.main.TableRow#selection-requested
-       * @since 1.0.0-rc.15
-       * @private
-       */
-      "selection-requested": {},
-      /**
-       * Fired when F7 is pressed.
-       *
-       * @event sap.ui.webcomponents.main.TableRow#f7-pressed
-       * @since 1.2.0
-       * @private
-       */
-      "f7-pressed": {}
-    }
+  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 TableRow_1;
   /**
    * @class
    *
@@ -158,31 +46,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.TableRow
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.main.TableRow
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-table-row
-   * @implements sap.ui.webcomponents.main.ITableRow
+   * @implements sap.ui.webc.main.ITableRow
    * @public
    */
-  class TableRow extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get styles() {
-      return _TableRow.default;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _TableRowTemplate.default;
-    }
-    static get dependencies() {
-      return [_CheckBox.default];
-    }
+  let TableRow = TableRow_1 = class TableRow extends _UI5Element.default {
     constructor() {
       super();
-      const handleToushStartEvent = event => {
+      this.visibleCells = [];
+      this.popinCells = [];
+      // Properties, set and handled by the Table
+      this._tabbables = [];
+      this._columnsInfoString = "";
+      const handleToushStartEvent = () => {
         this.activate();
       };
       this._ontouchstart = {
@@ -193,33 +71,37 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _onmouseup() {
       this.deactivate();
     }
-    _onkeydown(event) {
+    _onkeydown(e) {
       const activeElement = (0, _getActiveElement.default)();
       const itemActive = this.type === _TableRowType.default.Active;
       const isSingleSelect = this.isSingleSelect;
       const itemSelectable = isSingleSelect || this.isMultiSelect;
       const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
-      const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
-      if ((0, _Keys.isTabNext)(event) && activeElement === ((0, _TabbableElements.getLastTabbableElement)(this) || this.root)) {
+      const target = e.target;
+      const checkboxPressed = target.classList.contains("ui5-multi-select-checkbox");
+      const rowElements = Array.from(this.shadowRoot.querySelectorAll("tr") || []);
+      const elements = rowElements.map(_TabbableElements.getLastTabbableElement);
+      const lastFocusableElement = elements.pop();
+      if ((0, _Keys.isTabNext)(e) && activeElement === (lastFocusableElement || this.root)) {
         this.fireEvent("_forward-after", {
           target: activeElement
         });
       }
-      if ((0, _Keys.isTabPrevious)(event) && activeElement === this.root) {
+      if ((0, _Keys.isTabPrevious)(e) && activeElement === this.root) {
         this.fireEvent("_forward-before", {
           target: activeElement
         });
       }
-      if ((0, _Keys.isSpace)(event) && event.target.tagName.toLowerCase() === "tr") {
-        event.preventDefault();
+      if ((0, _Keys.isSpace)(e) && target.tagName.toLowerCase() === "tr") {
+        e.preventDefault();
       }
       if (isRowFocused && !checkboxPressed) {
-        if ((0, _Keys.isSpace)(event) && itemSelectable || (0, _Keys.isEnter)(event) && isSingleSelect) {
+        if ((0, _Keys.isSpace)(e) && itemSelectable || (0, _Keys.isEnter)(e) && isSingleSelect) {
           this.fireEvent("selection-requested", {
             row: this
           });
         }
-        if ((0, _Keys.isEnter)(event) && itemActive) {
+        if ((0, _Keys.isEnter)(e) && itemActive) {
           this.fireEvent("row-click", {
             row: this
           });
@@ -228,15 +110,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           }
         }
       }
-      if ((0, _Keys.isF7)(event)) {
-        event.preventDefault();
+      if ((0, _Keys.isF7)(e)) {
+        e.preventDefault();
         this.fireEvent("f7-pressed", {
           row: this
         });
       }
     }
-    _onkeyup(event) {
-      if ((0, _Keys.isSpace)(event) || (0, _Keys.isEnter)(event)) {
+    _onkeyup(e) {
+      if ((0, _Keys.isSpace)(e) || (0, _Keys.isEnter)(e)) {
         this.deactivate();
       }
     }
@@ -246,27 +128,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _onfocusout() {
       this.deactivate();
     }
-    _onfocusin(event, forceSelfFocus = false) {
+    _onfocusin(e, forceSelfFocus = false) {
       if (forceSelfFocus || this._activeElementHasAttribute("ui5-table-cell")) {
         this.root.focus();
         this.activate();
       }
-      this.fireEvent("_focused", event);
+      this.fireEvent("_focused");
     }
-    _onrowclick(event) {
-      const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
+    _onrowclick(e) {
+      const checkboxPressed = e.target.classList.contains("ui5-multi-select-checkbox");
       // If the user tab over a button on IOS device, the document.activeElement
       // is the ui5-table-row. The check below ensure that, if a button within the row is pressed,
       // the row will not be selected.
-      if (event.isMarked === "button") {
+      if ((0, _MarkedEvents.getEventMark)(e) === "button") {
         return;
       }
-      if (!this.contains(this.getRootNode().activeElement)) {
+      const activeElement = this.getRootNode().activeElement;
+      if (!this.contains(activeElement)) {
         // If the user clickes on non-focusable element within the ui5-table-cell,
         // the focus goes to the body, se we have to bring it back to the row.
         // If the user clicks on input, button or similar clickable element,
         // the focus remains on that element.
-        this._onfocusin(event, true /* force row focus */);
+        this._onfocusin(e, true /* force row focus */);
         this.deactivate();
       }
       if (this._activeElementHasAttribute("ui5-table-row")) {
@@ -288,6 +171,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _activeElementHasAttribute(attr) {
       return this.getRootNode().activeElement.hasAttribute(attr);
     }
+    get _ariaCurrent() {
+      return this.navigated ? true : undefined;
+    }
     activate() {
       if (this.type === _TableRowType.default.Active) {
         this.active = true;
@@ -318,24 +204,31 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : "";
       this._columnsInfo.forEach((info, index) => {
         const cell = this.cells[index];
+        const popinDisplay = info.popinDisplay === _TableColumnPopinDisplay.default.Inline;
         if (!cell) {
           return;
         }
         if (info.visible) {
           this.visibleCells.push(cell);
           cell.popined = false;
+          cell._popinedInline = false;
         } else if (info.demandPopin) {
           const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : "";
           this.popinCells.push({
             cell,
             popinText: info.popinText,
-            classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`
+            classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`,
+            popinDisplayInline: popinDisplay
           });
           cell.popined = true;
+          if (info.popinDisplay === _TableColumnPopinDisplay.default.Inline) {
+            cell._popinedInline = true;
+          }
         } else {
           cell.popined = false;
+          cell._popinedInline = false;
         }
-      }, this);
+      });
       const lastVisibleCell = this.visibleCells[this.visibleCells.length - 1];
       if (lastVisibleCell) {
         lastVisibleCell.lastInRow = true;
@@ -349,42 +242,112 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return visibleCellsCount;
     }
     get ariaLabelText() {
+      const isSelected = this.selected ? TableRow_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_SELECTED) : TableRow_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_NOT_SELECTED);
+      const isRowSelectable = this.isSingleSelect || this.isMultiSelect;
       const ariaLabel = this.cells.map((cell, index) => {
         const columText = this.getColumnTextByIdx(index);
-        const cellText = this.getCellText(cell);
+        const cellText = cell.cellContent.length ? this.getCellText(cell) : cell.ariaLabelEmptyCellText;
         return `${columText} ${cellText}`;
       }).join(" ");
+      if (isRowSelectable) {
+        return `${ariaLabel}. ${this._ariaPosition}. ${isSelected}`;
+      }
       return `${ariaLabel}. ${this._ariaPosition}`;
     }
     get ariaLabelRowSelection() {
-      return TableRow.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_ROW_SELECTION);
+      return TableRow_1.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_ROW_SELECTION);
     }
     get isSingleSelect() {
-      return this.mode === "SingleSelect";
+      return this.mode === _TableMode.default.SingleSelect;
     }
     get isMultiSelect() {
-      return this.mode === "MultiSelect";
+      return this.mode === _TableMode.default.MultiSelect;
     }
     get root() {
       return this.shadowRoot.querySelector(".ui5-table-row-root");
     }
     getCellText(cell) {
-      return this.getNormilzedTextContent(cell.textContent);
+      const cellTextContent = cell.textContent;
+      return cellTextContent ? this.getNormilzedTextContent(cellTextContent) : "";
     }
     getColumnTextByIdx(index) {
       const columnInfo = this._columnsInfo[index];
       if (!columnInfo) {
         return "";
       }
-      return this.getNormilzedTextContent(columnInfo.text);
+      return columnInfo.text ? this.getNormilzedTextContent(columnInfo.text) : "";
     }
     getNormilzedTextContent(textContent) {
       return textContent.replace(/[\n\r\t]/g, "").trim();
     }
     static async onDefine() {
-      TableRow.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      TableRow_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    type: _TableRowType.default,
+    defaultValue: _TableRowType.default.Inactive
+  })], TableRow.prototype, "type", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], TableRow.prototype, "selected", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], TableRow.prototype, "navigated", void 0);
+  __decorate([(0, _property.default)({
+    type: _TableMode.default,
+    defaultValue: _TableMode.default.None
+  })], TableRow.prototype, "mode", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], TableRow.prototype, "active", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    multiple: true
+  })], TableRow.prototype, "_columnsInfo", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: "-1"
+  })], TableRow.prototype, "_tabIndex", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], TableRow.prototype, "_busy", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: "",
+    noAttribute: true
+  })], TableRow.prototype, "_ariaPosition", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true,
+    individualSlots: true
+  })], TableRow.prototype, "cells", void 0);
+  TableRow = TableRow_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-table-row",
+    styles: _TableRow.default,
+    renderer: _LitRenderer.default,
+    template: _TableRowTemplate.default,
+    dependencies: [_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.TableRow#row-click
+   * @since 1.0.0-rc.15
+   * @private
+   */, (0, _event.default)("row-click"), (0, _event.default)("_focused")
+  /**
+   * Fired on selection change of an active row.
+   *
+   * @event sap.ui.webc.main.TableRow#selection-requested
+   * @since 1.0.0-rc.15
+   * @private
+   */, (0, _event.default)("selection-requested")
+  /**
+   * Fired when F7 is pressed.
+   *
+   * @event sap.ui.webc.main.TableRow#f7-pressed
+   * @since 1.2.0
+   * @private
+   */, (0, _event.default)("f7-pressed")], TableRow);
   TableRow.define();
   var _default = TableRow;
   _exports.default = _default;