@csvbox/angular
Version:
Angular adapter for csvbox.io
524 lines (516 loc) • 20.8 kB
JavaScript
import { SecurityContext, Component, ViewChild, Input, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* Generated from: utlis/insertCSS.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var styleElement;
/** @type {?} */
var GLOBAL_CSS = "\n.csvbox-holder {\n z-index: 2147483647;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: none;\n}\n.csvbox-holder iframe {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n}\n";
/** @type {?} */
var insertCSS = (/**
* @return {?}
*/
function () {
if (styleElement) {
return;
}
styleElement = document.createElement('style');
styleElement.setAttribute('type', 'text/css');
/** @type {?} */
var head = document.querySelector('head');
if (head) {
head.appendChild(styleElement);
}
styleElement.textContent = GLOBAL_CSS;
});
/**
* @fileoverview added by tsickle
* Generated from: lib/csvbox-button.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var appVersion = '1.1.16';
var CSVBoxButtonComponent = /** @class */ (function () {
function CSVBoxButtonComponent(sanitizer) {
this.sanitizer = sanitizer;
this.isModalShown = false;
this.uuid = null;
this.customDomain = null;
this.dataLocation = null;
this.language = null;
this.theme = null;
this.isIframeLoaded = false;
this.openModalOnIframeLoad = false;
this.lazy = false;
this.iframe = null;
this.disabled = true;
}
/**
* @return {?}
*/
CSVBoxButtonComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.uuid = this.generateUuid();
/** @type {?} */
var domain = this.customDomain ? this.customDomain : "app.csvbox.io";
if (this.dataLocation) {
domain = this.dataLocation + "-" + domain;
}
/** @type {?} */
var iframeUrl = "https://" + domain + "/embed/" + this.licenseKey;
iframeUrl += "?library-version=" + appVersion;
iframeUrl += "&framework=angular";
if (this.dataLocation) {
iframeUrl += "&preventRedirect";
}
if (this.language) {
iframeUrl += "&language" + this.language;
}
if (this.environment) {
/** @type {?} */
var environment = JSON.stringify(this.environment).replace(/['"]/g, (/**
* @param {?} match
* @return {?}
*/
function (match) {
return '\\' + match;
}));
iframeUrl += "&env=" + environment;
}
if (this.theme) {
iframeUrl += "&theme" + this.theme;
}
this.safeUrl = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl));
};
/**
* @return {?}
*/
CSVBoxButtonComponent.prototype.generateUuid = /**
* @return {?}
*/
function () {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
};
/**
* @param {?} changes
* @return {?}
*/
CSVBoxButtonComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["user"] && changes['user'].currentValue != changes['user'].previousValue) {
this.updateUserVariabe(changes['user'].currentValue);
}
};
/**
* @param {?} data
* @return {?}
*/
CSVBoxButtonComponent.prototype.updateUserVariabe = /**
* @param {?} data
* @return {?}
*/
function (data) {
this.user = data;
if (this.iframe && this.iframe.contentWindow) {
this.iframe.contentWindow.postMessage({
"customer": data
}, "*");
}
};
/**
* @return {?}
*/
CSVBoxButtonComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
window.addEventListener("message", (/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event && typeof event.data == "object") {
if (event.data && event.data.data && event.data.data.unique_token == _this.uuid) {
if (event.data.type && event.data.type == "data-on-submit") {
/** @type {?} */
var metadata = event.data.data;
metadata["column_mappings"] = event.data.column_mapping;
delete metadata["unique_token"];
if (_this.onSubmit)
_this.onSubmit(metadata);
if (_this.isSubmitted)
_this.isSubmitted(metadata);
if (_this.submitted)
_this.submitted(metadata);
}
else if (event.data.type && event.data.type == "data-push-status") {
if (event.data.data.import_status == "success") {
if (event.data.row_data) {
/** @type {?} */
var primary_row_data = event.data.row_data;
/** @type {?} */
var headers_1 = event.data.headers;
/** @type {?} */
var rows_1 = [];
/** @type {?} */
var dynamic_columns_indexes_1 = event.data.dynamicColumnsIndexes;
/** @type {?} */
var virtual_columns_indexes_1 = event.data.virtualColumnsIndexes || [];
primary_row_data.forEach((/**
* @param {?} row_data
* @return {?}
*/
function (row_data) {
/** @type {?} */
var x = {};
/** @type {?} */
var dynamic_columns = {};
/** @type {?} */
var virtual_data = {};
row_data.data && row_data.data.forEach((/**
* @param {?} col
* @param {?} i
* @return {?}
*/
function (col, i) {
if (col == undefined) {
col = "";
}
;
if (dynamic_columns_indexes_1.includes(i)) {
dynamic_columns[headers_1[i]] = col;
}
else if (virtual_columns_indexes_1.includes(i)) {
virtual_data[headers_1[i]] = col;
}
else {
x[headers_1[i]] = col;
}
}));
if (row_data && row_data.unmapped_data) {
x["_unmapped_data"] = row_data.unmapped_data;
}
if (dynamic_columns && Object.keys(dynamic_columns).length > 0) {
x["_dynamic_data"] = dynamic_columns;
}
if (virtual_data && Object.keys(virtual_data).length > 0) {
x["_virtual_data"] = virtual_data;
}
rows_1.push(x);
}));
/** @type {?} */
var metadata = event.data.data;
metadata["rows"] = rows_1;
metadata["column_mappings"] = event.data.column_mapping;
metadata["raw_columns"] = event.data.raw_columns;
metadata["ignored_columns"] = event.data.ignored_column_row;
delete metadata["unique_token"];
if (_this.onImport)
_this.onImport(true, metadata);
if (_this.isImported)
_this.isImported(true, metadata);
if (_this.imported)
_this.imported(true, metadata);
}
else {
/** @type {?} */
var metadata = event.data.data;
delete metadata["unique_token"];
if (_this.onImport)
_this.onImport(true, metadata);
if (_this.isImported)
_this.isImported(true, metadata);
if (_this.imported)
_this.imported(true, metadata);
}
}
else {
/** @type {?} */
var metadata = event.data.data;
delete metadata["unique_token"];
if (_this.onImport)
_this.onImport(false, metadata);
if (_this.isImported)
_this.isImported(false, metadata);
if (_this.imported)
_this.imported(false, metadata);
}
}
else if (event.data.type && event.data.type == "csvbox-modal-hidden") {
if (_this.holder)
_this.holder.style.display = 'none';
_this.isModalShown = false;
if (_this.onClose)
_this.onClose();
if (_this.isClosed)
_this.isClosed();
if (_this.closed)
_this.closed();
}
else if (event.data.type && event.data.type == "csvbox-upload-successful") {
if (_this.onImport)
_this.onImport(true);
if (_this.isImported)
_this.isImported(true);
if (_this.imported)
_this.imported(true);
}
else if (event.data.type && event.data.type == "csvbox-upload-failed") {
if (_this.onImport)
_this.onImport(false);
if (_this.isImported)
_this.isImported(false);
if (_this.imported)
_this.imported(false);
}
}
}
}), false);
if (this.lazy) {
this.disabled = false;
}
else {
this.disabled = true;
this.initImporter();
}
};
/**
* @return {?}
*/
CSVBoxButtonComponent.prototype.initImporter = /**
* @return {?}
*/
function () {
if (this.loadStarted)
this.loadStarted();
insertCSS();
/** @type {?} */
var iframe = document.createElement("iframe");
this.iframe = iframe;
iframe.setAttribute("src", this.safeUrl);
iframe.frameBorder = "0";
/** @type {?} */
var self = this;
iframe.onload = (/**
* @return {?}
*/
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({
"customer": self.user ? self.user : null,
"columns": self.dynamicColumns ? self.dynamicColumns : null,
"options": self.options ? self.options : null,
"unique_token": self.uuid
}, "*");
}
if (self.openModalOnIframeLoad) {
self.openModal();
}
});
this.holder = document.createElement('div');
this.holder.classList.add('csvbox-holder');
this.holder.setAttribute('id', "csvbox-embed-" + this.uuid);
this.holder.appendChild(iframe);
document.body.insertAdjacentElement('beforeend', this.holder);
};
/**
* @return {?}
*/
CSVBoxButtonComponent.prototype.openModal = /**
* @return {?}
*/
function () {
if (this.lazy) {
if (!this.iframe) {
this.openModalOnIframeLoad = true;
this.initImporter();
return;
}
}
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', '*');
}
}
else {
this.openModalOnIframeLoad = true;
}
}
};
CSVBoxButtonComponent.decorators = [
{ type: 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 "
}] }
];
/** @nocollapse */
CSVBoxButtonComponent.ctorParameters = function () { return [
{ type: DomSanitizer }
]; };
CSVBoxButtonComponent.propDecorators = {
initiator: [{ type: ViewChild, args: ['initiator', { static: false },] }],
onImport: [{ type: Input }],
onReady: [{ type: Input }],
onClose: [{ type: Input }],
onSubmit: [{ type: Input }],
isImported: [{ type: Input }],
isReady: [{ type: Input }],
isClosed: [{ type: Input }],
isSubmitted: [{ type: Input }],
importerReady: [{ type: Input }],
closed: [{ type: Input }],
submitted: [{ type: Input }],
imported: [{ type: Input }],
loadStarted: [{ type: Input }],
user: [{ type: Input }],
dynamicColumns: [{ type: Input }],
licenseKey: [{ type: Input }],
options: [{ type: Input }],
uuid: [{ type: Input }],
customDomain: [{ type: Input }],
dataLocation: [{ type: Input }],
language: [{ type: Input }],
environment: [{ type: Input }],
theme: [{ type: Input }],
isIframeLoaded: [{ type: Input }],
openModalOnIframeLoad: [{ type: Input }],
lazy: [{ type: Input }],
disabled: [{ type: Input }]
};
return CSVBoxButtonComponent;
}());
if (false) {
/** @type {?} */
CSVBoxButtonComponent.prototype.isModalShown;
/** @type {?} */
CSVBoxButtonComponent.prototype.initiator;
/** @type {?} */
CSVBoxButtonComponent.prototype.onImport;
/** @type {?} */
CSVBoxButtonComponent.prototype.onReady;
/** @type {?} */
CSVBoxButtonComponent.prototype.onClose;
/** @type {?} */
CSVBoxButtonComponent.prototype.onSubmit;
/** @type {?} */
CSVBoxButtonComponent.prototype.isImported;
/** @type {?} */
CSVBoxButtonComponent.prototype.isReady;
/** @type {?} */
CSVBoxButtonComponent.prototype.isClosed;
/** @type {?} */
CSVBoxButtonComponent.prototype.isSubmitted;
/** @type {?} */
CSVBoxButtonComponent.prototype.importerReady;
/** @type {?} */
CSVBoxButtonComponent.prototype.closed;
/** @type {?} */
CSVBoxButtonComponent.prototype.submitted;
/** @type {?} */
CSVBoxButtonComponent.prototype.imported;
/** @type {?} */
CSVBoxButtonComponent.prototype.loadStarted;
/** @type {?} */
CSVBoxButtonComponent.prototype.user;
/** @type {?} */
CSVBoxButtonComponent.prototype.dynamicColumns;
/** @type {?} */
CSVBoxButtonComponent.prototype.licenseKey;
/** @type {?} */
CSVBoxButtonComponent.prototype.options;
/** @type {?} */
CSVBoxButtonComponent.prototype.uuid;
/** @type {?} */
CSVBoxButtonComponent.prototype.customDomain;
/** @type {?} */
CSVBoxButtonComponent.prototype.dataLocation;
/** @type {?} */
CSVBoxButtonComponent.prototype.language;
/** @type {?} */
CSVBoxButtonComponent.prototype.environment;
/** @type {?} */
CSVBoxButtonComponent.prototype.theme;
/** @type {?} */
CSVBoxButtonComponent.prototype.isIframeLoaded;
/** @type {?} */
CSVBoxButtonComponent.prototype.openModalOnIframeLoad;
/** @type {?} */
CSVBoxButtonComponent.prototype.lazy;
/** @type {?} */
CSVBoxButtonComponent.prototype.safeUrl;
/** @type {?} */
CSVBoxButtonComponent.prototype.iframe;
/** @type {?} */
CSVBoxButtonComponent.prototype.disabled;
/** @type {?} */
CSVBoxButtonComponent.prototype.holder;
/** @type {?} */
CSVBoxButtonComponent.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/csvbox-angular.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CSVBoxAngularModule = /** @class */ (function () {
function CSVBoxAngularModule() {
}
CSVBoxAngularModule.decorators = [
{ type: NgModule, args: [{
declarations: [
CSVBoxButtonComponent
],
imports: [],
exports: [
CSVBoxButtonComponent
]
},] }
];
return CSVBoxAngularModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/interface.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function CSVBoxMethods() { }
if (false) {
/** @type {?|undefined} */
CSVBoxMethods.prototype.onData;
}
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: csvbox-angular.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { CSVBoxAngularModule, CSVBoxButtonComponent };
//# sourceMappingURL=csvbox-angular.js.map