@atom8n/n8n-editor-ui 2.2.0

package/dist/assets/TemplateDetails-CZRusTxE.js

@@ -0,0 +1,124 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, M as createVNode, P as defineComponent, T as createBlock, _ as Fragment, at as renderSlot, bt as withCtx, et as openBlock, it as renderList, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { at as N8nLoading_default, bn as N8nText_default, v as N8nTags_default, vn as N8nHeading_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { Fi as abbreviateNumber, l as useTemplatesStore, ln as isFullTemplatesCollection, pi as filterTemplateNodes, un as isTemplatesWorkflow } from "./builder.store-Czk2ipDE.js";
+import { v as useRouter } from "./get-BcEmeOxn.js";
+import { t as NodeIcon_default } from "./NodeIcon-B9VW6tX6.js";
+import { t as TimeAgo_default } from "./TimeAgo-C6EN4lCs.js";
+var TemplateDetailsBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplateDetailsBlock",
+	props: { title: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.block) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createVNode(unref(N8nHeading_default), {
+				tag: "h3",
+				size: "small",
+				color: "text-base"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(_ctx.title), 1)]),
+				_: 1
+			})], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
+		};
+	}
+});
+var TemplateDetailsBlock_vue_vue_type_style_index_0_lang_module_default = {
+	block: "_block_88jt1_123",
+	header: "_header_88jt1_127",
+	content: "_content_88jt1_132"
+};
+var TemplateDetailsBlock_default = /* @__PURE__ */ __plugin_vue_export_helper_default(TemplateDetailsBlock_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": TemplateDetailsBlock_vue_vue_type_style_index_0_lang_module_default }]]);
+var TemplateDetails_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplateDetails",
+	props: {
+		template: {},
+		blockTitle: {},
+		loading: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const router = useRouter();
+		const i18n = useI18n();
+		const templatesStore = useTemplatesStore();
+		const categoriesAsTags = computed(() => props.template && "categories" in props.template ? props.template.categories.map((category) => ({
+			id: `${category.id}`,
+			name: category.name
+		})) : []);
+		const redirectToCategory = (id) => {
+			templatesStore.resetSessionId();
+			router.push(`/templates?categories=${id}`);
+		};
+		const redirectToSearchPage = (node) => {
+			templatesStore.resetSessionId();
+			router.push(`/templates?search=${node.displayName}`);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [
+				createVNode(unref(N8nLoading_default), {
+					loading: _ctx.loading,
+					rows: 5,
+					variant: "p"
+				}, null, 8, ["loading"]),
+				!_ctx.loading && _ctx.template && _ctx.template.nodes.length > 0 ? (openBlock(), createBlock(TemplateDetailsBlock_default, {
+					key: 0,
+					title: _ctx.blockTitle
+				}, {
+					default: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.icons) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterTemplateNodes)(_ctx.template.nodes), (node) => {
+						return openBlock(), createElementBlock("div", {
+							key: node.name,
+							class: normalizeClass(_ctx.$style.icon)
+						}, [createVNode(NodeIcon_default, {
+							"node-type": node,
+							size: 24,
+							"show-tooltip": true,
+							onClick: ($event) => redirectToSearchPage(node)
+						}, null, 8, ["node-type", "onClick"])], 2);
+					}), 128))], 2)]),
+					_: 1
+				}, 8, ["title"])) : createCommentVNode("", true),
+				!_ctx.loading && unref(isFullTemplatesCollection)(_ctx.template) && categoriesAsTags.value.length > 0 ? (openBlock(), createBlock(TemplateDetailsBlock_default, {
+					key: 1,
+					title: unref(i18n).baseText("template.details.categories")
+				}, {
+					default: withCtx(() => [createVNode(unref(N8nTags_default), {
+						tags: categoriesAsTags.value,
+						"onClick:tag": redirectToCategory
+					}, null, 8, ["tags"])]),
+					_: 1
+				}, 8, ["title"])) : createCommentVNode("", true),
+				!_ctx.loading && _ctx.template ? (openBlock(), createBlock(TemplateDetailsBlock_default, {
+					key: 2,
+					title: unref(i18n).baseText("template.details.details")
+				}, {
+					default: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.text) }, [unref(isTemplatesWorkflow)(_ctx.template) ? (openBlock(), createBlock(unref(N8nText_default), {
+						key: 0,
+						size: "small",
+						color: "text-base"
+					}, {
+						default: withCtx(() => [
+							createTextVNode(toDisplayString(unref(i18n).baseText("template.details.created")) + " ", 1),
+							createVNode(TimeAgo_default, { date: _ctx.template.createdAt }, null, 8, ["date"]),
+							createTextVNode(" " + toDisplayString(unref(i18n).baseText("template.details.by")) + " " + toDisplayString(_ctx.template.user ? _ctx.template.user.username : "n8n team"), 1)
+						]),
+						_: 1
+					})) : createCommentVNode("", true)], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.text) }, [unref(isTemplatesWorkflow)(_ctx.template) && _ctx.template.totalViews !== 0 ? (openBlock(), createBlock(unref(N8nText_default), {
+						key: 0,
+						size: "small",
+						color: "text-base"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("template.details.viewed")) + " " + toDisplayString(unref(abbreviateNumber)(_ctx.template.totalViews)) + " " + toDisplayString(unref(i18n).baseText("template.details.times")), 1)]),
+						_: 1
+					})) : createCommentVNode("", true)], 2)]),
+					_: 1
+				}, 8, ["title"])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+var TemplateDetails_vue_vue_type_style_index_0_lang_module_default = {
+	icons: "_icons_18wvw_123",
+	icon: "_icon_18wvw_123",
+	text: "_text_18wvw_134"
+};
+var TemplateDetails_default = /* @__PURE__ */ __plugin_vue_export_helper_default(TemplateDetails_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": TemplateDetails_vue_vue_type_style_index_0_lang_module_default }]]);
+export { TemplateDetails_default as t };

package/dist/assets/TemplateList-DKvbwuiY.js

@@ -0,0 +1,333 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _ as Fragment, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { Cn as N8nIcon_default, at as N8nLoading_default, bn as N8nText_default, vn as N8nHeading_default, xn as N8nButton_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { Fi as abbreviateNumber, pi as filterTemplateNodes } from "./builder.store-Czk2ipDE.js";
+import { t as NodeIcon_default } from "./NodeIcon-B9VW6tX6.js";
+import { t as TimeAgo_default } from "./TimeAgo-C6EN4lCs.js";
+var NodeList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "NodeList",
+	props: {
+		nodes: {},
+		limit: { default: 4 },
+		size: { default: "sm" }
+	},
+	setup(__props) {
+		const props = __props;
+		const filteredCoreNodes = computed(() => {
+			return filterTemplateNodes(props.nodes);
+		});
+		const hiddenNodes = computed(() => {
+			return filteredCoreNodes.value.length - countNodesToBeSliced(filteredCoreNodes.value);
+		});
+		const slicedNodes = computed(() => {
+			return filteredCoreNodes.value.slice(0, countNodesToBeSliced(filteredCoreNodes.value));
+		});
+		const countNodesToBeSliced = (nodes$2) => {
+			if (nodes$2.length > props.limit) return props.limit - 1;
+			else return props.limit;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.list) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(slicedNodes.value, (node) => {
+				return openBlock(), createElementBlock("div", {
+					key: node.name,
+					class: normalizeClass([_ctx.$style.container, _ctx.$style[_ctx.size]])
+				}, [createVNode(NodeIcon_default, {
+					"node-type": node,
+					size: _ctx.size === "md" ? 24 : 18,
+					"show-tooltip": true
+				}, null, 8, ["node-type", "size"])], 2);
+			}), 128)), filteredCoreNodes.value.length > _ctx.limit + 1 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass([_ctx.$style.button, _ctx.size === "md" ? _ctx.$style.buttonMd : _ctx.$style.buttonSm])
+			}, " +" + toDisplayString(hiddenNodes.value), 3)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+var NodeList_vue_vue_type_style_index_0_lang_module_default = {
+	list: "_list_4d2c7_123",
+	container: "_container_4d2c7_131",
+	sm: "_sm_4d2c7_136",
+	md: "_md_4d2c7_140",
+	button: "_button_4d2c7_144",
+	buttonSm: "_buttonSm_4d2c7_158",
+	buttonMd: "_buttonMd_4d2c7_165"
+};
+var NodeList_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NodeList_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NodeList_vue_vue_type_style_index_0_lang_module_default }]]);
+var _hoisted_1$1 = { key: 1 };
+var _hoisted_2$1 = { key: 0 };
+var nodesToBeShown = 5;
+var TemplateCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplateCard",
+	props: {
+		workflow: {},
+		lastItem: {
+			type: Boolean,
+			default: false
+		},
+		firstItem: {
+			type: Boolean,
+			default: false
+		},
+		useWorkflowButton: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		simpleView: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["useWorkflow", "click"],
+	setup(__props, { emit: __emit }) {
+		const i18n = useI18n();
+		const emit = __emit;
+		function onUseWorkflowClick(e) {
+			emit("useWorkflow", e);
+		}
+		function onCardClick(e) {
+			emit("click", e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass([
+					_ctx.$style.card,
+					_ctx.lastItem && _ctx.$style.last,
+					_ctx.firstItem && _ctx.$style.first,
+					!_ctx.loading && _ctx.$style.loaded
+				]),
+				"data-test-id": "template-card",
+				onClick: onCardClick
+			}, [
+				_ctx.loading ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.loading)
+				}, [createVNode(unref(N8nLoading_default), {
+					rows: 2,
+					"shrink-last": false,
+					loading: _ctx.loading
+				}, null, 8, ["loading"])], 2)) : _ctx.workflow ? (openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(unref(N8nHeading_default), {
+					bold: true,
+					size: "small"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.workflow.name), 1)]),
+					_: 1
+				}), !_ctx.simpleView ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.content)
+				}, [
+					_ctx.workflow.totalViews ? (openBlock(), createElementBlock("span", _hoisted_2$1, [createVNode(unref(N8nText_default), {
+						size: "small",
+						color: "text-light"
+					}, {
+						default: withCtx(() => [createVNode(unref(N8nIcon_default), {
+							icon: "eye",
+							size: "xsmall"
+						}), createTextVNode(" " + toDisplayString(unref(abbreviateNumber)(_ctx.workflow.totalViews)), 1)]),
+						_: 1
+					})])) : createCommentVNode("", true),
+					_ctx.workflow.totalViews ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(_ctx.$style.line),
+						textContent: "|"
+					}, null, 2)) : createCommentVNode("", true),
+					createVNode(unref(N8nText_default), {
+						size: "small",
+						color: "text-light"
+					}, {
+						default: withCtx(() => [createVNode(TimeAgo_default, { date: _ctx.workflow.createdAt }, null, 8, ["date"])]),
+						_: 1
+					}),
+					_ctx.workflow.user ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(_ctx.$style.line),
+						textContent: "|"
+					}, null, 2)) : createCommentVNode("", true),
+					_ctx.workflow.user ? (openBlock(), createBlock(unref(N8nText_default), {
+						key: 3,
+						size: "small",
+						color: "text-light"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("template.byAuthor", { interpolate: { name: _ctx.workflow.user.username } })), 1)]),
+						_: 1
+					})) : createCommentVNode("", true)
+				], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				!_ctx.loading && _ctx.workflow ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass([_ctx.$style.nodesContainer, _ctx.useWorkflowButton && _ctx.$style.hideOnHover])
+				}, [_ctx.workflow.nodes ? (openBlock(), createBlock(NodeList_default, {
+					key: 0,
+					nodes: _ctx.workflow.nodes,
+					limit: nodesToBeShown,
+					size: "md"
+				}, null, 8, ["nodes"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				_ctx.useWorkflowButton ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(_ctx.$style.buttonContainer)
+				}, [_ctx.useWorkflowButton ? (openBlock(), createBlock(unref(N8nButton_default), {
+					key: 0,
+					outline: "",
+					label: "Use workflow",
+					"data-test-id": "use-workflow-button",
+					onClick: withModifiers(onUseWorkflowClick, ["stop"])
+				})) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+var TemplateCard_vue_vue_type_style_index_0_lang_module_default = {
+	nodes: "_nodes_9we9y_123",
+	icon: "_icon_9we9y_130",
+	card: "_card_9we9y_134",
+	hideOnHover: "_hideOnHover_9we9y_146",
+	buttonContainer: "_buttonContainer_9we9y_149",
+	loaded: "_loaded_9we9y_160",
+	first: "_first_9we9y_164",
+	last: "_last_9we9y_170",
+	content: "_content_9we9y_175",
+	line: "_line_9we9y_180",
+	loading: "_loading_9we9y_186",
+	nodesContainer: "_nodesContainer_9we9y_191"
+};
+var TemplateCard_default = /* @__PURE__ */ __plugin_vue_export_helper_default(TemplateCard_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": TemplateCard_vue_vue_type_style_index_0_lang_module_default }]]);
+var _hoisted_1 = {
+	key: 0,
+	"data-test-id": "template-count-label"
+};
+var _hoisted_2 = ["textContent"];
+var _hoisted_3 = {
+	key: 1,
+	"data-test-id": "templates-loading-container"
+};
+var TemplateList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplateList",
+	props: {
+		workflows: { default: () => [] },
+		infiniteScrollEnabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		useWorkflowButton: {
+			type: Boolean,
+			default: false
+		},
+		totalWorkflows: { default: 0 },
+		simpleView: {
+			type: Boolean,
+			default: false
+		},
+		totalCount: { default: 0 }
+	},
+	emits: [
+		"loadMore",
+		"openTemplate",
+		"useWorkflow"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const i18n = useI18n();
+		const loader = ref(null);
+		onMounted(() => {
+			if (props.infiniteScrollEnabled) {
+				const content$1 = document.getElementById("content");
+				if (content$1) content$1.addEventListener("scroll", onScroll);
+			}
+		});
+		onBeforeUnmount(() => {
+			const content$1 = document.getElementById("content");
+			if (content$1) content$1.removeEventListener("scroll", onScroll);
+		});
+		function onScroll() {
+			const loaderRef = loader.value;
+			if (!loaderRef || props.loading) return;
+			const rect = loaderRef.getBoundingClientRect();
+			if (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)) emit("loadMore");
+		}
+		function onCardClick(event, id) {
+			emit("openTemplate", {
+				event,
+				id
+			});
+		}
+		function onUseWorkflow(event, id) {
+			emit("useWorkflow", {
+				event,
+				id
+			});
+		}
+		return (_ctx, _cache) => {
+			return _ctx.loading || _ctx.workflows.length ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(_ctx.$style.list)
+			}, [!_ctx.simpleView ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(_ctx.$style.header)
+			}, [createVNode(unref(N8nHeading_default), {
+				bold: true,
+				size: "medium",
+				color: "text-light"
+			}, {
+				default: withCtx(() => [
+					createTextVNode(toDisplayString(unref(i18n).baseText("templates.workflows")) + " ", 1),
+					_ctx.totalCount > 0 ? (openBlock(), createElementBlock("span", _hoisted_1, "(" + toDisplayString(_ctx.totalCount) + ")", 1)) : createCommentVNode("", true),
+					!_ctx.loading && _ctx.totalWorkflows ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						textContent: toDisplayString(`(${_ctx.totalWorkflows})`)
+					}, null, 8, _hoisted_2)) : createCommentVNode("", true)
+				]),
+				_: 1
+			})], 2)) : createCommentVNode("", true), createBaseVNode("div", { class: normalizeClass(_ctx.$style.container) }, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.workflows, (workflow, index) => {
+					return openBlock(), createBlock(TemplateCard_default, {
+						key: workflow.id,
+						workflow,
+						"first-item": index === 0,
+						"simple-view": _ctx.simpleView,
+						"last-item": index === _ctx.workflows.length - 1 && !_ctx.loading,
+						"use-workflow-button": _ctx.useWorkflowButton,
+						onClick: (e) => onCardClick(e, workflow.id),
+						onUseWorkflow: (e) => onUseWorkflow(e, workflow.id)
+					}, null, 8, [
+						"workflow",
+						"first-item",
+						"simple-view",
+						"last-item",
+						"use-workflow-button",
+						"onClick",
+						"onUseWorkflow"
+					]);
+				}), 128)),
+				_ctx.infiniteScrollEnabled ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "loader",
+					ref: loader
+				}, null, 512)) : createCommentVNode("", true),
+				_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(), createElementBlock(Fragment, null, renderList(4, (n) => {
+					return createVNode(TemplateCard_default, {
+						key: "index-" + n,
+						loading: true,
+						"first-item": _ctx.workflows.length === 0 && n === 1,
+						"last-item": n === 4
+					}, null, 8, ["first-item", "last-item"]);
+				}), 64))])) : createCommentVNode("", true)
+			], 2)], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+var TemplateList_vue_vue_type_style_index_0_lang_module_default = {
+	header: "_header_ff02l_123",
+	workflowButton: "_workflowButton_ff02l_127",
+	button: "_button_ff02l_127",
+	nodes: "_nodes_ff02l_130"
+};
+var TemplateList_default = /* @__PURE__ */ __plugin_vue_export_helper_default(TemplateList_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": TemplateList_vue_vue_type_style_index_0_lang_module_default }]]);
+export { NodeList_default as n, TemplateList_default as t };

package/dist/assets/TemplatesCollectionView-D8dxU8By.js

@@ -0,0 +1,184 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _t as watch, bt as withCtx, et as openBlock, j as createTextVNode, k as createSlots, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { F as N8nMarkdown_default, at as N8nLoading_default, bn as N8nText_default, vn as N8nHeading_default } from "./src-jviYSG25.js";
+import "./en-CF30SCh2.js";
+import "./preload-helper-dyVz7ck7.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import "./truncate-C0KYt7i3.js";
+import { Pt as useNodeTypesStore, Xn as useDocumentTitle, k as useTelemetry, l as useTemplatesStore, ln as isFullTemplatesCollection, x as useExternalHooks } from "./builder.store-Czk2ipDE.js";
+import "./empty-BuGRxzl4.js";
+import { _ as useRoute, v as useRouter } from "./get-BcEmeOxn.js";
+import "./sanitize-html-CbW56HUN.js";
+import "./CalendarDate-DgQUMbNo.js";
+import "./path-browserify-RUt2u7iT.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+import "./_baseOrderBy-N8Be_6z6.js";
+import "./dateformat-hG8NERse.js";
+import "./useDebounce-Br5_1ug-.js";
+import "./nodeIcon-D6X-ENYt.js";
+import "./NodeIcon-B9VW6tX6.js";
+import "./nodeTransforms-RzcOM0v2.js";
+import "./TimeAgo-C6EN4lCs.js";
+import "./templateTransforms-BHWiRbtR.js";
+import { n as useTemplateWorkflow } from "./templateActions-bEDSARw2.js";
+import { t as TemplatesView_default } from "./TemplatesView-025CcmIY.js";
+import { t as TemplateDetails_default } from "./TemplateDetails-CZRusTxE.js";
+import { t as TemplateList_default } from "./TemplateList-DKvbwuiY.js";
+var TemplatesCollectionView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplatesCollectionView",
+	setup(__props) {
+		const externalHooks = useExternalHooks();
+		const templatesStore = useTemplatesStore();
+		const nodeTypesStore = useNodeTypesStore();
+		const route = useRoute();
+		const router = useRouter();
+		const telemetry = useTelemetry();
+		const i18n = useI18n();
+		const documentTitle = useDocumentTitle();
+		const loading = ref(true);
+		const notFoundError = ref(false);
+		const collectionId = computed(() => {
+			const { id } = route.params;
+			return Array.isArray(id) ? id[0] : id;
+		});
+		const collection = computed(() => templatesStore.getCollectionById[collectionId.value]);
+		const collectionWorkflows = computed(() => {
+			if (!collection.value || loading.value) return [];
+			return collection.value.workflows.map(({ id }) => templatesStore.getTemplatesById(id.toString())).filter((workflow) => !!workflow);
+		});
+		const scrollToTop = () => {
+			setTimeout(() => {
+				const contentArea = document.getElementById("content");
+				if (contentArea) contentArea.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			}, 50);
+		};
+		const onOpenTemplate = ({ event, id }) => {
+			navigateTo(event, VIEWS.TEMPLATE, `${id}`);
+		};
+		const onUseWorkflow = async ({ event, id }) => {
+			await useTemplateWorkflow({
+				router,
+				templateId: `${id}`,
+				inNewBrowserTab: event.metaKey || event.ctrlKey,
+				templatesStore,
+				externalHooks,
+				nodeTypesStore,
+				telemetry,
+				source: "template_list"
+			});
+		};
+		const navigateTo = (e, page, id) => {
+			if (e.metaKey || e.ctrlKey) {
+				const { href } = router.resolve({
+					name: page,
+					params: { id }
+				});
+				window.open(href, "_blank");
+				return;
+			} else router.push({
+				name: page,
+				params: { id }
+			});
+		};
+		watch(() => collection.value, () => {
+			if (collection.value && "full" in collection.value && collection.value.full) documentTitle.set(`Template collection: ${collection.value.name}`);
+			else documentTitle.set("Templates");
+		});
+		onMounted(async () => {
+			scrollToTop();
+			if (collection.value && "full" in collection.value && collection.value.full) {
+				loading.value = false;
+				return;
+			}
+			try {
+				await templatesStore.fetchCollectionById(collectionId.value);
+			} catch (e) {
+				notFoundError.value = true;
+			}
+			loading.value = false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TemplatesView_default, { "go-back-enabled": true }, createSlots({
+				header: withCtx(() => [!notFoundError.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.wrapper)
+				}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.title) }, [
+					collection.value && collection.value.name ? (openBlock(), createBlock(unref(N8nHeading_default), {
+						key: 0,
+						tag: "h1",
+						size: "2xlarge"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(collection.value.name), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					collection.value && collection.value.name ? (openBlock(), createBlock(unref(N8nText_default), {
+						key: 1,
+						color: "text-base",
+						size: "small"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("templates.collection")), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createVNode(unref(N8nLoading_default), {
+						loading: !collection.value || !collection.value.name,
+						rows: 2,
+						variant: "h1"
+					}, null, 8, ["loading"])
+				], 2)], 2)) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(_ctx.$style.notFound)
+				}, [createVNode(unref(N8nText_default), { color: "text-base" }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("templates.collectionsNotFound")), 1)]),
+					_: 1
+				})], 2))]),
+				_: 2
+			}, [!notFoundError.value ? {
+				name: "content",
+				fn: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.wrapper) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.mainContent) }, [loading.value || unref(isFullTemplatesCollection)(collection.value) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.markdown)
+				}, [createVNode(unref(N8nMarkdown_default), {
+					content: unref(isFullTemplatesCollection)(collection.value) && collection.value.description ? collection.value.description : "",
+					images: unref(isFullTemplatesCollection)(collection.value) && collection.value.image ? collection.value.image : void 0,
+					loading: loading.value
+				}, null, 8, [
+					"content",
+					"images",
+					"loading"
+				])], 2)) : createCommentVNode("", true), createVNode(TemplateList_default, {
+					"infinite-scroll-enabled": false,
+					loading: loading.value,
+					"use-workflow-button": true,
+					workflows: collectionWorkflows.value,
+					onUseWorkflow,
+					onOpenTemplate
+				}, null, 8, ["loading", "workflows"])], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.details) }, [createVNode(TemplateDetails_default, {
+					"block-title": unref(i18n).baseText("template.details.appsInTheCollection"),
+					loading: loading.value,
+					template: collection.value
+				}, null, 8, [
+					"block-title",
+					"loading",
+					"template"
+				])], 2)], 2)]),
+				key: "0"
+			} : void 0]), 1024);
+		};
+	}
+});
+var TemplatesCollectionView_vue_vue_type_style_index_0_lang_module_default = {
+	wrapper: "_wrapper_1m9iq_123",
+	notFound: "_notFound_1m9iq_133",
+	title: "_title_1m9iq_137",
+	button: "_button_1m9iq_141",
+	mainContent: "_mainContent_1m9iq_145",
+	markdown: "_markdown_1m9iq_156",
+	details: "_details_1m9iq_160"
+};
+var TemplatesCollectionView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(TemplatesCollectionView_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": TemplatesCollectionView_vue_vue_type_style_index_0_lang_module_default }]]);
+export { TemplatesCollectionView_default as default };