@knime/product-features 1.1.3 → 1.2.0

package/dist/nodes.css

@@ -15,6 +15,43 @@
 }
 }
 
+[data-type="flowVariable"] {
+&[data-v-3150264d] {
+  fill: transparent;
+  stroke: var(--kds-color-port-flow-variable);
+}
+&.filled[data-v-3150264d] {
+    fill: var(--kds-color-port-flow-variable);
+}
+}
+[data-type="table"] {
+&[data-v-3150264d] {
+  fill: transparent;
+  stroke: var(--kds-color-port-data);
+}
+&.filled[data-v-3150264d] {
+    fill: var(--kds-color-port-data);
+}
+}
+[data-type="other"],
+[data-type="generic"] {
+&[data-v-3150264d] {
+  fill: transparent;
+
+  /** dark mode for custom colors generated using oklch */
+  --base: var(--v45d93a60);
+  --color: light-dark(
+    var(--base),
+    oklch(from var(--base) calc(1 - l * 0.8) c h)
+  );
+
+  stroke: var(--color);
+}
+&.filled[data-v-3150264d] {
+    fill: var(--color);
+}
+}
+
 .wrapper[data-v-4920a7fa] {
   display: grid;
   grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;
@@ -71,3 +108,85 @@
 .empty-state[data-v-d2eb8e2e] {
   margin: 0 auto;
 }
+
+.bg {
+&[data-v-6a055572] {
+  /** default color is unknown */
+  fill: var(--kds-color-nodes-and-variables-unknown);
+
+  /** Virtual = Components */
+}
+&.component[data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-special-nodes);
+}
+&[data-type="Configuration"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-configuration);
+}
+&[data-type="Container"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-container);
+}
+&[data-type="Learner"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-learner);
+}
+&[data-type="Loop"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-loop);
+}
+&[data-type="LoopEnd"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-loop);
+}
+&[data-type="LoopStart"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-loop);
+}
+&[data-type="Manipulator"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-manipulator);
+}
+&[data-type="Other"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-other);
+}
+&[data-type="Predictor"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-predictor);
+}
+&[data-type="ScopeEnd"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-scope);
+}
+&[data-type="ScopeStart"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-scope);
+}
+&[data-type="Sink"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-sink);
+}
+&[data-type="Source"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-source);
+}
+&[data-type="Visualizer"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-visualizer);
+}
+&[data-type="QuickForm"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-quickform);
+}
+&[data-type="VirtualIn"][data-v-6a055572],
+  &[data-type="VirtualOut"][data-v-6a055572] {
+    fill: var(--kds-color-nodes-and-variables-special-nodes);
+}
+}
+
+.node-preview {
+&[data-v-4ca34076] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+  width: calc(var(--v33c62e54) * 1px);
+}
+&[data-size="small"][data-v-4ca34076] {
+    transform: scale(calc(12 / var(--v347765ac)));
+}
+&[data-size="medium"][data-v-4ca34076] {
+    transform: scale(0.5);
+}
+& .indicators[data-v-4ca34076] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    justify-content: center;
+    height: var(--kds-dimension-icon-0-75x);
+}
+}

package/dist/nodes.js

@@ -1,14 +1,14 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, createBlock, unref, createSlots, renderList, withCtx, createCommentVNode, Fragment, createElementVNode, toDisplayString, createVNode, createPropsRestProxy, mergeProps } from 'vue';
-import { KdsAccordion, KdsDescription, KdsTabBar, KdsEmptyState } from '@knime/kds-components';
+import { defineComponent, computed, ref, openBlock, createElementBlock, createBlock, unref, createSlots, renderList, withCtx, createCommentVNode, Fragment, createElementVNode, toDisplayString, createVNode, useCssVars, mergeProps, normalizeProps, guardReactiveProps, normalizeClass } from 'vue';
+import { KdsAccordion, KdsDescription, KdsTabBar, KdsEmptyState, KdsIcon } from '@knime/kds-components';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
 
-import './nodes.css';const _hoisted_1$6 = { class: "name" };
-const _hoisted_2$3 = {
+import './nodes.css';const _hoisted_1$9 = { class: "name" };
+const _hoisted_2$5 = {
   key: 1,
   class: "single-option-wrapper"
 };
-const _hoisted_3$2 = { class: "name" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = { class: "name" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "OptionsTab",
   props: {
     options: {},
@@ -49,7 +49,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     key: field.name,
                     class: "option-content"
                   }, [
-                    createElementVNode("span", _hoisted_1$6, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
+                    createElementVNode("span", _hoisted_1$9, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
                     createVNode(unref(KdsDescription), {
                       text: field.description,
                       "render-as-html": __props.renderAsHtml
@@ -60,7 +60,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             };
           })
         ]), 1032, ["modelValue", "items"])) : createCommentVNode("", true),
-        __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+        __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
           __props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
             key: 0,
             text: __props.options[0].sectionDescription,
@@ -72,7 +72,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               key: field.name,
               class: "option-content"
             }, [
-              createElementVNode("span", _hoisted_3$2, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
+              createElementVNode("span", _hoisted_3$4, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1),
               createVNode(unref(KdsDescription), {
                 text: field.description,
                 "render-as-html": __props.renderAsHtml
@@ -85,100 +85,99 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const OptionsTab = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-4fcd17b8"]]);
+const OptionsTab = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4fcd17b8"]]);
 
-const PortType = Object.freeze({
-  TABLE: "table",
-  FLOW_VARIABLE: "flowVariable",
-  OTHER: "other",
-  GENERIC: "generic"
-});
-Object.freeze(Object.values(PortType));
+const PORT_SIZE = 8;
+const PORT_STROKE_WIDTH = 1.4;
 
-const _hoisted_1$5 = ["viewBox"];
-const _hoisted_2$2 = ["points", "fill", "stroke"];
-const _hoisted_3$1 = ["r", "fill", "stroke"];
-const _hoisted_4$1 = ["width", "height", "x", "y", "fill", "stroke"];
-const portSize = 9;
-const strokeWidth = 1.4;
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "PortIcon",
+const _hoisted_1$8 = ["points", "data-type", "stroke-width"];
+const _hoisted_2$4 = ["r", "data-type", "stroke-width"];
+const _hoisted_3$3 = ["width", "height", "x", "y", "data-type", "stroke-width"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "SVGPortIcon",
   props: {
     type: {},
     color: {},
     filled: { type: Boolean, default: true }
   },
   setup(__props) {
-    const colors = {
-      [PortType.TABLE]: "hsl(0, 3%, 12%)",
-      [PortType.FLOW_VARIABLE]: "hsl(0, 100%, 64.7%)"
-    };
-    const props = createPropsRestProxy(__props, ["filled"]);
+    useCssVars((_ctx) => ({
+      "v45d93a60": _ctx.color
+    }));
     const trianglePath = computed(() => {
       let [x1, y1, x2, y3] = [
-        -portSize / 2,
-        -portSize / 2,
-        portSize / 2,
-        portSize / 2
+        -PORT_SIZE / 2,
+        -PORT_SIZE / 2,
+        PORT_SIZE / 2,
+        PORT_SIZE / 2
       ];
       const d = Math.sqrt(5) / 2;
       const y = d / 2 + 1 / 4;
-      x1 += strokeWidth / 2;
-      x2 -= strokeWidth * d;
-      y1 += strokeWidth * y;
-      y3 -= strokeWidth * y;
+      x1 += PORT_STROKE_WIDTH / 2;
+      x2 -= PORT_STROKE_WIDTH * d;
+      y1 += PORT_STROKE_WIDTH * y;
+      y3 -= PORT_STROKE_WIDTH * y;
       return `${x1},${y1} ${x2},${0} ${x1},${y3}`;
     });
+    return (_ctx, _cache) => {
+      return __props.type === "table" ? (openBlock(), createElementBlock("polygon", mergeProps({
+        key: 0,
+        points: trianglePath.value,
+        class: { filled: __props.filled },
+        "data-type": __props.type,
+        "stroke-width": unref(PORT_STROKE_WIDTH)
+      }, _ctx.$attrs), null, 16, _hoisted_1$8)) : __props.type === "flowVariable" ? (openBlock(), createElementBlock("circle", mergeProps({
+        key: 1,
+        r: unref(PORT_SIZE) / 2 - unref(PORT_STROKE_WIDTH) / 2,
+        class: { filled: __props.filled },
+        "data-type": __props.type,
+        "stroke-width": unref(PORT_STROKE_WIDTH)
+      }, _ctx.$attrs), null, 16, _hoisted_2$4)) : (openBlock(), createElementBlock("rect", mergeProps({
+        key: 2,
+        width: unref(PORT_SIZE) - unref(PORT_STROKE_WIDTH),
+        height: unref(PORT_SIZE) - unref(PORT_STROKE_WIDTH),
+        x: -unref(PORT_SIZE) / 2 + unref(PORT_STROKE_WIDTH) / 2,
+        y: -unref(PORT_SIZE) / 2 + unref(PORT_STROKE_WIDTH) / 2,
+        class: { filled: __props.filled },
+        "data-type": __props.type,
+        "stroke-width": unref(PORT_STROKE_WIDTH)
+      }, _ctx.$attrs), null, 16, _hoisted_3$3));
+    };
+  }
+});
+
+const SVGPortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-3150264d"]]);
+
+const _hoisted_1$7 = ["viewBox", "width", "height"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "PortIcon",
+  props: {
+    type: {},
+    color: {},
+    filled: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
     const viewBox = computed(
-      () => [-portSize / 2, -portSize / 2, portSize, portSize].join(" ")
+      () => [-PORT_SIZE / 2, -PORT_SIZE / 2, PORT_SIZE, PORT_SIZE].join(" ")
     );
-    const portColor = computed(() => {
-      if (props.type === "table" || props.type === "flowVariable") {
-        return colors[props.type];
-      }
-      return props.color;
-    });
-    const fillColor = computed(() => {
-      return __props.filled ? portColor.value : "transparent";
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
         viewBox: viewBox.value,
-        width: portSize,
-        height: portSize
+        width: unref(PORT_SIZE),
+        height: unref(PORT_SIZE)
       }, [
-        __props.type === "table" ? (openBlock(), createElementBlock("polygon", mergeProps({
-          key: 0,
-          points: trianglePath.value,
-          fill: fillColor.value,
-          stroke: portColor.value,
-          "stroke-width": strokeWidth
-        }, _ctx.$attrs), null, 16, _hoisted_2$2)) : __props.type === "flowVariable" ? (openBlock(), createElementBlock("circle", mergeProps({
-          key: 1,
-          r: portSize / 2 - strokeWidth / 2,
-          fill: fillColor.value,
-          stroke: portColor.value,
-          "stroke-width": strokeWidth
-        }, _ctx.$attrs), null, 16, _hoisted_3$1)) : (openBlock(), createElementBlock("rect", mergeProps({
-          key: 2,
-          width: portSize - strokeWidth,
-          height: portSize - strokeWidth,
-          x: -portSize / 2 + strokeWidth / 2,
-          y: -portSize / 2 + strokeWidth / 2,
-          fill: fillColor.value,
-          stroke: portColor.value,
-          "stroke-width": strokeWidth
-        }, _ctx.$attrs), null, 16, _hoisted_4$1))
-      ], 8, _hoisted_1$5);
+        createVNode(SVGPortIcon, normalizeProps(guardReactiveProps(props)), null, 16)
+      ], 8, _hoisted_1$7);
     };
   }
 });
 
-const _hoisted_1$4 = { class: "wrapper" };
-const _hoisted_2$1 = { class: "icon" };
-const _hoisted_3 = { class: "title" };
+const _hoisted_1$6 = { class: "wrapper" };
+const _hoisted_2$3 = { class: "icon" };
+const _hoisted_3$2 = { class: "title" };
 const _hoisted_4 = { class: "name title" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PortTemplateInfo",
   props: {
     port: {},
@@ -186,15 +185,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createElementVNode("div", _hoisted_2$1, [
-          createVNode(_sfc_main$5, {
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$3, [
+          createVNode(_sfc_main$7, {
             type: __props.port.type,
             color: __props.port.color,
             filled: !__props.port.optional
           }, null, 8, ["type", "color", "filled"])
         ]),
-        createElementVNode("span", _hoisted_3, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
+        createElementVNode("span", _hoisted_3$2, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
         createElementVNode("span", _hoisted_4, "Name: " + toDisplayString(__props.port.name), 1),
         __props.showDescription ? (openBlock(), createBlock(unref(KdsDescription), {
           key: 0,
@@ -207,11 +206,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PortTemplateInfo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4920a7fa"]]);
+const PortTemplateInfo = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-4920a7fa"]]);
 
-const _hoisted_1$3 = { class: "port-group-card" };
-const _hoisted_2 = { class: "group-name" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "port-group-card" };
+const _hoisted_2$2 = { class: "group-name" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PortGroup",
   props: {
     name: {},
@@ -221,8 +220,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createElementVNode("span", _hoisted_2, toDisplayString(__props.name), 1),
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("span", _hoisted_2$2, toDisplayString(__props.name), 1),
         __props.description ? (openBlock(), createBlock(unref(KdsDescription), {
           key: 0,
           text: __props.description,
@@ -240,10 +239,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PortGroup = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-ed993ae3"]]);
+const PortGroup = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ed993ae3"]]);
 
-const _hoisted_1$2 = { class: "port-list" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { class: "port-list" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "PortsTab",
   props: {
     inputPorts: {},
@@ -253,7 +252,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         __props.inputPorts.length > 0 ? (openBlock(), createBlock(PortGroup, {
           key: 0,
           name: "Input ports",
@@ -295,10 +294,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PortsTab = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-bf308a64"]]);
+const PortsTab = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bf308a64"]]);
 
-const _hoisted_1$1 = { class: "name" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "name" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ViewsTab",
   props: {
     views: {}
@@ -317,7 +316,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           key: view.id,
           class: "card-wrapper"
         }, [
-          createElementVNode("span", _hoisted_1$1, toDisplayString(view.name), 1),
+          createElementVNode("span", _hoisted_1$3, toDisplayString(view.name), 1),
           view.description ? (openBlock(), createBlock(unref(KdsDescription), {
             key: 0,
             text: view.description,
@@ -329,10 +328,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ViewsTab = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-024c4b9d"]]);
+const ViewsTab = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-024c4b9d"]]);
 
-const _hoisted_1 = { class: "content" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { class: "content" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "NodeDescriptionTabs",
   props: {
     inputPorts: { default: () => [] },
@@ -399,7 +398,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           size: "small",
           tabs: tabs.value
         }, null, 8, ["modelValue", "full-width", "tabs"]),
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_1$2, [
           activeTab.value === TAB_IDS.PORTS ? (openBlock(), createBlock(PortsTab, {
             key: 0,
             id: "panel-ports",
@@ -439,7 +438,177 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const NodeDescriptionTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2eb8e2e"]]);
+const NodeDescriptionTabs = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d2eb8e2e"]]);
+
+const NODE_SIZE = 32;
+
+const _hoisted_1$1 = ["d", "data-type"];
+const _hoisted_2$1 = ["d", "data-type", "transform"];
+const _hoisted_3$1 = ["xlink:href"];
+const componentBackgroundPortion = 0.75;
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "SVGNodeTorso",
+  props: {
+    type: { default: null },
+    isComponent: { type: Boolean, default: false },
+    icon: { default: null }
+  },
+  setup(__props) {
+    const backgroundPaths = {
+      default: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0l26.3,0C30.7,0,32,1.3,32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H2.8C1.3,32,0,30.7,0,29.2z",
+      LoopEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
+      LoopStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
+      ScopeEnd: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H4L0,16.1L4,0l25.2,0C30.7,0,32,1.3,32,2.8z",
+      ScopeStart: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-4,15.9L32,32H2.8C1.3,32,0,30.7,0,29.2z",
+      VirtualIn: "M32,2.8v26.3c0,1.6-1.3,2.8-2.8,2.8H6.5L0,25.9l5.2-10L0.7,7.2L6.5,0l22.7,0C30.7,0,32,1.3,32,2.8z",
+      VirtualOut: "M0,29.2L0,2.8C0,1.3,1.3,0,2.8,0L32,0l-5.8,7.2l4.5,8.7l-5.2,10L32,32H2.8C1.3,32,0,30.7,0,29.2z"
+    };
+    const backgroundPath = computed(
+      () => __props.type && backgroundPaths[__props.type] || backgroundPaths.default
+    );
+    const componentBackgroundTransformation = computed(() => {
+      const offset = NODE_SIZE / 2;
+      const scaleFactor = componentBackgroundPortion;
+      return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("g", null, [
+        createElementVNode("path", {
+          d: backgroundPath.value,
+          class: normalizeClass(["bg", { component: __props.isComponent }]),
+          "data-type": __props.isComponent ? null : __props.type
+        }, null, 10, _hoisted_1$1),
+        __props.isComponent && __props.type ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: backgroundPath.value,
+          class: "bg",
+          "data-type": __props.type,
+          transform: componentBackgroundTransformation.value
+        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
+        __props.icon ? (openBlock(), createElementBlock("image", {
+          key: 1,
+          "xlink:href": __props.icon,
+          x: "8",
+          y: "8",
+          width: "16",
+          height: "16",
+          "pointer-events": "none"
+        }, null, 8, _hoisted_3$1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const SVGNodeTorso = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6a055572"]]);
+
+const _hoisted_1 = ["data-size"];
+const _hoisted_2 = ["viewBox", "width", "height"];
+const _hoisted_3 = {
+  key: 0,
+  class: "indicators"
+};
+const maxShownPorts = 3;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NodePreview",
+  props: {
+    type: { default: null },
+    isComponent: { type: Boolean, default: false },
+    indicatorIcon: { default: () => void 0 },
+    inPorts: { default: () => [] },
+    outPorts: { default: () => [] },
+    icon: { default: null },
+    hidePorts: { type: Boolean, default: false },
+    hideIndicators: { type: Boolean, default: false },
+    size: { default: "xlarge" }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v33c62e54": width.value,
+      "v347765ac": unref(NODE_SIZE)
+    }));
+    const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : PORT_SIZE);
+    const width = computed(() => NODE_SIZE + 2 * horizontalSpaceForPorts.value);
+    const height = NODE_SIZE;
+    const viewBox = computed(
+      () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`
+    );
+    function yPortShift(index, total) {
+      let spacing = 1;
+      if (total === 2) {
+        spacing = 12;
+      } else if (total === 3) {
+        spacing = 2;
+      }
+      const totalHeight = total * PORT_SIZE + (total - 1) * spacing;
+      const delta = (NODE_SIZE - totalHeight) / 2;
+      return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;
+    }
+    const cutOffPorts = (ports) => {
+      if (ports.length > maxShownPorts) {
+        return [...ports.slice(0, maxShownPorts)];
+      }
+      return ports;
+    };
+    const visibleInPorts = computed(() => cutOffPorts(__props.inPorts));
+    const visibleOutPorts = computed(() => cutOffPorts(__props.outPorts));
+    const numberOfHiddenPorts = computed(
+      () => __props.inPorts.length - visibleInPorts.value.length + __props.outPorts.length - visibleOutPorts.value.length
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "node-preview",
+        "data-size": __props.size
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          viewBox: viewBox.value,
+          width: width.value,
+          height: unref(height)
+        }, [
+          createVNode(SVGNodeTorso, {
+            type: __props.type,
+            icon: __props.icon,
+            "is-component": __props.isComponent
+          }, null, 8, ["type", "icon", "is-component"]),
+          !__props.hidePorts ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleInPorts.value, (port, index) => {
+              return openBlock(), createBlock(SVGPortIcon, {
+                key: `in-${index}`,
+                color: port.color,
+                filled: !port.optional,
+                type: port.type,
+                transform: `translate(-${unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
+              }, null, 8, ["color", "filled", "type", "transform"]);
+            }), 128)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOutPorts.value, (port, index) => {
+              return openBlock(), createBlock(SVGPortIcon, {
+                key: `out-${index}`,
+                color: port.color,
+                filled: !port.optional,
+                type: port.type,
+                transform: `translate(${unref(NODE_SIZE) + unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
+              }, null, 8, ["color", "filled", "type", "transform"]);
+            }), 128))
+          ], 64)) : createCommentVNode("", true)
+        ], 8, _hoisted_2)),
+        !__props.hideIndicators ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          __props.indicatorIcon ? (openBlock(), createBlock(unref(KdsIcon), {
+            key: 0,
+            name: __props.indicatorIcon,
+            size: "small"
+          }, null, 8, ["name"])) : createCommentVNode("", true),
+          numberOfHiddenPorts.value > 0 && !__props.hidePorts ? (openBlock(), createBlock(unref(KdsIcon), {
+            key: 1,
+            name: "more-connections",
+            "aria-label": "Indication that some ports are hidden",
+            size: "small"
+          })) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+
+const NodePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4ca34076"]]);
 
-export { NodeDescriptionTabs, _sfc_main$5 as PortIcon };
+export { NodeDescriptionTabs, NodePreview, _sfc_main$7 as PortIcon };
 //# sourceMappingURL=nodes.js.map