@sumit_yewale/angular2 1.0.4 → 1.0.7-fix.1

package/fesm2020/sumit_yewale-angular2.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { SecurityContext, Component, Input } from '@angular/core';
-import { generateUuid, buildImportUrl, classifyStructuredMessage, buildInitPayload } from '@sumit_yewale/adapter-core';
+import { createMessageGate, createImportTracker, createFileSender, classifyLegacyMessage, classifyStructuredMessage, generateUuid, buildImportUrl, buildInitPayload } from '@sumit_yewale/adapter-core';
 import * as i1 from '@angular/platform-browser';
 
 let styleElement;
@@ -35,10 +35,59 @@ const insertCSS = () => {
     styleElement.textContent = GLOBAL_CSS;
 };
 
+// How long we wait for the importer to confirm a file it was sent before giving up on it.
+const FILE_ACK_TIMEOUT_MS = 8000;
+const OPEN_IMPORTERS_KEY = '__csvboxOpenImporters';
+const TOP_Z_INDEX = 2147483647;
+function openImporters() {
+    const w = window;
+    if (!w[OPEN_IMPORTERS_KEY])
+        w[OPEN_IMPORTERS_KEY] = { open: [], listeners: [] };
+    return w[OPEN_IMPORTERS_KEY];
+}
+function restackOpenImporters(reg) {
+    reg.open.forEach((entry, i) => {
+        const holder = entry.getHolder();
+        if (holder)
+            holder.style.zIndex = String(TOP_Z_INDEX - (reg.open.length - 1 - i));
+    });
+}
+function registerOpenImporter(entry) {
+    const reg = openImporters();
+    if (reg.open.indexOf(entry) >= 0)
+        return;
+    reg.open.push(entry);
+    restackOpenImporters(reg);
+    reg.listeners.slice().forEach(fn => fn());
+}
+function unregisterOpenImporter(entry) {
+    const reg = openImporters();
+    const i = reg.open.indexOf(entry);
+    if (i < 0)
+        return;
+    reg.open.splice(i, 1);
+    restackOpenImporters(reg);
+    reg.listeners.slice().forEach(fn => fn());
+}
+function isBlockedByOpenImporter(entry) {
+    const reg = openImporters();
+    return reg.open.length > 0 && reg.open.indexOf(entry) < 0;
+}
+function subscribeOpenImporters(fn) {
+    const reg = openImporters();
+    reg.listeners.push(fn);
+    return () => {
+        const i = reg.listeners.indexOf(fn);
+        if (i >= 0)
+            reg.listeners.splice(i, 1);
+    };
+}
 const appVersion = '1.1.16';
 class CSVBoxButtonComponent {
-    constructor(sanitizer) {
+    constructor(sanitizer, cdr, zone) {
         this.sanitizer = sanitizer;
+        this.cdr = cdr;
+        this.zone = zone;
         this.isModalShown = false;
         this.user = null;
         this.dynamicColumns = null;
@@ -56,51 +105,117 @@ class CSVBoxButtonComponent {
         this.safeUrl = null;
         this.iframe = null;
         this.disabled = true;
+        // True while a different importer on the page is open: the button stays disabled.
+        this.blockedByOther = false;
+        this.messageGate = createMessageGate();
+        this.importTracker = createImportTracker();
+        this.registryEntry = { getHolder: () => this.holder };
+        this.fileSender = createFileSender({
+            getIframe: () => this.iframe,
+            getToken: () => this.uuid,
+            getTargetOrigin: () => this.targetOrigin,
+            getBaseDomain: () => this.baseDomain,
+            takeFile: () => {
+                const file = this.pendingFile;
+                this.pendingFile = null;
+                return file;
+            },
+            onSent: () => this.startFileAckTimer()
+        });
+        this.unsubscribeOpenImporters = null;
         this.holder = null;
-    }
-    ngOnInit() {
-        this.uuid = generateUuid();
-        const iframeUrl = buildImportUrl({
-            licenseKey: this.licenseKey,
-            customDomain: this.customDomain,
-            dataLocation: this.dataLocation,
-            language: this.language,
-            theme: this.theme,
-            environment: this.environment
-        }, "angular", appVersion);
-        this.safeUrl = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl));
-    }
-    ngOnChanges(changes) {
-        if (changes['user'] && changes['user'].currentValue !== changes['user'].previousValue) {
-            this.updateUserVariable(changes['user'].currentValue);
-        }
-    }
-    updateUserVariable(data) {
-        this.user = data;
-        if (this.iframe && this.iframe.contentWindow) {
-            this.iframe.contentWindow.postMessage({
-                "customer": data
-            }, "*");
-        }
-    }
-    ngAfterContentInit() {
-        window.addEventListener("message", (event) => {
+        this.pendingFile = null;
+        // Data-location sheets redirect to another host, so the iframe origin can differ from
+        // targetOrigin. baseDomain is used to check the real origin before trusting it.
+        this.baseDomain = "app.csvbox.io";
+        this.fileAckTimer = null;
+        this.messageListener = (event) => {
+            // Older importers send these as bare strings, without a token.
+            const legacy = classifyLegacyMessage(event.data);
+            if (legacy) {
+                // Legacy messages carry no token, so the only way to tell which importer sent one is its
+                // window. Ignore those that came from another instance's iframe (or anywhere else).
+                if (!this.iframe || event.source !== this.iframe.contentWindow) {
+                    return;
+                }
+                // A newer importer sends the typed message as well; act on that one only.
+                if (!this.messageGate.allowLegacy()) {
+                    return;
+                }
+                const ended = this.importTracker.observe(legacy);
+                if (legacy.type === "mainModalHidden") {
+                    this.handleModalClosed();
+                }
+                else if (legacy.type === "uploadSuccessful") {
+                    if (this.onImport)
+                        this.onImport(true);
+                    if (this.isImported)
+                        this.isImported(true);
+                    if (this.imported)
+                        this.imported(true);
+                }
+                else if (legacy.type === "uploadFailed") {
+                    if (this.onImport)
+                        this.onImport(false);
+                    if (this.isImported)
+                        this.isImported(false);
+                    if (this.imported)
+                        this.imported(false);
+                }
+                this.finishImport(ended);
+                return;
+            }
+            // Set-file handshake messages. The shared core does not classify these, so they are
+            // read here, behind the same unique_token check the core applies.
+            const raw = event.data;
+            if (raw && typeof raw === "object" && raw.data && raw.data.unique_token == this.uuid) {
+                this.fileSender.learnOrigin(event);
+                if (raw.type === "csvbox-set-file-rejected" && raw.data.reason === "not-a-file") {
+                    // Reply to our probe (it has no file). It only tells us the origin, so do nothing.
+                    return;
+                }
+                if (raw.type === "csvbox-modal-shown") {
+                    this.clearFileAckTimer();
+                    registerOpenImporter(this.registryEntry);
+                    // What the file path in openModal() is waiting for. display as well as
+                    // pointer-events: a second file declined while the first was still opening the
+                    // modal has put the holder away in the meantime.
+                    this.isModalShown = true;
+                    if (this.holder) {
+                        this.holder.style.display = 'block';
+                        this.holder.style.pointerEvents = 'auto';
+                    }
+                    return;
+                }
+                if (raw.type === "csvbox-set-file-rejected") {
+                    this.clearFileAckTimer();
+                    // The importer has the file and will not take it. Put the holder away only if the
+                    // modal was never confirmed up: a file declined while it is open leaves that modal
+                    // where it is, and its own 'csvbox-modal-hidden' will put the holder away.
+                    if (!this.isModalShown && this.holder) {
+                        this.holder.style.display = 'none';
+                        this.holder.style.pointerEvents = 'auto';
+                        unregisterOpenImporter(this.registryEntry);
+                    }
+                    console.warn("[csvbox] importer declined the supplied file: " + raw.data.reason);
+                    return;
+                }
+            }
             const message = classifyStructuredMessage(event.data, this.uuid);
             if (!message) {
                 return;
             }
+            this.messageGate.markTyped();
+            const ended = this.importTracker.observe(message);
             if (message.type === "data-on-submit") {
                 if (this.onSubmit)
                     this.onSubmit(message.metadata);
                 if (this.isSubmitted)
                     this.isSubmitted(message.metadata);
                 if (this.submitted)
-                    this.submitted();
+                    this.submitted(message.metadata);
             }
             else if (message.type === "data-push-status") {
-                if (!message.success) {
-                    delete message.metadata["unique_token"];
-                }
                 if (this.onImport)
                     this.onImport(message.success, message.metadata);
                 if (this.isImported)
@@ -127,7 +242,41 @@ class CSVBoxButtonComponent {
                 if (this.imported)
                     this.imported(false);
             }
-        }, false);
+            this.finishImport(ended);
+        };
+    }
+    ngOnInit() {
+        this.uuid = generateUuid();
+        const iframeUrl = buildImportUrl({
+            licenseKey: this.licenseKey,
+            customDomain: this.customDomain,
+            dataLocation: this.dataLocation,
+            language: this.language,
+            theme: this.theme,
+            environment: this.environment
+        }, "angular", appVersion);
+        // Default place to send the file. A file is only ever sent to a named origin, never "*".
+        this.targetOrigin = new URL(iframeUrl).origin;
+        this.baseDomain = this.customDomain || "app.csvbox.io";
+        this.safeUrl = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl));
+    }
+    ngOnChanges(changes) {
+        if (changes['user'] && changes['user'].currentValue !== changes['user'].previousValue) {
+            this.updateUserVariable(changes['user'].currentValue);
+        }
+    }
+    updateUserVariable(data) {
+        this.user = data;
+        if (this.iframe && this.iframe.contentWindow) {
+            this.iframe.contentWindow.postMessage({
+                "customer": data
+            }, "*");
+        }
+    }
+    ngAfterContentInit() {
+        window.addEventListener("message", this.messageListener, false);
+        this.syncBlocked();
+        this.unsubscribeOpenImporters = subscribeOpenImporters(() => this.syncBlocked());
         if (this.lazy) {
             this.disabled = false;
         }
@@ -136,16 +285,43 @@ class CSVBoxButtonComponent {
             this.initImporter();
         }
     }
+    syncBlocked() {
+        const blocked = isBlockedByOpenImporter(this.registryEntry);
+        if (blocked !== this.blockedByOther) {
+            // The registry can call back from outside Angular's zone (another instance, another app).
+            this.zone.run(() => {
+                this.blockedByOther = blocked;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        window.removeEventListener("message", this.messageListener);
+        // Takes the holder out of document.body: left there, it would keep covering the page with
+        // an invisible full-screen layer that nothing is left to hide.
+        this.destroyImporter();
+        if (this.unsubscribeOpenImporters) {
+            this.unsubscribeOpenImporters();
+            this.unsubscribeOpenImporters = null;
+        }
+    }
     handleModalClosed() {
-        if (this.holder)
-            this.holder.style.display = 'none';
-        this.isModalShown = false;
-        this.isIframeLoaded = false;
-        this.openModalOnIframeLoad = false;
-        if (this.holder)
-            this.holder.remove();
-        this.holder = null;
-        this.iframe = null;
+        if (this.importTracker.isInFlight()) {
+            // Closed after submitting and before the result arrived: keep the iframe and its listener
+            // so the late result still reaches onImport. It is removed once that result has been
+            // delivered (see finishImport), so the next open is a fresh load.
+            if (this.holder) {
+                this.holder.style.display = 'none';
+                this.holder.style.pointerEvents = 'auto';
+            }
+            this.isModalShown = false;
+            this.openModalOnIframeLoad = false;
+            this.clearFileAckTimer();
+            unregisterOpenImporter(this.registryEntry);
+        }
+        else {
+            this.destroyImporter();
+        }
         if (this.onClose)
             this.onClose();
         if (this.isClosed)
@@ -153,30 +329,59 @@ class CSVBoxButtonComponent {
         if (this.closed)
             this.closed();
     }
+    // Called after the result of an import has been delivered. If the modal was closed in the
+    // meantime the iframe was only hidden, so remove it now.
+    finishImport(ended) {
+        if (ended && !this.isModalShown && this.iframe) {
+            this.destroyImporter();
+        }
+    }
+    // Puts the importer away: the next open builds a new iframe with a new token.
+    destroyImporter() {
+        if (this.holder) {
+            this.holder.style.display = 'none';
+            this.holder.style.pointerEvents = 'auto';
+            this.holder.remove();
+        }
+        this.holder = null;
+        this.iframe = null;
+        this.isModalShown = false;
+        this.isIframeLoaded = false;
+        this.openModalOnIframeLoad = false;
+        this.messageGate.reset();
+        this.importTracker.reset();
+        // A new iframe is built on the next open, so the origin is learned again.
+        this.clearProbeTimer();
+        unregisterOpenImporter(this.registryEntry);
+    }
     initImporter() {
         if (this.loadStarted)
             this.loadStarted();
         this.uuid = generateUuid();
+        this.messageGate.reset();
+        this.importTracker.reset();
         insertCSS();
         const iframe = document.createElement("iframe");
         this.iframe = iframe;
         iframe.setAttribute("src", this.safeUrl?.toString() || '');
+        iframe.setAttribute("allow", "clipboard-read; clipboard-write *");
         iframe.frameBorder = "0";
-        const self = this;
-        iframe.onload = function () {
-            if (self.onReady)
-                self.onReady();
-            if (self.isReady)
-                self.isReady();
-            if (self.importerReady)
-                self.importerReady();
-            self.disabled = false;
-            self.isIframeLoaded = true;
-            if (self.iframe && self.iframe.contentWindow) {
-                self.iframe.contentWindow.postMessage(buildInitPayload(self.user, self.dynamicColumns, self.options, self.uuid), "*");
+        iframe.onload = () => {
+            this.disabled = false;
+            this.isIframeLoaded = true;
+            // The handshake goes first: a consumer that calls openModalWithFile() from the ready
+            // callback needs the importer to already have its customer, columns, options and token.
+            if (this.iframe && this.iframe.contentWindow) {
+                this.iframe.contentWindow.postMessage(buildInitPayload(this.user, this.dynamicColumns, this.options, this.uuid), "*");
             }
-            if (self.openModalOnIframeLoad) {
-                self.openModal();
+            if (this.onReady)
+                this.onReady();
+            if (this.isReady)
+                this.isReady();
+            if (this.importerReady)
+                this.importerReady();
+            if (this.openModalOnIframeLoad) {
+                this.openModal();
             }
         };
         this.holder = document.createElement('div');
@@ -184,8 +389,13 @@ class CSVBoxButtonComponent {
         this.holder.setAttribute('id', `csvbox-embed-${this.uuid}`);
         this.holder.appendChild(iframe);
         document.body.insertAdjacentElement('beforeend', this.holder);
+        // The holder did not exist yet if openModal() asked for the importer before it was built.
+        restackOpenImporters(openImporters());
     }
     openModal() {
+        // Counts as open from the moment it is requested, so the other buttons are disabled while
+        // this importer is still loading, and so it is stacked above any importer opened earlier.
+        registerOpenImporter(this.registryEntry);
         if (!this.iframe) {
             this.openModalOnIframeLoad = true;
             this.initImporter();
@@ -193,11 +403,36 @@ class CSVBoxButtonComponent {
         }
         if (!this.isModalShown) {
             if (this.isIframeLoaded) {
-                this.isModalShown = true;
-                if (this.holder)
-                    this.holder.style.display = 'block';
-                if (this.iframe && this.iframe.contentWindow) {
-                    this.iframe.contentWindow.postMessage('openModal', '*');
+                if (this.pendingFile) {
+                    // The importer opens its own modal once it has the file, so that it can inject on
+                    // 'shown.bs.modal'. Sending 'openModal' as well would race that.
+                    //
+                    // It can also decline: wrong step, an import file URL configured on the sheet, or
+                    // an importer too old to know the message at all. So the holder goes up
+                    // click-through and stays that way until 'csvbox-modal-shown' confirms the modal
+                    // is really up. It covers the viewport at z-index 2147483647 and the importer
+                    // renders transparent with its modal closed, so arming it on an unanswered message
+                    // leaves an invisible sheet over the host page eating every click.
+                    //
+                    // display:block regardless, so the iframe lays out and animates normally; only
+                    // pointer-events is held back. isModalShown likewise waits for the confirmation,
+                    // or a declined file would latch the importer shut for good.
+                    if (this.holder) {
+                        this.holder.style.pointerEvents = 'none';
+                        this.holder.style.display = 'block';
+                    }
+                    this.fileSender.send();
+                }
+                else {
+                    this.isModalShown = true;
+                    if (this.holder) {
+                        // Explicit: a previously declined file leaves the holder click-through.
+                        this.holder.style.pointerEvents = 'auto';
+                        this.holder.style.display = 'block';
+                    }
+                    if (this.iframe && this.iframe.contentWindow) {
+                        this.iframe.contentWindow.postMessage('openModal', '*');
+                    }
                 }
             }
             else {
@@ -205,11 +440,68 @@ class CSVBoxButtonComponent {
             }
         }
     }
+    /**
+     * Open the importer on a File the host page already has, instead of the file picker.
+     *
+     * Reachable through a template reference (`#importer` then `importer.openModalWithFile(file)`)
+     * or `@ViewChild(CSVBoxButtonComponent)`.
+     *
+     * The File crosses to the iframe by structured clone, so the importer receives the real
+     * object and applies its own extension, worksheet and size rules to it -- this does not
+     * bypass any of them. Pass a File; a Blob has no name for the importer to read an
+     * extension from.
+     */
+    openModalWithFile(file) {
+        if (typeof File === 'undefined' || !(file instanceof File)) {
+            return;
+        }
+        this.pendingFile = file;
+        // Already open: hand it over now rather than holding it for the next open. The importer
+        // takes it only while it is still on the upload step, and ignores it once the user has a
+        // dataset and a mapping in progress.
+        if (this.isModalShown && this.iframe && this.isIframeLoaded) {
+            this.fileSender.send();
+            return;
+        }
+        this.openModal();
+    }
+    clearProbeTimer() {
+        this.clearFileAckTimer();
+        this.fileSender.reset();
+    }
+    startFileAckTimer() {
+        this.clearFileAckTimer();
+        this.fileAckTimer = setTimeout(() => {
+            this.fileAckTimer = null;
+            this.giveUpOnFile();
+        }, FILE_ACK_TIMEOUT_MS);
+    }
+    clearFileAckTimer() {
+        if (this.fileAckTimer) {
+            clearTimeout(this.fileAckTimer);
+            this.fileAckTimer = null;
+        }
+    }
+    // The importer never confirmed the file it was sent (an origin we do not trust, or an importer too
+    // old to know the message). Without this the holder would stay up, invisible and click-through,
+    // and the other instances' buttons would stay disabled for good.
+    giveUpOnFile() {
+        if (this.isModalShown) {
+            return;
+        }
+        const holder = this.holder;
+        if (holder) {
+            holder.style.display = 'none';
+            holder.style.pointerEvents = 'auto';
+        }
+        unregisterOpenImporter(this.registryEntry);
+        console.warn("[csvbox] the importer did not respond to the supplied file");
+    }
 }
-CSVBoxButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CSVBoxButtonComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+CSVBoxButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CSVBoxButtonComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 CSVBoxButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CSVBoxButtonComponent, isStandalone: true, selector: "csvbox-button", inputs: { onImport: "onImport", onReady: "onReady", onClose: "onClose", onSubmit: "onSubmit", isImported: "isImported", isReady: "isReady", isClosed: "isClosed", isSubmitted: "isSubmitted", importerReady: "importerReady", closed: "closed", submitted: "submitted", imported: "imported", loadStarted: "loadStarted", user: "user", dynamicColumns: "dynamicColumns", licenseKey: "licenseKey", options: "options", uuid: "uuid", customDomain: "customDomain", dataLocation: "dataLocation", language: "language", environment: "environment", theme: "theme", isIframeLoaded: "isIframeLoaded", openModalOnIframeLoad: "openModalOnIframeLoad", lazy: "lazy", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
     <div>
-      <button [disabled]="disabled" (click)="openModal()" [attr.data-csvbox-token]="uuid">
+      <button [disabled]="disabled || blockedByOther" (click)="openModal()" [attr.data-csvbox-token]="uuid">
         <ng-content></ng-content>
       </button>
     </div>
@@ -221,13 +513,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     standalone: true,
                     template: `
     <div>
-      <button [disabled]="disabled" (click)="openModal()" [attr.data-csvbox-token]="uuid">
+      <button [disabled]="disabled || blockedByOther" (click)="openModal()" [attr.data-csvbox-token]="uuid">
         <ng-content></ng-content>
       </button>
     </div>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { onImport: [{
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { onImport: [{
                 type: Input
             }], onReady: [{
                 type: Input