@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/TableRow.js

@@ -1,467 +1,225 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import {
-	isSpace,
-	isEnter,
-	isF7,
-	isTabNext,
-	isTabPrevious,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import CheckBox from "./CheckBox.js";
-import TableMode from "./types/TableMode.js";
-import TableRowType from "./types/TableRowType.js";
-import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import styles from "./generated/themes/TableRow.css.js";
-
-/**
- * @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,
-			defaultValue: TableMode.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,
-			defaultValue: TableRowType.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,
-		},
-		_tabbableElements: {
-			type: Object,
-			multiple: true,
-		},
-		_tabMarked: {
-			type: Boolean,
-		},
-	},
-	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": {},
-	},
+var __decorate = (this && this.__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;
 };
-
+import { customElement, slotStrict as slot, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import { toggleAttribute } from "./TableUtils.js";
+import TableRowTemplate from "./TableRowTemplate.js";
+import TableRowBase from "./TableRowBase.js";
+import TableRowCss from "./generated/themes/TableRow.css.js";
+import { TABLE_ROW_MULTIPLE_ACTIONS, TABLE_ROW_SINGLE_ACTION, } from "./generated/i18n/i18n-defaults.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-table-row</code> component represents a row in the <code>ui5-table</code>.
+ * The `ui5-table-row` component represents a row in the `ui5-table`.
  *
- * <h3>CSS Shadow Parts</h3>
+ * ### ES6 Module Import
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-table-row</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>row - Used to style the native <code>tr</code> element</li>
- * <li>popin-row - Used to style the <code>tr</code> element when a row pops in</li>
- * </ul>
+ * `import "@ui5/webcomponents/dist/TableRow.js";`
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.TableRow
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-table-row
- * @implements sap.ui.webcomponents.main.ITableRow
+ * @extends TableRowBase
+ * @since 2.0.0
  * @public
  */
-class TableRow extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableRowTemplate;
-	}
-
-	static get dependencies() {
-		return [CheckBox];
-	}
-
-	_onmouseup() {
-		this.deactivate();
-	}
-
-	_onkeydown(event) {
-		const itemActive = this.type === TableRowType.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 (isTabNext(event) || isTabPrevious(event)) {
-			this._tabMarked = true;
-		}
-
-		if (isTabNext(event) || isTabPrevious(event)) {
-			this._tabMarked = true;
-		}
-
-		if (isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
-			event.preventDefault();
-		}
-
-		if (isRowFocused && !checkboxPressed) {
-			if ((isSpace(event) && itemSelectable) || (isEnter(event) && isSingleSelect)) {
-				this.fireEvent("selection-requested", { row: this });
-			}
-
-			if (isEnter(event) && itemActive) {
-				this.fireEvent("row-click", { row: this });
-				if (!isSingleSelect) {
-					this.activate();
-				}
-			}
-		}
-
-		if (isF7(event)) {
-			event.preventDefault();
-			this._handleF7(event.target);
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.deactivate();
-		}
-	}
-
-	_ontouchstart(event) {
-		this.activate();
-	}
-
-	_ontouchend() {
-		this.deactivate();
-	}
-
-	_onfocusout(event) {
-		this.deactivate();
-
-		if (!this._tabMarked) {
-			this._tabbableElements.forEach(el => el.setAttribute("tabindex", -1));
-		} else {
-			this._tabMarked = false;
-		}
-	}
-
-	_onfocusin(event, forceSelfFocus = false) {
-		const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
-
-		if (forceSelfFocus || this._activeElementHasAttribute("ui5-table-cell")) {
-			tableRowRoot.focus();
-			this.activate();
-		}
-
-		this._tabbableElements.forEach(el => el.setAttribute("tabindex", 0));
-
-		this.fireEvent("_focused", event);
-	}
-
-	_onrowclick(event) {
-		const checkboxPressed = event.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") {
-			return;
-		}
-
-		if (!this.contains(this.getRootNode().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.deactivate();
-		}
-
-		if (this._activeElementHasAttribute("ui5-table-row")) {
-			if (this.isSingleSelect) {
-				this._handleSelection();
-			}
-
-			if (this.type === TableRowType.Active && !checkboxPressed) {
-				this.fireEvent("row-click", { row: this });
-			}
-		}
-	}
-
-	_handleSelection() {
-		this.fireEvent("selection-requested", { row: this });
-	}
-
-	/**
-	 * Toggles focus between the table row's root and the last focused nested element.
-	 * @private
-	 * @param {Object} activeElement The currently focused element
-	 */
-	_handleF7(activeElement) {
-		const elements = this._tabbableElements;
-
-		if (!elements.length) {
-			return;
-		}
-
-		const table = this.parentElement;
-		const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
-		const prevFocusedIdx = table._prevNestedElementIndex;
-
-		if (activeElement === tableRowRoot) {
-			const lastFocusedElement = elements[prevFocusedIdx];
-
-			if (lastFocusedElement) {
-				lastFocusedElement.focus();
-			} else {
-				elements[0].focus();
-			}
-
-			return;
-		}
-
-		const shadowRoot = activeElement.shadowRoot;
-		const target = shadowRoot ? shadowRoot.activeElement : activeElement;
-		const targetIndex = elements.indexOf(target);
-
-		if (targetIndex > -1) {
-			table._prevNestedElementIndex = targetIndex;
-			tableRowRoot.focus();
-		}
-	}
-
-	_activeElementHasAttribute(attr) {
-		return this.getRootNode().activeElement.hasAttribute(attr);
-	}
-
-	activate() {
-		if (this.type === TableRowType.Active) {
-			this.active = true;
-		}
-	}
-
-	deactivate() {
-		if (this.active) {
-			this.active = false;
-		}
-	}
-
-	get shouldPopin() {
-		return this._columnsInfo.filter(el => {
-			return el.demandPopin || !el.visible;
-		}).length;
-	}
-
-	get allColumnsPoppedIn() {
-		return this._columnsInfo.every(el => el.demandPopin && !el.visible);
-	}
-
-	onBeforeRendering() {
-		if (!this.shouldPopin) {
-			return;
-		}
-
-		this.visibleCells = [];
-		this.popinCells = [];
-
-		if (this.cells.length === 0) {
-			return;
-		}
-
-		const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : "";
-		this._columnsInfo.forEach((info, index) => {
-			const cell = this.cells[index];
-
-			if (!cell) {
-				return;
-			}
-
-			if (info.visible) {
-				this.visibleCells.push(cell);
-				cell.popined = 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}`,
-				});
-
-				cell.popined = true;
-			} else {
-				cell.popined = false;
-			}
-		}, this);
-
-		const lastVisibleCell = this.visibleCells[this.visibleCells.length - 1];
-
-		if (lastVisibleCell) {
-			lastVisibleCell.lastInRow = true;
-		}
-	}
-
-	get visibleCellsCount() {
-		let visibleCellsCount = this.visibleCells.length;
-
-		if (this.isMultiSelect) {
-			visibleCellsCount += 1;
-		}
-
-		return visibleCellsCount;
-	}
-
-	get ariaLabelText() {
-		const ariaLabel = this.cells.map((cell, index) => {
-			const columText = this.getColumnTextByIdx(index);
-			const cellText = this.getCellText(cell);
-			return `${columText} ${cellText}`;
-		}).join(" ");
-		return `${ariaLabel}. ${this._ariaPosition}`;
-	}
-
-	get ariaLabelRowSelection() {
-		return TableRow.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION);
-	}
-
-	get isSingleSelect() {
-		return this.mode === "SingleSelect";
-	}
-
-	get isMultiSelect() {
-		return this.mode === "MultiSelect";
-	}
-
-	getCellText(cell) {
-		return this.getNormilzedTextContent(cell.textContent);
-	}
-
-	getColumnTextByIdx(index) {
-		const columnInfo = this._columnsInfo[index];
-
-		if (!columnInfo) {
-			return "";
-		}
-
-		return this.getNormilzedTextContent(columnInfo.text);
-	}
-
-	getNormilzedTextContent(textContent) {
-		return textContent.replace(/[\n\r\t]/g, "").trim();
-	}
-
-	static async onDefine() {
-		TableRow.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
+let TableRow = class TableRow extends TableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the interactive state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.interactive = false;
+        /**
+         * Defines the navigated state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.navigated = false;
+        /**
+         * Defines whether the row is movable.
+         *
+         * @default false
+         * @since 2.6.0
+         * @public
+         */
+        this.movable = false;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.ariaRowIndex = (this.role === "row") ? `${this._rowIndex + 2}` : null;
+        toggleAttribute(this, "draggable", this.movable, "true");
+        toggleAttribute(this, "_interactive", this._isInteractive);
+        toggleAttribute(this, "_alternate", this._alternate);
+    }
+    async focus(focusOptions) {
+        this.setAttribute("tabindex", "-1");
+        HTMLElement.prototype.focus.call(this, focusOptions);
+        return Promise.resolve();
+    }
+    _onkeydown(e, eventOrigin) {
+        super._onkeydown(e, eventOrigin);
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (eventOrigin === this && this._isInteractive && isEnter(e)) {
+            this.toggleAttribute("_active", true);
+            this._onclick();
+        }
+    }
+    _onclick() {
+        if (this === getActiveElement()) {
+            if (this._isSelectable && !this._hasSelector) {
+                this._onSelectionChange();
+            }
+            else if (this.interactive || this._isNavigable) {
+                this._table?._onRowClick(this);
+            }
+        }
+    }
+    _onkeyup() {
+        this.removeAttribute("_active");
+    }
+    _onfocusout() {
+        this.removeAttribute("_active");
+    }
+    _onOverflowButtonClick(e) {
+        const ctor = this.actions[0].constructor;
+        ctor.showMenu(this._overflowActions, e.target);
+        e.stopPropagation();
+    }
+    get _isInteractive() {
+        return this.interactive || (this._isSelectable && !this._hasSelector) || this._isNavigable;
+    }
+    get _isNavigable() {
+        return this._fixedActions.find(action => {
+            return action.hasAttribute("ui5-table-row-action-navigation") && !action._isInteractive;
+        }) !== undefined;
+    }
+    get _rowIndex() {
+        if (this.position !== undefined) {
+            return this.position;
+        }
+        if (this._table) {
+            return this._table.rows.indexOf(this);
+        }
+        return -1;
+    }
+    get _hasOverflowActions() {
+        let renderableActionsCount = 0;
+        return this.actions.some(action => {
+            if (action.isFixedAction() || !action.invisible) {
+                renderableActionsCount++;
+            }
+            return renderableActionsCount > this._rowActionCount;
+        });
+    }
+    get _flexibleActions() {
+        const flexibleActions = this.actions.filter(action => !action.isFixedAction());
+        const fixedActionsCount = this.actions.length - flexibleActions.length;
+        let maxFlexibleActionsCount = this._rowActionCount - fixedActionsCount;
+        if (maxFlexibleActionsCount < 1) {
+            return []; // fixed actions occupy all the available space
+        }
+        if (flexibleActions.length <= maxFlexibleActionsCount) {
+            return flexibleActions; // all actions fit the available space
+        }
+        const visibleFlexibleActions = flexibleActions.filter(action => !action.invisible);
+        if (visibleFlexibleActions.length > maxFlexibleActionsCount) {
+            maxFlexibleActionsCount--; // preserve space for the overflow button
+        }
+        return visibleFlexibleActions.slice(0, maxFlexibleActionsCount);
+    }
+    get _fixedActions() {
+        let maxFixedActionsCount = this._rowActionCount;
+        if (this._hasOverflowActions) {
+            maxFixedActionsCount--;
+        }
+        const fixedActions = this.actions.filter(action => action.isFixedAction());
+        return fixedActions.slice(0, maxFixedActionsCount);
+    }
+    get _overflowActions() {
+        const fixedActions = this._fixedActions;
+        const flexibleActions = this._flexibleActions;
+        const overflowActions = [];
+        this.actions.forEach(action => {
+            if (!action.invisible && !fixedActions.includes(action) && !flexibleActions.includes(action)) {
+                overflowActions.push(action);
+            }
+        });
+        return overflowActions;
+    }
+    get _availableActionsCount() {
+        if (this._rowActionCount < 1) {
+            return 0;
+        }
+        return [...this._flexibleActions, ...this._fixedActions].filter(action => {
+            return !action.invisible && action._isInteractive;
+        }).length + (this._hasOverflowActions ? 1 : 0);
+    }
+    get _actionCellAccText() {
+        const availableActionsCount = this._availableActionsCount;
+        if (availableActionsCount > 0) {
+            const bundleKey = availableActionsCount === 1 ? TABLE_ROW_SINGLE_ACTION : TABLE_ROW_MULTIPLE_ACTIONS;
+            return TableRowBase.i18nBundle.getText(bundleKey, availableActionsCount);
+        }
+    }
+};
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: ["_popin", "_popinHidden"],
+            slots: false,
+        },
+    })
+], TableRow.prototype, "cells", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        individualSlots: true,
+    })
+], TableRow.prototype, "actions", void 0);
+__decorate([
+    property()
+], TableRow.prototype, "rowKey", void 0);
+__decorate([
+    property({ type: Number })
+], TableRow.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "navigated", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "movable", void 0);
+__decorate([
+    query("#popin-cell")
+], TableRow.prototype, "_popinCell", void 0);
+__decorate([
+    query("#actions-cell")
+], TableRow.prototype, "_actionsCell", void 0);
+TableRow = __decorate([
+    customElement({
+        tag: "ui5-table-row",
+        styles: [TableRowBase.styles, TableRowCss],
+        template: TableRowTemplate,
+    })
+], TableRow);
 TableRow.define();
-
 export default TableRow;
+//# sourceMappingURL=TableRow.js.map