@sb1/indeks-web 0.3.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sb1/indeks-web
 
+## 0.5.0
+
+### Minor Changes
+
+-   9a41a0e: Legg til tooltip
+
+## 0.4.0
+
 ## 0.3.1
 
 ## 0.3.0

package/README.md

@@ -4,12 +4,16 @@ Web components for Indeks designsystemet. Komponenter som fungerer i alle rammev
 
 ## 📦 Del av Indeks
 
-Denne pakken er en del av [Indeks designsystemet](https://github.com/SpareBank1/indeks). Komponentene bruker CSS-klasser fra `@sb1/indeks-css`, som må lastes separat.
+Denne pakken er en del av [Indeks designsystemet](https://github.com/SpareBank1/indeks) og er grunnlaget for komponent-atferden i systemet. Den kreves også i React-prosjekter — `@sb1/indeks-react` er et tynt lag som rendrer `<ix-*>`-elementer, så web components-scriptet fra CDN må lastes i alle Indeks-prosjekter.
+
+Komponentene bruker CSS-klasser fra `@sb1/indeks-css`, som må lastes separat.
 
 ## 📥 Installasjon
 
 ### Via CDN (anbefalt)
 
+CDN er anbefalt fordi URL-en deles på tvers av SB1-applikasjoner. Nettleseren kan gjenbruke samme cachede CSS og JS, slik at brukere som allerede har besøkt en annen SB1-app slipper å laste ned det samme på nytt.
+
 ```html
 <!-- Last inn CSS -->
 <link rel="stylesheet" href="https://cdn.sparebank1.no/indeks/css/<versjon>.css" />
@@ -18,6 +22,16 @@ Denne pakken er en del av [Indeks designsystemet](https://github.com/SpareBank1/
 <script type="module" src="https://cdn.sparebank1.no/indeks/web/<versjon>/index.js"></script>
 ```
 
+#### TypeScript-typer (valgfritt)
+
+CDN-scriptet inneholder ingen typedeklarasjoner. Installer npm-pakken som `devDependency` for å få typer for `<ix-field>` m.fl. både i TypeScript og JSX:
+
+```bash
+npm install --save-dev @sb1/indeks-web
+```
+
+Pakken registrerer typene globalt via `HTMLElementTagNameMap` og JSX — ingen import nødvendig i koden.
+
 Etter at scriptet er lastet inn er alle komponenter tilgjengelige som HTML-elementer:
 
 ```html

package/dist/npm/index.d.ts

@@ -2,7 +2,7 @@ import { IxField } from './lib/components/field/IxField.js';
 export { IxField };
 declare global {
     interface HTMLElementTagNameMap {
-        'ix-field': IxField;
+        'ix-field': HTMLElement;
     }
     namespace JSX {
         interface IntrinsicElements {

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -8,7 +8,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.122.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -20,13 +20,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.122.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.122.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -38,6 +38,7 @@ function _defineProperty(e, r, t) {
 //#endregion
 //#region lib/components/field/IxField.ts
 var fieldCounter = 0;
+var ICON_URL = "https://cdn.sparebank1.no/icons/info.svg";
 var IxField = class extends HTMLElement {
 	constructor(..._args) {
 		super(..._args);
@@ -46,8 +47,16 @@ var IxField = class extends HTMLElement {
 		_defineProperty(this, "_charCountListener", null);
 		_defineProperty(this, "_charCountControl", null);
 	}
+	static get observedAttributes() {
+		return [
+			"tooltip",
+			"tooltip-label",
+			"tooltip-placement"
+		];
+	}
 	connectedCallback() {
 		this._wire();
+		this._syncTooltip();
 	}
 	disconnectedCallback() {
 		this._observer?.disconnect();
@@ -56,6 +65,11 @@ var IxField = class extends HTMLElement {
 		this._stateObserver = null;
 		this._teardownCharCount();
 	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		if (name === "tooltip" || name === "tooltip-label" || name === "tooltip-placement") {
+			if (this.isConnected) this._syncTooltip();
+		}
+	}
 	_wire() {
 		const control = this.querySelector("input, select, textarea");
 		const label = this.querySelector("label");
@@ -90,10 +104,14 @@ var IxField = class extends HTMLElement {
 				"minlength"
 			]
 		});
-		if (control instanceof HTMLInputElement && control.type === "number") console.warn("[ix-field] Unngå type=\"number\" — bruk inputMode=\"numeric\" i stedet.");
 		if (!control.id) control.id = `ix-field-${++fieldCounter}`;
+		if (label && !label.closest(".ix-field__label-row")) {
+			const labelRow = document.createElement("div");
+			labelRow.className = "ix-field__label-row";
+			label.parentNode.insertBefore(labelRow, label);
+			labelRow.appendChild(label);
+		}
 		if (label && !label.htmlFor) label.htmlFor = control.id;
-		if (!label && !control.getAttribute("aria-label") && !control.getAttribute("aria-labelledby")) console.warn("[ix-field] Kontrollen mangler tilgjengelig navn. Legg til <label>, aria-label eller aria-labelledby. Synlig label er anbefalt.");
 		const describedBy = [];
 		if (description) {
 			if (!description.id) description.id = `${control.id}-description`;
@@ -167,8 +185,159 @@ var IxField = class extends HTMLElement {
 		const readOnly = "readOnly" in control ? control.readOnly : false;
 		this.toggleAttribute("data-readonly", readOnly);
 	}
+	_syncTooltip() {
+		const content = this.getAttribute("tooltip");
+		if (content) this._setupTooltipBtn(content);
+		else this._teardownTooltipBtn();
+	}
+	_setupTooltipBtn(content) {
+		const tooltipLabel = this.getAttribute("tooltip-label");
+		const existingBtn = this.querySelector(".ix-field__tooltip-btn");
+		if (existingBtn) {
+			existingBtn.setAttribute("data-tooltip", content);
+			existingBtn.setAttribute("data-tooltip-placement", this.getAttribute("tooltip-placement") ?? "top");
+			if (tooltipLabel) existingBtn.setAttribute("aria-label", tooltipLabel);
+			else existingBtn.removeAttribute("aria-label");
+			return;
+		}
+		const labelRow = this.querySelector(".ix-field__label-row");
+		if (!labelRow) return;
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.className = "ix-field__tooltip-btn";
+		btn.setAttribute("data-tooltip", content);
+		btn.setAttribute("data-tooltip-placement", this.getAttribute("tooltip-placement") ?? "top");
+		if (tooltipLabel) btn.setAttribute("aria-label", tooltipLabel);
+		const icon = document.createElement("span");
+		icon.className = "ix-icon";
+		icon.setAttribute("aria-hidden", "true");
+		icon.style.maskImage = `url(${ICON_URL})`;
+		btn.appendChild(icon);
+		labelRow.appendChild(btn);
+	}
+	_teardownTooltipBtn() {
+		this.querySelector(".ix-field__tooltip-btn")?.remove();
+	}
 };
 //#endregion
+//#region lib/tooltip/tooltip.ts
+var TOOLTIP_ID = "ix-tooltip-singleton";
+var ATTR = "data-tooltip";
+var ATTR_PLACEMENT = "data-tooltip-placement";
+var DELAY_HOVER = 300;
+var tip;
+var source;
+var hoverTimer = 0;
+function getOrCreateTip() {
+	if (!tip) {
+		tip = document.createElement("div");
+		tip.id = TOOLTIP_ID;
+		tip.className = "ix-tooltip";
+		tip.setAttribute("role", "tooltip");
+		tip.hidden = true;
+	}
+	if (!tip.isConnected) document.body.appendChild(tip);
+	return tip;
+}
+function place(trigger, panel, placement) {
+	const r = trigger.getBoundingClientRect();
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	panel.hidden = false;
+	panel.style.visibility = "hidden";
+	const pw = panel.offsetWidth;
+	const ph = panel.offsetHeight;
+	const arrowSize = 6;
+	const gap = arrowSize + 4;
+	const axis = placement.startsWith("top") ? "top" : placement.startsWith("bottom") ? "bottom" : placement;
+	let resolvedAxis = axis;
+	if (axis === "top" && r.top - ph - gap < 0) resolvedAxis = "bottom";
+	else if (axis === "bottom" && r.bottom + ph + gap > vh) resolvedAxis = "top";
+	else if (axis === "left" && r.left - pw - gap < 0) resolvedAxis = "right";
+	else if (axis === "right" && r.right + pw + gap > vw) resolvedAxis = "left";
+	const align = placement.endsWith("-start") ? "start" : placement.endsWith("-end") ? "end" : "center";
+	const resolved = align === "center" ? resolvedAxis : `${resolvedAxis}-${align}`;
+	panel.setAttribute("data-placement", resolved);
+	const triggerCenterX = r.left + r.width / 2;
+	const triggerCenterY = r.top + r.height / 2;
+	let top;
+	let left;
+	if (resolvedAxis === "top" || resolvedAxis === "bottom") {
+		top = resolvedAxis === "top" ? r.top - ph - gap : r.bottom + gap;
+		left = align === "start" ? r.left : align === "end" ? r.right - pw : triggerCenterX - pw / 2;
+	} else {
+		left = resolvedAxis === "left" ? r.left - pw - gap : r.right + gap;
+		top = triggerCenterY - ph / 2;
+	}
+	const clampedLeft = Math.max(8, Math.min(left, vw - pw - 8));
+	const clampedTop = Math.max(8, Math.min(top, vh - ph - 8));
+	if (resolvedAxis === "top" || resolvedAxis === "bottom") {
+		const padding = parseFloat(getComputedStyle(panel).paddingInlineStart) || 12;
+		const half = arrowSize / 2;
+		const rawX = triggerCenterX - clampedLeft;
+		const arrowX = align === "start" ? Math.max(rawX, padding + half) : align === "end" ? Math.min(rawX, pw - padding - half) : rawX;
+		panel.style.setProperty("--_arrow-x", `${arrowX}px`);
+		panel.style.removeProperty("--_arrow-y");
+	} else {
+		panel.style.setProperty("--_arrow-y", `${triggerCenterY - clampedTop}px`);
+		panel.style.removeProperty("--_arrow-x");
+	}
+	panel.style.top = `${clampedTop}px`;
+	panel.style.left = `${clampedLeft}px`;
+	panel.style.visibility = "";
+}
+function show(trigger) {
+	const content = trigger.getAttribute(ATTR);
+	if (!content) return;
+	const placement = trigger.getAttribute(ATTR_PLACEMENT) ?? "top";
+	const panel = getOrCreateTip();
+	if (source && source !== trigger) hide();
+	source = trigger;
+	panel.textContent = content;
+	trigger.setAttribute("aria-describedby", TOOLTIP_ID);
+	place(trigger, panel, placement);
+	panel.hidden = false;
+}
+function hide() {
+	clearTimeout(hoverTimer);
+	if (tip) tip.hidden = true;
+	if (source) {
+		source.removeAttribute("aria-describedby");
+		source = void 0;
+	}
+}
+function handleMouseover(e) {
+	const target = e.target.closest?.(`[${ATTR}]`);
+	if (!target) return;
+	if (target === source) return;
+	clearTimeout(hoverTimer);
+	hoverTimer = window.setTimeout(() => show(target), DELAY_HOVER);
+}
+function handleMouseout(e) {
+	const related = e.relatedTarget;
+	if (tip && related && tip.contains(related)) return;
+	clearTimeout(hoverTimer);
+	if (source && !source.contains(related)) hide();
+}
+function handleFocusin(e) {
+	const target = e.target.closest?.(`[${ATTR}]`);
+	if (!target) return;
+	clearTimeout(hoverTimer);
+	show(target);
+}
+function handleFocusout(e) {
+	const related = e.relatedTarget;
+	if (source && !source.contains(related)) hide();
+}
+function handleKeydown(e) {
+	if (e.key === "Escape" && source) hide();
+}
+document.addEventListener("mouseover", handleMouseover);
+document.addEventListener("mouseout", handleMouseout);
+document.addEventListener("focusin", handleFocusin);
+document.addEventListener("focusout", handleFocusout);
+document.addEventListener("keydown", handleKeydown);
+//#endregion
 //#region index.ts
 customElements.define("ix-field", IxField);
 //#endregion

package/dist/npm/lib/components/field/IxField.d.ts

@@ -81,12 +81,17 @@ export declare class IxField extends HTMLElement {
     private _stateObserver;
     private _charCountListener;
     private _charCountControl;
+    static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
     private _wire;
     private _setupCharCount;
     private _teardownCharCount;
     private _updateCharCount;
     private _syncInvalid;
     private _syncControlState;
+    private _syncTooltip;
+    private _setupTooltipBtn;
+    private _teardownTooltipBtn;
 }

package/dist/npm/lib/tooltip/tooltip.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",
@@ -40,12 +40,12 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "jsdom": "^29.0.1",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.2"
+    "@types/node": "^25.6.2",
+    "jsdom": "^29.1.1",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.5"
   },
   "scripts": {
     "dev": "echo not implemented",