@sb1/indeks-web 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @sb1/indeks-web
 
+## 0.15.0
+
+### Minor Changes
+
+-   129ee83: Ikon: `name` bruker nå Material Design-navn direkte, norsk-alias-mappingen er fjernet
+
+    Ikoner identifiseres nå med Material Design-navnet (= SVG-filnavnet) direkte, både i `<Icon>` (React) og `<ix-icon>` (web component). Den norske alias-mappingen (`ICON_NAMES`) er fjernet.
+
+    **Migrering — bytt norsk alias til Material Design-navn:**
+
+    | Før (`name`)    | Etter (`name`)        |
+    | --------------- | --------------------- |
+    | `hjem`          | `home`                |
+    | `meny`          | `menu`                |
+    | `sparing`       | `savings`             |
+    | `lukk`          | `close`               |
+    | `pil-hoyre`     | `chevron_right`       |
+    | `pil-venstre`   | `chevron_left`        |
+    | `pil-ned`       | `keyboard_arrow_down` |
+    | `legg-til`      | `add`                 |
+    | `hake`          | `check`               |
+    | `apne-ekstern`  | `open_in_new`         |
+    | `bankkonto`     | `account_balance`     |
+    | `rediger`       | `edit`                |
+    | `betalingskort` | `credit_card`         |
+    | `slett`         | `delete`              |
+    | `last-ned`      | `download`            |
+    | `e-post`        | `mail`                |
+    | `betaling`      | `payments`            |
+    | `info`          | `info_i`              |
+    | `sok`           | `search`              |
+    | `innstillinger` | `settings`            |
+    | `bil`           | `directions_car`      |
+    | `feil`          | `error`               |
+    | `utropstegn`    | `priority_high`       |
+
+    **Andre breaking changes:**
+
+    -   **`materialDesignName`-propen (React) og `materialdesignname`-attributtet (web) er fjernet.** Bruk `name` — det tar nå det samme Material Design-navnet. Erstatt `materialDesignName="foo"` med `name="foo"`.
+    -   **`ICON_NAMES` og typen `IconValue` er fjernet.** For autocomplete på de vanligste ikonene, bruk den nye `COMMON_ICON_NAMES` / `CommonIconName`. `name` godtar fortsatt hvilken som helst Material Design-streng.
+    -   **`availableMaterialDesignIconNames` (runtime-array) er fjernet** fra `@sb1/indeks-react` (fjerner ~100 kB fra bundelen). Typen `MaterialDesignIconName` beholdes.
+
+    Typen `IconName` er nå `CommonIconName | (string & {})`: de mest brukte SB1-ikonene autofullføres, mens alle andre Material Design-navn godtas uten typefeil.
+
 ## 0.14.0
 
 ## 0.13.0

package/dist/npm/index.d.ts

@@ -4,8 +4,8 @@ import { IxRadioGroup } from './lib/components/radio-group/IxRadioGroup.js';
 export { IxField };
 export { IxIcon };
 export { IxRadioGroup };
-export { ICON_NAMES } from './lib/components/icon/IxIcon.js';
-export type { IconName, IconValue } from './lib/components/icon/IxIcon.js';
+export { COMMON_ICON_NAMES } from './lib/components/icon/IxIcon.js';
+export type { IconName, CommonIconName } from './lib/components/icon/IxIcon.js';
 declare global {
     interface HTMLElementTagNameMap {
         'ix-field': IxField;
@@ -31,7 +31,6 @@ declare global {
             };
             'ix-icon': {
                 name?: IconName;
-                materialdesignname?: string;
                 'data-size'?: 'sm' | 'md' | 'lg' | 'xl';
                 'aria-label'?: string;
                 'aria-labelledby'?: string;

package/dist/npm/index.js

@@ -222,37 +222,164 @@ 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_i",
-	sok: "search",
-	innstillinger: "settings",
-	bil: "directions_car",
-	"pil-venstre": "chevron_left",
-	feil: "error",
-	utropstegn: "priority_high"
-};
+var COMMON_ICON_NAMES = [
+	"close",
+	"chevron_right",
+	"add",
+	"check",
+	"open_in_new",
+	"account_balance",
+	"edit",
+	"credit_card",
+	"delete",
+	"savings",
+	"download",
+	"person",
+	"keyboard_arrow_down",
+	"mail",
+	"payments",
+	"info",
+	"search",
+	"settings",
+	"directions_car",
+	"chevron_left",
+	"error",
+	"check_circle",
+	"content_copy",
+	"expand_more",
+	"face",
+	"add_circle",
+	"cancel",
+	"celebration",
+	"description",
+	"school",
+	"shopping_cart",
+	"arrow_downward",
+	"arrow_upward",
+	"healing",
+	"local_gas_station",
+	"account_balance_wallet",
+	"calendar_month",
+	"exclamation",
+	"group",
+	"nutrition",
+	"potted_plant",
+	"thumb_down",
+	"thumb_up",
+	"tune",
+	"wallet",
+	"apparel",
+	"bolt",
+	"book_2",
+	"call",
+	"chair",
+	"check_circle_filled",
+	"coffee",
+	"cottage",
+	"diversity_2",
+	"eyeglasses",
+	"favorite",
+	"flights_and_hotels",
+	"flightsmode",
+	"garage",
+	"groups",
+	"handyman",
+	"health_and_beauty",
+	"hotel",
+	"laptop_chromebook",
+	"live_tv",
+	"local_bar",
+	"local_taxi",
+	"luggage",
+	"medication",
+	"oven_gen",
+	"palette",
+	"pedal_bike",
+	"person_play",
+	"pets",
+	"phone_iphone",
+	"playing_cards",
+	"restaurant",
+	"shopping_bag",
+	"spa",
+	"sports_tennis",
+	"steps",
+	"stethoscope",
+	"stroller",
+	"support_agent",
+	"theater_comedy",
+	"train",
+	"tv",
+	"arrow_back",
+	"autorenew",
+	"blender",
+	"build",
+	"cabin",
+	"car_repair",
+	"currency_bitcoin",
+	"dentistry",
+	"detector_alarm",
+	"devices",
+	"diamond",
+	"exercise",
+	"fastfood",
+	"featured_seasonal_and_gifts",
+	"house",
+	"icecream",
+	"import_contacts",
+	"local_car_wash",
+	"local_pizza",
+	"menu_book",
+	"monitoring",
+	"photo_camera",
+	"priority_high",
+	"question_mark",
+	"redeem",
+	"restaurant_menu",
+	"sports_and_outdoors",
+	"stadia_controller",
+	"swap_horiz",
+	"things_to_do",
+	"tools_power_drill",
+	"toys",
+	"add_card",
+	"apartment",
+	"arrow_right",
+	"article",
+	"contract",
+	"handshake",
+	"home",
+	"info_i",
+	"logout",
+	"money_bag",
+	"motorcycle",
+	"notifications",
+	"phone",
+	"print",
+	"real_estate_agent",
+	"receipt",
+	"remove",
+	"agriculture",
+	"arrow_right_alt",
+	"bookmark",
+	"calculate",
+	"circle",
+	"event",
+	"exit_to_app",
+	"help",
+	"keyboard_arrow_right",
+	"keyboard_arrow_up",
+	"lock",
+	"more_vert",
+	"people",
+	"schedule",
+	"sync_alt",
+	"warning"
+];
 var IxIcon = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"name",
-			"materialdesignname",
 			"aria-label",
 			"aria-labelledby"
 		];
@@ -265,11 +392,9 @@ var IxIcon = class extends HTMLElement {
 		this._update();
 	}
 	_update() {
-		const nameAttr = this.getAttribute("name");
-		const materialDesignName = this.getAttribute("materialdesignname");
+		const iconFileName = this.getAttribute("name");
 		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) {
@@ -610,4 +735,4 @@ customElements.define("ix-field", IxField);
 customElements.define("ix-icon", IxIcon);
 customElements.define("ix-radio-group", IxRadioGroup);
 //#endregion
-export { ICON_NAMES, IxField, IxIcon, IxRadioGroup };
+export { COMMON_ICON_NAMES, IxField, IxIcon, IxRadioGroup };

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

@@ -1,31 +1,6 @@
-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_i";
-    readonly sok: "search";
-    readonly innstillinger: "settings";
-    readonly bil: "directions_car";
-    readonly 'pil-venstre': "chevron_left";
-    readonly feil: "error";
-    readonly utropstegn: "priority_high";
-};
-export type IconValue = (typeof ICON_NAMES)[keyof typeof ICON_NAMES];
-export type IconName = keyof typeof ICON_NAMES;
+export declare const COMMON_ICON_NAMES: readonly ["close", "chevron_right", "add", "check", "open_in_new", "account_balance", "edit", "credit_card", "delete", "savings", "download", "person", "keyboard_arrow_down", "mail", "payments", "info", "search", "settings", "directions_car", "chevron_left", "error", "check_circle", "content_copy", "expand_more", "face", "add_circle", "cancel", "celebration", "description", "school", "shopping_cart", "arrow_downward", "arrow_upward", "healing", "local_gas_station", "account_balance_wallet", "calendar_month", "exclamation", "group", "nutrition", "potted_plant", "thumb_down", "thumb_up", "tune", "wallet", "apparel", "bolt", "book_2", "call", "chair", "check_circle_filled", "coffee", "cottage", "diversity_2", "eyeglasses", "favorite", "flights_and_hotels", "flightsmode", "garage", "groups", "handyman", "health_and_beauty", "hotel", "laptop_chromebook", "live_tv", "local_bar", "local_taxi", "luggage", "medication", "oven_gen", "palette", "pedal_bike", "person_play", "pets", "phone_iphone", "playing_cards", "restaurant", "shopping_bag", "spa", "sports_tennis", "steps", "stethoscope", "stroller", "support_agent", "theater_comedy", "train", "tv", "arrow_back", "autorenew", "blender", "build", "cabin", "car_repair", "currency_bitcoin", "dentistry", "detector_alarm", "devices", "diamond", "exercise", "fastfood", "featured_seasonal_and_gifts", "house", "icecream", "import_contacts", "local_car_wash", "local_pizza", "menu_book", "monitoring", "photo_camera", "priority_high", "question_mark", "redeem", "restaurant_menu", "sports_and_outdoors", "stadia_controller", "swap_horiz", "things_to_do", "tools_power_drill", "toys", "add_card", "apartment", "arrow_right", "article", "contract", "handshake", "home", "info_i", "logout", "money_bag", "motorcycle", "notifications", "phone", "print", "real_estate_agent", "receipt", "remove", "agriculture", "arrow_right_alt", "bookmark", "calculate", "circle", "event", "exit_to_app", "help", "keyboard_arrow_right", "keyboard_arrow_up", "lock", "more_vert", "people", "schedule", "sync_alt", "warning"];
+export type CommonIconName = (typeof COMMON_ICON_NAMES)[number];
+export type IconName = CommonIconName | (string & {});
 export declare class IxIcon extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",