@csvbox/angular2
Version:
Standalone Angular component for csvbox.io supporting Angular version 14 till 19
368 lines (362 loc) • 16 kB
JavaScript
import * as i0 from '@angular/core';
import { SecurityContext, Component, ViewChild, Input } from '@angular/core';
import * as i1 from '@angular/platform-browser';
let styleElement;
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;
}
`;
const insertCSS = () => {
if (styleElement) {
return;
}
styleElement = document.createElement('style');
styleElement.setAttribute('type', 'text/css');
const head = document.querySelector('head');
if (head) {
head.appendChild(styleElement);
}
styleElement.textContent = GLOBAL_CSS;
};
const appVersion = '1.1.16';
class CSVBoxButtonComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.isModalShown = false;
this.user = null;
this.dynamicColumns = null;
this.licenseKey = null;
this.options = null;
this.uuid = '';
this.customDomain = null;
this.dataLocation = null;
this.language = null;
this.environment = null;
this.isIframeLoaded = false;
this.openModalOnIframeLoad = false;
this.lazy = false;
this.safeUrl = null;
this.iframe = null;
this.disabled = true;
this.holder = null;
}
ngOnInit() {
this.uuid = this.generateUuid();
let domain = this.customDomain ? this.customDomain : "app.csvbox.io";
if (this.dataLocation) {
domain = `${this.dataLocation}-${domain}`;
}
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) {
const environment = JSON.stringify(this.environment).replace(/['"]/g, (match) => '\\' + match);
iframeUrl += `&env=${environment}`;
}
this.safeUrl = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl));
}
generateUuid() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
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) => {
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") {
const 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();
}
else if (event.data.type && event.data.type === "data-push-status") {
if (event.data.data.import_status === "success") {
if (event.data.row_data) {
const primary_row_data = event.data.row_data;
const headers = event.data.headers;
const rows = [];
const dynamic_columns_indexes = event.data.dynamicColumnsIndexes;
const virtual_columns_indexes = event.data.virtualColumnsIndexes || [];
primary_row_data.forEach((row_data) => {
const x = {};
const dynamic_columns = {};
const virtual_data = {};
row_data.data && row_data.data.forEach((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);
});
const 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 {
const 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 {
const 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();
}
}
initImporter() {
if (this.loadStarted)
this.loadStarted();
insertCSS();
const iframe = document.createElement("iframe");
this.iframe = iframe;
iframe.setAttribute("src", this.safeUrl?.toString() || '');
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({
"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);
}
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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CSVBoxButtonComponent, deps: [{ token: i1.DomSanitizer }], 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", isIframeLoaded: "isIframeLoaded", openModalOnIframeLoad: "openModalOnIframeLoad", lazy: "lazy", disabled: "disabled" }, viewQueries: [{ propertyName: "initiator", first: true, predicate: ["initiator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
<div>
<button [disabled]="disabled" #initiator (click)="openModal()" [attr.data-csvbox-token]="uuid">
<ng-content></ng-content>
</button>
</div>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CSVBoxButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'csvbox-button',
standalone: true,
template: `
<div>
<button [disabled]="disabled" #initiator (click)="openModal()" [attr.data-csvbox-token]="uuid">
<ng-content></ng-content>
</button>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, 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
}], isIframeLoaded: [{
type: Input
}], openModalOnIframeLoad: [{
type: Input
}], lazy: [{
type: Input
}], disabled: [{
type: Input
}] } });
/*
* Public API Surface of angular-adapter
*/
/**
* Generated bundle index. Do not edit.
*/
export { CSVBoxButtonComponent };
//# sourceMappingURL=csvbox-angular2.mjs.map