n8n-editor-ui 1.31.0 → 1.31.1

package/dist/assets/{TemplatesInfoCarousel-SruxUbHk.js.map → TemplatesInfoCarousel-LmSrKkcm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TemplatesInfoCarousel-SruxUbHk.js","sources":["../../src/components/CollectionWorkflowCard.vue","../../src/components/TemplatesInfoCard.vue","../../src/components/TemplatesInfoCarousel.vue"],"sourcesContent":["<template>\n\t<n8n-card :class=\"$style.card\" v-bind=\"$attrs\">\n\t\t<template v-if=\"!loading\" #header>\n\t\t\t<span :class=\"$style.title\" v-text=\"title\" />\n\t\t</template>\n\t\t<n8n-loading :loading=\"loading\" :rows=\"3\" variant=\"p\" />\n\t\t<template v-if=\"!loading\" #footer>\n\t\t\t<slot name=\"footer\" />\n\t\t</template>\n\t</n8n-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\tname: 'Card',\n\tprops: {\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.card {\n\tmin-width: 235px;\n\theight: 140px;\n\tmargin-right: var(--spacing-2xs);\n\tcursor: pointer;\n\n\t&:last-child {\n\t\tmargin-right: var(--spacing-5xs);\n\t}\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 4px rgba(68, 28, 23, 0.07);\n\t}\n\n\t> div {\n\t\theight: 100%;\n\t}\n}\n\n.title {\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 4;\n\t-webkit-box-orient: vertical;\n\tfont-size: var(--font-size-s);\n\tline-height: var(--font-line-height-regular);\n\tfont-weight: var(--font-weight-bold);\n\toverflow: hidden;\n\twhite-space: normal;\n}\n</style>\n","<template>\n\t<Card :loading=\"loading\" :title=\"collection.name\" :style=\"{ width }\">\n\t\t<template #footer>\n\t\t\t<span>\n\t\t\t\t<n8n-text v-show=\"showItemCount\" size=\"small\" color=\"text-light\">\n\t\t\t\t\t{{ collection.workflows.length }}\n\t\t\t\t\t{{ $locale.baseText('templates.workflows') }}\n\t\t\t\t</n8n-text>\n\t\t\t</span>\n\t\t\t<NodeList :nodes=\"collection.nodes\" :show-more=\"false\" />\n\t\t</template>\n\t</Card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Card from '@/components/CollectionWorkflowCard.vue';\nimport NodeList from '@/components/NodeList.vue';\n\nexport default defineComponent({\n\tname: 'TemplatesInfoCard',\n\tcomponents: {\n\t\tCard,\n\t\tNodeList,\n\t},\n\tprops: {\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t},\n\t\tshowItemCount: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\twidth: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module></style>\n","<template>\n\t<div v-show=\"loading || collections.length\" :class=\"$style.container\">\n\t\t<agile\n\t\t\tref=\"slider\"\n\t\t\t:dots=\"false\"\n\t\t\t:nav-buttons=\"false\"\n\t\t\t:infinite=\"false\"\n\t\t\t:slides-to-show=\"4\"\n\t\t\t@after-change=\"updateCarouselScroll\"\n\t\t>\n\t\t\t<Card v-for=\"n in loading ? 4 : 0\" :key=\"`loading-${n}`\" :loading=\"loading\" />\n\t\t\t<TemplatesInfoCard\n\t\t\t\tv-for=\"collection in loading ? [] : collections\"\n\t\t\t\t:key=\"collection.id\"\n\t\t\t\tdata-test-id=\"templates-info-card\"\n\t\t\t\t:collection=\"collection\"\n\t\t\t\t:show-item-count=\"showItemCount\"\n\t\t\t\t:width=\"cardsWidth\"\n\t\t\t\t@click=\"(e) => onCardClick(e, collection.id)\"\n\t\t\t/>\n\t\t</agile>\n\t\t<button\n\t\t\tv-show=\"showNavigation && carouselScrollPosition > 0\"\n\t\t\t:class=\"{ [$style.leftButton]: true }\"\n\t\t\t@click=\"scrollLeft\"\n\t\t>\n\t\t\t<font-awesome-icon icon=\"chevron-left\" />\n\t\t</button>\n\t\t<button\n\t\t\tv-show=\"showNavigation && !scrollEnd\"\n\t\t\t:class=\"{ [$style.rightButton]: true }\"\n\t\t\t@click=\"scrollRight\"\n\t\t>\n\t\t\t<font-awesome-icon icon=\"chevron-right\" />\n\t\t</button>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport type { PropType } from 'vue';\nimport type { ITemplatesCollection } from '@/Interface';\nimport Card from '@/components/CollectionWorkflowCard.vue';\nimport TemplatesInfoCard from '@/components/TemplatesInfoCard.vue';\nimport { VueAgile } from 'vue-agile';\n\ntype SliderRef = InstanceType<typeof VueAgile>;\n\nexport default defineComponent({\n\tname: 'TemplatesInfoCarousel',\n\tcomponents: {\n\t\tCard,\n\t\tTemplatesInfoCard,\n\t\tagile: VueAgile,\n\t},\n\tprops: {\n\t\tcollections: {\n\t\t\ttype: Array as PropType<ITemplatesCollection[]>,\n\t\t},\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tshowItemCount: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tcardsWidth: {\n\t\t\ttype: String,\n\t\t\tdefault: '240px',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcarouselScrollPosition: 0,\n\t\t\tcardWidth: parseInt(this.cardsWidth, 10),\n\t\t\tsliderWidth: 0,\n\t\t\tscrollEnd: false,\n\t\t\tlistElement: null as null | Element,\n\t\t};\n\t},\n\twatch: {\n\t\tcollections() {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateCarouselScroll();\n\t\t\t}, 0);\n\t\t},\n\t\tloading() {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateCarouselScroll();\n\t\t\t}, 0);\n\t\t},\n\t},\n\tasync mounted() {\n\t\tawait this.$nextTick();\n\t\tconst sliderRef = this.$refs.slider as SliderRef | undefined;\n\t\tif (!sliderRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.listElement = sliderRef.$el.querySelector('.agile__list');\n\t\tif (this.listElement) {\n\t\t\tthis.listElement.addEventListener('scroll', this.updateCarouselScroll);\n\t\t}\n\t},\n\tbeforeUnmount() {\n\t\tconst sliderRef = this.$refs.slider as SliderRef | undefined;\n\t\tif (sliderRef) {\n\t\t\tsliderRef.destroy();\n\t\t}\n\n\t\twindow.removeEventListener('scroll', this.updateCarouselScroll);\n\t},\n\tmethods: {\n\t\tupdateCarouselScroll() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.carouselScrollPosition = Number(this.listElement.scrollLeft.toFixed());\n\n\t\t\t\tconst width = this.listElement.clientWidth;\n\t\t\t\tconst scrollWidth = this.listElement.scrollWidth;\n\t\t\t\tconst scrollLeft = this.carouselScrollPosition;\n\t\t\t\tthis.scrollEnd = scrollWidth - width <= scrollLeft + 7;\n\t\t\t}\n\t\t},\n\t\tonCardClick(event: MouseEvent, id: string) {\n\t\t\tthis.$emit('openCollection', { event, id });\n\t\t},\n\t\tscrollLeft() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.listElement.scrollBy({ left: -(this.cardWidth * 2), top: 0, behavior: 'smooth' });\n\t\t\t}\n\t\t},\n\t\tscrollRight() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.listElement.scrollBy({ left: this.cardWidth * 2, top: 0, behavior: 'smooth' });\n\t\t\t}\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.container {\n\tposition: relative;\n}\n\n.button {\n\twidth: 28px;\n\theight: 37px;\n\tposition: absolute;\n\ttop: 35%;\n\tborder-radius: var(--border-radius-large);\n\tborder: var(--border-base);\n\tbackground-color: #fbfcfe;\n\tcursor: pointer;\n\n\t&:after {\n\t\tcontent: '';\n\t\twidth: 40px;\n\t\theight: 140px;\n\t\ttop: -55px;\n\t\tposition: absolute;\n\t}\n\tsvg {\n\t\tcolor: var(--color-foreground-xdark);\n\t}\n}\n\n.leftButton {\n\tcomposes: button;\n\tleft: -30px;\n\n\t&:after {\n\t\tleft: 27px;\n\t\tbackground: linear-gradient(\n\t\t\t270deg,\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t50%\n\t\t\t),\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t100%\n\t\t\t)\n\t\t);\n\t}\n}\n\n.rightButton {\n\tcomposes: button;\n\tright: -30px;\n\n\t&:after {\n\t\tright: 27px;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t50%\n\t\t\t),\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t100%\n\t\t\t)\n\t\t);\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n.agile {\n\t&__list {\n\t\twidth: 100%;\n\t\tpadding-bottom: var(--spacing-2xs);\n\t\toverflow-x: auto;\n\t\ttransition: all 1s ease-in-out;\n\t}\n\n\t&__track {\n\t\twidth: 50px;\n\t}\n}\n</style>\n"],"names":["_sfc_main$2","defineComponent","_component_n8n_card","_resolveComponent","_openBlock","_createBlock","_mergeProps","_ctx","_createSlots","_withCtx","_createVNode","_component_n8n_loading","_createElementVNode","_normalizeClass","_sfc_main$1","Card","NodeList","_component_Card","_normalizeStyle","_withDirectives","_component_n8n_text","_component_NodeList","_sfc_main","TemplatesInfoCard","VueAgile","sliderRef","width","scrollWidth","scrollLeft","event","id","_component_agile","_createElementBlock","_Fragment","_renderList","n","collection","_component_TemplatesInfoCard","_cache","args","_component_font_awesome_icon"],"mappings":"kSAeA,MAAAA,EAAeC,EAAgB,CAC9B,KAAM,OACN,MAAO,CACN,QAAS,CACR,KAAM,OACP,EACA,MAAO,CACN,KAAM,MACP,CACD,CACD,CAAC,8HAxBAC,EAAAC,EAQW,UARX,SAAuCC,EAAM,EAAAC,EAAAH,EAAAI,EAAA,CAIY,MAAAC,EAAA,OAAA,IAAA,EAAAA,EAAxD,MAAwD,EAAAC,EAAA,CAAA,QAA1CC,EAAS,IAAA,CAAiBC,EAAAC,EAAA,CAAE,QAAQJ,EAAG,QAAA,KAAA,qCAHpC,EAAA,CAAA,EAAA,WAIA,QAHhB,KAAA,SAAA,GAAOE,EAAK,IAAA,CAAgBG,EAAA,OAAA,CAAA,MAAAC,EAAAN,EAAA,OAAA,KAAA,8CAGZ,oBAChB,KAAA,SAAA,GAAAE,EAAA,IAAA,+GCYHK,EAAeb,EAAgB,CAC9B,KAAM,oBACN,WAAY,CACX,KAAAc,EACA,SAAAC,CACD,EACA,MAAO,CACN,QAAS,CACR,KAAM,OACP,EACA,WAAY,CACX,KAAM,MACP,EACA,cAAe,CACd,KAAM,QACN,QAAS,EACV,EACA,MAAO,CACN,KAAM,OACN,SAAU,EACX,CACD,CACD,CAAC,kEAxCAb,EAUO,MAAA,EAVwB,OAAAC,EAAA,EAAiBC,EAAAY,EAAA,CAAG,QAAKV,EAAA,QAAA,MAAAA,EAAA,WAAA,KAC5C,MAAMW,EAMT,CAAA,MAAAX,EAAA,KAAA,CAAA,CAAA,EAAA,CAJN,OAAAE,EAAA,IAAA,CAA6CG,EAAA,OAAA,KAAA,CAAAO,EAAOT,EAAYU,EAAA,CAAA,KAAA,mKAKjE,CAAA,CAAA,CAAA,IAA8CC,EAAO,CAAA,MAAAd,EAAA,WAAA,0GCuCxDe,EAAerB,EAAgB,CAC9B,KAAM,wBACN,WAAY,CACX,KAAAc,EACA,kBAAAQ,EACA,MAAOC,CACR,EACA,MAAO,CACN,YAAa,CACZ,KAAM,KACP,EACA,QAAS,CACR,KAAM,OACP,EACA,cAAe,CACd,KAAM,QACN,QAAS,EACV,EACA,eAAgB,CACf,KAAM,QACN,QAAS,EACV,EACA,WAAY,CACX,KAAM,OACN,QAAS,OACV,CACD,EACA,MAAO,CACC,MAAA,CACN,uBAAwB,EACxB,UAAW,SAAS,KAAK,WAAY,EAAE,EACvC,YAAa,EACb,UAAW,GACX,YAAa,IAAA,CAEf,EACA,MAAO,CACN,aAAc,CACb,WAAW,IAAM,CAChB,KAAK,qBAAqB,GACxB,CAAC,CACL,EACA,SAAU,CACT,WAAW,IAAM,CAChB,KAAK,qBAAqB,GACxB,CAAC,CACL,CACD,EACA,MAAM,SAAU,CACf,MAAM,KAAK,YACL,MAAAC,EAAY,KAAK,MAAM,OACxBA,IAIL,KAAK,YAAcA,EAAU,IAAI,cAAc,cAAc,EACzD,KAAK,aACR,KAAK,YAAY,iBAAiB,SAAU,KAAK,oBAAoB,EAEvE,EACA,eAAgB,CACT,MAAAA,EAAY,KAAK,MAAM,OACzBA,GACHA,EAAU,QAAQ,EAGZ,OAAA,oBAAoB,SAAU,KAAK,oBAAoB,CAC/D,EACA,QAAS,CACR,sBAAuB,CACtB,GAAI,KAAK,YAAa,CACrB,KAAK,uBAAyB,OAAO,KAAK,YAAY,WAAW,SAAS,EAEpE,MAAAC,EAAQ,KAAK,YAAY,YACzBC,EAAc,KAAK,YAAY,YAC/BC,EAAa,KAAK,uBACnB,KAAA,UAAYD,EAAcD,GAASE,EAAa,CACtD,CACD,EACA,YAAYC,EAAmBC,EAAY,CAC1C,KAAK,MAAM,iBAAkB,CAAE,MAAAD,EAAO,GAAAC,CAAI,CAAA,CAC3C,EACA,YAAa,CACR,KAAK,aACR,KAAK,YAAY,SAAS,CAAE,KAAM,EAAE,KAAK,UAAY,GAAI,IAAK,EAAG,SAAU,QAAU,CAAA,CAEvF,EACA,aAAc,CACT,KAAK,aACH,KAAA,YAAY,SAAS,CAAE,KAAM,KAAK,UAAY,EAAG,IAAK,EAAG,SAAU,QAAU,CAAA,CAEpF,CACD,CACD,CAAC,wQA5IA,mBAkCM,yBAjCL,MAkBQjB,EAAAN,EAAA,OAAA,SAAA,CAAA,EAAA,CAhBKG,EAAAqB,EAAA,CACX,IAAA,SACA,KAAA,GACA,cAAA,GACA,SAAA,GAAA,iBAAA,EAEiC,cAAAxB,EAAA,oBAAA,EAAA,mBAAK,EAAc,EAAAyB,EAAAC,EAAA,KAAAC,EAAA3B,EAAA,QAAA,EAAA,EAAA4B,IAAK/B,EAAA,EAAgBC,EAAAY,EAAA,CAAA,IAAA,WAAAkB,CAAA,oBAC1E,EAAA,KAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,GAAA,IAEO/B,EAAA,EAAA,EAAU4B,EAAGC,EAAA,KAAAC,EAAA3B,EAAA,QAAA,CAAA,EAAAA,EAAA,YAAA6B,IACnBhC,EAAA,EAAkCC,EAAAgC,EAAA,CACjC,IAAYD,EAAA,GACZ,eAAA,sBACA,WAAAA,EACA,kBAAc7B,EAAA,cAAA,MAAAA,EAAA,uHAKf,EAAK,CAAA,eAAA,CAAA,EACAY,EAAAP,EAAA,SAAA,CAAA,MAAAC,EAAA,CAAA,CAAAN,EAAA,OAAA,UAAA,EAAA,GAAA,EAEN,QAAyC+B,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAlBhC,EAAC,YAAcA,EAAA,WAAA,GAAAgC,CAAA,EAAA,EAAA,CAJ9B7B,EAAA8B,EAAkB,CAAsB,KAAA,cAAA,CAAA,CAAA,EAAA,CAAA,EAAA,MAMjD,gBAMSjC,EAAA,uBAAA,CAAA,CAAA,CAAA,EAHFY,EAAAP,EAAA,SAAA,CAAA,MAAAC,EAAA,CAAA,CAAAN,EAAA,OAAA,WAAA,EAAA,GAAA,EAEN,QAA0C+B,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAnBhC,EAAC,aAAeA,EAAA,YAAA,GAAAgC,CAAA,EAAA,EAAA,CAJ/B7B,EAAA8B,EAAmB,CAAS,KAAA,eAAA,CAAA,CAAA,EAAA,CAAA,EAAA"}
+{"version":3,"file":"TemplatesInfoCarousel-LmSrKkcm.js","sources":["../../src/components/CollectionWorkflowCard.vue","../../src/components/TemplatesInfoCard.vue","../../src/components/TemplatesInfoCarousel.vue"],"sourcesContent":["<template>\n\t<n8n-card :class=\"$style.card\" v-bind=\"$attrs\">\n\t\t<template v-if=\"!loading\" #header>\n\t\t\t<span :class=\"$style.title\" v-text=\"title\" />\n\t\t</template>\n\t\t<n8n-loading :loading=\"loading\" :rows=\"3\" variant=\"p\" />\n\t\t<template v-if=\"!loading\" #footer>\n\t\t\t<slot name=\"footer\" />\n\t\t</template>\n\t</n8n-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\tname: 'Card',\n\tprops: {\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.card {\n\tmin-width: 235px;\n\theight: 140px;\n\tmargin-right: var(--spacing-2xs);\n\tcursor: pointer;\n\n\t&:last-child {\n\t\tmargin-right: var(--spacing-5xs);\n\t}\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 4px rgba(68, 28, 23, 0.07);\n\t}\n\n\t> div {\n\t\theight: 100%;\n\t}\n}\n\n.title {\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 4;\n\t-webkit-box-orient: vertical;\n\tfont-size: var(--font-size-s);\n\tline-height: var(--font-line-height-regular);\n\tfont-weight: var(--font-weight-bold);\n\toverflow: hidden;\n\twhite-space: normal;\n}\n</style>\n","<template>\n\t<Card :loading=\"loading\" :title=\"collection.name\" :style=\"{ width }\">\n\t\t<template #footer>\n\t\t\t<span>\n\t\t\t\t<n8n-text v-show=\"showItemCount\" size=\"small\" color=\"text-light\">\n\t\t\t\t\t{{ collection.workflows.length }}\n\t\t\t\t\t{{ $locale.baseText('templates.workflows') }}\n\t\t\t\t</n8n-text>\n\t\t\t</span>\n\t\t\t<NodeList :nodes=\"collection.nodes\" :show-more=\"false\" />\n\t\t</template>\n\t</Card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Card from '@/components/CollectionWorkflowCard.vue';\nimport NodeList from '@/components/NodeList.vue';\n\nexport default defineComponent({\n\tname: 'TemplatesInfoCard',\n\tcomponents: {\n\t\tCard,\n\t\tNodeList,\n\t},\n\tprops: {\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t},\n\t\tshowItemCount: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\twidth: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module></style>\n","<template>\n\t<div v-show=\"loading || collections.length\" :class=\"$style.container\">\n\t\t<agile\n\t\t\tref=\"slider\"\n\t\t\t:dots=\"false\"\n\t\t\t:nav-buttons=\"false\"\n\t\t\t:infinite=\"false\"\n\t\t\t:slides-to-show=\"4\"\n\t\t\t@after-change=\"updateCarouselScroll\"\n\t\t>\n\t\t\t<Card v-for=\"n in loading ? 4 : 0\" :key=\"`loading-${n}`\" :loading=\"loading\" />\n\t\t\t<TemplatesInfoCard\n\t\t\t\tv-for=\"collection in loading ? [] : collections\"\n\t\t\t\t:key=\"collection.id\"\n\t\t\t\tdata-test-id=\"templates-info-card\"\n\t\t\t\t:collection=\"collection\"\n\t\t\t\t:show-item-count=\"showItemCount\"\n\t\t\t\t:width=\"cardsWidth\"\n\t\t\t\t@click=\"(e) => onCardClick(e, collection.id)\"\n\t\t\t/>\n\t\t</agile>\n\t\t<button\n\t\t\tv-show=\"showNavigation && carouselScrollPosition > 0\"\n\t\t\t:class=\"{ [$style.leftButton]: true }\"\n\t\t\t@click=\"scrollLeft\"\n\t\t>\n\t\t\t<font-awesome-icon icon=\"chevron-left\" />\n\t\t</button>\n\t\t<button\n\t\t\tv-show=\"showNavigation && !scrollEnd\"\n\t\t\t:class=\"{ [$style.rightButton]: true }\"\n\t\t\t@click=\"scrollRight\"\n\t\t>\n\t\t\t<font-awesome-icon icon=\"chevron-right\" />\n\t\t</button>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport type { PropType } from 'vue';\nimport type { ITemplatesCollection } from '@/Interface';\nimport Card from '@/components/CollectionWorkflowCard.vue';\nimport TemplatesInfoCard from '@/components/TemplatesInfoCard.vue';\nimport { VueAgile } from 'vue-agile';\n\ntype SliderRef = InstanceType<typeof VueAgile>;\n\nexport default defineComponent({\n\tname: 'TemplatesInfoCarousel',\n\tcomponents: {\n\t\tCard,\n\t\tTemplatesInfoCard,\n\t\tagile: VueAgile,\n\t},\n\tprops: {\n\t\tcollections: {\n\t\t\ttype: Array as PropType<ITemplatesCollection[]>,\n\t\t},\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tshowItemCount: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tcardsWidth: {\n\t\t\ttype: String,\n\t\t\tdefault: '240px',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcarouselScrollPosition: 0,\n\t\t\tcardWidth: parseInt(this.cardsWidth, 10),\n\t\t\tsliderWidth: 0,\n\t\t\tscrollEnd: false,\n\t\t\tlistElement: null as null | Element,\n\t\t};\n\t},\n\twatch: {\n\t\tcollections() {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateCarouselScroll();\n\t\t\t}, 0);\n\t\t},\n\t\tloading() {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateCarouselScroll();\n\t\t\t}, 0);\n\t\t},\n\t},\n\tasync mounted() {\n\t\tawait this.$nextTick();\n\t\tconst sliderRef = this.$refs.slider as SliderRef | undefined;\n\t\tif (!sliderRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.listElement = sliderRef.$el.querySelector('.agile__list');\n\t\tif (this.listElement) {\n\t\t\tthis.listElement.addEventListener('scroll', this.updateCarouselScroll);\n\t\t}\n\t},\n\tbeforeUnmount() {\n\t\tconst sliderRef = this.$refs.slider as SliderRef | undefined;\n\t\tif (sliderRef) {\n\t\t\tsliderRef.destroy();\n\t\t}\n\n\t\twindow.removeEventListener('scroll', this.updateCarouselScroll);\n\t},\n\tmethods: {\n\t\tupdateCarouselScroll() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.carouselScrollPosition = Number(this.listElement.scrollLeft.toFixed());\n\n\t\t\t\tconst width = this.listElement.clientWidth;\n\t\t\t\tconst scrollWidth = this.listElement.scrollWidth;\n\t\t\t\tconst scrollLeft = this.carouselScrollPosition;\n\t\t\t\tthis.scrollEnd = scrollWidth - width <= scrollLeft + 7;\n\t\t\t}\n\t\t},\n\t\tonCardClick(event: MouseEvent, id: string) {\n\t\t\tthis.$emit('openCollection', { event, id });\n\t\t},\n\t\tscrollLeft() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.listElement.scrollBy({ left: -(this.cardWidth * 2), top: 0, behavior: 'smooth' });\n\t\t\t}\n\t\t},\n\t\tscrollRight() {\n\t\t\tif (this.listElement) {\n\t\t\t\tthis.listElement.scrollBy({ left: this.cardWidth * 2, top: 0, behavior: 'smooth' });\n\t\t\t}\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.container {\n\tposition: relative;\n}\n\n.button {\n\twidth: 28px;\n\theight: 37px;\n\tposition: absolute;\n\ttop: 35%;\n\tborder-radius: var(--border-radius-large);\n\tborder: var(--border-base);\n\tbackground-color: #fbfcfe;\n\tcursor: pointer;\n\n\t&:after {\n\t\tcontent: '';\n\t\twidth: 40px;\n\t\theight: 140px;\n\t\ttop: -55px;\n\t\tposition: absolute;\n\t}\n\tsvg {\n\t\tcolor: var(--color-foreground-xdark);\n\t}\n}\n\n.leftButton {\n\tcomposes: button;\n\tleft: -30px;\n\n\t&:after {\n\t\tleft: 27px;\n\t\tbackground: linear-gradient(\n\t\t\t270deg,\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t50%\n\t\t\t),\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t100%\n\t\t\t)\n\t\t);\n\t}\n}\n\n.rightButton {\n\tcomposes: button;\n\tright: -30px;\n\n\t&:after {\n\t\tright: 27px;\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t50%\n\t\t\t),\n\t\t\thsla(\n\t\t\t\tvar(--color-background-light-h),\n\t\t\t\tvar(--color-background-light-s),\n\t\t\t\tvar(--color-background-light-l),\n\t\t\t\t100%\n\t\t\t)\n\t\t);\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n.agile {\n\t&__list {\n\t\twidth: 100%;\n\t\tpadding-bottom: var(--spacing-2xs);\n\t\toverflow-x: auto;\n\t\ttransition: all 1s ease-in-out;\n\t}\n\n\t&__track {\n\t\twidth: 50px;\n\t}\n}\n</style>\n"],"names":["_sfc_main$2","defineComponent","_component_n8n_card","_resolveComponent","_openBlock","_createBlock","_mergeProps","_ctx","_createSlots","_withCtx","_createVNode","_component_n8n_loading","_createElementVNode","_normalizeClass","_sfc_main$1","Card","NodeList","_component_Card","_normalizeStyle","_withDirectives","_component_n8n_text","_component_NodeList","_sfc_main","TemplatesInfoCard","VueAgile","sliderRef","width","scrollWidth","scrollLeft","event","id","_component_agile","_createElementBlock","_Fragment","_renderList","n","collection","_component_TemplatesInfoCard","_cache","args","_component_font_awesome_icon"],"mappings":"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"}

package/dist/assets/{TemplatesSearchView-v3YJ9cpx.js → TemplatesSearchView-WIbBh-fS.js}

@@ -1,2 +1,2 @@
-import{m as S}from"./pinia-jQLgEt_L.js";import{T as A}from"./TemplatesInfoCarousel-SruxUbHk.js";import{h as $}from"./index-6DR75wmI.js";import{G as v,ag as l,l as n,m as h,p as i,I as s,R as p,T as a,Q as u,O as c,S as m,F as E,a7 as M,M as P,V as U,U as V}from"./vendor-e5jTRqqt.js";import{_,aA as I,e as q,fR as B,aX as R,f as F,u as z,l as H,fL as Q,V as T}from"./n8n-oSulVm5C.js";import{T as j}from"./TemplateList-iPTJU805.js";import{T as N}from"./TemplatesView-WmzjgsYe.js";import"./NodeList-02mJFRoY.js";import"./vue-agile-2Hmrznis.js";import"./lodash-es-JdX4GWLn.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const D=v({name:"TemplateFilters",props:{categories:{type:Array,default:()=>[]},sortOnPopulate:{type:Boolean,default:!1},expandLimit:{type:Number,default:12},loading:{type:Boolean},selected:{type:Array,default:()=>[]}},emits:["clearAll","select","clear"],data(){return{collapsed:!0,sortedCategories:[]}},computed:{...S($),allSelected(){return this.selected.length===0}},watch:{sortOnPopulate:{handler(e){e&&this.sortCategories()},immediate:!0},categories:{handler(e){e.length>0&&this.sortCategories()},immediate:!0}},methods:{sortCategories(){if(!this.sortOnPopulate)this.sortedCategories=this.categories;else{const e=this.selected||[],t=this.categories.filter(r=>e.includes(r)),o=this.categories.filter(r=>!e.includes(r));this.sortedCategories=t.concat(o)}},collapseAction(){this.collapsed=!1},handleCheckboxChanged(e,t){this.$emit(e?"select":"clear",t)},isSelected(e){return this.selected.includes(e)},resetCategories(){this.$emit("clearAll")}}}),K="_title_7aevl_5",G="_categories_7aevl_10",X="_item_7aevl_15",J="_button_7aevl_22",Y={title:K,categories:G,item:X,button:J},Z=["textContent"],x=["data-test-id"];function ee(e,t,o,r,g,b){const f=l("n8n-loading"),C=l("el-checkbox"),w=l("n8n-text");return n(),h("div",{class:s([e.$style.filters,"template-filters"]),"data-test-id":"templates-filter-container"},[i("div",{class:s(e.$style.title),textContent:p(e.$locale.baseText("templates.categoriesHeading"))},null,10,Z),e.loading?(n(),h("div",{key:0,class:s(e.$style.list)},[a(f,{loading:e.loading,rows:e.expandLimit},null,8,["loading","rows"])],2)):u("",!0),e.loading?u("",!0):(n(),h("ul",{key:1,class:s(e.$style.categories)},[i("li",{class:s(e.$style.item),"data-test-id":"template-filter-all-categories"},[a(C,{"model-value":e.allSelected,"onUpdate:modelValue":t[0]||(t[0]=()=>e.resetCategories())},{default:c(()=>[m(p(e.$locale.baseText("templates.allCategories")),1)]),_:1},8,["model-value"])],2),(n(!0),h(E,null,M(e.collapsed?e.sortedCategories.slice(0,e.expandLimit):e.sortedCategories,(d,y)=>(n(),h("li",{key:y,class:s(e.$style.item),"data-test-id":`template-filter-${d.name.toLowerCase().replaceAll(" ","-")}`},[a(C,{"model-value":e.isSelected(d),"onUpdate:modelValue":k=>e.handleCheckboxChanged(k,d)},{default:c(()=>[m(p(d.name),1)]),_:2},1032,["model-value","onUpdate:modelValue"])],10,x))),128))],2)),e.sortedCategories.length>e.expandLimit&&e.collapsed&&!e.loading?(n(),h("div",{key:2,class:s(e.$style.button),"data-test-id":"expand-categories-button",onClick:t[1]||(t[1]=(...d)=>e.collapseAction&&e.collapseAction(...d))},[a(w,{size:"small",color:"primary"},{default:c(()=>[m(" + "+p(`${e.sortedCategories.length-e.expandLimit} more`),1)]),_:1})],2)):u("",!0)],2)}const te={$style:Y},oe=_(D,[["render",ee],["__cssModules",te]]),se=v({name:"TemplatesSearchView",components:{TemplatesInfoCarousel:A,TemplateFilters:oe,TemplateList:j,TemplatesView:N},setup(){const{callDebounced:e}=I();return{callDebounced:e,...q()}},data(){return{areCategoriesPrepopulated:!1,categories:[],loading:!0,loadingCategories:!0,loadingCollections:!0,loadingWorkflows:!0,search:"",searchEventToTrack:null,errorLoadingWorkflows:!1,creatorHubUrl:B}},computed:{...S(H,$,z,F,R),totalWorkflows(){return this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject("name"))},workflows(){return this.templatesStore.getSearchedWorkflows(this.createQueryObject("name"))??[]},collections(){return this.templatesStore.getSearchedCollections(this.createQueryObject("id"))??[]},endOfSearchMessage(){return this.loadingWorkflows?null:!this.loadingCollections&&this.workflows.length===0&&this.collections.length===0?!this.settingsStore.isTemplatesEndpointReachable&&this.errorLoadingWorkflows?this.$locale.baseText("templates.connectionWarning"):this.$locale.baseText("templates.noSearchResults"):null},nothingFound(){return!this.loadingWorkflows&&!this.loadingCollections&&this.workflows.length===0&&this.collections.length===0}},watch:{workflows(e){e.length===0&&this.scrollTo(0)}},async mounted(){Q("n8n - Templates"),await this.loadCategories(),this.loadWorkflowsAndCollections(!0),this.usersStore.showPersonalizationSurvey(),this.restoreSearchFromRoute(),setTimeout(()=>{this.$route.meta&&this.$route.meta.scrollOffset>0&&this.scrollTo(this.$route.meta.scrollOffset,"auto")},100)},methods:{createQueryObject(e){return{categories:this.categories.map(t=>e==="name"?t.name:String(t.id)),search:this.search}},restoreSearchFromRoute(){let e=!1;if(this.$route.query.search&&typeof this.$route.query.search=="string"&&(this.search=this.$route.query.search,e=!0),typeof this.$route.query.categories=="string"&&this.$route.query.categories.length){const t=this.$route.query.categories.split(",");this.categories=this.templatesStore.allCategories.filter(o=>t.includes(o.id.toString())),e=!0}e&&(this.updateSearch(),this.trackCategories(),this.areCategoriesPrepopulated=!0)},onOpenCollection({event:e,id:t}){this.navigateTo(e,T.COLLECTION,t)},onOpenTemplate({event:e,id:t}){this.navigateTo(e,T.TEMPLATE,t)},navigateTo(e,t,o){if(e.metaKey||e.ctrlKey){const r=this.$router.resolve({name:t,params:{id:o}});window.open(r.href,"_blank");return}else this.$router.push({name:t,params:{id:o}})},updateSearch(){this.updateQueryParam(this.search,this.categories.map(e=>e.id).join(",")),this.loadWorkflowsAndCollections(!1)},updateSearchTracking(e,t){e&&(this.searchEventToTrack&&this.searchEventToTrack.search_string.length>e.length||(this.searchEventToTrack={search_string:e,workflow_results_count:this.workflows.length,collection_results_count:this.collections.length,categories_applied:t.map(o=>this.templatesStore.getCategoryById(o.toString())),wf_template_repo_session_id:this.templatesStore.currentSessionId}))},trackSearch(){this.searchEventToTrack&&(this.$telemetry.track("User searched workflow templates",this.searchEventToTrack),this.searchEventToTrack=null)},onSearchInput(e){this.loadingWorkflows=!0,this.loadingCollections=!0,this.search=e,this.callDebounced(this.updateSearch,{debounceTime:500,trailing:!0}),e.length===0&&this.trackSearch()},onCategorySelected(e){this.categories=this.categories.concat(e),this.updateSearch(),this.trackCategories()},onCategoryUnselected(e){this.categories=this.categories.filter(t=>t.id!==e.id),this.updateSearch(),this.trackCategories()},onCategoriesCleared(){this.categories=[],this.updateSearch()},trackCategories(){this.categories.length&&this.$telemetry.track("User changed template filters",{search_string:this.search,categories_applied:this.categories,wf_template_repo_session_id:this.templatesStore.currentSessionId})},updateQueryParam(e,t){const o=Object.assign({},this.$route.query);t.length?o.categories=t:delete o.categories,e.length?o.search=e:delete o.search,this.$router.replace({query:o})},async onLoadMore(){if(!(this.workflows.length>=this.totalWorkflows))try{this.loadingWorkflows=!0,await this.templatesStore.getMoreWorkflows({categories:this.categories.map(e=>e.name),search:this.search})}catch{this.showMessage({title:"Error",message:"Could not load more workflows",type:"error"})}finally{this.loadingWorkflows=!1}},async loadCategories(){try{await this.templatesStore.getCategories()}catch{}this.loadingCategories=!1},async loadCollections(){try{this.loadingCollections=!0,await this.templatesStore.getCollections({categories:this.categories.map(e=>String(e.id)),search:this.search})}catch{}this.loadingCollections=!1},async loadWorkflows(){try{this.loadingWorkflows=!0,await this.templatesStore.getWorkflows({search:this.search,categories:this.categories.map(e=>e.name)}),this.errorLoadingWorkflows=!1}catch{this.errorLoadingWorkflows=!0}this.loadingWorkflows=!1},async loadWorkflowsAndCollections(e){const t=this.search,o=[...this.categories];await Promise.all([this.loadWorkflows(),this.loadCollections()]),e||this.updateSearchTracking(t,o.map(r=>r.id))},scrollTo(e,t="smooth"){setTimeout(()=>{const o=document.getElementById("content");o&&o.scrollTo({top:e,behavior:t})},0)}},beforeRouteLeave(e,t,o){var g;const r=document.getElementById("content");r&&(g=this.$route.meta)!=null&&g.setScrollPosition&&typeof this.$route.meta.setScrollPosition=="function"&&this.$route.meta.setScrollPosition(r.scrollTop),this.trackSearch(),o()}}),ae="_wrapper_p3frq_5",re="_contentWrapper_p3frq_10",le="_filters_p3frq_20",ie="_search_p3frq_26",ne="_header_p3frq_38",ce={wrapper:ae,contentWrapper:re,filters:le,search:ie,header:ne},de=["textContent"],he=["innerHTML"];function pe(e,t,o,r,g,b){const f=l("n8n-heading"),C=l("n8n-button"),w=l("TemplateFilters"),d=l("font-awesome-icon"),y=l("n8n-input"),k=l("TemplatesInfoCarousel"),W=l("TemplateList"),L=l("n8n-text"),O=l("TemplatesView");return n(),P(O,null,{header:c(()=>[i("div",{class:s(e.$style.wrapper)},[i("div",{class:s(e.$style.title)},[a(f,{tag:"h1",size:"2xlarge"},{default:c(()=>[m(p(e.$locale.baseText("templates.heading")),1)]),_:1})],2),i("div",{class:s(e.$style.button)},[a(C,{size:"large",type:"secondary",element:"a",href:e.creatorHubUrl,label:e.$locale.baseText("templates.shareWorkflow"),target:"_blank"},null,8,["href","label"])],2)],2)]),content:c(()=>[i("div",{class:s(e.$style.contentWrapper)},[i("div",{class:s(e.$style.filters)},[a(w,{categories:e.templatesStore.allCategories,"sort-on-populate":e.areCategoriesPrepopulated,selected:e.categories,loading:e.loadingCategories,onClear:e.onCategoryUnselected,onClearAll:e.onCategoriesCleared,onSelect:e.onCategorySelected},null,8,["categories","sort-on-populate","selected","loading","onClear","onClearAll","onSelect"])],2),i("div",{class:s(e.$style.search)},[a(y,{"model-value":e.search,placeholder:e.$locale.baseText("templates.searchPlaceholder"),clearable:"","data-test-id":"template-search-input","onUpdate:modelValue":e.onSearchInput,onBlur:e.trackSearch},{prefix:c(()=>[a(d,{icon:"search"})]),_:1},8,["model-value","placeholder","onUpdate:modelValue","onBlur"]),U(i("div",{class:s(e.$style.carouselContainer)},[i("div",{class:s(e.$style.header)},[a(f,{bold:!0,size:"medium",color:"text-light"},{default:c(()=>[m(p(e.$locale.baseText("templates.collections"))+" ",1),e.loadingCollections?u("",!0):(n(),h("span",{key:0,"data-test-id":"collection-count-label",textContent:p(`(${e.collections.length})`)},null,8,de))]),_:1})],2),a(k,{collections:e.collections,loading:e.loadingCollections,onOpenCollection:e.onOpenCollection},null,8,["collections","loading","onOpenCollection"])],2),[[V,e.collections.length||e.loadingCollections]]),a(W,{"infinite-scroll-enabled":!0,loading:e.loadingWorkflows,workflows:e.workflows,"total-count":e.totalWorkflows,onLoadMore:e.onLoadMore,onOpenTemplate:e.onOpenTemplate},null,8,["loading","workflows","total-count","onLoadMore","onOpenTemplate"]),e.endOfSearchMessage?(n(),h("div",{key:0,class:s(e.$style.endText)},[a(L,{size:"medium",color:"text-base"},{default:c(()=>[i("span",{innerHTML:e.endOfSearchMessage},null,8,he)]),_:1})],2)):u("",!0)],2)],2)]),_:1})}const ue={$style:ce},Ke=_(se,[["render",pe],["__cssModules",ue]]);export{Ke as default};
-//# sourceMappingURL=TemplatesSearchView-v3YJ9cpx.js.map
+import{m as S}from"./pinia-jQLgEt_L.js";import{T as A}from"./TemplatesInfoCarousel-LmSrKkcm.js";import{h as $}from"./index-36CdMZUz.js";import{G as v,ag as l,l as n,m as h,p as i,I as s,R as p,T as a,Q as u,O as c,S as m,F as E,a7 as M,M as P,V as U,U as V}from"./vendor-e5jTRqqt.js";import{_,aA as I,e as q,fR as B,aX as R,f as F,u as z,l as H,fL as Q,V as T}from"./n8n-oSulVm5C.js";import{T as j}from"./TemplateList-3Sn3bOND.js";import{T as N}from"./TemplatesView-WmzjgsYe.js";import"./NodeList-SQExkC1I.js";import"./vue-agile-2Hmrznis.js";import"./lodash-es-JdX4GWLn.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const D=v({name:"TemplateFilters",props:{categories:{type:Array,default:()=>[]},sortOnPopulate:{type:Boolean,default:!1},expandLimit:{type:Number,default:12},loading:{type:Boolean},selected:{type:Array,default:()=>[]}},emits:["clearAll","select","clear"],data(){return{collapsed:!0,sortedCategories:[]}},computed:{...S($),allSelected(){return this.selected.length===0}},watch:{sortOnPopulate:{handler(e){e&&this.sortCategories()},immediate:!0},categories:{handler(e){e.length>0&&this.sortCategories()},immediate:!0}},methods:{sortCategories(){if(!this.sortOnPopulate)this.sortedCategories=this.categories;else{const e=this.selected||[],t=this.categories.filter(r=>e.includes(r)),o=this.categories.filter(r=>!e.includes(r));this.sortedCategories=t.concat(o)}},collapseAction(){this.collapsed=!1},handleCheckboxChanged(e,t){this.$emit(e?"select":"clear",t)},isSelected(e){return this.selected.includes(e)},resetCategories(){this.$emit("clearAll")}}}),K="_title_7aevl_5",G="_categories_7aevl_10",X="_item_7aevl_15",J="_button_7aevl_22",Y={title:K,categories:G,item:X,button:J},Z=["textContent"],x=["data-test-id"];function ee(e,t,o,r,g,b){const f=l("n8n-loading"),C=l("el-checkbox"),w=l("n8n-text");return n(),h("div",{class:s([e.$style.filters,"template-filters"]),"data-test-id":"templates-filter-container"},[i("div",{class:s(e.$style.title),textContent:p(e.$locale.baseText("templates.categoriesHeading"))},null,10,Z),e.loading?(n(),h("div",{key:0,class:s(e.$style.list)},[a(f,{loading:e.loading,rows:e.expandLimit},null,8,["loading","rows"])],2)):u("",!0),e.loading?u("",!0):(n(),h("ul",{key:1,class:s(e.$style.categories)},[i("li",{class:s(e.$style.item),"data-test-id":"template-filter-all-categories"},[a(C,{"model-value":e.allSelected,"onUpdate:modelValue":t[0]||(t[0]=()=>e.resetCategories())},{default:c(()=>[m(p(e.$locale.baseText("templates.allCategories")),1)]),_:1},8,["model-value"])],2),(n(!0),h(E,null,M(e.collapsed?e.sortedCategories.slice(0,e.expandLimit):e.sortedCategories,(d,y)=>(n(),h("li",{key:y,class:s(e.$style.item),"data-test-id":`template-filter-${d.name.toLowerCase().replaceAll(" ","-")}`},[a(C,{"model-value":e.isSelected(d),"onUpdate:modelValue":k=>e.handleCheckboxChanged(k,d)},{default:c(()=>[m(p(d.name),1)]),_:2},1032,["model-value","onUpdate:modelValue"])],10,x))),128))],2)),e.sortedCategories.length>e.expandLimit&&e.collapsed&&!e.loading?(n(),h("div",{key:2,class:s(e.$style.button),"data-test-id":"expand-categories-button",onClick:t[1]||(t[1]=(...d)=>e.collapseAction&&e.collapseAction(...d))},[a(w,{size:"small",color:"primary"},{default:c(()=>[m(" + "+p(`${e.sortedCategories.length-e.expandLimit} more`),1)]),_:1})],2)):u("",!0)],2)}const te={$style:Y},oe=_(D,[["render",ee],["__cssModules",te]]),se=v({name:"TemplatesSearchView",components:{TemplatesInfoCarousel:A,TemplateFilters:oe,TemplateList:j,TemplatesView:N},setup(){const{callDebounced:e}=I();return{callDebounced:e,...q()}},data(){return{areCategoriesPrepopulated:!1,categories:[],loading:!0,loadingCategories:!0,loadingCollections:!0,loadingWorkflows:!0,search:"",searchEventToTrack:null,errorLoadingWorkflows:!1,creatorHubUrl:B}},computed:{...S(H,$,z,F,R),totalWorkflows(){return this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject("name"))},workflows(){return this.templatesStore.getSearchedWorkflows(this.createQueryObject("name"))??[]},collections(){return this.templatesStore.getSearchedCollections(this.createQueryObject("id"))??[]},endOfSearchMessage(){return this.loadingWorkflows?null:!this.loadingCollections&&this.workflows.length===0&&this.collections.length===0?!this.settingsStore.isTemplatesEndpointReachable&&this.errorLoadingWorkflows?this.$locale.baseText("templates.connectionWarning"):this.$locale.baseText("templates.noSearchResults"):null},nothingFound(){return!this.loadingWorkflows&&!this.loadingCollections&&this.workflows.length===0&&this.collections.length===0}},watch:{workflows(e){e.length===0&&this.scrollTo(0)}},async mounted(){Q("n8n - Templates"),await this.loadCategories(),this.loadWorkflowsAndCollections(!0),this.usersStore.showPersonalizationSurvey(),this.restoreSearchFromRoute(),setTimeout(()=>{this.$route.meta&&this.$route.meta.scrollOffset>0&&this.scrollTo(this.$route.meta.scrollOffset,"auto")},100)},methods:{createQueryObject(e){return{categories:this.categories.map(t=>e==="name"?t.name:String(t.id)),search:this.search}},restoreSearchFromRoute(){let e=!1;if(this.$route.query.search&&typeof this.$route.query.search=="string"&&(this.search=this.$route.query.search,e=!0),typeof this.$route.query.categories=="string"&&this.$route.query.categories.length){const t=this.$route.query.categories.split(",");this.categories=this.templatesStore.allCategories.filter(o=>t.includes(o.id.toString())),e=!0}e&&(this.updateSearch(),this.trackCategories(),this.areCategoriesPrepopulated=!0)},onOpenCollection({event:e,id:t}){this.navigateTo(e,T.COLLECTION,t)},onOpenTemplate({event:e,id:t}){this.navigateTo(e,T.TEMPLATE,t)},navigateTo(e,t,o){if(e.metaKey||e.ctrlKey){const r=this.$router.resolve({name:t,params:{id:o}});window.open(r.href,"_blank");return}else this.$router.push({name:t,params:{id:o}})},updateSearch(){this.updateQueryParam(this.search,this.categories.map(e=>e.id).join(",")),this.loadWorkflowsAndCollections(!1)},updateSearchTracking(e,t){e&&(this.searchEventToTrack&&this.searchEventToTrack.search_string.length>e.length||(this.searchEventToTrack={search_string:e,workflow_results_count:this.workflows.length,collection_results_count:this.collections.length,categories_applied:t.map(o=>this.templatesStore.getCategoryById(o.toString())),wf_template_repo_session_id:this.templatesStore.currentSessionId}))},trackSearch(){this.searchEventToTrack&&(this.$telemetry.track("User searched workflow templates",this.searchEventToTrack),this.searchEventToTrack=null)},onSearchInput(e){this.loadingWorkflows=!0,this.loadingCollections=!0,this.search=e,this.callDebounced(this.updateSearch,{debounceTime:500,trailing:!0}),e.length===0&&this.trackSearch()},onCategorySelected(e){this.categories=this.categories.concat(e),this.updateSearch(),this.trackCategories()},onCategoryUnselected(e){this.categories=this.categories.filter(t=>t.id!==e.id),this.updateSearch(),this.trackCategories()},onCategoriesCleared(){this.categories=[],this.updateSearch()},trackCategories(){this.categories.length&&this.$telemetry.track("User changed template filters",{search_string:this.search,categories_applied:this.categories,wf_template_repo_session_id:this.templatesStore.currentSessionId})},updateQueryParam(e,t){const o=Object.assign({},this.$route.query);t.length?o.categories=t:delete o.categories,e.length?o.search=e:delete o.search,this.$router.replace({query:o})},async onLoadMore(){if(!(this.workflows.length>=this.totalWorkflows))try{this.loadingWorkflows=!0,await this.templatesStore.getMoreWorkflows({categories:this.categories.map(e=>e.name),search:this.search})}catch{this.showMessage({title:"Error",message:"Could not load more workflows",type:"error"})}finally{this.loadingWorkflows=!1}},async loadCategories(){try{await this.templatesStore.getCategories()}catch{}this.loadingCategories=!1},async loadCollections(){try{this.loadingCollections=!0,await this.templatesStore.getCollections({categories:this.categories.map(e=>String(e.id)),search:this.search})}catch{}this.loadingCollections=!1},async loadWorkflows(){try{this.loadingWorkflows=!0,await this.templatesStore.getWorkflows({search:this.search,categories:this.categories.map(e=>e.name)}),this.errorLoadingWorkflows=!1}catch{this.errorLoadingWorkflows=!0}this.loadingWorkflows=!1},async loadWorkflowsAndCollections(e){const t=this.search,o=[...this.categories];await Promise.all([this.loadWorkflows(),this.loadCollections()]),e||this.updateSearchTracking(t,o.map(r=>r.id))},scrollTo(e,t="smooth"){setTimeout(()=>{const o=document.getElementById("content");o&&o.scrollTo({top:e,behavior:t})},0)}},beforeRouteLeave(e,t,o){var g;const r=document.getElementById("content");r&&(g=this.$route.meta)!=null&&g.setScrollPosition&&typeof this.$route.meta.setScrollPosition=="function"&&this.$route.meta.setScrollPosition(r.scrollTop),this.trackSearch(),o()}}),ae="_wrapper_p3frq_5",re="_contentWrapper_p3frq_10",le="_filters_p3frq_20",ie="_search_p3frq_26",ne="_header_p3frq_38",ce={wrapper:ae,contentWrapper:re,filters:le,search:ie,header:ne},de=["textContent"],he=["innerHTML"];function pe(e,t,o,r,g,b){const f=l("n8n-heading"),C=l("n8n-button"),w=l("TemplateFilters"),d=l("font-awesome-icon"),y=l("n8n-input"),k=l("TemplatesInfoCarousel"),W=l("TemplateList"),L=l("n8n-text"),O=l("TemplatesView");return n(),P(O,null,{header:c(()=>[i("div",{class:s(e.$style.wrapper)},[i("div",{class:s(e.$style.title)},[a(f,{tag:"h1",size:"2xlarge"},{default:c(()=>[m(p(e.$locale.baseText("templates.heading")),1)]),_:1})],2),i("div",{class:s(e.$style.button)},[a(C,{size:"large",type:"secondary",element:"a",href:e.creatorHubUrl,label:e.$locale.baseText("templates.shareWorkflow"),target:"_blank"},null,8,["href","label"])],2)],2)]),content:c(()=>[i("div",{class:s(e.$style.contentWrapper)},[i("div",{class:s(e.$style.filters)},[a(w,{categories:e.templatesStore.allCategories,"sort-on-populate":e.areCategoriesPrepopulated,selected:e.categories,loading:e.loadingCategories,onClear:e.onCategoryUnselected,onClearAll:e.onCategoriesCleared,onSelect:e.onCategorySelected},null,8,["categories","sort-on-populate","selected","loading","onClear","onClearAll","onSelect"])],2),i("div",{class:s(e.$style.search)},[a(y,{"model-value":e.search,placeholder:e.$locale.baseText("templates.searchPlaceholder"),clearable:"","data-test-id":"template-search-input","onUpdate:modelValue":e.onSearchInput,onBlur:e.trackSearch},{prefix:c(()=>[a(d,{icon:"search"})]),_:1},8,["model-value","placeholder","onUpdate:modelValue","onBlur"]),U(i("div",{class:s(e.$style.carouselContainer)},[i("div",{class:s(e.$style.header)},[a(f,{bold:!0,size:"medium",color:"text-light"},{default:c(()=>[m(p(e.$locale.baseText("templates.collections"))+" ",1),e.loadingCollections?u("",!0):(n(),h("span",{key:0,"data-test-id":"collection-count-label",textContent:p(`(${e.collections.length})`)},null,8,de))]),_:1})],2),a(k,{collections:e.collections,loading:e.loadingCollections,onOpenCollection:e.onOpenCollection},null,8,["collections","loading","onOpenCollection"])],2),[[V,e.collections.length||e.loadingCollections]]),a(W,{"infinite-scroll-enabled":!0,loading:e.loadingWorkflows,workflows:e.workflows,"total-count":e.totalWorkflows,onLoadMore:e.onLoadMore,onOpenTemplate:e.onOpenTemplate},null,8,["loading","workflows","total-count","onLoadMore","onOpenTemplate"]),e.endOfSearchMessage?(n(),h("div",{key:0,class:s(e.$style.endText)},[a(L,{size:"medium",color:"text-base"},{default:c(()=>[i("span",{innerHTML:e.endOfSearchMessage},null,8,he)]),_:1})],2)):u("",!0)],2)],2)]),_:1})}const ue={$style:ce},Ke=_(se,[["render",pe],["__cssModules",ue]]);export{Ke as default};
+//# sourceMappingURL=TemplatesSearchView-WIbBh-fS.js.map

package/dist/assets/{TemplatesSearchView-v3YJ9cpx.js.map → TemplatesSearchView-WIbBh-fS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TemplatesSearchView-v3YJ9cpx.js","sources":["../../src/components/TemplateFilters.vue","../../src/views/TemplatesSearchView.vue"],"sourcesContent":["<template>\n\t<div :class=\"$style.filters\" class=\"template-filters\" data-test-id=\"templates-filter-container\">\n\t\t<div :class=\"$style.title\" v-text=\"$locale.baseText('templates.categoriesHeading')\" />\n\t\t<div v-if=\"loading\" :class=\"$style.list\">\n\t\t\t<n8n-loading :loading=\"loading\" :rows=\"expandLimit\" />\n\t\t</div>\n\t\t<ul v-if=\"!loading\" :class=\"$style.categories\">\n\t\t\t<li :class=\"$style.item\" data-test-id=\"template-filter-all-categories\">\n\t\t\t\t<el-checkbox :model-value=\"allSelected\" @update:model-value=\"() => resetCategories()\">\n\t\t\t\t\t{{ $locale.baseText('templates.allCategories') }}\n\t\t\t\t</el-checkbox>\n\t\t\t</li>\n\t\t\t<li\n\t\t\t\tv-for=\"(category, index) in collapsed\n\t\t\t\t\t? sortedCategories.slice(0, expandLimit)\n\t\t\t\t\t: sortedCategories\"\n\t\t\t\t:key=\"index\"\n\t\t\t\t:class=\"$style.item\"\n\t\t\t\t:data-test-id=\"`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`\"\n\t\t\t>\n\t\t\t\t<el-checkbox\n\t\t\t\t\t:model-value=\"isSelected(category)\"\n\t\t\t\t\t@update:model-value=\"(value: boolean) => handleCheckboxChanged(value, category)\"\n\t\t\t\t>\n\t\t\t\t\t{{ category.name }}\n\t\t\t\t</el-checkbox>\n\t\t\t</li>\n\t\t</ul>\n\t\t<div\n\t\t\tv-if=\"sortedCategories.length > expandLimit && collapsed && !loading\"\n\t\t\t:class=\"$style.button\"\n\t\t\tdata-test-id=\"expand-categories-button\"\n\t\t\t@click=\"collapseAction\"\n\t\t>\n\t\t\t<n8n-text size=\"small\" color=\"primary\">\n\t\t\t\t+ {{ `${sortedCategories.length - expandLimit} more` }}\n\t\t\t</n8n-text>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport type { ITemplatesCategory } from '@/Interface';\nimport type { PropType } from 'vue';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { mapStores } from 'pinia';\n\nexport default defineComponent({\n\tname: 'TemplateFilters',\n\tprops: {\n\t\tcategories: {\n\t\t\ttype: Array as PropType<ITemplatesCategory[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\t\tsortOnPopulate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\texpandLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 12,\n\t\t},\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tselected: {\n\t\t\ttype: Array as PropType<ITemplatesCategory[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\temits: ['clearAll', 'select', 'clear'],\n\tdata() {\n\t\treturn {\n\t\t\tcollapsed: true,\n\t\t\tsortedCategories: [] as ITemplatesCategory[],\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useTemplatesStore),\n\t\tallSelected(): boolean {\n\t\t\treturn this.selected.length === 0;\n\t\t},\n\t},\n\twatch: {\n\t\tsortOnPopulate: {\n\t\t\thandler(value: boolean) {\n\t\t\t\tif (value) {\n\t\t\t\t\tthis.sortCategories();\n\t\t\t\t}\n\t\t\t},\n\t\t\timmediate: true,\n\t\t},\n\t\tcategories: {\n\t\t\thandler(categories: ITemplatesCategory[]) {\n\t\t\t\tif (categories.length > 0) {\n\t\t\t\t\tthis.sortCategories();\n\t\t\t\t}\n\t\t\t},\n\t\t\timmediate: true,\n\t\t},\n\t},\n\tmethods: {\n\t\tsortCategories() {\n\t\t\tif (!this.sortOnPopulate) {\n\t\t\t\tthis.sortedCategories = this.categories;\n\t\t\t} else {\n\t\t\t\tconst selected = this.selected || [];\n\t\t\t\tconst selectedCategories = this.categories.filter((cat) => selected.includes(cat));\n\t\t\t\tconst notSelectedCategories = this.categories.filter((cat) => !selected.includes(cat));\n\t\t\t\tthis.sortedCategories = selectedCategories.concat(notSelectedCategories);\n\t\t\t}\n\t\t},\n\t\tcollapseAction() {\n\t\t\tthis.collapsed = false;\n\t\t},\n\t\thandleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {\n\t\t\tthis.$emit(value ? 'select' : 'clear', selectedCategory);\n\t\t},\n\t\tisSelected(category: ITemplatesCategory) {\n\t\t\treturn this.selected.includes(category);\n\t\t},\n\t\tresetCategories() {\n\t\t\tthis.$emit('clearAll');\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.title {\n\tfont-size: var(--font-size-2xs);\n\tcolor: var(--color-text-base);\n}\n\n.categories {\n\tpadding-top: var(--spacing-xs);\n\tlist-style-type: none;\n}\n\n.item {\n\tmargin-top: var(--spacing-xs);\n\n\t&:nth-child(1) {\n\t\tmargin-top: 0;\n\t}\n}\n\n.button {\n\tpadding-top: var(--spacing-2xs);\n\tcursor: pointer;\n}\n</style>\n\n<style lang=\"scss\">\n.template-filters {\n\t.el-checkbox {\n\t\tdisplay: flex;\n\t\twhite-space: unset;\n\t}\n\n\t.el-checkbox__label {\n\t\ttop: -2px;\n\t\tposition: relative;\n\t\tfont-size: var(--font-size-xs);\n\t\tline-height: var(--font-line-height-loose);\n\t\tcolor: var(--color-text-dark);\n\t\tpadding-left: var(--spacing-2xs);\n\t}\n}\n</style>\n","<template>\n\t<TemplatesView>\n\t\t<template #header>\n\t\t\t<div :class=\"$style.wrapper\">\n\t\t\t\t<div :class=\"$style.title\">\n\t\t\t\t\t<n8n-heading tag=\"h1\" size=\"2xlarge\">\n\t\t\t\t\t\t{{ $locale.baseText('templates.heading') }}\n\t\t\t\t\t</n8n-heading>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.button\">\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\telement=\"a\"\n\t\t\t\t\t\t:href=\"creatorHubUrl\"\n\t\t\t\t\t\t:label=\"$locale.baseText('templates.shareWorkflow')\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t\t<template #content>\n\t\t\t<div :class=\"$style.contentWrapper\">\n\t\t\t\t<div :class=\"$style.filters\">\n\t\t\t\t\t<TemplateFilters\n\t\t\t\t\t\t:categories=\"templatesStore.allCategories\"\n\t\t\t\t\t\t:sort-on-populate=\"areCategoriesPrepopulated\"\n\t\t\t\t\t\t:selected=\"categories\"\n\t\t\t\t\t\t:loading=\"loadingCategories\"\n\t\t\t\t\t\t@clear=\"onCategoryUnselected\"\n\t\t\t\t\t\t@clear-all=\"onCategoriesCleared\"\n\t\t\t\t\t\t@select=\"onCategorySelected\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.search\">\n\t\t\t\t\t<n8n-input\n\t\t\t\t\t\t:model-value=\"search\"\n\t\t\t\t\t\t:placeholder=\"$locale.baseText('templates.searchPlaceholder')\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tdata-test-id=\"template-search-input\"\n\t\t\t\t\t\t@update:model-value=\"onSearchInput\"\n\t\t\t\t\t\t@blur=\"trackSearch\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template #prefix>\n\t\t\t\t\t\t\t<font-awesome-icon icon=\"search\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</n8n-input>\n\t\t\t\t\t<div v-show=\"collections.length || loadingCollections\" :class=\"$style.carouselContainer\">\n\t\t\t\t\t\t<div :class=\"$style.header\">\n\t\t\t\t\t\t\t<n8n-heading :bold=\"true\" size=\"medium\" color=\"text-light\">\n\t\t\t\t\t\t\t\t{{ $locale.baseText('templates.collections') }}\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tv-if=\"!loadingCollections\"\n\t\t\t\t\t\t\t\t\tdata-test-id=\"collection-count-label\"\n\t\t\t\t\t\t\t\t\tv-text=\"`(${collections.length})`\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</n8n-heading>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<TemplatesInfoCarousel\n\t\t\t\t\t\t\t:collections=\"collections\"\n\t\t\t\t\t\t\t:loading=\"loadingCollections\"\n\t\t\t\t\t\t\t@open-collection=\"onOpenCollection\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<TemplateList\n\t\t\t\t\t\t:infinite-scroll-enabled=\"true\"\n\t\t\t\t\t\t:loading=\"loadingWorkflows\"\n\t\t\t\t\t\t:workflows=\"workflows\"\n\t\t\t\t\t\t:total-count=\"totalWorkflows\"\n\t\t\t\t\t\t@load-more=\"onLoadMore\"\n\t\t\t\t\t\t@open-template=\"onOpenTemplate\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div v-if=\"endOfSearchMessage\" :class=\"$style.endText\">\n\t\t\t\t\t\t<n8n-text size=\"medium\" color=\"text-base\">\n\t\t\t\t\t\t\t<span v-html=\"endOfSearchMessage\" />\n\t\t\t\t\t\t</n8n-text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</TemplatesView>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { mapStores } from 'pinia';\nimport TemplatesInfoCarousel from '@/components/TemplatesInfoCarousel.vue';\nimport TemplateFilters from '@/components/TemplateFilters.vue';\nimport TemplateList from '@/components/TemplateList.vue';\nimport TemplatesView from '@/views/TemplatesView.vue';\n\nimport type {\n\tITemplatesCollection,\n\tITemplatesWorkflow,\n\tITemplatesQuery,\n\tITemplatesCategory,\n} from '@/Interface';\nimport type { IDataObject } from 'n8n-workflow';\nimport { setPageTitle } from '@/utils/htmlUtils';\nimport { CREATOR_HUB_URL, VIEWS } from '@/constants';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { useUIStore } from '@/stores/ui.store';\nimport { useToast } from '@/composables/useToast';\nimport { usePostHog } from '@/stores/posthog.store';\nimport { useDebounce } from '@/composables/useDebounce';\n\ninterface ISearchEvent {\n\tsearch_string: string;\n\tworkflow_results_count: number;\n\tcollection_results_count: number;\n\tcategories_applied: ITemplatesCategory[];\n\twf_template_repo_session_id: string;\n}\n\nexport default defineComponent({\n\tname: 'TemplatesSearchView',\n\tcomponents: {\n\t\tTemplatesInfoCarousel,\n\t\tTemplateFilters,\n\t\tTemplateList,\n\t\tTemplatesView,\n\t},\n\tsetup() {\n\t\tconst { callDebounced } = useDebounce();\n\n\t\treturn {\n\t\t\tcallDebounced,\n\t\t\t...useToast(),\n\t\t};\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tareCategoriesPrepopulated: false,\n\t\t\tcategories: [] as ITemplatesCategory[],\n\t\t\tloading: true,\n\t\t\tloadingCategories: true,\n\t\t\tloadingCollections: true,\n\t\t\tloadingWorkflows: true,\n\t\t\tsearch: '',\n\t\t\tsearchEventToTrack: null as null | ISearchEvent,\n\t\t\terrorLoadingWorkflows: false,\n\t\t\tcreatorHubUrl: CREATOR_HUB_URL as string,\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore, usePostHog),\n\t\ttotalWorkflows(): number {\n\t\t\treturn this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject('name'));\n\t\t},\n\t\tworkflows(): ITemplatesWorkflow[] {\n\t\t\treturn this.templatesStore.getSearchedWorkflows(this.createQueryObject('name')) ?? [];\n\t\t},\n\t\tcollections(): ITemplatesCollection[] {\n\t\t\treturn this.templatesStore.getSearchedCollections(this.createQueryObject('id')) ?? [];\n\t\t},\n\t\tendOfSearchMessage(): string | null {\n\t\t\tif (this.loadingWorkflows) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tif (\n\t\t\t\t!this.loadingCollections &&\n\t\t\t\tthis.workflows.length === 0 &&\n\t\t\t\tthis.collections.length === 0\n\t\t\t) {\n\t\t\t\tif (!this.settingsStore.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {\n\t\t\t\t\treturn this.$locale.baseText('templates.connectionWarning');\n\t\t\t\t}\n\t\t\t\treturn this.$locale.baseText('templates.noSearchResults');\n\t\t\t}\n\n\t\t\treturn null;\n\t\t},\n\t\tnothingFound(): boolean {\n\t\t\treturn (\n\t\t\t\t!this.loadingWorkflows &&\n\t\t\t\t!this.loadingCollections &&\n\t\t\t\tthis.workflows.length === 0 &&\n\t\t\t\tthis.collections.length === 0\n\t\t\t);\n\t\t},\n\t},\n\twatch: {\n\t\tworkflows(newWorkflows) {\n\t\t\tif (newWorkflows.length === 0) {\n\t\t\t\tthis.scrollTo(0);\n\t\t\t}\n\t\t},\n\t},\n\tasync mounted() {\n\t\tsetPageTitle('n8n - Templates');\n\t\tawait this.loadCategories();\n\t\tvoid this.loadWorkflowsAndCollections(true);\n\t\tvoid this.usersStore.showPersonalizationSurvey();\n\n\t\tthis.restoreSearchFromRoute();\n\n\t\tsetTimeout(() => {\n\t\t\t// Check if there is scroll position saved in route and scroll to it\n\t\t\tif (this.$route.meta && this.$route.meta.scrollOffset > 0) {\n\t\t\t\tthis.scrollTo(this.$route.meta.scrollOffset, 'auto');\n\t\t\t}\n\t\t}, 100);\n\t},\n\tmethods: {\n\t\tcreateQueryObject(categoryId: 'name' | 'id'): ITemplatesQuery {\n\t\t\t// We are using category names for template search and ids for collection search\n\t\t\treturn {\n\t\t\t\tcategories: this.categories.map((category) =>\n\t\t\t\t\tcategoryId === 'name' ? category.name : String(category.id),\n\t\t\t\t),\n\t\t\t\tsearch: this.search,\n\t\t\t};\n\t\t},\n\t\trestoreSearchFromRoute() {\n\t\t\tlet updateSearch = false;\n\t\t\tif (this.$route.query.search && typeof this.$route.query.search === 'string') {\n\t\t\t\tthis.search = this.$route.query.search;\n\t\t\t\tupdateSearch = true;\n\t\t\t}\n\t\t\tif (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {\n\t\t\t\tconst categoriesFromURL = this.$route.query.categories.split(',');\n\t\t\t\tthis.categories = this.templatesStore.allCategories.filter((category) =>\n\t\t\t\t\tcategoriesFromURL.includes(category.id.toString()),\n\t\t\t\t);\n\t\t\t\tupdateSearch = true;\n\t\t\t}\n\t\t\tif (updateSearch) {\n\t\t\t\tthis.updateSearch();\n\t\t\t\tthis.trackCategories();\n\t\t\t\tthis.areCategoriesPrepopulated = true;\n\t\t\t}\n\t\t},\n\t\tonOpenCollection({ event, id }: { event: MouseEvent; id: string }) {\n\t\t\tthis.navigateTo(event, VIEWS.COLLECTION, id);\n\t\t},\n\t\tonOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {\n\t\t\tthis.navigateTo(event, VIEWS.TEMPLATE, id);\n\t\t},\n\t\tnavigateTo(e: MouseEvent, page: string, id: string) {\n\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\tconst route = this.$router.resolve({ name: page, params: { id } });\n\t\t\t\twindow.open(route.href, '_blank');\n\t\t\t\treturn;\n\t\t\t} else {\n\t\t\t\tvoid this.$router.push({ name: page, params: { id } });\n\t\t\t}\n\t\t},\n\t\tupdateSearch() {\n\t\t\tthis.updateQueryParam(this.search, this.categories.map((category) => category.id).join(','));\n\t\t\tvoid this.loadWorkflowsAndCollections(false);\n\t\t},\n\t\tupdateSearchTracking(search: string, categories: number[]) {\n\t\t\tif (!search) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (this.searchEventToTrack && this.searchEventToTrack.search_string.length > search.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.searchEventToTrack = {\n\t\t\t\tsearch_string: search,\n\t\t\t\tworkflow_results_count: this.workflows.length,\n\t\t\t\tcollection_results_count: this.collections.length,\n\t\t\t\tcategories_applied: categories.map((categoryId) =>\n\t\t\t\t\tthis.templatesStore.getCategoryById(categoryId.toString()),\n\t\t\t\t) as ITemplatesCategory[],\n\t\t\t\twf_template_repo_session_id: this.templatesStore.currentSessionId,\n\t\t\t};\n\t\t},\n\t\ttrackSearch() {\n\t\t\tif (this.searchEventToTrack) {\n\t\t\t\tthis.$telemetry.track(\n\t\t\t\t\t'User searched workflow templates',\n\t\t\t\t\tthis.searchEventToTrack as unknown as IDataObject,\n\t\t\t\t);\n\t\t\t\tthis.searchEventToTrack = null;\n\t\t\t}\n\t\t},\n\t\tonSearchInput(search: string) {\n\t\t\tthis.loadingWorkflows = true;\n\t\t\tthis.loadingCollections = true;\n\t\t\tthis.search = search;\n\t\t\tvoid this.callDebounced(this.updateSearch, {\n\t\t\t\tdebounceTime: 500,\n\t\t\t\ttrailing: true,\n\t\t\t});\n\n\t\t\tif (search.length === 0) {\n\t\t\t\tthis.trackSearch();\n\t\t\t}\n\t\t},\n\t\tonCategorySelected(selected: ITemplatesCategory) {\n\t\t\tthis.categories = this.categories.concat(selected);\n\t\t\tthis.updateSearch();\n\t\t\tthis.trackCategories();\n\t\t},\n\t\tonCategoryUnselected(selected: ITemplatesCategory) {\n\t\t\tthis.categories = this.categories.filter((category) => category.id !== selected.id);\n\t\t\tthis.updateSearch();\n\t\t\tthis.trackCategories();\n\t\t},\n\t\tonCategoriesCleared() {\n\t\t\tthis.categories = [];\n\t\t\tthis.updateSearch();\n\t\t},\n\t\ttrackCategories() {\n\t\t\tif (this.categories.length) {\n\t\t\t\tthis.$telemetry.track('User changed template filters', {\n\t\t\t\t\tsearch_string: this.search,\n\t\t\t\t\tcategories_applied: this.categories,\n\t\t\t\t\twf_template_repo_session_id: this.templatesStore.currentSessionId,\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\tupdateQueryParam(search: string, category: string) {\n\t\t\tconst query = Object.assign({}, this.$route.query);\n\n\t\t\tif (category.length) {\n\t\t\t\tquery.categories = category;\n\t\t\t} else {\n\t\t\t\tdelete query.categories;\n\t\t\t}\n\n\t\t\tif (search.length) {\n\t\t\t\tquery.search = search;\n\t\t\t} else {\n\t\t\t\tdelete query.search;\n\t\t\t}\n\n\t\t\tvoid this.$router.replace({ query });\n\t\t},\n\t\tasync onLoadMore() {\n\t\t\tif (this.workflows.length >= this.totalWorkflows) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tthis.loadingWorkflows = true;\n\t\t\t\tawait this.templatesStore.getMoreWorkflows({\n\t\t\t\t\tcategories: this.categories.map((category) => category.name),\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tthis.showMessage({\n\t\t\t\t\ttitle: 'Error',\n\t\t\t\t\tmessage: 'Could not load more workflows',\n\t\t\t\t\ttype: 'error',\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tthis.loadingWorkflows = false;\n\t\t\t}\n\t\t},\n\t\tasync loadCategories() {\n\t\t\ttry {\n\t\t\t\tawait this.templatesStore.getCategories();\n\t\t\t} catch (e) {}\n\t\t\tthis.loadingCategories = false;\n\t\t},\n\t\tasync loadCollections() {\n\t\t\ttry {\n\t\t\t\tthis.loadingCollections = true;\n\t\t\t\tawait this.templatesStore.getCollections({\n\t\t\t\t\tcategories: this.categories.map((category) => String(category.id)),\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t});\n\t\t\t} catch (e) {}\n\n\t\t\tthis.loadingCollections = false;\n\t\t},\n\t\tasync loadWorkflows() {\n\t\t\ttry {\n\t\t\t\tthis.loadingWorkflows = true;\n\t\t\t\tawait this.templatesStore.getWorkflows({\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t\tcategories: this.categories.map((category) => category.name),\n\t\t\t\t});\n\t\t\t\tthis.errorLoadingWorkflows = false;\n\t\t\t} catch (e) {\n\t\t\t\tthis.errorLoadingWorkflows = true;\n\t\t\t}\n\n\t\t\tthis.loadingWorkflows = false;\n\t\t},\n\t\tasync loadWorkflowsAndCollections(initialLoad: boolean) {\n\t\t\tconst search = this.search;\n\t\t\tconst categories = [...this.categories];\n\t\t\tawait Promise.all([this.loadWorkflows(), this.loadCollections()]);\n\t\t\tif (!initialLoad) {\n\t\t\t\tthis.updateSearchTracking(\n\t\t\t\t\tsearch,\n\t\t\t\t\tcategories.map((category) => category.id),\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\tscrollTo(position: number, behavior: ScrollBehavior = 'smooth') {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst contentArea = document.getElementById('content');\n\t\t\t\tif (contentArea) {\n\t\t\t\t\tcontentArea.scrollTo({\n\t\t\t\t\t\ttop: position,\n\t\t\t\t\t\tbehavior,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}, 0);\n\t\t},\n\t},\n\tbeforeRouteLeave(to, from, next) {\n\t\tconst contentArea = document.getElementById('content');\n\t\tif (contentArea) {\n\t\t\t// When leaving this page, store current scroll position in route data\n\t\t\tif (\n\t\t\t\tthis.$route.meta?.setScrollPosition &&\n\t\t\t\ttypeof this.$route.meta.setScrollPosition === 'function'\n\t\t\t) {\n\t\t\t\tthis.$route.meta.setScrollPosition(contentArea.scrollTop);\n\t\t\t}\n\t\t}\n\n\t\tthis.trackSearch();\n\t\tnext();\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.wrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n.contentWrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tflex-direction: column;\n\t}\n}\n\n.filters {\n\twidth: 200px;\n\tmargin-bottom: var(--spacing-xl);\n\tmargin-right: var(--spacing-2xl);\n}\n\n.search {\n\twidth: 100%;\n\n\t> * {\n\t\tmargin-bottom: var(--spacing-l);\n\t}\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tpadding-left: 0;\n\t}\n}\n\n.header {\n\tmargin-bottom: var(--spacing-2xs);\n}\n</style>\n"],"names":["_sfc_main$1","defineComponent","mapStores","useTemplatesStore","value","categories","selected","selectedCategories","cat","notSelectedCategories","selectedCategory","category","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_1","_component_n8n_loading","_createCommentVNode","_component_el_checkbox","_cache","_Fragment","_renderList","index","args","_component_n8n_text","_sfc_main","TemplatesInfoCarousel","TemplateFilters","TemplateList","TemplatesView","callDebounced","useDebounce","useToast","CREATOR_HUB_URL","useSettingsStore","useUIStore","useUsersStore","usePostHog","newWorkflows","setPageTitle","categoryId","updateSearch","categoriesFromURL","event","id","VIEWS","page","route","search","query","initialLoad","position","behavior","contentArea","to","from","next","_a","_createBlock","_component_TemplatesView","_withCtx","_component_n8n_heading","_component_n8n_button","_component_TemplateFilters","_component_n8n_input","_withDirectives","_createTextVNode","_createVNode","_component_TemplatesInfoCarousel","_vShow","_component_TemplateList"],"mappings":"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"}
+{"version":3,"file":"TemplatesSearchView-WIbBh-fS.js","sources":["../../src/components/TemplateFilters.vue","../../src/views/TemplatesSearchView.vue"],"sourcesContent":["<template>\n\t<div :class=\"$style.filters\" class=\"template-filters\" data-test-id=\"templates-filter-container\">\n\t\t<div :class=\"$style.title\" v-text=\"$locale.baseText('templates.categoriesHeading')\" />\n\t\t<div v-if=\"loading\" :class=\"$style.list\">\n\t\t\t<n8n-loading :loading=\"loading\" :rows=\"expandLimit\" />\n\t\t</div>\n\t\t<ul v-if=\"!loading\" :class=\"$style.categories\">\n\t\t\t<li :class=\"$style.item\" data-test-id=\"template-filter-all-categories\">\n\t\t\t\t<el-checkbox :model-value=\"allSelected\" @update:model-value=\"() => resetCategories()\">\n\t\t\t\t\t{{ $locale.baseText('templates.allCategories') }}\n\t\t\t\t</el-checkbox>\n\t\t\t</li>\n\t\t\t<li\n\t\t\t\tv-for=\"(category, index) in collapsed\n\t\t\t\t\t? sortedCategories.slice(0, expandLimit)\n\t\t\t\t\t: sortedCategories\"\n\t\t\t\t:key=\"index\"\n\t\t\t\t:class=\"$style.item\"\n\t\t\t\t:data-test-id=\"`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`\"\n\t\t\t>\n\t\t\t\t<el-checkbox\n\t\t\t\t\t:model-value=\"isSelected(category)\"\n\t\t\t\t\t@update:model-value=\"(value: boolean) => handleCheckboxChanged(value, category)\"\n\t\t\t\t>\n\t\t\t\t\t{{ category.name }}\n\t\t\t\t</el-checkbox>\n\t\t\t</li>\n\t\t</ul>\n\t\t<div\n\t\t\tv-if=\"sortedCategories.length > expandLimit && collapsed && !loading\"\n\t\t\t:class=\"$style.button\"\n\t\t\tdata-test-id=\"expand-categories-button\"\n\t\t\t@click=\"collapseAction\"\n\t\t>\n\t\t\t<n8n-text size=\"small\" color=\"primary\">\n\t\t\t\t+ {{ `${sortedCategories.length - expandLimit} more` }}\n\t\t\t</n8n-text>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport type { ITemplatesCategory } from '@/Interface';\nimport type { PropType } from 'vue';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { mapStores } from 'pinia';\n\nexport default defineComponent({\n\tname: 'TemplateFilters',\n\tprops: {\n\t\tcategories: {\n\t\t\ttype: Array as PropType<ITemplatesCategory[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\t\tsortOnPopulate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\texpandLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 12,\n\t\t},\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tselected: {\n\t\t\ttype: Array as PropType<ITemplatesCategory[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\temits: ['clearAll', 'select', 'clear'],\n\tdata() {\n\t\treturn {\n\t\t\tcollapsed: true,\n\t\t\tsortedCategories: [] as ITemplatesCategory[],\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useTemplatesStore),\n\t\tallSelected(): boolean {\n\t\t\treturn this.selected.length === 0;\n\t\t},\n\t},\n\twatch: {\n\t\tsortOnPopulate: {\n\t\t\thandler(value: boolean) {\n\t\t\t\tif (value) {\n\t\t\t\t\tthis.sortCategories();\n\t\t\t\t}\n\t\t\t},\n\t\t\timmediate: true,\n\t\t},\n\t\tcategories: {\n\t\t\thandler(categories: ITemplatesCategory[]) {\n\t\t\t\tif (categories.length > 0) {\n\t\t\t\t\tthis.sortCategories();\n\t\t\t\t}\n\t\t\t},\n\t\t\timmediate: true,\n\t\t},\n\t},\n\tmethods: {\n\t\tsortCategories() {\n\t\t\tif (!this.sortOnPopulate) {\n\t\t\t\tthis.sortedCategories = this.categories;\n\t\t\t} else {\n\t\t\t\tconst selected = this.selected || [];\n\t\t\t\tconst selectedCategories = this.categories.filter((cat) => selected.includes(cat));\n\t\t\t\tconst notSelectedCategories = this.categories.filter((cat) => !selected.includes(cat));\n\t\t\t\tthis.sortedCategories = selectedCategories.concat(notSelectedCategories);\n\t\t\t}\n\t\t},\n\t\tcollapseAction() {\n\t\t\tthis.collapsed = false;\n\t\t},\n\t\thandleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {\n\t\t\tthis.$emit(value ? 'select' : 'clear', selectedCategory);\n\t\t},\n\t\tisSelected(category: ITemplatesCategory) {\n\t\t\treturn this.selected.includes(category);\n\t\t},\n\t\tresetCategories() {\n\t\t\tthis.$emit('clearAll');\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.title {\n\tfont-size: var(--font-size-2xs);\n\tcolor: var(--color-text-base);\n}\n\n.categories {\n\tpadding-top: var(--spacing-xs);\n\tlist-style-type: none;\n}\n\n.item {\n\tmargin-top: var(--spacing-xs);\n\n\t&:nth-child(1) {\n\t\tmargin-top: 0;\n\t}\n}\n\n.button {\n\tpadding-top: var(--spacing-2xs);\n\tcursor: pointer;\n}\n</style>\n\n<style lang=\"scss\">\n.template-filters {\n\t.el-checkbox {\n\t\tdisplay: flex;\n\t\twhite-space: unset;\n\t}\n\n\t.el-checkbox__label {\n\t\ttop: -2px;\n\t\tposition: relative;\n\t\tfont-size: var(--font-size-xs);\n\t\tline-height: var(--font-line-height-loose);\n\t\tcolor: var(--color-text-dark);\n\t\tpadding-left: var(--spacing-2xs);\n\t}\n}\n</style>\n","<template>\n\t<TemplatesView>\n\t\t<template #header>\n\t\t\t<div :class=\"$style.wrapper\">\n\t\t\t\t<div :class=\"$style.title\">\n\t\t\t\t\t<n8n-heading tag=\"h1\" size=\"2xlarge\">\n\t\t\t\t\t\t{{ $locale.baseText('templates.heading') }}\n\t\t\t\t\t</n8n-heading>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.button\">\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\telement=\"a\"\n\t\t\t\t\t\t:href=\"creatorHubUrl\"\n\t\t\t\t\t\t:label=\"$locale.baseText('templates.shareWorkflow')\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t\t<template #content>\n\t\t\t<div :class=\"$style.contentWrapper\">\n\t\t\t\t<div :class=\"$style.filters\">\n\t\t\t\t\t<TemplateFilters\n\t\t\t\t\t\t:categories=\"templatesStore.allCategories\"\n\t\t\t\t\t\t:sort-on-populate=\"areCategoriesPrepopulated\"\n\t\t\t\t\t\t:selected=\"categories\"\n\t\t\t\t\t\t:loading=\"loadingCategories\"\n\t\t\t\t\t\t@clear=\"onCategoryUnselected\"\n\t\t\t\t\t\t@clear-all=\"onCategoriesCleared\"\n\t\t\t\t\t\t@select=\"onCategorySelected\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.search\">\n\t\t\t\t\t<n8n-input\n\t\t\t\t\t\t:model-value=\"search\"\n\t\t\t\t\t\t:placeholder=\"$locale.baseText('templates.searchPlaceholder')\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tdata-test-id=\"template-search-input\"\n\t\t\t\t\t\t@update:model-value=\"onSearchInput\"\n\t\t\t\t\t\t@blur=\"trackSearch\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template #prefix>\n\t\t\t\t\t\t\t<font-awesome-icon icon=\"search\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</n8n-input>\n\t\t\t\t\t<div v-show=\"collections.length || loadingCollections\" :class=\"$style.carouselContainer\">\n\t\t\t\t\t\t<div :class=\"$style.header\">\n\t\t\t\t\t\t\t<n8n-heading :bold=\"true\" size=\"medium\" color=\"text-light\">\n\t\t\t\t\t\t\t\t{{ $locale.baseText('templates.collections') }}\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tv-if=\"!loadingCollections\"\n\t\t\t\t\t\t\t\t\tdata-test-id=\"collection-count-label\"\n\t\t\t\t\t\t\t\t\tv-text=\"`(${collections.length})`\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</n8n-heading>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<TemplatesInfoCarousel\n\t\t\t\t\t\t\t:collections=\"collections\"\n\t\t\t\t\t\t\t:loading=\"loadingCollections\"\n\t\t\t\t\t\t\t@open-collection=\"onOpenCollection\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<TemplateList\n\t\t\t\t\t\t:infinite-scroll-enabled=\"true\"\n\t\t\t\t\t\t:loading=\"loadingWorkflows\"\n\t\t\t\t\t\t:workflows=\"workflows\"\n\t\t\t\t\t\t:total-count=\"totalWorkflows\"\n\t\t\t\t\t\t@load-more=\"onLoadMore\"\n\t\t\t\t\t\t@open-template=\"onOpenTemplate\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div v-if=\"endOfSearchMessage\" :class=\"$style.endText\">\n\t\t\t\t\t\t<n8n-text size=\"medium\" color=\"text-base\">\n\t\t\t\t\t\t\t<span v-html=\"endOfSearchMessage\" />\n\t\t\t\t\t\t</n8n-text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</TemplatesView>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { mapStores } from 'pinia';\nimport TemplatesInfoCarousel from '@/components/TemplatesInfoCarousel.vue';\nimport TemplateFilters from '@/components/TemplateFilters.vue';\nimport TemplateList from '@/components/TemplateList.vue';\nimport TemplatesView from '@/views/TemplatesView.vue';\n\nimport type {\n\tITemplatesCollection,\n\tITemplatesWorkflow,\n\tITemplatesQuery,\n\tITemplatesCategory,\n} from '@/Interface';\nimport type { IDataObject } from 'n8n-workflow';\nimport { setPageTitle } from '@/utils/htmlUtils';\nimport { CREATOR_HUB_URL, VIEWS } from '@/constants';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { useUIStore } from '@/stores/ui.store';\nimport { useToast } from '@/composables/useToast';\nimport { usePostHog } from '@/stores/posthog.store';\nimport { useDebounce } from '@/composables/useDebounce';\n\ninterface ISearchEvent {\n\tsearch_string: string;\n\tworkflow_results_count: number;\n\tcollection_results_count: number;\n\tcategories_applied: ITemplatesCategory[];\n\twf_template_repo_session_id: string;\n}\n\nexport default defineComponent({\n\tname: 'TemplatesSearchView',\n\tcomponents: {\n\t\tTemplatesInfoCarousel,\n\t\tTemplateFilters,\n\t\tTemplateList,\n\t\tTemplatesView,\n\t},\n\tsetup() {\n\t\tconst { callDebounced } = useDebounce();\n\n\t\treturn {\n\t\t\tcallDebounced,\n\t\t\t...useToast(),\n\t\t};\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tareCategoriesPrepopulated: false,\n\t\t\tcategories: [] as ITemplatesCategory[],\n\t\t\tloading: true,\n\t\t\tloadingCategories: true,\n\t\t\tloadingCollections: true,\n\t\t\tloadingWorkflows: true,\n\t\t\tsearch: '',\n\t\t\tsearchEventToTrack: null as null | ISearchEvent,\n\t\t\terrorLoadingWorkflows: false,\n\t\t\tcreatorHubUrl: CREATOR_HUB_URL as string,\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore, usePostHog),\n\t\ttotalWorkflows(): number {\n\t\t\treturn this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject('name'));\n\t\t},\n\t\tworkflows(): ITemplatesWorkflow[] {\n\t\t\treturn this.templatesStore.getSearchedWorkflows(this.createQueryObject('name')) ?? [];\n\t\t},\n\t\tcollections(): ITemplatesCollection[] {\n\t\t\treturn this.templatesStore.getSearchedCollections(this.createQueryObject('id')) ?? [];\n\t\t},\n\t\tendOfSearchMessage(): string | null {\n\t\t\tif (this.loadingWorkflows) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tif (\n\t\t\t\t!this.loadingCollections &&\n\t\t\t\tthis.workflows.length === 0 &&\n\t\t\t\tthis.collections.length === 0\n\t\t\t) {\n\t\t\t\tif (!this.settingsStore.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {\n\t\t\t\t\treturn this.$locale.baseText('templates.connectionWarning');\n\t\t\t\t}\n\t\t\t\treturn this.$locale.baseText('templates.noSearchResults');\n\t\t\t}\n\n\t\t\treturn null;\n\t\t},\n\t\tnothingFound(): boolean {\n\t\t\treturn (\n\t\t\t\t!this.loadingWorkflows &&\n\t\t\t\t!this.loadingCollections &&\n\t\t\t\tthis.workflows.length === 0 &&\n\t\t\t\tthis.collections.length === 0\n\t\t\t);\n\t\t},\n\t},\n\twatch: {\n\t\tworkflows(newWorkflows) {\n\t\t\tif (newWorkflows.length === 0) {\n\t\t\t\tthis.scrollTo(0);\n\t\t\t}\n\t\t},\n\t},\n\tasync mounted() {\n\t\tsetPageTitle('n8n - Templates');\n\t\tawait this.loadCategories();\n\t\tvoid this.loadWorkflowsAndCollections(true);\n\t\tvoid this.usersStore.showPersonalizationSurvey();\n\n\t\tthis.restoreSearchFromRoute();\n\n\t\tsetTimeout(() => {\n\t\t\t// Check if there is scroll position saved in route and scroll to it\n\t\t\tif (this.$route.meta && this.$route.meta.scrollOffset > 0) {\n\t\t\t\tthis.scrollTo(this.$route.meta.scrollOffset, 'auto');\n\t\t\t}\n\t\t}, 100);\n\t},\n\tmethods: {\n\t\tcreateQueryObject(categoryId: 'name' | 'id'): ITemplatesQuery {\n\t\t\t// We are using category names for template search and ids for collection search\n\t\t\treturn {\n\t\t\t\tcategories: this.categories.map((category) =>\n\t\t\t\t\tcategoryId === 'name' ? category.name : String(category.id),\n\t\t\t\t),\n\t\t\t\tsearch: this.search,\n\t\t\t};\n\t\t},\n\t\trestoreSearchFromRoute() {\n\t\t\tlet updateSearch = false;\n\t\t\tif (this.$route.query.search && typeof this.$route.query.search === 'string') {\n\t\t\t\tthis.search = this.$route.query.search;\n\t\t\t\tupdateSearch = true;\n\t\t\t}\n\t\t\tif (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {\n\t\t\t\tconst categoriesFromURL = this.$route.query.categories.split(',');\n\t\t\t\tthis.categories = this.templatesStore.allCategories.filter((category) =>\n\t\t\t\t\tcategoriesFromURL.includes(category.id.toString()),\n\t\t\t\t);\n\t\t\t\tupdateSearch = true;\n\t\t\t}\n\t\t\tif (updateSearch) {\n\t\t\t\tthis.updateSearch();\n\t\t\t\tthis.trackCategories();\n\t\t\t\tthis.areCategoriesPrepopulated = true;\n\t\t\t}\n\t\t},\n\t\tonOpenCollection({ event, id }: { event: MouseEvent; id: string }) {\n\t\t\tthis.navigateTo(event, VIEWS.COLLECTION, id);\n\t\t},\n\t\tonOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {\n\t\t\tthis.navigateTo(event, VIEWS.TEMPLATE, id);\n\t\t},\n\t\tnavigateTo(e: MouseEvent, page: string, id: string) {\n\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\tconst route = this.$router.resolve({ name: page, params: { id } });\n\t\t\t\twindow.open(route.href, '_blank');\n\t\t\t\treturn;\n\t\t\t} else {\n\t\t\t\tvoid this.$router.push({ name: page, params: { id } });\n\t\t\t}\n\t\t},\n\t\tupdateSearch() {\n\t\t\tthis.updateQueryParam(this.search, this.categories.map((category) => category.id).join(','));\n\t\t\tvoid this.loadWorkflowsAndCollections(false);\n\t\t},\n\t\tupdateSearchTracking(search: string, categories: number[]) {\n\t\t\tif (!search) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (this.searchEventToTrack && this.searchEventToTrack.search_string.length > search.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.searchEventToTrack = {\n\t\t\t\tsearch_string: search,\n\t\t\t\tworkflow_results_count: this.workflows.length,\n\t\t\t\tcollection_results_count: this.collections.length,\n\t\t\t\tcategories_applied: categories.map((categoryId) =>\n\t\t\t\t\tthis.templatesStore.getCategoryById(categoryId.toString()),\n\t\t\t\t) as ITemplatesCategory[],\n\t\t\t\twf_template_repo_session_id: this.templatesStore.currentSessionId,\n\t\t\t};\n\t\t},\n\t\ttrackSearch() {\n\t\t\tif (this.searchEventToTrack) {\n\t\t\t\tthis.$telemetry.track(\n\t\t\t\t\t'User searched workflow templates',\n\t\t\t\t\tthis.searchEventToTrack as unknown as IDataObject,\n\t\t\t\t);\n\t\t\t\tthis.searchEventToTrack = null;\n\t\t\t}\n\t\t},\n\t\tonSearchInput(search: string) {\n\t\t\tthis.loadingWorkflows = true;\n\t\t\tthis.loadingCollections = true;\n\t\t\tthis.search = search;\n\t\t\tvoid this.callDebounced(this.updateSearch, {\n\t\t\t\tdebounceTime: 500,\n\t\t\t\ttrailing: true,\n\t\t\t});\n\n\t\t\tif (search.length === 0) {\n\t\t\t\tthis.trackSearch();\n\t\t\t}\n\t\t},\n\t\tonCategorySelected(selected: ITemplatesCategory) {\n\t\t\tthis.categories = this.categories.concat(selected);\n\t\t\tthis.updateSearch();\n\t\t\tthis.trackCategories();\n\t\t},\n\t\tonCategoryUnselected(selected: ITemplatesCategory) {\n\t\t\tthis.categories = this.categories.filter((category) => category.id !== selected.id);\n\t\t\tthis.updateSearch();\n\t\t\tthis.trackCategories();\n\t\t},\n\t\tonCategoriesCleared() {\n\t\t\tthis.categories = [];\n\t\t\tthis.updateSearch();\n\t\t},\n\t\ttrackCategories() {\n\t\t\tif (this.categories.length) {\n\t\t\t\tthis.$telemetry.track('User changed template filters', {\n\t\t\t\t\tsearch_string: this.search,\n\t\t\t\t\tcategories_applied: this.categories,\n\t\t\t\t\twf_template_repo_session_id: this.templatesStore.currentSessionId,\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\tupdateQueryParam(search: string, category: string) {\n\t\t\tconst query = Object.assign({}, this.$route.query);\n\n\t\t\tif (category.length) {\n\t\t\t\tquery.categories = category;\n\t\t\t} else {\n\t\t\t\tdelete query.categories;\n\t\t\t}\n\n\t\t\tif (search.length) {\n\t\t\t\tquery.search = search;\n\t\t\t} else {\n\t\t\t\tdelete query.search;\n\t\t\t}\n\n\t\t\tvoid this.$router.replace({ query });\n\t\t},\n\t\tasync onLoadMore() {\n\t\t\tif (this.workflows.length >= this.totalWorkflows) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tthis.loadingWorkflows = true;\n\t\t\t\tawait this.templatesStore.getMoreWorkflows({\n\t\t\t\t\tcategories: this.categories.map((category) => category.name),\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tthis.showMessage({\n\t\t\t\t\ttitle: 'Error',\n\t\t\t\t\tmessage: 'Could not load more workflows',\n\t\t\t\t\ttype: 'error',\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tthis.loadingWorkflows = false;\n\t\t\t}\n\t\t},\n\t\tasync loadCategories() {\n\t\t\ttry {\n\t\t\t\tawait this.templatesStore.getCategories();\n\t\t\t} catch (e) {}\n\t\t\tthis.loadingCategories = false;\n\t\t},\n\t\tasync loadCollections() {\n\t\t\ttry {\n\t\t\t\tthis.loadingCollections = true;\n\t\t\t\tawait this.templatesStore.getCollections({\n\t\t\t\t\tcategories: this.categories.map((category) => String(category.id)),\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t});\n\t\t\t} catch (e) {}\n\n\t\t\tthis.loadingCollections = false;\n\t\t},\n\t\tasync loadWorkflows() {\n\t\t\ttry {\n\t\t\t\tthis.loadingWorkflows = true;\n\t\t\t\tawait this.templatesStore.getWorkflows({\n\t\t\t\t\tsearch: this.search,\n\t\t\t\t\tcategories: this.categories.map((category) => category.name),\n\t\t\t\t});\n\t\t\t\tthis.errorLoadingWorkflows = false;\n\t\t\t} catch (e) {\n\t\t\t\tthis.errorLoadingWorkflows = true;\n\t\t\t}\n\n\t\t\tthis.loadingWorkflows = false;\n\t\t},\n\t\tasync loadWorkflowsAndCollections(initialLoad: boolean) {\n\t\t\tconst search = this.search;\n\t\t\tconst categories = [...this.categories];\n\t\t\tawait Promise.all([this.loadWorkflows(), this.loadCollections()]);\n\t\t\tif (!initialLoad) {\n\t\t\t\tthis.updateSearchTracking(\n\t\t\t\t\tsearch,\n\t\t\t\t\tcategories.map((category) => category.id),\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\tscrollTo(position: number, behavior: ScrollBehavior = 'smooth') {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst contentArea = document.getElementById('content');\n\t\t\t\tif (contentArea) {\n\t\t\t\t\tcontentArea.scrollTo({\n\t\t\t\t\t\ttop: position,\n\t\t\t\t\t\tbehavior,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}, 0);\n\t\t},\n\t},\n\tbeforeRouteLeave(to, from, next) {\n\t\tconst contentArea = document.getElementById('content');\n\t\tif (contentArea) {\n\t\t\t// When leaving this page, store current scroll position in route data\n\t\t\tif (\n\t\t\t\tthis.$route.meta?.setScrollPosition &&\n\t\t\t\ttypeof this.$route.meta.setScrollPosition === 'function'\n\t\t\t) {\n\t\t\t\tthis.$route.meta.setScrollPosition(contentArea.scrollTop);\n\t\t\t}\n\t\t}\n\n\t\tthis.trackSearch();\n\t\tnext();\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.wrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n.contentWrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tflex-direction: column;\n\t}\n}\n\n.filters {\n\twidth: 200px;\n\tmargin-bottom: var(--spacing-xl);\n\tmargin-right: var(--spacing-2xl);\n}\n\n.search {\n\twidth: 100%;\n\n\t> * {\n\t\tmargin-bottom: var(--spacing-l);\n\t}\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tpadding-left: 0;\n\t}\n}\n\n.header {\n\tmargin-bottom: var(--spacing-2xs);\n}\n</style>\n"],"names":["_sfc_main$1","defineComponent","mapStores","useTemplatesStore","value","categories","selected","selectedCategories","cat","notSelectedCategories","selectedCategory","category","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_1","_component_n8n_loading","_createCommentVNode","_component_el_checkbox","_cache","_Fragment","_renderList","index","args","_component_n8n_text","_sfc_main","TemplatesInfoCarousel","TemplateFilters","TemplateList","TemplatesView","callDebounced","useDebounce","useToast","CREATOR_HUB_URL","useSettingsStore","useUIStore","useUsersStore","usePostHog","newWorkflows","setPageTitle","categoryId","updateSearch","categoriesFromURL","event","id","VIEWS","page","route","search","query","initialLoad","position","behavior","contentArea","to","from","next","_a","_createBlock","_component_TemplatesView","_withCtx","_component_n8n_heading","_component_n8n_button","_component_TemplateFilters","_component_n8n_input","_withDirectives","_createTextVNode","_createVNode","_component_TemplatesInfoCarousel","_vShow","_component_TemplateList"],"mappings":"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"}

package/dist/assets/{TemplatesWorkflowView-fUesRX9J.js → TemplatesWorkflowView-GF7A2wQ8.js}

@@ -1,2 +1,2 @@
-import{m as v}from"./pinia-jQLgEt_L.js";import{T as S}from"./TemplateDetails-rR8wjzGE.js";import{T as F}from"./TemplatesView-WmzjgsYe.js";import{aw as I,h as w}from"./index-6DR75wmI.js";import{aX as P,fL as f,y as B,a8 as V,_ as C}from"./n8n-oSulVm5C.js";import{u as H}from"./templateActions-izEz5292.js";import{G as W,ag as t,l as a,M as s,a9 as E,O as r,p as l,Q as i,I as o,T as m,m as g,S as p,R as d}from"./vendor-e5jTRqqt.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./lodash-es-JdX4GWLn.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const N=W({name:"TemplatesWorkflowView",components:{TemplateDetails:S,TemplatesView:F,WorkflowPreview:I},setup(){return{externalHooks:V()}},computed:{...v(w,P),template(){return this.templatesStore.getFullTemplateById(this.templateId)},templateId(){return Array.isArray(this.$route.params.id)?this.$route.params.id[0]:this.$route.params.id}},data(){return{loading:!0,showPreview:!0,notFoundError:!1}},watch:{template(e){e?f(`n8n - Template template: ${e.name}`):f("n8n - Templates")}},async mounted(){if(this.scrollToTop(),this.template&&this.template.full){this.loading=!1;return}try{await this.templatesStore.fetchTemplateById(this.templateId)}catch{this.notFoundError=!0}this.loading=!1},methods:{async openTemplateSetup(e,n){await H({posthogStore:this.posthogStore,router:this.$router,templateId:e,inNewBrowserTab:n.metaKey||n.ctrlKey,externalHooks:this.externalHooks,nodeTypesStore:B(),telemetry:this.$telemetry,templatesStore:w(),source:"template_preview"})},onHidePreview(){this.showPreview=!1},scrollToTop(){const e=document.getElementById("content");e&&e.scrollTo({top:0})}}}),z="_wrapper_1c2lm_5",D="_notFound_1c2lm_10",A="_title_1c2lm_14",M="_button_1c2lm_18",K="_image_1c2lm_22",G="_content_1c2lm_33",L="_markdown_1c2lm_44",O="_details_1c2lm_55",Q={wrapper:z,notFound:D,title:A,button:M,image:K,content:G,markdown:L,details:O};function R(e,n,j,q,J,U){const k=t("n8n-heading"),u=t("n8n-text"),c=t("n8n-loading"),h=t("n8n-button"),T=t("WorkflowPreview"),y=t("n8n-markdown"),$=t("TemplateDetails"),b=t("TemplatesView");return a(),s(b,{"go-back-enabled":!0},E({header:r(()=>[e.notFoundError?(a(),g("div",{key:1,class:o(e.$style.notFound)},[m(u,{color:"text-base"},{default:r(()=>[p(d(e.$locale.baseText("templates.workflowsNotFound")),1)]),_:1})],2)):(a(),g("div",{key:0,class:o(e.$style.wrapper)},[l("div",{class:o(e.$style.title)},[e.template&&e.template.name?(a(),s(k,{key:0,tag:"h1",size:"2xlarge"},{default:r(()=>[p(d(e.template.name),1)]),_:1})):i("",!0),e.template&&e.template.name?(a(),s(u,{key:1,color:"text-base",size:"small"},{default:r(()=>[p(d(e.$locale.baseText("generic.workflow")),1)]),_:1})):i("",!0),m(c,{loading:!e.template||!e.template.name,rows:2,variant:"h1"},null,8,["loading"])],2),l("div",{class:o(e.$style.button)},[e.template?(a(),s(h,{key:0,"data-test-id":"use-template-button",label:e.$locale.baseText("template.buttons.useThisWorkflowButton"),size:"large",onClick:n[0]||(n[0]=_=>e.openTemplateSetup(e.templateId,_))},null,8,["label"])):i("",!0),m(c,{loading:!e.template,rows:1,variant:"button"},null,8,["loading"])],2)],2))]),_:2},[e.notFoundError?void 0:{name:"content",fn:r(()=>[l("div",{class:o(e.$style.image)},[e.showPreview?(a(),s(T,{key:0,loading:e.loading,workflow:e.template&&e.template.workflow,onClose:e.onHidePreview},null,8,["loading","workflow","onClose"])):i("",!0)],2),l("div",{class:o(e.$style.content)},[l("div",{class:o(e.$style.markdown),"data-test-id":"template-description"},[m(y,{content:e.template&&e.template.description,images:e.template&&e.template.image,loading:e.loading},null,8,["content","images","loading"])],2),l("div",{class:o(e.$style.details)},[m($,{"block-title":e.$locale.baseText("template.details.appsInTheWorkflow"),loading:e.loading,template:e.template},null,8,["block-title","loading","template"])],2)],2)]),key:"0"}]),1024)}const X={$style:Q},Pe=C(N,[["render",R],["__cssModules",X]]);export{Pe as default};
-//# sourceMappingURL=TemplatesWorkflowView-fUesRX9J.js.map
+import{m as v}from"./pinia-jQLgEt_L.js";import{T as S}from"./TemplateDetails-LkR9Mwpa.js";import{T as F}from"./TemplatesView-WmzjgsYe.js";import{aw as I,h as w}from"./index-36CdMZUz.js";import{aX as P,fL as f,y as B,a8 as V,_ as C}from"./n8n-oSulVm5C.js";import{u as H}from"./templateActions-EUfdPNqc.js";import{G as W,ag as t,l as a,M as s,a9 as E,O as r,p as l,Q as i,I as o,T as m,m as g,S as p,R as d}from"./vendor-e5jTRqqt.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./lodash-es-JdX4GWLn.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const N=W({name:"TemplatesWorkflowView",components:{TemplateDetails:S,TemplatesView:F,WorkflowPreview:I},setup(){return{externalHooks:V()}},computed:{...v(w,P),template(){return this.templatesStore.getFullTemplateById(this.templateId)},templateId(){return Array.isArray(this.$route.params.id)?this.$route.params.id[0]:this.$route.params.id}},data(){return{loading:!0,showPreview:!0,notFoundError:!1}},watch:{template(e){e?f(`n8n - Template template: ${e.name}`):f("n8n - Templates")}},async mounted(){if(this.scrollToTop(),this.template&&this.template.full){this.loading=!1;return}try{await this.templatesStore.fetchTemplateById(this.templateId)}catch{this.notFoundError=!0}this.loading=!1},methods:{async openTemplateSetup(e,n){await H({posthogStore:this.posthogStore,router:this.$router,templateId:e,inNewBrowserTab:n.metaKey||n.ctrlKey,externalHooks:this.externalHooks,nodeTypesStore:B(),telemetry:this.$telemetry,templatesStore:w(),source:"template_preview"})},onHidePreview(){this.showPreview=!1},scrollToTop(){const e=document.getElementById("content");e&&e.scrollTo({top:0})}}}),z="_wrapper_1c2lm_5",D="_notFound_1c2lm_10",A="_title_1c2lm_14",M="_button_1c2lm_18",K="_image_1c2lm_22",G="_content_1c2lm_33",L="_markdown_1c2lm_44",O="_details_1c2lm_55",Q={wrapper:z,notFound:D,title:A,button:M,image:K,content:G,markdown:L,details:O};function R(e,n,j,q,J,U){const k=t("n8n-heading"),u=t("n8n-text"),c=t("n8n-loading"),h=t("n8n-button"),T=t("WorkflowPreview"),y=t("n8n-markdown"),$=t("TemplateDetails"),b=t("TemplatesView");return a(),s(b,{"go-back-enabled":!0},E({header:r(()=>[e.notFoundError?(a(),g("div",{key:1,class:o(e.$style.notFound)},[m(u,{color:"text-base"},{default:r(()=>[p(d(e.$locale.baseText("templates.workflowsNotFound")),1)]),_:1})],2)):(a(),g("div",{key:0,class:o(e.$style.wrapper)},[l("div",{class:o(e.$style.title)},[e.template&&e.template.name?(a(),s(k,{key:0,tag:"h1",size:"2xlarge"},{default:r(()=>[p(d(e.template.name),1)]),_:1})):i("",!0),e.template&&e.template.name?(a(),s(u,{key:1,color:"text-base",size:"small"},{default:r(()=>[p(d(e.$locale.baseText("generic.workflow")),1)]),_:1})):i("",!0),m(c,{loading:!e.template||!e.template.name,rows:2,variant:"h1"},null,8,["loading"])],2),l("div",{class:o(e.$style.button)},[e.template?(a(),s(h,{key:0,"data-test-id":"use-template-button",label:e.$locale.baseText("template.buttons.useThisWorkflowButton"),size:"large",onClick:n[0]||(n[0]=_=>e.openTemplateSetup(e.templateId,_))},null,8,["label"])):i("",!0),m(c,{loading:!e.template,rows:1,variant:"button"},null,8,["loading"])],2)],2))]),_:2},[e.notFoundError?void 0:{name:"content",fn:r(()=>[l("div",{class:o(e.$style.image)},[e.showPreview?(a(),s(T,{key:0,loading:e.loading,workflow:e.template&&e.template.workflow,onClose:e.onHidePreview},null,8,["loading","workflow","onClose"])):i("",!0)],2),l("div",{class:o(e.$style.content)},[l("div",{class:o(e.$style.markdown),"data-test-id":"template-description"},[m(y,{content:e.template&&e.template.description,images:e.template&&e.template.image,loading:e.loading},null,8,["content","images","loading"])],2),l("div",{class:o(e.$style.details)},[m($,{"block-title":e.$locale.baseText("template.details.appsInTheWorkflow"),loading:e.loading,template:e.template},null,8,["block-title","loading","template"])],2)],2)]),key:"0"}]),1024)}const X={$style:Q},Pe=C(N,[["render",R],["__cssModules",X]]);export{Pe as default};
+//# sourceMappingURL=TemplatesWorkflowView-GF7A2wQ8.js.map

package/dist/assets/{TemplatesWorkflowView-fUesRX9J.js.map → TemplatesWorkflowView-GF7A2wQ8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TemplatesWorkflowView-fUesRX9J.js","sources":["../../src/views/TemplatesWorkflowView.vue"],"sourcesContent":["<template>\n\t<TemplatesView :go-back-enabled=\"true\">\n\t\t<template #header>\n\t\t\t<div v-if=\"!notFoundError\" :class=\"$style.wrapper\">\n\t\t\t\t<div :class=\"$style.title\">\n\t\t\t\t\t<n8n-heading v-if=\"template && template.name\" tag=\"h1\" size=\"2xlarge\">{{\n\t\t\t\t\t\ttemplate.name\n\t\t\t\t\t}}</n8n-heading>\n\t\t\t\t\t<n8n-text v-if=\"template && template.name\" color=\"text-base\" size=\"small\">\n\t\t\t\t\t\t{{ $locale.baseText('generic.workflow') }}\n\t\t\t\t\t</n8n-text>\n\t\t\t\t\t<n8n-loading :loading=\"!template || !template.name\" :rows=\"2\" variant=\"h1\" />\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.button\">\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tv-if=\"template\"\n\t\t\t\t\t\tdata-test-id=\"use-template-button\"\n\t\t\t\t\t\t:label=\"$locale.baseText('template.buttons.useThisWorkflowButton')\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t@click=\"openTemplateSetup(templateId, $event)\"\n\t\t\t\t\t/>\n\t\t\t\t\t<n8n-loading :loading=\"!template\" :rows=\"1\" variant=\"button\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div v-else :class=\"$style.notFound\">\n\t\t\t\t<n8n-text color=\"text-base\">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>\n\t\t\t</div>\n\t\t</template>\n\t\t<template v-if=\"!notFoundError\" #content>\n\t\t\t<div :class=\"$style.image\">\n\t\t\t\t<WorkflowPreview\n\t\t\t\t\tv-if=\"showPreview\"\n\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t:workflow=\"template && template.workflow\"\n\t\t\t\t\t@close=\"onHidePreview\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div :class=\"$style.content\">\n\t\t\t\t<div :class=\"$style.markdown\" data-test-id=\"template-description\">\n\t\t\t\t\t<n8n-markdown\n\t\t\t\t\t\t:content=\"template && template.description\"\n\t\t\t\t\t\t:images=\"template && template.image\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.details\">\n\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t:block-title=\"$locale.baseText('template.details.appsInTheWorkflow')\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t\t:template=\"template\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</TemplatesView>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { mapStores } from 'pinia';\n\nimport TemplateDetails from '@/components/TemplateDetails.vue';\nimport TemplatesView from './TemplatesView.vue';\nimport WorkflowPreview from '@/components/WorkflowPreview.vue';\n\nimport type { ITemplatesWorkflowFull } from '@/Interface';\nimport { setPageTitle } from '@/utils/htmlUtils';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { usePostHog } from '@/stores/posthog.store';\nimport { useTemplateWorkflow } from '@/utils/templates/templateActions';\nimport { useExternalHooks } from '@/composables/useExternalHooks';\nimport { useNodeTypesStore } from '@/stores/nodeTypes.store';\n\nexport default defineComponent({\n\tname: 'TemplatesWorkflowView',\n\tcomponents: {\n\t\tTemplateDetails,\n\t\tTemplatesView,\n\t\tWorkflowPreview,\n\t},\n\tsetup() {\n\t\tconst externalHooks = useExternalHooks();\n\n\t\treturn {\n\t\t\texternalHooks,\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useTemplatesStore, usePostHog),\n\t\ttemplate(): ITemplatesWorkflowFull | null {\n\t\t\treturn this.templatesStore.getFullTemplateById(this.templateId);\n\t\t},\n\t\ttemplateId() {\n\t\t\treturn Array.isArray(this.$route.params.id)\n\t\t\t\t? this.$route.params.id[0]\n\t\t\t\t: this.$route.params.id;\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tloading: true,\n\t\t\tshowPreview: true,\n\t\t\tnotFoundError: false,\n\t\t};\n\t},\n\twatch: {\n\t\ttemplate(template: ITemplatesWorkflowFull) {\n\t\t\tif (template) {\n\t\t\t\tsetPageTitle(`n8n - Template template: ${template.name}`);\n\t\t\t} else {\n\t\t\t\tsetPageTitle('n8n - Templates');\n\t\t\t}\n\t\t},\n\t},\n\tasync mounted() {\n\t\tthis.scrollToTop();\n\n\t\tif (this.template && this.template.full) {\n\t\t\tthis.loading = false;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait this.templatesStore.fetchTemplateById(this.templateId);\n\t\t} catch (e) {\n\t\t\tthis.notFoundError = true;\n\t\t}\n\n\t\tthis.loading = false;\n\t},\n\tmethods: {\n\t\tasync openTemplateSetup(id: string, e: PointerEvent) {\n\t\t\tawait useTemplateWorkflow({\n\t\t\t\tposthogStore: this.posthogStore,\n\t\t\t\trouter: this.$router,\n\t\t\t\ttemplateId: id,\n\t\t\t\tinNewBrowserTab: e.metaKey || e.ctrlKey,\n\t\t\t\texternalHooks: this.externalHooks,\n\t\t\t\tnodeTypesStore: useNodeTypesStore(),\n\t\t\t\ttelemetry: this.$telemetry,\n\t\t\t\ttemplatesStore: useTemplatesStore(),\n\t\t\t\tsource: 'template_preview',\n\t\t\t});\n\t\t},\n\t\tonHidePreview() {\n\t\t\tthis.showPreview = false;\n\t\t},\n\t\tscrollToTop() {\n\t\t\tconst contentArea = document.getElementById('content');\n\n\t\t\tif (contentArea) {\n\t\t\t\tcontentArea.scrollTo({\n\t\t\t\t\ttop: 0,\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.wrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n.notFound {\n\tpadding-top: var(--spacing-xl);\n}\n\n.title {\n\twidth: 75%;\n}\n\n.button {\n\tdisplay: block;\n}\n\n.image {\n\twidth: 100%;\n\theight: 500px;\n\tborder: var(--border-base);\n\tborder-radius: var(--border-radius-large);\n\toverflow: hidden;\n\n\timg {\n\t\twidth: 100%;\n\t}\n}\n\n.content {\n\tpadding: var(--spacing-2xl) 0;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tdisplay: block;\n\t}\n}\n\n.markdown {\n\twidth: calc(100% - 180px);\n\tpadding-right: var(--spacing-2xl);\n\tmargin-bottom: var(--spacing-l);\n\n\t@media (max-width: $breakpoint-xs) {\n\t\twidth: 100%;\n\t}\n}\n\n.details {\n\twidth: 180px;\n}\n</style>\n"],"names":["_sfc_main","defineComponent","TemplateDetails","TemplatesView","WorkflowPreview","useExternalHooks","mapStores","useTemplatesStore","usePostHog","template","setPageTitle","id","e","useTemplateWorkflow","useNodeTypesStore","contentArea","_component_TemplatesView","_resolveComponent","_openBlock","_createBlock","_createSlots","_withCtx","_ctx","_createElementBlock","_normalizeClass","_component_n8n_heading","_createCommentVNode","_component_n8n_text","_createVNode","_component_n8n_loading","_createElementVNode","_component_n8n_button","_component_WorkflowPreview","_component_n8n_markdown","_component_TemplateDetails"],"mappings":"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"}
+{"version":3,"file":"TemplatesWorkflowView-GF7A2wQ8.js","sources":["../../src/views/TemplatesWorkflowView.vue"],"sourcesContent":["<template>\n\t<TemplatesView :go-back-enabled=\"true\">\n\t\t<template #header>\n\t\t\t<div v-if=\"!notFoundError\" :class=\"$style.wrapper\">\n\t\t\t\t<div :class=\"$style.title\">\n\t\t\t\t\t<n8n-heading v-if=\"template && template.name\" tag=\"h1\" size=\"2xlarge\">{{\n\t\t\t\t\t\ttemplate.name\n\t\t\t\t\t}}</n8n-heading>\n\t\t\t\t\t<n8n-text v-if=\"template && template.name\" color=\"text-base\" size=\"small\">\n\t\t\t\t\t\t{{ $locale.baseText('generic.workflow') }}\n\t\t\t\t\t</n8n-text>\n\t\t\t\t\t<n8n-loading :loading=\"!template || !template.name\" :rows=\"2\" variant=\"h1\" />\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.button\">\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tv-if=\"template\"\n\t\t\t\t\t\tdata-test-id=\"use-template-button\"\n\t\t\t\t\t\t:label=\"$locale.baseText('template.buttons.useThisWorkflowButton')\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t@click=\"openTemplateSetup(templateId, $event)\"\n\t\t\t\t\t/>\n\t\t\t\t\t<n8n-loading :loading=\"!template\" :rows=\"1\" variant=\"button\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div v-else :class=\"$style.notFound\">\n\t\t\t\t<n8n-text color=\"text-base\">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>\n\t\t\t</div>\n\t\t</template>\n\t\t<template v-if=\"!notFoundError\" #content>\n\t\t\t<div :class=\"$style.image\">\n\t\t\t\t<WorkflowPreview\n\t\t\t\t\tv-if=\"showPreview\"\n\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t:workflow=\"template && template.workflow\"\n\t\t\t\t\t@close=\"onHidePreview\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div :class=\"$style.content\">\n\t\t\t\t<div :class=\"$style.markdown\" data-test-id=\"template-description\">\n\t\t\t\t\t<n8n-markdown\n\t\t\t\t\t\t:content=\"template && template.description\"\n\t\t\t\t\t\t:images=\"template && template.image\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div :class=\"$style.details\">\n\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t:block-title=\"$locale.baseText('template.details.appsInTheWorkflow')\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t\t:template=\"template\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</TemplatesView>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { mapStores } from 'pinia';\n\nimport TemplateDetails from '@/components/TemplateDetails.vue';\nimport TemplatesView from './TemplatesView.vue';\nimport WorkflowPreview from '@/components/WorkflowPreview.vue';\n\nimport type { ITemplatesWorkflowFull } from '@/Interface';\nimport { setPageTitle } from '@/utils/htmlUtils';\nimport { useTemplatesStore } from '@/stores/templates.store';\nimport { usePostHog } from '@/stores/posthog.store';\nimport { useTemplateWorkflow } from '@/utils/templates/templateActions';\nimport { useExternalHooks } from '@/composables/useExternalHooks';\nimport { useNodeTypesStore } from '@/stores/nodeTypes.store';\n\nexport default defineComponent({\n\tname: 'TemplatesWorkflowView',\n\tcomponents: {\n\t\tTemplateDetails,\n\t\tTemplatesView,\n\t\tWorkflowPreview,\n\t},\n\tsetup() {\n\t\tconst externalHooks = useExternalHooks();\n\n\t\treturn {\n\t\t\texternalHooks,\n\t\t};\n\t},\n\tcomputed: {\n\t\t...mapStores(useTemplatesStore, usePostHog),\n\t\ttemplate(): ITemplatesWorkflowFull | null {\n\t\t\treturn this.templatesStore.getFullTemplateById(this.templateId);\n\t\t},\n\t\ttemplateId() {\n\t\t\treturn Array.isArray(this.$route.params.id)\n\t\t\t\t? this.$route.params.id[0]\n\t\t\t\t: this.$route.params.id;\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tloading: true,\n\t\t\tshowPreview: true,\n\t\t\tnotFoundError: false,\n\t\t};\n\t},\n\twatch: {\n\t\ttemplate(template: ITemplatesWorkflowFull) {\n\t\t\tif (template) {\n\t\t\t\tsetPageTitle(`n8n - Template template: ${template.name}`);\n\t\t\t} else {\n\t\t\t\tsetPageTitle('n8n - Templates');\n\t\t\t}\n\t\t},\n\t},\n\tasync mounted() {\n\t\tthis.scrollToTop();\n\n\t\tif (this.template && this.template.full) {\n\t\t\tthis.loading = false;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait this.templatesStore.fetchTemplateById(this.templateId);\n\t\t} catch (e) {\n\t\t\tthis.notFoundError = true;\n\t\t}\n\n\t\tthis.loading = false;\n\t},\n\tmethods: {\n\t\tasync openTemplateSetup(id: string, e: PointerEvent) {\n\t\t\tawait useTemplateWorkflow({\n\t\t\t\tposthogStore: this.posthogStore,\n\t\t\t\trouter: this.$router,\n\t\t\t\ttemplateId: id,\n\t\t\t\tinNewBrowserTab: e.metaKey || e.ctrlKey,\n\t\t\t\texternalHooks: this.externalHooks,\n\t\t\t\tnodeTypesStore: useNodeTypesStore(),\n\t\t\t\ttelemetry: this.$telemetry,\n\t\t\t\ttemplatesStore: useTemplatesStore(),\n\t\t\t\tsource: 'template_preview',\n\t\t\t});\n\t\t},\n\t\tonHidePreview() {\n\t\t\tthis.showPreview = false;\n\t\t},\n\t\tscrollToTop() {\n\t\t\tconst contentArea = document.getElementById('content');\n\n\t\t\tif (contentArea) {\n\t\t\t\tcontentArea.scrollTo({\n\t\t\t\t\ttop: 0,\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t},\n});\n</script>\n\n<style lang=\"scss\" module>\n.wrapper {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n.notFound {\n\tpadding-top: var(--spacing-xl);\n}\n\n.title {\n\twidth: 75%;\n}\n\n.button {\n\tdisplay: block;\n}\n\n.image {\n\twidth: 100%;\n\theight: 500px;\n\tborder: var(--border-base);\n\tborder-radius: var(--border-radius-large);\n\toverflow: hidden;\n\n\timg {\n\t\twidth: 100%;\n\t}\n}\n\n.content {\n\tpadding: var(--spacing-2xl) 0;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t@media (max-width: $breakpoint-xs) {\n\t\tdisplay: block;\n\t}\n}\n\n.markdown {\n\twidth: calc(100% - 180px);\n\tpadding-right: var(--spacing-2xl);\n\tmargin-bottom: var(--spacing-l);\n\n\t@media (max-width: $breakpoint-xs) {\n\t\twidth: 100%;\n\t}\n}\n\n.details {\n\twidth: 180px;\n}\n</style>\n"],"names":["_sfc_main","defineComponent","TemplateDetails","TemplatesView","WorkflowPreview","useExternalHooks","mapStores","useTemplatesStore","usePostHog","template","setPageTitle","id","e","useTemplateWorkflow","useNodeTypesStore","contentArea","_component_TemplatesView","_resolveComponent","_openBlock","_createBlock","_createSlots","_withCtx","_ctx","_createElementBlock","_normalizeClass","_component_n8n_heading","_createCommentVNode","_component_n8n_text","_createVNode","_component_n8n_loading","_createElementVNode","_component_n8n_button","_component_WorkflowPreview","_component_n8n_markdown","_component_TemplateDetails"],"mappings":"qyCAyEA,MAAAA,EAAeC,EAAgB,CAC9B,KAAM,wBACN,WAAY,CACX,gBAAAC,EACA,cAAAC,EACA,gBAAAC,CACD,EACA,OAAQ,CAGA,MAAA,CACN,cAHqBC,GAGrB,CAEF,EACA,SAAU,CACT,GAAGC,EAAUC,EAAmBC,CAAU,EAC1C,UAA0C,CACzC,OAAO,KAAK,eAAe,oBAAoB,KAAK,UAAU,CAC/D,EACA,YAAa,CACZ,OAAO,MAAM,QAAQ,KAAK,OAAO,OAAO,EAAE,EACvC,KAAK,OAAO,OAAO,GAAG,CAAC,EACvB,KAAK,OAAO,OAAO,EACvB,CACD,EACA,MAAO,CACC,MAAA,CACN,QAAS,GACT,YAAa,GACb,cAAe,EAAA,CAEjB,EACA,MAAO,CACN,SAASC,EAAkC,CACtCA,EACUC,EAAA,4BAA4BD,EAAS,IAAI,EAAE,EAExDC,EAAa,iBAAiB,CAEhC,CACD,EACA,MAAM,SAAU,CAGf,GAFA,KAAK,YAAY,EAEb,KAAK,UAAY,KAAK,SAAS,KAAM,CACxC,KAAK,QAAU,GACf,MACD,CAEI,GAAA,CACH,MAAM,KAAK,eAAe,kBAAkB,KAAK,UAAU,OAChD,CACX,KAAK,cAAgB,EACtB,CAEA,KAAK,QAAU,EAChB,EACA,QAAS,CACR,MAAM,kBAAkBC,EAAYC,EAAiB,CACpD,MAAMC,EAAoB,CACzB,aAAc,KAAK,aACnB,OAAQ,KAAK,QACb,WAAYF,EACZ,gBAAiBC,EAAE,SAAWA,EAAE,QAChC,cAAe,KAAK,cACpB,eAAgBE,EAAkB,EAClC,UAAW,KAAK,WAChB,eAAgBP,EAAkB,EAClC,OAAQ,kBAAA,CACR,CACF,EACA,eAAgB,CACf,KAAK,YAAc,EACpB,EACA,aAAc,CACP,MAAAQ,EAAc,SAAS,eAAe,SAAS,EAEjDA,GACHA,EAAY,SAAS,CACpB,IAAK,CAAA,CACL,CAEH,CACD,CACD,CAAC,uaA5JAC,EAAAC,EAqDgB,eArDA,SAEFC,EAAa,EAAAC,EAAAH,EAAA,CAAA,kBAAA,EAAA,EAAAI,EAAA,CAAzB,OAAAC,EAAA,IAAA,CAAAC,EAAA,eAqBkBJ,IAAAK,EAAE,MAAO,CAAA,IAAA,EAC1B,MAAAC,EAA4FF,EAA5E,OAAA,QAAA,CAAA,EAAA,YAAe,WAAQ,EAAA,CAAA,QAAAD,EAAA,IAAA,yEAtBxCH,EAAA,IAAmC,MAAO,CAAA,IAAA,EACzC,MAQMM,EAAAF,EAAA,OAAA,OAAA,CAAA,EAAA,UAPc,MAAAE,EAAYF,SAAS,KAAI,CAAA,EAAA,CAAUA,EAAA,UAAAA,EAAA,SAAA,MAAAJ,EAAA,EAAAC,EAAAM,EAAA,CAAC,IAAI,EAAA,IAAA,kEAG3C,CAAA,GAAAC,EAAhB,GAEW,EAAA,EAAAJ,EAAA,UAAAA,EAAA,SAAA,MAAAJ,EAFiD,EAAAC,EAAAQ,EAAA,CAAC,IAAI,EAAA,MAAA,+FAGnD,GAAAD,EAAU,GAAQ,EAAK,EAAuBE,EAAAC,EAAA,CAAE,QAAQ,CAAIP,EAAA,UAAA,CAAAA,EAAA,SAAA,KAAA,KAAA,cAWrE,EAAA,KAAA,EAAA,CAAA,SAAA,CAAA,CATA,EAAA,CAAA,EAAAQ,EAAA,MAAA,OAEEN,EAAQF,EAAA,OAAA,MAAA,CAAA,EAAA,CACdA,EAAA,UAAAJ,IAAAC,EAAaY,EAAqB,CACjC,IAAK,EACN,eAAY,sBACX,MAAKT,EAAoB,QAAA,SAAA,wCAAA,EAAA,KAAA,qEAEoC,KAAA,EAAA,CAAA,OAAA,CAAA,GAAjDI,EAAU,GAAQ,EAAA,EAAUE,EAAAC,EAAA,CAAE,QAAQ,CAAAP,EAAA,SAAA,KAAA,2CAGpC,EAAA,CAAA,KAIF,EAAA,CAAA,EAAA,yBAChB,KAAA,UAAA,GAAMD,EAAK,IAAA,CAAAS,EAAA,MAAA,OAEHN,EAAWF,EAAA,OAAA,KAAA,CAAA,EAAA,oBACAH,EAAAa,EAAA,CAChB,IAAA,EACA,QAAOV,EAAA,QAAA,SAAAA,EAAA,UAAAA,EAAA,SAAA,4EAGVI,EAeM,GAAA,EAAA,CAfA,EAAA,CAAA,EAAAI,EAAA,MAAA,CACL,MAMMN,EAAAF,EAAA,OAAA,OAAA,CAAA,EAAA,CANqCQ,EAAA,MAAA,CAAA,MAAAN,EAAAF,EAAA,OAAA,QAAA,EAC1C,eAIE,sBAAA,EAAA,GAFQW,EAAY,CACpB,QAASX,EAAO,UAAAA,EAAA,SAAA,YAAA,OAAAA,EAAA,UAAAA,EAAA,SAAA,yBASb,KAAA,EAAA,CAAA,UAAA,SAAA,SAAA,CAAA,CANA,EAAA,CAAA,EAAAQ,EAAA,MAAA,CACL,MAIEN,EAAAF,EAAA,OAAA,OAAA,CAAA,EAAA,GAFSY,EAAO,CAChB,cAAUZ,EAAQ,QAAA,SAAA,oCAAA,EAAA,QAAAA,EAAA"}

package/dist/assets/{VariablesView-VWkgCVLM.js → VariablesView-F5vY_O7t.js}

@@ -1,2 +1,2 @@
-import{l as ie,I as re,d as ue,b as de}from"./index-6DR75wmI.js";import{e as J,l as ee,f as ae,fT as te,t as se,x as le,_ as ne,u as ce,fU as be,a9 as ve,O as pe}from"./n8n-oSulVm5C.js";import{R as me}from"./ResourcesListLayout-9ENca14S.js";import{G as oe,r as T,e as R,b as fe,d as ye,ag as U,l as r,m as g,p as k,R as c,M,u as n,T as _,O as l,S as h,I as j,Q,n as Y,D as _e,y as ke,a9 as ge}from"./vendor-e5jTRqqt.js";import"./pinia-jQLgEt_L.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./lodash-es-JdX4GWLn.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const Te={class:"variables-key-column"},xe={key:0},Ce={class:"variables-value-column"},he={key:0},we={class:"variables-usage-column"},Ve={key:0},$e=oe({__name:"VariablesRow",props:{data:{type:Object,default:()=>({})},editing:{type:Boolean,default:!1}},emits:["save","cancel","edit","delete"],setup(w,{emit:E}){const p=w,o=le(),N=ie(),{showMessage:G}=J(),d=ee(),H=ae(),x=te(H.currentUser),i=T({...p.data}),b=T({key:!1,value:!1}),F=R(()=>b.value.key&&b.value.value),t=T(),V=T(),A=T(`$vars.${p.data.key}`),v=R(()=>d.isEnterpriseFeatureEnabled(se.Variables));R(()=>v.value&&(x.edit||x.delete)),fe(()=>{z()});const B=[{name:"REQUIRED"},{name:"MAX_LENGTH",config:{maximum:50}},{name:"MATCH_REGEX",config:{regex:/^[a-zA-Z]/,message:o.baseText("variables.editing.key.error.startsWithLetter")}},{name:"MATCH_REGEX",config:{regex:/^[a-zA-Z][a-zA-Z0-9_]*$/,message:o.baseText("variables.editing.key.error.jsonKey")}}],P=[{name:"MAX_LENGTH",config:{maximum:220}}];ye(()=>i.value.key,async()=>{await Y(),b.value.key&&C()});function C(){A.value=`$vars.${i.value.key||p.data.key}`}async function m(){i.value={...p.data},E("cancel",i.value)}async function L(){E("save",i.value)}async function X(){E("edit",i.value),await Y(),z()}async function q(){E("delete",i.value)}function I(u,s){b.value[u]=s}function W(){N.copy(A.value),G({title:o.baseText("variables.row.usage.copiedToClipboard"),type:"success"})}function z(){var u,s,$;($=(s=(u=t.value)==null?void 0:u.inputRef)==null?void 0:s.focus)==null||$.call(s)}return(u,s)=>{const $=U("n8n-form-input"),S=U("n8n-tooltip"),f=U("n8n-button");return r(),g("tr",{class:j(u.$style.variablesRow),"data-test-id":"variables-row"},[k("td",Te,[k("div",null,[w.editing?(r(),M($,{key:1,ref_key:"keyInputRef",ref:t,modelValue:i.value.key,"onUpdate:modelValue":s[0]||(s[0]=e=>i.value.key=e),label:"",name:"key","data-test-id":"variable-row-key-input",placeholder:n(o).baseText("variables.editing.key.placeholder"),required:"","validate-on-blur":"","validation-rules":B,onValidate:s[1]||(s[1]=e=>I("key",e))},null,8,["modelValue","placeholder"])):(r(),g("span",xe,c(w.data.key),1))])]),k("td",Ce,[k("div",null,[w.editing?(r(),M($,{key:1,ref_key:"valueInputRef",ref:V,modelValue:i.value.value,"onUpdate:modelValue":s[2]||(s[2]=e=>i.value.value=e),label:"",name:"value","data-test-id":"variable-row-value-input",placeholder:n(o).baseText("variables.editing.value.placeholder"),"validate-on-blur":"","validation-rules":P,onValidate:s[3]||(s[3]=e=>I("value",e))},null,8,["modelValue","placeholder"])):(r(),g("span",he,c(w.data.value),1))])]),k("td",we,[k("div",null,[_(S,{placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.usage.copyToClipboard")),1)]),default:l(()=>[i.value.key&&A.value?(r(),g("span",{key:0,class:j(u.$style.usageSyntax),onClick:W},c(A.value),3)):Q("",!0)]),_:1})])]),v.value?(r(),g("td",Ve,[w.editing?(r(),g("div",{key:0,class:j(u.$style.buttons)},[_(f,{"data-test-id":"variable-row-cancel-button",type:"tertiary",class:"mr-xs",onClick:m},{default:l(()=>[h(c(n(o).baseText("variables.row.button.cancel")),1)]),_:1}),_(f,{"data-test-id":"variable-row-save-button",disabled:!F.value,type:"primary",onClick:L},{default:l(()=>[h(c(n(o).baseText("variables.row.button.save")),1)]),_:1},8,["disabled"])],2)):(r(),g("div",{key:1,class:j([u.$style.buttons,u.$style.hoverButtons])},[_(S,{disabled:n(x).edit,placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.button.edit.onlyOwnerCanSave")),1)]),default:l(()=>[k("div",null,[_(f,{"data-test-id":"variable-row-edit-button",type:"tertiary",class:"mr-xs",disabled:!n(x).edit,onClick:X},{default:l(()=>[h(c(n(o).baseText("variables.row.button.edit")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"]),_(S,{disabled:n(x).delete,placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.button.delete.onlyOwnerCanDelete")),1)]),default:l(()=>[k("div",null,[_(f,{"data-test-id":"variable-row-delete-button",type:"tertiary",disabled:!n(x).delete,onClick:q},{default:l(()=>[h(c(n(o).baseText("variables.row.button.delete")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"])],2))])):Q("",!0)],2)}}}),Se="_variablesRow_rbd77_5",Re="_hoverButtons_rbd77_5",Ee="_buttons_rbd77_14",Ae="_usageSyntax_rbd77_25",Be={variablesRow:Se,hoverButtons:Re,buttons:Ee,usageSyntax:Ae},Me={$style:Be},Ue=ne($e,[["__cssModules",Me]]),Ie={key:0},Oe={key:1},D="@tmpvar",De=oe({__name:"VariablesView",setup(w){const E=ee(),p=re(),o=ae(),N=ce(),G=pe(),d=le(),H=de(),x=ue();let i=()=>{};const b=T(null),{showError:F}=J(),t=T([]),V=T({}),A=te(o.currentUser),v=R(()=>E.isEnterpriseFeatureEnabled(se.Variables)),B=R(()=>v.value&&A.create),P=R(()=>[{id:0,path:"name",label:d.baseText("variables.table.key"),classes:["variables-key-column"]},{id:1,path:"value",label:d.baseText("variables.table.value"),classes:["variables-value-column"]},{id:2,path:"usage",label:d.baseText("variables.table.usage"),classes:["variables-usage-column"]},...v.value?[{id:3,path:"actions",label:""}]:[]]),C=R(()=>N.contextBasedTranslationKeys),m=T([]),L=(e,a,y)=>`${e.id}`.startsWith(D)?-1:`${a.id}`.startsWith(D)?1:m.value.includes(e.id)&&m.value.includes(a.id)?m.value.indexOf(e.id)-m.value.indexOf(a.id):m.value.includes(e.id)?-1:m.value.includes(a.id)?1:y==="asc"?f(e).trim().localeCompare(f(a).trim()):f(a).trim().localeCompare(f(e).trim()),X={nameAsc:(e,a)=>L(e,a,"asc"),nameDesc:(e,a)=>L(e,a,"desc")};function q(){m.value=[]}async function I(){await p.fetchAllVariables(),t.value=[...p.variables]}function W(){const e={id:be(D),key:"",value:""};b.value&&(b.value.$refs.listWrapperRef&&(b.value.$refs.listWrapperRef.scrollTop=0),b.value.currentPage!==1&&b.value.setCurrentPage(1)),t.value.unshift(e),V.value[e.id]=!0,G.track("User clicked add variable button")}async function z(e){let a;try{if(typeof e.id=="string"&&e.id.startsWith(D)){const{id:y,...K}=e;a=await p.createVariable(K),t.value.unshift(a),t.value=t.value.filter(O=>O.id!==e.id),m.value.unshift(a.id)}else a=await p.updateVariable(e),t.value=t.value.filter(y=>y.id!==e.id),t.value.push(a),u(a)}catch(y){F(y,d.baseText("variables.errors.save"))}}function u(e){V.value={...V.value,[e.id]:!V.value[e.id]}}function s(e){typeof e.id=="string"&&e.id.startsWith(D)?t.value=t.value.filter(a=>a.id!==e.id):u(e)}async function $(e){try{if(await H.confirm(d.baseText("variables.modals.deleteConfirm.message",{interpolate:{name:e.key}}),d.baseText("variables.modals.deleteConfirm.title"),{confirmButtonText:d.baseText("variables.modals.deleteConfirm.confirmButton"),cancelButtonText:d.baseText("variables.modals.deleteConfirm.cancelButton")})!==ve)return;await p.deleteVariable(e),t.value=t.value.filter(y=>y.id!==e.id)}catch(a){F(a,d.baseText("variables.errors.delete"))}}function S(){N.goToUpgrade("variables","upgrade-variables")}function f(e){return e.key}return _e(()=>{i=x.$onAction(({name:e,after:a})=>{e==="pullWorkfolder"&&a&&a(()=>{I()})})}),ke(()=>{i()}),(e,a)=>{const y=U("n8n-button"),K=U("n8n-tooltip"),O=U("n8n-action-box");return r(),M(me,{ref_key:"layoutRef",ref:b,class:"variables-view","resource-key":"variables",disabled:!v.value,resources:t.value,initialize:I,shareable:!1,"display-name":f,"sort-fns":X,"sort-options":["nameAsc","nameDesc"],"show-filters-dropdown":!1,type:"datatable","type-props":{columns:P.value},onSort:q,"onClick:add":W},ge({"add-button":l(()=>[_(K,{placement:"top",disabled:B.value},{content:l(()=>[v.value?(r(),g("span",Oe,c(n(d).baseText("variables.add.onlyOwnerCanCreate")),1)):(r(),g("span",Ie,c(n(d).baseText(`variables.add.unavailable${t.value.length===0?".empty":""}`)),1))]),default:l(()=>[k("div",null,[_(y,{size:"large",block:"",disabled:!B.value,"data-test-id":"resources-list-add",onClick:W},{default:l(()=>[h(c(e.$locale.baseText("variables.add")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"])]),default:l(({data:Z})=>[(r(),M(Ue,{key:Z.id,editing:V.value[Z.id],data:Z,onSave:z,onEdit:u,onCancel:s,onDelete:$},null,8,["editing","data"]))]),_:2},[v.value?void 0:{name:"preamble",fn:l(()=>[_(O,{class:"mb-m","data-test-id":"unavailable-resources-list",emoji:"👋",heading:e.$locale.baseText(C.value.variables.unavailable.title),description:e.$locale.baseText(C.value.variables.unavailable.description),"button-text":e.$locale.baseText(C.value.variables.unavailable.button),"button-type":"secondary","onClick:button":S},null,8,["heading","description","button-text"])]),key:"0"},!v.value||v.value&&!B.value?{name:"empty",fn:l(()=>[v.value?B.value?Q("",!0):(r(),M(O,{key:1,"data-test-id":"cannot-create-variables",emoji:"👋",heading:e.$locale.baseText("variables.empty.notAllowedToCreate.heading",{interpolate:{name:n(o).currentUser.firstName}}),description:e.$locale.baseText("variables.empty.notAllowedToCreate.description"),onClick:S},null,8,["heading","description"])):(r(),M(O,{key:0,"data-test-id":"unavailable-resources-list",emoji:"👋",heading:e.$locale.baseText(C.value.variables.unavailable.title),description:e.$locale.baseText(C.value.variables.unavailable.description),"button-text":e.$locale.baseText(C.value.variables.unavailable.button),"button-type":"secondary","onClick:button":S},null,8,["heading","description","button-text"]))]),key:"1"}:void 0]),1032,["disabled","resources","type-props"])}}}),Ne="_sidebarContainer_1qflh_9",Fe={"type-input":"_type-input_1qflh_5",sidebarContainer:Ne},Le={$style:Fe},fa=ne(De,[["__cssModules",Le],["__scopeId","data-v-ea707e68"]]);export{fa as default};
-//# sourceMappingURL=VariablesView-VWkgCVLM.js.map
+import{l as ie,I as re,d as ue,b as de}from"./index-36CdMZUz.js";import{e as J,l as ee,f as ae,fT as te,t as se,x as le,_ as ne,u as ce,fU as be,a9 as ve,O as pe}from"./n8n-oSulVm5C.js";import{R as me}from"./ResourcesListLayout-9ENca14S.js";import{G as oe,r as T,e as R,b as fe,d as ye,ag as U,l as r,m as g,p as k,R as c,M,u as n,T as _,O as l,S as h,I as j,Q,n as Y,D as _e,y as ke,a9 as ge}from"./vendor-e5jTRqqt.js";import"./pinia-jQLgEt_L.js";import"./@n8n/codemirror-lang-sql-feLn5IS9.js";import"./@lezer/common-1hBQ1gIF.js";import"./codemirror-lang-html-n8n-wWQLhhqk.js";import"./prettier-s3fE3Qyr.js";import"./@jsplumb/util-DR0SB56A.js";import"./@jsplumb/core-MKwKlGip.js";import"./@jsplumb/common-Q5_tv_GT.js";import"./@jsplumb/connector-bezier-3dWY17R5.js";import"./lodash-es-JdX4GWLn.js";import"./@jsplumb/browser-ui-AlqFM-P6.js";import"./uuid-McvpxQtQ.js";import"./luxon-ZRIU05qF.js";import"./@vueuse/core-eU1v7QRm.js";import"./codemirror-lang-n8n-expression-HpIZnV_9.js";import"./fast-json-stable-stringify-z-DLxjte.js";import"./esprima-next-ulPLCZ1Z.js";import"./timeago.js--Bumj2r9.js";import"./qrcode.vue-b4L9G_D6.js";import"./vue3-touch-events-_RfbPMOD.js";import"./chart.js-JtqvIvkt.js";import"./axios-s2RMMPhA.js";import"./flatted-jPn12Tq4.js";import"./vue-i18n-IDI7B_27.js";import"./@n8n/permissions-8yMqUF1Y.js";const Te={class:"variables-key-column"},xe={key:0},Ce={class:"variables-value-column"},he={key:0},we={class:"variables-usage-column"},Ve={key:0},$e=oe({__name:"VariablesRow",props:{data:{type:Object,default:()=>({})},editing:{type:Boolean,default:!1}},emits:["save","cancel","edit","delete"],setup(w,{emit:E}){const p=w,o=le(),N=ie(),{showMessage:G}=J(),d=ee(),H=ae(),x=te(H.currentUser),i=T({...p.data}),b=T({key:!1,value:!1}),F=R(()=>b.value.key&&b.value.value),t=T(),V=T(),A=T(`$vars.${p.data.key}`),v=R(()=>d.isEnterpriseFeatureEnabled(se.Variables));R(()=>v.value&&(x.edit||x.delete)),fe(()=>{z()});const B=[{name:"REQUIRED"},{name:"MAX_LENGTH",config:{maximum:50}},{name:"MATCH_REGEX",config:{regex:/^[a-zA-Z]/,message:o.baseText("variables.editing.key.error.startsWithLetter")}},{name:"MATCH_REGEX",config:{regex:/^[a-zA-Z][a-zA-Z0-9_]*$/,message:o.baseText("variables.editing.key.error.jsonKey")}}],P=[{name:"MAX_LENGTH",config:{maximum:220}}];ye(()=>i.value.key,async()=>{await Y(),b.value.key&&C()});function C(){A.value=`$vars.${i.value.key||p.data.key}`}async function m(){i.value={...p.data},E("cancel",i.value)}async function L(){E("save",i.value)}async function X(){E("edit",i.value),await Y(),z()}async function q(){E("delete",i.value)}function I(u,s){b.value[u]=s}function W(){N.copy(A.value),G({title:o.baseText("variables.row.usage.copiedToClipboard"),type:"success"})}function z(){var u,s,$;($=(s=(u=t.value)==null?void 0:u.inputRef)==null?void 0:s.focus)==null||$.call(s)}return(u,s)=>{const $=U("n8n-form-input"),S=U("n8n-tooltip"),f=U("n8n-button");return r(),g("tr",{class:j(u.$style.variablesRow),"data-test-id":"variables-row"},[k("td",Te,[k("div",null,[w.editing?(r(),M($,{key:1,ref_key:"keyInputRef",ref:t,modelValue:i.value.key,"onUpdate:modelValue":s[0]||(s[0]=e=>i.value.key=e),label:"",name:"key","data-test-id":"variable-row-key-input",placeholder:n(o).baseText("variables.editing.key.placeholder"),required:"","validate-on-blur":"","validation-rules":B,onValidate:s[1]||(s[1]=e=>I("key",e))},null,8,["modelValue","placeholder"])):(r(),g("span",xe,c(w.data.key),1))])]),k("td",Ce,[k("div",null,[w.editing?(r(),M($,{key:1,ref_key:"valueInputRef",ref:V,modelValue:i.value.value,"onUpdate:modelValue":s[2]||(s[2]=e=>i.value.value=e),label:"",name:"value","data-test-id":"variable-row-value-input",placeholder:n(o).baseText("variables.editing.value.placeholder"),"validate-on-blur":"","validation-rules":P,onValidate:s[3]||(s[3]=e=>I("value",e))},null,8,["modelValue","placeholder"])):(r(),g("span",he,c(w.data.value),1))])]),k("td",we,[k("div",null,[_(S,{placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.usage.copyToClipboard")),1)]),default:l(()=>[i.value.key&&A.value?(r(),g("span",{key:0,class:j(u.$style.usageSyntax),onClick:W},c(A.value),3)):Q("",!0)]),_:1})])]),v.value?(r(),g("td",Ve,[w.editing?(r(),g("div",{key:0,class:j(u.$style.buttons)},[_(f,{"data-test-id":"variable-row-cancel-button",type:"tertiary",class:"mr-xs",onClick:m},{default:l(()=>[h(c(n(o).baseText("variables.row.button.cancel")),1)]),_:1}),_(f,{"data-test-id":"variable-row-save-button",disabled:!F.value,type:"primary",onClick:L},{default:l(()=>[h(c(n(o).baseText("variables.row.button.save")),1)]),_:1},8,["disabled"])],2)):(r(),g("div",{key:1,class:j([u.$style.buttons,u.$style.hoverButtons])},[_(S,{disabled:n(x).edit,placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.button.edit.onlyOwnerCanSave")),1)]),default:l(()=>[k("div",null,[_(f,{"data-test-id":"variable-row-edit-button",type:"tertiary",class:"mr-xs",disabled:!n(x).edit,onClick:X},{default:l(()=>[h(c(n(o).baseText("variables.row.button.edit")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"]),_(S,{disabled:n(x).delete,placement:"top"},{content:l(()=>[h(c(n(o).baseText("variables.row.button.delete.onlyOwnerCanDelete")),1)]),default:l(()=>[k("div",null,[_(f,{"data-test-id":"variable-row-delete-button",type:"tertiary",disabled:!n(x).delete,onClick:q},{default:l(()=>[h(c(n(o).baseText("variables.row.button.delete")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"])],2))])):Q("",!0)],2)}}}),Se="_variablesRow_rbd77_5",Re="_hoverButtons_rbd77_5",Ee="_buttons_rbd77_14",Ae="_usageSyntax_rbd77_25",Be={variablesRow:Se,hoverButtons:Re,buttons:Ee,usageSyntax:Ae},Me={$style:Be},Ue=ne($e,[["__cssModules",Me]]),Ie={key:0},Oe={key:1},D="@tmpvar",De=oe({__name:"VariablesView",setup(w){const E=ee(),p=re(),o=ae(),N=ce(),G=pe(),d=le(),H=de(),x=ue();let i=()=>{};const b=T(null),{showError:F}=J(),t=T([]),V=T({}),A=te(o.currentUser),v=R(()=>E.isEnterpriseFeatureEnabled(se.Variables)),B=R(()=>v.value&&A.create),P=R(()=>[{id:0,path:"name",label:d.baseText("variables.table.key"),classes:["variables-key-column"]},{id:1,path:"value",label:d.baseText("variables.table.value"),classes:["variables-value-column"]},{id:2,path:"usage",label:d.baseText("variables.table.usage"),classes:["variables-usage-column"]},...v.value?[{id:3,path:"actions",label:""}]:[]]),C=R(()=>N.contextBasedTranslationKeys),m=T([]),L=(e,a,y)=>`${e.id}`.startsWith(D)?-1:`${a.id}`.startsWith(D)?1:m.value.includes(e.id)&&m.value.includes(a.id)?m.value.indexOf(e.id)-m.value.indexOf(a.id):m.value.includes(e.id)?-1:m.value.includes(a.id)?1:y==="asc"?f(e).trim().localeCompare(f(a).trim()):f(a).trim().localeCompare(f(e).trim()),X={nameAsc:(e,a)=>L(e,a,"asc"),nameDesc:(e,a)=>L(e,a,"desc")};function q(){m.value=[]}async function I(){await p.fetchAllVariables(),t.value=[...p.variables]}function W(){const e={id:be(D),key:"",value:""};b.value&&(b.value.$refs.listWrapperRef&&(b.value.$refs.listWrapperRef.scrollTop=0),b.value.currentPage!==1&&b.value.setCurrentPage(1)),t.value.unshift(e),V.value[e.id]=!0,G.track("User clicked add variable button")}async function z(e){let a;try{if(typeof e.id=="string"&&e.id.startsWith(D)){const{id:y,...K}=e;a=await p.createVariable(K),t.value.unshift(a),t.value=t.value.filter(O=>O.id!==e.id),m.value.unshift(a.id)}else a=await p.updateVariable(e),t.value=t.value.filter(y=>y.id!==e.id),t.value.push(a),u(a)}catch(y){F(y,d.baseText("variables.errors.save"))}}function u(e){V.value={...V.value,[e.id]:!V.value[e.id]}}function s(e){typeof e.id=="string"&&e.id.startsWith(D)?t.value=t.value.filter(a=>a.id!==e.id):u(e)}async function $(e){try{if(await H.confirm(d.baseText("variables.modals.deleteConfirm.message",{interpolate:{name:e.key}}),d.baseText("variables.modals.deleteConfirm.title"),{confirmButtonText:d.baseText("variables.modals.deleteConfirm.confirmButton"),cancelButtonText:d.baseText("variables.modals.deleteConfirm.cancelButton")})!==ve)return;await p.deleteVariable(e),t.value=t.value.filter(y=>y.id!==e.id)}catch(a){F(a,d.baseText("variables.errors.delete"))}}function S(){N.goToUpgrade("variables","upgrade-variables")}function f(e){return e.key}return _e(()=>{i=x.$onAction(({name:e,after:a})=>{e==="pullWorkfolder"&&a&&a(()=>{I()})})}),ke(()=>{i()}),(e,a)=>{const y=U("n8n-button"),K=U("n8n-tooltip"),O=U("n8n-action-box");return r(),M(me,{ref_key:"layoutRef",ref:b,class:"variables-view","resource-key":"variables",disabled:!v.value,resources:t.value,initialize:I,shareable:!1,"display-name":f,"sort-fns":X,"sort-options":["nameAsc","nameDesc"],"show-filters-dropdown":!1,type:"datatable","type-props":{columns:P.value},onSort:q,"onClick:add":W},ge({"add-button":l(()=>[_(K,{placement:"top",disabled:B.value},{content:l(()=>[v.value?(r(),g("span",Oe,c(n(d).baseText("variables.add.onlyOwnerCanCreate")),1)):(r(),g("span",Ie,c(n(d).baseText(`variables.add.unavailable${t.value.length===0?".empty":""}`)),1))]),default:l(()=>[k("div",null,[_(y,{size:"large",block:"",disabled:!B.value,"data-test-id":"resources-list-add",onClick:W},{default:l(()=>[h(c(e.$locale.baseText("variables.add")),1)]),_:1},8,["disabled"])])]),_:1},8,["disabled"])]),default:l(({data:Z})=>[(r(),M(Ue,{key:Z.id,editing:V.value[Z.id],data:Z,onSave:z,onEdit:u,onCancel:s,onDelete:$},null,8,["editing","data"]))]),_:2},[v.value?void 0:{name:"preamble",fn:l(()=>[_(O,{class:"mb-m","data-test-id":"unavailable-resources-list",emoji:"👋",heading:e.$locale.baseText(C.value.variables.unavailable.title),description:e.$locale.baseText(C.value.variables.unavailable.description),"button-text":e.$locale.baseText(C.value.variables.unavailable.button),"button-type":"secondary","onClick:button":S},null,8,["heading","description","button-text"])]),key:"0"},!v.value||v.value&&!B.value?{name:"empty",fn:l(()=>[v.value?B.value?Q("",!0):(r(),M(O,{key:1,"data-test-id":"cannot-create-variables",emoji:"👋",heading:e.$locale.baseText("variables.empty.notAllowedToCreate.heading",{interpolate:{name:n(o).currentUser.firstName}}),description:e.$locale.baseText("variables.empty.notAllowedToCreate.description"),onClick:S},null,8,["heading","description"])):(r(),M(O,{key:0,"data-test-id":"unavailable-resources-list",emoji:"👋",heading:e.$locale.baseText(C.value.variables.unavailable.title),description:e.$locale.baseText(C.value.variables.unavailable.description),"button-text":e.$locale.baseText(C.value.variables.unavailable.button),"button-type":"secondary","onClick:button":S},null,8,["heading","description","button-text"]))]),key:"1"}:void 0]),1032,["disabled","resources","type-props"])}}}),Ne="_sidebarContainer_1qflh_9",Fe={"type-input":"_type-input_1qflh_5",sidebarContainer:Ne},Le={$style:Fe},fa=ne(De,[["__cssModules",Le],["__scopeId","data-v-ea707e68"]]);export{fa as default};
+//# sourceMappingURL=VariablesView-F5vY_O7t.js.map

package/dist/assets/{VariablesView-VWkgCVLM.js.map → VariablesView-F5vY_O7t.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VariablesView-VWkgCVLM.js","sources":["../../src/components/VariablesRow.vue","../../src/views/VariablesView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ComponentPublicInstance, PropType } from 'vue';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { EnvironmentVariable, Rule, RuleGroup } from '@/Interface';\nimport { useI18n } from '@/composables/useI18n';\nimport { useToast } from '@/composables/useToast';\nimport { useClipboard } from '@/composables/useClipboard';\nimport { EnterpriseEditionFeature } from '@/constants';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { getVariablesPermissions } from '@/permissions';\n\nconst i18n = useI18n();\nconst clipboard = useClipboard();\nconst { showMessage } = useToast();\nconst settingsStore = useSettingsStore();\nconst usersStore = useUsersStore();\n\nconst emit = defineEmits(['save', 'cancel', 'edit', 'delete']);\n\nconst props = defineProps({\n\tdata: {\n\t\ttype: Object as PropType<EnvironmentVariable>,\n\t\tdefault: () => ({}),\n\t},\n\tediting: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n});\n\nconst permissions = getVariablesPermissions(usersStore.currentUser);\nconst modelValue = ref<EnvironmentVariable>({ ...props.data });\n\nconst formValidationStatus = ref<Record<string, boolean>>({\n\tkey: false,\n\tvalue: false,\n});\nconst formValid = computed(() => {\n\treturn formValidationStatus.value.key && formValidationStatus.value.value;\n});\n\nconst keyInputRef = ref<ComponentPublicInstance & { inputRef?: HTMLElement }>();\nconst valueInputRef = ref<HTMLElement>();\n\nconst usage = ref(`$vars.${props.data.key}`);\n\nconst isFeatureEnabled = computed(() =>\n\tsettingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),\n);\n\nconst showActions = computed(\n\t() => isFeatureEnabled.value && (permissions.edit || permissions.delete),\n);\n\nonMounted(() => {\n\tfocusFirstInput();\n});\n\nconst keyValidationRules: Array<Rule | RuleGroup> = [\n\t{ name: 'REQUIRED' },\n\t{ name: 'MAX_LENGTH', config: { maximum: 50 } },\n\t{\n\t\tname: 'MATCH_REGEX',\n\t\tconfig: {\n\t\t\tregex: /^[a-zA-Z]/,\n\t\t\tmessage: i18n.baseText('variables.editing.key.error.startsWithLetter'),\n\t\t},\n\t},\n\t{\n\t\tname: 'MATCH_REGEX',\n\t\tconfig: {\n\t\t\tregex: /^[a-zA-Z][a-zA-Z0-9_]*$/,\n\t\t\tmessage: i18n.baseText('variables.editing.key.error.jsonKey'),\n\t\t},\n\t},\n];\n\nconst valueValidationRules: Array<Rule | RuleGroup> = [\n\t{ name: 'MAX_LENGTH', config: { maximum: 220 } },\n];\n\nwatch(\n\t() => modelValue.value.key,\n\tasync () => {\n\t\tawait nextTick();\n\t\tif (formValidationStatus.value.key) {\n\t\t\tupdateUsageSyntax();\n\t\t}\n\t},\n);\n\nfunction updateUsageSyntax() {\n\tusage.value = `$vars.${modelValue.value.key || props.data.key}`;\n}\n\nasync function onCancel() {\n\tmodelValue.value = { ...props.data };\n\temit('cancel', modelValue.value);\n}\n\nasync function onSave() {\n\temit('save', modelValue.value);\n}\n\nasync function onEdit() {\n\temit('edit', modelValue.value);\n\n\tawait nextTick();\n\n\tfocusFirstInput();\n}\n\nasync function onDelete() {\n\temit('delete', modelValue.value);\n}\n\nfunction onValidate(key: string, value: boolean) {\n\tformValidationStatus.value[key] = value;\n}\n\nfunction onUsageClick() {\n\tvoid clipboard.copy(usage.value);\n\tshowMessage({\n\t\ttitle: i18n.baseText('variables.row.usage.copiedToClipboard'),\n\t\ttype: 'success',\n\t});\n}\n\nfunction focusFirstInput() {\n\tkeyInputRef.value?.inputRef?.focus?.();\n}\n</script>\n\n<template>\n\t<tr :class=\"$style.variablesRow\" data-test-id=\"variables-row\">\n\t\t<td class=\"variables-key-column\">\n\t\t\t<div>\n\t\t\t\t<span v-if=\"!editing\">{{ data.key }}</span>\n\t\t\t\t<n8n-form-input\n\t\t\t\t\tv-else\n\t\t\t\t\tref=\"keyInputRef\"\n\t\t\t\t\tv-model=\"modelValue.key\"\n\t\t\t\t\tlabel\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tdata-test-id=\"variable-row-key-input\"\n\t\t\t\t\t:placeholder=\"i18n.baseText('variables.editing.key.placeholder')\"\n\t\t\t\t\trequired\n\t\t\t\t\tvalidate-on-blur\n\t\t\t\t\t:validation-rules=\"keyValidationRules\"\n\t\t\t\t\t@validate=\"(value) => onValidate('key', value)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</td>\n\t\t<td class=\"variables-value-column\">\n\t\t\t<div>\n\t\t\t\t<span v-if=\"!editing\">{{ data.value }}</span>\n\t\t\t\t<n8n-form-input\n\t\t\t\t\tv-else\n\t\t\t\t\tref=\"valueInputRef\"\n\t\t\t\t\tv-model=\"modelValue.value\"\n\t\t\t\t\tlabel\n\t\t\t\t\tname=\"value\"\n\t\t\t\t\tdata-test-id=\"variable-row-value-input\"\n\t\t\t\t\t:placeholder=\"i18n.baseText('variables.editing.value.placeholder')\"\n\t\t\t\t\tvalidate-on-blur\n\t\t\t\t\t:validation-rules=\"valueValidationRules\"\n\t\t\t\t\t@validate=\"(value) => onValidate('value', value)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</td>\n\t\t<td class=\"variables-usage-column\">\n\t\t\t<div>\n\t\t\t\t<n8n-tooltip placement=\"top\">\n\t\t\t\t\t<span v-if=\"modelValue.key && usage\" :class=\"$style.usageSyntax\" @click=\"onUsageClick\">{{\n\t\t\t\t\t\tusage\n\t\t\t\t\t}}</span>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.usage.copyToClipboard') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t</div>\n\t\t</td>\n\t\t<td v-if=\"isFeatureEnabled\">\n\t\t\t<div v-if=\"editing\" :class=\"$style.buttons\">\n\t\t\t\t<n8n-button\n\t\t\t\t\tdata-test-id=\"variable-row-cancel-button\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"mr-xs\"\n\t\t\t\t\t@click=\"onCancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ i18n.baseText('variables.row.button.cancel') }}\n\t\t\t\t</n8n-button>\n\t\t\t\t<n8n-button\n\t\t\t\t\tdata-test-id=\"variable-row-save-button\"\n\t\t\t\t\t:disabled=\"!formValid\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"onSave\"\n\t\t\t\t>\n\t\t\t\t\t{{ i18n.baseText('variables.row.button.save') }}\n\t\t\t\t</n8n-button>\n\t\t\t</div>\n\t\t\t<div v-else :class=\"[$style.buttons, $style.hoverButtons]\">\n\t\t\t\t<n8n-tooltip :disabled=\"permissions.edit\" placement=\"top\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<n8n-button\n\t\t\t\t\t\t\tdata-test-id=\"variable-row-edit-button\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\tclass=\"mr-xs\"\n\t\t\t\t\t\t\t:disabled=\"!permissions.edit\"\n\t\t\t\t\t\t\t@click=\"onEdit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.edit') }}\n\t\t\t\t\t\t</n8n-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.edit.onlyOwnerCanSave') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t\t<n8n-tooltip :disabled=\"permissions.delete\" placement=\"top\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<n8n-button\n\t\t\t\t\t\t\tdata-test-id=\"variable-row-delete-button\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\t:disabled=\"!permissions.delete\"\n\t\t\t\t\t\t\t@click=\"onDelete\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.delete') }}\n\t\t\t\t\t\t</n8n-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.delete.onlyOwnerCanDelete') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t</div>\n\t\t</td>\n\t</tr>\n</template>\n\n<style lang=\"scss\" module>\n.variablesRow {\n\t&:hover {\n\t\t.hoverButtons {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\ttd {\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmin-height: 40px;\n\t\t}\n\t}\n}\n\n.buttons {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tjustify-content: flex-end;\n}\n\n.hoverButtons {\n\topacity: 0;\n\ttransition: opacity 0.2s ease;\n}\n\n.usageSyntax {\n\tcursor: pointer;\n\tbackground: var(--color-variables-usage-syntax-bg);\n\tcolor: var(--color-variables-usage-font);\n\tfont-family: var(--font-family-monospace);\n\tfont-size: var(--font-size-s);\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue';\nimport { useEnvironmentsStore } from '@/stores/environments.ee.store';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useSourceControlStore } from '@/stores/sourceControl.store';\nimport { useUIStore } from '@/stores/ui.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { useI18n } from '@/composables/useI18n';\nimport { useTelemetry } from '@/composables/useTelemetry';\nimport { useToast } from '@/composables/useToast';\nimport { useMessage } from '@/composables/useMessage';\n\nimport ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';\nimport VariablesRow from '@/components/VariablesRow.vue';\n\nimport { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';\nimport type {\n\tDatatableColumn,\n\tEnvironmentVariable,\n\tTemporaryEnvironmentVariable,\n} from '@/Interface';\nimport { uid } from 'n8n-design-system/utils';\nimport { getVariablesPermissions } from '@/permissions';\n\nconst settingsStore = useSettingsStore();\nconst environmentsStore = useEnvironmentsStore();\nconst usersStore = useUsersStore();\nconst uiStore = useUIStore();\nconst telemetry = useTelemetry();\nconst i18n = useI18n();\nconst message = useMessage();\nconst sourceControlStore = useSourceControlStore();\nlet sourceControlStoreUnsubscribe = () => {};\n\nconst layoutRef = ref<InstanceType<typeof ResourcesListLayout> | null>(null);\n\nconst { showError } = useToast();\n\nconst TEMPORARY_VARIABLE_UID_BASE = '@tmpvar';\n\nconst allVariables = ref<Array<EnvironmentVariable | TemporaryEnvironmentVariable>>([]);\nconst editMode = ref<Record<string, boolean>>({});\n\nconst permissions = getVariablesPermissions(usersStore.currentUser);\n\nconst isFeatureEnabled = computed(() =>\n\tsettingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),\n);\nconst canCreateVariables = computed(() => isFeatureEnabled.value && permissions.create);\n\nconst datatableColumns = computed<DatatableColumn[]>(() => [\n\t{\n\t\tid: 0,\n\t\tpath: 'name',\n\t\tlabel: i18n.baseText('variables.table.key'),\n\t\tclasses: ['variables-key-column'],\n\t},\n\t{\n\t\tid: 1,\n\t\tpath: 'value',\n\t\tlabel: i18n.baseText('variables.table.value'),\n\t\tclasses: ['variables-value-column'],\n\t},\n\t{\n\t\tid: 2,\n\t\tpath: 'usage',\n\t\tlabel: i18n.baseText('variables.table.usage'),\n\t\tclasses: ['variables-usage-column'],\n\t},\n\t...(isFeatureEnabled.value\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tid: 3,\n\t\t\t\t\tpath: 'actions',\n\t\t\t\t\tlabel: '',\n\t\t\t\t},\n\t\t  ]\n\t\t: []),\n]);\n\nconst contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);\n\nconst newlyAddedVariableIds = ref<number[]>([]);\n\nconst nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: 'asc' | 'desc') => {\n\tif (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\treturn -1;\n\t} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\treturn 1;\n\t} else if (\n\t\tnewlyAddedVariableIds.value.includes(a.id) &&\n\t\tnewlyAddedVariableIds.value.includes(b.id)\n\t) {\n\t\treturn newlyAddedVariableIds.value.indexOf(a.id) - newlyAddedVariableIds.value.indexOf(b.id);\n\t} else if (newlyAddedVariableIds.value.includes(a.id)) {\n\t\treturn -1;\n\t} else if (newlyAddedVariableIds.value.includes(b.id)) {\n\t\treturn 1;\n\t}\n\n\treturn direction === 'asc'\n\t\t? displayName(a).trim().localeCompare(displayName(b).trim())\n\t\t: displayName(b).trim().localeCompare(displayName(a).trim());\n};\nconst sortFns = {\n\tnameAsc: (a: EnvironmentVariable, b: EnvironmentVariable) => {\n\t\treturn nameSortFn(a, b, 'asc');\n\t},\n\tnameDesc: (a: EnvironmentVariable, b: EnvironmentVariable) => {\n\t\treturn nameSortFn(a, b, 'desc');\n\t},\n};\n\nfunction resetNewVariablesList() {\n\tnewlyAddedVariableIds.value = [];\n}\n\nasync function initialize() {\n\tawait environmentsStore.fetchAllVariables();\n\n\tallVariables.value = [...environmentsStore.variables];\n}\n\nfunction addTemporaryVariable() {\n\tconst temporaryVariable: TemporaryEnvironmentVariable = {\n\t\tid: uid(TEMPORARY_VARIABLE_UID_BASE),\n\t\tkey: '',\n\t\tvalue: '',\n\t};\n\n\tif (layoutRef.value) {\n\t\t// Reset scroll position\n\t\tif (layoutRef.value.$refs.listWrapperRef) {\n\t\t\tlayoutRef.value.$refs.listWrapperRef.scrollTop = 0;\n\t\t}\n\n\t\t// Reset pagination\n\t\tif (layoutRef.value.currentPage !== 1) {\n\t\t\tlayoutRef.value.setCurrentPage(1);\n\t\t}\n\t}\n\n\tallVariables.value.unshift(temporaryVariable);\n\teditMode.value[temporaryVariable.id] = true;\n\n\ttelemetry.track('User clicked add variable button');\n}\n\nasync function saveVariable(data: EnvironmentVariable | TemporaryEnvironmentVariable) {\n\tlet updatedVariable: EnvironmentVariable;\n\n\ttry {\n\t\tif (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\t\tconst { id, ...rest } = data;\n\t\t\tupdatedVariable = await environmentsStore.createVariable(rest);\n\t\t\tallVariables.value.unshift(updatedVariable);\n\t\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t\t\tnewlyAddedVariableIds.value.unshift(updatedVariable.id);\n\t\t} else {\n\t\t\tupdatedVariable = await environmentsStore.updateVariable(data as EnvironmentVariable);\n\t\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t\t\tallVariables.value.push(updatedVariable);\n\t\t\ttoggleEditing(updatedVariable);\n\t\t}\n\t} catch (error) {\n\t\tshowError(error, i18n.baseText('variables.errors.save'));\n\t}\n}\n\nfunction toggleEditing(data: EnvironmentVariable) {\n\teditMode.value = {\n\t\t...editMode.value,\n\t\t[data.id]: !editMode.value[data.id],\n\t};\n}\n\nfunction cancelEditing(data: EnvironmentVariable | TemporaryEnvironmentVariable) {\n\tif (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t} else {\n\t\ttoggleEditing(data as EnvironmentVariable);\n\t}\n}\n\nasync function deleteVariable(data: EnvironmentVariable) {\n\ttry {\n\t\tconst confirmed = await message.confirm(\n\t\t\ti18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }),\n\t\t\ti18n.baseText('variables.modals.deleteConfirm.title'),\n\t\t\t{\n\t\t\t\tconfirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'),\n\t\t\t\tcancelButtonText: i18n.baseText('variables.modals.deleteConfirm.cancelButton'),\n\t\t\t},\n\t\t);\n\n\t\tif (confirmed !== MODAL_CONFIRM) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait environmentsStore.deleteVariable(data);\n\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t} catch (error) {\n\t\tshowError(error, i18n.baseText('variables.errors.delete'));\n\t}\n}\n\nfunction goToUpgrade() {\n\tvoid uiStore.goToUpgrade('variables', 'upgrade-variables');\n}\n\nfunction displayName(resource: EnvironmentVariable) {\n\treturn resource.key;\n}\n\nonBeforeMount(() => {\n\tsourceControlStoreUnsubscribe = sourceControlStore.$onAction(({ name, after }) => {\n\t\tif (name === 'pullWorkfolder' && after) {\n\t\t\tafter(() => {\n\t\t\t\tvoid initialize();\n\t\t\t});\n\t\t}\n\t});\n});\n\nonBeforeUnmount(() => {\n\tsourceControlStoreUnsubscribe();\n});\n</script>\n\n<template>\n\t<ResourcesListLayout\n\t\tref=\"layoutRef\"\n\t\tclass=\"variables-view\"\n\t\tresource-key=\"variables\"\n\t\t:disabled=\"!isFeatureEnabled\"\n\t\t:resources=\"allVariables\"\n\t\t:initialize=\"initialize\"\n\t\t:shareable=\"false\"\n\t\t:display-name=\"displayName\"\n\t\t:sort-fns=\"sortFns\"\n\t\t:sort-options=\"['nameAsc', 'nameDesc']\"\n\t\t:show-filters-dropdown=\"false\"\n\t\ttype=\"datatable\"\n\t\t:type-props=\"{ columns: datatableColumns }\"\n\t\t@sort=\"resetNewVariablesList\"\n\t\t@click:add=\"addTemporaryVariable\"\n\t>\n\t\t<template #add-button>\n\t\t\t<n8n-tooltip placement=\"top\" :disabled=\"canCreateVariables\">\n\t\t\t\t<div>\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tblock\n\t\t\t\t\t\t:disabled=\"!canCreateVariables\"\n\t\t\t\t\t\tdata-test-id=\"resources-list-add\"\n\t\t\t\t\t\t@click=\"addTemporaryVariable\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ $locale.baseText(`variables.add`) }}\n\t\t\t\t\t</n8n-button>\n\t\t\t\t</div>\n\t\t\t\t<template #content>\n\t\t\t\t\t<span v-if=\"!isFeatureEnabled\">{{\n\t\t\t\t\t\ti18n.baseText(`variables.add.unavailable${allVariables.length === 0 ? '.empty' : ''}`)\n\t\t\t\t\t}}</span>\n\t\t\t\t\t<span v-else>{{ i18n.baseText('variables.add.onlyOwnerCanCreate') }}</span>\n\t\t\t\t</template>\n\t\t\t</n8n-tooltip>\n\t\t</template>\n\t\t<template v-if=\"!isFeatureEnabled\" #preamble>\n\t\t\t<n8n-action-box\n\t\t\t\tclass=\"mb-m\"\n\t\t\t\tdata-test-id=\"unavailable-resources-list\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)\"\n\t\t\t\t:description=\"\n\t\t\t\t\t$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)\n\t\t\t\t\"\n\t\t\t\t:button-text=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)\"\n\t\t\t\tbutton-type=\"secondary\"\n\t\t\t\t@click:button=\"goToUpgrade\"\n\t\t\t/>\n\t\t</template>\n\t\t<template v-if=\"!isFeatureEnabled || (isFeatureEnabled && !canCreateVariables)\" #empty>\n\t\t\t<n8n-action-box\n\t\t\t\tv-if=\"!isFeatureEnabled\"\n\t\t\t\tdata-test-id=\"unavailable-resources-list\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)\"\n\t\t\t\t:description=\"\n\t\t\t\t\t$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)\n\t\t\t\t\"\n\t\t\t\t:button-text=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)\"\n\t\t\t\tbutton-type=\"secondary\"\n\t\t\t\t@click:button=\"goToUpgrade\"\n\t\t\t/>\n\t\t\t<n8n-action-box\n\t\t\t\tv-else-if=\"!canCreateVariables\"\n\t\t\t\tdata-test-id=\"cannot-create-variables\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"\n\t\t\t\t\t$locale.baseText('variables.empty.notAllowedToCreate.heading', {\n\t\t\t\t\t\tinterpolate: { name: usersStore.currentUser.firstName },\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t\t:description=\"$locale.baseText('variables.empty.notAllowedToCreate.description')\"\n\t\t\t\t@click=\"goToUpgrade\"\n\t\t\t/>\n\t\t</template>\n\t\t<template #default=\"{ data }\">\n\t\t\t<VariablesRow\n\t\t\t\t:key=\"data.id\"\n\t\t\t\t:editing=\"editMode[data.id]\"\n\t\t\t\t:data=\"data\"\n\t\t\t\t@save=\"saveVariable\"\n\t\t\t\t@edit=\"toggleEditing\"\n\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t@delete=\"deleteVariable\"\n\t\t\t/>\n\t\t</template>\n\t</ResourcesListLayout>\n</template>\n\n<style lang=\"scss\" module>\n.type-input {\n\t--max-width: 265px;\n}\n\n.sidebarContainer ul {\n\tpadding: 0 !important;\n}\n</style>\n\n<style lang=\"scss\" scoped>\n@use 'n8n-design-system/css/common/var.scss';\n\n.variables-view {\n\t:deep(.datatable) {\n\t\ttable {\n\t\t\ttable-layout: fixed;\n\t\t}\n\n\t\tth,\n\t\ttd {\n\t\t\twidth: 25%;\n\n\t\t\t@media screen and (max-width: var.$md) {\n\t\t\t\twidth: 33.33%;\n\t\t\t}\n\n\t\t\t&.variables-value-column,\n\t\t\t&.variables-key-column,\n\t\t\t&.variables-usage-column {\n\t\t\t\t> div {\n\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t> span {\n\t\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\t\theight: 18px;\n\t\t\t\t\t}\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.variables-usage-column {\n\t\t\t@media screen and (max-width: var.$md) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["i18n","useI18n","clipboard","useClipboard","showMessage","useToast","settingsStore","useSettingsStore","usersStore","useUsersStore","permissions","getVariablesPermissions","modelValue","ref","props","formValidationStatus","formValid","computed","keyInputRef","valueInputRef","usage","isFeatureEnabled","EnterpriseEditionFeature","onMounted","focusFirstInput","keyValidationRules","valueValidationRules","watch","nextTick","updateUsageSyntax","onCancel","emit","onSave","onEdit","onDelete","onValidate","key","value","onUsageClick","_c","_b","_a","TEMPORARY_VARIABLE_UID_BASE","environmentsStore","useEnvironmentsStore","uiStore","useUIStore","telemetry","useTelemetry","message","useMessage","sourceControlStore","useSourceControlStore","sourceControlStoreUnsubscribe","layoutRef","showError","allVariables","editMode","canCreateVariables","datatableColumns","contextBasedTranslationKeys","newlyAddedVariableIds","nameSortFn","a","b","direction","displayName","sortFns","resetNewVariablesList","initialize","addTemporaryVariable","temporaryVariable","uid","saveVariable","data","updatedVariable","id","rest","variable","toggleEditing","error","cancelEditing","deleteVariable","MODAL_CONFIRM","goToUpgrade","resource","onBeforeMount","name","after","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"VariablesView-F5vY_O7t.js","sources":["../../src/components/VariablesRow.vue","../../src/views/VariablesView.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ComponentPublicInstance, PropType } from 'vue';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { EnvironmentVariable, Rule, RuleGroup } from '@/Interface';\nimport { useI18n } from '@/composables/useI18n';\nimport { useToast } from '@/composables/useToast';\nimport { useClipboard } from '@/composables/useClipboard';\nimport { EnterpriseEditionFeature } from '@/constants';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { getVariablesPermissions } from '@/permissions';\n\nconst i18n = useI18n();\nconst clipboard = useClipboard();\nconst { showMessage } = useToast();\nconst settingsStore = useSettingsStore();\nconst usersStore = useUsersStore();\n\nconst emit = defineEmits(['save', 'cancel', 'edit', 'delete']);\n\nconst props = defineProps({\n\tdata: {\n\t\ttype: Object as PropType<EnvironmentVariable>,\n\t\tdefault: () => ({}),\n\t},\n\tediting: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n});\n\nconst permissions = getVariablesPermissions(usersStore.currentUser);\nconst modelValue = ref<EnvironmentVariable>({ ...props.data });\n\nconst formValidationStatus = ref<Record<string, boolean>>({\n\tkey: false,\n\tvalue: false,\n});\nconst formValid = computed(() => {\n\treturn formValidationStatus.value.key && formValidationStatus.value.value;\n});\n\nconst keyInputRef = ref<ComponentPublicInstance & { inputRef?: HTMLElement }>();\nconst valueInputRef = ref<HTMLElement>();\n\nconst usage = ref(`$vars.${props.data.key}`);\n\nconst isFeatureEnabled = computed(() =>\n\tsettingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),\n);\n\nconst showActions = computed(\n\t() => isFeatureEnabled.value && (permissions.edit || permissions.delete),\n);\n\nonMounted(() => {\n\tfocusFirstInput();\n});\n\nconst keyValidationRules: Array<Rule | RuleGroup> = [\n\t{ name: 'REQUIRED' },\n\t{ name: 'MAX_LENGTH', config: { maximum: 50 } },\n\t{\n\t\tname: 'MATCH_REGEX',\n\t\tconfig: {\n\t\t\tregex: /^[a-zA-Z]/,\n\t\t\tmessage: i18n.baseText('variables.editing.key.error.startsWithLetter'),\n\t\t},\n\t},\n\t{\n\t\tname: 'MATCH_REGEX',\n\t\tconfig: {\n\t\t\tregex: /^[a-zA-Z][a-zA-Z0-9_]*$/,\n\t\t\tmessage: i18n.baseText('variables.editing.key.error.jsonKey'),\n\t\t},\n\t},\n];\n\nconst valueValidationRules: Array<Rule | RuleGroup> = [\n\t{ name: 'MAX_LENGTH', config: { maximum: 220 } },\n];\n\nwatch(\n\t() => modelValue.value.key,\n\tasync () => {\n\t\tawait nextTick();\n\t\tif (formValidationStatus.value.key) {\n\t\t\tupdateUsageSyntax();\n\t\t}\n\t},\n);\n\nfunction updateUsageSyntax() {\n\tusage.value = `$vars.${modelValue.value.key || props.data.key}`;\n}\n\nasync function onCancel() {\n\tmodelValue.value = { ...props.data };\n\temit('cancel', modelValue.value);\n}\n\nasync function onSave() {\n\temit('save', modelValue.value);\n}\n\nasync function onEdit() {\n\temit('edit', modelValue.value);\n\n\tawait nextTick();\n\n\tfocusFirstInput();\n}\n\nasync function onDelete() {\n\temit('delete', modelValue.value);\n}\n\nfunction onValidate(key: string, value: boolean) {\n\tformValidationStatus.value[key] = value;\n}\n\nfunction onUsageClick() {\n\tvoid clipboard.copy(usage.value);\n\tshowMessage({\n\t\ttitle: i18n.baseText('variables.row.usage.copiedToClipboard'),\n\t\ttype: 'success',\n\t});\n}\n\nfunction focusFirstInput() {\n\tkeyInputRef.value?.inputRef?.focus?.();\n}\n</script>\n\n<template>\n\t<tr :class=\"$style.variablesRow\" data-test-id=\"variables-row\">\n\t\t<td class=\"variables-key-column\">\n\t\t\t<div>\n\t\t\t\t<span v-if=\"!editing\">{{ data.key }}</span>\n\t\t\t\t<n8n-form-input\n\t\t\t\t\tv-else\n\t\t\t\t\tref=\"keyInputRef\"\n\t\t\t\t\tv-model=\"modelValue.key\"\n\t\t\t\t\tlabel\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tdata-test-id=\"variable-row-key-input\"\n\t\t\t\t\t:placeholder=\"i18n.baseText('variables.editing.key.placeholder')\"\n\t\t\t\t\trequired\n\t\t\t\t\tvalidate-on-blur\n\t\t\t\t\t:validation-rules=\"keyValidationRules\"\n\t\t\t\t\t@validate=\"(value) => onValidate('key', value)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</td>\n\t\t<td class=\"variables-value-column\">\n\t\t\t<div>\n\t\t\t\t<span v-if=\"!editing\">{{ data.value }}</span>\n\t\t\t\t<n8n-form-input\n\t\t\t\t\tv-else\n\t\t\t\t\tref=\"valueInputRef\"\n\t\t\t\t\tv-model=\"modelValue.value\"\n\t\t\t\t\tlabel\n\t\t\t\t\tname=\"value\"\n\t\t\t\t\tdata-test-id=\"variable-row-value-input\"\n\t\t\t\t\t:placeholder=\"i18n.baseText('variables.editing.value.placeholder')\"\n\t\t\t\t\tvalidate-on-blur\n\t\t\t\t\t:validation-rules=\"valueValidationRules\"\n\t\t\t\t\t@validate=\"(value) => onValidate('value', value)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</td>\n\t\t<td class=\"variables-usage-column\">\n\t\t\t<div>\n\t\t\t\t<n8n-tooltip placement=\"top\">\n\t\t\t\t\t<span v-if=\"modelValue.key && usage\" :class=\"$style.usageSyntax\" @click=\"onUsageClick\">{{\n\t\t\t\t\t\tusage\n\t\t\t\t\t}}</span>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.usage.copyToClipboard') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t</div>\n\t\t</td>\n\t\t<td v-if=\"isFeatureEnabled\">\n\t\t\t<div v-if=\"editing\" :class=\"$style.buttons\">\n\t\t\t\t<n8n-button\n\t\t\t\t\tdata-test-id=\"variable-row-cancel-button\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"mr-xs\"\n\t\t\t\t\t@click=\"onCancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ i18n.baseText('variables.row.button.cancel') }}\n\t\t\t\t</n8n-button>\n\t\t\t\t<n8n-button\n\t\t\t\t\tdata-test-id=\"variable-row-save-button\"\n\t\t\t\t\t:disabled=\"!formValid\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"onSave\"\n\t\t\t\t>\n\t\t\t\t\t{{ i18n.baseText('variables.row.button.save') }}\n\t\t\t\t</n8n-button>\n\t\t\t</div>\n\t\t\t<div v-else :class=\"[$style.buttons, $style.hoverButtons]\">\n\t\t\t\t<n8n-tooltip :disabled=\"permissions.edit\" placement=\"top\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<n8n-button\n\t\t\t\t\t\t\tdata-test-id=\"variable-row-edit-button\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\tclass=\"mr-xs\"\n\t\t\t\t\t\t\t:disabled=\"!permissions.edit\"\n\t\t\t\t\t\t\t@click=\"onEdit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.edit') }}\n\t\t\t\t\t\t</n8n-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.edit.onlyOwnerCanSave') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t\t<n8n-tooltip :disabled=\"permissions.delete\" placement=\"top\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<n8n-button\n\t\t\t\t\t\t\tdata-test-id=\"variable-row-delete-button\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\t:disabled=\"!permissions.delete\"\n\t\t\t\t\t\t\t@click=\"onDelete\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.delete') }}\n\t\t\t\t\t\t</n8n-button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<template #content>\n\t\t\t\t\t\t{{ i18n.baseText('variables.row.button.delete.onlyOwnerCanDelete') }}\n\t\t\t\t\t</template>\n\t\t\t\t</n8n-tooltip>\n\t\t\t</div>\n\t\t</td>\n\t</tr>\n</template>\n\n<style lang=\"scss\" module>\n.variablesRow {\n\t&:hover {\n\t\t.hoverButtons {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\ttd {\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmin-height: 40px;\n\t\t}\n\t}\n}\n\n.buttons {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tjustify-content: flex-end;\n}\n\n.hoverButtons {\n\topacity: 0;\n\ttransition: opacity 0.2s ease;\n}\n\n.usageSyntax {\n\tcursor: pointer;\n\tbackground: var(--color-variables-usage-syntax-bg);\n\tcolor: var(--color-variables-usage-font);\n\tfont-family: var(--font-family-monospace);\n\tfont-size: var(--font-size-s);\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue';\nimport { useEnvironmentsStore } from '@/stores/environments.ee.store';\nimport { useSettingsStore } from '@/stores/settings.store';\nimport { useSourceControlStore } from '@/stores/sourceControl.store';\nimport { useUIStore } from '@/stores/ui.store';\nimport { useUsersStore } from '@/stores/users.store';\nimport { useI18n } from '@/composables/useI18n';\nimport { useTelemetry } from '@/composables/useTelemetry';\nimport { useToast } from '@/composables/useToast';\nimport { useMessage } from '@/composables/useMessage';\n\nimport ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';\nimport VariablesRow from '@/components/VariablesRow.vue';\n\nimport { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';\nimport type {\n\tDatatableColumn,\n\tEnvironmentVariable,\n\tTemporaryEnvironmentVariable,\n} from '@/Interface';\nimport { uid } from 'n8n-design-system/utils';\nimport { getVariablesPermissions } from '@/permissions';\n\nconst settingsStore = useSettingsStore();\nconst environmentsStore = useEnvironmentsStore();\nconst usersStore = useUsersStore();\nconst uiStore = useUIStore();\nconst telemetry = useTelemetry();\nconst i18n = useI18n();\nconst message = useMessage();\nconst sourceControlStore = useSourceControlStore();\nlet sourceControlStoreUnsubscribe = () => {};\n\nconst layoutRef = ref<InstanceType<typeof ResourcesListLayout> | null>(null);\n\nconst { showError } = useToast();\n\nconst TEMPORARY_VARIABLE_UID_BASE = '@tmpvar';\n\nconst allVariables = ref<Array<EnvironmentVariable | TemporaryEnvironmentVariable>>([]);\nconst editMode = ref<Record<string, boolean>>({});\n\nconst permissions = getVariablesPermissions(usersStore.currentUser);\n\nconst isFeatureEnabled = computed(() =>\n\tsettingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),\n);\nconst canCreateVariables = computed(() => isFeatureEnabled.value && permissions.create);\n\nconst datatableColumns = computed<DatatableColumn[]>(() => [\n\t{\n\t\tid: 0,\n\t\tpath: 'name',\n\t\tlabel: i18n.baseText('variables.table.key'),\n\t\tclasses: ['variables-key-column'],\n\t},\n\t{\n\t\tid: 1,\n\t\tpath: 'value',\n\t\tlabel: i18n.baseText('variables.table.value'),\n\t\tclasses: ['variables-value-column'],\n\t},\n\t{\n\t\tid: 2,\n\t\tpath: 'usage',\n\t\tlabel: i18n.baseText('variables.table.usage'),\n\t\tclasses: ['variables-usage-column'],\n\t},\n\t...(isFeatureEnabled.value\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tid: 3,\n\t\t\t\t\tpath: 'actions',\n\t\t\t\t\tlabel: '',\n\t\t\t\t},\n\t\t  ]\n\t\t: []),\n]);\n\nconst contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);\n\nconst newlyAddedVariableIds = ref<number[]>([]);\n\nconst nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: 'asc' | 'desc') => {\n\tif (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\treturn -1;\n\t} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\treturn 1;\n\t} else if (\n\t\tnewlyAddedVariableIds.value.includes(a.id) &&\n\t\tnewlyAddedVariableIds.value.includes(b.id)\n\t) {\n\t\treturn newlyAddedVariableIds.value.indexOf(a.id) - newlyAddedVariableIds.value.indexOf(b.id);\n\t} else if (newlyAddedVariableIds.value.includes(a.id)) {\n\t\treturn -1;\n\t} else if (newlyAddedVariableIds.value.includes(b.id)) {\n\t\treturn 1;\n\t}\n\n\treturn direction === 'asc'\n\t\t? displayName(a).trim().localeCompare(displayName(b).trim())\n\t\t: displayName(b).trim().localeCompare(displayName(a).trim());\n};\nconst sortFns = {\n\tnameAsc: (a: EnvironmentVariable, b: EnvironmentVariable) => {\n\t\treturn nameSortFn(a, b, 'asc');\n\t},\n\tnameDesc: (a: EnvironmentVariable, b: EnvironmentVariable) => {\n\t\treturn nameSortFn(a, b, 'desc');\n\t},\n};\n\nfunction resetNewVariablesList() {\n\tnewlyAddedVariableIds.value = [];\n}\n\nasync function initialize() {\n\tawait environmentsStore.fetchAllVariables();\n\n\tallVariables.value = [...environmentsStore.variables];\n}\n\nfunction addTemporaryVariable() {\n\tconst temporaryVariable: TemporaryEnvironmentVariable = {\n\t\tid: uid(TEMPORARY_VARIABLE_UID_BASE),\n\t\tkey: '',\n\t\tvalue: '',\n\t};\n\n\tif (layoutRef.value) {\n\t\t// Reset scroll position\n\t\tif (layoutRef.value.$refs.listWrapperRef) {\n\t\t\tlayoutRef.value.$refs.listWrapperRef.scrollTop = 0;\n\t\t}\n\n\t\t// Reset pagination\n\t\tif (layoutRef.value.currentPage !== 1) {\n\t\t\tlayoutRef.value.setCurrentPage(1);\n\t\t}\n\t}\n\n\tallVariables.value.unshift(temporaryVariable);\n\teditMode.value[temporaryVariable.id] = true;\n\n\ttelemetry.track('User clicked add variable button');\n}\n\nasync function saveVariable(data: EnvironmentVariable | TemporaryEnvironmentVariable) {\n\tlet updatedVariable: EnvironmentVariable;\n\n\ttry {\n\t\tif (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\t\tconst { id, ...rest } = data;\n\t\t\tupdatedVariable = await environmentsStore.createVariable(rest);\n\t\t\tallVariables.value.unshift(updatedVariable);\n\t\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t\t\tnewlyAddedVariableIds.value.unshift(updatedVariable.id);\n\t\t} else {\n\t\t\tupdatedVariable = await environmentsStore.updateVariable(data as EnvironmentVariable);\n\t\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t\t\tallVariables.value.push(updatedVariable);\n\t\t\ttoggleEditing(updatedVariable);\n\t\t}\n\t} catch (error) {\n\t\tshowError(error, i18n.baseText('variables.errors.save'));\n\t}\n}\n\nfunction toggleEditing(data: EnvironmentVariable) {\n\teditMode.value = {\n\t\t...editMode.value,\n\t\t[data.id]: !editMode.value[data.id],\n\t};\n}\n\nfunction cancelEditing(data: EnvironmentVariable | TemporaryEnvironmentVariable) {\n\tif (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {\n\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t} else {\n\t\ttoggleEditing(data as EnvironmentVariable);\n\t}\n}\n\nasync function deleteVariable(data: EnvironmentVariable) {\n\ttry {\n\t\tconst confirmed = await message.confirm(\n\t\t\ti18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }),\n\t\t\ti18n.baseText('variables.modals.deleteConfirm.title'),\n\t\t\t{\n\t\t\t\tconfirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'),\n\t\t\t\tcancelButtonText: i18n.baseText('variables.modals.deleteConfirm.cancelButton'),\n\t\t\t},\n\t\t);\n\n\t\tif (confirmed !== MODAL_CONFIRM) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait environmentsStore.deleteVariable(data);\n\t\tallVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);\n\t} catch (error) {\n\t\tshowError(error, i18n.baseText('variables.errors.delete'));\n\t}\n}\n\nfunction goToUpgrade() {\n\tvoid uiStore.goToUpgrade('variables', 'upgrade-variables');\n}\n\nfunction displayName(resource: EnvironmentVariable) {\n\treturn resource.key;\n}\n\nonBeforeMount(() => {\n\tsourceControlStoreUnsubscribe = sourceControlStore.$onAction(({ name, after }) => {\n\t\tif (name === 'pullWorkfolder' && after) {\n\t\t\tafter(() => {\n\t\t\t\tvoid initialize();\n\t\t\t});\n\t\t}\n\t});\n});\n\nonBeforeUnmount(() => {\n\tsourceControlStoreUnsubscribe();\n});\n</script>\n\n<template>\n\t<ResourcesListLayout\n\t\tref=\"layoutRef\"\n\t\tclass=\"variables-view\"\n\t\tresource-key=\"variables\"\n\t\t:disabled=\"!isFeatureEnabled\"\n\t\t:resources=\"allVariables\"\n\t\t:initialize=\"initialize\"\n\t\t:shareable=\"false\"\n\t\t:display-name=\"displayName\"\n\t\t:sort-fns=\"sortFns\"\n\t\t:sort-options=\"['nameAsc', 'nameDesc']\"\n\t\t:show-filters-dropdown=\"false\"\n\t\ttype=\"datatable\"\n\t\t:type-props=\"{ columns: datatableColumns }\"\n\t\t@sort=\"resetNewVariablesList\"\n\t\t@click:add=\"addTemporaryVariable\"\n\t>\n\t\t<template #add-button>\n\t\t\t<n8n-tooltip placement=\"top\" :disabled=\"canCreateVariables\">\n\t\t\t\t<div>\n\t\t\t\t\t<n8n-button\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tblock\n\t\t\t\t\t\t:disabled=\"!canCreateVariables\"\n\t\t\t\t\t\tdata-test-id=\"resources-list-add\"\n\t\t\t\t\t\t@click=\"addTemporaryVariable\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ $locale.baseText(`variables.add`) }}\n\t\t\t\t\t</n8n-button>\n\t\t\t\t</div>\n\t\t\t\t<template #content>\n\t\t\t\t\t<span v-if=\"!isFeatureEnabled\">{{\n\t\t\t\t\t\ti18n.baseText(`variables.add.unavailable${allVariables.length === 0 ? '.empty' : ''}`)\n\t\t\t\t\t}}</span>\n\t\t\t\t\t<span v-else>{{ i18n.baseText('variables.add.onlyOwnerCanCreate') }}</span>\n\t\t\t\t</template>\n\t\t\t</n8n-tooltip>\n\t\t</template>\n\t\t<template v-if=\"!isFeatureEnabled\" #preamble>\n\t\t\t<n8n-action-box\n\t\t\t\tclass=\"mb-m\"\n\t\t\t\tdata-test-id=\"unavailable-resources-list\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)\"\n\t\t\t\t:description=\"\n\t\t\t\t\t$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)\n\t\t\t\t\"\n\t\t\t\t:button-text=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)\"\n\t\t\t\tbutton-type=\"secondary\"\n\t\t\t\t@click:button=\"goToUpgrade\"\n\t\t\t/>\n\t\t</template>\n\t\t<template v-if=\"!isFeatureEnabled || (isFeatureEnabled && !canCreateVariables)\" #empty>\n\t\t\t<n8n-action-box\n\t\t\t\tv-if=\"!isFeatureEnabled\"\n\t\t\t\tdata-test-id=\"unavailable-resources-list\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)\"\n\t\t\t\t:description=\"\n\t\t\t\t\t$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)\n\t\t\t\t\"\n\t\t\t\t:button-text=\"$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)\"\n\t\t\t\tbutton-type=\"secondary\"\n\t\t\t\t@click:button=\"goToUpgrade\"\n\t\t\t/>\n\t\t\t<n8n-action-box\n\t\t\t\tv-else-if=\"!canCreateVariables\"\n\t\t\t\tdata-test-id=\"cannot-create-variables\"\n\t\t\t\temoji=\"👋\"\n\t\t\t\t:heading=\"\n\t\t\t\t\t$locale.baseText('variables.empty.notAllowedToCreate.heading', {\n\t\t\t\t\t\tinterpolate: { name: usersStore.currentUser.firstName },\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t\t:description=\"$locale.baseText('variables.empty.notAllowedToCreate.description')\"\n\t\t\t\t@click=\"goToUpgrade\"\n\t\t\t/>\n\t\t</template>\n\t\t<template #default=\"{ data }\">\n\t\t\t<VariablesRow\n\t\t\t\t:key=\"data.id\"\n\t\t\t\t:editing=\"editMode[data.id]\"\n\t\t\t\t:data=\"data\"\n\t\t\t\t@save=\"saveVariable\"\n\t\t\t\t@edit=\"toggleEditing\"\n\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t@delete=\"deleteVariable\"\n\t\t\t/>\n\t\t</template>\n\t</ResourcesListLayout>\n</template>\n\n<style lang=\"scss\" module>\n.type-input {\n\t--max-width: 265px;\n}\n\n.sidebarContainer ul {\n\tpadding: 0 !important;\n}\n</style>\n\n<style lang=\"scss\" scoped>\n@use 'n8n-design-system/css/common/var.scss';\n\n.variables-view {\n\t:deep(.datatable) {\n\t\ttable {\n\t\t\ttable-layout: fixed;\n\t\t}\n\n\t\tth,\n\t\ttd {\n\t\t\twidth: 25%;\n\n\t\t\t@media screen and (max-width: var.$md) {\n\t\t\t\twidth: 33.33%;\n\t\t\t}\n\n\t\t\t&.variables-value-column,\n\t\t\t&.variables-key-column,\n\t\t\t&.variables-usage-column {\n\t\t\t\t> div {\n\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t> span {\n\t\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\t\theight: 18px;\n\t\t\t\t\t}\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.variables-usage-column {\n\t\t\t@media screen and (max-width: var.$md) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["i18n","useI18n","clipboard","useClipboard","showMessage","useToast","settingsStore","useSettingsStore","usersStore","useUsersStore","permissions","getVariablesPermissions","modelValue","ref","props","formValidationStatus","formValid","computed","keyInputRef","valueInputRef","usage","isFeatureEnabled","EnterpriseEditionFeature","onMounted","focusFirstInput","keyValidationRules","valueValidationRules","watch","nextTick","updateUsageSyntax","onCancel","emit","onSave","onEdit","onDelete","onValidate","key","value","onUsageClick","_c","_b","_a","TEMPORARY_VARIABLE_UID_BASE","environmentsStore","useEnvironmentsStore","uiStore","useUIStore","telemetry","useTelemetry","message","useMessage","sourceControlStore","useSourceControlStore","sourceControlStoreUnsubscribe","layoutRef","showError","allVariables","editMode","canCreateVariables","datatableColumns","contextBasedTranslationKeys","newlyAddedVariableIds","nameSortFn","a","b","direction","displayName","sortFns","resetNewVariablesList","initialize","addTemporaryVariable","temporaryVariable","uid","saveVariable","data","updatedVariable","id","rest","variable","toggleEditing","error","cancelEditing","deleteVariable","MODAL_CONFIRM","goToUpgrade","resource","onBeforeMount","name","after","onBeforeUnmount"],"mappings":"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"}