@flatfile/angular-sdk/fesm2022/flatfile-angular-sdk.mjs

Flatfile SDK for Angular

import * as i0 from '@angular/core';
import { signal, computed, Injectable, Component, Input, Pipe, effect, NgModule } from '@angular/core';
import { getErrorMessage, createWorkbookFromSheet, initNewSpace, createListener, createSimpleListener } from '@flatfile/embedded-utils';
import { FlatfileClient } from '@flatfile/api';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/platform-browser';

const authenticate = (key, apiUrl = 'https://platform.flatfile.com/api') => new FlatfileClient({
    token: key,
    environment: `${apiUrl}/v1`,
});

const getSpace = async (spaceProps) => {
    const { space, apiUrl, spaceUrl = 'https://platform.flatfile.com/s/', } = spaceProps;
    let spaceResponse;
    try {
        if (!space?.id) {
            throw new Error('Missing required ID for Space');
        }
        if (!space?.accessToken) {
            throw new Error('Missing required accessToken for Space');
        }
        const limitedAccessApi = authenticate(space?.accessToken, apiUrl);
        try {
            spaceResponse = await limitedAccessApi.spaces.get(space?.id);
        }
        catch (error) {
            throw new Error(`Failed to get space: ${getErrorMessage(error)}`);
        }
        if (!spaceResponse.data.accessToken) {
            throw new Error('Failed to retrieve accessToken');
        }
        if (!spaceResponse.data.guestLink) {
            const guestLink = `${spaceUrl}space/${space?.id}?token=${spaceResponse.data.accessToken}`;
            spaceResponse.data.guestLink = guestLink;
        }
        return { space: spaceResponse.data };
    }
    catch (error) {
        const message = getErrorMessage(error);
        console.error(`Failed to initialize space: ${message}`);
        throw error;
    }
};

const DEFAULT_API_URL = 'https://platform.flatfile.com/api';
class SpaceService {
    constructor() {
        this._loading = signal(false);
        this.loading = computed(() => this._loading());
        this._spaceInitialized = signal(undefined);
        this.spaceInitialized = computed(() => this._spaceInitialized());
        this.OpenEmbed = this.startFlatfile;
    }
    async getOrCreateSpace(spaceProps) {
        const { publishableKey } = spaceProps;
        if (!publishableKey) {
            return getSpace(spaceProps);
        }
        const { name, namespace, languageOverride, translationsPath, workbook, document, themeConfig, sidebarConfig, userInfo, apiUrl, sheet, onSubmit, } = spaceProps;
        let createdWorkbook = workbook;
        const isAutoConfig = !createdWorkbook && !sheet;
        if (!createdWorkbook && sheet) {
            createdWorkbook = createWorkbookFromSheet(sheet, !!onSubmit);
        }
        return initNewSpace({
            name,
            namespace,
            languageOverride,
            translationsPath,
            publishableKey,
            workbook: createdWorkbook,
            document,
            themeConfig,
            sidebarConfig,
            userInfo,
            isAutoConfig,
            apiUrl: apiUrl || DEFAULT_API_URL,
        });
    }
    async initSpace(spaceProps) {
        if (!spaceProps) {
            console.warn('spaceProps is required');
            return;
        }
        if (this.spaceInitialized() && !this.config?.resetOnClose) {
            console.warn('Space is already initialized');
            return;
        }
        this._loading.set(true);
        spaceProps.apiUrl ||= DEFAULT_API_URL;
        window.CROSSENV_FLATFILE_API_URL = spaceProps.apiUrl;
        this.currentSpaceProps = spaceProps;
        try {
            this.spaceResponse = await this.getOrCreateSpace(spaceProps);
            const { space } = this.spaceResponse;
            if (!space) {
                throw new Error('Missing space from response');
            }
            const { id: spaceId, accessToken, guestLink } = space;
            if (!spaceId || typeof spaceId !== 'string') {
                throw new Error('Missing spaceId from space response');
            }
            if (!guestLink || typeof guestLink !== 'string') {
                throw new Error('Missing guest link from space response');
            }
            if (!accessToken || typeof accessToken !== 'string') {
                throw new Error('Missing access token from space response');
            }
            const formattedSpaceProps = {
                ...spaceProps,
                spaceUrl: guestLink,
                localAccessToken: accessToken,
                apiUrl: spaceProps.apiUrl,
                workbook: spaceProps.workbook || this.spaceResponse.workbooks?.[0],
            };
            this._spaceInitialized.set(formattedSpaceProps);
            this._loading.set(false);
            return formattedSpaceProps;
        }
        catch (error) {
            console.error('Failed to initialize space:', error);
            throw error;
        }
    }
    async startFlatfile(spaceProps) {
        this.currentSpaceProps = spaceProps;
        return this.initSpace(this.currentSpaceProps);
    }
    closeEmbed() {
        this._loading.set(false);
        this._spaceInitialized.set(undefined);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

const getIframeStyles = (styles) => styles ?? {
    width: '100%',
    height: '750px',
    borderWidth: 0,
    borderRadius: '20px',
    background: '#fff',
    padding: '16px',
};
const getContainerStyles = (isModal) => {
    if (isModal) {
        return {
            width: 'calc(100% - 100px)',
            height: 'calc(100vh - 40px)',
            position: 'fixed',
            top: 0,
            left: 0,
            zIndex: 1000,
            backgroundColor: 'rgba(0,0,0,0.2)',
            display: 'flex',
            padding: '50px',
        };
    }
    return {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    };
};

class SpaceCloseModal {
    constructor() {
        this.title = 'space-close-modal';
        this.spaceCloseModalProps = {};
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceCloseModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SpaceCloseModal, selector: "space-close-modal", inputs: { spaceCloseModalProps: "spaceCloseModalProps" }, ngImport: i0, template: "<div\ndata-testid=\"close-confirm-modal\"\nclass=\"flatfile_outer-shell\"\n>\n  <div class=\"flatfile_inner-shell\">\n    <div class=\"flatfile_modal\">\n      <div class=\"flatfile_modal-heading\">\n        {{this.spaceCloseModalProps.exitTitle || \"Close Window\"}}\n      </div>\n      \n      <div class=\"flatfile_modal-text\">\n        {{this.spaceCloseModalProps.exitText || \"Are you sure you want to exit? Any unsaved changes will be lost.\"}}\n      </div>\n\n      <div class=\"flatfile_button-group\">\n        <button\n          class=\"flatfile_button flatfile_secondary\"\n          (click)=\"this.spaceCloseModalProps.onCancel()\"\n        >\n          <div>\n            {{ this.spaceCloseModalProps.exitSecondaryButtonText || \"Cancel\" }}\n          </div>\n        </button>\n\n        <button\n          class=\"flatfile_button flatfile_primary\"\n          (click)=\"this.spaceCloseModalProps.onConfirm()\"\n        >\n          <div>\n            {{ this.spaceCloseModalProps.exitPrimaryButtonText || \"Confirm\" }}\n          </div>\n        </button>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".flatfile_outer-shell{background-color:#0003;border-radius:5px;top:0;left:0;width:calc(100% - 40px);height:calc(100vh - 40px);padding:20px;display:block;overflow-y:auto;position:fixed;tab-size:4;z-index:1200}.flatfile_inner-shell{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-height:100%;padding:0;tab-size:4;text-align:left}.flatfile_modal{box-sizing:border-box;display:block;padding:1.5em;tab-size:4;text-align:left;background:#fff;min-width:500px;max-width:500px;border-radius:4px}.flatfile_modal-heading{font-size:1.225em;font-weight:600;margin-bottom:.4em;color:#090b2b}.flatfile_modal-text{font-size:14px;line-height:1.25em;margin-bottom:2em;color:#616a7d}.flatfile_button-group{display:flex;justify-content:flex-end}.flatfile_button{border:0;border-radius:1px;margin-left:15px;padding:8px 12px;cursor:pointer}.flatfile_primary{border:1px solid #4c48ef;background-color:#4c48ef;color:#fff}.flatfile_secondary{color:#616a7d}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceCloseModal, decorators: [{
            type: Component,
            args: [{ selector: 'space-close-modal', template: "<div\ndata-testid=\"close-confirm-modal\"\nclass=\"flatfile_outer-shell\"\n>\n  <div class=\"flatfile_inner-shell\">\n    <div class=\"flatfile_modal\">\n      <div class=\"flatfile_modal-heading\">\n        {{this.spaceCloseModalProps.exitTitle || \"Close Window\"}}\n      </div>\n      \n      <div class=\"flatfile_modal-text\">\n        {{this.spaceCloseModalProps.exitText || \"Are you sure you want to exit? Any unsaved changes will be lost.\"}}\n      </div>\n\n      <div class=\"flatfile_button-group\">\n        <button\n          class=\"flatfile_button flatfile_secondary\"\n          (click)=\"this.spaceCloseModalProps.onCancel()\"\n        >\n          <div>\n            {{ this.spaceCloseModalProps.exitSecondaryButtonText || \"Cancel\" }}\n          </div>\n        </button>\n\n        <button\n          class=\"flatfile_button flatfile_primary\"\n          (click)=\"this.spaceCloseModalProps.onConfirm()\"\n        >\n          <div>\n            {{ this.spaceCloseModalProps.exitPrimaryButtonText || \"Confirm\" }}\n          </div>\n        </button>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".flatfile_outer-shell{background-color:#0003;border-radius:5px;top:0;left:0;width:calc(100% - 40px);height:calc(100vh - 40px);padding:20px;display:block;overflow-y:auto;position:fixed;tab-size:4;z-index:1200}.flatfile_inner-shell{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-height:100%;padding:0;tab-size:4;text-align:left}.flatfile_modal{box-sizing:border-box;display:block;padding:1.5em;tab-size:4;text-align:left;background:#fff;min-width:500px;max-width:500px;border-radius:4px}.flatfile_modal-heading{font-size:1.225em;font-weight:600;margin-bottom:.4em;color:#090b2b}.flatfile_modal-text{font-size:14px;line-height:1.25em;margin-bottom:2em;color:#616a7d}.flatfile_button-group{display:flex;justify-content:flex-end}.flatfile_button{border:0;border-radius:1px;margin-left:15px;padding:8px 12px;cursor:pointer}.flatfile_primary{border:1px solid #4c48ef;background-color:#4c48ef;color:#fff}.flatfile_secondary{color:#616a7d}\n"] }]
        }], propDecorators: { spaceCloseModalProps: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class SafePipe {
    constructor(domSanitizer) {
        this.domSanitizer = domSanitizer;
    }
    transform(url) {
        return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SafePipe, name: "safe" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SafePipe, decorators: [{
            type: Pipe,
            args: [{ name: 'safe' }]
        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });

class SpaceFrame {
    constructor() {
        this.title = 'space-frame';
        this.showExitWarnModal = false;
        this.spaceCloseModalProps = {};
        this.iframeWrapperStyle = {};
        this.iframeStyle = {};
        this.handlePostMessageInstance = () => { };
        this.spaceFrameProps = {};
        this.loading = false;
    }
    async created() {
        const { listener, apiUrl, closeSpace, workbook } = this.spaceFrameProps;
        function closeSpaceNow() {
            removeMessageListener?.();
        }
        const accessToken = this.spaceFrameProps.localAccessToken;
        let removeMessageListener;
        const simpleListenerSlug = workbook?.sheets?.[0].slug || 'slug';
        if (listener) {
            removeMessageListener = await createListener(accessToken, apiUrl, listener, closeSpace, closeSpaceNow, 
            // TODO: add onInit for translations
            () => { });
        }
        else {
            removeMessageListener = await createListener(accessToken, apiUrl, createSimpleListener({
                onRecordHook: this.spaceFrameProps.onRecordHook,
                onSubmit: this.spaceFrameProps.onSubmit,
                slug: simpleListenerSlug,
                submitSettings: this.spaceFrameProps
                    .submitSettings,
            }), closeSpace, closeSpaceNow, 
            // TODO: add onInit for translations
            () => { });
        }
    }
    openCloseModalDialog() {
        this.showExitWarnModal = true;
    }
    handleConfirm() {
        const { closeSpace, handleCloseInstance } = this.spaceFrameProps;
        if (closeSpace?.onClose && typeof closeSpace.onClose === 'function') {
            closeSpace.onClose({});
        }
        handleCloseInstance && handleCloseInstance();
    }
    handleCancel() {
        this.showExitWarnModal = false;
    }
    ngOnInit() {
        const { exitText, exitTitle, exitPrimaryButtonText, exitSecondaryButtonText, } = this.spaceFrameProps;
        this.iframeWrapperStyle = getContainerStyles(this.spaceFrameProps.displayAsModal || false);
        this.iframeStyle = getIframeStyles(this.spaceFrameProps.iframeStyles);
        if (!this.spaceFrameProps.localAccessToken)
            throw new Error('please wait until access token is received');
        const accessToken = this.spaceFrameProps.localAccessToken;
        window.CROSSENV_FLATFILE_API_KEY = accessToken;
        this.spaceCloseModalProps = {
            onConfirm: this.handleConfirm.bind(this),
            onCancel: this.handleCancel.bind(this),
            exitText,
            exitTitle,
            exitPrimaryButtonText,
            exitSecondaryButtonText,
        };
        this.created();
    }
    ngOnDestroy() {
        window.removeEventListener('message', this.handlePostMessageInstance);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SpaceFrame, selector: "space-frame", inputs: { spaceFrameProps: "spaceFrameProps", loading: "loading" }, ngImport: i0, template: "<div class=\"flatfile_iframe-wrapper\" [ngClass]=\"{ 'flatfile_displayAsModal': this.spaceFrameProps.displayAsModal }\"\n  data-testid=\"space-contents\" [ngStyle]=\"this.iframeWrapperStyle\">\n  <space-close-modal *ngIf=\"this.showExitWarnModal\" [spaceCloseModalProps]=\"this.spaceCloseModalProps\" />\n  <iframe *ngIf=\"this.spaceFrameProps.spaceUrl\"\n    [ngClass]=\"{ 'flatfile_iFrameContainer': this.spaceFrameProps.mountElement }\"\n    [attr.data-testid]=\"this.spaceFrameProps.mountElement && 'flatfile_iFrameContainer'\"\n    [src]=\"this.spaceFrameProps.spaceUrl | safe\" id=\"flatfile_iframe\" allow=\"clipboard-read; clipboard-write\"\n    [ngStyle]=\"this.iframeStyle\">\n  </iframe>\n\n  <div (click)=\"this.openCloseModalDialog()\" data-testid=\"flatfile-close-button\" class=\"flatfile-close-button\"\n    style=\"position: absolute; margin: 30px;\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 100 100\">\n      <line x1=\"10\" y1=\"10\" x2=\"90\" y2=\"90\" stroke=\"white\" :stroke-width=\"10\" />\n      <line x1=\"10\" y1=\"90\" x2=\"90\" y2=\"10\" stroke=\"white\" :stroke-width=\"10\" />\n    </svg>\n  </div>\n</div>", styles: [".flatfile_displayAsModal #flatfile_iframe{border-radius:5px;background:#fff}.flatfile_displayAsModal .flatfile-close-button{position:absolute;z-index:10;top:35px;right:35px;display:flex;justify-content:center;width:25px;align-items:center;border-radius:100%;cursor:pointer;border:none;background:#000;box-shadow:0 0 10px #00000080;animation:glow 1.5s linear infinite alternate;transition:box-shadow .3s ease;height:25px}.flatfile_displayAsModal .flatfile-close-button:hover{box-shadow:0 0 10px #000c}.flatfile_displayAsModal .flatfile-close-button svg{fill:#616a7d;width:10px}.flatfile_iframe-wrapper{min-width:768px;min-height:600px;width:992px;height:600px}.flatfile_iframe-wrapper.flatfile_displayAsModal{box-sizing:content-box;position:fixed;top:0;left:0;width:calc(100% - 60px);max-width:100vw;height:calc(100vh - 60px);padding:30px;background:#0003;z-index:1000}.flatfile-close-button{text-align:center;position:relative;top:20px;right:-20px;width:25px;height:25px;border-radius:100%;cursor:pointer;border:none;background:#000;box-shadow:0 0 10px #00000080;animation:glow 1.5s linear infinite alternate;transition:box-shadow .3s ease}.flatfile-close-button:hover{box-shadow:0 0 10px #000c}.flatfile-close-button svg{fill:#d3d3d3;width:10px}#flatfile_iframe{border-width:0px;width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpaceCloseModal, selector: "space-close-modal", inputs: ["spaceCloseModalProps"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceFrame, decorators: [{
            type: Component,
            args: [{ selector: 'space-frame', template: "<div class=\"flatfile_iframe-wrapper\" [ngClass]=\"{ 'flatfile_displayAsModal': this.spaceFrameProps.displayAsModal }\"\n  data-testid=\"space-contents\" [ngStyle]=\"this.iframeWrapperStyle\">\n  <space-close-modal *ngIf=\"this.showExitWarnModal\" [spaceCloseModalProps]=\"this.spaceCloseModalProps\" />\n  <iframe *ngIf=\"this.spaceFrameProps.spaceUrl\"\n    [ngClass]=\"{ 'flatfile_iFrameContainer': this.spaceFrameProps.mountElement }\"\n    [attr.data-testid]=\"this.spaceFrameProps.mountElement && 'flatfile_iFrameContainer'\"\n    [src]=\"this.spaceFrameProps.spaceUrl | safe\" id=\"flatfile_iframe\" allow=\"clipboard-read; clipboard-write\"\n    [ngStyle]=\"this.iframeStyle\">\n  </iframe>\n\n  <div (click)=\"this.openCloseModalDialog()\" data-testid=\"flatfile-close-button\" class=\"flatfile-close-button\"\n    style=\"position: absolute; margin: 30px;\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 100 100\">\n      <line x1=\"10\" y1=\"10\" x2=\"90\" y2=\"90\" stroke=\"white\" :stroke-width=\"10\" />\n      <line x1=\"10\" y1=\"90\" x2=\"90\" y2=\"10\" stroke=\"white\" :stroke-width=\"10\" />\n    </svg>\n  </div>\n</div>", styles: [".flatfile_displayAsModal #flatfile_iframe{border-radius:5px;background:#fff}.flatfile_displayAsModal .flatfile-close-button{position:absolute;z-index:10;top:35px;right:35px;display:flex;justify-content:center;width:25px;align-items:center;border-radius:100%;cursor:pointer;border:none;background:#000;box-shadow:0 0 10px #00000080;animation:glow 1.5s linear infinite alternate;transition:box-shadow .3s ease;height:25px}.flatfile_displayAsModal .flatfile-close-button:hover{box-shadow:0 0 10px #000c}.flatfile_displayAsModal .flatfile-close-button svg{fill:#616a7d;width:10px}.flatfile_iframe-wrapper{min-width:768px;min-height:600px;width:992px;height:600px}.flatfile_iframe-wrapper.flatfile_displayAsModal{box-sizing:content-box;position:fixed;top:0;left:0;width:calc(100% - 60px);max-width:100vw;height:calc(100vh - 60px);padding:30px;background:#0003;z-index:1000}.flatfile-close-button{text-align:center;position:relative;top:20px;right:-20px;width:25px;height:25px;border-radius:100%;cursor:pointer;border:none;background:#000;box-shadow:0 0 10px #00000080;animation:glow 1.5s linear infinite alternate;transition:box-shadow .3s ease}.flatfile-close-button:hover{box-shadow:0 0 10px #000c}.flatfile-close-button svg{fill:#d3d3d3;width:10px}#flatfile_iframe{border-width:0px;width:100%;height:100%;position:relative}\n"] }]
        }], propDecorators: { spaceFrameProps: [{
                type: Input,
                args: [{ required: true }]
            }], loading: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class Spinner {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Spinner, selector: "spinner", ngImport: i0, template: "<div>\n  <div\n    class=\"ff_spinner\"\n    data-testid=\"spinner-icon\"\n  ></div>\n</div>", styles: [".ff_spinner{border:4px solid rgba(255,255,255,.7);border-top:4px solid #4c48ef;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}.spinner{border:4px solid rgba(255,255,255,.7);border-top:4px solid #4c48ef;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Spinner, decorators: [{
            type: Component,
            args: [{ selector: 'spinner', template: "<div>\n  <div\n    class=\"ff_spinner\"\n    data-testid=\"spinner-icon\"\n  ></div>\n</div>", styles: [".ff_spinner{border:4px solid rgba(255,255,255,.7);border-top:4px solid #4c48ef;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}.spinner{border:4px solid rgba(255,255,255,.7);border-top:4px solid #4c48ef;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
        }] });

class Space {
    constructor(spaceService) {
        this.spaceService = spaceService;
        this.openDirectly = false;
        this.config = {
            resetOnClose: true,
        };
        this.title = 'Space';
        this.loading = false;
        this.closeInstance = false;
        effect(() => {
            this.loading = this.spaceService.loading();
            this.spaceFrameProps = this.spaceService.spaceInitialized()
                ? {
                    ...this.spaceService.spaceInitialized(),
                    handleCloseInstance: this.handleCloseInstance.bind(this),
                }
                : undefined;
        });
    }
    async ngOnInit() {
        if (!this.spaceProps) {
            throw new Error('Please define the space props');
        }
        this.spaceService.config = this.config;
        if (this.openDirectly) {
            await this.spaceService.initSpace(this.spaceProps);
        }
    }
    handleCloseInstance() {
        this.closeInstance = true;
        this.spaceFrameProps = undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Space, deps: [{ token: SpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Space, selector: "flatfile-space", inputs: { spaceProps: "spaceProps", openDirectly: "openDirectly", config: "config" }, ngImport: i0, template: "<div *ngIf=\"!this.closeInstance\">\n  <spinner *ngIf=\"this.loading\" />\n  <div *ngIf=\"this.spaceFrameProps !== undefined;else error_content\">\n    <space-frame *ngIf=\"this.spaceFrameProps.localAccessToken && !this.loading\" [loading]=\"this.loading\"\n      [spaceFrameProps]=\"this.spaceFrameProps\" />\n  </div>\n  <ng-template #error_content>\n    <div *ngIf=\"this.error\" class=\"ff_error_container\">\n      <h3 class=\"ff_error_heading\">Something Went Wrong</h3>\n      <p class=\"ff_error_text\">\n        {{this.error.message}}\n      </p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".flatfile_iframe-wrapper{background-color:#fff;color:#404857;font-family:Proxima Nova,Helvetica,sans-serif;font-size:15px;line-height:1.5}.ff_error_container{display:flex;flex-direction:column;margin:16px}.ff_error_heading{display:flex;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpaceFrame, selector: "space-frame", inputs: ["spaceFrameProps", "loading"] }, { kind: "component", type: Spinner, selector: "spinner" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Space, decorators: [{
            type: Component,
            args: [{ selector: 'flatfile-space', template: "<div *ngIf=\"!this.closeInstance\">\n  <spinner *ngIf=\"this.loading\" />\n  <div *ngIf=\"this.spaceFrameProps !== undefined;else error_content\">\n    <space-frame *ngIf=\"this.spaceFrameProps.localAccessToken && !this.loading\" [loading]=\"this.loading\"\n      [spaceFrameProps]=\"this.spaceFrameProps\" />\n  </div>\n  <ng-template #error_content>\n    <div *ngIf=\"this.error\" class=\"ff_error_container\">\n      <h3 class=\"ff_error_heading\">Something Went Wrong</h3>\n      <p class=\"ff_error_text\">\n        {{this.error.message}}\n      </p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".flatfile_iframe-wrapper{background-color:#fff;color:#404857;font-family:Proxima Nova,Helvetica,sans-serif;font-size:15px;line-height:1.5}.ff_error_container{display:flex;flex-direction:column;margin:16px}.ff_error_heading{display:flex;margin-bottom:0}\n"] }]
        }], ctorParameters: () => [{ type: SpaceService }], propDecorators: { spaceProps: [{
                type: Input
            }], openDirectly: [{
                type: Input
            }], config: [{
                type: Input
            }] } });

class SpaceModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SpaceModule, declarations: [Space, SpaceFrame, SpaceCloseModal, SafePipe, Spinner], imports: [CommonModule], exports: [Space] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceModule, providers: [SpaceService], imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaceModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [Space, SpaceFrame, SpaceCloseModal, SafePipe, Spinner],
                    imports: [CommonModule],
                    providers: [SpaceService],
                    exports: [Space],
                }]
        }] });

/*
 * Public API Surface of flatfile
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Space, SpaceModule, SpaceService };
//# sourceMappingURL=flatfile-angular-sdk.mjs.map