@formio/js 5.1.0-dev.6123.055aa35 → 5.1.0-dev.6126.7fb6eb6

package/lib/cjs/Embed.js

@@ -282,7 +282,7 @@ class Formio {
                     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) => {
@@ -350,6 +350,14 @@ class Formio {
                 }
             }
             yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));
+            // In some cases (dropdown list of autocomplete or confirmation popup of skethpad) we render elements outside of shadow dom
+            // and as result we can't get access to this styles outside of shadow dom. Here i added needed styles to work it properly
+            if (useShadowDom) {
+                yield _a.addStyles(document.body, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));
+                const toGlobalStyleLibs = ["bootstrap", "bootstrap4", "bootstrap-icons"];
+                const libHrefs = toGlobalStyleLibs.map(key => _a.config.libs[key]).filter(Boolean).map(href => href.css);
+                yield _a.addStyles(document.body, libHrefs, builder);
+            }
             if (_a.config.before) {
                 yield _a.config.before(_a.FormioClass, element, _a.config);
             }

package/lib/mjs/Embed.js

@@ -270,7 +270,7 @@ export class Formio {
                     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) => {
@@ -338,6 +338,14 @@ export class Formio {
             }
         }
         await Formio.addStyles(libWrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
+        // In some cases (dropdown list of autocomplete or confirmation popup of skethpad) we render elements outside of shadow dom
+        // and as result we can't get access to this styles outside of shadow dom. Here i added needed styles to work it properly
+        if (useShadowDom) {
+            await Formio.addStyles(document.body, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
+            const toGlobalStyleLibs = ["bootstrap", "bootstrap4", "bootstrap-icons"];
+            const libHrefs = toGlobalStyleLibs.map(key => Formio.config.libs[key]).filter(Boolean).map(href => href.css);
+            await Formio.addStyles(document.body, libHrefs, builder);
+        }
         if (Formio.config.before) {
             await Formio.config.before(Formio.FormioClass, element, Formio.config);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6123.055aa35",
+  "version": "5.1.0-dev.6126.7fb6eb6",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {