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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/formio.embed.js +1 -1
  2. package/dist/formio.embed.min.js +1 -1
  3. package/dist/formio.embed.min.js.LICENSE.txt +1 -1
  4. package/dist/formio.form.js +3 -3
  5. package/dist/formio.form.min.js +1 -1
  6. package/dist/formio.form.min.js.LICENSE.txt +1 -1
  7. package/dist/formio.full.js +3 -3
  8. package/dist/formio.full.min.js +1 -1
  9. package/dist/formio.full.min.js.LICENSE.txt +1 -1
  10. package/dist/formio.js +3 -3
  11. package/dist/formio.min.js +1 -1
  12. package/dist/formio.min.js.LICENSE.txt +1 -1
  13. package/dist/formio.utils.min.js.LICENSE.txt +1 -1
  14. package/lib/cjs/CDN.d.ts +1 -0
  15. package/lib/cjs/CDN.js +6 -3
  16. package/lib/cjs/Embed.d.ts +1 -1
  17. package/lib/cjs/Embed.js +41 -7
  18. package/lib/cjs/InlineEmbed.js +3 -1
  19. package/lib/mjs/CDN.d.ts +1 -0
  20. package/lib/mjs/CDN.js +6 -3
  21. package/lib/mjs/Embed.d.ts +1 -1
  22. package/lib/mjs/Embed.js +41 -7
  23. package/lib/mjs/InlineEmbed.js +3 -1
  24. package/package.json +1 -1
package/dist/formio.min.js.LICENSE.txt CHANGED
@@ -10,7 +10,7 @@
10
10
  * MIT licensed
11
11
  */
12
12
 
13
- /*! formiojs v5.0.0-rc.57 | https://unpkg.com/formiojs@5.0.0-rc.57/LICENSE.txt */
13
+ /*! formiojs v5.0.0-rc.58 | https://unpkg.com/formiojs@5.0.0-rc.58/LICENSE.txt */
14
14
 
15
15
  /**
16
16
  * @license
package/dist/formio.utils.min.js.LICENSE.txt CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  /*! @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 */
24
24
 
25
- /*! formiojs v5.0.0-rc.57 | https://unpkg.com/formiojs@5.0.0-rc.57/LICENSE.txt */
25
+ /*! formiojs v5.0.0-rc.58 | https://unpkg.com/formiojs@5.0.0-rc.58/LICENSE.txt */
26
26
 
27
27
  /**
28
28
  * @license
package/lib/cjs/CDN.d.ts CHANGED
@@ -10,6 +10,7 @@ declare class CDN {
10
10
  bootstrap: string;
11
11
  bootstrap4: string;
12
12
  bootstrap5: string;
13
+ bootswatch: string;
13
14
  'bootstrap-icons': string;
14
15
  ckeditor: string;
15
16
  flatpickr: string;
package/lib/cjs/CDN.js CHANGED
@@ -11,9 +11,10 @@ class CDN {
11
11
  this.libs = {
12
12
  'js': '',
13
13
  'ace': '1.4.12',
14
- 'bootstrap': '5.3.2',
14
+ 'bootstrap': '5.3.3',
15
15
  'bootstrap4': '4.6.2',
16
- 'bootstrap5': '5.3.2',
16
+ 'bootstrap5': '5.3.3',
17
+ 'bootswatch': '5.3.3',
17
18
  'bootstrap-icons': '1.11.1',
18
19
  'ckeditor': '19.0.0',
19
20
  'flatpickr': '4.6.8',
@@ -61,7 +62,9 @@ class CDN {
61
62
  if (lib) {
62
63
  url += `/${lib}`;
63
64
  }
64
- if (version && version !== 'latest') {
65
+ // Only attach the version if this is the hosted cdn.
66
+ if (cdnUrl.includes('form.io') &&
67
+ version && version !== 'latest') {
65
68
  url += `/${version}`;
66
69
  }
67
70
  return url;
package/lib/cjs/Embed.d.ts CHANGED
@@ -26,7 +26,7 @@ export class Formio {
26
26
  static addStyles(wrapper: any, href: any): Promise<void>;
27
27
  static submitDone(instance: any, submission: any): Promise<void>;
28
28
  static formioScript(script: any, builder: any): any;
29
- static addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
29
+ static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
30
30
  static addLoader(wrapper: any): Promise<void>;
31
31
  static init(element: any, options?: {}, builder?: boolean): Promise<any>;
32
32
  static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;
package/lib/cjs/Embed.js CHANGED
@@ -80,6 +80,9 @@ class Formio {
80
80
  }
81
81
  static createElement(type, attrs, children) {
82
82
  const element = document.createElement(type);
83
+ if (!attrs) {
84
+ return element;
85
+ }
83
86
  Object.keys(attrs).forEach(key => {
84
87
  element.setAttribute(key, attrs[key]);
85
88
  });
@@ -187,21 +190,22 @@ class Formio {
187
190
  }
188
191
  return script;
189
192
  }
190
- static addLibrary(wrapper, lib, name) {
193
+ static addLibrary(libWrapper, lib, name) {
191
194
  return __awaiter(this, void 0, void 0, function* () {
192
195
  if (!lib) {
193
196
  return;
194
197
  }
195
198
  if (lib.dependencies) {
196
199
  for (let i = 0; i < lib.dependencies.length; i++) {
197
- yield _a.addLibrary(wrapper, _a.cdn.libs[lib.dependencies[i]]);
200
+ const libName = lib.dependencies[i];
201
+ yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);
198
202
  }
199
203
  }
200
204
  if (lib.css) {
201
- yield _a.addStyles(wrapper, lib.css);
205
+ yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);
202
206
  }
203
207
  if (lib.js) {
204
- const module = yield _a.addScript(wrapper, lib.js, lib.use ? name : false);
208
+ const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
205
209
  if (lib.use) {
206
210
  _a.debug(`Using ${name}`);
207
211
  const options = lib.options || {};
@@ -211,6 +215,12 @@ class Formio {
211
215
  _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
212
216
  }
213
217
  }
218
+ if (lib.globalStyle) {
219
+ const style = _a.createElement('style');
220
+ style.type = 'text/css';
221
+ style.innerHTML = lib.globalStyle;
222
+ document.body.appendChild(style);
223
+ }
214
224
  });
215
225
  }
216
226
  static addLoader(wrapper) {
@@ -243,7 +253,16 @@ class Formio {
243
253
  use: true
244
254
  },
245
255
  fontawesome: {
246
- css: `${_a.cdn['font-awesome']}/css/font-awesome.min.css`
256
+ // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
257
+ // 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.
258
+ css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
259
+ globalStyle: `@font-face {
260
+ font-family: 'FontAwesome';
261
+ src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
262
+ 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');
263
+ font-weight: normal;
264
+ font-style: normal;
265
+ }`
247
266
  },
248
267
  bootstrap4: {
249
268
  dependencies: ['fontawesome'],
@@ -254,9 +273,24 @@ class Formio {
254
273
  css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`
255
274
  },
256
275
  'bootstrap-icons': {
257
- css: `${_a.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
276
+ // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
277
+ // 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.
278
+ css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
279
+ globalStyle: `@font-face {
280
+ font-display: block;
281
+ font-family: "bootstrap-icons";
282
+ src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
283
+ url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
284
+ }`
258
285
  }
259
286
  };
287
+ // Add all bootswatch templates.
288
+ ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
289
+ _a.config.libs[template] = {
290
+ dependencies: ['bootstrap-icons'],
291
+ css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
292
+ };
293
+ });
260
294
  const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;
261
295
  // Create a new wrapper and add the element inside of a new wrapper.
262
296
  let wrapper = _a.createElement('div', {
@@ -264,7 +298,7 @@ class Formio {
264
298
  });
265
299
  element.parentNode.insertBefore(wrapper, element);
266
300
  // If we include the libraries, then we will attempt to run this in shadow dom.
267
- const useShadowDom = _a.config.includeLibs && (typeof wrapper.attachShadow === 'function');
301
+ const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');
268
302
  if (useShadowDom) {
269
303
  wrapper = wrapper.attachShadow({
270
304
  mode: 'open'
package/lib/cjs/InlineEmbed.js CHANGED
@@ -28,9 +28,10 @@ function embed(config = {}) {
28
28
  let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
29
29
  scriptSrc.pop();
30
30
  let cdnSrc = '';
31
- if (scriptSrc[scriptSrc.length - 1] === 'js') {
31
+ if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
32
32
  scriptSrc.pop();
33
33
  scriptSrc = cdnSrc = scriptSrc.join('/');
34
+ scriptSrc += '/js';
34
35
  }
35
36
  else {
36
37
  scriptSrc = scriptSrc.join('/');
@@ -49,6 +50,7 @@ function embed(config = {}) {
49
50
  base: query.base || 'https://api.form.io',
50
51
  submit: query.submit,
51
52
  includeLibs: (query.libs === 'true' || query.libs === '1'),
53
+ noshadow: (query.shadow === 'false' || query.shadow === '0'),
52
54
  template: query.template || 'bootstrap',
53
55
  debug: debug,
54
56
  config: {},
package/lib/mjs/CDN.d.ts CHANGED
@@ -10,6 +10,7 @@ declare class CDN {
10
10
  bootstrap: string;
11
11
  bootstrap4: string;
12
12
  bootstrap5: string;
13
+ bootswatch: string;
13
14
  'bootstrap-icons': string;
14
15
  ckeditor: string;
15
16
  flatpickr: string;
package/lib/mjs/CDN.js CHANGED
@@ -10,9 +10,10 @@ class CDN {
10
10
  this.libs = {
11
11
  'js': '',
12
12
  'ace': '1.4.12',
13
- 'bootstrap': '5.3.2',
13
+ 'bootstrap': '5.3.3',
14
14
  'bootstrap4': '4.6.2',
15
- 'bootstrap5': '5.3.2',
15
+ 'bootstrap5': '5.3.3',
16
+ 'bootswatch': '5.3.3',
16
17
  'bootstrap-icons': '1.11.1',
17
18
  'ckeditor': '19.0.0',
18
19
  'flatpickr': '4.6.8',
@@ -60,7 +61,9 @@ class CDN {
60
61
  if (lib) {
61
62
  url += `/${lib}`;
62
63
  }
63
- if (version && version !== 'latest') {
64
+ // Only attach the version if this is the hosted cdn.
65
+ if (cdnUrl.includes('form.io') &&
66
+ version && version !== 'latest') {
64
67
  url += `/${version}`;
65
68
  }
66
69
  return url;
package/lib/mjs/Embed.d.ts CHANGED
@@ -26,7 +26,7 @@ export class Formio {
26
26
  static addStyles(wrapper: any, href: any): Promise<void>;
27
27
  static submitDone(instance: any, submission: any): Promise<void>;
28
28
  static formioScript(script: any, builder: any): any;
29
- static addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
29
+ static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
30
30
  static addLoader(wrapper: any): Promise<void>;
31
31
  static init(element: any, options?: {}, builder?: boolean): Promise<any>;
32
32
  static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;
package/lib/mjs/Embed.js CHANGED
@@ -79,6 +79,9 @@ export class Formio {
79
79
  }
80
80
  static createElement(type, attrs, children) {
81
81
  const element = document.createElement(type);
82
+ if (!attrs) {
83
+ return element;
84
+ }
82
85
  Object.keys(attrs).forEach(key => {
83
86
  element.setAttribute(key, attrs[key]);
84
87
  });
@@ -180,20 +183,21 @@ export class Formio {
180
183
  }
181
184
  return script;
182
185
  }
183
- static async addLibrary(wrapper, lib, name) {
186
+ static async addLibrary(libWrapper, lib, name) {
184
187
  if (!lib) {
185
188
  return;
186
189
  }
187
190
  if (lib.dependencies) {
188
191
  for (let i = 0; i < lib.dependencies.length; i++) {
189
- await Formio.addLibrary(wrapper, Formio.cdn.libs[lib.dependencies[i]]);
192
+ const libName = lib.dependencies[i];
193
+ await Formio.addLibrary(libWrapper, Formio.config.libs[libName], libName);
190
194
  }
191
195
  }
192
196
  if (lib.css) {
193
- await Formio.addStyles(wrapper, lib.css);
197
+ await Formio.addStyles((lib.global ? document.body : libWrapper), lib.css);
194
198
  }
195
199
  if (lib.js) {
196
- const module = await Formio.addScript(wrapper, lib.js, lib.use ? name : false);
200
+ const module = await Formio.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
197
201
  if (lib.use) {
198
202
  Formio.debug(`Using ${name}`);
199
203
  const options = lib.options || {};
@@ -203,6 +207,12 @@ export class Formio {
203
207
  Formio.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
204
208
  }
205
209
  }
210
+ if (lib.globalStyle) {
211
+ const style = Formio.createElement('style');
212
+ style.type = 'text/css';
213
+ style.innerHTML = lib.globalStyle;
214
+ document.body.appendChild(style);
215
+ }
206
216
  }
207
217
  static async addLoader(wrapper) {
208
218
  wrapper.appendChild(Formio.createElement('div', {
@@ -231,7 +241,16 @@ export class Formio {
231
241
  use: true
232
242
  },
233
243
  fontawesome: {
234
- css: `${Formio.cdn['font-awesome']}/css/font-awesome.min.css`
244
+ // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
245
+ // 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.
246
+ css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
247
+ globalStyle: `@font-face {
248
+ font-family: 'FontAwesome';
249
+ src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
250
+ 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');
251
+ font-weight: normal;
252
+ font-style: normal;
253
+ }`
235
254
  },
236
255
  bootstrap4: {
237
256
  dependencies: ['fontawesome'],
@@ -242,9 +261,24 @@ export class Formio {
242
261
  css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`
243
262
  },
244
263
  'bootstrap-icons': {
245
- css: `${Formio.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
264
+ // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
265
+ // 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.
266
+ css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
267
+ globalStyle: `@font-face {
268
+ font-display: block;
269
+ font-family: "bootstrap-icons";
270
+ src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
271
+ url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
272
+ }`
246
273
  }
247
274
  };
275
+ // Add all bootswatch templates.
276
+ ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
277
+ Formio.config.libs[template] = {
278
+ dependencies: ['bootstrap-icons'],
279
+ css: `${Formio.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
280
+ };
281
+ });
248
282
  const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
249
283
  // Create a new wrapper and add the element inside of a new wrapper.
250
284
  let wrapper = Formio.createElement('div', {
@@ -252,7 +286,7 @@ export class Formio {
252
286
  });
253
287
  element.parentNode.insertBefore(wrapper, element);
254
288
  // If we include the libraries, then we will attempt to run this in shadow dom.
255
- const useShadowDom = Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function');
289
+ const useShadowDom = Formio.config.includeLibs && !Formio.config.noshadow && (typeof wrapper.attachShadow === 'function');
256
290
  if (useShadowDom) {
257
291
  wrapper = wrapper.attachShadow({
258
292
  mode: 'open'
package/lib/mjs/InlineEmbed.js CHANGED
@@ -24,9 +24,10 @@ export function embed(config = {}) {
24
24
  let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
25
25
  scriptSrc.pop();
26
26
  let cdnSrc = '';
27
- if (scriptSrc[scriptSrc.length - 1] === 'js') {
27
+ if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
28
28
  scriptSrc.pop();
29
29
  scriptSrc = cdnSrc = scriptSrc.join('/');
30
+ scriptSrc += '/js';
30
31
  }
31
32
  else {
32
33
  scriptSrc = scriptSrc.join('/');
@@ -45,6 +46,7 @@ export function embed(config = {}) {
45
46
  base: query.base || 'https://api.form.io',
46
47
  submit: query.submit,
47
48
  includeLibs: (query.libs === 'true' || query.libs === '1'),
49
+ noshadow: (query.shadow === 'false' || query.shadow === '0'),
48
50
  template: query.template || 'bootstrap',
49
51
  debug: debug,
50
52
  config: {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formio/js",
3
- "version": "5.0.0-rc.57",
3
+ "version": "5.0.0-rc.58",
4
4
  "description": "JavaScript powered Forms with JSON Form Builder",
5
5
  "main": "lib/cjs/index.js",
6
6
  "exports": {