Merge remote-tracking branch 'origin/main' into ainotice

SAP · Nov 12, 2024 · 1d3f9e5 · 1d3f9e5
2 parents 1785e55 + 1071746
commit 1d3f9e5
Show file tree

Hide file tree

Showing 37 changed files with 1,055 additions and 607 deletions.
diff --git a/packages/main/cypress/specs/LitKeyFunction.cy.ts b/packages/main/cypress/specs/LitKeyFunction.cy.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type List from "../../src/List.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
@@ -21,30 +22,36 @@ describe("Lit HTML key function for #each", () => {
 
 		cy.get("@mcb")
 			.shadow()
-			.find(".ui5-multi-combobox-all-items-responsive-popover")
-			.as("popover");
+			.find("[ui5-responsive-popover]")
+			.as("rpo");
 
-		cy.get("@popover")
-			.find(".ui5-multi-combobox-all-items-list > ui5-li")
-			.as("items");
+		cy.get("@rpo")
+			.find("[ui5-list]")
+			.as("list");
 
-		cy.get("@items")
-			.eq(0)
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items");
+			})
 			.realClick();
 
 		cy.get("@mcb")
 			.shadow()
 			.find(".inputIcon")
 			.realClick();
 
-		// cy.get("@items")
-		// 	.eq(0)
-		// 	.should("contain.text", "<empty>")
-		// 	.should("not.have.attr", "selected");
-
-		// cy.get("@items")
-		// 	.eq(3)
-		// 	.should("contain.text", "USA")
-		// 	.should("have.attr", "selected");
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[0];
+			})
+			.invoke("attr", "text", "<empty>")
+			.should("not.have.attr", "selected");
+
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[3];
+			})
+			.invoke("attr", "text", "USA")
+			.should("have.attr", "selected");
 	});
 });
diff --git a/packages/main/cypress/specs/Tokenizer.cy.ts b/packages/main/cypress/specs/Tokenizer.cy.ts
@@ -0,0 +1,114 @@
+import { html } from "lit";
+import "../../src/Tokenizer.js";
+import type Tokenizer from "../../src/Tokenizer.js";
+
+describe("Tokenizer - multi-line and Clear All", () => {
+	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all>
+						<ui5-token text="Andora"></ui5-token>
+					</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
+		cy.mount(html`<ui5-tokenizer multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
+		cy.mount(html`<ui5-tokenizer multi-line show-clear-all readonly>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'n-more' link is not rendered for multi-line tokenizer", () => {
+		cy.mount(html`<ui5-tokenizer multi-line style="width: 100px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--more-text")
+			.should("not.exist");
+	});
+
+	it("Pressing 'Clear All' link fires token-delete event", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.eq(0)
+			.click();
+
+		cy.get("@delete")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
@@ -206,8 +206,7 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		cy.get("@multiCombobox")
-			.shadow()
-			.find("[ui5-responsive-popover]")
+			.find("[ui5-mcb-item]")
 			.should("be.visible");
 
 		cy.get("@multiComboboxIcon")

diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts
@@ -88,7 +88,7 @@ class CardHeader extends UI5Element {
 
 	/**
 	 * Defines if the component would be interactive,
-	 * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.
+	 * e.g gets hover effect and `click` event is fired, when pressed.
 	 * @default false
 	 * @public
 	*/

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -98,18 +98,13 @@ interface IComboBoxItem extends UI5Element {
 	isGroupItem?: boolean,
 	selected?: boolean,
 	additionalText?: string,
-	stableDomRef: string,
 	_isVisible?: boolean,
 	items?: Array<IComboBoxItem>
 }
 
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 
-type ComboBoxListItem = ListItemStandard & {
-	mappedItem: ComboBoxItem
-};
-
 enum ValueStateIconMapping {
 	Negative = "error",
 	Critical = "alert",
@@ -398,7 +393,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	 * Defines the component items.
 	 * @public
 	 */
-	@slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+	@slot({
+		type: HTMLElement,
+		"default": true,
+		individualSlots: true,
+		invalidateOnChildChange: true,
+	})
 	items!: Array<IComboBoxItem>;
 
 	/**
@@ -504,10 +504,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 
 		this.storeResponsivePopoverWidth();
-
-		this.items.forEach(item => {
-			item._getRealDomRef = () => this._getPicker().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
-		});
 	}
 
 	_focusin(e: FocusEvent) {
@@ -1129,9 +1125,9 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_selectItem(e: CustomEvent<ListItemClickEventDetail>) {
-		const listItem = e.detail.item as ComboBoxListItem;
+		const item = e.detail.item as ComboBoxItem;
 
-		this._selectedItemText = listItem.mappedItem.text || "";
+		this._selectedItemText = item.text || "";
 		this._selectionPerformed = true;
 
 		const sameItemSelected = this.value === this._selectedItemText;
@@ -1144,17 +1140,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		this.value = this._selectedItemText;
 
-		if (!listItem.mappedItem.selected) {
+		if (!item.selected) {
 			this.fireDecoratorEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
-				item: listItem.mappedItem,
+				item,
 			});
 		}
 
-		this._filteredItems.map(item => {
-			item.selected = (item === listItem.mappedItem && !item.isGroupItem);
-			return item;
-		});
-
 		this._fireChangeEvent();
 		this._closeRespPopover();
 

diff --git a/packages/main/src/ComboBoxItem.hbs b/packages/main/src/ComboBoxItem.hbs
@@ -0,0 +1,18 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}
diff --git a/packages/main/src/ComboBoxItem.ts b/packages/main/src/ComboBoxItem.ts
@@ -1,19 +1,24 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { IComboBoxItem } from "./ComboBox.js";
+import ListItemBase from "./ListItemBase.js";
 
+import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit.js";
+import ComboboxItemCss from "./generated/themes/ComboBoxItem.css.js";
 /**
  * @class
  * The `ui5-cb-item` represents the item for a `ui5-combobox`.
  * @constructor
- * @extends UI5Element
- * @abstract
+ * @extends ListItemBase
  * @implements {IComboBoxItem}
  * @public
  */
-@customElement("ui5-cb-item")
-class ComboBoxItem extends UI5Element implements IComboBoxItem {
+@customElement({
+	tag: "ui5-cb-item",
+	template: ComboBoxItemTemplate,
+	styles: [ListItemBase.styles, ComboboxItemCss],
+})
+class ComboBoxItem extends ListItemBase implements IComboBoxItem {
 	/**
 	 * Defines the text of the component.
 	 * @default undefined
@@ -52,9 +57,15 @@ class ComboBoxItem extends UI5Element implements IComboBoxItem {
 	@property({ type: Boolean })
 	selected = false;
 
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
+	/**
+	 * Defines the markup text that will be displayed as suggestion.
+	 * Used for highlighting the matching parts of the text.
+	 *
+	 * @since 2.4.0
+	 * @private
+	 */
+	@property()
+	markupText = "";
 }
 
 ComboBoxItem.define();

diff --git a/packages/main/src/ComboBoxItemGroup.hbs b/packages/main/src/ComboBoxItemGroup.hbs
@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}