@atom8n/n8n-editor-ui 2.2.0

package/dist/assets/SignoutView-BFsjEAGz.js

@@ -0,0 +1,19 @@
+import { D as createElementBlock, P as defineComponent, Z as onMounted, et as openBlock } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import "./empty-BuGRxzl4.js";
+import { v as useRouter } from "./get-BcEmeOxn.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+var SignoutView_default = /* @__PURE__ */ defineComponent({
+	__name: "SignoutView",
+	setup(__props) {
+		const router = useRouter();
+		onMounted(() => {
+			router.push({ name: VIEWS.HOMEPAGE });
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div");
+		};
+	}
+});
+export { SignoutView_default as default };

package/dist/assets/SignupView-Am4ot0QZ.js

@@ -0,0 +1,137 @@
+import { C as computed, It as ref, P as defineComponent, T as createBlock, Z as onMounted, et as openBlock } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import "./src-jviYSG25.js";
+import "./en-CF30SCh2.js";
+import "./preload-helper-dyVz7ck7.js";
+import "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import "./truncate-C0KYt7i3.js";
+import { Er as useUsersStore, y as useToast } 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 "./sso.store-DyApJwhx.js";
+import { t as AuthView_default } from "./AuthView-D2LWHrMp.js";
+var SignupView_default = /* @__PURE__ */ defineComponent({
+	__name: "SignupView",
+	setup(__props) {
+		const usersStore = useUsersStore();
+		const toast = useToast();
+		const i18n = useI18n();
+		const router = useRouter();
+		const route = useRoute();
+		const FORM_CONFIG = {
+			title: i18n.baseText("auth.signup.setupYourAccount"),
+			buttonText: i18n.baseText("auth.signup.finishAccountSetup"),
+			inputs: [
+				{
+					name: "firstName",
+					properties: {
+						label: i18n.baseText("auth.firstName"),
+						maxlength: 32,
+						required: true,
+						autocomplete: "given-name",
+						capitalize: true,
+						focusInitially: true
+					}
+				},
+				{
+					name: "lastName",
+					properties: {
+						label: i18n.baseText("auth.lastName"),
+						maxlength: 32,
+						required: true,
+						autocomplete: "family-name",
+						capitalize: true
+					}
+				},
+				{
+					name: "password",
+					properties: {
+						label: i18n.baseText("auth.password"),
+						type: "password",
+						validationRules: [{ name: "DEFAULT_PASSWORD_RULES" }],
+						required: true,
+						infoText: i18n.baseText("auth.defaultPasswordRequirements"),
+						autocomplete: "new-password",
+						capitalize: true
+					}
+				},
+				{
+					name: "agree",
+					properties: {
+						label: i18n.baseText("auth.agreement.label"),
+						type: "checkbox"
+					}
+				}
+			]
+		};
+		const loading = ref(false);
+		const inviter = ref(null);
+		const inviterId = ref(null);
+		const inviteeId = ref(null);
+		const inviteMessage = computed(() => {
+			if (!inviter.value) return "";
+			return i18n.baseText("settings.signup.signUpInviterInfo", { interpolate: {
+				firstName: inviter.value.firstName,
+				lastName: inviter.value.lastName
+			} });
+		});
+		onMounted(async () => {
+			const inviterIdParam = getQueryParameter("inviterId");
+			const inviteeIdParam = getQueryParameter("inviteeId");
+			try {
+				if (!inviterIdParam || !inviteeIdParam) throw new Error(i18n.baseText("auth.signup.missingTokenError"));
+				inviterId.value = inviterIdParam;
+				inviteeId.value = inviteeIdParam;
+				inviter.value = (await usersStore.validateSignupToken({
+					inviteeId: inviteeId.value,
+					inviterId: inviterId.value
+				})).inviter;
+			} catch (e) {
+				toast.showError(e, i18n.baseText("auth.signup.tokenValidationError"));
+				router.replace({ name: VIEWS.SIGNIN });
+			}
+		});
+		async function onSubmit(values) {
+			if (!inviterId.value || !inviteeId.value) {
+				toast.showError(new Error(i18n.baseText("auth.signup.tokenValidationError")), i18n.baseText("auth.signup.setupYourAccountError"));
+				return;
+			}
+			try {
+				loading.value = true;
+				await usersStore.acceptInvitation({
+					...values,
+					inviterId: inviterId.value,
+					inviteeId: inviteeId.value
+				});
+				if (values.agree === true) try {
+					await usersStore.submitContactEmail(values.email.toString(), values.agree);
+				} catch {}
+				await router.push({ name: VIEWS.HOMEPAGE });
+			} catch (error) {
+				toast.showError(error, i18n.baseText("auth.signup.setupYourAccountError"));
+			}
+			loading.value = false;
+		}
+		function getQueryParameter(key) {
+			return !route.query[key] || typeof route.query[key] !== "string" ? null : route.query[key];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(AuthView_default, {
+				form: FORM_CONFIG,
+				"form-loading": loading.value,
+				subtitle: inviteMessage.value,
+				onSubmit
+			}, null, 8, ["form-loading", "subtitle"]);
+		};
+	}
+});
+export { SignupView_default as default };

package/dist/assets/SkeletonAgentCard-C5TL-h8F.js

@@ -0,0 +1,191 @@
+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, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { L as refDebounced, rt as useI18n } from "./core-CRbPymLT.js";
+import { Cn as N8nIcon_default, bn as N8nText_default, n as Input_default, ot as N8nActionDropdown_default, r as Select_default, xt as N8nIconButton_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { u as RouterLink } from "./get-BcEmeOxn.js";
+import { s as getAgentRoute } from "./chat.store-290YeyrQ.js";
+import { t as ChatAgentAvatar_default } from "./ChatAgentAvatar-50YBnv3N.js";
+var ChatAgentCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ChatAgentCard",
+	props: { agent: {} },
+	emits: ["edit", "delete"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const i18n = useI18n();
+		const menuItems = computed(() => {
+			return __props.agent.model.provider === "custom-agent" ? [{
+				id: "delete",
+				label: i18n.baseText("chatHub.agent.card.menu.delete")
+			}] : [];
+		});
+		const canEdit = computed(() => __props.agent.model.provider === "custom-agent" || __props.agent.model.provider === "n8n" && __props.agent.metadata.scopes?.includes("workflow:read"));
+		function handleSelectMenu(action) {
+			switch (action) {
+				case "delete":
+					emit("delete");
+					return;
+				case "edit": emit("edit");
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RouterLink), {
+				to: unref(getAgentRoute)(_ctx.agent.model),
+				class: normalizeClass(_ctx.$style.card),
+				"data-test-id": "chat-agent-card"
+			}, {
+				default: withCtx(() => [
+					createVNode(ChatAgentAvatar_default, {
+						agent: _ctx.agent,
+						size: "lg"
+					}, null, 8, ["agent"]),
+					createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [createVNode(unref(N8nText_default), {
+						tag: "h3",
+						size: "medium",
+						bold: "",
+						class: normalizeClass(_ctx.$style.title)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(_ctx.agent.name), 1)]),
+						_: 1
+					}, 8, ["class"]), createVNode(unref(N8nText_default), {
+						size: "small",
+						color: "text-light",
+						class: normalizeClass(_ctx.$style.description)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(_ctx.agent.description || unref(i18n).baseText("chatHub.agent.card.noDescription")), 1)]),
+						_: 1
+					}, 8, ["class"])], 2),
+					createBaseVNode("div", { class: normalizeClass(_ctx.$style.actions) }, [canEdit.value ? (openBlock(), createBlock(unref(N8nIconButton_default), {
+						key: 0,
+						icon: "pen",
+						type: "tertiary",
+						size: "medium",
+						title: unref(i18n).baseText("chatHub.agent.card.button.edit"),
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("edit"), ["prevent"]))
+					}, null, 8, ["title"])) : createCommentVNode("", true), menuItems.value.length > 0 ? (openBlock(), createBlock(unref(N8nActionDropdown_default), {
+						key: 1,
+						items: menuItems.value,
+						placement: "bottom-end",
+						onSelect: handleSelectMenu,
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop", "prevent"]))
+					}, {
+						activator: withCtx(() => [createVNode(unref(N8nIconButton_default), {
+							icon: "ellipsis-vertical",
+							type: "tertiary",
+							size: "medium",
+							title: unref(i18n).baseText("chatHub.agent.card.button.moreOptions"),
+							text: "",
+							class: normalizeClass(_ctx.$style.actionDropdownTrigger)
+						}, null, 8, ["title", "class"])]),
+						_: 1
+					}, 8, ["items"])) : createCommentVNode("", true)], 2)
+				]),
+				_: 1
+			}, 8, ["to", "class"]);
+		};
+	}
+});
+var ChatAgentCard_vue_vue_type_style_index_0_lang_module_default = {
+	card: "_card_1v5ca_123",
+	avatar: "_avatar_1v5ca_139",
+	content: "_content_1v5ca_143",
+	badge: "_badge_1v5ca_151",
+	title: "_title_1v5ca_155",
+	description: "_description_1v5ca_161",
+	actions: "_actions_1v5ca_167",
+	actionDropdownTrigger: "_actionDropdownTrigger_1v5ca_173"
+};
+var ChatAgentCard_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatAgentCard_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatAgentCard_vue_vue_type_style_index_0_lang_module_default }]]);
+var ChatAgentSearchSort_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ChatAgentSearchSort",
+	props: { modelValue: {} },
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const i18n = useI18n();
+		const sortOptions = computed(() => [{
+			label: i18n.baseText("chatHub.agents.sort.updatedAt"),
+			value: "updatedAt"
+		}, {
+			label: i18n.baseText("chatHub.agents.sort.createdAt"),
+			value: "createdAt"
+		}]);
+		const localSearch = ref(props.modelValue.search);
+		const debouncedSearch = refDebounced(localSearch, 300);
+		watch(() => props.modelValue.search, (newSearch) => {
+			if (newSearch !== localSearch.value) localSearch.value = newSearch;
+		});
+		watch(debouncedSearch, (newSearch) => {
+			if (newSearch !== props.modelValue.search) emit("update:modelValue", {
+				...props.modelValue,
+				search: newSearch
+			});
+		});
+		function updateSortBy(value) {
+			emit("update:modelValue", {
+				...props.modelValue,
+				sortBy: value
+			});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.controls) }, [createVNode(unref(Input_default), {
+				modelValue: localSearch.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localSearch.value = $event),
+				class: normalizeClass(_ctx.$style.search),
+				size: "medium",
+				placeholder: unref(i18n).baseText("chatHub.agents.search.placeholder"),
+				clearable: ""
+			}, {
+				prefix: withCtx(() => [createVNode(unref(N8nIcon_default), { icon: "search" })]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"class",
+				"placeholder"
+			]), createVNode(unref(Select_default), {
+				size: "medium",
+				"model-value": _ctx.modelValue.sortBy,
+				class: normalizeClass(_ctx.$style.sort),
+				items: sortOptions.value,
+				"onUpdate:modelValue": updateSortBy
+			}, null, 8, [
+				"model-value",
+				"class",
+				"items"
+			])], 2);
+		};
+	}
+});
+var ChatAgentSearchSort_vue_vue_type_style_index_0_lang_module_default = {
+	controls: "_controls_o7wvu_123",
+	search: "_search_o7wvu_129",
+	sort: "_sort_o7wvu_134"
+};
+var ChatAgentSearchSort_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ChatAgentSearchSort_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ChatAgentSearchSort_vue_vue_type_style_index_0_lang_module_default }]]);
+const card = "_card_lcq8a_123";
+const skeleton = "_skeleton_lcq8a_133";
+const avatar = "_avatar_lcq8a_139";
+const content = "_content_lcq8a_148";
+const title = "_title_lcq8a_156";
+const description = "_description_lcq8a_161";
+const actionButton = "_actionButton_lcq8a_166";
+var SkeletonAgentCard_vue_vue_type_style_index_0_lang_module_default = {
+	card,
+	skeleton,
+	"skeleton-pulse": "_skeleton-pulse_lcq8a_1",
+	avatar,
+	content,
+	title,
+	description,
+	actionButton
+};
+var _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.card) }, [
+		createBaseVNode("div", { class: normalizeClass(_ctx.$style.avatar) }, null, 2),
+		createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [createBaseVNode("div", { class: normalizeClass([_ctx.$style.skeleton, _ctx.$style.title]) }, null, 2), createBaseVNode("div", { class: normalizeClass([_ctx.$style.skeleton, _ctx.$style.description]) }, null, 2)], 2),
+		createBaseVNode("div", { class: normalizeClass([_ctx.$style.skeleton, _ctx.$style.actionButton]) }, null, 2)
+	], 2);
+}
+var SkeletonAgentCard_default = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__cssModules", { "$style": SkeletonAgentCard_vue_vue_type_style_index_0_lang_module_default }]]);
+export { ChatAgentSearchSort_default as n, ChatAgentCard_default as r, SkeletonAgentCard_default as t };

package/dist/assets/TagsDropdown-Bvx_Hd6Q.js

@@ -0,0 +1,230 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, G as nextTick, Gt as unref, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _ as Fragment, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { n as onClickOutside, rt as useI18n } from "./core-CRbPymLT.js";
+import { Cn as N8nIcon_default, J as N8nSelect_default, Y as N8nOption_default } from "./src-jviYSG25.js";
+import { is as MAX_TAG_NAME_LENGTH, us as v4_default, y as useToast } from "./builder.store-Czk2ipDE.js";
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { key: 1 };
+var _hoisted_3 = { key: 2 };
+var MANAGE_KEY = "__manage";
+var CREATE_KEY = "__create";
+var TagsDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "TagsDropdown",
+	props: {
+		placeholder: { default: "" },
+		modelValue: { default: () => [] },
+		eventBus: { default: null },
+		allTags: {},
+		isLoading: { type: Boolean },
+		tagsById: {},
+		createEnabled: {
+			type: Boolean,
+			default: true
+		},
+		manageEnabled: {
+			type: Boolean,
+			default: true
+		},
+		createTag: {
+			type: Function,
+			default: void 0
+		},
+		multipleLimit: { default: 0 },
+		createTagI18nKey: { default: "tagsDropdown.createTag" }
+	},
+	emits: [
+		"update:modelValue",
+		"esc",
+		"blur",
+		"manage-tags"
+	],
+	setup(__props, { emit: __emit }) {
+		const i18n = useI18n();
+		const { showError } = useToast();
+		const props = __props;
+		const emit = __emit;
+		const selectRef = ref();
+		const tagRefs = ref();
+		const createRef = ref();
+		const filter = ref("");
+		const focused = ref(false);
+		const preventUpdate = ref(false);
+		const container = ref();
+		const dropdownId = v4_default();
+		const options = computed(() => {
+			return props.allTags.filter((tag) => tag && tag.name.toLowerCase().includes(filter.value.toLowerCase()));
+		});
+		const appliedTags = computed(() => {
+			return props.modelValue.filter((id) => props.tagsById[id]);
+		});
+		const containerClasses = computed(() => {
+			return {
+				"tags-container": true,
+				focused: focused.value
+			};
+		});
+		const dropdownClasses = computed(() => [
+			"tags-dropdown",
+			`tags-dropdown-${dropdownId}`,
+			props.createEnabled ? "tags-dropdown-create-enabled" : "",
+			props.manageEnabled ? "tags-dropdown-manage-enabled" : ""
+		].join(" "));
+		watch(() => props.allTags, () => {
+			if (props.modelValue.length !== appliedTags.value.length) emit("update:modelValue", appliedTags.value);
+		});
+		onMounted(() => {
+			const select = selectRef.value?.innerSelect;
+			if (select) {
+				const input = select.$refs.input;
+				if (input) {
+					input.setAttribute("maxlength", `24`);
+					input.addEventListener("keydown", (e) => {
+						const keyboardEvent = e;
+						if (keyboardEvent.key === "Escape") emit("esc");
+						else if (keyboardEvent.key === "Enter" && filter.value.length === 0) {
+							preventUpdate.value = true;
+							emit("blur");
+							if (typeof selectRef.value?.blur === "function") selectRef.value.blur();
+						}
+					});
+				}
+			}
+			props.eventBus?.on("focus", onBusFocus);
+		});
+		onBeforeUnmount(() => {
+			props.eventBus?.off("focus", onBusFocus);
+		});
+		function onBusFocus() {
+			focusOnInput();
+			focusFirstOption();
+		}
+		function filterOptions(value = "") {
+			filter.value = value;
+			nextTick(() => focusFirstOption());
+		}
+		async function onCreate() {
+			if (!props.createTag) return;
+			const name = filter.value;
+			try {
+				const newTag = await props.createTag(name);
+				emit("update:modelValue", [...props.modelValue, newTag.id]);
+				filter.value = "";
+			} catch (error) {
+				showError(error, i18n.baseText("tagsDropdown.showError.title"), i18n.baseText("tagsDropdown.showError.message", { interpolate: { name } }));
+			}
+		}
+		function onTagsUpdated(selected) {
+			const manage = selected.find((value) => value === MANAGE_KEY);
+			const create = selected.find((value) => value === CREATE_KEY);
+			if (manage) {
+				filter.value = "";
+				emit("manage-tags");
+				emit("blur");
+			} else if (create) onCreate();
+			else setTimeout(() => {
+				if (!preventUpdate.value) emit("update:modelValue", selected);
+				preventUpdate.value = false;
+			}, 0);
+		}
+		function focusFirstOption() {
+			if (createRef.value?.$el) createRef.value.$el.dispatchEvent(new Event("mouseenter"));
+			else if (tagRefs.value?.[0]?.$el) tagRefs.value[0].$el.dispatchEvent(new Event("mouseenter"));
+		}
+		function focusOnInput() {
+			if (selectRef.value) {
+				selectRef.value.focusOnInput();
+				focused.value = true;
+			}
+		}
+		function onVisibleChange(visible) {
+			if (!visible) {
+				filter.value = "";
+				focused.value = false;
+			} else focused.value = true;
+		}
+		function onRemoveTag() {
+			nextTick(() => {
+				focusOnInput();
+			});
+		}
+		onClickOutside(container, () => {
+			emit("blur");
+		}, {
+			ignore: [`.tags-dropdown-${dropdownId}`, "#tags-manager-modal"],
+			detectIframe: true
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "container",
+				ref: container,
+				class: normalizeClass(containerClasses.value),
+				onKeydown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, [createVNode(unref(N8nSelect_default), {
+				ref_key: "selectRef",
+				ref: selectRef,
+				teleported: true,
+				"model-value": appliedTags.value,
+				loading: _ctx.isLoading,
+				placeholder: _ctx.placeholder,
+				"filter-method": filterOptions,
+				filterable: "",
+				multiple: "",
+				"multiple-limit": props.multipleLimit,
+				"reserve-keyword": false,
+				"loading-text": "...",
+				"popper-class": dropdownClasses.value,
+				"data-test-id": "tags-dropdown",
+				"onUpdate:modelValue": onTagsUpdated,
+				onVisibleChange,
+				onRemoveTag
+			}, {
+				default: withCtx(() => [
+					_ctx.createEnabled && options.value.length === 0 && filter.value ? (openBlock(), createBlock(unref(N8nOption_default), {
+						key: CREATE_KEY,
+						ref_key: "createRef",
+						ref: createRef,
+						value: CREATE_KEY,
+						class: "ops"
+					}, {
+						default: withCtx(() => [createVNode(unref(N8nIcon_default), { icon: "circle-plus" }), createBaseVNode("span", null, toDisplayString(unref(i18n).baseText(props.createTagI18nKey, { interpolate: { filter: filter.value } })), 1)]),
+						_: 1
+					})) : options.value.length === 0 ? (openBlock(), createBlock(unref(N8nOption_default), {
+						key: 1,
+						value: "message",
+						disabled: ""
+					}, {
+						default: withCtx(() => [_ctx.createEnabled ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(i18n).baseText("tagsDropdown.typeToCreateATag")), 1)) : _ctx.allTags.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(i18n).baseText("tagsDropdown.noMatchingTagsExist")), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(i18n).baseText("tagsDropdown.noTagsExist")), 1))]),
+						_: 1
+					})) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (tag, i) => {
+						return openBlock(), createBlock(unref(N8nOption_default), {
+							key: tag.id + "_" + i,
+							ref_for: true,
+							ref_key: "tagRefs",
+							ref: tagRefs,
+							value: tag.id,
+							label: tag.name,
+							class: "tag",
+							"data-test-id": "tag"
+						}, null, 8, ["value", "label"]);
+					}), 128)),
+					_ctx.manageEnabled ? (openBlock(), createBlock(unref(N8nOption_default), {
+						key: MANAGE_KEY,
+						value: MANAGE_KEY,
+						class: "ops manage-tags"
+					}, {
+						default: withCtx(() => [createVNode(unref(N8nIcon_default), { icon: "cog" }), createBaseVNode("span", null, toDisplayString(unref(i18n).baseText("tagsDropdown.manageTags")), 1)]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"loading",
+				"placeholder",
+				"multiple-limit",
+				"popper-class"
+			])], 34);
+		};
+	}
+});
+export { TagsDropdown_default as t };

package/dist/assets/TemplateCard-CyQ1GuVz.js

@@ -0,0 +1,105 @@
+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 { bn as N8nText_default, et as N8nCard_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 { Pt as useNodeTypesStore, aa as useUIStore, p as useTemplatesDataQualityStore } from "./builder.store-Czk2ipDE.js";
+import { v as useRouter } from "./get-BcEmeOxn.js";
+import { Ko as EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY } from "./constants-C8OH4tTq.js";
+import { t as NodeIcon_default } from "./NodeIcon-B9VW6tX6.js";
+var TemplateCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TemplateCard",
+	props: {
+		template: {},
+		tileNumber: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const nodeTypesStore = useNodeTypesStore();
+		const { getTemplateRoute, trackTemplateTileClick, trackTemplateShown } = useTemplatesDataQualityStore();
+		const router = useRouter();
+		const uiStore = useUIStore();
+		const locale = useI18n();
+		const templateNodes = computed(() => {
+			if (!props.template?.nodes) return [];
+			const uniqueNodeTypes = new Set(props.template.nodes.map((node) => node.name));
+			return Array.from(uniqueNodeTypes).slice(0, 2).map((nodeType) => nodeTypesStore.getNodeType(nodeType)).filter(Boolean);
+		});
+		const hasTrackedShown = ref(false);
+		const cardRef = ref(null);
+		let observer = null;
+		const trackWhenVisible = () => {
+			if (hasTrackedShown.value || props.tileNumber === void 0) return;
+			hasTrackedShown.value = true;
+			trackTemplateShown(props.template.id, props.tileNumber);
+			if (observer && cardRef.value) observer.unobserve(cardRef.value.$el);
+			observer = null;
+		};
+		const handleUseTemplate = async () => {
+			trackTemplateTileClick(props.template.id);
+			await router.push(getTemplateRoute(props.template.id));
+			uiStore.closeModal(EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY);
+		};
+		onMounted(() => {
+			if (!cardRef.value) return;
+			if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
+				trackWhenVisible();
+				return;
+			}
+			observer = new IntersectionObserver((entries) => {
+				for (const entry of entries) if (entry.isIntersecting) {
+					trackWhenVisible();
+					break;
+				}
+			});
+			observer.observe(cardRef.value.$el);
+		});
+		onBeforeUnmount(() => {
+			if (observer) {
+				observer.disconnect();
+				observer = null;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(N8nCard_default), {
+				ref_key: "cardRef",
+				ref: cardRef,
+				class: normalizeClass(_ctx.$style.suggestion),
+				onClick: handleUseTemplate
+			}, {
+				default: withCtx(() => [createBaseVNode("div", null, [templateNodes.value.length > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass([_ctx.$style.nodes, "mb-s"])
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(templateNodes.value, (nodeType) => {
+					return openBlock(), createElementBlock("div", {
+						key: nodeType.name,
+						class: normalizeClass(_ctx.$style.nodeIcon)
+					}, [createVNode(NodeIcon_default, {
+						size: 18,
+						"stroke-width": 1.5,
+						"node-type": nodeType
+					}, null, 8, ["node-type"])], 2);
+				}), 128))], 2)) : createCommentVNode("", true), createVNode(unref(N8nText_default), {
+					size: "medium",
+					bold: true
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.template.name), 1)]),
+					_: 1
+				})]), createBaseVNode("div", { class: normalizeClass([_ctx.$style.actions, "mt-m"]) }, [createVNode(unref(N8nButton_default), {
+					label: unref(locale).baseText("workflows.templateRecoV2.useTemplate"),
+					type: "secondary",
+					size: "mini",
+					onClick: withModifiers(handleUseTemplate, ["stop"])
+				}, null, 8, ["label"])], 2)]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+var TemplateCard_vue_vue_type_style_index_0_lang_module_default = {
+	nodes: "_nodes_ztiub_123",
+	nodeIcon: "_nodeIcon_ztiub_128",
+	suggestion: "_suggestion_ztiub_139",
+	actions: "_actions_ztiub_148"
+};
+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 }]]);
+export { TemplateCard_default as t };