From 170a871ef6e2801d261658890cc809da02c2738a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20Engstr=C3=B6m?=
 <jesperengstrom@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:57:31 +0200
Subject: [PATCH] LWS-201/203: Fix pill labels (#1085)

---
 lxl-web/src/lib/components/find/SearchMapping.svelte | 4 ++--
 lxl-web/src/lib/utils/search.ts                      | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/lxl-web/src/lib/components/find/SearchMapping.svelte b/lxl-web/src/lib/components/find/SearchMapping.svelte
index 46ec4a16f..2ef7af93b 100644
--- a/lxl-web/src/lib/components/find/SearchMapping.svelte
+++ b/lxl-web/src/lib/components/find/SearchMapping.svelte
@@ -61,10 +61,10 @@
 			{:else if m.operator === 'existence' || m.operator === 'notExistence'}
 				{@const symbol = getRelationSymbol(m.operator)}
 				<span class="pill-relation">{symbol}</span>
-				<div class="pill-label inline-block text-2-regular first-letter:uppercase">{m.label}</div>
+				<div class="pill-label inline text-2-regular">{m.label}</div>
 			{:else if 'label' in m && 'display' in m}
 				{@const symbol = getRelationSymbol(m.operator)}
-				<div class="pill-label inline-block text-2-regular first-letter:uppercase">{m.label}</div>
+				<div class="pill-label inline text-2-regular">{m.label}</div>
 				<span class="pill-relation">{symbol}</span>
 				<span class="pill-value">
 					<DecoratedData data={m.display} showLabels={ShowLabelsOptions['Never']} />
diff --git a/lxl-web/src/lib/utils/search.ts b/lxl-web/src/lib/utils/search.ts
index 63cf1c111..0fb4a10f9 100644
--- a/lxl-web/src/lib/utils/search.ts
+++ b/lxl-web/src/lib/utils/search.ts
@@ -82,7 +82,7 @@ function displayMappings(
 					display: displayUtil.lensAndFormat(property, LensType.Chip, locale),
 					label: m.alias
 						? translate(`facet.${m.alias}`)
-						: m.property?.labelByLang?.[locale] || m.property?.['@id'] || 'no label', // lensandformat?
+						: capitalize(m.property?.labelByLang?.[locale] || m.property?.label) || m.property?.['@id'] || 'No label', // lensandformat?
 					operator,
 					...('up' in m && { up: replacePath(m.up as Link, usePath) })
 				} as DisplayMapping;
@@ -222,6 +222,12 @@ function replacePath(view: Link, usePath: string) {
 	};
 }
 
+function capitalize(str: string | undefined) {
+	if (str && typeof str === 'string') {
+		return str[0].toUpperCase() + str.slice(1);
+	} return str;
+}
+
 export function shouldShowMapping(mapping: DisplayMapping[]) {
 	if (mapping.length === 1 && mapping[0].display === '*' && mapping[0].operator === 'equals') {
 		return false; // hide if only wildcard search