@sumit_yewale/angular 1.1.18 → 1.1.20

package/esm5/public-api.js

@@ -6,8 +6,7 @@
 /*
  * Public API Surface of angular-adapter
  */
-// export * from './lib/angular-adapter.service';
 export { CSVBoxButtonComponent } from './lib/csvbox-button.component';
 export { CSVBoxAngularModule } from './lib/csvbox-angular.module';
 export {} from './lib/interfaces/interface';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzdW1pdF95ZXdhbGUvYW5ndWxhci8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBS0Esc0NBQWMsK0JBQStCLENBQUM7QUFDOUMsb0NBQWMsNkJBQTZCLENBQUM7QUFDNUMsZUFBYyw0QkFBNEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgYW5ndWxhci1hZGFwdGVyXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvYW5ndWxhci1hZGFwdGVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY3N2Ym94LWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY3N2Ym94LWFuZ3VsYXIubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2ludGVyZmFjZXMvaW50ZXJmYWNlJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzdW1pdF95ZXdhbGUvYW5ndWxhci8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFJQSxzQ0FBYywrQkFBK0IsQ0FBQztBQUM5QyxvQ0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxlQUFjLDRCQUE0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBhbmd1bGFyLWFkYXB0ZXJcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jc3Zib3gtYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jc3Zib3gtYW5ndWxhci5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW50ZXJmYWNlcy9pbnRlcmZhY2UnO1xuIl19

package/fesm2015/sumit_yewale-angular.js

@@ -1,6 +1,6 @@
-import { SecurityContext, Component, ViewChild, Input, NgModule } from '@angular/core';
+import { SecurityContext, Component, ChangeDetectorRef, NgZone, Input, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { generateUuid, buildImportUrl, classifyStructuredMessage, buildInitPayload } from '@sumit_yewale/adapter-core';
+import { createFileSender, classifyLegacyMessage, classifyStructuredMessage, generateUuid, buildImportUrl, buildInitPayload } from '@sumit_yewale/adapter-core';
 
 /**
  * @fileoverview added by tsickle
@@ -51,14 +51,133 @@ const insertCSS = (/**
  * 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 {?} */
-const appVersion = '1.1.16';
+const 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 {?} */
+const OPEN_IMPORTERS_KEY = '__csvboxOpenImporters';
+/** @type {?} */
+const TOP_Z_INDEX = 2147483647;
+/**
+ * @return {?}
+ */
+function openImporters() {
+    /** @type {?} */
+    const 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 {?}
+     */
+    (entry, i) => {
+        /** @type {?} */
+        const holder = entry.getHolder();
+        if (holder)
+            holder.style.zIndex = String(TOP_Z_INDEX - (reg.open.length - 1 - i));
+    }));
+}
+/**
+ * @param {?} entry
+ * @return {?}
+ */
+function registerOpenImporter(entry) {
+    /** @type {?} */
+    const reg = openImporters();
+    if (reg.open.indexOf(entry) >= 0)
+        return;
+    reg.open.push(entry);
+    restackOpenImporters(reg);
+    reg.listeners.slice().forEach((/**
+     * @param {?} fn
+     * @return {?}
+     */
+    fn => fn()));
+}
+/**
+ * @param {?} entry
+ * @return {?}
+ */
+function unregisterOpenImporter(entry) {
+    /** @type {?} */
+    const reg = openImporters();
+    /** @type {?} */
+    const i = reg.open.indexOf(entry);
+    if (i < 0)
+        return;
+    reg.open.splice(i, 1);
+    restackOpenImporters(reg);
+    reg.listeners.slice().forEach((/**
+     * @param {?} fn
+     * @return {?}
+     */
+    fn => fn()));
+}
+/**
+ * @param {?} entry
+ * @return {?}
+ */
+function isBlockedByOpenImporter(entry) {
+    /** @type {?} */
+    const reg = openImporters();
+    return reg.open.length > 0 && reg.open.indexOf(entry) < 0;
+}
+/**
+ * @param {?} fn
+ * @return {?}
+ */
+function subscribeOpenImporters(fn) {
+    /** @type {?} */
+    const reg = openImporters();
+    reg.listeners.push(fn);
+    return (/**
+     * @return {?}
+     */
+    () => {
+        /** @type {?} */
+        const i = reg.listeners.indexOf(fn);
+        if (i >= 0)
+            reg.listeners.splice(i, 1);
+    });
+}
+/** @type {?} */
+const appVersion = '1.1.20';
 class CSVBoxButtonComponent {
     /**
      * @param {?} sanitizer
+     * @param {?} cdr
+     * @param {?} zone
      */
-    constructor(sanitizer) {
+    constructor(sanitizer, cdr, zone) {
         this.sanitizer = sanitizer;
+        this.cdr = cdr;
+        this.zone = zone;
         this.isModalShown = false;
         this.licenseKey = null;
         this.uuid = null;
@@ -71,53 +190,121 @@ class CSVBoxButtonComponent {
         this.lazy = false;
         this.iframe = null;
         this.disabled = true;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.uuid = generateUuid();
-        /** @type {?} */
-        let 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));
-    }
-    /**
-     * @param {?} changes
-     * @return {?}
-     */
-    ngOnChanges(changes) {
-        if (changes["user"] && changes['user'].currentValue != changes['user'].previousValue) {
-            this.updateUserVariabe(changes['user'].currentValue);
-        }
-    }
-    /**
-     * @param {?} data
-     * @return {?}
-     */
-    updateUserVariabe(data) {
-        this.user = data;
-        if (this.iframe && this.iframe.contentWindow) {
-            this.iframe.contentWindow.postMessage({
-                "customer": data
-            }, "*");
-        }
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterContentInit() {
-        window.addEventListener("message", (/**
+        // True while a different importer on the page is open: the button stays disabled.
+        this.blockedByOther = false;
+        this.registryEntry = { getHolder: (/**
+             * @return {?}
+             */
+            () => this.holder) };
+        this.fileSender = createFileSender({
+            getIframe: (/**
+             * @return {?}
+             */
+            () => this.iframe),
+            getToken: (/**
+             * @return {?}
+             */
+            () => (/** @type {?} */ (this.uuid))),
+            getTargetOrigin: (/**
+             * @return {?}
+             */
+            () => (/** @type {?} */ (this.targetOrigin))),
+            getBaseDomain: (/**
+             * @return {?}
+             */
+            () => this.baseDomain),
+            takeFile: (/**
+             * @return {?}
+             */
+            () => {
+                /** @type {?} */
+                const file = this.pendingFile;
+                this.pendingFile = null;
+                return file;
+            }),
+            onSent: (/**
+             * @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 {?}
          */
         (event) => {
+            // Older importers send these as bare strings, without a token.
+            /** @type {?} */
+            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;
+                }
+                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);
+                }
+                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 {?} */
+            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;
+                }
+            }
             /** @type {?} */
             let message = classifyStructuredMessage(event.data, (/** @type {?} */ (this.uuid)));
             if (!message) {
@@ -161,7 +348,58 @@ class CSVBoxButtonComponent {
                 if (this.imported)
                     this.imported(false);
             }
-        }), false);
+        });
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.uuid = generateUuid();
+        /** @type {?} */
+        let 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));
+    }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    ngOnChanges(changes) {
+        if (changes["user"] && changes['user'].currentValue != changes['user'].previousValue) {
+            this.updateUserVariabe(changes['user'].currentValue);
+        }
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    updateUserVariabe(data) {
+        this.user = data;
+        if (this.iframe && this.iframe.contentWindow) {
+            this.iframe.contentWindow.postMessage({
+                "customer": data
+            }, "*");
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterContentInit() {
+        window.addEventListener("message", this.messageListener, false);
+        this.syncBlocked();
+        this.unsubscribeOpenImporters = subscribeOpenImporters((/**
+         * @return {?}
+         */
+        () => this.syncBlocked()));
         if (this.lazy) {
             this.disabled = false;
         }
@@ -174,8 +412,10 @@ class CSVBoxButtonComponent {
      * @return {?}
      */
     handleModalClosed() {
-        if (this.holder)
+        if (this.holder) {
             this.holder.style.display = 'none';
+            this.holder.style.pointerEvents = 'auto';
+        }
         this.isModalShown = false;
         this.isIframeLoaded = false;
         this.openModalOnIframeLoad = false;
@@ -183,6 +423,9 @@ class CSVBoxButtonComponent {
             this.holder.remove();
         this.holder = null;
         this.iframe = null;
+        // A new iframe is built on the next open, so the origin is learned again.
+        this.clearProbeTimer();
+        unregisterOpenImporter(this.registryEntry);
         if (this.onClose)
             this.onClose();
         if (this.isClosed)
@@ -202,6 +445,7 @@ class CSVBoxButtonComponent {
         let iframe = document.createElement("iframe");
         this.iframe = iframe;
         iframe.setAttribute("src", this.safeUrl);
+        iframe.setAttribute("allow", "clipboard-read; clipboard-write *");
         iframe.frameBorder = "0";
         /** @type {?} */
         let self = this;
@@ -229,11 +473,16 @@ 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());
     }
     /**
      * @return {?}
      */
     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();
@@ -241,11 +490,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 {
@@ -253,13 +527,118 @@ 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.
+     * @param {?} file
+     * @return {?}
+     */
+    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();
+    }
+    /**
+     * @return {?}
+     */
+    clearProbeTimer() {
+        this.clearFileAckTimer();
+        this.fileSender.reset();
+    }
+    /**
+     * @return {?}
+     */
+    startFileAckTimer() {
+        this.clearFileAckTimer();
+        this.fileAckTimer = setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            this.fileAckTimer = null;
+            this.giveUpOnFile();
+        }), FILE_ACK_TIMEOUT_MS);
+    }
+    /**
+     * @return {?}
+     */
+    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.
+    /**
+     * @return {?}
+     */
+    giveUpOnFile() {
+        if (this.isModalShown) {
+            return;
+        }
+        /** @type {?} */
+        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");
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    syncBlocked() {
+        /** @type {?} */
+        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((/**
+             * @return {?}
+             */
+            () => {
+                this.blockedByOther = blocked;
+                this.cdr.markForCheck();
+            }));
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.clearProbeTimer();
+        window.removeEventListener("message", this.messageListener);
+        unregisterOpenImporter(this.registryEntry);
+        if (this.unsubscribeOpenImporters) {
+            this.unsubscribeOpenImporters();
+            this.unsubscribeOpenImporters = null;
+        }
+    }
 }
 CSVBoxButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'csvbox-button',
                 template: `
     <div>
-      <button [disabled]="disabled" #initiator (click)="openModal()" [attr.data-csvbox-token]="uuid">
+      <button [disabled]="disabled || blockedByOther" (click)="openModal()" [attr.data-csvbox-token]="uuid">
         <ng-content></ng-content>
       </button>
     </div>
@@ -268,10 +647,11 @@ CSVBoxButtonComponent.decorators = [
 ];
 /** @nocollapse */
 CSVBoxButtonComponent.ctorParameters = () => [
-    { type: DomSanitizer }
+    { type: DomSanitizer },
+    { type: ChangeDetectorRef },
+    { type: NgZone }
 ];
 CSVBoxButtonComponent.propDecorators = {
-    initiator: [{ type: ViewChild, args: ['initiator', { static: false },] }],
     onImport: [{ type: Input }],
     onReady: [{ type: Input }],
     onClose: [{ type: Input }],
@@ -304,8 +684,6 @@ if (false) {
     /** @type {?} */
     CSVBoxButtonComponent.prototype.isModalShown;
     /** @type {?} */
-    CSVBoxButtonComponent.prototype.initiator;
-    /** @type {?} */
     CSVBoxButtonComponent.prototype.onImport;
     /** @type {?} */
     CSVBoxButtonComponent.prototype.onReady;
@@ -364,9 +742,52 @@ if (false) {
     /** @type {?} */
     CSVBoxButtonComponent.prototype.disabled;
     /** @type {?} */
+    CSVBoxButtonComponent.prototype.blockedByOther;
+    /**
+     * @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;
 }
 
 /**