feat(ui5-tokenizer): implement a public ui5-tokenizer

SAP · Jan 23, 2024 · 98d615c · 98d615c
1 parent 600d495
commit 98d615c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -760,6 +760,13 @@ class Tokenizer extends UI5Element {
 	get _selectedTokens() {
 		return this._getTokens().filter(token => token.selected);
 	}
+	get _nMoreListMode() {
+		if (this.disabled) {
+			return "None";
+		}
+
+		return "Delete";
+	}
 
 	get classes(): ClassMap {
 		return {

diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
@@ -44,7 +44,8 @@
 	{{/if}}
 	<ui5-list
 		class="ui5-tokenizer-list"
-		mode="Delete"
+		mode={{_nMoreListMode}}
+		separators="None"
 		@ui5-item-delete={{itemDelete}}
 	>
 		{{#each _tokens}}

diff --git a/packages/main/test/pages/Tokenizer.html b/packages/main/test/pages/Tokenizer.html
@@ -35,8 +35,40 @@ <h1 class="sample-container-title">Tokenizer with n-more items</h1>
 				<ui5-token text="Estonia"></ui5-token>
 			</ui5-tokenizer>
 		</div>
+
+	<h1 class="sample-container-title">Tokenizer with long items</h1>
+	<div class="tokenizer-container">
+		<ui5-tokenizer id="long-tokenizer" show-more>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="So close no matter how far"></ui5-token>
+			<ui5-token text="Lose yourself in the music bum bam tupturup"></ui5-token>
+		</ui5-tokenizer>
 	</div>
 
+	<h1 class="sample-container-title">Readonly tokenizer</h1>
+	<div class="tokenizer-container">
+		<ui5-tokenizer id="readonly-tokenizer" show-more disabled>
+			<ui5-token text="Andora" readonly></ui5-token>
+			<ui5-token text="Bulgaria" readonly></ui5-token>
+			<ui5-token text="Canada" readonly></ui5-token>
+			<ui5-token text="Denmark" readonly></ui5-token>
+			<ui5-token text="Estonia" readonly></ui5-token>
+		</ui5-tokenizer>
+	</div>
+
+	<h1 class="sample-container-title">Deletable tokens</h1>
+	<div class="tokenizer-container">
+		<ui5-tokenizer id="delete-tokenizer" show-more>
+			<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-tokenizer>
+	</div>
+</div>
+
 	<h1>Basic API</h1>
 	<div class="wrapper">
 		<ui5-segmented-button id="theme-switch">
@@ -102,6 +134,11 @@ <h1>Basic API</h1>
 		document.getElementById("theme-switch").addEventListener("ui5-selection-change", event => {
 			window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.detail.selectedItem.getAttribute("data-ui5-theme-name"));
 		});
+
+		document.getElementById("delete-tokenizer").addEventListener("token-delete", event => {
+			const token = event.detail?.ref;
+			token && token.remove();
+		});
 	</script>
 </body>