@formio/js 5.6.1 → 5.7.0-api912.2

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

@@ -20,7 +20,9 @@
 
 /*! @license DOMPurify 3.4.13 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.13/LICENSE */
 
-/*! formiojs v5.6.1 | https://unpkg.com/formiojs@5.6.1/LICENSE.txt */
+/*! @license DOMPurify 3.4.14 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.14/LICENSE */
+
+/*! formiojs v5.7.0-api912.2 | https://unpkg.com/formiojs@5.7.0-api912.2/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Embed.js

@@ -273,7 +273,6 @@ class Formio {
         });
     }
     static init(element, options = {}, builder = false) {
-        var _b;
         return __awaiter(this, void 0, void 0, function* () {
             _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});
             _a.config.libs = _a.config.libs || {
@@ -345,7 +344,10 @@ class Formio {
                 };
             });
             const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;
-            const hasQuillComponent = (components = []) => {
+            // Quill and CKEditor cannot run in the shadow DOM (https://github.com/quilljs/quill/issues/2021,
+            // https://github.com/ckeditor/ckeditor5/issues/15824), so fall back to the light DOM when the
+            // form contains one of them.
+            const hasShadowIncompatibleEditor = (components) => {
                 if (!Array.isArray(components)) {
                     return false;
                 }
@@ -354,16 +356,39 @@ class Formio {
                     if (!component || typeof component !== 'object') {
                         return false;
                     }
-                    const isQuillTextarea = component.type === 'textarea' &&
-                        component.wysiwyg === true &&
-                        component.editor === 'quill';
-                    return (isQuillTextarea ||
-                        hasQuillComponent(component.components) ||
-                        hasQuillComponent((_b = component.columns) === null || _b === void 0 ? void 0 : _b.flatMap((column) => column.components || [])) ||
-                        hasQuillComponent((_c = component.rows) === null || _c === void 0 ? void 0 : _c.flatMap((row) => row.flatMap((cell) => cell.components || []))));
+                    if (component.type === 'textarea') {
+                        // A textarea with `wysiwyg` set and no explicit `editor` defaults to CKEditor at render time.
+                        const editor = component.editor || (component.wysiwyg ? 'ckeditor' : '');
+                        if (['quill', 'ckeditor'].includes(editor)) {
+                            return true;
+                        }
+                    }
+                    const children = (component.components || []).concat(((_b = component.columns) === null || _b === void 0 ? void 0 : _b.flatMap((column) => column.components || [])) || [], ((_c = component.rows) === null || _c === void 0 ? void 0 : _c.flatMap((row) => row.flatMap((cell) => cell.components || []))) || []);
+                    return hasShadowIncompatibleEditor(children);
                 });
             };
-            const disableShadowForQuill = hasQuillComponent((_b = _a.config.form) === null || _b === void 0 ? void 0 : _b.components);
+            const shouldSkipShadowDom = () => __awaiter(this, void 0, void 0, function* () {
+                var _b;
+                if ((_b = _a.config.form) === null || _b === void 0 ? void 0 : _b.components) {
+                    return hasShadowIncompatibleEditor(_a.config.form.components);
+                }
+                const formUrl = _a.config.src || (typeof _a.config.form === 'string' ? _a.config.form : '');
+                if (!formUrl) {
+                    return false;
+                }
+                try {
+                    const response = yield fetch(formUrl);
+                    if (!response.ok) {
+                        throw new Error(`Request failed with status ${response.status}`);
+                    }
+                    const form = yield response.json();
+                    return hasShadowIncompatibleEditor(form === null || form === void 0 ? void 0 : form.components);
+                }
+                catch (err) {
+                    _a.debug('Could not load the form to check for shadow DOM support', err);
+                    return false;
+                }
+            });
             // Create a new wrapper and add the element inside of a new wrapper.
             let wrapper = _a.createElement('div', {
                 id: `${id}-wrapper`,
@@ -372,20 +397,8 @@ class Formio {
             // If we include the libraries, then we will attempt to run this in shadow dom.
             const useShadowDom = _a.config.includeLibs &&
                 !_a.config.noshadow &&
-                !disableShadowForQuill &&
-                typeof wrapper.attachShadow === 'function';
-            if (useShadowDom) {
-                wrapper = wrapper.attachShadow({
-                    mode: 'open',
-                });
-                options.shadowRoot = wrapper;
-                // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
-                const quill = {
-                    js: `${_a.cdn.quill}/quill.js`,
-                    css: `${_a.cdn.quill}/quill.snow.css`,
-                };
-                yield _a.addLibrary(wrapper, quill, 'quill');
-            }
+                typeof wrapper.attachShadow === 'function' &&
+                !(yield shouldSkipShadowDom());
             element.parentNode.removeChild(element);
             wrapper.appendChild(element);
             // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.
@@ -500,7 +513,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.6.1';
+Formio.version = '5.7.0-api912.2';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Form.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -198,12 +198,18 @@ export type FormOptions = {
      */
     noAlerts?: boolean | undefined;
     /**
-     * - The translation file for this rendering.
+     * - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
      */
     i18n?: {
         [key: string]: string;
     } | {
         translationsUrl: string;
+    } | {
+        resource: {
+            form: string;
+            codeComponent: string;
+            mapComponent: string;
+        };
     } | undefined;
     /**
      * - Custom logic for creation of elements.

package/lib/cjs/Form.js

@@ -56,7 +56,7 @@ const utils_1 = __importDefault(require("./utils"));
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.6.1';
+sdk_1.Formio.version = '5.7.0-api912.2';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/PDF.d.ts

@@ -2,6 +2,7 @@ export default class PDF extends Webform {
     constructor(element: any, options: any);
     components: any[];
     init(): void;
+    forwardRefreshEventsToIframe(): void;
     render(): any;
     submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;

package/lib/cjs/PDF.js

@@ -19,10 +19,7 @@ const isTrustedIframeMessage = (event, form) => {
     var _a;
     const iframeWindow = (_a = form === null || form === void 0 ? void 0 : form.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow;
     const iframeOrigin = (form === null || form === void 0 ? void 0 : form.iframeElement) && getIframeOrigin(form.iframeElement);
-    return Boolean(iframeWindow &&
-        iframeOrigin &&
-        event.source === iframeWindow &&
-        event.origin === iframeOrigin);
+    return Boolean(iframeWindow && iframeOrigin && event.source === iframeWindow && event.origin === iframeOrigin);
 };
 class PDF extends Webform_1.default {
     constructor(element, options) {
@@ -31,7 +28,9 @@ class PDF extends Webform_1.default {
         this.components = [];
     }
     init() {
+        this.options.pdfShell = true;
         super.init();
+        this.forwardRefreshEventsToIframe();
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
@@ -62,6 +61,17 @@ class PDF extends Webform_1.default {
         // Re-emit pageEnd without the iframe- prefix for consumers tracking PDF scroll position.
         this.on('iframe-pageEnd', (data) => this.emit('pageEnd', data), true);
     }
+    // The iframe renders the components in its own realm with its own emitter, so an event they
+    // refresh on only reaches them across the bridge.
+    forwardRefreshEventsToIframe() {
+        const refreshEvents = new Set();
+        (0, utils_1.eachComponent)(this.component.components, (component) => {
+            if (component.refreshOnEvent) {
+                refreshEvents.add(component.refreshOnEvent);
+            }
+        });
+        refreshEvents.forEach((event) => this.on(event, () => this.postMessage({ name: 'emit', data: event }), true));
+    }
     render() {
         this.submitButton = this.addComponent({
             disabled: this.form.disableWizardSubmit,
@@ -318,7 +328,13 @@ if (typeof window !== 'undefined') {
             if (eventData.compPath) {
                 const comp = form.getComponent(eventData.compPath);
                 if (comp) {
-                    comp.emit(eventData.name, eventData.data);
+                    // Emit component instance for focus/blur events to match payload of those events on other forms
+                    if (['focus', 'blur'].includes(eventData.name)) {
+                        comp.emit(eventData.name, comp);
+                    }
+                    else {
+                        comp.emit(eventData.name, eventData.data);
+                    }
                 }
             }
             else {

package/lib/cjs/PDFBuilder.d.ts

@@ -19,6 +19,7 @@ export default class PDFBuilder extends WebformBuilder {
                 file: boolean;
                 htmlelement: boolean;
                 signrequestsignature: boolean;
+                datasource: boolean;
             };
         };
         basic: boolean;

package/lib/cjs/PDFBuilder.js

@@ -51,6 +51,7 @@ class PDFBuilder extends WebformBuilder_1.default {
                     file: true,
                     htmlelement: true,
                     signrequestsignature: true,
+                    datasource: true,
                 },
             },
             basic: false,

package/lib/cjs/Webform.d.ts

@@ -293,8 +293,20 @@ declare class Webform extends NestedDataComponent {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key: string): void;
+    focusOnComponent(key: string, componentKey?: string | undefined): void;
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key: string, componentKey?: string | undefined): any;
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */

package/lib/cjs/Webform.js

@@ -981,16 +981,19 @@ class Webform extends NestedDataComponent_1.default {
         }
         this.loadRefs(this.alert, { errorRef: 'multiple' });
         if (this.refs.errorRef && this.refs.errorRef.length) {
-            this.refs.errorRef.forEach((el) => {
-                this.addEventListener(el, 'click', (e) => {
-                    const key = e.currentTarget.dataset.componentKey;
-                    this.focusOnComponent(key);
-                });
+            this.refs.errorRef.forEach((el, index) => {
+                var _a;
+                // The Nth link renders the Nth error; a custom template that reorders or filters the list
+                // fails this check, and the link then resolves by its key alone.
+                const listItem = (_a = options === null || options === void 0 ? void 0 : options.errors) === null || _a === void 0 ? void 0 : _a[index];
+                const isLinkForListItem = !!listItem && listItem.keyOrPath === el.dataset.componentKey;
+                const componentKey = isLinkForListItem ? listItem.componentKey : undefined;
+                const focusOnLinkedComponent = (e) => this.focusOnComponent(e.currentTarget.dataset.componentKey, componentKey);
+                this.addEventListener(el, 'click', focusOnLinkedComponent);
                 this.addEventListener(el, 'keydown', (e) => {
                     if (e.keyCode === 13) {
                         e.preventDefault();
-                        const key = e.currentTarget.dataset.componentKey;
-                        this.focusOnComponent(key);
+                        focusOnLinkedComponent(e);
                     }
                 });
             });
@@ -1000,16 +1003,36 @@ class Webform extends NestedDataComponent_1.default {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key) {
+    focusOnComponent(key, componentKey) {
         if (key) {
-            const component = this.getComponent(key);
+            const component = this.getErrorComponent(key, componentKey);
             if (component) {
                 component.focus();
                 component.scrollIntoView();
             }
         }
     }
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key, componentKey) {
+        const component = this.getComponent(key);
+        if (!componentKey || (component === null || component === void 0 ? void 0 : component.component.key) === componentKey) {
+            return component;
+        }
+        // GOTCHA(G-FJS06)
+        const componentWithKey = (0, utils_1.resolveInstanceAtPath)(this.componentsMap, key, componentKey);
+        return (componentWithKey === null || componentWithKey === void 0 ? void 0 : componentWithKey.component.key) === componentKey ? componentWithKey : component;
+    }
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */
@@ -1045,29 +1068,29 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         // Mark any components as invalid if in a custom message.
-        const componentErrors = {};
+        const errorsByComponent = new Map();
         errors.forEach((err) => {
-            var _a, _b;
+            var _a, _b, _c;
             const path = (0, utils_1.getStringFromComponentPath)(err.path) || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);
-            if (!componentErrors[path]) {
-                componentErrors[path] = [];
+            const component = path && this.getErrorComponent(path, (_c = err.component) === null || _c === void 0 ? void 0 : _c.key);
+            if (!component) {
+                return;
+            }
+            if (!errorsByComponent.has(component)) {
+                errorsByComponent.set(component, []);
             }
-            componentErrors[path].push(err);
+            errorsByComponent.get(component).push(err);
         });
         // Iterate through all of our component errors and apply them to the components.
-        for (let path in componentErrors) {
-            const component = this.getComponent(path);
-            const errors = componentErrors[path];
-            if (component) {
-                component.serverErrors = errors.filter((err) => err.fromServer);
-                component.setCustomValidity(errors, true);
-            }
-        }
+        errorsByComponent.forEach((componentErrors, component) => {
+            component.serverErrors = componentErrors.filter((err) => err.fromServer);
+            component.setCustomValidity(componentErrors, true);
+        });
         const displayedErrors = [];
         if (errors.length) {
             errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
             const createListItem = (message, index) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 const err = errors[index];
                 const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];
                 const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||
@@ -1083,6 +1106,7 @@ class Webform extends NestedDataComponent_1.default {
                 return {
                     message: (0, utils_1.unescapeHTML)(message),
                     keyOrPath: formattedKeyOrPath,
+                    componentKey: (_d = err.component) === null || _d === void 0 ? void 0 : _d.key,
                 };
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
@@ -1096,7 +1120,7 @@ class Webform extends NestedDataComponent_1.default {
         // GOTCHA(G-FJS02)
         // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
         if (this === this.root || !((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
-            (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', errorsList);
+            (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', errorsList, { errors: displayedErrors });
         }
         if (triggerEvent) {
             this.emit('error', errors);
@@ -1517,7 +1541,7 @@ class Webform extends NestedDataComponent_1.default {
         }
     }
     loadTranslations() {
-        var _a;
+        var _a, _b, _c;
         // We only need a resolve since if translations cannot load, we still want to proceed and render the for
         let translationsLoadResolve;
         const promise = new Promise((resolve) => {
@@ -1526,9 +1550,16 @@ class Webform extends NestedDataComponent_1.default {
         const translationsUrl = typeof ((_a = this.options.i18n) === null || _a === void 0 ? void 0 : _a.translationsUrl) === 'string'
             ? this.options.i18n.translationsUrl
             : null;
+        // Translations can also live in a Form.io resource, one submission per language.
+        const languageResource = (_b = this.options.i18n) === null || _b === void 0 ? void 0 : _b.resource;
+        const usesLanguageResource = Boolean(languageResource === null || languageResource === void 0 ? void 0 : languageResource.form);
         if (translationsUrl) {
             const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
-            Formio_1.Formio.makeStaticRequest(url, 'GET')
+            // Simple CORS GET: skip Content-Type / token so static hosts need no preflight.
+            Formio_1.Formio.makeStaticRequest(url, 'GET', null, {
+                headers: { Accept: 'application/json' },
+                noToken: true,
+            })
                 .then((response) => {
                 let languages = response;
                 try {
@@ -1555,6 +1586,28 @@ class Webform extends NestedDataComponent_1.default {
                 translationsLoadResolve();
             });
         }
+        else if (usesLanguageResource) {
+            const { form: resourceId, codeComponent, mapComponent } = languageResource;
+            const language = ((_c = this.i18next) === null || _c === void 0 ? void 0 : _c.originalLanguage) || this.options.language;
+            const languageQuery = `data.${codeComponent}=${encodeURIComponent(language)}`;
+            // The resource is addressed by id, so it needs the /form/ route — the bare
+            // `{project}/{alias}` route resolves by path only and would 404 on an id.
+            const url = `${Formio_1.Formio.getProjectUrl()}/form/${resourceId}/submission?${languageQuery}&limit=1`;
+            Formio_1.Formio.makeStaticRequest(url, 'GET')
+                .then((submissions) => {
+                var _a, _b;
+                const translations = (_b = (_a = submissions === null || submissions === void 0 ? void 0 : submissions[0]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[mapComponent];
+                // No submission for this language just leaves the form in its default language.
+                if (translations) {
+                    this.addLanguage(language, translations, true);
+                }
+                translationsLoadResolve();
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
         else {
             translationsLoadResolve();
         }

package/lib/cjs/Wizard.d.ts

@@ -112,7 +112,7 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    focusOnComponent(key: any): void | Promise<void>;
+    focusOnComponent(key: any, componentKey: any): void | Promise<void>;
     triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {

package/lib/cjs/Wizard.js

@@ -129,9 +129,15 @@ class Wizard extends Webform_1.default {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit', args: [false, {
+            {
+                name: 'submit',
+                method: 'submit',
+                args: [
+                    false,
+                    {
                         state: 'submitted',
-                    }],
+                    },
+                ],
             },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
@@ -1022,8 +1028,8 @@ class Wizard extends Webform_1.default {
     get errors() {
         return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
-    focusOnComponent(key) {
-        const component = this.getComponent(key);
+    focusOnComponent(key, componentKey) {
+        const component = this.getErrorComponent(key, componentKey);
         if (component) {
             let topPanel = component.parent;
             while (!(topPanel.parent instanceof Wizard)) {
@@ -1033,11 +1039,11 @@ class Wizard extends Webform_1.default {
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {
-                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));
+                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key, componentKey));
                 }
             }
         }
-        return super.focusOnComponent(key);
+        return super.focusOnComponent(key, componentKey);
     }
     triggerButtonCaptcha(page) {
         if (!page.components) {

package/lib/cjs/components/_classes/component/Component.js

@@ -2606,19 +2606,6 @@ class Component extends Element_1.default {
                 return Promise.resolve(editor);
             }
             else {
-                // Due to an issue with ckeditor not loading styles in the shadowdom (https://github.com/ckeditor/ckeditor5/issues/15824), we need to copy cke-styles to the shadowdom
-                let current = element;
-                while (current) {
-                    if (current instanceof ShadowRoot) {
-                        const ckeStyles = document.querySelector('style[data-cke="true"]');
-                        const clone = document.createElement('style');
-                        clone.setAttribute('data-cke', 'true');
-                        clone.textContent = ckeStyles.textContent;
-                        current.prepend(clone);
-                        break;
-                    }
-                    current = current.parentNode || current.host;
-                }
                 return ClassicEditor.create(element, settings).then((editor) => {
                     editor.model.document.on('change', () => onChange(editor.data.get()));
                     return editor;
@@ -2639,58 +2626,6 @@ class Component extends Element_1.default {
                     return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);
-                const root = element.getRootNode();
-                if (root instanceof ShadowRoot && root.getSelection) {
-                    const sel = this.quill.selection;
-                    // 1. getNativeRange: read selection from shadowRoot instead of document
-                    sel.getNativeRange = () => {
-                        const shadowSelection = root.getSelection();
-                        if (shadowSelection == null || shadowSelection.rangeCount <= 0)
-                            return null;
-                        const nativeRange = shadowSelection.getRangeAt(0);
-                        if (nativeRange == null)
-                            return null;
-                        return sel.normalizeNative(nativeRange);
-                    };
-                    // 2. hasFocus: check shadowRoot.activeElement instead of document.activeElement
-                    sel.hasFocus = () => {
-                        return (root.activeElement === sel.root ||
-                            (root.activeElement != null && sel.root.contains(root.activeElement)));
-                    };
-                    // 3. setNativeRange: use shadowRoot's selection to add/remove ranges
-                    const origSetNativeRange = sel.setNativeRange.bind(sel);
-                    sel.setNativeRange = (startNode, startOffset, endNode, endOffset, force) => {
-                        // Delegate to original logic for the null case (blur)
-                        if (startNode == null) {
-                            origSetNativeRange(null);
-                            return;
-                        }
-                        if (!sel.hasFocus()) {
-                            sel.root.focus({ preventScroll: true });
-                        }
-                        const shadowSelection = root.getSelection();
-                        if (shadowSelection == null)
-                            return;
-                        const { native } = sel.getNativeRange() || {};
-                        endNode = endNode !== null && endNode !== void 0 ? endNode : startNode;
-                        endOffset = endOffset !== null && endOffset !== void 0 ? endOffset : startOffset;
-                        if (native == null ||
-                            force ||
-                            startNode !== native.startContainer ||
-                            startOffset !== native.startOffset ||
-                            endNode !== native.endContainer ||
-                            endOffset !== native.endOffset) {
-                            const range = document.createRange();
-                            range.setStart(startNode, startOffset);
-                            range.setEnd(endNode, endOffset);
-                            shadowSelection.removeAllRanges();
-                            shadowSelection.addRange(range);
-                        }
-                    };
-                    document.addEventListener('selectionchange', () => {
-                        sel.update();
-                    });
-                }
                 /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */
                 const txtArea = document.createElement('textarea');
                 txtArea.setAttribute('class', 'quill-source-code');

package/lib/cjs/components/_classes/nested/NestedComponent.form.js

@@ -11,6 +11,19 @@ const Components_1 = __importDefault(require("../../Components"));
  */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
+        {
+            key: 'display',
+            components: [
+                {
+                    key: 'labelWidth',
+                    ignore: true,
+                },
+                {
+                    key: 'labelMargin',
+                    ignore: true,
+                },
+            ],
+        },
         {
             key: 'data',
             ignore: true,

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -831,6 +831,10 @@ class NestedComponent extends Field_1.default {
         // if no value is provided and noDefault flag, set empty value
         else if (flags.noDefault && component.allowData) {
             flags.resetValue = true;
+            //  Preserve the live value instead of wiping it, so client-side calculations that read it don't blank out.
+            if (component.component.persistent === 'client-only') {
+                return false;
+            }
             return component.setValue(component.emptyValue, flags);
         }
         else if ((!this.rootPristine || component.visible) &&

package/lib/cjs/components/content/editForm/Content.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,