@syncfusion/ej2-react-form-builder 0.1.0-beta

package/Common/utils.d.ts

@@ -0,0 +1,130 @@
+import type { FormComponent, FormComponentConditions } from "../FormBuilder";
+/**
+ * @private
+ */
+export declare const VALIDATION_REGEX: {
+    [key: string]: RegExp;
+};
+/**
+ * @private
+ */
+export interface AvailableField {
+    name: string;
+    type: string;
+    format?: string;
+}
+/**
+ * Maps button style to Syncfusion CSS classes
+ * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
+ * @returns Space-separated CSS class string
+ * @private
+ */
+export declare const mapButtonStyleToClass: (style?: string) => string;
+/**
+ * Resolves button type to valid HTML button type
+ * @param type - Button type ('submit' | 'reset' | 'button')
+ * @returns Resolved button type
+ * @private
+ */
+export declare const resolveButtonType: (type?: "submit" | "reset" | "button") => "submit" | "reset" | "button";
+/**
+ * Maps button position to CSS justifyContent value
+ * @param position - Button position ('Left' | 'Right' | 'Center')
+ * @returns CSS justifyContent value
+ * @private
+ */
+export declare const mapPositionToJustifyContent: (position?: string) => string;
+/**
+ * @private
+ */
+export declare function splitWidths(input: Array<number | null>): number[];
+/**
+ * @private
+ */
+export declare function extractAllDescendantIds(component: FormComponent): string[];
+/**
+ * @private
+ */
+export declare function formatDateValues(component: FormComponent, value: any): any;
+/**
+ * @private
+ */
+export declare const getComponentFromSchema: (id?: string, formSchema?: any) => any | null;
+/**
+ * Helper function to get the appropriate adaptor instance
+ * @param adaptorType - Type of adaptor ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Adaptor instance
+ * @private
+ */
+export declare const getAdaptorInstance: (adaptorType?: string) => any;
+/**
+ * Extracts data from a nested path using dot notation and array indices
+ * @param data - The data object or array
+ * @param path - Path to the data (e.g., 'results.items', '[0].data', 'response[0].values')
+ * @returns Extracted data or empty array
+ * @private
+ */
+export declare const extractDataFromPath: (data: any, path?: string) => any;
+/**
+ * @private
+ */
+export declare const resolveFieldBinding: (value: any, formValues: Record<string, any>, components?: FormComponent[]) => any;
+/**
+ * Custom hook to fetch options from URL with custom headers
+ * @param componentOptions - The component options object which may contain URL and headers
+ * @param adaptorType - Type of adaptor to use ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Array of fetched options
+ * @private
+ */
+export declare const useFetchOptions: (componentOptions: any, formValues?: Record<string, any>, components?: FormComponent[]) => string[];
+/**
+ * Custom hook to fetch lookup options from backend
+ * @param formName - Name of the form to fetch submissions from
+ * @param field - Field name to extract from submissions
+ * @returns Array of field values
+ * @private
+ */
+export declare const useFetchLookupOptions: (formName?: string, field?: string) => string[];
+/**
+ * Resolves component options from various sources
+ * Handles array options, URL-fetched options, and raw data options
+ * @param options - Component options (can be array, URL config, or raw data config)
+ * @param fetchedOptions - Pre-fetched options from URL
+ * @returns Resolved array of options
+ * @private
+ */
+export declare const resolveOptions: (options: any, fetchedOptions: string[], fetchedLookupDataSource?: any[]) => any[];
+/**
+ * @private
+ */
+export declare const collectAvailableFieldNames: (components: FormComponent[]) => AvailableField[];
+/**
+ * Resolve conditional data for a DataGrid component
+ * Evaluates all conditionalData rules and applies the first matching one
+ * Returns both dataSource and custom columns if defined
+ *
+ * @param conditions - Component conditions including conditionalData rules
+ * @param formValues - Current form field values
+ * @returns Object with dataSource and columns, or undefined if no condition matches
+ * @private
+ */
+export declare const resolveConditionalData: (conditions: FormComponentConditions | undefined, formValues: Record<string, any>) => {
+    dataSource?: any[];
+    columns?: any[];
+} | undefined;
+/**
+ * Reads the current builder mode from the URL `mode` query parameter.
+ * @returns 'Simple' | 'Developer' | undefined if not present or invalid
+ * @private
+ */
+export declare const getCurrentMode: () => "Simple" | "Developer" | undefined;
+/**
+ * Navigates to a path-based route, e.g. '/builder', '/dashboard', '/templates',
+ * optionally with query string params, e.g. '/builder?formId=123'.
+ * The current `mode` query parameter is preserved and appended if it is not
+ * already present in the target.
+ *
+ * @param target - Target path (may include existing query params), e.g. '/builder?formId=123'
+ * @private
+ */
+export declare const navigateTo: (target: string) => void;

package/Common/utils.js

@@ -0,0 +1,574 @@
+import React from "react";
+import { Internationalization } from '@syncfusion/ej2-base';
+import { DataManager, Query, UrlAdaptor, WebApiAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ConditionalRuleEngine } from "./ConditionalRuleEngine";
+import { UI_TYPE_TO_SEMANTIC_TYPE } from './json-converter';
+import { ExpressionEngine } from "./expressions/ExpressionEngine";
+// import { submitUrl } from "../tempConstants";
+/**
+ * @private
+ */
+export const VALIDATION_REGEX = {
+    EMAIL: /^(?!.*\.\.)[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+    // eslint-disable-next-line security/detect-unsafe-regex
+    URL: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/,
+    DATE_ISO: /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/,
+    DIGITS: /^[0-9]*$/,
+    PHONE: /^[+]?[0-9]{9,13}$/,
+    CREDIT_CARD: /^\d{13,16}$/
+};
+/**
+ * Maps button style to Syncfusion CSS classes
+ * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
+ * @returns Space-separated CSS class string
+ * @private
+ */
+export const mapButtonStyleToClass = (style) => {
+    const styleMap = {
+        'primary': 'e-primary',
+        'flat': 'e-flat',
+        'information': 'e-info',
+        'error': 'e-danger',
+        'success': 'e-success',
+        'warning': 'e-warning'
+    };
+    return styleMap[style || 'primary'] || 'e-primary';
+};
+/**
+ * Resolves button type to valid HTML button type
+ * @param type - Button type ('submit' | 'reset' | 'button')
+ * @returns Resolved button type
+ * @private
+ */
+export const resolveButtonType = (type) => {
+    return (type === 'submit' || type === 'reset') ? type : 'button';
+};
+/**
+ * Maps button position to CSS justifyContent value
+ * @param position - Button position ('Left' | 'Right' | 'Center')
+ * @returns CSS justifyContent value
+ * @private
+ */
+export const mapPositionToJustifyContent = (position) => {
+    const positionMap = {
+        'Left': 'flex-start',
+        'Right': 'flex-end',
+        'Center': 'center'
+    };
+    return positionMap[position || 'Left'] || 'flex-start';
+};
+/**
+ * @private
+ */
+export function splitWidths(input) {
+    const result = input.map(v => (v === null ? NaN : Number(v)));
+    const sumKnown = result.reduce((s, v) => s + (isNaN(v) ? 0 : v), 0);
+    // If knowns already >= 100, unknowns become 0
+    const remainingInt = Math.max(0, Math.round(100 - sumKnown));
+    const unknownIndexes = result.map((v, i) => (isNaN(v) ? i : -1)).filter(i => i >= 0);
+    const k = unknownIndexes.length;
+    if (k === 0) {
+        // nothing to split; just clamp/round knowns so they sum to 100 if you prefer, but return as-is
+        return result.map(v => Math.round(v));
+    }
+    // Distribute integer percentage points to avoid fractional rounding problems
+    const base = Math.floor(remainingInt / k);
+    let remainder = remainingInt - base * k;
+    // Fill unknowns with base + 1 for first `remainder` items
+    unknownIndexes.forEach((idx) => {
+        const add = remainder > 0 ? base + 1 : base;
+        result[idx] = add;
+        remainder = Math.max(0, remainder - 1);
+    });
+    // Convert any NaN (shouldn't remain) to 0 and round knowns
+    return result.map(v => (isNaN(v) ? 0 : Math.round(v)));
+}
+/**
+ * @private
+ */
+export function extractAllDescendantIds(component) {
+    const childIds = [];
+    function traverse(comps) {
+        for (const comp of comps) {
+            childIds.push(comp.id);
+            // Recursively traverse nested structures
+            if (comp.children && Array.isArray(comp.children)) {
+                traverse(comp.children);
+            }
+            // Handle table cells
+            if (comp.tableCells && Array.isArray(comp.tableCells)) {
+                comp.tableCells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
+                            if (Array.isArray(cell)) {
+                                traverse(cell);
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle tab items
+            if (comp.tabItems && Array.isArray(comp.tabItems)) {
+                comp.tabItems.forEach((tabItem) => {
+                    if (tabItem.content && Array.isArray(tabItem.content)) {
+                        traverse(tabItem.content);
+                    }
+                });
+            }
+        }
+    }
+    // Start with direct children
+    if (component.children && Array.isArray(component.children)) {
+        traverse(component.children);
+    }
+    // Handle table cells
+    if (component.tableCells && Array.isArray(component.tableCells)) {
+        component.tableCells.forEach((row) => {
+            if (Array.isArray(row)) {
+                row.forEach((cell) => {
+                    if (Array.isArray(cell)) {
+                        traverse(cell);
+                    }
+                });
+            }
+        });
+    }
+    // Handle tab items
+    if (component.tabItems && Array.isArray(component.tabItems)) {
+        component.tabItems.forEach((tabItem) => {
+            if (tabItem.content && Array.isArray(tabItem.content)) {
+                traverse(tabItem.content);
+            }
+        });
+    }
+    return childIds;
+}
+/**
+ * @private
+ */
+export function formatDateValues(component, value) {
+    const intl = new Internationalization();
+    let dFormatter = intl.getDateFormat({
+        format: 'MM/dd/yyyy',
+        type: 'date'
+    });
+    if (component.type === 'date') {
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'time') {
+        dFormatter = intl.getDateFormat({
+            format: 'hh:mm a',
+            type: 'time'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateTime') {
+        dFormatter = intl.getDateFormat({
+            format: 'MM/dd/yyyy hh:mm a',
+            type: 'dateTime'
+        });
+        value = dFormatter(new Date(value));
+    }
+    if (component.type === 'dateRange' && Array.isArray(value)) {
+        value = value.map(date => date ? dFormatter(new Date(date)) : null);
+    }
+    return value;
+}
+/**
+ * @private
+ */
+export const getComponentFromSchema = (id, formSchema) => {
+    if (!id || !formSchema)
+        return null;
+    const findInComponents = (components) => {
+        for (const comp of components) {
+            if (comp.id === id || comp.name === id)
+                return comp;
+            if (comp.children) {
+                const found = findInComponents(comp.children);
+                if (found)
+                    return found;
+            }
+            if (comp.tableCells) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        const found = findInComponents(cell);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (comp.tabItems) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content) {
+                        const found = findInComponents(tab.content);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    return findInComponents(formSchema.components || []);
+};
+/**
+ * Helper function to get the appropriate adaptor instance
+ * @param adaptorType - Type of adaptor ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Adaptor instance
+ * @private
+ */
+export const getAdaptorInstance = (adaptorType) => {
+    switch (adaptorType) {
+        case 'WebApiAdaptor':
+            return new WebApiAdaptor();
+        case 'ODataV4Adaptor':
+            return new ODataV4Adaptor();
+        case 'UrlAdaptor':
+        default:
+            return new UrlAdaptor();
+    }
+};
+/**
+ * Extracts data from a nested path using dot notation and array indices
+ * @param data - The data object or array
+ * @param path - Path to the data (e.g., 'results.items', '[0].data', 'response[0].values')
+ * @returns Extracted data or empty array
+ * @private
+ */
+export const extractDataFromPath = (data, path) => {
+    if (!path || data === null || data === undefined)
+        return data;
+    // Split by dots but preserve array indices
+    const parts = path.split(/\.(?![^\[]*\])/); // Split by dots not inside brackets
+    let current = data;
+    for (const part of parts) {
+        if (current === null || current === undefined) {
+            return null;
+        }
+        // Handle array index notation like [0] or results[0]
+        const arrayMatch = part.match(/^(\w*)\[(\d+)\]$/);
+        if (arrayMatch) {
+            const propName = arrayMatch[1];
+            const index = parseInt(arrayMatch[2]);
+            // If propName is empty, current should be an array
+            if (!propName) {
+                current = current[index];
+            }
+            else {
+                current = current[propName]?.[index];
+            }
+        }
+        else {
+            // Regular property access
+            current = current[part];
+        }
+    }
+    return current;
+};
+/**
+ * Build name-indexed context from ID-indexed formValues
+ * Simple traversal to map field names to their values
+ * @private
+ */
+const buildNameContext = (formValues, components) => {
+    const context = {};
+    const traverse = (comps) => {
+        comps.forEach(comp => {
+            // Map name -> value from formValues (keyed by ID)
+            if (comp.name && comp.id in formValues) {
+                context[comp.name] = formValues[comp.id];
+            }
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems)
+                comp.tabItems.forEach(t => t.content && traverse(t.content));
+            if (comp.tableCells)
+                comp.tableCells.forEach(row => row.forEach(cell => traverse(cell)));
+        });
+    };
+    traverse(components);
+    return context;
+};
+/**
+ * @private
+ */
+export const resolveFieldBinding = (value, formValues, components) => {
+    if (typeof value !== 'string' || !/{[^}]+}/.test(value)) {
+        return value; // No field references
+    }
+    // Build context: map field names to values from ID-keyed formValues
+    const context = components
+        ? buildNameContext(formValues, components)
+        : formValues;
+    try {
+        const engine = new ExpressionEngine();
+        const result = engine.evaluate(value, context);
+        return result !== null && result !== undefined ? String(result) : '';
+    }
+    catch (err) {
+        console.error('Field binding error:', err);
+        return value; // Return original on error
+    }
+};
+/**
+ * Custom hook to fetch options from URL with custom headers
+ * @param componentOptions - The component options object which may contain URL and headers
+ * @param adaptorType - Type of adaptor to use ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Array of fetched options
+ * @private
+ */
+export const useFetchOptions = (componentOptions, formValues, components) => {
+    const [fetchedOptions, setFetchedOptions] = React.useState([]);
+    React.useEffect(() => {
+        const isUrlType = componentOptions &&
+            typeof componentOptions === 'object' &&
+            !Array.isArray(componentOptions) &&
+            componentOptions.type === 'url' &&
+            componentOptions.url;
+        if (isUrlType) {
+            const urlConfig = componentOptions;
+            try {
+                const headers = {};
+                if (urlConfig.headers && Array.isArray(urlConfig.headers)) {
+                    urlConfig.headers.forEach((h) => {
+                        if (h.key?.trim()) {
+                            headers[h.key] = h.value;
+                        }
+                    });
+                }
+                // ✅ Create DataManager with selected adaptor
+                const dataManager = new DataManager({
+                    url: urlConfig.url,
+                    adaptor: getAdaptorInstance(urlConfig.adaptorType),
+                    headers: Object.keys(headers).length ? headers : undefined
+                });
+                // ✅ Build Query (dynamic support)
+                let query = new Query();
+                if (urlConfig.search && urlConfig.search.enabled && urlConfig.search.fields && urlConfig.search.fields.length > 0) {
+                    const searchKey = urlConfig.search.key || 'search';
+                    // 🆕 Resolve field bindings in search value
+                    const resolvedSearchValue = formValues
+                        ? resolveFieldBinding(searchKey, formValues, components)
+                        : /[{}]/.test(searchKey) ? '' : searchKey;
+                    query = query.search(resolvedSearchValue, urlConfig.search.fields);
+                }
+                // Apply sort query
+                if (urlConfig.sort && urlConfig.sort.enabled && urlConfig.sort.field) {
+                    const sortDirection = urlConfig.sort.direction === 'descending' ? 'descending' : 'ascending';
+                    query = query.sortBy(urlConfig.sort.field, sortDirection);
+                }
+                // Apply filter queries with field binding resolution
+                if (urlConfig.filters && Array.isArray(urlConfig.filters) && urlConfig.filters.length > 0) {
+                    urlConfig.filters.forEach((f) => {
+                        if (f.field && f.operator && f.value !== undefined && f.value !== '') {
+                            const resolvedFilterValue = formValues
+                                ? resolveFieldBinding(f.value, formValues, components)
+                                : /[{}]/.test(f.value) ? '' : f.value;
+                            if (resolvedFilterValue !== '') {
+                                query = query.where(f.field, f.operator, resolvedFilterValue);
+                            }
+                        }
+                    });
+                }
+                // Example: add params (query string)
+                if (urlConfig.queryParams) {
+                    Object.keys(urlConfig.queryParams).forEach(key => {
+                        query = query.addParams(key, urlConfig.queryParams[key]);
+                    });
+                }
+                // Example: paging
+                if (urlConfig.skip)
+                    query = query.skip(urlConfig.skip);
+                if (urlConfig.take)
+                    query = query.take(urlConfig.take);
+                // ✅ Execute query
+                dataManager.executeQuery(query).then((res) => {
+                    let data = res.result;
+                    if (urlConfig.dataPath) {
+                        data = extractDataFromPath(data, urlConfig.dataPath);
+                    }
+                    if (Array.isArray(data)) {
+                        setFetchedOptions(data);
+                    }
+                    else if (typeof data === 'string') {
+                        setFetchedOptions([data]);
+                    }
+                    else {
+                        setFetchedOptions([]);
+                    }
+                }).catch((err) => {
+                    console.error('DataManager fetch error:', err);
+                    setFetchedOptions([]);
+                });
+            }
+            catch (err) {
+                console.error('Setup error:', err);
+                setFetchedOptions([]);
+            }
+        }
+    }, [componentOptions, formValues, components]);
+    return fetchedOptions;
+};
+/**
+ * Custom hook to fetch lookup options from backend
+ * @param formName - Name of the form to fetch submissions from
+ * @param field - Field name to extract from submissions
+ * @returns Array of field values
+ * @private
+ */
+export const useFetchLookupOptions = (formName, field) => {
+    const [lookupOptions, setLookupOptions] = React.useState([]);
+    React.useEffect(() => {
+        if (!formName)
+            return;
+        const fetchLookupData = async () => {
+            try {
+                const response = await fetch(/*submitUrl*/ '' + `${formName}`);
+                const submissions = await response.json();
+                if (field) {
+                    const options = submissions
+                        .map((submission) => submission[field])
+                        .filter(Boolean);
+                    setLookupOptions(options);
+                }
+                else {
+                    setLookupOptions(Array.isArray(submissions) ? submissions : []);
+                }
+            }
+            catch (error) {
+                console.error('Error fetching lookup data:', error);
+                setLookupOptions([]);
+            }
+        };
+        fetchLookupData();
+    }, [formName, field]);
+    return lookupOptions;
+};
+/**
+ * Resolves component options from various sources
+ * Handles array options, URL-fetched options, and raw data options
+ * @param options - Component options (can be array, URL config, or raw data config)
+ * @param fetchedOptions - Pre-fetched options from URL
+ * @returns Resolved array of options
+ * @private
+ */
+export const resolveOptions = (options, fetchedOptions, fetchedLookupDataSource) => {
+    // If lookup type with fetched data, return fetched lookup records
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'lookup' && fetchedLookupDataSource) {
+        return fetchedLookupDataSource?.length > 0 ? fetchedLookupDataSource : [];
+    }
+    // If URL type with fetched data, return fetched options
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'url') {
+        return fetchedOptions.length > 0 ? fetchedOptions : [];
+    }
+    // If already an array, return as-is
+    if (Array.isArray(options)) {
+        return options;
+    }
+    // If it's raw data type
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'raw') {
+        return Array.isArray(options.data) ? options.data : [];
+    }
+    return [];
+};
+/**
+ * @private
+ */
+export const collectAvailableFieldNames = (components) => {
+    const fieldNames = [];
+    const traverse = (comps) => {
+        comps.forEach(comp => {
+            // Only add fields that have a name and aren't layout components
+            if (comp.name && !['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].includes(comp.type)) {
+                // Get semantic type mapping for this component
+                const semanticType = UI_TYPE_TO_SEMANTIC_TYPE[comp.type];
+                if (semanticType) {
+                    fieldNames.push({
+                        name: comp.name,
+                        type: semanticType.type,
+                        ...(semanticType.format && { format: semanticType.format })
+                    });
+                }
+            }
+            // Traverse nested components
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems) {
+                comp.tabItems.forEach(tab => {
+                    if (tab.content)
+                        traverse(tab.content);
+                });
+            }
+            if (comp.tableCells) {
+                comp.tableCells.forEach(row => {
+                    row.forEach(cell => traverse(cell));
+                });
+            }
+        });
+    };
+    traverse(components);
+    return fieldNames;
+};
+/**
+ * Resolve conditional data for a DataGrid component
+ * Evaluates all conditionalData rules and applies the first matching one
+ * Returns both dataSource and custom columns if defined
+ *
+ * @param conditions - Component conditions including conditionalData rules
+ * @param formValues - Current form field values
+ * @returns Object with dataSource and columns, or undefined if no condition matches
+ * @private
+ */
+export const resolveConditionalData = (conditions, formValues) => {
+    if (!conditions?.conditionalData || !Array.isArray(conditions.conditionalData)) {
+        return undefined;
+    }
+    // Evaluate each conditional data rule in order
+    for (const rule of conditions.conditionalData) {
+        if (ConditionalRuleEngine.evaluateCondition(rule.condition, formValues)) {
+            // Condition is met - resolve and return both data source and columns
+            return {
+                dataSource: rule.dataSource,
+                columns: rule?.columns?.length > 0 ? rule.columns : undefined
+            };
+        }
+    }
+    return undefined;
+};
+/**
+ * Reads the current builder mode from the URL `mode` query parameter.
+ * @returns 'Simple' | 'Developer' | undefined if not present or invalid
+ * @private
+ */
+export const getCurrentMode = () => {
+    if (typeof window === 'undefined')
+        return undefined;
+    const urlMode = new URLSearchParams(window.location.search).get('mode');
+    if (urlMode === 'developer')
+        return 'Developer';
+    if (urlMode === 'simple')
+        return 'Simple';
+    return undefined;
+};
+/**
+ * Navigates to a path-based route, e.g. '/builder', '/dashboard', '/templates',
+ * optionally with query string params, e.g. '/builder?formId=123'.
+ * The current `mode` query parameter is preserved and appended if it is not
+ * already present in the target.
+ *
+ * @param target - Target path (may include existing query params), e.g. '/builder?formId=123'
+ * @private
+ */
+export const navigateTo = (target) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        const url = new URL(target, window.location.origin);
+        window.location.href = url.toString();
+    }
+    catch {
+        window.location.href = target;
+    }
+};