@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/cjs/components/tabs/Tabs.form.js

@@ -14,7 +14,7 @@ function default_1(...extend) {
     return (0, NestedComponent_form_1.default)([
         {
             key: 'display',
-            components: Tabs_edit_display_1.default
+            components: Tabs_edit_display_1.default,
         },
     ], ...extend);
 }

package/lib/cjs/components/tabs/Tabs.js

@@ -85,8 +85,8 @@ class TabsComponent extends NestedComponent_1.default {
             tabLikey: this.tabLikey,
             tabLinkKey: this.tabLinkKey,
             currentTab: this.currentTab,
-            tabComponents: this.tabs.map(tab => this.renderComponents(tab)),
-        }, (this.options.flatten || this.options.pdf ? 'flat' : null)));
+            tabComponents: this.tabs.map((tab) => this.renderComponents(tab)),
+        }, this.options.flatten || this.options.pdf ? 'flat' : null));
     }
     attach(element) {
         this.loadRefs(element, {
@@ -94,7 +94,10 @@ class TabsComponent extends NestedComponent_1.default {
             [this.tabKey]: 'multiple',
             [this.tabLikey]: 'multiple',
         });
-        ['change', 'error'].forEach(event => this.on(event, this.handleTabsValidation.bind(this)));
+        [
+            'change',
+            'error',
+        ].forEach((event) => this.on(event, this.handleTabsValidation.bind(this)));
         const superAttach = super.attach(element);
         this.refs[this.tabLinkKey].forEach((tabLink, index) => {
             this.addEventListener(tabLink, 'click', (event) => {
@@ -115,7 +118,10 @@ class TabsComponent extends NestedComponent_1.default {
      * @param {number} index - The index of the tab to set.
      */
     setTab(index) {
-        if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {
+        if (!this.tabs ||
+            !this.tabs[index] ||
+            !this.refs[this.tabKey] ||
+            !this.refs[this.tabKey][index]) {
             return;
         }
         this.currentTab = index;
@@ -181,7 +187,12 @@ class TabsComponent extends NestedComponent_1.default {
             const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;
             super.clearErrorClasses(element);
         }
-        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];
+        elements =
+            Array.isArray(elements) || elements instanceof NodeList
+                ? elements
+                : [
+                    elements,
+                ];
         elements.forEach((element) => {
             this.removeClass(element, 'is-invalid');
             this.removeClass(element, 'tab-error');
@@ -194,13 +205,20 @@ class TabsComponent extends NestedComponent_1.default {
         }
         this.clearErrorClasses(this.refs[this.tabLinkKey]);
         const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {
-            const hasComponentWithError = tab.some(comp => !!comp.error);
-            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;
+            const hasComponentWithError = tab.some((comp) => !!comp.error);
+            return hasComponentWithError
+                ? [
+                    ...invalidTabs,
+                    tabIndex,
+                ]
+                : invalidTabs;
         }, []);
         if (!invalidTabsIndexes.length) {
             return;
         }
-        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
+        const invalidTabs = [
+            ...this.refs[this.tabLinkKey],
+        ].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
         this.setErrorClasses(invalidTabs);
     }
 }

package/lib/cjs/components/tabs/editForm/Tabs.edit.display.js

@@ -3,39 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tooltip',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tabindex',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'disabled',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 0,
@@ -46,10 +46,10 @@ exports.default = [
         placeholder: 'Field Label',
         tooltip: 'The label for this field.',
         validate: {
-            required: true
+            required: true,
         },
         autofocus: true,
-        overrideEditForm: true
+        overrideEditForm: true,
     },
     {
         key: 'components',
@@ -63,7 +63,7 @@ exports.default = [
                 type: 'textfield',
                 input: true,
                 key: 'label',
-                label: 'Label'
+                label: 'Label',
             },
             {
                 type: 'textfield',
@@ -71,9 +71,13 @@ exports.default = [
                 key: 'key',
                 label: 'Key',
                 allowCalculateOverride: true,
-                calculateValue: { _camelCase: [{ var: 'row.label' }] }
-            }
-        ]
+                calculateValue: {
+                    _camelCase: [
+                        { var: 'row.label' },
+                    ],
+                },
+            },
+        ],
     },
     {
         weight: 1100,
@@ -81,10 +85,10 @@ exports.default = [
         label: 'Vertical Layout',
         tooltip: 'Make this field display in vertical orientation.',
         key: 'verticalLayout',
-        input: true
+        input: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
 ];

package/lib/cjs/components/tags/Tags.form.js

@@ -14,7 +14,7 @@ function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'data',
-            components: Tags_edit_data_1.default
+            components: Tags_edit_data_1.default,
         },
     ], ...extend);
 }

package/lib/cjs/components/tags/Tags.js

@@ -14,7 +14,7 @@ class TagsComponent extends Input_1.default {
             key: 'tags',
             delimeter: ',',
             storeas: 'string',
-            maxTags: 0
+            maxTags: 0,
         }, ...extend);
     }
     static get builderInfo() {
@@ -24,24 +24,30 @@ class TagsComponent extends Input_1.default {
             group: 'advanced',
             documentation: '/userguide/form-building/advanced-components#tags',
             weight: 30,
-            schema: TagsComponent.schema()
+            schema: TagsComponent.schema(),
         };
     }
     static get serverConditionSettings() {
         return TagsComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
+                ...super.conditionOperatorsSettings.operators,
+                'includes',
+                'notIncludes',
+            ] });
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];
+        return ((0, utils_1.getComponentSavedTypes)(schema) || [
+            utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string,
+        ]);
     }
     init() {
         super.init();
     }
     get emptyValue() {
-        return (this.component.storeas === 'string') ? '' : [];
+        return this.component.storeas === 'string' ? '' : [];
     }
     get defaultSchema() {
         return TagsComponent.schema();
@@ -80,7 +86,9 @@ class TagsComponent extends Input_1.default {
             duplicateItemsAllowed: false,
             shadowRoot: this.root ? this.root.shadowRoot : null,
             placeholder: hasPlaceholder,
-            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,
+            placeholderValue: hasPlaceholder
+                ? this.t(this.component.placeholder, { _userInput: true })
+                : null,
         });
         this.choices.itemList.element.tabIndex = element.tabIndex;
         this.addEventListener(this.choices.input.element, 'blur', () => {
@@ -89,7 +97,9 @@ class TagsComponent extends Input_1.default {
             const value = this.choices.input.value;
             const maxTagsNumber = this.component.maxTags;
             const valuesCount = this.choices.getValue(true).length;
-            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());
+            const isRepeatedValue = this.choices
+                .getValue(true)
+                .some((existingValue) => existingValue.trim() === value.trim());
             if (value) {
                 if (maxTagsNumber && valuesCount === maxTagsNumber) {
                     this.choices.addItems = false;
@@ -99,11 +109,13 @@ class TagsComponent extends Input_1.default {
                     this.choices.clearInput();
                 }
                 else {
-                    this.choices.setValue([value]);
+                    this.choices.setValue([
+                        value,
+                    ]);
                     this.choices.clearInput();
                     this.choices.hideDropdown(true);
                     this.updateValue(null, {
-                        modified: true
+                        modified: true,
                     });
                 }
             }
@@ -121,7 +133,7 @@ class TagsComponent extends Input_1.default {
             return super.normalizeValue(value.join(this.delimiter));
         }
         else if (this.component.storeas === 'array' && typeof value === 'string') {
-            return super.normalizeValue(value.split(this.delimiter).filter(result => result));
+            return super.normalizeValue(value.split(this.delimiter).filter((result) => result));
         }
         return super.normalizeValue(value);
     }
@@ -132,9 +144,13 @@ class TagsComponent extends Input_1.default {
             this.choices.clearStore();
             if (dataValue) {
                 if (typeof dataValue === 'string') {
-                    dataValue = dataValue.split(this.delimiter).filter(result => result);
+                    dataValue = dataValue.split(this.delimiter).filter((result) => result);
                 }
-                const value = Array.isArray(dataValue) ? dataValue : [dataValue];
+                const value = Array.isArray(dataValue)
+                    ? dataValue
+                    : [
+                        dataValue,
+                    ];
                 this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));
             }
         }

package/lib/cjs/components/tags/editForm/Tags.edit.data.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'multiple',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 20,
@@ -11,7 +11,7 @@ exports.default = [
         input: true,
         key: 'delimeter',
         label: 'Delimiter',
-        tooltip: 'What is used to separate the tags.</a>'
+        tooltip: 'What is used to separate the tags.</a>',
     },
     {
         weight: 22,
@@ -20,7 +20,7 @@ exports.default = [
         key: 'maxTags',
         label: 'Max Tags',
         defaultValue: 0,
-        tooltip: 'The maximum amount of tags that can be added. 0 for infinity.'
+        tooltip: 'The maximum amount of tags that can be added. 0 for infinity.',
     },
     {
         weight: 24,
@@ -32,8 +32,8 @@ exports.default = [
         data: {
             values: [
                 { label: 'String (CSV)', value: 'string' },
-                { label: 'Array of Tags', value: 'array' }
-            ]
-        }
-    }
+                { label: 'Array of Tags', value: 'array' },
+            ],
+        },
+    },
 ];

package/lib/cjs/components/textarea/TextArea.form.js

@@ -15,11 +15,11 @@ function default_1(...extend) {
     return (0, TextField_form_1.default)([
         {
             key: 'display',
-            components: TextArea_edit_display_1.default
+            components: TextArea_edit_display_1.default,
         },
         {
             key: 'validation',
-            components: TextArea_edit_validation_1.default
+            components: TextArea_edit_validation_1.default,
         },
     ], ...extend);
 }

package/lib/cjs/components/textarea/TextArea.js

@@ -20,8 +20,8 @@ class TextAreaComponent extends TextField_1.default {
             inputFormat: 'html',
             validate: {
                 minWords: '',
-                maxWords: ''
-            }
+                maxWords: '',
+            },
         }, ...extend);
     }
     static get builderInfo() {
@@ -31,7 +31,7 @@ class TextAreaComponent extends TextField_1.default {
             icon: 'font',
             documentation: '/userguide/form-building/form-components#text-area',
             weight: 20,
-            schema: TextAreaComponent.schema()
+            schema: TextAreaComponent.schema(),
         };
     }
     init() {
@@ -74,7 +74,7 @@ class TextAreaComponent extends TextField_1.default {
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,
-                value
+                value,
             });
         }
         return this.renderTemplate('input', {
@@ -82,7 +82,7 @@ class TextAreaComponent extends TextField_1.default {
             suffix: this.suffix,
             input: info,
             value,
-            index
+            index,
         });
     }
     get autoExpand() {
@@ -101,9 +101,9 @@ class TextAreaComponent extends TextField_1.default {
             newArray[index] = newValue;
             newValue = newArray;
         }
-        if ((!lodash_1.default.isEqual(newValue, dataValue)) && (!lodash_1.default.isEmpty(newValue) || !lodash_1.default.isEmpty(dataValue))) {
+        if (!lodash_1.default.isEqual(newValue, dataValue) && (!lodash_1.default.isEmpty(newValue) || !lodash_1.default.isEmpty(dataValue))) {
             this.updateValue(newValue, {
-                modified: !this.autoModified
+                modified: !this.autoModified,
             }, index);
         }
         this.autoModified = false;
@@ -120,8 +120,8 @@ class TextAreaComponent extends TextField_1.default {
         if (this.component.wysiwyg && !this.component.editor) {
             this.component.editor = 'ckeditor';
         }
-        let settings = lodash_1.default.isEmpty(this.component.wysiwyg) ?
-            this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
+        let settings = lodash_1.default.isEmpty(this.component.wysiwyg)
+            ? this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
             : this.component.wysiwyg;
         // Keep track of when this editor is ready.
         this.editorsReady[index] = new Promise((editorReady) => {
@@ -131,15 +131,20 @@ class TextAreaComponent extends TextField_1.default {
                     if (!settings) {
                         settings = {};
                     }
-                    settings.mode = this.component.as ? `ace/mode/${this.component.as}` : 'ace/mode/javascript';
-                    this.addAce(element, settings, (newValue) => this.updateEditorValue(index, newValue)).then((ace) => {
+                    settings.mode = this.component.as
+                        ? `ace/mode/${this.component.as}`
+                        : 'ace/mode/javascript';
+                    this.addAce(element, settings, (newValue) => this.updateEditorValue(index, newValue))
+                        .then((ace) => {
                         this.editors[index] = ace;
                         let dataValue = this.dataValue;
-                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
+                        dataValue =
+                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
                         ace.setValue(this.setConvertedValue(dataValue, index));
                         editorReady(ace);
                         return ace;
-                    }).catch(err => console.warn(err));
+                    })
+                        .catch((err) => console.warn(err));
                     break;
                 case 'quill':
                     // Normalize the configurations for quill.
@@ -148,7 +153,8 @@ class TextAreaComponent extends TextField_1.default {
                         settings = this.wysiwygDefault.quill;
                     }
                     // Add the quill editor.
-                    this.addQuill(element, settings, () => this.updateEditorValue(index, this.editors[index].root.innerHTML)).then((quill) => {
+                    this.addQuill(element, settings, () => this.updateEditorValue(index, this.editors[index].root.innerHTML))
+                        .then((quill) => {
                         this.editors[index] = quill;
                         if (this.component.isUploadEnabled) {
                             const _this = this;
@@ -163,20 +169,22 @@ class TextAreaComponent extends TextField_1.default {
                             quill.disable();
                         }
                         let dataValue = this.dataValue;
-                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
+                        dataValue =
+                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
                         quill.setContents(quill.clipboard.convert({ html: this.setConvertedValue(dataValue, index) }));
                         editorReady(quill);
                         return quill;
-                    }).catch(err => console.warn(err));
+                    })
+                        .catch((err) => console.warn(err));
                     break;
                 case 'ckeditor':
                     settings = settings || {};
                     settings.rows = this.component.rows;
-                    this.addCKE(element, settings, (newValue) => this.updateEditorValue(index, newValue))
-                        .then((editor) => {
+                    this.addCKE(element, settings, (newValue) => this.updateEditorValue(index, newValue)).then((editor) => {
                         this.editors[index] = editor;
                         let dataValue = this.dataValue;
-                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
+                        dataValue =
+                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
                         const value = this.setConvertedValue(dataValue, index);
                         const isReadOnly = this.options.readOnly || this.disabled;
                         // Use ckeditor 4 in IE browser
@@ -190,8 +198,8 @@ class TextAreaComponent extends TextField_1.default {
                             const numRows = parseInt(this.component.rows, 10);
                             if (lodash_1.default.isFinite(numRows) && lodash_1.default.has(editor, 'ui.view.editable.editableElement')) {
                                 // Default height is 21px with 10px margin + a 14px top margin.
-                                const editorHeight = (numRows * 31) + 14;
-                                editor.ui.view.editable.editableElement.style.height = `${(editorHeight)}px`;
+                                const editorHeight = numRows * 31 + 14;
+                                editor.ui.view.editable.editableElement.style.height = `${editorHeight}px`;
                             }
                             editor.isReadOnly = isReadOnly;
                             editor.data.set(value);
@@ -225,29 +233,30 @@ class TextAreaComponent extends TextField_1.default {
         this.fileService
             .uploadFile(uploadStorage, files[0], (0, utils_1.uniqueName)(files[0].name), uploadDir || '', //should pass empty string if undefined
         null, uploadUrl, uploadOptions, fileKey)
-            .then(result => {
+            .then((result) => {
             requestData = result;
             return this.fileService.downloadFile(result);
         })
-            .then(result => {
+            .then((result) => {
             quillInstance.enable(true);
             const Delta = Quill.import('delta');
             quillInstance.updateContents(new Delta()
                 .retain(range.index)
                 .delete(range.length)
                 .insert({
-                image: result.url
+                image: result.url,
             }, {
                 alt: JSON.stringify(requestData),
             }), Quill.sources.USER);
-        }).catch(error => {
+        })
+            .catch((error) => {
             console.warn('Quill image upload failed');
             console.warn(error);
             quillInstance.enable(true);
         });
     }
     get isPlain() {
-        return (!this.component.wysiwyg && !this.component.editor);
+        return !this.component.wysiwyg && !this.component.editor;
     }
     get htmlView() {
         return this.options.readOnly && (this.component.editor || this.component.wysiwyg);
@@ -264,8 +273,7 @@ class TextAreaComponent extends TextField_1.default {
                             break;
                         case 'quill':
                             if (this.component.isUploadEnabled) {
-                                this.setAsyncConvertedValue(value)
-                                    .then(result => {
+                                this.setAsyncConvertedValue(value).then((result) => {
                                     const content = editor.clipboard.convert({ html: result });
                                     editor.setContents(content);
                                 });
@@ -287,18 +295,27 @@ class TextAreaComponent extends TextField_1.default {
     }
     setValue(value, flags = {}) {
         if (this.isPlain || this.options.readOnly || this.disabled) {
-            value = (this.component.multiple && Array.isArray(value)) ?
-                value.map((val, index) => this.setConvertedValue(val, index)) :
-                this.setConvertedValue(value);
+            value =
+                this.component.multiple && Array.isArray(value)
+                    ? value.map((val, index) => this.setConvertedValue(val, index))
+                    : this.setConvertedValue(value);
             return super.setValue(value, flags);
         }
-        flags.skipWysiwyg = value === '' && flags.resetValue ? false : lodash_1.default.isEqual(value, this.getValue());
+        flags.skipWysiwyg =
+            value === '' && flags.resetValue ? false : lodash_1.default.isEqual(value, this.getValue());
         return super.setValue(value, flags);
     }
     setContent(element, content, forceSanitize) {
         super.setContent(element, content, forceSanitize, {
-            addAttr: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
-            addTags: ['iframe'],
+            addAttr: [
+                'allow',
+                'allowfullscreen',
+                'frameborder',
+                'scrolling',
+            ],
+            addTags: [
+                'iframe',
+            ],
         });
     }
     setReadOnlyValue(value, index) {
@@ -306,7 +323,9 @@ class TextAreaComponent extends TextField_1.default {
         if (this.options.readOnly || this.disabled) {
             if (this.refs.input && this.refs.input[index]) {
                 if (this.component.inputFormat === 'plain') {
-                    this.refs.input[index].innerText = this.isPlain ? value : this.interpolate(value, {}, { noeval: true });
+                    this.refs.input[index].innerText = this.isPlain
+                        ? value
+                        : this.interpolate(value, {}, { noeval: true });
                 }
                 else {
                     this.setContent(this.refs.input[index], this.isPlain ? value : this.interpolate(value, {}, { noeval: true }), this.shouldSanitizeValue);
@@ -367,8 +386,7 @@ class TextAreaComponent extends TextField_1.default {
         const htmlDoc = new DOMParser().parseFromString(value, 'text/html');
         const images = htmlDoc.getElementsByTagName('img');
         if (images.length) {
-            return this.setImagesUrl(images)
-                .then(() => {
+            return this.setImagesUrl(images).then(() => {
                 value = htmlDoc.getElementsByTagName('body')[0].innerHTML;
                 return value;
             });
@@ -378,7 +396,7 @@ class TextAreaComponent extends TextField_1.default {
         }
     }
     setImagesUrl(images) {
-        return Promise.all(lodash_1.default.map(images, image => {
+        return Promise.all(lodash_1.default.map(images, (image) => {
             let requestData;
             try {
                 requestData = JSON.parse(image.getAttribute('alt'));
@@ -386,8 +404,7 @@ class TextAreaComponent extends TextField_1.default {
             catch (error) {
                 console.warn(error);
             }
-            return this.fileService.downloadFile(requestData)
-                .then((result) => {
+            return this.fileService.downloadFile(requestData).then((result) => {
                 image.setAttribute('src', result.url);
             });
         }));
@@ -447,7 +464,8 @@ class TextAreaComponent extends TextField_1.default {
         }, 200);
         const computedStyle = window.getComputedStyle(textarea, null);
         textarea.style.resize = 'none';
-        heightOffset = parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth) || 0;
+        heightOffset =
+            parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth) || 0;
         if (window) {
             this.addEventListener(window, 'resize', update);
         }
@@ -479,7 +497,7 @@ class TextAreaComponent extends TextField_1.default {
     }
     onChange(flags, fromRoot) {
         const changed = super.onChange(flags, fromRoot);
-        this.updateSizes.forEach(updateSize => updateSize());
+        this.updateSizes.forEach((updateSize) => updateSize());
         return changed;
     }
     hasChanged(newValue, oldValue) {
@@ -500,7 +518,7 @@ class TextAreaComponent extends TextField_1.default {
             try {
                 value = JSON.parse(value);
             }
-            catch (err) {
+            catch (ignoreErr) {
                 // console.warn(err);
             }
         }
@@ -508,14 +526,14 @@ class TextAreaComponent extends TextField_1.default {
     }
     detach() {
         // Destroy all editors.
-        this.editors.forEach(editor => {
+        this.editors.forEach((editor) => {
             if (editor.destroy) {
                 editor.destroy();
             }
         });
         this.editors = [];
         this.editorsReady = [];
-        this.updateSizes.forEach(updateSize => this.removeEventListener(window, 'resize', updateSize));
+        this.updateSizes.forEach((updateSize) => this.removeEventListener(window, 'resize', updateSize));
         this.updateSizes = [];
         super.detach();
     }