@skf-design-system/ui-components 1.0.0-alpha.30 → 1.0.0-alpha.31

package/dist/components/icon/icon.component.d.ts

@@ -1,6 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon, IconColor, IconSize, SeverityFgColor } from '@skf-design-system/ui-assets';
-import { type CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
  *
@@ -22,10 +22,12 @@ export declare class SkfIcon extends SkfElement {
      * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
      */
     name: Icon;
+    private _icon;
+    handleNameChanged(): void;
     /**
      * Size of the icon
      * @type { "xs" | "sm" | "md" | "lg" }
      */
     size: IconSize;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/components/icon/icon.component.js

@@ -1,51 +1,64 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
-import * as c from "@skf-design-system/ui-assets";
-import d from "../../styles/component.styles.js";
+import { watch as d } from "../../internal/helpers/watch.js";
+import u from "../../styles/component.styles.js";
 import { html as h } from "lit";
-import { property as t } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as s } from "lit/directives/if-defined.js";
-import v from "./icon.styles.js";
-var y = Object.defineProperty, o = (m, p, a, $) => {
-  for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
-    (n = m[i]) && (r = n(p, a, r) || r);
-  return r && y(p, a, r), r;
+import { property as s, state as y } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import _ from "./icon.styles.js";
+var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (c, e, p, i) => {
+  for (var t = i > 1 ? void 0 : i ? $(e, p) : e, l = c.length - 1, a; l >= 0; l--)
+    (a = c[l]) && (t = (i ? a(e, p, t) : a(t)) || t);
+  return i && t && b(e, p, t), t;
 };
-const l = class l extends f {
+const n = class n extends f {
   constructor() {
-    super(...arguments), this.color = "primary", this.size = "md";
+    super(...arguments), this.color = "primary", this._icon = h``, this.size = "md";
+  }
+  handleNameChanged() {
+    import("@skf-design-system/ui-assets").then((e) => {
+      this._icon = e[this.name];
+    }).catch((e) => {
+      console.error(e);
+    });
   }
   render() {
     return h`
 			<div
-				aria-hidden=${s(this.label ? void 0 : "true")}
-				aria-label=${s(this.label)}
-				class=${u({
+				aria-hidden=${m(this.label ? void 0 : "true")}
+				aria-label=${m(this.label)}
+				class=${v({
       icon: !0,
       [`icon--color-${this.color}`]: !0,
       [`icon--size-${this.size}`]: !0
     })}
-				role=${s(this.label ? "img" : void 0)}
+				role=${m(this.label ? "img" : void 0)}
 			>
-				${c[this.name]}
+				${this._icon}
 			</div>
 		`;
   }
 };
-l.styles = [d, v];
-let e = l;
+n.styles = [u, _];
+let r = n;
+o([
+  s({ reflect: !0 })
+], r.prototype, "color", 2);
+o([
+  s()
+], r.prototype, "label", 2);
 o([
-  t({ reflect: !0 })
-], e.prototype, "color");
+  s()
+], r.prototype, "name", 2);
 o([
-  t()
-], e.prototype, "label");
+  y()
+], r.prototype, "_icon", 2);
 o([
-  t()
-], e.prototype, "name");
+  d("name")
+], r.prototype, "handleNameChanged", 1);
 o([
-  t({ reflect: !0 })
-], e.prototype, "size");
+  s({ reflect: !0 })
+], r.prototype, "size", 2);
 export {
-  e as SkfIcon
+  r as SkfIcon
 };

package/dist/custom-elements.json

@@ -1486,6 +1486,19 @@
               "description": "Name of the icon to display",
               "attribute": "name"
             },
+            {
+              "kind": "field",
+              "name": "_icon",
+              "type": {
+                "text": "TemplateResult"
+              },
+              "privacy": "private",
+              "default": "html``"
+            },
+            {
+              "kind": "method",
+              "name": "handleNameChanged"
+            },
             {
               "kind": "field",
               "name": "size",

package/package.json

@@ -34,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.31",
   "dependencies": {
     "@floating-ui/dom": "^1.6.12"
   },
@@ -46,7 +46,7 @@
     "@eslint/js": "^9.16.0",
     "@lit/react": "^1.0.6",
     "@playwright/test": "^1.49.0",
-    "@skf-design-system/ui-assets": "0.1.3-beta.8",
+    "@skf-design-system/ui-assets": "0.1.3-beta.9",
     "@skf-design-system/wc-storybook-helpers": "^0.1.0",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",