@ui5/webcomponents 1.9.0 → 1.9.2

package/src/TreeItemCustom.js

@@ -0,0 +1,102 @@
+import TreeItemBase from "./TreeItemBase.js";
+
+// Template
+import TreeItemCustomTemplate from "./generated/templates/TreeItemCustomTemplate.lit.js";
+
+// Styles
+import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-tree-item-custom",
+	properties: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
+		/**
+		 * Defines whether the tree list item should display the selection element.
+		 *
+		 * @type {Boolean}
+		 * @public
+		 * @defaultValue false
+		 */
+		hideSelectionElement: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
+		/**
+		 * Defines the content of the <code>ui5-tree-item</code>.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot content
+		 * @public
+		 */
+		content: {
+			type: HTMLElement,
+		},
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
+ * This is the item to use inside a <code>ui5-tree</code>.
+ * You can represent an arbitrary tree structure by recursively nesting tree items.
+ *
+ * You can use this item to put any custom content inside the tree item.
+ *
+ * <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-tree-item-custom</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
+ * <li>icon - Used to style the icon of the tree list item</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/TreeItemCustom.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemCustom
+ * @extends sap.ui.webc.main.TreeItemBase
+ * @tagname ui5-tree-item-custom
+ * @public
+ * @implements sap.ui.webc.main.ITreeItem
+ * @since 1.0.0-rc.8
+ */
+class TreeItemCustom extends TreeItemBase {
+	static get template() {
+		return TreeItemCustomTemplate;
+	}
+
+	static get styles() {
+		return [...super.styles, treeItemCustomCss];
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementBefore() {
+		return !this.hideSelectionElement && super.placeSelectionElementBefore;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementAfter() {
+		return !this.hideSelectionElement && super.placeSelectionElementAfter;
+	}
+}
+
+TreeItemCustom.define();
+
+export default TreeItemCustom;

package/src/TreeList.js

@@ -0,0 +1,43 @@
+import List from "./List.js";
+
+const metadata = {
+	tag: "ui5-tree-list",
+};
+
+class TreeList extends List {
+	static get metadata() {
+		return metadata;
+	}
+
+	/*
+	 * @override
+	 */
+	getItems() {
+		const slottedItems = this.getSlottedNodes("items");
+		const flatItems = [];
+
+		flattenTree(slottedItems, flatItems);
+
+		return flatItems;
+	}
+}
+
+/*
+ * Converts a tree structure into a flat array
+ *
+ * @param {Array} treeItems
+ * @param {Array} result
+ */
+const flattenTree = (items, result) => {
+	items.forEach(item => {
+		result.push(item);
+
+		if (item.expanded && item.items) {
+			flattenTree(item.items, result);
+		}
+	});
+};
+
+TreeList.define();
+
+export default TreeList;

package/src/themes/TabContainer.css

@@ -20,8 +20,8 @@
 	padding: 0 1rem;
 	display: flex;
 	align-items: center;
+	background-color: var(--_ui5_tc_header_background);
 	height: var(--_ui5_tc_header_height);
-	background-color: var(--sapObjectHeader_Background);
 	box-shadow: var(--_ui5_tc_header_box_shadow);
 	box-sizing: border-box;
 }
@@ -30,6 +30,14 @@
 	border-top: var(--_ui5_tc_header_border_bottom);
 }
 
+:host([header-background-design="Transparent"]) .ui5-tc__header {
+	background-color: transparent;
+}
+
+:host([header-background-design="Translucent"]) .ui5-tc__header {
+	background-color: var(--_ui5_tc_header_background_translucent);
+}
+
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
 	height: var(--_ui5_tc_header_height_text_only);
 }
@@ -82,7 +90,7 @@
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
 	padding: 1rem 2rem;
-	background-color: var(--sapGroup_ContentBackground);
+	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
 }
@@ -91,6 +99,14 @@
 	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
+:host([content-background-design="Transparent"]) .ui5-tc__content {
+	background-color: transparent;
+}
+
+:host([content-background-design="Translucent"]) .ui5-tc__content {
+	background-color: var(--_ui5_tc_content_background_translucent);
+}
+
 .ui5-tc__content--collapsed {
 	display: none;
 }
@@ -126,4 +142,4 @@
 
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
-}
+}