Ajout d'un panneau vertical pour le resultat de la recerche

js/components/feature-short-header.js

@@ -0,0 +1,43 @@
+const TEMPLATE = document.createElement("template")
+TEMPLATE.innerHTML = `
+<h2 class="feature-name"></h2>
+<small class="feature-location"></small>
+`
+
+export class FeatureShortHeaderElement extends HTMLElement {
+
+	#feature
+
+	get feature(){
+		return this.#feature
+	}
+
+	set feature(value){
+		this.#feature = value
+	}
+
+	connectedCallback(){
+		this.updateContent()
+	}
+
+	updateContent(){
+		if(!this.feature){
+			this.replaceChildren()
+		} else {
+			this.replaceChildren(TEMPLATE.content.cloneNode(true))
+			this.querySelector(".feature-name").textContent = 
+				this.feature?.properties?.name || 
+				this.feature.mapSymbol.genericName || 
+				this.feature.id
+
+			let featurePoint = this.feature.asPoint()
+
+			this.querySelector(".feature-location").textContent =
+				this.feature?.properties?.["location-description"] ||
+				`${featurePoint.geometry.coordinates[1]}, ${featurePoint.geometry.coordinates[0]}`
+		}
+	}
+
+}
+
+customElements.define("camp-feature-short-header", FeatureShortHeaderElement)