@formio/js 5.0.0-rc.26 → 5.0.0-rc.28

package/lib/cjs/components/well/editForm/Well.edit.display.js

@@ -29,4 +29,22 @@ exports.default = [
         key: 'tableView',
         ignore: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        weight: 0,
+        type: 'textfield',
+        input: true,
+        key: 'label',
+        label: 'Label',
+        placeholder: 'Field Label',
+        tooltip: 'The label for this field.',
+        validate: {
+            required: true
+        },
+        autofocus: true,
+        overrideEditForm: true
+    },
 ];

package/lib/cjs/formio.embed.js

@@ -26,9 +26,11 @@ if (thisScript) {
         config.formioPath(scriptSrc);
     }
     scriptSrc = scriptSrc.join('/');
+    const debug = (query.debug === 'true' || query.debug === '1');
+    const renderer = debug ? 'formio.form' : 'formio.form.min';
     Embed_1.Formio.config = Object.assign({
-        script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.js`),
-        style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.css`),
+        script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
+        style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
         cdn: query.cdn,
         class: (query.class || 'formio-form-wrapper'),
         src: query.src,
@@ -39,7 +41,7 @@ if (thisScript) {
         submit: query.submit,
         includeLibs: (query.libs === 'true' || query.libs === '1'),
         template: query.template,
-        debug: (query.debug === 'true' || query.debug === '1'),
+        debug: debug,
         config: {},
         redirect: (query.return || query.redirect),
         embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),

package/lib/cjs/formio.form.d.ts

@@ -8,16 +8,10 @@ export function useModule(defaultFn?: null): (plugins: any, options?: {}) => voi
 import Components from './components/Components';
 import Displays from './displays/Displays';
 import Providers from './providers';
-import Rules from './validator/Rules';
 import Widgets from './widgets';
 import Templates from './templates/Templates';
-import Conjunctions from './validator/conjunctions';
-import Operators from './validator/operators';
-import QuickRules from './validator/quickRules';
-import Transformers from './validator/transformers';
-import ValueSources from './validator/valueSources';
 import Utils from './utils';
 import Form from './Form';
 import { Formio } from './Formio';
 import Licenses from './licenses';
-export { Components, Displays, Providers, Rules, Widgets, Templates, Conjunctions, Operators, QuickRules, Transformers, ValueSources, Utils, Form, Formio, Licenses };
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses };

package/lib/cjs/formio.form.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.ValueSources = exports.Transformers = exports.QuickRules = exports.Operators = exports.Conjunctions = exports.Templates = exports.Widgets = exports.Rules = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
+exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("./Formio");
 Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return Formio_1.Formio; } });
@@ -16,18 +16,6 @@ const Templates_1 = __importDefault(require("./templates/Templates"));
 exports.Templates = Templates_1.default;
 const providers_1 = __importDefault(require("./providers"));
 exports.Providers = providers_1.default;
-const Rules_1 = __importDefault(require("./validator/Rules"));
-exports.Rules = Rules_1.default;
-const conjunctions_1 = __importDefault(require("./validator/conjunctions"));
-exports.Conjunctions = conjunctions_1.default;
-const operators_1 = __importDefault(require("./validator/operators"));
-exports.Operators = operators_1.default;
-const quickRules_1 = __importDefault(require("./validator/quickRules"));
-exports.QuickRules = quickRules_1.default;
-const transformers_1 = __importDefault(require("./validator/transformers"));
-exports.Transformers = transformers_1.default;
-const valueSources_1 = __importDefault(require("./validator/valueSources"));
-exports.ValueSources = valueSources_1.default;
 const widgets_1 = __importDefault(require("./widgets"));
 exports.Widgets = widgets_1.default;
 const Form_1 = __importDefault(require("./Form"));
@@ -50,14 +38,8 @@ Formio_1.Formio.Utils = utils_1.default;
 Formio_1.Formio.Form = Form_1.default;
 Formio_1.Formio.Displays = Displays_1.default;
 Formio_1.Formio.Providers = providers_1.default;
-Formio_1.Formio.Rules = Rules_1.default;
 Formio_1.Formio.Widgets = widgets_1.default;
 Formio_1.Formio.Evaluator = Evaluator_1.default;
-Formio_1.Formio.Conjunctions = conjunctions_1.default;
-Formio_1.Formio.Operators = operators_1.default;
-Formio_1.Formio.QuickRules = quickRules_1.default;
-Formio_1.Formio.Transformers = transformers_1.default;
-Formio_1.Formio.ValueSources = valueSources_1.default;
 Formio_1.Formio.AllComponents = components_1.default;
 Formio_1.Formio.Licenses = licenses_1.default;
 // This is strange, but is needed for "premium" components to import correctly.
@@ -106,30 +88,12 @@ function registerModule(mod, defaultFn = null, options = {}) {
             case 'displays':
                 Formio_1.Formio.Displays.addDisplays(mod.displays);
                 break;
-            case 'rules':
-                Formio_1.Formio.Rules.addRules(mod.rules);
-                break;
             case 'evaluator':
                 Formio_1.Formio.Evaluator.registerEvaluator(mod.evaluator);
                 break;
-            case 'conjunctions':
-                Formio_1.Formio.Conjunctions.addConjunctions(mod.conjunctions);
-                break;
-            case 'operators':
-                Formio_1.Formio.Operators.addOperators(mod.operators);
-                break;
-            case 'quickRules':
-                Formio_1.Formio.QuickRules.addQuickRules(mod.quickRules);
-                break;
-            case 'transformers':
-                Formio_1.Formio.Transformers.addTransformers(mod.transformers);
-                break;
-            case 'valueSources':
-                Formio_1.Formio.ValueSources.addValueSources(mod.valueSources);
-                break;
             case 'library':
                 options.license
-                    ? Formio_1.Formio.Licenses.addLicense(mod.library, mod.license)
+                    ? Formio_1.Formio.Licenses.addLicense(mod.library, options.license)
                     : Formio_1.Formio.Licenses.removeLicense(mod.library);
                 break;
             default:

package/lib/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./formio.form";
 import FormBuilder from './FormBuilder';
 import Builders from './builders/Builders';
-export { FormBuilder, Builders };
+import { Formio } from './formio.form';
+export { FormBuilder, Builders, Formio };

package/lib/cjs/index.js

@@ -17,12 +17,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Builders = exports.FormBuilder = void 0;
+exports.Formio = exports.Builders = exports.FormBuilder = void 0;
 const FormBuilder_1 = __importDefault(require("./FormBuilder"));
 exports.FormBuilder = FormBuilder_1.default;
 const Builders_1 = __importDefault(require("./builders/Builders"));
 exports.Builders = Builders_1.default;
 const formio_form_1 = require("./formio.form");
+Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return formio_form_1.Formio; } });
 formio_form_1.Formio.Builders = Builders_1.default;
 formio_form_1.Formio.use = (0, formio_form_1.useModule)((key, mod) => {
     if (key === 'builders') {

package/lib/cjs/providers/Providers.d.ts

@@ -27,7 +27,6 @@ export default class Providers {
                         type: any;
                     }>;
                     downloadFile(file: any): any;
-                    deleteFile(fileInfo: any): any;
                 };
                 title: string;
             };
@@ -50,10 +49,8 @@ export default class Providers {
                         type: any;
                         groupPermissions: any;
                         groupId: any;
-                        key: any;
                     }>;
                     downloadFile(file: any): any;
-                    deleteFile: (fileInfo: any) => any;
                 };
                 title: string;
             };
@@ -71,7 +68,6 @@ export default class Providers {
                 (formio: any): {
                     uploadFile(file: any, fileName: any, dir: any, progressCallback: any, url: any, options: any, fileKey: any, groupPermissions: any, groupId: any, abortCallback: any): Promise<any>;
                     downloadFile(file: any): Promise<any>;
-                    deleteFile: (fileInfo: any) => any;
                 };
                 title: string;
             };

package/lib/cjs/providers/storage/azure.d.ts

@@ -7,10 +7,8 @@ declare function azure(formio: any): {
         type: any;
         groupPermissions: any;
         groupId: any;
-        key: any;
     }>;
     downloadFile(file: any): any;
-    deleteFile: (fileInfo: any) => any;
 };
 declare namespace azure {
     const title: string;

package/lib/cjs/providers/storage/azure.js

@@ -11,7 +11,7 @@ const azure = (formio) => ({
             xhr.setRequestHeader('Content-Type', file.type);
             xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
             return file;
-        }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then((response) => {
+        }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then(() => {
             return {
                 storage: 'azure',
                 name: xhr_1.default.path([dir, fileName]),
@@ -19,16 +19,11 @@ const azure = (formio) => ({
                 type: file.type,
                 groupPermissions,
                 groupId,
-                key: response.pathFile
             };
         });
     },
     downloadFile(file) {
         return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${xhr_1.default.trim(file.name)}`, 'GET');
-    },
-    deleteFile: function deleteFile(fileInfo) {
-        var url = `${formio.formUrl}/storage/azure?name=${xhr_1.default.trim(fileInfo.name)}&key=${xhr_1.default.trim(fileInfo.key)}`;
-        return formio.makeRequest('', url, 'delete');
     }
 });
 azure.title = 'Azure File Services';

package/lib/cjs/providers/storage/googleDrive.d.ts

@@ -2,7 +2,6 @@ export default googledrive;
 declare function googledrive(formio: any): {
     uploadFile(file: any, fileName: any, dir: any, progressCallback: any, url: any, options: any, fileKey: any, groupPermissions: any, groupId: any, abortCallback: any): Promise<any>;
     downloadFile(file: any): Promise<any>;
-    deleteFile: (fileInfo: any) => any;
 };
 declare namespace googledrive {
     const title: string;

package/lib/cjs/providers/storage/googleDrive.js

@@ -50,10 +50,6 @@ const googledrive = (formio) => ({
         file.url =
             `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;
         return Promise.resolve(file);
-    },
-    deleteFile: function deleteFile(fileInfo) {
-        var url = ''.concat(formio.formUrl, `/storage/gdrive?id=${fileInfo.id}&name=${fileInfo.originalName}`);
-        return formio.makeRequest('', url, 'delete');
     }
 });
 googledrive.title = 'Google Drive';

package/lib/cjs/providers/storage/s3.d.ts

@@ -11,7 +11,6 @@ declare function s3(formio: any): {
         type: any;
     }>;
     downloadFile(file: any): any;
-    deleteFile(fileInfo: any): any;
 };
 declare namespace s3 {
     const title: string;

package/lib/cjs/providers/storage/s3.js

@@ -43,10 +43,6 @@ const s3 = (formio) => ({
         else {
             return Promise.resolve(file);
         }
-    },
-    deleteFile(fileInfo) {
-        const url = `${formio.formUrl}/file/${xhr_1.default.trim(fileInfo.name)}?bucket=${xhr_1.default.trim(fileInfo.bucket)}&key=${xhr_1.default.trim(fileInfo.key)}`;
-        return formio.makeRequest('', url, 'delete');
     }
 });
 s3.title = 'S3';

package/lib/cjs/translations/en.d.ts

@@ -2,6 +2,8 @@ declare namespace _default {
     const unsavedRowsError: string;
     const invalidRowsError: string;
     const invalidRowError: string;
+    const invalidOption: string;
+    const invalidDay: string;
     const alertMessageWithLabel: string;
     const alertMessage: string;
     const complete: string;
@@ -26,11 +28,14 @@ declare namespace _default {
     const minDate: string;
     const maxYear: string;
     const minYear: string;
+    const minSelectedCount: string;
+    const maxSelectedCount: string;
     const invalid_email: string;
     const invalid_url: string;
     const invalid_regex: string;
     const invalid_date: string;
     const invalid_day: string;
+    const invalidValueProperty: string;
     const mask: string;
     const valueIsNotAvailable: string;
     const stripe: string;

package/lib/cjs/translations/en.js

@@ -4,6 +4,8 @@ exports.default = {
     unsavedRowsError: 'Please save all rows before proceeding.',
     invalidRowsError: 'Please correct invalid rows before proceeding.',
     invalidRowError: 'Invalid row. Please correct it or delete.',
+    invalidOption: '{{field}} is an invalid value.',
+    invalidDay: '{{field}} is not a valid day.',
     alertMessageWithLabel: '{{label}}: {{message}}',
     alertMessage: '{{message}}',
     complete: 'Submission Complete',
@@ -28,11 +30,14 @@ exports.default = {
     minDate: '{{field}} should not contain date before {{- minDate}}',
     maxYear: '{{field}} should not contain year greater than {{maxYear}}',
     minYear: '{{field}} should not contain year less than {{minYear}}',
+    minSelectedCount: 'You must select at least {{minCount}} items',
+    maxSelectedCount: 'You may only select up to {{maxCount}} items',
     invalid_email: '{{field}} must be a valid email.',
     invalid_url: '{{field}} must be a valid url.',
     invalid_regex: '{{field}} does not match the pattern {{regex}}.',
     invalid_date: '{{field}} is not a valid date.',
     invalid_day: '{{field}} is not a valid day.',
+    invalidValueProperty: 'Invalid Value Property',
     mask: '{{field}} does not match the mask.',
     valueIsNotAvailable: '{{ field }} is an invalid value.',
     stripe: '{{stripe}}',

package/lib/cjs/utils/formUtils.js

@@ -18,6 +18,7 @@ const chunk_1 = __importDefault(require("lodash/chunk"));
 const pad_1 = __importDefault(require("lodash/pad"));
 const fast_json_patch_1 = require("fast-json-patch");
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("./utils");
 /**
  * Determine if a component is a layout component or not.
  *

package/lib/cjs/utils/utils.d.ts

@@ -306,7 +306,7 @@ export function sanitize(string: any, options: any): any;
 export function fastCloneDeep(obj: any): any;
 export function isInputComponent(componentJson: any): any;
 export function getArrayFromComponentPath(pathStr: any): any;
-export function hasInvalidComponent(component: any): any;
+export function isChildOf(child: any, parent: any): boolean;
 export function getStringFromComponentPath(path: any): any;
 export function round(number: any, precision: any): any;
 /**
@@ -367,6 +367,7 @@ export namespace componentValueTypes {
     const date: string;
     const any: string;
 }
+export function interpolateErrors(component: any, errors: FieldError[], interpolateFn: any): [];
 import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import Evaluator from './Evaluator';

package/lib/cjs/utils/utils.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.hasInvalidComponent = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
+exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -784,8 +784,10 @@ function convertFormatToMask(format) {
         .replace(/M{3}/g, '***')
         // Short month conversion if input as text.
         .replace(/e/g, 'Q')
+        // Month number conversion.
+        .replace(/W/g, '99')
         // Year conversion.
-        .replace(/[ydhmsHMG]/g, '9')
+        .replace(/[ydhmswHMG]/g, '9')
         // AM/PM conversion.
         .replace(/a/g, 'AA');
 }
@@ -1297,15 +1299,16 @@ function getArrayFromComponentPath(pathStr) {
         .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));
 }
 exports.getArrayFromComponentPath = getArrayFromComponentPath;
-function hasInvalidComponent(component) {
-    return component.getComponents().some((comp) => {
-        if (lodash_1.default.isArray(comp.components)) {
-            return hasInvalidComponent(comp);
+function isChildOf(child, parent) {
+    while (child && child.parent) {
+        if (child.parent === parent) {
+            return true;
         }
-        return comp.error;
-    });
+        child = child.parent;
+    }
+    return false;
 }
-exports.hasInvalidComponent = hasInvalidComponent;
+exports.isChildOf = isChildOf;
 function getStringFromComponentPath(path) {
     if (!lodash_1.default.isArray(path)) {
         return path;
@@ -1485,3 +1488,18 @@ function getComponentSavedTypes(fullSchema) {
     return null;
 }
 exports.getComponentSavedTypes = getComponentSavedTypes;
+/**
+ * Interpolates @formio/core errors so that they are compatible with the renderer
+ * @param {FieldError[]} errors
+ * @param firstPass
+ * @returns {[]}
+ */
+const interpolateErrors = (component, errors, interpolateFn) => {
+    return errors.map((error) => {
+        error.component = component;
+        const { errorKeyOrMessage, context } = error;
+        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;
+        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });
+    });
+};
+exports.interpolateErrors = interpolateErrors;

package/lib/mjs/Embed.d.ts

@@ -5,6 +5,7 @@ export class Formio {
     static config: {};
     static cdn: null;
     static proxy: boolean;
+    static version: string;
     static setBaseUrl(url: any): Promise<void>;
     static setProjectUrl(url: any): Promise<void>;
     static debug(...args: any[]): void;
@@ -15,7 +16,7 @@ export class Formio {
     static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static init(element: any, builder?: boolean): Promise<any>;
+    static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static createForm(element: any, form: any, options: any): Promise<any>;
     static builder(element: any, form: any, options: any): Promise<any>;
 }

package/lib/mjs/Embed.js

@@ -6,6 +6,7 @@ class Formio {
     static config = {};
     static cdn = null;
     static proxy = true;
+    static version = 'FORMIO_VERSION';
     static async setBaseUrl(url) {
         Formio.baseUrl = url;
     }
@@ -117,10 +118,14 @@ class Formio {
     }
     // Return the full script if the builder is being used.
     static formioScript(script, builder) {
-        return builder ? script.replace('formio.form', 'formio.full') : script;
+        if (Formio.fullAdded || builder) {
+            Formio.fullAdded = true;
+            return script.replace('formio.form', 'formio.full');
+        }
+        return script;
     }
     // eslint-disable-next-line max-statements
-    static async init(element, builder = false) {
+    static async init(element, options = {}, builder = false) {
         Formio.cdn = new CDN(Formio.config.cdn);
         Formio.config.libs = Formio.config.libs || {
             uswds: {
@@ -137,10 +142,17 @@ class Formio {
         };
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
         // Create a new wrapper and add the element inside of a new wrapper.
-        const wrapper = Formio.createElement('div', {
+        let wrapper = Formio.createElement('div', {
             'id': `"${id}-wrapper"`
         });
         element.parentNode.insertBefore(wrapper, element);
+        // If we include the libraries, then we will attempt to run this in shadow dom.
+        if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {
+            wrapper = wrapper.attachShadow({
+                mode: 'open'
+            });
+            options.shadowRoot = wrapper;
+        }
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
         // Load the renderer styles.
@@ -160,7 +172,8 @@ class Formio {
                         }
                     }]
             }]));
-        Formio.FormioClass = await Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), 'Formio');
+        const renderer = Formio.config.debug ? 'formio.form' : 'formio.form.min';
+        Formio.FormioClass = await Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio');
         Formio.FormioClass.setBaseUrl(Formio.baseUrl || Formio.config.base);
         Formio.FormioClass.setProjectUrl(Formio.projectUrl || Formio.config.project);
         Formio.FormioClass.language = Formio.language;
@@ -202,7 +215,7 @@ class Formio {
             Formio.debug('Using premium');
             Formio.FormioClass.use(await Formio.addScript(wrapper, Formio.config.premium.js, 'premium'));
         }
-        await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
+        await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
         if (Formio.config.before) {
             await Formio.config.before(Formio.FormioClass, element, Formio.config);
         }
@@ -210,7 +223,7 @@ class Formio {
         return wrapper;
     }
     static async createForm(element, form, options) {
-        const wrapper = await Formio.init(element);
+        const wrapper = await Formio.init(element, options);
         return Formio.FormioClass.createForm(element, form, {
             ...options,
             ...{ noLoader: true }
@@ -236,7 +249,7 @@ class Formio {
         });
     }
     static async builder(element, form, options) {
-        const wrapper = await Formio.init(element, true);
+        const wrapper = await Formio.init(element, options, true);
         return Formio.FormioClass.builder(element, form, options).then((instance) => {
             Formio.debug('Builder created', instance);
             Formio.debug('Removing loader');

package/lib/mjs/PDF.js

@@ -235,7 +235,7 @@ export default class PDF extends Webform {
         const helpBlock = document.getElementById('submit-error');
         const submitError = this.t('submitError');
         const isSubmitErrorShown = this.refs.buttonMessage?.textContent.trim() === submitError;
-        if (!helpBlock && this.errors.length && !isSubmitErrorShown) {
+        if (!helpBlock && error.length && !isSubmitErrorShown) {
             const p = this.ce('p', { class: 'help-block' });
             this.setContent(p, submitError);
             p.addEventListener('click', () => {
@@ -245,7 +245,7 @@ export default class PDF extends Webform {
             this.appendTo(p, div);
             this.appendTo(div, this.element);
         }
-        if (!this.errors.length && helpBlock) {
+        if (!error.length && helpBlock) {
             helpBlock.remove();
         }
         super.showErrors(error, triggerEvent);

package/lib/mjs/Webform.d.ts

@@ -20,7 +20,6 @@ declare class Webform extends NestedDataComponent {
     draftEnabled: boolean;
     savingDraft: boolean;
     triggerSaveDraft: any;
-    customErrors: any[];
     set nosubmit(arg: any);
     get nosubmit(): any;
     /**
@@ -327,7 +326,7 @@ declare class Webform extends NestedDataComponent {
      * @param {Object} error - An optional additional error to display along with the component errors.
      * @returns {*}
      */
-    showErrors(error: Object, triggerEvent: any, onChange: any): any;
+    showErrors(errors: any, triggerEvent: any, onChange: any): any;
     /**
      * Called when the submission has completed, or if the submission needs to be sent to an external library.
      *
@@ -342,7 +341,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @param {Object} error - The error that occured.
      */
-    onSubmissionError(error: Object): any;
+    onSubmissionError(error: Object): false | undefined;
     /**
      * Trigger the change event for this form.
      *
@@ -350,7 +349,6 @@ declare class Webform extends NestedDataComponent {
      * @param flags
      */
     onChange(flags: any, changed: any, modified: any, changes: any): void;
-    checkData(data: any, flags?: {}): any;
     /**
      * Send a delete request to the server.
      */
@@ -388,7 +386,7 @@ declare class Webform extends NestedDataComponent {
      *
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before: boolean, options: any): Promise<any>;
+    submit(before: boolean, options?: {}): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerRecaptcha(): void;
     _nosubmit: any;