@formio/js 5.3.0 → 5.4.0-api98.1

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

@@ -20,9 +20,7 @@
 
 /*! @license DOMPurify 3.2.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.2.4/LICENSE */
 
-/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
-
-/*! formiojs v5.3.0 | https://unpkg.com/formiojs@5.3.0/LICENSE.txt */
+/*! formiojs v5.4.0-api98.1 | https://unpkg.com/formiojs@5.4.0-api98.1/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

@@ -154,6 +154,34 @@ class Formio {
             if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {
                 instance.element.innerHTML = `<div class="alert-success" role="alert">${successMessage}</div>`;
             }
+            const announcementMessage = successMessage && successMessage.toLowerCase() !== 'false'
+                ? successMessage
+                : 'Form submission complete';
+            let liveRegion = document.getElementById('formio-announcements');
+            if (!liveRegion) {
+                liveRegion = _a.createElement('div', {
+                    id: 'formio-announcements',
+                    'role': 'status',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true',
+                    style: 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);'
+                });
+                document.body.appendChild(liveRegion);
+            }
+            // Announce the submission completion using VPAT clear-and-reset technique
+            liveRegion.textContent = '';
+            liveRegion.setAttribute('aria-live', 'off');
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    liveRegion.setAttribute('aria-live', 'polite');
+                    liveRegion.textContent = announcementMessage;
+                    setTimeout(() => {
+                        if (liveRegion) {
+                            liveRegion.textContent = '';
+                        }
+                    }, 1000);
+                }, 100);
+            });
             let returnUrl = _a.config.redirect;
             // Allow form based configuration for return url.
             if (!returnUrl &&
@@ -338,6 +366,12 @@ class Formio {
                     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.min.js`,
+                    css: `${_a.cdn.quill}/quill.snow.css`
+                };
+                yield _a.addLibrary(wrapper, quill, 'quill');
             }
             element.parentNode.removeChild(element);
             wrapper.appendChild(element);
@@ -453,7 +487,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.3.0';
+Formio.version = '5.4.0-api98.1';
 // 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}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
  * @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.
@@ -202,6 +202,8 @@ export type FormOptions = {
      */
     i18n?: {
         [key: string]: string;
+    } | {
+        translationsUrl: 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}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
  * @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.
@@ -360,7 +360,7 @@ class Form extends Element_1.default {
             return Promise.resolve(this.instance);
         }
         this.form.display = display;
-        this.instance.destroy();
+        this.instance.destroy(true);
         this.instance = this.create(display);
         return this.setForm(this.form).then(() => {
             this.instance.emit('setDisplay', this.form.display);

package/lib/cjs/FormBuilder.d.ts

@@ -73,11 +73,11 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */
-    constructor(element: HTMLElement, form: string | object, options: {
+    constructor(element: HTMLElement, form: string | object | undefined, options: {
         /**
          * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
          */

package/lib/cjs/FormBuilder.js

@@ -10,7 +10,7 @@ class FormBuilder extends Form_1.default {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */

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.3.0';
+sdk_1.Formio.version = '5.4.0-api98.1';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/PDF.js

@@ -17,9 +17,11 @@ class PDF extends Webform_1.default {
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-change', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-getIframePositions', (query) => {
             const iframe = document.getElementById(`iframe-${query.formId}`);
@@ -286,7 +288,15 @@ if (typeof window !== 'undefined') {
             eventData.name &&
             eventData.formId &&
             Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {
-            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            if (eventData.compPath) {
+                const comp = Formio_1.Formio.forms[eventData.formId].getComponent(eventData.compPath);
+                if (comp) {
+                    comp.emit(eventData.name, eventData.data);
+                }
+            }
+            else {
+                Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            }
         }
     });
 }

package/lib/cjs/Webform.d.ts

@@ -259,6 +259,7 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission: any, flags?: any): Promise<any>;
+    _submission: any;
     handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     saveDraft(): void;
     /**
@@ -269,7 +270,6 @@ declare class Webform extends NestedDataComponent {
     get schema(): any;
     mergeData(_this: any, _that: any): void;
     editing: boolean | undefined;
-    _submission: any;
     /**
      * Build the form.
      * @returns {Promise} - The promise that is triggered when the form is built.
@@ -372,6 +372,7 @@ declare class Webform extends NestedDataComponent {
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerCaptcha(components?: null): void;
+    loadTranslations(): Promise<any>;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/cjs/Webform.js

@@ -259,7 +259,7 @@ class Webform extends NestedDataComponent_1.default {
             if (err) {
                 return;
             }
-            this.rebuild();
+            this.redraw();
             this.emit('languageChanged');
         });
     }
@@ -575,7 +575,9 @@ class Webform extends NestedDataComponent_1.default {
         }
         this.initialized = false;
         const rebuild = this.rebuild() || Promise.resolve();
-        return rebuild.then(() => {
+        return this.loadTranslations()
+            .then(() => rebuild)
+            .then(() => {
             this.emit('formLoad', form);
             if (!this.options.server) {
                 this.triggerCaptcha();
@@ -657,6 +659,8 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
+            this._submission = {};
+            this._data = {};
             this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
@@ -1122,6 +1126,7 @@ class Webform extends NestedDataComponent_1.default {
         this.setPristine(true);
         // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.
         this.setValue((0, utils_1.fastCloneDeep)(submission), {
+            noDefault: true,
             noValidate: true,
             noCheck: true,
         });
@@ -1130,6 +1135,32 @@ class Webform extends NestedDataComponent_1.default {
         if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {
             this.triggerSaveDraft.cancel();
         }
+        if (typeof document !== 'undefined' && document.body) {
+            const announcementMessage = this.t ? this.t('complete') : 'Form submission complete';
+            // Get or create ARIA live region for announcements
+            let liveRegion = document.getElementById('formio-announcements');
+            if (!liveRegion) {
+                liveRegion = document.createElement('div');
+                liveRegion.id = 'formio-announcements';
+                liveRegion.setAttribute('role', 'status');
+                liveRegion.setAttribute('aria-live', 'polite');
+                liveRegion.setAttribute('aria-atomic', 'true');
+                liveRegion.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);';
+                document.body.appendChild(liveRegion);
+            }
+            // Announce the submission completion using VPAT clear-and-reset technique
+            liveRegion.textContent = '';
+            liveRegion.setAttribute('aria-live', 'off');
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    liveRegion.setAttribute('aria-live', 'polite');
+                    liveRegion.textContent = announcementMessage;
+                    setTimeout(() => {
+                        liveRegion.textContent = '';
+                    }, 1000);
+                }, 100);
+            });
+        }
         this.emit('submit', submission, saved);
         if (saved) {
             this.emit('submitDone', submission);
@@ -1497,6 +1528,50 @@ class Webform extends NestedDataComponent_1.default {
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
+    loadTranslations() {
+        var _a;
+        // 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) => {
+            translationsLoadResolve = resolve;
+        });
+        const translationsUrl = typeof ((_a = this.options.i18n) === null || _a === void 0 ? void 0 : _a.translationsUrl) === 'string'
+            ? this.options.i18n.translationsUrl
+            : null;
+        if (translationsUrl) {
+            const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
+            Formio_1.Formio.makeStaticRequest(url, 'GET')
+                .then((response) => {
+                let languages = response;
+                try {
+                    if (typeof languages == 'string') {
+                        languages = JSON.parse(languages);
+                    }
+                    this.i18next.setLanguages(languages);
+                    this.i18next.changeLanguage(this.i18next.originalLanguage, (err) => {
+                        if (err) {
+                            return;
+                        }
+                        this.emit('languageChanged');
+                    });
+                    this.redraw();
+                    translationsLoadResolve();
+                }
+                catch (err) {
+                    console.warn(err.message);
+                    translationsLoadResolve();
+                }
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
+        else {
+            translationsLoadResolve();
+        }
+        return promise;
+    }
     set nosubmit(value) {
         this._nosubmit = !!value;
         this.emit('nosubmit', this._nosubmit);

package/lib/cjs/WebformBuilder.js

@@ -949,7 +949,22 @@ class WebformBuilder extends Component_1.default {
             rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
+            // Get the updated `toIndex` after the component has been inserted/rebuilt
+            const toIndex = lodash_1.default.findIndex(target.formioContainer, { key: info.key });
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
+            // If this is not a new component — it means it was moved
+            if (!isNew) {
+                const payload = {
+                    component: info,
+                    parent,
+                    path,
+                    fromIndex: index,
+                    toIndex,
+                    timestamp: new Date()
+                };
+                // New event that allows explicit tracking of reordering
+                this.emit('moveComponent', payload);
+            }
             if (!isNew || this.options.noNewEdit || info.noNewEdit) {
                 this.emit('change', this.form);
             }

package/lib/cjs/Wizard.d.ts

@@ -90,6 +90,7 @@ declare class Wizard extends Webform {
     nextPage(): Promise<void>;
     validateCurrentPage(flags?: {}): any;
     emitPrevPage(): void;
+    announceCurrentPage(): void;
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;

package/lib/cjs/Wizard.js

@@ -711,6 +711,7 @@ class Wizard extends Webform_1.default {
     }
     emitNextPage() {
         this.emit('nextPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
     }
     nextPage() {
         // Read-only forms should not worry about validation before going to next page, nor should they submit.
@@ -756,6 +757,16 @@ class Wizard extends Webform_1.default {
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
+    }
+    announceCurrentPage() {
+        if (lodash_1.default.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {
+            (0, utils_1.screenReaderSpeech)(`Now on step ${this.page + 1} of ${this.pages.length}: ${lodash_1.default.get(this.currentPage, 'component.title')}`);
+            const currentLink = lodash_1.default.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);
+            if (currentLink) {
+                currentLink.focus();
+            }
+        }
     }
     prevPage() {
         return this.beforePage().then(() => {

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -169,6 +169,7 @@ declare class Component extends Element {
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
+    hasCondionallyHiddenLayoutParent(): boolean;
     parentConditionallyHidden(): boolean;
     /**
      * Returns true if any of the parents default their component "hidden" property to true.
@@ -187,6 +188,7 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendIds(): string;
     init(): void;
     /**
      * Disable this component.
@@ -584,6 +586,15 @@ declare class Component extends Element {
      * @returns {string} - The custom style
      */
     get customStyle(): string;
+    /**
+     * Build custom styles from the styles form option or global config.
+     * @param {string[]} templateNames - The possible template names.
+     * @returns {{ [refName: string]: string[] }} - The custom styles object for the named template.
+     * @todo - Rename this to a better method name that doesn't clash
+     */
+    getCustomStyles(templateNames: string[]): {
+        [refName: string]: string[];
+    };
     /**
      * Returns if the application is on a mobile device.
      * @returns {boolean} - TRUE if the application is on a mobile device.
@@ -918,9 +929,9 @@ declare class Component extends Element {
      */
     get hasDefaultValue(): boolean;
     /**
-     * Determine if we should add a default value for this component.
-     * @returns {boolean} - TRUE if a default value should be set
-     */
+    * Determine if we should add a default value for this component.
+    * @returns {boolean} - TRUE if a default value should be set
+    */
     get shouldAddDefaultValue(): boolean;
     /**
      * Get the default value of this component.

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

@@ -446,6 +446,16 @@ class Component extends Element_1.default {
         }
         return false;
     }
+    hasCondionallyHiddenLayoutParent() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden && utils_1.default.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -507,6 +517,18 @@ class Component extends Element_1.default {
         }
         return label;
     }
+    getFieldsetLegendIds() {
+        var _a, _b;
+        const legendIds = [];
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (((_a = currentParent.component) === null || _a === void 0 ? void 0 : _a.type) === 'fieldset' && ((_b = currentParent.component) === null || _b === void 0 ? void 0 : _b.legend)) {
+                legendIds.push(`l-${currentParent.id}-legend`);
+            }
+            currentParent = currentParent.parent;
+        }
+        return legendIds.reverse().join(' ');
+    }
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
@@ -710,7 +732,7 @@ class Component extends Element_1.default {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -965,8 +987,20 @@ class Component extends Element_1.default {
         return this.options.renderMode === 'html';
     }
     renderTemplate(name, data = {}, modeOption = '') {
-        // Need to make this fall back to form if renderMode is not found similar to how we search templates.
+        // Allow more specific template names
+        const names = [
+            `${name}-${this.component.type}-${this.key}`,
+            `${name}-${this.component.type}`,
+            `${name}-${this.key}`,
+            `${name}`,
+        ];
+        // Allow template alters.
         const mode = modeOption || this.options.renderMode || 'form';
+        const { referenceAttributeName, template } = this.getTemplate(names, mode);
+        if (referenceAttributeName) {
+            this._referenceAttributeName = referenceAttributeName;
+        }
+        // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         data.component = this.component;
         data.self = this;
         data.options = this.options;
@@ -988,18 +1022,7 @@ class Component extends Element_1.default {
         };
         data.label = data.labelInfo || this.labelInfo;
         data.tooltip = this.getFormattedTooltip(this.component.tooltip);
-        // Allow more specific template names
-        const names = [
-            `${name}-${this.component.type}-${this.key}`,
-            `${name}-${this.component.type}`,
-            `${name}-${this.key}`,
-            `${name}`,
-        ];
-        // Allow template alters.
-        const { referenceAttributeName, template } = this.getTemplate(names, mode);
-        if (referenceAttributeName) {
-            this._referenceAttributeName = referenceAttributeName;
-        }
+        data.customStyles = this.getCustomStyles(names);
         return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);
     }
     /**
@@ -1633,6 +1656,7 @@ class Component extends Element_1.default {
      * @returns {HTMLElement} - The created modal element.
      */
     createModal(element, attr, confirm) {
+        var _a;
         const dialog = this.ce('div', attr || {});
         this.setContent(dialog, this.renderTemplate('dialog'));
         // Add refs to dialog, not "this".
@@ -1642,14 +1666,27 @@ class Component extends Element_1.default {
             dialogContents: 'single',
             dialogClose: 'single',
         });
+        // Check if an element is inside shadow dom
+        const isInShadowDOM = typeof ShadowRoot !== 'undefined' && ((_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot;
+        // if we render shadow dom inside <iframe>'s we need to get the body from the current iframe,
+        // not the general body. This is necessary to hide and show the scroll bar correctly.
+        const body = isInShadowDOM ? this.element.getRootNode().host.ownerDocument.body : document.body;
+        const rootEl = isInShadowDOM ? this.element.closest('.formio-form-wrapper') : document.body;
+        const checkModal = (method) => {
+            if (isInShadowDOM) {
+                body.style.overflow = method === 'add' ? 'hidden' : '';
+                return;
+            }
+            body.classList[method]('modal-open');
+        };
         dialog.refs.dialogContents.appendChild(element);
-        document.body.appendChild(dialog);
-        document.body.classList.add('modal-open');
+        rootEl.appendChild(dialog);
+        checkModal('add');
         dialog.close = () => {
-            document.body.classList.remove('modal-open');
+            checkModal('remove');
             dialog.dispatchEvent(new CustomEvent('close'));
         };
-        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));
+        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, rootEl));
         const close = (event) => {
             event.preventDefault();
             dialog.close();
@@ -1720,6 +1757,21 @@ class Component extends Element_1.default {
         });
         return customCSS;
     }
+    /**
+     * Build custom styles from the styles form option or global config.
+     * @param {string[]} templateNames - The possible template names.
+     * @returns {{ [refName: string]: string[] }} - The custom styles object for the named template.
+     * @todo - Rename this to a better method name that doesn't clash
+     */
+    getCustomStyles(templateNames) {
+        var _a;
+        for (const name of templateNames) {
+            if ((_a = this.options.styles) === null || _a === void 0 ? void 0 : _a[name]) {
+                return this.options.styles[name];
+            }
+        }
+        return {};
+    }
     /**
      * Returns the component condition operator settings if available.
      * @returns {object} - The component condition operator settings.
@@ -2502,6 +2554,20 @@ 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;
@@ -2556,7 +2622,7 @@ class Component extends Element_1.default {
     }
     get shouldSanitizeValue() {
         var _a;
-        // Sanitize value if sanitizing for thw whole content is turned off
+        // Sanitize value if sanitizing for the whole content is turned off
         return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false;
     }
     addAce(element, settings, onChange) {
@@ -2574,6 +2640,7 @@ class Component extends Element_1.default {
             editor.setOptions(settings);
             editor.getSession().setMode(settings.mode);
             editor.on('change', () => onChange(editor.getValue()));
+            editor.renderer.attachToShadowRoot();
             if (settings.isUseWorkerDisabled) {
                 editor.session.setUseWorker(false);
             }
@@ -2634,7 +2701,6 @@ class Component extends Element_1.default {
             return;
         }
         lodash_1.default.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2682,9 +2748,9 @@ class Component extends Element_1.default {
                 this.component.defaultValue !== undefined));
     }
     /**
-     * Determine if we should add a default value for this component.
-     * @returns {boolean} - TRUE if a default value should be set
-     */
+    * Determine if we should add a default value for this component.
+    * @returns {boolean} - TRUE if a default value should be set
+    */
     get shouldAddDefaultValue() {
         return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);
     }
@@ -3677,13 +3743,14 @@ class Component extends Element_1.default {
      * @returns {*} - The components "input" DOM element information.
      */
     elementInfo() {
+        var _a;
         const attributes = {
             name: this.options.name,
             type: this.component.inputType || 'text',
             class: 'form-control',
             lang: this.options.language,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });
         }
         if (this.component.tabindex) {