feat: adjusted font weight for header

* fix: adjusted font weight for header * refactor: added a class for enhancing univocity
Neovici · Apr 5, 2023 · 5985c48 · 5985c48
1 parent ab3f4db
commit 5985c48
Showing 1 changed file with 36 additions and 19 deletions.
diff --git a/cosmoz-omnitable-treenode-column.js b/cosmoz-omnitable-treenode-column.js
@@ -157,25 +157,42 @@ class CosmozOmnitableTreenodeColumn extends columnMixin(PolymerElement) {
 				active
 			></paper-spinner-lite>`
 		);
-		return html`<cosmoz-autocomplete
-			.label=${title}
-			.title=${computeTooltip(filter, title)}
-			.textProperty=${'text'}
-			.valueProperty=${'value'}
-			.value=${guard([filter, source], () => filter)}
-			.limit=${limit}
-			.onChange=${(value) => {
-				setState((state) => ({
-					...state,
-					filter: getCurrentFilter(value),
-				}));
-			}}
-			.source=${source}
-			.onFocus=${(headerFocused) =>
-				setState((state) => ({ ...state, headerFocused }))}
-			.onText=${(query) => setState((state) => ({ ...state, query }))}
-			>${spinner}</cosmoz-autocomplete
-		>`;
+		return html` <style>
+				cosmoz-autocomplete.cosmoz-treenode-header-input::part(input-label) {
+					text-transform: var(--cosmoz-omnitable-header-text-transform, none);
+					font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
+					font-family: var(
+						--cosmoz-omnitable-header-font-family,
+						'Roboto',
+						'Noto',
+						sans-serif
+					);
+					font-size: var(--cosmoz-omnitable-header-font-size, 16px);
+				}
+			</style>
+
+			<cosmoz-autocomplete
+				class="cosmoz-treenode-header-input"
+				part="header-treenode"
+				exportparts="header-treenode"
+				.label=${title}
+				.title=${computeTooltip(filter, title)}
+				.textProperty=${'text'}
+				.valueProperty=${'value'}
+				.value=${guard([filter, source], () => filter)}
+				.limit=${limit}
+				.onChange=${(value) => {
+					setState((state) => ({
+						...state,
+						filter: getCurrentFilter(value),
+					}));
+				}}
+				.source=${source}
+				.onFocus=${(headerFocused) =>
+					setState((state) => ({ ...state, headerFocused }))}
+				.onText=${(query) => setState((state) => ({ ...state, query }))}
+				>${spinner}</cosmoz-autocomplete
+			>`;
 	}
 
 	/**