@csvbox/angular
Version:
Angular adapter for csvbox.io
522 lines (514 loc) • 19.7 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 {?} */
let styleElement;
/** @type {?} */
const GLOBAL_CSS = `
.csvbox-holder {
z-index: 2147483647;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.csvbox-holder iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
`;
/** @type {?} */
const insertCSS = (/**
* @return {?}
*/
() => {
if (styleElement) {
return;
}
styleElement = document.createElement('style');
styleElement.setAttribute('type', 'text/css');
/** @type {?} */
const 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 {?} */
const appVersion = '1.1.16';
class CSVBoxButtonComponent {
/**
* @param {?} sanitizer
*/
constructor(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 {?}
*/
ngOnInit() {
this.uuid = this.generateUuid();
/** @type {?} */
let domain = this.customDomain ? this.customDomain : "app.csvbox.io";
if (this.dataLocation) {
domain = `${this.dataLocation}-${domain}`;
}
/** @type {?} */
let 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 {?} */
let 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 {?}
*/
generateUuid() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
/**
* @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", (/**
* @param {?} event
* @return {?}
*/
(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 {?} */
let 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 {?} */
let primary_row_data = event.data.row_data;
/** @type {?} */
let headers = event.data.headers;
/** @type {?} */
let rows = [];
/** @type {?} */
let dynamic_columns_indexes = event.data.dynamicColumnsIndexes;
/** @type {?} */
let virtual_columns_indexes = event.data.virtualColumnsIndexes || [];
primary_row_data.forEach((/**
* @param {?} row_data
* @return {?}
*/
(row_data) => {
/** @type {?} */
let x = {};
/** @type {?} */
let dynamic_columns = {};
/** @type {?} */
let virtual_data = {};
row_data.data && row_data.data.forEach((/**
* @param {?} col
* @param {?} i
* @return {?}
*/
(col, i) => {
if (col == undefined) {
col = "";
}
;
if (dynamic_columns_indexes.includes(i)) {
dynamic_columns[headers[i]] = col;
}
else if (virtual_columns_indexes.includes(i)) {
virtual_data[headers[i]] = col;
}
else {
x[headers[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.push(x);
}));
/** @type {?} */
let metadata = event.data.data;
metadata["rows"] = rows;
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 {?} */
let 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 {?} */
let 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 {?}
*/
initImporter() {
if (this.loadStarted)
this.loadStarted();
insertCSS();
/** @type {?} */
let iframe = document.createElement("iframe");
this.iframe = iframe;
iframe.setAttribute("src", this.safeUrl);
iframe.frameBorder = "0";
/** @type {?} */
let 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 {?}
*/
openModal() {
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: `
<div>
<button [disabled]="disabled" #initiator (click)="openModal()" [attr.data-csvbox-token]="uuid">
<ng-content></ng-content>
</button>
</div>
`
}] }
];
/** @nocollapse */
CSVBoxButtonComponent.ctorParameters = () => [
{ 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 }]
};
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
*/
class CSVBoxAngularModule {
}
CSVBoxAngularModule.decorators = [
{ type: NgModule, args: [{
declarations: [
CSVBoxButtonComponent
],
imports: [],
exports: [
CSVBoxButtonComponent
]
},] }
];
/**
* @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