@sb1/indeks-web 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sb1/indeks-web
 
+## 0.7.0
+
+## 0.6.0
+
+### Minor Changes
+
+-   2348f42: Legg til ix-icon komponent
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/npm/index.d.ts

@@ -1,8 +1,13 @@
 import { IxField } from './lib/components/field/IxField.js';
+import { IxIcon, IconName } from './lib/components/icon/IxIcon.js';
 export { IxField };
+export { IxIcon };
+export { ICON_NAMES } from './lib/components/icon/IxIcon.js';
+export type { IconName, IconValue } from './lib/components/icon/IxIcon.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'ix-field': HTMLElement;
+        'ix-field': IxField;
+        'ix-icon': IxIcon;
     }
     namespace JSX {
         interface IntrinsicElements {
@@ -11,6 +16,15 @@ declare global {
                 class?: string;
                 children?: unknown;
             };
+            'ix-icon': {
+                name?: IconName;
+                materialdesignname?: string;
+                'data-size'?: 'sm' | 'md' | 'lg' | 'xl';
+                'aria-label'?: string;
+                'aria-labelledby'?: string;
+                class?: string;
+                style?: string | Record<string, string>;
+            };
         }
     }
 }

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/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.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/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.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -220,6 +220,67 @@ var IxField = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/icon/IxIcon.ts
+var ICON_CDN_BASE = "https://cdn.sparebank1.no/icons";
+var ICON_NAMES = {
+	hjem: "home",
+	meny: "menu",
+	sparing: "savings",
+	lukk: "close",
+	"pil-hoyre": "chevron_right",
+	"legg-til": "add",
+	hake: "check",
+	"apne-ekstern": "open_in_new",
+	bankkonto: "account_balance",
+	rediger: "edit",
+	betalingskort: "credit_card",
+	slett: "delete",
+	"last-ned": "download",
+	person: "person",
+	"pil-ned": "keyboard_arrow_down",
+	"e-post": "mail",
+	betaling: "payments",
+	info: "info",
+	sok: "search",
+	innstillinger: "settings",
+	bil: "directions_car",
+	"pil-venstre": "chevron_left",
+	feil: "error"
+};
+var IxIcon = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"name",
+			"materialdesignname",
+			"aria-label",
+			"aria-labelledby"
+		];
+	}
+	connectedCallback() {
+		this._update();
+	}
+	attributeChangedCallback(_name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		this._update();
+	}
+	_update() {
+		const nameAttr = this.getAttribute("name");
+		const materialDesignName = this.getAttribute("materialdesignname");
+		const ariaLabel = this.getAttribute("aria-label");
+		const ariaLabelledBy = this.getAttribute("aria-labelledby");
+		const iconFileName = nameAttr ? ICON_NAMES[nameAttr] ?? nameAttr : materialDesignName;
+		if (iconFileName) this.style.setProperty("--ii-icon-url", `url(${ICON_CDN_BASE}/${iconFileName}.svg)`);
+		else this.style.removeProperty("--ii-icon-url");
+		if (ariaLabel || ariaLabelledBy) {
+			this.setAttribute("role", "img");
+			this.removeAttribute("aria-hidden");
+		} else {
+			this.removeAttribute("role");
+			this.setAttribute("aria-hidden", "true");
+		}
+	}
+};
+//#endregion
 //#region lib/tooltip/tooltip.ts
 var TOOLTIP_ID = "ix-tooltip-singleton";
 var ATTR = "data-tooltip";
@@ -248,7 +309,7 @@ function place(trigger, panel, placement) {
 	const pw = panel.offsetWidth;
 	const ph = panel.offsetHeight;
 	const arrowSize = 6;
-	const gap = arrowSize + 4;
+	const gap = 10;
 	const axis = placement.startsWith("top") ? "top" : placement.startsWith("bottom") ? "bottom" : placement;
 	let resolvedAxis = axis;
 	if (axis === "top" && r.top - ph - gap < 0) resolvedAxis = "bottom";
@@ -340,5 +401,6 @@ document.addEventListener("keydown", handleKeydown);
 //#endregion
 //#region index.ts
 customElements.define("ix-field", IxField);
+customElements.define("ix-icon", IxIcon);
 //#endregion
-export { IxField };
+export { ICON_NAMES, IxField, IxIcon };

package/dist/npm/lib/components/icon/IxIcon.d.ts

@@ -0,0 +1,33 @@
+export declare const ICON_NAMES: {
+    readonly hjem: "home";
+    readonly meny: "menu";
+    readonly sparing: "savings";
+    readonly lukk: "close";
+    readonly 'pil-hoyre': "chevron_right";
+    readonly 'legg-til': "add";
+    readonly hake: "check";
+    readonly 'apne-ekstern': "open_in_new";
+    readonly bankkonto: "account_balance";
+    readonly rediger: "edit";
+    readonly betalingskort: "credit_card";
+    readonly slett: "delete";
+    readonly 'last-ned': "download";
+    readonly person: "person";
+    readonly 'pil-ned': "keyboard_arrow_down";
+    readonly 'e-post': "mail";
+    readonly betaling: "payments";
+    readonly info: "info";
+    readonly sok: "search";
+    readonly innstillinger: "settings";
+    readonly bil: "directions_car";
+    readonly 'pil-venstre': "chevron_left";
+    readonly feil: "error";
+};
+export type IconValue = (typeof ICON_NAMES)[keyof typeof ICON_NAMES];
+export type IconName = keyof typeof ICON_NAMES;
+export declare class IxIcon extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    private _update;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.5.0",
+  "version": "0.7.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.6.2",
+    "@types/node": "^25.9.2",
     "jsdom": "^29.1.1",
     "typescript": "~6.0.3",
-    "vite": "^8.0.12",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.5"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.8"
   },
   "scripts": {
     "dev": "echo not implemented",