@sumit_yewale/angular 1.1.18 → 1.1.21-fix.1

package/bundles/sumit_yewale-angular.umd.js

@@ -36,11 +36,129 @@
      * Generated from: lib/csvbox-button.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    // How long we wait for the importer to confirm a file it was sent before giving up on it.
     /** @type {?} */
-    var appVersion = '1.1.16';
+    var FILE_ACK_TIMEOUT_MS = 8000;
+    /**
+     * @record
+     */
+    function OpenImporterEntry() { }
+    if (false) {
+        /** @type {?} */
+        OpenImporterEntry.prototype.getHolder;
+    }
+    /**
+     * @record
+     */
+    function OpenImporters() { }
+    if (false) {
+        /** @type {?} */
+        OpenImporters.prototype.open;
+        /** @type {?} */
+        OpenImporters.prototype.listeners;
+    }
+    /** @type {?} */
+    var OPEN_IMPORTERS_KEY = '__csvboxOpenImporters';
+    /** @type {?} */
+    var TOP_Z_INDEX = 2147483647;
+    /**
+     * @return {?}
+     */
+    function openImporters() {
+        /** @type {?} */
+        var w = (/** @type {?} */ (window));
+        if (!w[OPEN_IMPORTERS_KEY])
+            w[OPEN_IMPORTERS_KEY] = { open: [], listeners: [] };
+        return w[OPEN_IMPORTERS_KEY];
+    }
+    /**
+     * @param {?} reg
+     * @return {?}
+     */
+    function restackOpenImporters(reg) {
+        reg.open.forEach((/**
+         * @param {?} entry
+         * @param {?} i
+         * @return {?}
+         */
+        function (entry, i) {
+            /** @type {?} */
+            var holder = entry.getHolder();
+            if (holder)
+                holder.style.zIndex = String(TOP_Z_INDEX - (reg.open.length - 1 - i));
+        }));
+    }
+    /**
+     * @param {?} entry
+     * @return {?}
+     */
+    function registerOpenImporter(entry) {
+        /** @type {?} */
+        var reg = openImporters();
+        if (reg.open.indexOf(entry) >= 0)
+            return;
+        reg.open.push(entry);
+        restackOpenImporters(reg);
+        reg.listeners.slice().forEach((/**
+         * @param {?} fn
+         * @return {?}
+         */
+        function (fn) { return fn(); }));
+    }
+    /**
+     * @param {?} entry
+     * @return {?}
+     */
+    function unregisterOpenImporter(entry) {
+        /** @type {?} */
+        var reg = openImporters();
+        /** @type {?} */
+        var i = reg.open.indexOf(entry);
+        if (i < 0)
+            return;
+        reg.open.splice(i, 1);
+        restackOpenImporters(reg);
+        reg.listeners.slice().forEach((/**
+         * @param {?} fn
+         * @return {?}
+         */
+        function (fn) { return fn(); }));
+    }
+    /**
+     * @param {?} entry
+     * @return {?}
+     */
+    function isBlockedByOpenImporter(entry) {
+        /** @type {?} */
+        var reg = openImporters();
+        return reg.open.length > 0 && reg.open.indexOf(entry) < 0;
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    function subscribeOpenImporters(fn) {
+        /** @type {?} */
+        var reg = openImporters();
+        reg.listeners.push(fn);
+        return (/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var i = reg.listeners.indexOf(fn);
+            if (i >= 0)
+                reg.listeners.splice(i, 1);
+        });
+    }
+    /** @type {?} */
+    var appVersion = '1.1.20';
     var CSVBoxButtonComponent = /** @class */ (function () {
-        function CSVBoxButtonComponent(sanitizer) {
+        function CSVBoxButtonComponent(sanitizer, cdr, zone) {
+            var _this = this;
             this.sanitizer = sanitizer;
+            this.cdr = cdr;
+            this.zone = zone;
             this.isModalShown = false;
             this.licenseKey = null;
             this.uuid = null;
@@ -53,6 +171,175 @@
             this.lazy = false;
             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 = adapterCore.createMessageGate();
+            this.importTracker = adapterCore.createImportTracker();
+            this.registryEntry = { getHolder: (/**
+                 * @return {?}
+                 */
+                function () { return _this.holder; }) };
+            this.fileSender = adapterCore.createFileSender({
+                getIframe: (/**
+                 * @return {?}
+                 */
+                function () { return _this.iframe; }),
+                getToken: (/**
+                 * @return {?}
+                 */
+                function () { return (/** @type {?} */ (_this.uuid)); }),
+                getTargetOrigin: (/**
+                 * @return {?}
+                 */
+                function () { return (/** @type {?} */ (_this.targetOrigin)); }),
+                getBaseDomain: (/**
+                 * @return {?}
+                 */
+                function () { return _this.baseDomain; }),
+                takeFile: (/**
+                 * @return {?}
+                 */
+                function () {
+                    /** @type {?} */
+                    var file = _this.pendingFile;
+                    _this.pendingFile = null;
+                    return file;
+                }),
+                onSent: (/**
+                 * @return {?}
+                 */
+                function () { return _this.startFileAckTimer(); })
+            });
+            this.unsubscribeOpenImporters = null;
+            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 = (/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // Older importers send these as bare strings, without a token.
+                /** @type {?} */
+                var legacy = adapterCore.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;
+                    }
+                    /** @type {?} */
+                    var ended_1 = _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_1);
+                    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.
+                /** @type {?} */
+                var 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;
+                    }
+                }
+                /** @type {?} */
+                var message = adapterCore.classifyStructuredMessage(event.data, (/** @type {?} */ (_this.uuid)));
+                if (!message) {
+                    return;
+                }
+                _this.messageGate.markTyped();
+                /** @type {?} */
+                var 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(message.metadata);
+                }
+                else if (message.type === "data-push-status") {
+                    if (_this.onImport)
+                        _this.onImport(message.success, message.metadata);
+                    if (_this.isImported)
+                        _this.isImported(message.success, message.metadata);
+                    if (_this.imported)
+                        _this.imported(message.success, message.metadata);
+                }
+                else if (message.type === "csvbox-modal-hidden") {
+                    _this.handleModalClosed();
+                }
+                else if (message.type === "csvbox-upload-successful") {
+                    if (_this.onImport)
+                        _this.onImport(true);
+                    if (_this.isImported)
+                        _this.isImported(true);
+                    if (_this.imported)
+                        _this.imported(true);
+                }
+                else if (message.type === "csvbox-upload-failed") {
+                    if (_this.onImport)
+                        _this.onImport(false);
+                    if (_this.isImported)
+                        _this.isImported(false);
+                    if (_this.imported)
+                        _this.imported(false);
+                }
+                _this.finishImport(ended);
+            });
         }
         /**
          * @return {?}
@@ -71,6 +358,9 @@
                 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(core.SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl));
         };
         /**
@@ -110,55 +400,12 @@
          */
         function () {
             var _this = this;
-            window.addEventListener("message", (/**
-             * @param {?} event
+            window.addEventListener("message", this.messageListener, false);
+            this.syncBlocked();
+            this.unsubscribeOpenImporters = subscribeOpenImporters((/**
              * @return {?}
              */
-            function (event) {
-                /** @type {?} */
-                var message = adapterCore.classifyStructuredMessage(event.data, (/** @type {?} */ (_this.uuid)));
-                if (!message) {
-                    return;
-                }
-                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(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)
-                        _this.isImported(message.success, message.metadata);
-                    if (_this.imported)
-                        _this.imported(message.success, message.metadata);
-                }
-                else if (message.type === "csvbox-modal-hidden") {
-                    _this.handleModalClosed();
-                }
-                else if (message.type === "csvbox-upload-successful") {
-                    if (_this.onImport)
-                        _this.onImport(true);
-                    if (_this.isImported)
-                        _this.isImported(true);
-                    if (_this.imported)
-                        _this.imported(true);
-                }
-                else if (message.type === "csvbox-upload-failed") {
-                    if (_this.onImport)
-                        _this.onImport(false);
-                    if (_this.isImported)
-                        _this.isImported(false);
-                    if (_this.imported)
-                        _this.imported(false);
-                }
-            }), false);
+            function () { return _this.syncBlocked(); }));
             if (this.lazy) {
                 this.disabled = false;
             }
@@ -174,15 +421,22 @@
          * @return {?}
          */
         function () {
-            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)
@@ -190,6 +444,57 @@
             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.
+        // 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.
+        /**
+         * @private
+         * @param {?} ended
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.finishImport = 
+        // 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.
+        /**
+         * @private
+         * @param {?} ended
+         * @return {?}
+         */
+        function (ended) {
+            if (ended && !this.isModalShown && this.iframe) {
+                this.destroyImporter();
+            }
+        };
+        // Puts the importer away: the next open builds a new iframe with a new token.
+        // Puts the importer away: the next open builds a new iframe with a new token.
+        /**
+         * @private
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.destroyImporter = 
+        // Puts the importer away: the next open builds a new iframe with a new token.
+        /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            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);
+        };
         /**
          * @return {?}
          */
@@ -200,11 +505,14 @@
             if (this.loadStarted)
                 this.loadStarted();
             this.uuid = adapterCore.generateUuid();
+            this.messageGate.reset();
+            this.importTracker.reset();
             insertCSS();
             /** @type {?} */
             var iframe = document.createElement("iframe");
             this.iframe = iframe;
             iframe.setAttribute("src", this.safeUrl);
+            iframe.setAttribute("allow", "clipboard-read; clipboard-write *");
             iframe.frameBorder = "0";
             /** @type {?} */
             var self = this;
@@ -212,17 +520,19 @@
              * @return {?}
              */
             function () {
+                self.disabled = false;
+                self.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 (self.iframe && self.iframe.contentWindow) {
+                    self.iframe.contentWindow.postMessage(adapterCore.buildInitPayload(self.user, self.dynamicColumns, self.options, (/** @type {?} */ (self.uuid))), "*");
+                }
                 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(adapterCore.buildInitPayload(self.user, self.dynamicColumns, self.options, (/** @type {?} */ (self.uuid))), "*");
-                }
                 if (self.openModalOnIframeLoad) {
                     self.openModal();
                 }
@@ -232,6 +542,8 @@
             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());
         };
         /**
          * @return {?}
@@ -240,6 +552,9 @@
          * @return {?}
          */
         function () {
+            // 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();
@@ -247,11 +562,36 @@
             }
             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 {
@@ -259,18 +599,177 @@
                 }
             }
         };
+        /**
+         * 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.
+         */
+        /**
+         * 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.
+         * @param {?} file
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.openModalWithFile = /**
+         * 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.
+         * @param {?} file
+         * @return {?}
+         */
+        function (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();
+        };
+        /**
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.clearProbeTimer = /**
+         * @return {?}
+         */
+        function () {
+            this.clearFileAckTimer();
+            this.fileSender.reset();
+        };
+        /**
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.startFileAckTimer = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.clearFileAckTimer();
+            this.fileAckTimer = setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.fileAckTimer = null;
+                _this.giveUpOnFile();
+            }), FILE_ACK_TIMEOUT_MS);
+        };
+        /**
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.clearFileAckTimer = /**
+         * @return {?}
+         */
+        function () {
+            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.
+        // 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.
+        /**
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.giveUpOnFile = 
+        // 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.
+        /**
+         * @return {?}
+         */
+        function () {
+            if (this.isModalShown) {
+                return;
+            }
+            /** @type {?} */
+            var 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");
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.syncBlocked = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var 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((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.blockedByOther = blocked;
+                    _this.cdr.markForCheck();
+                }));
+            }
+        };
+        /**
+         * @return {?}
+         */
+        CSVBoxButtonComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+        function () {
+            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;
+            }
+        };
         CSVBoxButtonComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'csvbox-button',
-                        template: "\n    <div>\n      <button [disabled]=\"disabled\" #initiator (click)=\"openModal()\" [attr.data-csvbox-token]=\"uuid\">\n        <ng-content></ng-content>\n      </button>\n    </div>\n  "
+                        template: "\n    <div>\n      <button [disabled]=\"disabled || blockedByOther\" (click)=\"openModal()\" [attr.data-csvbox-token]=\"uuid\">\n        <ng-content></ng-content>\n      </button>\n    </div>\n  "
                     }] }
         ];
         /** @nocollapse */
         CSVBoxButtonComponent.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer }
+            { type: platformBrowser.DomSanitizer },
+            { type: core.ChangeDetectorRef },
+            { type: core.NgZone }
         ]; };
         CSVBoxButtonComponent.propDecorators = {
-            initiator: [{ type: core.ViewChild, args: ['initiator', { static: false },] }],
             onImport: [{ type: core.Input }],
             onReady: [{ type: core.Input }],
             onClose: [{ type: core.Input }],
@@ -305,8 +804,6 @@
         /** @type {?} */
         CSVBoxButtonComponent.prototype.isModalShown;
         /** @type {?} */
-        CSVBoxButtonComponent.prototype.initiator;
-        /** @type {?} */
         CSVBoxButtonComponent.prototype.onImport;
         /** @type {?} */
         CSVBoxButtonComponent.prototype.onReady;
@@ -365,9 +862,62 @@
         /** @type {?} */
         CSVBoxButtonComponent.prototype.disabled;
         /** @type {?} */
+        CSVBoxButtonComponent.prototype.blockedByOther;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.messageGate;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.importTracker;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.registryEntry;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.fileSender;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.unsubscribeOpenImporters;
+        /** @type {?} */
         CSVBoxButtonComponent.prototype.holder;
         /** @type {?} */
+        CSVBoxButtonComponent.prototype.pendingFile;
+        /** @type {?} */
+        CSVBoxButtonComponent.prototype.targetOrigin;
+        /** @type {?} */
+        CSVBoxButtonComponent.prototype.baseDomain;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.fileAckTimer;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.messageListener;
+        /** @type {?} */
         CSVBoxButtonComponent.prototype.sanitizer;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.cdr;
+        /**
+         * @type {?}
+         * @private
+         */
+        CSVBoxButtonComponent.prototype.zone;
     }
 
     /**