npm - @knime/product-features - Versions diffs - 6.0.0 → 6.0.1 - Mend

@knime/product-features 6.0.0 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @knime/product-features
+## 6.0.1
+### Patch Changes
+- d088e14: `NodeDescriptionTabs`: remove trailing full stop from the default `emptyText` headline.
 ## 6.0.0
 ### Major Changes

package/README.md CHANGED Viewed

@@ -6,12 +6,44 @@ This package contains composition patterns that combine KNIME Design System comp
 It's published as npm package: [@knime/product-features]
+Unlike the `@knime/kds-*` packages it is **versioned independently** and is not
+part of their shared Changesets release group.
 ## Installation
 ```bash
 pnpm add @knime/product-features
 ```
+Peer dependencies: `@knime/kds-components`, `@knime/kds-styles`, `@vueuse/core`,
+`es-toolkit`, `ofetch` and `vue`.
+## Usage
+This package has **no root export** — import from one of the subpath entry
+points, so consumers only pull in the feature area they use:
+| Entry point                                  | Source                     | Contents                                                                    |
+| -------------------------------------------- | -------------------------- | --------------------------------------------------------------------------- |
+| `@knime/product-features/ai`                 | `src/ai`                   | AI assistant building blocks (`KdsPromptInput`)                             |
+| `@knime/product-features/analytics`          | `src/analytics`            | Typed analytics event builders ([README](src/analytics/README.md))          |
+| `@knime/product-features/auth-utils`         | `src/authUtils`            | KNIME Hub auth refresher and auth state ([README](src/authUtils/README.md)) |
+| `@knime/product-features/data-transfer`      | `src/dataTransfer`         | File upload/download progress panels and composables                        |
+| `@knime/product-features/data-transfer/core` | `src/dataTransfer/core.ts` | Framework-agnostic upload managers and upload client                        |
+| `@knime/product-features/embedding-sdk`      | `src/embeddingSDK`         | Host/guest messaging for embedding an application in an iframe              |
+| `@knime/product-features/nodes`              | `src/nodes`                | Node description tabs and node preview                                      |
+| `@knime/product-features/rfc-errors`         | `src/rfcErrors`            | RFC 9457 problem-details error handling and error toasts                    |
+| `@knime/product-features/toasts`             | `src/toasts`               | Toast notifications                                                         |
+| `@knime/product-features/versions`           | `src/versions`             | Version history and create-version form                                     |
+```ts
+// ✅ import from a subpath
+import { useToasts } from "@knime/product-features/toasts";
+// ❌ fails — there is no "." export
+import { useToasts } from "@knime/product-features";
+```
 ## Using with Vitest, Nuxt, or Vite SSR
 The published JavaScript imports its CSS as a side effect (e.g.

package/dist/nodes.css CHANGED Viewed

@@ -64,11 +64,11 @@
   font: var(--kds-font-base-title-small-strong);
 }
-.content[data-v-d2eb8e2e] {
+.content[data-v-d037b8f7] {
   padding: var(--kds-spacing-container-0-5x) 0;
   color: var(--kds-color-text-and-icon-neutral);
 }
-.empty-state[data-v-d2eb8e2e] {
+.empty-state[data-v-d037b8f7] {
   margin: 0 auto;
 }

package/dist/nodes.js CHANGED Viewed

@@ -239,7 +239,7 @@ var NodeDescriptionTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		dynamicOutputPorts: { default: () => [] },
 		optionsData: { default: () => [] },
 		viewsData: { default: () => [] },
-		emptyText: { default: "No ports, options or views available." },
+		emptyText: { default: "No ports, options or views available" },
 		renderAsHtml: {
 			type: Boolean,
 			default: false
@@ -345,7 +345,7 @@ var NodeDescriptionTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			])]);
 		};
 	}
-}), [["__scopeId", "data-v-d2eb8e2e"]]);
+}), [["__scopeId", "data-v-d037b8f7"]]);
 //#endregion
 //#region src/nodes/NodePreview/SVGNodeTorso.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = ["d", "data-type"];

package/dist/nodes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nodes.js","names":[],"sources":["../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/NodePreview.vue","../src/nodes/NodePreview/NodePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsAccordion,\n type KdsAccordionItem,\n KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n options: Array<NodeDescriptionOptions>;\n renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n description?: string;\n content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n return options.map(\n (option, index) =>\n ({\n id: `section-${index}`,\n headline: option.sectionName,\n description: option.sectionDescription,\n content: option.fields,\n }) satisfies AccordionItemWithContent,\n );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n <div>\n <KdsAccordion\n v-if=\"options.length > 1\"\n v-model=\"modelValue\"\n :items=\"accordionItems\"\n >\n <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n <KdsDescription\n v-if=\"item.description\"\n :text=\"item.description\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in item.content\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </template>\n </KdsAccordion>\n\n <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n <KdsDescription\n v-if=\"options[0].sectionDescription\"\n :text=\"options[0].sectionDescription\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<style scoped>\n.section-description {\n margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n & .name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsAccordion,\n type KdsAccordionItem,\n KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n options: Array<NodeDescriptionOptions>;\n renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n description?: string;\n content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n return options.map(\n (option, index) =>\n ({\n id: `section-${index}`,\n headline: option.sectionName,\n description: option.sectionDescription,\n content: option.fields,\n }) satisfies AccordionItemWithContent,\n );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n <div>\n <KdsAccordion\n v-if=\"options.length > 1\"\n v-model=\"modelValue\"\n :items=\"accordionItems\"\n >\n <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n <KdsDescription\n v-if=\"item.description\"\n :text=\"item.description\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in item.content\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </template>\n </KdsAccordion>\n\n <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n <KdsDescription\n v-if=\"options[0].sectionDescription\"\n :text=\"options[0].sectionDescription\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<style scoped>\n.section-description {\n margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n & .name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n port: PortTemplate;\n showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <KdsPortIcon\n :type=\"port.type\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n />\n </div>\n <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n <span class=\"name title\">Name: {{ port.name }}</span>\n\n <KdsDescription\n v-if=\"showDescription\"\n class=\"description\"\n :text=\"port.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: grid;\n grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n display: flex;\n align-items: center;\n}\n\n.name,\n.description {\n grid-column: 2;\n}\n\n.title {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n port: PortTemplate;\n showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <KdsPortIcon\n :type=\"port.type\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n />\n </div>\n <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n <span class=\"name title\">Name: {{ port.name }}</span>\n\n <KdsDescription\n v-if=\"showDescription\"\n class=\"description\"\n :text=\"port.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: grid;\n grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n display: flex;\n align-items: center;\n}\n\n.name,\n.description {\n grid-column: 2;\n}\n\n.title {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n name: string;\n description?: string;\n ports: Array<PortTemplate>;\n isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-group-card\">\n <span class=\"group-name\">{{ name }}</span>\n\n <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n <template v-for=\"port in ports\" :key=\"port.id\">\n <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-group-card {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-75x);\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n & .group-name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n name: string;\n description?: string;\n ports: Array<PortTemplate>;\n isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-group-card\">\n <span class=\"group-name\">{{ name }}</span>\n\n <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n <template v-for=\"port in ports\" :key=\"port.id\">\n <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-group-card {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-75x);\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n & .group-name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n inputPorts: Array<PortTemplate>;\n outputPorts: Array<PortTemplate>;\n dynamicInputGroups?: Array<DynamicPortGroup>;\n dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n defineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-list\">\n <PortGroup\n v-if=\"inputPorts.length > 0\"\n name=\"Input ports\"\n :ports=\"inputPorts\"\n />\n\n <PortGroup\n v-if=\"outputPorts.length > 0\"\n name=\"Output ports\"\n :ports=\"outputPorts\"\n />\n\n <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Inport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n\n <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Outport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-list {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n inputPorts: Array<PortTemplate>;\n outputPorts: Array<PortTemplate>;\n dynamicInputGroups?: Array<DynamicPortGroup>;\n dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n defineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-list\">\n <PortGroup\n v-if=\"inputPorts.length > 0\"\n name=\"Input ports\"\n :ports=\"inputPorts\"\n />\n\n <PortGroup\n v-if=\"outputPorts.length > 0\"\n name=\"Output ports\"\n :ports=\"outputPorts\"\n />\n\n <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Inport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n\n <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Outport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-list {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n props.views.map((view, index) => {\n const id = `view-${index}`;\n return { id, ...view };\n }),\n);\n</script>\n\n<template>\n <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n <span class=\"name\">{{ view.name }}</span>\n <KdsDescription\n v-if=\"view.description\"\n :text=\"view.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n margin-bottom: var(--kds-spacing-container-0-25x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n props.views.map((view, index) => {\n const id = `view-${index}`;\n return { id, ...view };\n }),\n);\n</script>\n\n<template>\n <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n <span class=\"name\">{{ view.name }}</span>\n <KdsDescription\n v-if=\"view.description\"\n :text=\"view.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n margin-bottom: var(--kds-spacing-container-0-25x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsEmptyState,\n KdsTabBar,\n type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n inputPorts = [],\n outputPorts = [],\n dynamicInputPorts = [],\n dynamicOutputPorts = [],\n optionsData = [],\n viewsData = [],\n emptyText = \"No ports, options or views available.\",\n renderAsHtml = false,\n tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n PORTS: \"ports\",\n OPTIONS: \"options\",\n VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds \| undefined>();\n\nconst hasPorts = computed(\n () =>\n inputPorts.length > 0 \|\|\n outputPorts.length > 0 \|\|\n dynamicInputPorts.length > 0 \|\|\n dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n {\n id: \"tab-ports\",\n value: TAB_IDS.PORTS,\n label: \"Ports\",\n panelId: \"panel-ports\",\n accessory: {\n type: \"icon\",\n name: \"connection\",\n },\n disabled: !hasPorts.value,\n },\n {\n id: \"tab-options\",\n value: TAB_IDS.OPTIONS,\n label: \"Options\",\n panelId: \"panel-options\",\n accessory: {\n type: \"icon\",\n name: \"parameter\",\n },\n disabled: optionsData.length < 1,\n },\n {\n id: \"tab-view\",\n value: TAB_IDS.VIEW,\n label: \"View\",\n panelId: \"panel-view\",\n accessory: {\n type: \"icon\",\n name: \"eye\",\n },\n disabled: viewsData.length < 1,\n },\n]);\n</script>\n\n<template>\n <div>\n <KdsTabBar\n v-model=\"activeTab\"\n :full-width=\"tabBarFullWidth\"\n size=\"small\"\n :tabs=\"tabs\"\n />\n\n <div class=\"content\">\n <PortsTab\n v-if=\"activeTab === TAB_IDS.PORTS\"\n id=\"panel-ports\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-ports\"\n tabindex=\"0\"\n :input-ports=\"inputPorts\"\n :output-ports=\"outputPorts\"\n :dynamic-input-groups=\"dynamicInputPorts\"\n :dynamic-output-groups=\"dynamicOutputPorts\"\n />\n\n <OptionsTab\n v-if=\"activeTab === TAB_IDS.OPTIONS\"\n id=\"panel-options\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-options\"\n tabindex=\"0\"\n :options=\"optionsData\"\n :render-as-html=\"renderAsHtml\"\n />\n\n <ViewsTab\n v-if=\"activeTab === TAB_IDS.VIEW\"\n id=\"panel-view\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-view\"\n tabindex=\"0\"\n :views=\"viewsData\"\n />\n\n <KdsEmptyState\n v-if=\"!activeTab\"\n :headline=\"emptyText\"\n class=\"empty-state\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.content {\n padding: var(--kds-spacing-container-0-5x) 0;\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsEmptyState,\n KdsTabBar,\n type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n inputPorts = [],\n outputPorts = [],\n dynamicInputPorts = [],\n dynamicOutputPorts = [],\n optionsData = [],\n viewsData = [],\n emptyText = \"No ports, options or views available.\",\n renderAsHtml = false,\n tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n PORTS: \"ports\",\n OPTIONS: \"options\",\n VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds \| undefined>();\n\nconst hasPorts = computed(\n () =>\n inputPorts.length > 0 \|\|\n outputPorts.length > 0 \|\|\n dynamicInputPorts.length > 0 \|\|\n dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n {\n id: \"tab-ports\",\n value: TAB_IDS.PORTS,\n label: \"Ports\",\n panelId: \"panel-ports\",\n accessory: {\n type: \"icon\",\n name: \"connection\",\n },\n disabled: !hasPorts.value,\n },\n {\n id: \"tab-options\",\n value: TAB_IDS.OPTIONS,\n label: \"Options\",\n panelId: \"panel-options\",\n accessory: {\n type: \"icon\",\n name: \"parameter\",\n },\n disabled: optionsData.length < 1,\n },\n {\n id: \"tab-view\",\n value: TAB_IDS.VIEW,\n label: \"View\",\n panelId: \"panel-view\",\n accessory: {\n type: \"icon\",\n name: \"eye\",\n },\n disabled: viewsData.length < 1,\n },\n]);\n</script>\n\n<template>\n <div>\n <KdsTabBar\n v-model=\"activeTab\"\n :full-width=\"tabBarFullWidth\"\n size=\"small\"\n :tabs=\"tabs\"\n />\n\n <div class=\"content\">\n <PortsTab\n v-if=\"activeTab === TAB_IDS.PORTS\"\n id=\"panel-ports\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-ports\"\n tabindex=\"0\"\n :input-ports=\"inputPorts\"\n :output-ports=\"outputPorts\"\n :dynamic-input-groups=\"dynamicInputPorts\"\n :dynamic-output-groups=\"dynamicOutputPorts\"\n />\n\n <OptionsTab\n v-if=\"activeTab === TAB_IDS.OPTIONS\"\n id=\"panel-options\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-options\"\n tabindex=\"0\"\n :options=\"optionsData\"\n :render-as-html=\"renderAsHtml\"\n />\n\n <ViewsTab\n v-if=\"activeTab === TAB_IDS.VIEW\"\n id=\"panel-view\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-view\"\n tabindex=\"0\"\n :views=\"viewsData\"\n />\n\n <KdsEmptyState\n v-if=\"!activeTab\"\n :headline=\"emptyText\"\n class=\"empty-state\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.content {\n padding: var(--kds-spacing-container-0-5x) 0;\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/*\n Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n /\nconst backgroundPaths: Record<string, string> = {\n default:\n \"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.\" +\n \"7,0,29.2z\",\n LoopEnd:\n \"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\",\n LoopStart:\n \"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\",\n ScopeEnd:\n \"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\",\n ScopeStart:\n \"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\",\n VirtualIn:\n \"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\",\n VirtualOut:\n \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n type = null,\n isComponent = false,\n icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n () => (type && backgroundPaths[type]) \|\| backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n const offset = NODE_SIZE / 2;\n const scaleFactor = componentBackgroundPortion;\n return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n <g>\n <path\n :d=\"backgroundPath\"\n :class=\"['bg', { component: isComponent }]\"\n :data-type=\"isComponent ? null : type\"\n />\n <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n <path\n v-if=\"isComponent && type\"\n :d=\"backgroundPath\"\n class=\"bg\"\n :data-type=\"type\"\n :transform=\"componentBackgroundTransformation\"\n />\n <image\n v-if=\"icon\"\n :xlink:href=\"icon\"\n x=\"8\"\n y=\"8\"\n width=\"16\"\n height=\"16\"\n pointer-events=\"none\"\n />\n </g>\n</template>\n\n<style scoped>\n.bg {\n /* default color is unknown /\n fill: var(--kds-color-nodes-and-variables-unknown);\n\n &.component {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n\n &[data-type=\"Configuration\"] {\n fill: var(--kds-color-nodes-and-variables-configuration);\n }\n\n &[data-type=\"Container\"] {\n fill: var(--kds-color-nodes-and-variables-container);\n }\n\n &[data-type=\"Learner\"] {\n fill: var(--kds-color-nodes-and-variables-learner);\n }\n\n &[data-type=\"Loop\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopEnd\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopStart\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"Manipulator\"] {\n fill: var(--kds-color-nodes-and-variables-manipulator);\n }\n\n &[data-type=\"Other\"] {\n fill: var(--kds-color-nodes-and-variables-other);\n }\n\n &[data-type=\"Predictor\"] {\n fill: var(--kds-color-nodes-and-variables-predictor);\n }\n\n &[data-type=\"ScopeEnd\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"ScopeStart\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"Sink\"] {\n fill: var(--kds-color-nodes-and-variables-sink);\n }\n\n &[data-type=\"Source\"] {\n fill: var(--kds-color-nodes-and-variables-source);\n }\n\n &[data-type=\"Visualizer\"] {\n fill: var(--kds-color-nodes-and-variables-visualizer);\n }\n\n &[data-type=\"QuickForm\"] {\n fill: var(--kds-color-nodes-and-variables-quickform);\n }\n\n &[data-type=\"Widget\"] {\n fill: var(--kds-color-nodes-and-variables-widget);\n }\n\n /* Virtual = Components /\n &[data-type=\"VirtualIn\"],\n &[data-type=\"VirtualOut\"] {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/\n Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n /\nconst backgroundPaths: Record<string, string> = {\n default:\n \"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.\" +\n \"7,0,29.2z\",\n LoopEnd:\n \"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\",\n LoopStart:\n \"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\",\n ScopeEnd:\n \"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\",\n ScopeStart:\n \"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\",\n VirtualIn:\n \"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\",\n VirtualOut:\n \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n type = null,\n isComponent = false,\n icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n () => (type && backgroundPaths[type]) \|\| backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n const offset = NODE_SIZE / 2;\n const scaleFactor = componentBackgroundPortion;\n return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n <g>\n <path\n :d=\"backgroundPath\"\n :class=\"['bg', { component: isComponent }]\"\n :data-type=\"isComponent ? null : type\"\n />\n <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n <path\n v-if=\"isComponent && type\"\n :d=\"backgroundPath\"\n class=\"bg\"\n :data-type=\"type\"\n :transform=\"componentBackgroundTransformation\"\n />\n <image\n v-if=\"icon\"\n :xlink:href=\"icon\"\n x=\"8\"\n y=\"8\"\n width=\"16\"\n height=\"16\"\n pointer-events=\"none\"\n />\n </g>\n</template>\n\n<style scoped>\n.bg {\n /* default color is unknown /\n fill: var(--kds-color-nodes-and-variables-unknown);\n\n &.component {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n\n &[data-type=\"Configuration\"] {\n fill: var(--kds-color-nodes-and-variables-configuration);\n }\n\n &[data-type=\"Container\"] {\n fill: var(--kds-color-nodes-and-variables-container);\n }\n\n &[data-type=\"Learner\"] {\n fill: var(--kds-color-nodes-and-variables-learner);\n }\n\n &[data-type=\"Loop\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopEnd\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopStart\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"Manipulator\"] {\n fill: var(--kds-color-nodes-and-variables-manipulator);\n }\n\n &[data-type=\"Other\"] {\n fill: var(--kds-color-nodes-and-variables-other);\n }\n\n &[data-type=\"Predictor\"] {\n fill: var(--kds-color-nodes-and-variables-predictor);\n }\n\n &[data-type=\"ScopeEnd\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"ScopeStart\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"Sink\"] {\n fill: var(--kds-color-nodes-and-variables-sink);\n }\n\n &[data-type=\"Source\"] {\n fill: var(--kds-color-nodes-and-variables-source);\n }\n\n &[data-type=\"Visualizer\"] {\n fill: var(--kds-color-nodes-and-variables-visualizer);\n }\n\n &[data-type=\"QuickForm\"] {\n fill: var(--kds-color-nodes-and-variables-quickform);\n }\n\n &[data-type=\"Widget\"] {\n fill: var(--kds-color-nodes-and-variables-widget);\n }\n\n /* Virtual = Components /\n &[data-type=\"VirtualIn\"],\n &[data-type=\"VirtualOut\"] {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/\n SVG icon preview for a node or component, generated from its attributes\n /\nconst {\n type = null,\n isComponent = false,\n inPorts = [],\n outPorts = [],\n hidePorts = false,\n hideIndicators = false,\n size = \"xlarge\",\n indicatorIcon = undefined,\n icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n /* eslint-disable no-magic-numbers /\n let spacing = 1;\n if (total === 2) {\n spacing = 12;\n } else if (total === 3) {\n spacing = 2;\n }\n / eslint-enable no-magic-numbers /\n\n const totalHeight = total PORT_SIZE + (total - 1) * spacing;\n const delta = (NODE_SIZE - totalHeight) / 2;\n return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n if (ports.length > maxShownPorts) {\n return [...ports.slice(0, maxShownPorts)];\n }\n return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n () =>\n inPorts.length -\n visibleInPorts.value.length +\n outPorts.length -\n visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n <div class=\"node-preview\" :data-size=\"size\">\n <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n <template v-if=\"!hidePorts\">\n <KdsPortIcon\n v-for=\"(port, index) in visibleInPorts\"\n :key=\"`in-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n />\n <KdsPortIcon\n v-for=\"(port, index) in visibleOutPorts\"\n :key=\"`out-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n />\n </template>\n </svg>\n <div v-if=\"!hideIndicators\" class=\"indicators\">\n <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n <KdsIcon\n v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n name=\"more-connections\"\n aria-label=\"Indication that some ports are hidden\"\n size=\"small\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.node-preview {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n width: calc(v-bind(width) * 1px);\n\n /\n `zoom` is used instead of `transform: scale()` so that the shrunk size\n * is also reflected in the layout box, e.g. when placed in a flex or grid\n * container alongside other elements.\n /\n &[data-size=\"small\"] {\n zoom: calc(12 / v-bind(NODE_SIZE));\n }\n\n &[data-size=\"medium\"] {\n zoom: 0.5;\n }\n\n & .indicators {\n display: flex;\n gap: var(--kds-spacing-container-0-25x);\n justify-content: center;\n height: var(--kds-dimension-icon-0-75x);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/\n SVG icon preview for a node or component, generated from its attributes\n /\nconst {\n type = null,\n isComponent = false,\n inPorts = [],\n outPorts = [],\n hidePorts = false,\n hideIndicators = false,\n size = \"xlarge\",\n indicatorIcon = undefined,\n icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n /* eslint-disable no-magic-numbers /\n let spacing = 1;\n if (total === 2) {\n spacing = 12;\n } else if (total === 3) {\n spacing = 2;\n }\n / eslint-enable no-magic-numbers /\n\n const totalHeight = total PORT_SIZE + (total - 1) * spacing;\n const delta = (NODE_SIZE - totalHeight) / 2;\n return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n if (ports.length > maxShownPorts) {\n return [...ports.slice(0, maxShownPorts)];\n }\n return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n () =>\n inPorts.length -\n visibleInPorts.value.length +\n outPorts.length -\n visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n <div class=\"node-preview\" :data-size=\"size\">\n <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n <template v-if=\"!hidePorts\">\n <KdsPortIcon\n v-for=\"(port, index) in visibleInPorts\"\n :key=\"`in-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n />\n <KdsPortIcon\n v-for=\"(port, index) in visibleOutPorts\"\n :key=\"`out-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n />\n </template>\n </svg>\n <div v-if=\"!hideIndicators\" class=\"indicators\">\n <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n <KdsIcon\n v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n name=\"more-connections\"\n aria-label=\"Indication that some ports are hidden\"\n size=\"small\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.node-preview {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n width: calc(v-bind(width) * 1px);\n\n /\n `zoom` is used instead of `transform: scale()` so that the shrunk size\n * is also reflected in the layout box, e.g. when placed in a flex or grid\n * container alongside other elements.\n */\n &[data-size=\"small\"] {\n zoom: calc(12 / v-bind(NODE_SIZE));\n }\n\n &[data-size=\"medium\"] {\n zoom: 0.5;\n }\n\n & .indicators {\n display: flex;\n gap: var(--kds-spacing-container-0-25x);\n justify-content: center;\n height: var(--kds-dimension-icon-0-75x);\n }\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"nodes.js","names":[],"sources":["../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/SVGNodeTorso.vue","../src/nodes/NodePreview/NodePreview.vue","../src/nodes/NodePreview/NodePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsAccordion,\n type KdsAccordionItem,\n KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n options: Array<NodeDescriptionOptions>;\n renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n description?: string;\n content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n return options.map(\n (option, index) =>\n ({\n id: `section-${index}`,\n headline: option.sectionName,\n description: option.sectionDescription,\n content: option.fields,\n }) satisfies AccordionItemWithContent,\n );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n <div>\n <KdsAccordion\n v-if=\"options.length > 1\"\n v-model=\"modelValue\"\n :items=\"accordionItems\"\n >\n <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n <KdsDescription\n v-if=\"item.description\"\n :text=\"item.description\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in item.content\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </template>\n </KdsAccordion>\n\n <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n <KdsDescription\n v-if=\"options[0].sectionDescription\"\n :text=\"options[0].sectionDescription\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<style scoped>\n.section-description {\n margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n & .name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsAccordion,\n type KdsAccordionItem,\n KdsDescription,\n} from \"@knime/kds-components\";\n\nimport type { NodeDescriptionOptions } from \"./types\";\n\ntype Props = {\n options: Array<NodeDescriptionOptions>;\n renderAsHtml?: boolean;\n};\n\nconst { options, renderAsHtml } = defineProps<Props>();\n\ntype AccordionItemWithContent = KdsAccordionItem & {\n description?: string;\n content: NodeDescriptionOptions[\"fields\"];\n};\n\nconst accordionItems = computed<AccordionItemWithContent[]>(() => {\n return options.map(\n (option, index) =>\n ({\n id: `section-${index}`,\n headline: option.sectionName,\n description: option.sectionDescription,\n content: option.fields,\n }) satisfies AccordionItemWithContent,\n );\n});\n\nconst modelValue = ref<string[]>([]);\n</script>\n\n<template>\n <div>\n <KdsAccordion\n v-if=\"options.length > 1\"\n v-model=\"modelValue\"\n :items=\"accordionItems\"\n >\n <template v-for=\"item in accordionItems\" :key=\"item.id\" #[item.id]>\n <KdsDescription\n v-if=\"item.description\"\n :text=\"item.description\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in item.content\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </template>\n </KdsAccordion>\n\n <div v-if=\"options.length === 1\" class=\"single-option-wrapper\">\n <KdsDescription\n v-if=\"options[0].sectionDescription\"\n :text=\"options[0].sectionDescription\"\n :render-as-html=\"renderAsHtml\"\n class=\"section-description\"\n />\n\n <template v-for=\"field in options[0].fields\" :key=\"field.name\">\n <div class=\"option-content\">\n <span class=\"name\">\n {{ field.name }} {{ field.optional ? \"(optional)\" : \"\" }}\n </span>\n\n <KdsDescription\n :text=\"field.description\"\n :render-as-html=\"renderAsHtml\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<style scoped>\n.section-description {\n margin-bottom: var(--kds-spacing-container-1x);\n}\n\n.single-option-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.option-content {\n & .name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n port: PortTemplate;\n showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <KdsPortIcon\n :type=\"port.type\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n />\n </div>\n <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n <span class=\"name title\">Name: {{ port.name }}</span>\n\n <KdsDescription\n v-if=\"showDescription\"\n class=\"description\"\n :text=\"port.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: grid;\n grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n display: flex;\n align-items: center;\n}\n\n.name,\n.description {\n grid-column: 2;\n}\n\n.title {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription, KdsPortIcon } from \"@knime/kds-components\";\n\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n port: PortTemplate;\n showDescription: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <KdsPortIcon\n :type=\"port.type\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n />\n </div>\n <span class=\"title\">Type: {{ port.typeDisplayName }}</span>\n\n <span class=\"name title\">Name: {{ port.name }}</span>\n\n <KdsDescription\n v-if=\"showDescription\"\n class=\"description\"\n :text=\"port.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: grid;\n grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;\n gap: var(--kds-spacing-container-0-5x);\n}\n\n.icon {\n display: flex;\n align-items: center;\n}\n\n.name,\n.description {\n grid-column: 2;\n}\n\n.title {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n name: string;\n description?: string;\n ports: Array<PortTemplate>;\n isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-group-card\">\n <span class=\"group-name\">{{ name }}</span>\n\n <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n <template v-for=\"port in ports\" :key=\"port.id\">\n <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-group-card {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-75x);\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n & .group-name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortTemplateInfo from \"./PortTemplateInfo.vue\";\nimport type { PortTemplate } from \"./types\";\n\ntype Props = {\n name: string;\n description?: string;\n ports: Array<PortTemplate>;\n isDynamicGroup?: boolean;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-group-card\">\n <span class=\"group-name\">{{ name }}</span>\n\n <KdsDescription v-if=\"description\" :text=\"description\" render-as-html />\n\n <template v-for=\"port in ports\" :key=\"port.id\">\n <PortTemplateInfo :port=\"port\" :show-description=\"!isDynamicGroup\" />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-group-card {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-75x);\n padding: var(--kds-spacing-container-1x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n & .group-name {\n font: var(--kds-font-base-title-small-strong);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n inputPorts: Array<PortTemplate>;\n outputPorts: Array<PortTemplate>;\n dynamicInputGroups?: Array<DynamicPortGroup>;\n dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n defineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-list\">\n <PortGroup\n v-if=\"inputPorts.length > 0\"\n name=\"Input ports\"\n :ports=\"inputPorts\"\n />\n\n <PortGroup\n v-if=\"outputPorts.length > 0\"\n name=\"Output ports\"\n :ports=\"outputPorts\"\n />\n\n <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Inport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n\n <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Outport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-list {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport PortGroup from \"./PortGroup.vue\";\nimport type { DynamicPortGroup, PortTemplate } from \"./types\";\n\ntype Props = {\n inputPorts: Array<PortTemplate>;\n outputPorts: Array<PortTemplate>;\n dynamicInputGroups?: Array<DynamicPortGroup>;\n dynamicOutputGroups?: Array<DynamicPortGroup>;\n};\n\nconst { dynamicInputGroups = [], dynamicOutputGroups = [] } =\n defineProps<Props>();\n</script>\n\n<template>\n <div class=\"port-list\">\n <PortGroup\n v-if=\"inputPorts.length > 0\"\n name=\"Input ports\"\n :ports=\"inputPorts\"\n />\n\n <PortGroup\n v-if=\"outputPorts.length > 0\"\n name=\"Output ports\"\n :ports=\"outputPorts\"\n />\n\n <template v-for=\"group in dynamicInputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Inport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n\n <template v-for=\"group in dynamicOutputGroups\" :key=\"group.name\">\n <PortGroup\n v-if=\"group.types.length > 0\"\n :name=\"group.name + ' (Dynamic Outport)'\"\n :description=\"group.description\"\n :ports=\"group.types\"\n is-dynamic-group\n />\n </template>\n </div>\n</template>\n\n<style scoped>\n.port-list {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-5x);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n props.views.map((view, index) => {\n const id = `view-${index}`;\n return { id, ...view };\n }),\n);\n</script>\n\n<template>\n <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n <span class=\"name\">{{ view.name }}</span>\n <KdsDescription\n v-if=\"view.description\"\n :text=\"view.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n margin-bottom: var(--kds-spacing-container-0-25x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport type { NodeDescriptionView } from \"./types\";\n\ntype Props = {\n views: Array<NodeDescriptionView>;\n};\n\nconst props = defineProps<Props>();\n\nconst viewsWithId = computed<Array<NodeDescriptionView & { id: string }>>(() =>\n props.views.map((view, index) => {\n const id = `view-${index}`;\n return { id, ...view };\n }),\n);\n</script>\n\n<template>\n <div v-for=\"view in viewsWithId\" :key=\"view.id\" class=\"card-wrapper\">\n <span class=\"name\">{{ view.name }}</span>\n <KdsDescription\n v-if=\"view.description\"\n :text=\"view.description\"\n render-as-html\n />\n </div>\n</template>\n\n<style scoped>\n.card-wrapper {\n display: flex;\n flex-direction: column;\n padding: var(--kds-spacing-container-1x);\n margin-bottom: var(--kds-spacing-container-0-25x);\n background: var(--kds-color-surface-muted);\n border-radius: var(--kds-border-radius-container-0-37x);\n}\n\n.name {\n font: var(--kds-font-base-title-small-strong);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsEmptyState,\n KdsTabBar,\n type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n inputPorts = [],\n outputPorts = [],\n dynamicInputPorts = [],\n dynamicOutputPorts = [],\n optionsData = [],\n viewsData = [],\n emptyText = \"No ports, options or views available\",\n renderAsHtml = false,\n tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n PORTS: \"ports\",\n OPTIONS: \"options\",\n VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds \| undefined>();\n\nconst hasPorts = computed(\n () =>\n inputPorts.length > 0 \|\|\n outputPorts.length > 0 \|\|\n dynamicInputPorts.length > 0 \|\|\n dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n {\n id: \"tab-ports\",\n value: TAB_IDS.PORTS,\n label: \"Ports\",\n panelId: \"panel-ports\",\n accessory: {\n type: \"icon\",\n name: \"connection\",\n },\n disabled: !hasPorts.value,\n },\n {\n id: \"tab-options\",\n value: TAB_IDS.OPTIONS,\n label: \"Options\",\n panelId: \"panel-options\",\n accessory: {\n type: \"icon\",\n name: \"parameter\",\n },\n disabled: optionsData.length < 1,\n },\n {\n id: \"tab-view\",\n value: TAB_IDS.VIEW,\n label: \"View\",\n panelId: \"panel-view\",\n accessory: {\n type: \"icon\",\n name: \"eye\",\n },\n disabled: viewsData.length < 1,\n },\n]);\n</script>\n\n<template>\n <div>\n <KdsTabBar\n v-model=\"activeTab\"\n :full-width=\"tabBarFullWidth\"\n size=\"small\"\n :tabs=\"tabs\"\n />\n\n <div class=\"content\">\n <PortsTab\n v-if=\"activeTab === TAB_IDS.PORTS\"\n id=\"panel-ports\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-ports\"\n tabindex=\"0\"\n :input-ports=\"inputPorts\"\n :output-ports=\"outputPorts\"\n :dynamic-input-groups=\"dynamicInputPorts\"\n :dynamic-output-groups=\"dynamicOutputPorts\"\n />\n\n <OptionsTab\n v-if=\"activeTab === TAB_IDS.OPTIONS\"\n id=\"panel-options\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-options\"\n tabindex=\"0\"\n :options=\"optionsData\"\n :render-as-html=\"renderAsHtml\"\n />\n\n <ViewsTab\n v-if=\"activeTab === TAB_IDS.VIEW\"\n id=\"panel-view\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-view\"\n tabindex=\"0\"\n :views=\"viewsData\"\n />\n\n <KdsEmptyState\n v-if=\"!activeTab\"\n :headline=\"emptyText\"\n class=\"empty-state\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.content {\n padding: var(--kds-spacing-container-0-5x) 0;\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nimport {\n KdsEmptyState,\n KdsTabBar,\n type KdsTabBarItem,\n} from \"@knime/kds-components\";\n\nimport OptionsTab from \"./OptionsTab.vue\";\nimport PortsTab from \"./PortsTab.vue\";\nimport ViewsTab from \"./ViewsTab.vue\";\nimport type { NodeDescriptionTabsProps } from \"./types\";\n\nconst {\n inputPorts = [],\n outputPorts = [],\n dynamicInputPorts = [],\n dynamicOutputPorts = [],\n optionsData = [],\n viewsData = [],\n emptyText = \"No ports, options or views available\",\n renderAsHtml = false,\n tabBarFullWidth = false,\n} = defineProps<NodeDescriptionTabsProps>();\n\nconst TAB_IDS = {\n PORTS: \"ports\",\n OPTIONS: \"options\",\n VIEW: \"view\",\n} as const;\n\ntype TabIds = (typeof TAB_IDS)[keyof typeof TAB_IDS];\n\nconst activeTab = ref<TabIds \| undefined>();\n\nconst hasPorts = computed(\n () =>\n inputPorts.length > 0 \|\|\n outputPorts.length > 0 \|\|\n dynamicInputPorts.length > 0 \|\|\n dynamicOutputPorts.length > 0,\n);\n\nconst tabs = computed<KdsTabBarItem[]>(() => [\n {\n id: \"tab-ports\",\n value: TAB_IDS.PORTS,\n label: \"Ports\",\n panelId: \"panel-ports\",\n accessory: {\n type: \"icon\",\n name: \"connection\",\n },\n disabled: !hasPorts.value,\n },\n {\n id: \"tab-options\",\n value: TAB_IDS.OPTIONS,\n label: \"Options\",\n panelId: \"panel-options\",\n accessory: {\n type: \"icon\",\n name: \"parameter\",\n },\n disabled: optionsData.length < 1,\n },\n {\n id: \"tab-view\",\n value: TAB_IDS.VIEW,\n label: \"View\",\n panelId: \"panel-view\",\n accessory: {\n type: \"icon\",\n name: \"eye\",\n },\n disabled: viewsData.length < 1,\n },\n]);\n</script>\n\n<template>\n <div>\n <KdsTabBar\n v-model=\"activeTab\"\n :full-width=\"tabBarFullWidth\"\n size=\"small\"\n :tabs=\"tabs\"\n />\n\n <div class=\"content\">\n <PortsTab\n v-if=\"activeTab === TAB_IDS.PORTS\"\n id=\"panel-ports\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-ports\"\n tabindex=\"0\"\n :input-ports=\"inputPorts\"\n :output-ports=\"outputPorts\"\n :dynamic-input-groups=\"dynamicInputPorts\"\n :dynamic-output-groups=\"dynamicOutputPorts\"\n />\n\n <OptionsTab\n v-if=\"activeTab === TAB_IDS.OPTIONS\"\n id=\"panel-options\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-options\"\n tabindex=\"0\"\n :options=\"optionsData\"\n :render-as-html=\"renderAsHtml\"\n />\n\n <ViewsTab\n v-if=\"activeTab === TAB_IDS.VIEW\"\n id=\"panel-view\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-view\"\n tabindex=\"0\"\n :views=\"viewsData\"\n />\n\n <KdsEmptyState\n v-if=\"!activeTab\"\n :headline=\"emptyText\"\n class=\"empty-state\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.content {\n padding: var(--kds-spacing-container-0-5x) 0;\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.empty-state {\n margin: 0 auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/*\n Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n /\nconst backgroundPaths: Record<string, string> = {\n default:\n \"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.\" +\n \"7,0,29.2z\",\n LoopEnd:\n \"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\",\n LoopStart:\n \"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\",\n ScopeEnd:\n \"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\",\n ScopeStart:\n \"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\",\n VirtualIn:\n \"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\",\n VirtualOut:\n \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n type = null,\n isComponent = false,\n icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n () => (type && backgroundPaths[type]) \|\| backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n const offset = NODE_SIZE / 2;\n const scaleFactor = componentBackgroundPortion;\n return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n <g>\n <path\n :d=\"backgroundPath\"\n :class=\"['bg', { component: isComponent }]\"\n :data-type=\"isComponent ? null : type\"\n />\n <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n <path\n v-if=\"isComponent && type\"\n :d=\"backgroundPath\"\n class=\"bg\"\n :data-type=\"type\"\n :transform=\"componentBackgroundTransformation\"\n />\n <image\n v-if=\"icon\"\n :xlink:href=\"icon\"\n x=\"8\"\n y=\"8\"\n width=\"16\"\n height=\"16\"\n pointer-events=\"none\"\n />\n </g>\n</template>\n\n<style scoped>\n.bg {\n /* default color is unknown /\n fill: var(--kds-color-nodes-and-variables-unknown);\n\n &.component {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n\n &[data-type=\"Configuration\"] {\n fill: var(--kds-color-nodes-and-variables-configuration);\n }\n\n &[data-type=\"Container\"] {\n fill: var(--kds-color-nodes-and-variables-container);\n }\n\n &[data-type=\"Learner\"] {\n fill: var(--kds-color-nodes-and-variables-learner);\n }\n\n &[data-type=\"Loop\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopEnd\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopStart\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"Manipulator\"] {\n fill: var(--kds-color-nodes-and-variables-manipulator);\n }\n\n &[data-type=\"Other\"] {\n fill: var(--kds-color-nodes-and-variables-other);\n }\n\n &[data-type=\"Predictor\"] {\n fill: var(--kds-color-nodes-and-variables-predictor);\n }\n\n &[data-type=\"ScopeEnd\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"ScopeStart\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"Sink\"] {\n fill: var(--kds-color-nodes-and-variables-sink);\n }\n\n &[data-type=\"Source\"] {\n fill: var(--kds-color-nodes-and-variables-source);\n }\n\n &[data-type=\"Visualizer\"] {\n fill: var(--kds-color-nodes-and-variables-visualizer);\n }\n\n &[data-type=\"QuickForm\"] {\n fill: var(--kds-color-nodes-and-variables-quickform);\n }\n\n &[data-type=\"Widget\"] {\n fill: var(--kds-color-nodes-and-variables-widget);\n }\n\n /* Virtual = Components /\n &[data-type=\"VirtualIn\"],\n &[data-type=\"VirtualOut\"] {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodeTorsoProps } from \"./types\";\n\n/\n Draws the Torso (colored rounded rectangle with icon) of a Node or Component\n * This vue component only draws regular Nodes/Components, no Metanodes, no Unknown nor Missing Nodes\n * Only works inside of a <svg> element.\n /\nconst backgroundPaths: Record<string, string> = {\n default:\n \"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.\" +\n \"7,0,29.2z\",\n LoopEnd:\n \"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\",\n LoopStart:\n \"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\",\n ScopeEnd:\n \"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\",\n ScopeStart:\n \"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\",\n VirtualIn:\n \"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\",\n VirtualOut:\n \"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\",\n};\n\nconst componentBackgroundPortion = 0.75;\n\nconst {\n type = null,\n isComponent = false,\n icon = null,\n} = defineProps<NodeTorsoProps>();\n\nconst backgroundPath = computed(\n () => (type && backgroundPaths[type]) \|\| backgroundPaths.default,\n);\n\nconst componentBackgroundTransformation = computed(() => {\n const offset = NODE_SIZE / 2;\n const scaleFactor = componentBackgroundPortion;\n return `translate(${offset}, ${offset}) scale(${scaleFactor}) translate(-${offset}, -${offset})`;\n});\n</script>\n\n<template>\n <g>\n <path\n :d=\"backgroundPath\"\n :class=\"['bg', { component: isComponent }]\"\n :data-type=\"isComponent ? null : type\"\n />\n <!-- components may have two layers of background. This is the inner part, a shrunk version of the outer frame -->\n <path\n v-if=\"isComponent && type\"\n :d=\"backgroundPath\"\n class=\"bg\"\n :data-type=\"type\"\n :transform=\"componentBackgroundTransformation\"\n />\n <image\n v-if=\"icon\"\n :xlink:href=\"icon\"\n x=\"8\"\n y=\"8\"\n width=\"16\"\n height=\"16\"\n pointer-events=\"none\"\n />\n </g>\n</template>\n\n<style scoped>\n.bg {\n /* default color is unknown /\n fill: var(--kds-color-nodes-and-variables-unknown);\n\n &.component {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n\n &[data-type=\"Configuration\"] {\n fill: var(--kds-color-nodes-and-variables-configuration);\n }\n\n &[data-type=\"Container\"] {\n fill: var(--kds-color-nodes-and-variables-container);\n }\n\n &[data-type=\"Learner\"] {\n fill: var(--kds-color-nodes-and-variables-learner);\n }\n\n &[data-type=\"Loop\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopEnd\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"LoopStart\"] {\n fill: var(--kds-color-nodes-and-variables-loop);\n }\n\n &[data-type=\"Manipulator\"] {\n fill: var(--kds-color-nodes-and-variables-manipulator);\n }\n\n &[data-type=\"Other\"] {\n fill: var(--kds-color-nodes-and-variables-other);\n }\n\n &[data-type=\"Predictor\"] {\n fill: var(--kds-color-nodes-and-variables-predictor);\n }\n\n &[data-type=\"ScopeEnd\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"ScopeStart\"] {\n fill: var(--kds-color-nodes-and-variables-scope);\n }\n\n &[data-type=\"Sink\"] {\n fill: var(--kds-color-nodes-and-variables-sink);\n }\n\n &[data-type=\"Source\"] {\n fill: var(--kds-color-nodes-and-variables-source);\n }\n\n &[data-type=\"Visualizer\"] {\n fill: var(--kds-color-nodes-and-variables-visualizer);\n }\n\n &[data-type=\"QuickForm\"] {\n fill: var(--kds-color-nodes-and-variables-quickform);\n }\n\n &[data-type=\"Widget\"] {\n fill: var(--kds-color-nodes-and-variables-widget);\n }\n\n /* Virtual = Components /\n &[data-type=\"VirtualIn\"],\n &[data-type=\"VirtualOut\"] {\n fill: var(--kds-color-nodes-and-variables-component);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/\n SVG icon preview for a node or component, generated from its attributes\n /\nconst {\n type = null,\n isComponent = false,\n inPorts = [],\n outPorts = [],\n hidePorts = false,\n hideIndicators = false,\n size = \"xlarge\",\n indicatorIcon = undefined,\n icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n /* eslint-disable no-magic-numbers /\n let spacing = 1;\n if (total === 2) {\n spacing = 12;\n } else if (total === 3) {\n spacing = 2;\n }\n / eslint-enable no-magic-numbers /\n\n const totalHeight = total PORT_SIZE + (total - 1) * spacing;\n const delta = (NODE_SIZE - totalHeight) / 2;\n return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n if (ports.length > maxShownPorts) {\n return [...ports.slice(0, maxShownPorts)];\n }\n return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n () =>\n inPorts.length -\n visibleInPorts.value.length +\n outPorts.length -\n visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n <div class=\"node-preview\" :data-size=\"size\">\n <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n <template v-if=\"!hidePorts\">\n <KdsPortIcon\n v-for=\"(port, index) in visibleInPorts\"\n :key=\"`in-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n />\n <KdsPortIcon\n v-for=\"(port, index) in visibleOutPorts\"\n :key=\"`out-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n />\n </template>\n </svg>\n <div v-if=\"!hideIndicators\" class=\"indicators\">\n <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n <KdsIcon\n v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n name=\"more-connections\"\n aria-label=\"Indication that some ports are hidden\"\n size=\"small\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.node-preview {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n width: calc(v-bind(width) * 1px);\n\n /\n `zoom` is used instead of `transform: scale()` so that the shrunk size\n * is also reflected in the layout box, e.g. when placed in a flex or grid\n * container alongside other elements.\n /\n &[data-size=\"small\"] {\n zoom: calc(12 / v-bind(NODE_SIZE));\n }\n\n &[data-size=\"medium\"] {\n zoom: 0.5;\n }\n\n & .indicators {\n display: flex;\n gap: var(--kds-spacing-container-0-25x);\n justify-content: center;\n height: var(--kds-dimension-icon-0-75x);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { KdsIcon, KdsPortIcon, PORT_SIZE } from \"@knime/kds-components\";\n\nimport SVGNodeTorso from \"./SVGNodeTorso.vue\";\nimport { NODE_SIZE } from \"./constants\";\nimport type { NodePreviewProps, Port } from \"./types\";\n\n/\n SVG icon preview for a node or component, generated from its attributes\n /\nconst {\n type = null,\n isComponent = false,\n inPorts = [],\n outPorts = [],\n hidePorts = false,\n hideIndicators = false,\n size = \"xlarge\",\n indicatorIcon = undefined,\n icon = null,\n} = defineProps<NodePreviewProps>();\n\nconst horizontalSpaceForPorts = computed(() => (hidePorts ? 0 : PORT_SIZE));\n\nconst width = computed(() => NODE_SIZE + 2 horizontalSpaceForPorts.value);\nconst height = NODE_SIZE;\nconst viewBox = computed(\n () => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`,\n);\n\n// top edge of port icon relative to 32x32 background\nfunction yPortShift(index: number, total: number): number {\n /* eslint-disable no-magic-numbers /\n let spacing = 1;\n if (total === 2) {\n spacing = 12;\n } else if (total === 3) {\n spacing = 2;\n }\n / eslint-enable no-magic-numbers /\n\n const totalHeight = total PORT_SIZE + (total - 1) * spacing;\n const delta = (NODE_SIZE - totalHeight) / 2;\n return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;\n}\n\nconst maxShownPorts = 3;\n\nconst cutOffPorts = (ports: Port[]) => {\n if (ports.length > maxShownPorts) {\n return [...ports.slice(0, maxShownPorts)];\n }\n return ports;\n};\n\nconst visibleInPorts = computed(() => cutOffPorts(inPorts));\nconst visibleOutPorts = computed(() => cutOffPorts(outPorts));\nconst numberOfHiddenPorts = computed(\n () =>\n inPorts.length -\n visibleInPorts.value.length +\n outPorts.length -\n visibleOutPorts.value.length,\n);\n</script>\n\n<template>\n <div class=\"node-preview\" :data-size=\"size\">\n <svg :viewBox=\"viewBox\" :width=\"width\" :height=\"height\">\n <SVGNodeTorso :type=\"type\" :icon=\"icon\" :is-component=\"isComponent\" />\n <template v-if=\"!hidePorts\">\n <KdsPortIcon\n v-for=\"(port, index) in visibleInPorts\"\n :key=\"`in-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n />\n <KdsPortIcon\n v-for=\"(port, index) in visibleOutPorts\"\n :key=\"`out-${index}`\"\n :color=\"port.color\"\n :optional=\"port.optional\"\n :type=\"port.type\"\n :standalone=\"false\"\n :transform=\"`translate(${NODE_SIZE + PORT_SIZE / 2}, ${yPortShift(index, visibleOutPorts.length)})`\"\n />\n </template>\n </svg>\n <div v-if=\"!hideIndicators\" class=\"indicators\">\n <KdsIcon v-if=\"indicatorIcon\" :name=\"indicatorIcon\" size=\"small\" />\n <KdsIcon\n v-if=\"numberOfHiddenPorts > 0 && !hidePorts\"\n name=\"more-connections\"\n aria-label=\"Indication that some ports are hidden\"\n size=\"small\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.node-preview {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n width: calc(v-bind(width) * 1px);\n\n /\n `zoom` is used instead of `transform: scale()` so that the shrunk size\n * is also reflected in the layout box, e.g. when placed in a flex or grid\n * container alongside other elements.\n */\n &[data-size=\"small\"] {\n zoom: calc(12 / v-bind(NODE_SIZE));\n }\n\n &[data-size=\"medium\"] {\n zoom: 0.5;\n }\n\n & .indicators {\n display: flex;\n gap: var(--kds-spacing-container-0-25x);\n justify-content: center;\n height: var(--kds-dimension-icon-0-75x);\n }\n}\n</style>\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@knime/product-features",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Package containing composition patterns of KDS Components and KNIME business logic",
   "repository": {
     "type": "git",
@@ -75,8 +75,8 @@
     "consola": "^3.4.2"
   },
   "devDependencies": {
-    "@knime/kds-components": "^11.0.0",
-    "@knime/kds-styles": "^11.0.0",
+    "@knime/kds-components": "^11.1.1",
+    "@knime/kds-styles": "^11.1.1",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/vue3-vite": "^10.4.6",
     "@vitejs/plugin-vue": "^6.0.8",
@@ -96,7 +96,7 @@
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-svg-loader": "^5.1.1",
-    "vue": "3.5.40",
+    "vue": "3.5.42",
     "vue-tsc": "^3.3.8"
   },
   "engines": {