@n8n_io/n8n-demo-component - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

n8n-demo.bundled.js

@@ -56,10 +56,11 @@ /**
  */
-const st=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,s){this._$Ct=t,this._$AM=i,this._$Ci=s}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var s,e;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(i)}const o=t.element.classList;this.st.forEach((t=>{t in i||(o.remove(t),this.st.delete(t))}));for(const t in i){const s=!!i[t];s===this.st.has(t)||(null===(e=this.et)||void 0===e?void 0:e.has(t))||(s?(o.add(t),this.st.add(t)):(o.remove(t),this.st.delete(t)))}return O}});var et=function(t,i,s,e){for(var o,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(r=(n<3?o(r):n>3?o(i,s,r):o(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};function ot(t){try{JSON.parse(t)}catch(t){return!1}return!0}let nt=class extends Y{constructor(){super(...arguments),this.workflow="{}",this.frame="false",this.src="https://n8n-preview-service.internal.n8n.cloud/workflows/demo",this.collapseformobile="true",this.clicktointeract="false",this.hidecanvaserrors="false",this.disableinteractivity="false",this.theme=void 0,this.showCode=!1,this.showPreview=!0,this.fullscreen=!1,this.insideIframe=!1,this.copyText="Copy",this.isMobileView=!1,this.error=!1,this.interactive=!0,this.scrollX=0,this.scrollY=0,this.receiveMessage=({data:t,source:i})=>{const s=this.shadowRoot.getElementById("int_iframe");if(s&&ot(t)&&s.contentWindow===i){const i=JSON.parse(t);"n8nReady"===i.command?this.loadWorkflow():"openNDV"===i.command?this.fullscreen=!0:"closeNDV"===i.command?this.fullscreen=!1:"error"===i.command&&(this.error=!0,this.showPreview=!1)}},this.onDocumentScroll=()=>{this.interactive&&this.insideIframe&&!("ontouchstart"in window)&&!navigator.maxTouchPoints&&window.scrollTo(this.scrollX,this.scrollY)}}connectedCallback(){super.connectedCallback();try{this.workflow=decodeURIComponent(this.workflow)}catch(t){}"true"!==this.clicktointeract&&"true"!==this.disableinteractivity||(this.interactive=!1),window.matchMedia("only screen and (max-width: 760px)").matches&&(this.isMobileView=!0),"true"===this.collapseformobile&&this.isMobileView&&(this.showPreview=!1),window.addEventListener("message",this.receiveMessage),document.addEventListener("scroll",this.onDocumentScroll)}disconnectedCallback(){window.removeEventListener("message",this.receiveMessage),document.removeEventListener("scroll",this.onDocumentScroll),super.disconnectedCallback()}loadWorkflow(){try{const t=JSON.parse(this.workflow);if(!t)throw new Error("Missing workflow");if(!t.nodes||!Array.isArray(t.nodes))throw new Error("Must have an array of nodes");const i=this.shadowRoot.getElementById("int_iframe");i.contentWindow&&i.contentWindow.postMessage(JSON.stringify({command:"openWorkflow",workflow:t,hideNodeIssues:"true"===this.hidecanvaserrors}),"*")}catch{this.error=!0}}toggleCode(){this.showCode=!this.showCode}onMouseEnter(){this.insideIframe=!0,this.scrollX=window.scrollX,this.scrollY=window.scrollY}onMouseLeave(){this.insideIframe=!1}onOverlayClick(){"true"!==this.disableinteractivity&&(this.interactive=!0)}copyClipboard(){navigator.clipboard.writeText(this.workflow),this.copyText="Copied",setTimeout((()=>{this.copyText="Copy"}),1500)}toggleView(){this.showPreview=!0}renderIframe(){if(!this.showPreview||this.error)return N``;const t=this.theme?`?theme=${this.theme}`:"",i=`${this.src}${t}`,s=N`<iframe
+const st=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,s){this._$Ct=t,this._$AM=i,this._$Ci=s}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var s,e;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(i)}const o=t.element.classList;this.st.forEach((t=>{t in i||(o.remove(t),this.st.delete(t))}));for(const t in i){const s=!!i[t];s===this.st.has(t)||(null===(e=this.et)||void 0===e?void 0:e.has(t))||(s?(o.add(t),this.st.add(t)):(o.remove(t),this.st.delete(t)))}return O}});var et=function(t,i,s,e){for(var o,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(r=(n<3?o(r):n>3?o(i,s,r):o(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};function ot(t){try{JSON.parse(t)}catch(t){return!1}return!0}let nt=class extends Y{constructor(){super(...arguments),this.workflow="{}",this.frame="false",this.src="https://n8n-preview-service.internal.n8n.cloud/workflows/demo",this.collapseformobile="true",this.clicktointeract="false",this.hidecanvaserrors="false",this.disableinteractivity="false",this.theme=void 0,this.showCode=!1,this.showPreview=!0,this.fullscreen=!1,this.insideIframe=!1,this.copyText="Copy",this.isMobileView=!1,this.error=!1,this.interactive=!0,this.scrollX=0,this.scrollY=0,this.receiveMessage=({data:t,source:i})=>{const s=this.shadowRoot.getElementById("int_iframe");if(s&&ot(t)&&s.contentWindow===i){const i=JSON.parse(t);"n8nReady"===i.command?this.loadWorkflow():"openNDV"===i.command?this.fullscreen=!0:"closeNDV"===i.command?this.fullscreen=!1:"error"===i.command&&(this.error=!0,this.showPreview=!1)}},this.onDocumentScroll=()=>{this.interactive&&this.insideIframe&&!("ontouchstart"in window)&&!navigator.maxTouchPoints&&window.scrollTo(this.scrollX,this.scrollY)}}connectedCallback(){super.connectedCallback();try{this.workflow=decodeURIComponent(this.workflow)}catch(t){}"true"!==this.clicktointeract&&"true"!==this.disableinteractivity||(this.interactive=!1),window.matchMedia("only screen and (max-width: 760px)").matches&&(this.isMobileView=!0),"true"===this.collapseformobile&&this.isMobileView&&(this.showPreview=!1),window.addEventListener("message",this.receiveMessage),document.addEventListener("scroll",this.onDocumentScroll)}disconnectedCallback(){window.removeEventListener("message",this.receiveMessage),document.removeEventListener("scroll",this.onDocumentScroll),super.disconnectedCallback()}loadWorkflow(){try{const t=JSON.parse(this.workflow);if(!t)throw new Error("Missing workflow");if(!t.nodes||!Array.isArray(t.nodes))throw new Error("Must have an array of nodes");const i=this.shadowRoot.getElementById("int_iframe");i.contentWindow&&i.contentWindow.postMessage(JSON.stringify({command:"openWorkflow",workflow:t,hideNodeIssues:"true"===this.hidecanvaserrors}),"*")}catch{this.error=!0}}toggleCode(){this.showCode=!this.showCode}onMouseEnter(){this.insideIframe=!0,this.scrollX=window.scrollX,this.scrollY=window.scrollY}onMouseLeave(){this.insideIframe=!1}onOverlayClick(){"true"!==this.disableinteractivity&&(this.interactive=!0)}copyClipboard(){navigator.clipboard.writeText(this.workflow),this.copyText="Copied",setTimeout((()=>{this.copyText="Copy"}),1500)}toggleView(){this.showPreview=!0}renderIframe(){if(!this.showPreview||this.error)return N``;const t=this.theme?`?theme=${this.theme}`:"",i=`${this.src}${t}`,s="true"===this.disableinteractivity,e=N`<iframe
       class=${st({embedded_workflow_iframe_node_view:this.fullscreen,embedded_workflow_iframe:!this.fullscreen,non_interactive:!this.interactive})}
+      allow="${s?T:"clipboard-write"}"
       src=${i}
       id="int_iframe"
-    ></iframe>`;let e="";return"true"===this.disableinteractivity?e=N`<div
+    ></iframe>`;let o="";return s?o=N`<div
         class="overlay"
         ?hidden="${!(this.insideIframe||this.isMobileView)}"
-      ></div>`:this.interactive||(e=N`<div
+      ></div>`:this.interactive||(o=N`<div
         class="overlay"
@@ -70,3 +71,3 @@ @click="${this.onOverlayClick}"
         <button>Click to explore</button>
-      </div>`),N`<div class="canvas-container">${e}${s}</div>`}render(){const t="true"===this.frame&&this.showPreview&&!this.error;return N`
+      </div>`),N`<div class="canvas-container">${o}${e}</div>`}render(){const t="true"===this.frame&&this.showPreview&&!this.error;return N`
       <div
@@ -73,0 +74,0 @@ class="${st({embedded_workflow:!0,frame:t})}"

n8n-demo.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -181,2 +181,3 @@ import { classMap } from 'lit/directives/class-map.js';
         const url = `${this.src}${query}`;
+        const interactivityDisabled = this.disableinteractivity === 'true';
         const canvas = html `<iframe
@@ -188,2 +189,3 @@ class=${classMap({
         })}
+      allow="${interactivityDisabled ? nothing : 'clipboard-write'}"
       src=${url}
@@ -193,3 +195,3 @@ id="int_iframe"
         let overlay = '';
-        if (this.disableinteractivity === 'true') {
+        if (interactivityDisabled) {
             overlay = html `<div
@@ -196,0 +198,0 @@ class="overlay"

package.json

 {
   "name": "@n8n_io/n8n-demo-component",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "web component for workflow previews",
@@ -5,0 +5,0 @@ "main": "n8n-demo.js",

src/n8n-demo.ts

@@ -1,2 +0,2 @@
-import {LitElement, html, css, TemplateResult} from 'lit';
+import {LitElement, html, css, TemplateResult, nothing} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
@@ -48,3 +48,3 @@ import {classMap} from 'lit/directives/class-map.js';
   /**
-   * Hide node errors on the canvas 
+   * Hide node errors on the canvas
    */
@@ -389,2 +389,4 @@ @property({type: String})
 
+    const interactivityDisabled = this.disableinteractivity === 'true';
+
     const canvas = html`<iframe
@@ -396,2 +398,3 @@ class=${classMap({
       })}
+      allow="${interactivityDisabled ? nothing : 'clipboard-write'}"
       src=${url}
@@ -402,3 +405,3 @@ id="int_iframe"
     let overlay: string | TemplateResult = '';
-    if (this.disableinteractivity === 'true') {
+    if (interactivityDisabled) {
       overlay = html`<div
@@ -405,0 +408,0 @@ class="overlay"

src/test/n8n-demo_test.ts

@@ -20,2 +20,3 @@ import {N8NDemo} from '../n8n-demo.js';
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -40,2 +41,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -62,2 +64,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -92,2 +95,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe non_interactive"
@@ -112,2 +116,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -149,2 +154,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe non_interactive"
@@ -186,2 +192,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -233,2 +240,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -281,2 +289,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe non_interactive"
@@ -303,2 +312,3 @@ id="int_iframe"
           <iframe
+            allow="clipboard-write"
             class="embedded_workflow_iframe"
@@ -305,0 +315,0 @@ id="int_iframe"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3572846

increased by0.02%

Lines of code

6491

increased by0.23%

No dependency changes