@formio/js 5.0.0-rc.57 → 5.0.0-rc.58

package/dist/formio.min.js.LICENSE.txt

@@ -10,7 +10,7 @@
  * MIT licensed
  */
 
-/*! formiojs v5.0.0-rc.57 | https://unpkg.com/formiojs@5.0.0-rc.57/LICENSE.txt */
+/*! formiojs v5.0.0-rc.58 | https://unpkg.com/formiojs@5.0.0-rc.58/LICENSE.txt */
 
 /**
  * @license

package/dist/formio.utils.min.js.LICENSE.txt

@@ -22,7 +22,7 @@
 
 /*! @license DOMPurify 3.1.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.4/LICENSE */
 
-/*! formiojs v5.0.0-rc.57 | https://unpkg.com/formiojs@5.0.0-rc.57/LICENSE.txt */
+/*! formiojs v5.0.0-rc.58 | https://unpkg.com/formiojs@5.0.0-rc.58/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/CDN.d.ts

@@ -10,6 +10,7 @@ declare class CDN {
         bootstrap: string;
         bootstrap4: string;
         bootstrap5: string;
+        bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
         flatpickr: string;

package/lib/cjs/CDN.js

@@ -11,9 +11,10 @@ class CDN {
         this.libs = {
             'js': '',
             'ace': '1.4.12',
-            'bootstrap': '5.3.2',
+            'bootstrap': '5.3.3',
             'bootstrap4': '4.6.2',
-            'bootstrap5': '5.3.2',
+            'bootstrap5': '5.3.3',
+            'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
             'flatpickr': '4.6.8',
@@ -61,7 +62,9 @@ class CDN {
         if (lib) {
             url += `/${lib}`;
         }
-        if (version && version !== 'latest') {
+        // Only attach the version if this is the hosted cdn.
+        if (cdnUrl.includes('form.io') &&
+            version && version !== 'latest') {
             url += `/${version}`;
         }
         return url;

package/lib/cjs/Embed.d.ts

@@ -26,7 +26,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 addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
+    static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
     static addLoader(wrapper: any): Promise<void>;
     static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;

package/lib/cjs/Embed.js

@@ -80,6 +80,9 @@ class Formio {
     }
     static createElement(type, attrs, children) {
         const element = document.createElement(type);
+        if (!attrs) {
+            return element;
+        }
         Object.keys(attrs).forEach(key => {
             element.setAttribute(key, attrs[key]);
         });
@@ -187,21 +190,22 @@ class Formio {
         }
         return script;
     }
-    static addLibrary(wrapper, lib, name) {
+    static addLibrary(libWrapper, lib, name) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!lib) {
                 return;
             }
             if (lib.dependencies) {
                 for (let i = 0; i < lib.dependencies.length; i++) {
-                    yield _a.addLibrary(wrapper, _a.cdn.libs[lib.dependencies[i]]);
+                    const libName = lib.dependencies[i];
+                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);
                 }
             }
             if (lib.css) {
-                yield _a.addStyles(wrapper, lib.css);
+                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);
             }
             if (lib.js) {
-                const module = yield _a.addScript(wrapper, lib.js, lib.use ? name : false);
+                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
                 if (lib.use) {
                     _a.debug(`Using ${name}`);
                     const options = lib.options || {};
@@ -211,6 +215,12 @@ class Formio {
                     _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
                 }
             }
+            if (lib.globalStyle) {
+                const style = _a.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = lib.globalStyle;
+                document.body.appendChild(style);
+            }
         });
     }
     static addLoader(wrapper) {
@@ -243,7 +253,16 @@ class Formio {
                     use: true
                 },
                 fontawesome: {
-                    css: `${_a.cdn['font-awesome']}/css/font-awesome.min.css`
+                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
+                    globalStyle: `@font-face {
+                    font-family: 'FontAwesome';
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+                    font-weight: normal;
+                    font-style: normal;
+                  }`
                 },
                 bootstrap4: {
                     dependencies: ['fontawesome'],
@@ -254,9 +273,24 @@ class Formio {
                     css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`
                 },
                 'bootstrap-icons': {
-                    css: `${_a.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
+                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
+                    globalStyle: `@font-face {
+                    font-display: block;
+                    font-family: "bootstrap-icons";
+                    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
+                         url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
+                }`
                 }
             };
+            // Add all bootswatch templates.
+            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
+                _a.config.libs[template] = {
+                    dependencies: ['bootstrap-icons'],
+                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
+                };
+            });
             const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;
             // Create a new wrapper and add the element inside of a new wrapper.
             let wrapper = _a.createElement('div', {
@@ -264,7 +298,7 @@ class Formio {
             });
             element.parentNode.insertBefore(wrapper, element);
             // If we include the libraries, then we will attempt to run this in shadow dom.
-            const useShadowDom = _a.config.includeLibs && (typeof wrapper.attachShadow === 'function');
+            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');
             if (useShadowDom) {
                 wrapper = wrapper.attachShadow({
                     mode: 'open'

package/lib/cjs/InlineEmbed.js

@@ -28,9 +28,10 @@ function embed(config = {}) {
         let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
         scriptSrc.pop();
         let cdnSrc = '';
-        if (scriptSrc[scriptSrc.length - 1] === 'js') {
+        if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
             scriptSrc.pop();
             scriptSrc = cdnSrc = scriptSrc.join('/');
+            scriptSrc += '/js';
         }
         else {
             scriptSrc = scriptSrc.join('/');
@@ -49,6 +50,7 @@ function embed(config = {}) {
             base: query.base || 'https://api.form.io',
             submit: query.submit,
             includeLibs: (query.libs === 'true' || query.libs === '1'),
+            noshadow: (query.shadow === 'false' || query.shadow === '0'),
             template: query.template || 'bootstrap',
             debug: debug,
             config: {},

package/lib/mjs/CDN.d.ts

@@ -10,6 +10,7 @@ declare class CDN {
         bootstrap: string;
         bootstrap4: string;
         bootstrap5: string;
+        bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
         flatpickr: string;

package/lib/mjs/CDN.js

@@ -10,9 +10,10 @@ class CDN {
         this.libs = {
             'js': '',
             'ace': '1.4.12',
-            'bootstrap': '5.3.2',
+            'bootstrap': '5.3.3',
             'bootstrap4': '4.6.2',
-            'bootstrap5': '5.3.2',
+            'bootstrap5': '5.3.3',
+            'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
             'flatpickr': '4.6.8',
@@ -60,7 +61,9 @@ class CDN {
         if (lib) {
             url += `/${lib}`;
         }
-        if (version && version !== 'latest') {
+        // Only attach the version if this is the hosted cdn.
+        if (cdnUrl.includes('form.io') &&
+            version && version !== 'latest') {
             url += `/${version}`;
         }
         return url;

package/lib/mjs/Embed.d.ts

@@ -26,7 +26,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 addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
+    static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
     static addLoader(wrapper: any): Promise<void>;
     static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;

package/lib/mjs/Embed.js

@@ -79,6 +79,9 @@ export class Formio {
     }
     static createElement(type, attrs, children) {
         const element = document.createElement(type);
+        if (!attrs) {
+            return element;
+        }
         Object.keys(attrs).forEach(key => {
             element.setAttribute(key, attrs[key]);
         });
@@ -180,20 +183,21 @@ export class Formio {
         }
         return script;
     }
-    static async addLibrary(wrapper, lib, name) {
+    static async addLibrary(libWrapper, lib, name) {
         if (!lib) {
             return;
         }
         if (lib.dependencies) {
             for (let i = 0; i < lib.dependencies.length; i++) {
-                await Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);
+                const libName = lib.dependencies[i];
+                await Formio.addLibrary(libWrapper, Formio.config.libs[libName], libName);
             }
         }
         if (lib.css) {
-            await Formio.addStyles(wrapper, lib.css);
+            await Formio.addStyles((lib.global ? document.body : libWrapper), lib.css);
         }
         if (lib.js) {
-            const module = await Formio.addScript(wrapper, lib.js, lib.use ? name : false);
+            const module = await Formio.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
             if (lib.use) {
                 Formio.debug(`Using ${name}`);
                 const options = lib.options || {};
@@ -203,6 +207,12 @@ export class Formio {
                 Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
             }
         }
+        if (lib.globalStyle) {
+            const style = Formio.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = lib.globalStyle;
+            document.body.appendChild(style);
+        }
     }
     static async addLoader(wrapper) {
         wrapper.appendChild(Formio.createElement('div', {
@@ -231,7 +241,16 @@ export class Formio {
                 use: true
             },
             fontawesome: {
-                css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`
+                // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
+                globalStyle: `@font-face {
+                    font-family: 'FontAwesome';
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+                    font-weight: normal;
+                    font-style: normal;
+                  }`
             },
             bootstrap4: {
                 dependencies: ['fontawesome'],
@@ -242,9 +261,24 @@ export class Formio {
                 css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
             },
             'bootstrap-icons': {
-                css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
+                // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
+                globalStyle: `@font-face {
+                    font-display: block;
+                    font-family: "bootstrap-icons";
+                    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
+                         url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
+                }`
             }
         };
+        // Add all bootswatch templates.
+        ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
+            Formio.config.libs[template] = {
+                dependencies: ['bootstrap-icons'],
+                css: `${Formio.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
+            };
+        });
         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.
         let wrapper = Formio.createElement('div', {
@@ -252,7 +286,7 @@ export class Formio {
         });
         element.parentNode.insertBefore(wrapper, element);
         // If we include the libraries, then we will attempt to run this in shadow dom.
-        const useShadowDom = Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function');
+        const useShadowDom = Formio.config.includeLibs && !Formio.config.noshadow && (typeof wrapper.attachShadow === 'function');
         if (useShadowDom) {
             wrapper = wrapper.attachShadow({
                 mode: 'open'

package/lib/mjs/InlineEmbed.js

@@ -24,9 +24,10 @@ export function embed(config = {}) {
         let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
         scriptSrc.pop();
         let cdnSrc = '';
-        if (scriptSrc[scriptSrc.length - 1] === 'js') {
+        if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
             scriptSrc.pop();
             scriptSrc = cdnSrc = scriptSrc.join('/');
+            scriptSrc += '/js';
         }
         else {
             scriptSrc = scriptSrc.join('/');
@@ -45,6 +46,7 @@ export function embed(config = {}) {
             base: query.base || 'https://api.form.io',
             submit: query.submit,
             includeLibs: (query.libs === 'true' || query.libs === '1'),
+            noshadow: (query.shadow === 'false' || query.shadow === '0'),
             template: query.template || 'bootstrap',
             debug: debug,
             config: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.57",
+  "version": "5.0.0-rc.58",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {