@openui5/sap.ui.table 1.125.0 → 1.126.1

package/src/sap/ui/table/plugins/ODataV4Selection.js

@@ -106,6 +106,7 @@ sap.ui.define([
 	ODataV4Selection.prototype.onDeactivate = function(oTable) {
 		SelectionPlugin.prototype.onDeactivate.apply(this, arguments);
 		oTable.setProperty("selectionMode", TableSelectionMode.None);
+		detachFromBinding(this, this.getTableBinding());
 		this.clearSelection();
 	};
 
@@ -316,9 +317,24 @@ sap.ui.define([
 		// TODO: Same as V4Aggregation plugin, check comment there!
 		if (!oBinding.getModel().isA("sap.ui.model.odata.v4.ODataModel")) {
 			this.deactivate();
+		} else {
+			SelectionPlugin.prototype.onTableRowsBound.apply(this, arguments);
+			attachToBinding(this, oBinding);
 		}
 	};
 
+	function attachToBinding(oPlugin, oBinding) {
+		if (oBinding) {
+			oBinding.attachChange(oPlugin._onBindingChange, oPlugin);
+		}
+	}
+
+	function detachFromBinding(oPlugin, oBinding) {
+		if (oBinding) {
+			oBinding.detachChange(oPlugin._onBindingChange, oPlugin);
+		}
+	}
+
 	/**
 	 * Checks whether the limit is disabled.
 	 *
@@ -431,5 +447,13 @@ sap.ui.define([
 		updateHeaderSelectorIcon(this);
 	};
 
+	/**
+	 * Handler for change events of the binding.
+	 * @private
+	 */
+	ODataV4Selection.prototype._onBindingChange = function() {
+		updateHeaderSelectorIcon(this);
+	};
+
 	return ODataV4Selection;
 });

package/src/sap/ui/table/plugins/PluginBase.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 *
 	 * @private
 	 * @experimental Since 1.75

package/src/sap/ui/table/plugins/SelectionModelSelection.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *
 	 * @class Implements the selection methods for a Table
 	 * @extends sap.ui.table.plugins.SelectionPlugin
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 * @constructor
 	 * @private
 	 * @alias sap.ui.table.plugins.SelectionModelSelection

package/src/sap/ui/table/plugins/SelectionPlugin.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @class Implements the selection methods for a table.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 * @public
 	 * @since 1.64
 	 * @experimental As of version 1.64

package/src/sap/ui/table/plugins/V4Aggregation.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @class TODO (don't forget to document fixed row count restrictions because fixed rows are set by this plugin)
 	 * @extends sap.ui.table.plugins.PluginBase
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 * @private
 	 * @since 1.76
 	 * @ui5-restricted sap.ui.mdc

package/src/sap/ui/table/rowmodes/Auto.js

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @public
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 */
 	const AutoRowMode = RowMode.extend("sap.ui.table.rowmodes.Auto", /** @lends sap.ui.table.rowmodes.Auto.prototype */ {
 		metadata: {
@@ -73,7 +73,7 @@ sap.ui.define([
 				 * Whether to hide empty rows.
 				 *
 				 * @private
-				 * @ui5-restricted sap.ui.mdc.Table
+				 * @ui5-private sap.ui.mdc.Table
 				 */
 				hideEmptyRows: {type: "boolean", defaultValue: false, group: "Appearance", visibility: "hidden"}
 			}

package/src/sap/ui/table/rowmodes/Fixed.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @public
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 */
 	const FixedRowMode = RowMode.extend("sap.ui.table.rowmodes.Fixed", /** @lends sap.ui.table.rowmodes.Fixed.prototype */ {
 		metadata: {
@@ -58,7 +58,7 @@ sap.ui.define([
 				 * Whether to hide empty rows.
 				 *
 				 * @private
-				 * @ui5-restricted sap.ui.mdc.Table
+				 * @ui5-private sap.ui.mdc.Table
 				 */
 				hideEmptyRows: {type: "boolean", defaultValue: false, group: "Appearance", visibility: "hidden"}
 			}

package/src/sap/ui/table/rowmodes/Interactive.js

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @public
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 */
 	const InteractiveRowMode = RowMode.extend("sap.ui.table.rowmodes.Interactive", /** @lends sap.ui.table.rowmodes.Interactive.prototype */ {
 		metadata: {

package/src/sap/ui/table/rowmodes/RowMode.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @public
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 */
 	const RowMode = Element.extend("sap.ui.table.rowmodes.RowMode", /** @lends sap.ui.table.rowmodes.RowMode.prototype */ {
 		metadata: {

package/src/sap/ui/table/rowmodes/Variable.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.table.rowmodes.RowMode
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/table/themes/sap_hcb/base_AnalyticalTable.less

@@ -0,0 +1,38 @@
+/* ============================================= */
+/* CSS for control sap.ui.table/AnalyticalTable  */
+/* Base theme                                    */
+/* ============================================= */
+
+// sapUiAnalyticalTableGroupCellHidden and sapUiAnalyticalTableSumCellHidden provides the possibility for applications to hide
+// the cell content of a column on group headers and / or sums by using addStyleClass of the column template
+.sapUiAnalyticalTable .sapUiTableGroupHeaderRow .sapUiTableCellInner > .sapUiAnalyticalTableGroupCellHidden,
+.sapUiAnalyticalTable .sapUiTableSummaryRow .sapUiTableCellInner > .sapUiAnalyticalTableSumCellHidden {
+	visibility: hidden; /* hidden cell content*/
+}
+
+.sapUiAnalyticalTable .sapUiTableGroupMenuButton {
+	display: none;
+}
+
+.sapUiAnalyticalTable .sapUiTableGroupHeaderRow > .sapUiTableRowSelectionCell .sapUiTableGroupMenuButton {
+	position: absolute;
+	width: 2.5rem;
+	text-align: center;
+	z-index: 5;
+	right: 0;
+	top: 50%;
+	-webkit-transform: translatey(-50%);
+	transform: translatey(-50%);
+	background-color: @_sap_ui_table_Grouping_GroupHeaderBackground;
+	font-family: 'SAP-icons';
+	font-size: 1.375rem;
+	color: @sapUiContentIconColor;
+	display: block;
+}
+
+// Shift last cell content to left. On the right edge, the touch group menu button is placed.
+html.sap-tablet:not(.sap-desktop), html.sap-phone {
+	.sapUiAnalyticalTable .sapUiTableGroupMode:not(.sapUiTableRAct):not(.sapUiTableRActS) .sapUiTableCtrlScroll .sapUiTableGroupHeaderRow .sapUiTableCellLast {
+		padding-right: 3rem; // The group menu button has a width of 2.5rem. Let the padding be slightly bigger.
+	}
+}

package/src/sap/ui/table/themes/sap_hcb/base_Cell.less

@@ -0,0 +1,441 @@
+/* ========================== */
+/* CSS for sap.ui.table/Cell  */
+/* Base theme                 */
+/* ========================== */
+
+@_sap_ui_table_Cell_FocusOutlineOffset: -@sapUiContentFocusWidth;
+@_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome: calc(-@sapUiContentFocusWidth ~"- 0.0625rem");
+@_sap_ui_table_Cell_Padding: 0 0.5rem;
+@_sap_ui_table_Cell_TouchMenuIconSize: 1.375rem;
+@_sap_ui_table_Cell_ColumnIconSize: 0.75rem;
+@_sap_ui_table_Cell_BorderColorSelected: @sapUiListBorderColor;
+@_sap_ui_table_Cell_BorderColorFixedSelected: @sapUiListTableFixedBorder;
+@_sap_ui_table_Cell_ShadowColorFixed: transparent;
+@_sap_ui_table_Cell_BorderBottomFocus: @sapUiListTableFixedBorder;
+@_sap_ui_table_Cell_DummyBorderColor: @sapUiListVerticalBorderColor;
+
+/*
+ * Focus outline
+ */
+.sapUiTableCell:focus {
+	outline: none;
+
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		outline-offset: @_sap_ui_table_Cell_FocusOutlineOffset;
+
+		.sapUiTableZoomout & {
+			outline-offset: @_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome;
+		}
+	}
+}
+
+/*
+ * Hover
+ */
+.sapUiTableHeaderCell:not(.sapUiTableRowActionHeaderCell) {
+	&:hover {
+		background-color: @sapUiListHoverBackground;
+	}
+}
+
+/*
+ * Borders
+ */
+.sapUiTableCell {
+	position: relative;
+	box-sizing: border-box;
+	border-right: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	border-bottom: @_sap_ui_table_BaseBorderWidth solid @sapUiListBorderColor;
+
+	.sapUiTableRowIndented > &.sapUiTableRowSelectionCell {
+		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	}
+
+	// Adds a border on top that might be required due to indentation of the row above.
+	.sapUiTableGroupMode &.sapUiTableRowSelectionCell {
+		box-shadow: 0 -@_sap_ui_table_BaseBorderWidth @sapUiListBorderColor;
+	}
+
+	// Last data column border
+	&.sapUiTableCellLast {
+		// The table and row action column have a border, so the last data column doesn't need one.
+		// See: sapUiTableCellDummy, sapUiTableCtrlScr
+		border-right-color: transparent;
+	}
+
+	// Row action column border
+	&.sapUiTableRowActionHeaderCell,
+	&.sapUiTableRowActionCell {
+		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+
+		.sapUiTableHScr & {
+			border-left-color: @sapUiListTableFixedBorder;
+			border-right-color: transparent;
+		}
+	}
+	&.sapUiTableRowActionCell {
+		.sapUiTableRowNavIndicator & {
+			border-right: none;
+			border-left: none;
+			background-color: transparent;
+		}
+	}
+
+	// Fixed data column border
+	&.sapUiTableCellLastFixed {
+		border-right-color: @sapUiListTableFixedBorder;
+	}
+
+	// Header rows borders
+	&.sapUiTableHeaderCell {
+		// Column header rows don't have bottom borders. The header area as a whole has a bottom border.
+		// See: sapUiTableColHdrCnt
+		border-bottom: none;
+	}
+
+	// Fixed rows borders
+	.sapUiTableRowLastFixedTop > &,
+	.sapUiTableRowLastScrollable > & {
+		border-bottom-color: @sapUiListTableFixedBorder;
+
+		.sapUiTableRowSel& {
+			border-bottom-color: @_sap_ui_table_Cell_BorderColorFixedSelected;
+		}
+
+		&:focus {
+			border-bottom-color: @_sap_ui_table_Cell_BorderBottomFocus;
+		}
+	}
+
+	.sapUiTableRowFirstScrollable > &,
+	.sapUiTableRowFirstFixedBottom > & {
+		box-shadow: 0 @_sap_ui_table_BaseBorderWidth @_sap_ui_table_Cell_ShadowColorFixed inset;
+	}
+
+	// Last row border
+	.sapUiTableLastRow > & {
+		// The table has a border, so the last row doesn't need one.
+		border-bottom-color: transparent;
+	}
+
+	> .sapUiTableCellInner {
+		box-sizing: border-box;
+
+		&.sapUiTableFirstColumnCell {
+			padding-left: 1rem;
+		}
+	}
+
+	.sapUiTableRowSel > & {
+		border-bottom-color: @_sap_ui_table_Cell_BorderColorSelected;
+	}
+
+	.sapUiTableSummaryRow > & {
+		border-left-color: transparent;
+		border-right-color: transparent;
+	}
+}
+
+.sapUiTableRowSelectionHeaderCell { // Contains highlight and SelectAll selector.
+	display: none;
+	vertical-align: bottom;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: @_sap_ui_table_RowSelectorWidth;
+	min-height: @_sap_ui_table_ColumnHeaderHeight;
+
+	.sapUiSizeCozy & {
+		min-height: @_sap_ui_table_ColumnHeaderHeightCozy;
+	}
+
+	.sapUiTableRowSelectors &,
+	.sapUiTableRowHighlights & {
+		display: inline-block;
+	}
+
+	// Only selectors visible.
+	.sapUiTableRowSelectors:not(.sapUiTableRowHighlights) & {
+		width: @_sap_ui_table_RowSelectorWidth;
+
+		.sapUiSizeCondensed & {
+			width: @_sap_ui_table_RowSelectorWidthCondensed;
+		}
+
+		.sapUiSizeCozy & {
+			width: @_sap_ui_table_RowSelectorWidthCozy;
+		}
+	}
+
+	// Only highlights visible.
+	.sapUiTableRowHighlights:not(.sapUiTableRowSelectors) & {
+		width: @_sap_ui_table_RowHighlightWidth;
+	}
+
+	// Both selectors and highlights visible.
+	.sapUiTableRowHighlights.sapUiTableRowSelectors & {
+		width: calc(@_sap_ui_table_RowSelectorWidth ~"+" @_sap_ui_table_RowHighlightWidth);
+
+		.sapUiSizeCondensed & {
+			width: calc(@_sap_ui_table_RowSelectorWidthCondensed ~"+" @_sap_ui_table_RowHighlightWidth);
+		}
+
+		.sapUiSizeCozy & {
+			width: calc(@_sap_ui_table_RowSelectorWidthCozy ~"+" @_sap_ui_table_RowHighlightWidth);
+		}
+	}
+
+	&.sapUiTableSelAllDisabled > * {
+		opacity: 0.3;
+		pointer-events: none;
+	}
+
+	&:not(.sapUiTableSelAllDisabled), &:not(.sapUiTableSelAllDisabled) .sapUiIcon {
+		cursor: pointer;
+	}
+}
+
+.sapUiTableHeaderDataCell {
+	padding: 7px 0;
+
+	&.sapUiTableHeaderCellActive {
+		cursor: pointer;
+		.sapMLabel, .sapMText, .sapUiIcon {
+			cursor: pointer;
+		}
+	}
+
+	&.sapUiTableHeaderCellActive:active {
+		// The active state background color and text color should not be applied if column reordering is in progress.
+		.sapUiTable:not(.sapUiTableDragDrop) & {
+			background-color: @sapUiListActiveBackground;
+			color: @sapUiListActiveTextColor;
+		}
+
+		& > .sapUiTableCellInner {
+			span,
+			label,
+			&.sapUiTableColSorted::after,
+			&.sapUiTableColFiltered::after {
+				color: @sapUiListActiveTextColor;
+			}
+		}
+	}
+
+	> .sapUiTableCellInner {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: normal;
+		padding: @_sap_ui_table_Cell_Padding;
+
+		&.sapUiTableFirstColumnCell {
+			padding-left: 1rem;
+		}
+
+		& > div:first-child {
+			display: flex;
+			flex: 1 1 auto;
+			overflow: hidden;
+
+			> * {
+				overflow: hidden;
+			}
+		}
+
+		&::after {
+			.sapUiTableColSorted&,
+			.sapUiTableColFiltered& {
+				content: "";
+				font-family: "SAP-Icons";
+				font-size: @_sap_ui_table_Cell_ColumnIconSize;
+				color: @sapUiContentNonInteractiveIconColor;
+				margin-left: 0.5rem;
+				flex: none;
+			}
+
+			.sapUiTableColSorted& {
+				content: "\e1fd";
+			}
+
+			.sapUiTableColSortedD& {
+				content: "\e1fc";
+			}
+
+			.sapUiTableColFiltered& {
+				content: "\e076";
+			}
+
+			.sapUiTableColFiltered.sapUiTableColSorted& {
+				content: "\e076\00a0\e1fd";
+			}
+
+			.sapUiTableColFiltered.sapUiTableColSortedD& {
+				content: "\e076\00a0\e1fc";
+			}
+		}
+	}
+
+	> .sapUiTableCellTouchMenu {
+		display: flex;
+		padding: @_sap_ui_table_Cell_Padding;
+
+		.sapUiTableColResizer {
+			margin-left: auto;
+		}
+
+		.sapUiTableColResizer,
+		.sapUiTableColDropDown {
+			font-family: "SAP-icons";
+			font-size: @_sap_ui_table_Cell_TouchMenuIconSize;
+			color: @sapUiContentIconColor;
+			cursor: default;
+
+			&:active {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+}
+
+.sapUiTableRowActionHeaderCell {
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 100%;
+	display: none;
+	z-index: 4; /* Ensure Action Area before Resize/Reorder bars */
+	width: @_sap_ui_table_RowActionColumnWidth;
+
+	.sapUiTableRAct &,
+	.sapUiTableRActS & {
+		display: block;
+	}
+
+	.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidth;
+	}
+
+	.sapUiSizeCozy & {
+		width: @_sap_ui_table_RowActionColumnWidthCozy;
+	}
+
+	.sapUiSizeCozy .sapUiTableRActS &,
+	.sapUiSizeCozy.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
+	}
+
+	.sapUiSizeCondensed & {
+		width: @_sap_ui_table_RowActionColumnWidthCondensed;
+	}
+
+	.sapUiSizeCondensed .sapUiTableRActS &,
+	.sapUiSizeCondensed.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
+	}
+
+	> span {
+		display: none;
+	}
+}
+
+.sapUiTableDataCell {
+	padding: 0;
+	vertical-align: middle;
+
+	> .sapUiTableCellInner {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		padding: @_sap_ui_table_Cell_Padding;
+		white-space: nowrap;
+	}
+}
+
+.sapUiTableRowSelectionCell {
+	cursor: pointer;
+}
+
+.sapUiTableRowSelectionCell,
+.sapUiTableRowActionCell {
+	position: relative;
+}
+
+.sapUiTableRowActionCell {
+	display: flex;
+	align-items: center;
+	min-width: @_sap_ui_table_RowActionColumnWidth;
+
+	.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidth;
+	}
+
+	.sapUiSizeCozy & {
+		min-width: @_sap_ui_table_RowActionColumnWidthCozy;
+	}
+
+	.sapUiSizeCozy .sapUiTableRActS &,
+	.sapUiSizeCozy.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
+	}
+
+	.sapUiSizeCondensed & {
+		min-width: @_sap_ui_table_RowActionColumnWidthCondensed;
+	}
+
+	.sapUiSizeCondensed .sapUiTableRActS &,
+	.sapUiSizeCondensed.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
+	}
+
+	.sapUiTableRowNavIndicator & {
+		min-width: @_sap_ui_table_NavIndicatorWidth;
+	}
+}
+
+.sapUiTableCellDummy {
+	border-left: @_sap_ui_table_BaseBorderWidth solid @_sap_ui_table_Cell_DummyBorderColor;
+	pointer-events: none;
+	.sapUiTableContentRow & {
+		background-color: @sapBackgroundColor !important;
+	}
+}
+
+.sapUiTableCellFlex {
+	> .sapUiTableCellInner {
+		display: flex;
+		align-items: center;
+
+		> * {
+			overflow: hidden;
+		}
+	}
+}
+
+.sapUiTableRowHidden > .sapUiTableCell > *,
+.sapUiTableCellHidden > * {
+	display: none;
+}
+
+/**
+ * If there is no element (selection/highlight/expand/collapse) at the left most of the table
+ * then the first cell must have 1rem left padding while regular cells have 0.5rem left padding
+ * this additional 0.5rem padding decreases the max content width of the column cells 0.5rem.
+ * The selector below is adding additional 0.5rem padding to the first th elements of the table.
+ * Since the box-sizing is content-box for table cells this will increase the DOM column width
+ * 0.5rem when compared to the width property of the column. Although this might not be desired
+ * it is now aligned with the resposive table behavior.
+ * Another alternative would be rendering a dummy 0.5rem width column. While this can solve the
+ * API and DOM column width difference, changing the table layout might be expensive.
+ */
+.sapUiTable:not(.sapUiTableRowSelectors,.sapUiTableRowHighlights) .sapUiTableFirstVisibleColumnTH {
+	padding-left: .25rem;
+	padding-right: .25rem;
+}