@ui5/webcomponents 0.0.0-39bd3067f → 0.0.0-4180fe799

package/src/TableCell.hbs

@@ -0,0 +1,7 @@
+<td
+	tabindex="-1"
+	part="cell"
+	role="cell"
+>
+	<slot></slot>
+</td>

package/src/TableCell.js

@@ -0,0 +1,88 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import TableCellTemplate from "./generated/templates/TableCellTemplate.lit.js";
+
+// Styles
+import styles from "./generated/themes/TableCell.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-table-cell",
+	slots: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+		/**
+		 * Specifies the content of the component.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+	properties: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+		/**
+		 * @private
+		 */
+		lastInRow: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		popined: {
+			type: Boolean,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-table-cell</code> component defines the structure of the data in a single <code>ui5-table</code> cell.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <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-cell</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>cell - Used to style the native <code>td</code> element</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.TableCell
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-table-cell
+ * @implements sap.ui.webcomponents.main.ITableCell
+ * @public
+ */
+class TableCell extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TableCellTemplate;
+	}
+}
+
+TableCell.define();
+
+export default TableCell;

package/src/TableColumn.hbs

@@ -0,0 +1,8 @@
+<th
+	scope="col"
+	part="column"
+	role="columnheader"
+	dir="{{effectiveDir}}"
+>
+	<slot></slot>
+</th>

package/src/TableColumn.js

@@ -0,0 +1,136 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import TableColumnTemplate from "./generated/templates/TableColumnTemplate.lit.js";
+
+// Styles
+import styles from "./generated/themes/TableColumn.css.js";
+
+const metadata = {
+	tag: "ui5-table-column",
+	slots: /** @lends sap.ui.webcomponents.main.TableColumn.prototype */ {
+
+		/**
+		 * Defines the content of the column header.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+	properties: /** @lends sap.ui.webcomponents.main.TableColumn.prototype */ {
+
+		/**
+		 * Defines the minimum table width required to display this column. By default it is always displayed.
+		 * <br><br>
+		 * The responsive behavior of the <code>ui5-table</code> is determined by this property. As an example, by setting
+		 * <code>minWidth</code> property to <code>400</code> sets the minimum width to 400 pixels, and	shows this column on tablet (and desktop) but hides it on mobile.
+		 * <br>
+		 * For further responsive design options, see <code>demandPopin</code> property.
+		 *
+		 * @type {Integer}
+		 * @defaultvalue Infinity
+		 * @public
+		 */
+		minWidth: {
+			type: Integer,
+			defaultValue: Infinity,
+		},
+
+		/**
+		 * The text for the column when it pops in.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		popinText: {
+			type: String,
+		},
+
+		/**
+		 * According to your <code>minWidth</code> settings, the component can be hidden
+		 * in different screen sizes.
+		 * <br><br>
+		 * Setting this property to <code>true</code>, shows this column as pop-in instead of hiding it.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		demandPopin: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		first: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		last: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		sticky: {
+			type: Boolean,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-table-column</code> component allows to define column specific properties that are applied
+ * when rendering the <code>ui5-table</code> component.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <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-column</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>column - Used to style the native <code>th</code> element</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.TableColumn
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-table-column
+ * @implements sap.ui.webcomponents.main.ITableColumn
+ * @public
+ */
+class TableColumn extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TableColumnTemplate;
+	}
+}
+
+TableColumn.define();
+
+export default TableColumn;

package/src/TableGroupRow.hbs

@@ -0,0 +1,12 @@
+<tr
+	class="ui5-table-group-row-root"
+	part="group-row"
+	role="row"
+	aria-label={{ariaLabelText}}
+	tabindex="{{_tabIndex}}"
+	dir="{{effectiveDir}}"
+>
+	<td colspan={{colSpan}}>
+		<slot></slot>
+	</td>
+</tr>

package/src/TableGroupRow.js

@@ -0,0 +1,160 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CheckBox from "./CheckBox.js";
+import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
+import TableMode from "./types/TableMode.js";
+
+// Texts
+import {
+	TABLE_GROUP_ROW_ARIA_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import styles from "./generated/themes/TableGroupRow.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-table-group-row",
+	slots: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+	properties: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
+		/**
+		 * Defines the mode of the row
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>SingleSelect</code></li>
+		 * <li><code>MultiSelect</code></li>
+		 * </ul>
+		 * @type {TableMode}
+		 * @defaultvalue "None"
+		 * @private
+		 */
+		mode: {
+			type: TableMode,
+			defaultValue: TableMode.None,
+		},
+		_columnsInfo: {
+			type: Object,
+			multiple: true,
+		},
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+		},
+		_busy: {
+			type: Boolean,
+		},
+		_ariaPosition: {
+			type: String,
+			defaultValue: "",
+			noAttribute: true,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-table-group-row</code> component represents a group row in the <code>ui5-table</code>.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <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-group-row</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>group-row - Used to style the native <code>tr</code> element.</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.TableGroupRow
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-table-group-row
+ * @since 1.0.0-rc.15
+ * @implements sap.ui.webcomponents.main.ITableRow
+ * @public
+ */
+class TableGroupRow extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TableGroupRowTemplate;
+	}
+
+	static get dependencies() {
+		return [
+			CheckBox,
+		];
+	}
+
+	constructor() {
+		super();
+	}
+
+	get colSpan() {
+		return this._colSpan;
+	}
+
+	get ariaLabelText() {
+		return `${TableGroupRow.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
+	}
+
+	visibleColCount() {
+		let count = this._columnsInfo.reduce((acc, column) => {
+			return column.visible ? ++acc : acc;
+		}, 0);
+
+		if (this.mode === TableMode.MultiSelect) {
+			count++;
+		}
+
+		return count;
+	}
+
+	onBeforeRendering() {
+		if (!this._columnsInfo || this._columnsInfo.length === 0) {
+			return;
+		}
+		this._colSpan = this.visibleColCount();
+	}
+
+	static async onDefine() {
+		TableGroupRow.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+}
+
+TableGroupRow.define();
+
+export default TableGroupRow;

package/src/TableRow.hbs

@@ -0,0 +1,61 @@
+<tr
+	class="ui5-table-row-root"
+	tabindex="{{_tabIndex}}"
+	@focusin="{{_onfocusin}}"
+	@click="{{_onrowclick}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	@mouseup="{{_onmouseup}}"
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
+	aria-label="{{ariaLabelText}}"
+	aria-selected="{{this.selected}}"
+	data-sap-focus-ref
+	part="row"
+	role="row"
+>
+
+	{{#if isMultiSelect}}
+		<td 
+			class="ui5-table-multi-select-cell" 
+			aria-hidden="true" 
+			role="presentation"
+		>
+			<ui5-checkbox
+				class="ui5-multi-select-checkbox"
+				?checked="{{this.selected}}"
+				aria-label="{{ariaLabelRowSelection}}"
+				@ui5-change="{{_handleSelection}}"
+			>
+			</ui5-checkbox>
+		</td>
+	{{/if}}
+
+	{{#if shouldPopin}}
+		{{#each visibleCells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	{{else}}
+		{{#each cells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	{{/if}}
+</tr>
+
+{{#if shouldPopin}}
+	{{#each popinCells}}
+		<tr part="popin-row" role="row" class="{{this.classes}}"
+			@click="{{../_onrowclick}}"
+			@keydown="{{../_onkeydown}}"
+			@keyup="{{../_onkeyup}}">
+			<td colspan="{{../visibleCellsCount}}" role="cell">
+				{{#if this.popinText}}
+					<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+				{{/if}}
+				<div>
+					<slot name="{{this.cell._individualSlot}}"></slot>
+				</div>
+			</td>
+		</tr>
+	{{/each}}
+{{/if}}