npm - @knime/product-features - Versions diffs - 1.2.3 → 2.0.0 - Mend

@knime/product-features 1.2.3 → 2.0.0

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 (106) hide show

package/dist/nodes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nodes.js","sources":["../src/nodes/NodeDescriptionTabs/OptionsTab.vue","../src/nodes/PortIcon/constants.ts","../src/nodes/PortIcon/SVGPortIcon.vue","../src/nodes/PortIcon/PortIcon.vue","../src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue","../src/nodes/NodeDescriptionTabs/PortGroup.vue","../src/nodes/NodeDescriptionTabs/PortsTab.vue","../src/nodes/NodeDescriptionTabs/ViewsTab.vue","../src/nodes/NodeDescriptionTabs/NodeDescriptionTabs.vue","../src/nodes/NodePreview/constants.ts","../src/nodes/NodePreview/SVGNodeTorso.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","export const PORT_SIZE = 8; // px\nexport const PORT_STROKE_WIDTH = 1.4; // px\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport { PORT_SIZE, PORT_STROKE_WIDTH } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst trianglePath = computed(() => {\n // draw triangle around middle point\n let [x1, y1, x2, y3] = [\n -PORT_SIZE / 2,\n -PORT_SIZE / 2,\n PORT_SIZE / 2,\n PORT_SIZE / 2,\n ];\n\n // y and d are chosen so the triangle (including strokeWidth) fits precisely in the port (portSize x portSize)\n /* eslint-disable no-magic-numbers /\n const d = Math.sqrt(5) / 2;\n const y = d / 2 + 1 / 4;\n / eslint-enable no-magic-numbers /\n\n // move points towards the center of the triangle according to strokeWidth\n x1 += PORT_STROKE_WIDTH / 2;\n x2 -= PORT_STROKE_WIDTH d;\n y1 += PORT_STROKE_WIDTH * y;\n y3 -= PORT_STROKE_WIDTH * y;\n\n // draw triangle clock-wise\n return `${x1},${y1} ${x2},${0} ${x1},${y3}`;\n});\n</script>\n\n<template>\n <!-- data table port -->\n <polygon\n v-if=\"type === 'table'\"\n :points=\"trianglePath\"\n :class=\"{ filled }\"\n :data-type=\"type\"\n :stroke-width=\"PORT_STROKE_WIDTH\"\n v-bind=\"$attrs\"\n />\n\n <!-- flow variable port -->\n <circle\n v-else-if=\"type === 'flowVariable'\"\n :r=\"PORT_SIZE / 2 - PORT_STROKE_WIDTH / 2\"\n :class=\"{ filled }\"\n :data-type=\"type\"\n :stroke-width=\"PORT_STROKE_WIDTH\"\n v-bind=\"$attrs\"\n />\n\n <!-- other port -->\n <rect\n v-else\n :width=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n :height=\"PORT_SIZE - PORT_STROKE_WIDTH\"\n :x=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n :y=\"-PORT_SIZE / 2 + PORT_STROKE_WIDTH / 2\"\n :class=\"{ filled }\"\n :data-type=\"type\"\n :stroke-width=\"PORT_STROKE_WIDTH\"\n v-bind=\"$attrs\"\n />\n</template>\n\n<style scoped>\n[data-type=\"flowVariable\"] {\n fill: transparent;\n stroke: var(--kds-color-port-flow-variable);\n\n &.filled {\n fill: var(--kds-color-port-flow-variable);\n }\n}\n\n[data-type=\"table\"] {\n fill: transparent;\n stroke: var(--kds-color-port-data);\n\n &.filled {\n fill: var(--kds-color-port-data);\n }\n}\n\n[data-type=\"other\"],\n[data-type=\"generic\"] {\n fill: transparent;\n\n /** dark mode for custom colors generated using oklch /\n --base: v-bind(color);\n --color: light-dark(\n var(--base),\n oklch(from var(--base) calc(1 - l 0.8) c h)\n );\n\n stroke: var(--color);\n\n &.filled {\n fill: var(--color);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport SVGPortIcon from \"./SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"./constants\";\nimport type { PortIconProps } from \"./types\";\n\nconst { filled = true, type, color } = defineProps<PortIconProps>();\n\nconst viewBox = computed(() =>\n [-PORT_SIZE / 2, -PORT_SIZE / 2, PORT_SIZE, PORT_SIZE].join(\" \"),\n);\n</script>\n\n<template>\n <svg :viewBox=\"viewBox\" :width=\"PORT_SIZE\" :height=\"PORT_SIZE\">\n <SVGPortIcon :filled :type :color />\n </svg>\n</template>\n","<script setup lang=\"ts\">\nimport { KdsDescription } from \"@knime/kds-components\";\n\nimport PortIcon from \"../PortIcon/PortIcon.vue\";\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 <PortIcon\n :type=\"port.type\"\n :color=\"port.color\"\n :filled=\"!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 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, 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","export const NODE_SIZE = 32;\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 /* 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 } from \"@knime/kds-components\";\n\nimport SVGPortIcon from \"../PortIcon/SVGPortIcon.vue\";\nimport { PORT_SIZE } from \"../PortIcon/constants\";\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 <SVGPortIcon\n v-for=\"(port, index) in visibleInPorts\"\n :key=\"`in-${index}`\"\n :color=\"port.color\"\n :filled=\"!port.optional\"\n :type=\"port.type\"\n :transform=\"`translate(-${PORT_SIZE / 2}, ${yPortShift(index, visibleInPorts.length)})`\"\n />\n <SVGPortIcon\n v-for=\"(port, index) in visibleOutPorts\"\n :key=\"`out-${index}`\"\n :color=\"port.color\"\n :filled=\"!port.optional\"\n :type=\"port.type\"\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"],"names":["_createElementBlock","_createBlock","_unref","_renderList","_openBlock","_Fragment","_createElementVNode","_hoisted_1","_toDisplayString","_createVNode","_hoisted_2","_hoisted_3","_mergeProps","$attrs","PortIcon"],"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/dist/rfcErrors-Dw7NLSDp.js ADDED Viewed

@@ -0,0 +1,172 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { n as formatDateTimeString } from "./dist-BrNh9vG-.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createPropsRestProxy, createTextVNode, defineComponent, h, openBlock, ref, renderList, toDisplayString, unref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { KdsButton } from "@knime/kds-components";
+import './rfcErrors.css';//#region src/rfcErrors/serializeRFCErrorData.ts
+var serializeErrorForClipboard = (error, headline, formatDate) => {
+	let details = "";
+	if (error.details?.length) if (error.details.length > 1) details = `\n${error.details.map((item) => `\u2022 ${item}`).join("\n")}`;
+	else details = error.details[0];
+	let errorText = `${headline}\n\n`;
+	errorText += `${error.title}\n\n`;
+	errorText += details ? `Details: ${details}\n\n` : "";
+	if (error.status !== void 0) errorText += `Status: ${error.status}\n`;
+	if (error.date) errorText += `Date: ${formatDate(error.date)}\n`;
+	if (error.requestId) errorText += `Request Id: ${error.requestId}\n`;
+	if (error.errorId) errorText += `Error Id: ${error.errorId}\n`;
+	if (error.stacktrace) {
+		errorText += "------\n";
+		errorText += `Stacktrace:\n\n${error.stacktrace}\n`;
+	}
+	return errorText;
+};
+//#endregion
+//#region src/rfcErrors/RFCErrorToastTemplate.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "wrapper" };
+var _hoisted_2 = { class: "title" };
+var _hoisted_3 = { key: 0 };
+var _hoisted_4 = { key: 0 };
+var _hoisted_5 = {
+	key: 1,
+	class: "details-list"
+};
+var _hoisted_6 = { key: 1 };
+var _hoisted_7 = { key: 2 };
+var _hoisted_8 = { key: 3 };
+var _hoisted_9 = { key: 4 };
+var _hoisted_10 = { key: 5 };
+var _hoisted_11 = { class: "actions-wrapper" };
+//#endregion
+//#region src/rfcErrors/RFCErrorToastTemplate.vue
+var RFCErrorToastTemplate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RFCErrorToastTemplate",
+	props: {
+		headline: {},
+		canCopyToClipboard: {
+			type: Boolean,
+			default: true
+		},
+		serializeErrorForClipboard: {
+			type: Function,
+			default: serializeErrorForClipboard
+		},
+		title: {},
+		status: {},
+		date: {},
+		details: {},
+		requestId: {},
+		errorId: {},
+		stacktrace: {}
+	},
+	emits: ["showMore"],
+	setup(__props, { emit: __emit }) {
+		const rfcError = createPropsRestProxy(__props, [
+			"headline",
+			"canCopyToClipboard",
+			"serializeErrorForClipboard"
+		]);
+		const emits = __emit;
+		const { copy, copied } = useClipboard({ copiedDuring: 3e3 });
+		const showDetails = ref(!(rfcError.details?.length || rfcError.status !== void 0 || rfcError.date !== void 0 || rfcError.requestId !== void 0 || rfcError.errorId !== void 0));
+		const formatDate = (date) => date ? formatDateTimeString(date.getTime()) : "";
+		const copyToClipboard = () => {
+			if (copied.value) return;
+			copy(__props.serializeErrorForClipboard(rfcError, __props.headline, formatDate)).catch((error) => {
+				consola.error("Failed to copy to clipboard", { error });
+			});
+		};
+		const onShowDetailsClicked = () => {
+			showDetails.value = true;
+			emits("showMore");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, toDisplayString(__props.title), 1),
+				showDetails.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+					__props.details?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [_cache[0] || (_cache[0] = createElementVNode("strong", null, "Details: ", -1)), __props.details.length === 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(__props.details[0]), 1)], 64)) : (openBlock(), createElementBlock("ul", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.details, (item, index) => {
+						return openBlock(), createElementBlock("li", { key: index }, toDisplayString(item), 1);
+					}), 128))]))])) : createCommentVNode("", true),
+					__props.status !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [_cache[1] || (_cache[1] = createElementVNode("strong", null, "Status: ", -1)), createTextVNode(toDisplayString(__props.status), 1)])) : createCommentVNode("", true),
+					__props.date ? (openBlock(), createElementBlock("div", _hoisted_7, [_cache[2] || (_cache[2] = createElementVNode("strong", null, "Date: ", -1)), createTextVNode(toDisplayString(formatDate(__props.date)), 1)])) : createCommentVNode("", true),
+					__props.requestId ? (openBlock(), createElementBlock("div", _hoisted_8, [_cache[3] || (_cache[3] = createElementVNode("strong", null, "Request id: ", -1)), createTextVNode(toDisplayString(__props.requestId), 1)])) : createCommentVNode("", true),
+					__props.errorId ? (openBlock(), createElementBlock("div", _hoisted_9, [_cache[4] || (_cache[4] = createElementVNode("strong", null, "Error id: ", -1)), createTextVNode(toDisplayString(__props.errorId), 1)])) : createCommentVNode("", true),
+					__props.stacktrace && __props.canCopyToClipboard ? (openBlock(), createElementBlock("div", _hoisted_10, [..._cache[5] || (_cache[5] = [createElementVNode("strong", null, "Stacktrace: ", -1), createTextVNode("Part of clipboard text ", -1)])])) : createCommentVNode("", true)
+				])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_11, [!showDetails.value ? (openBlock(), createBlock(unref(KdsButton), {
+					key: 0,
+					"data-testid": "show-details",
+					variant: "transparent",
+					label: "Show details",
+					size: "xsmall",
+					onClick: onShowDetailsClicked
+				})) : createCommentVNode("", true), __props.canCopyToClipboard ? (openBlock(), createBlock(unref(KdsButton), {
+					key: 1,
+					"data-testid": "copy-to-clipboard",
+					label: unref(copied) ? "Error was copied" : "Copy error to clipboard",
+					"leading-icon": unref(copied) ? "checkmark" : "copy",
+					variant: "transparent",
+					size: "xsmall",
+					onClick: copyToClipboard
+				}, null, 8, ["label", "leading-icon"])) : createCommentVNode("", true)])
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-037f2b7d"]]);
+//#endregion
+//#region src/rfcErrors/types.ts
+var RFCError = class extends Error {
+	data;
+	constructor(data) {
+		super(data.title);
+		this.data = data;
+	}
+};
+//#endregion
+//#region src/rfcErrors/index.ts
+/**
+* Map to a toast template component compatible with an RFCError format
+*/
+var toToast = ({ headline, rfcError, canCopyToClipboard = true, serializeErrorForClipboard = void 0 }) => {
+	const { data } = rfcError;
+	return {
+		type: "error",
+		headline,
+		component: h(RFCErrorToastTemplate_default, {
+			headline,
+			...data,
+			canCopyToClipboard,
+			serializeErrorForClipboard
+		}),
+		autoRemove: false
+	};
+};
+var isFetchError = (error) => {
+	return error !== null && typeof error === "object" && "response" in error && "statusCode" in error && "data" in error;
+};
+/**
+* Parse a generic request error to an `RFCError`.
+* When parsing is not possible it returns undefined.
+*/
+var tryParse = (error) => {
+	if (!isFetchError(error)) return;
+	if (!error.response) return;
+	const responseDate = error.response.headers.get("date") ? new Date(error.response.headers.get("date")) : void 0;
+	return new RFCError({
+		title: typeof error.data === "string" ? error.data : error.data?.title ?? "",
+		details: error.data?.details,
+		status: error.statusCode,
+		date: responseDate,
+		requestId: error.response.headers.get("x-request-id") ?? void 0,
+		errorId: error.response.headers.get("x-error-id") ?? void 0
+	});
+};
+var rfcErrors = {
+	toToast,
+	tryParse,
+	RFCError
+};
+//#endregion
+export { rfcErrors as t };
+//# sourceMappingURL=rfcErrors-Dw7NLSDp.js.map

package/dist/rfcErrors-Dw7NLSDp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"rfcErrors-Dw7NLSDp.js","names":[],"sources":["../src/rfcErrors/serializeRFCErrorData.ts","../src/rfcErrors/RFCErrorToastTemplate.vue","../src/rfcErrors/RFCErrorToastTemplate.vue","../src/rfcErrors/types.ts","../src/rfcErrors/index.ts"],"sourcesContent":["import type { RFCErrorData } from \"./types\";\n\nexport const serializeErrorForClipboard = (\n error: RFCErrorData,\n headline: string,\n formatDate: (date: Date) => string,\n): string => {\n let details = \"\";\n if (error.details?.length) {\n if (error.details.length > 1) {\n const detailLines = error.details\n .map((item) => `\\u2022 ${item}`)\n .join(\"\\n\");\n details = `\\n${detailLines}`;\n } else {\n details = error.details[0];\n }\n }\n\n let errorText = `${headline}\\n\\n`;\n errorText += `${error.title}\\n\\n`;\n errorText += details ? `Details: ${details}\\n\\n` : \"\";\n\n if (error.status !== undefined) {\n errorText += `Status: ${error.status}\\n`;\n }\n\n if (error.date) {\n errorText += `Date: ${formatDate(error.date)}\\n`;\n }\n\n if (error.requestId) {\n errorText += `Request Id: ${error.requestId}\\n`;\n }\n\n if (error.errorId) {\n errorText += `Error Id: ${error.errorId}\\n`;\n }\n\n if (error.stacktrace) {\n errorText += \"------\\n\"; // separator\n errorText += `Stacktrace:\\n\\n${error.stacktrace}\\n`;\n }\n\n return errorText;\n};\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClipboard } from \"@vueuse/core\";\n\nimport { KdsButton } from \"@knime/kds-components\";\nimport { formatDateTimeString } from \"@knime/utils\";\n\nimport { serializeErrorForClipboard as defaultSerializeRFCErrorData } from \"./serializeRFCErrorData\";\nimport type { RFCErrorData } from \"./types\";\n\ntype Props = {\n /**\n * Toast headline shown in the toast title bar. Not rendered inside this\n * template, but included when serializing the error to the clipboard.\n */\n headline: string;\n /** Whether to show the \"Copy error to clipboard\" button. */\n canCopyToClipboard?: boolean;\n /**\n * Custom serializer for the clipboard payload. Defaults to\n * `serializeRFCErrorData` which formats the full error as text.\n */\n serializeErrorForClipboard?: (\n error: RFCErrorData,\n headline: string,\n formatDate: (date: Date) => string,\n ) => string;\n} & RFCErrorData;\n\nconst {\n headline,\n canCopyToClipboard = true,\n serializeErrorForClipboard = defaultSerializeRFCErrorData,\n ...rfcError\n} = defineProps<Props>();\n\nconst emits = defineEmits([\"showMore\"]);\n\nconst { copy, copied } = useClipboard({\n copiedDuring: 3000,\n});\n\nconst hasDetails =\n rfcError.details?.length ||\n rfcError.status !== undefined ||\n rfcError.date !== undefined ||\n rfcError.requestId !== undefined ||\n rfcError.errorId !== undefined;\n// don't show 'Show details' button if there are no details to show\nconst showDetails = ref(!hasDetails);\n\nconst formatDate = (date: Date): string =>\n date ? formatDateTimeString(date.getTime()) : \"\";\n\nconst copyToClipboard = () => {\n if (copied.value) {\n return;\n }\n copy(serializeErrorForClipboard(rfcError, headline, formatDate)).catch(\n (error) => {\n consola.error(\"Failed to copy to clipboard\", { error });\n },\n );\n};\n\nconst onShowDetailsClicked = () => {\n showDetails.value = true;\n emits(\"showMore\");\n};\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"title\">\n {{ title }}\n </div>\n <div v-if=\"showDetails\">\n <div v-if=\"details?.length\">\n <strong>Details: </strong>\n <template v-if=\"details.length === 1\">\n {{ details[0] }}\n </template>\n <template v-else>\n <ul class=\"details-list\">\n <li v-for=\"(item, index) in details\" :key=\"index\">{{ item }}</li>\n </ul>\n </template>\n </div>\n\n <div v-if=\"status !== undefined\">\n <strong>Status: </strong>{{ status }}\n </div>\n <div v-if=\"date\"><strong>Date: </strong>{{ formatDate(date) }}</div>\n <div v-if=\"requestId\"><strong>Request id: </strong>{{ requestId }}</div>\n <div v-if=\"errorId\"><strong>Error id: </strong>{{ errorId }}</div>\n <div v-if=\"stacktrace && canCopyToClipboard\">\n <strong>Stacktrace: </strong>Part of clipboard text\n </div>\n </div>\n <div class=\"actions-wrapper\">\n <KdsButton\n v-if=\"!showDetails\"\n data-testid=\"show-details\"\n variant=\"transparent\"\n label=\"Show details\"\n size=\"xsmall\"\n @click=\"onShowDetailsClicked\"\n />\n <KdsButton\n v-if=\"canCopyToClipboard\"\n data-testid=\"copy-to-clipboard\"\n :label=\"copied ? 'Error was copied' : 'Copy error to clipboard'\"\n :leading-icon=\"copied ? 'checkmark' : 'copy'\"\n variant=\"transparent\"\n size=\"xsmall\"\n @click=\"copyToClipboard\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.details-list {\n padding-left: var(--kds-spacing-container-1-5x);\n margin-top: var(--kds-spacing-container-0-37x);\n margin-bottom: var(--kds-spacing-container-0-37x);\n}\n\n.actions-wrapper {\n display: flex;\n gap: var(--kds-spacing-container-0-5x);\n align-items: center;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClipboard } from \"@vueuse/core\";\n\nimport { KdsButton } from \"@knime/kds-components\";\nimport { formatDateTimeString } from \"@knime/utils\";\n\nimport { serializeErrorForClipboard as defaultSerializeRFCErrorData } from \"./serializeRFCErrorData\";\nimport type { RFCErrorData } from \"./types\";\n\ntype Props = {\n /**\n * Toast headline shown in the toast title bar. Not rendered inside this\n * template, but included when serializing the error to the clipboard.\n */\n headline: string;\n /** Whether to show the \"Copy error to clipboard\" button. */\n canCopyToClipboard?: boolean;\n /**\n * Custom serializer for the clipboard payload. Defaults to\n * `serializeRFCErrorData` which formats the full error as text.\n */\n serializeErrorForClipboard?: (\n error: RFCErrorData,\n headline: string,\n formatDate: (date: Date) => string,\n ) => string;\n} & RFCErrorData;\n\nconst {\n headline,\n canCopyToClipboard = true,\n serializeErrorForClipboard = defaultSerializeRFCErrorData,\n ...rfcError\n} = defineProps<Props>();\n\nconst emits = defineEmits([\"showMore\"]);\n\nconst { copy, copied } = useClipboard({\n copiedDuring: 3000,\n});\n\nconst hasDetails =\n rfcError.details?.length ||\n rfcError.status !== undefined ||\n rfcError.date !== undefined ||\n rfcError.requestId !== undefined ||\n rfcError.errorId !== undefined;\n// don't show 'Show details' button if there are no details to show\nconst showDetails = ref(!hasDetails);\n\nconst formatDate = (date: Date): string =>\n date ? formatDateTimeString(date.getTime()) : \"\";\n\nconst copyToClipboard = () => {\n if (copied.value) {\n return;\n }\n copy(serializeErrorForClipboard(rfcError, headline, formatDate)).catch(\n (error) => {\n consola.error(\"Failed to copy to clipboard\", { error });\n },\n );\n};\n\nconst onShowDetailsClicked = () => {\n showDetails.value = true;\n emits(\"showMore\");\n};\n</script>\n\n<template>\n <div class=\"wrapper\">\n <div class=\"title\">\n {{ title }}\n </div>\n <div v-if=\"showDetails\">\n <div v-if=\"details?.length\">\n <strong>Details: </strong>\n <template v-if=\"details.length === 1\">\n {{ details[0] }}\n </template>\n <template v-else>\n <ul class=\"details-list\">\n <li v-for=\"(item, index) in details\" :key=\"index\">{{ item }}</li>\n </ul>\n </template>\n </div>\n\n <div v-if=\"status !== undefined\">\n <strong>Status: </strong>{{ status }}\n </div>\n <div v-if=\"date\"><strong>Date: </strong>{{ formatDate(date) }}</div>\n <div v-if=\"requestId\"><strong>Request id: </strong>{{ requestId }}</div>\n <div v-if=\"errorId\"><strong>Error id: </strong>{{ errorId }}</div>\n <div v-if=\"stacktrace && canCopyToClipboard\">\n <strong>Stacktrace: </strong>Part of clipboard text\n </div>\n </div>\n <div class=\"actions-wrapper\">\n <KdsButton\n v-if=\"!showDetails\"\n data-testid=\"show-details\"\n variant=\"transparent\"\n label=\"Show details\"\n size=\"xsmall\"\n @click=\"onShowDetailsClicked\"\n />\n <KdsButton\n v-if=\"canCopyToClipboard\"\n data-testid=\"copy-to-clipboard\"\n :label=\"copied ? 'Error was copied' : 'Copy error to clipboard'\"\n :leading-icon=\"copied ? 'checkmark' : 'copy'\"\n variant=\"transparent\"\n size=\"xsmall\"\n @click=\"copyToClipboard\"\n />\n </div>\n </div>\n</template>\n\n<style scoped>\n.wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--kds-spacing-container-0-25x);\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.details-list {\n padding-left: var(--kds-spacing-container-1-5x);\n margin-top: var(--kds-spacing-container-0-37x);\n margin-bottom: var(--kds-spacing-container-0-37x);\n}\n\n.actions-wrapper {\n display: flex;\n gap: var(--kds-spacing-container-0-5x);\n align-items: center;\n}\n</style>\n","/**\n * Type based on an RFC-9457 error standard (https://www.rfc-editor.org/rfc/rfc9457)\n * Also see:\n * https://knime-com.atlassian.net/wiki/spaces/SPECS/pages/4126769212/API+Errors+Problem+Details\n */\nexport type RFCErrorData = {\n /** Short human-readable summary of the error. */\n title: string;\n /** HTTP status code associated with the error. */\n status?: number;\n /** Date/time when the error occurred. */\n date?: Date;\n /** Additional human-readable detail messages. */\n details?: string[];\n /** Correlation id for the request that triggered the error. */\n requestId?: string;\n /**\n * Id used to find an error in the Hub logs. Specially relevant\n * when details of the error are not wanted to be exposed to the user.\n */\n errorId?: string;\n /**\n * Relevant only for the Analytics Platform, since the Hub does not expose\n * stack traces.\n */\n stacktrace?: string;\n};\n\nexport class RFCError extends Error {\n data: RFCErrorData;\n\n constructor(data: RFCErrorData) {\n super(data.title);\n this.data = data;\n }\n}\n\nexport type FetchError = {\n response: {\n headers: Headers;\n };\n statusCode: number;\n data: {\n title: string;\n details: string[];\n };\n};\n","import { h } from \"vue\";\n\nimport type { Toast } from \"../toasts\";\n\nimport RFCErrorToastTemplate from \"./RFCErrorToastTemplate.vue\";\nimport { type FetchError, RFCError, type RFCErrorData } from \"./types\";\n\n/**\n * Map to a toast template component compatible with an RFCError format\n */\nconst toToast = ({\n headline,\n rfcError,\n canCopyToClipboard = true,\n serializeErrorForClipboard = undefined,\n}: {\n headline: string;\n rfcError: RFCError;\n canCopyToClipboard?: boolean;\n serializeErrorForClipboard?: (\n error: RFCErrorData,\n headline: string,\n formatDate: (date: Date) => string,\n ) => string;\n}): Toast => {\n const { data } = rfcError;\n\n const rfcErrorToastContent = h(RFCErrorToastTemplate, {\n headline,\n ...data,\n canCopyToClipboard,\n serializeErrorForClipboard,\n });\n\n return {\n type: \"error\",\n headline,\n component: rfcErrorToastContent,\n autoRemove: false,\n };\n};\n\nconst isFetchError = (error: unknown): error is FetchError => {\n return (\n error !== null &&\n typeof error === \"object\" &&\n \"response\" in error &&\n \"statusCode\" in error &&\n \"data\" in error\n );\n};\n\n/**\n * Parse a generic request error to an `RFCError`.\n * When parsing is not possible it returns undefined.\n */\nconst tryParse = (error: unknown): RFCError | undefined => {\n if (!isFetchError(error)) {\n return undefined;\n }\n\n if (!error.response) {\n return undefined;\n }\n\n const responseDate = error.response.headers.get(\"date\")\n ? new Date(error.response.headers.get(\"date\")!)\n : undefined;\n\n const title =\n typeof error.data === \"string\" ? error.data : (error.data?.title ?? \"\");\n\n const rfcErrorData: RFCErrorData = {\n title: title as string,\n details: error.data?.details as string[] | undefined,\n status: error.statusCode as number,\n date: responseDate,\n requestId: error.response.headers.get(\"x-request-id\") ?? undefined,\n errorId: error.response.headers.get(\"x-error-id\") ?? undefined,\n };\n\n return new RFCError(rfcErrorData);\n};\n\nexport const rfcErrors = {\n toToast,\n tryParse,\n RFCError,\n};\n"],"mappings":"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"}