@sb1/indeks-web 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sb1/indeks-web
 
+## 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

@@ -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";
@@ -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.6.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",