@formio/js 5.0.0-rc.43 → 5.0.0-rc.44

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

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
+import Component from '../component/Component';
 import { process as processAsync, processSync } from '@formio/core/process';
 export default class NestedComponent extends Field {
     static schema(...extend) {
@@ -184,8 +185,9 @@ export default class NestedComponent extends Field {
      * component tree.
      *
      * @param {string} key - The key of the component to retrieve.
-     * @param {function} fn - Called with the component once found.
-     * @return {Object} - The component that is located.
+     * @param {function} [fn] - Called with the component once found.
+     * @param {string} [originalPath] - The original path to the component.
+     * @return {Component} - The component that is located.
      */
     getComponent(path, fn, originalPath) {
         originalPath = originalPath || getStringFromComponentPath(path);

package/lib/mjs/components/datagrid/DataGrid.js

@@ -260,7 +260,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     loadRefs(element, refs) {
         super.loadRefs(element, refs);
         if (refs['messageContainer'] === 'single') {
-            const container = _.last(element.querySelectorAll('[ref=messageContainer]'));
+            const container = _.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
             this.refs['messageContainer'] = container || this.refs['messageContainer'];
         }
     }

package/lib/mjs/components/editgrid/EditGrid.js

@@ -115,10 +115,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     get defaultDialogTemplate() {
         return `
-    <h3 ref="dialogHeader">${this.t('Do you want to clear data?')}</h3>
+    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('Do you want to clear data?')}</h3>
     <div style="display:flex; justify-content: flex-end;">
-      <button ref="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
-      <button ref="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
+      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
+      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
     </div>
   `;
     }

package/lib/mjs/components/form/Form.js

@@ -290,7 +290,7 @@ export default class FormComponent extends Component {
                 if (!this.builderMode && this.component.modalEdit) {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
-                    this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue);
+                    this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
                     this.setOpenModalElement();
                 }
                 this.calculateValue();

package/lib/mjs/components/html/HTML.js

@@ -38,13 +38,13 @@ export default class HTMLComponent extends Component {
             return ` ${this.component.content} `;
         }
         const submission = _.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.component.content, {
+        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return this.sanitize(content, this.shouldSanitizeValue);
+        return content;
     }
     get singleTags() {
         return ['br', 'img', 'hr'];

package/lib/mjs/components/html/fixtures/comp3.js

@@ -0,0 +1,38 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'HTML',
+            attrs: [
+                {
+                    attr: '',
+                    value: '',
+                },
+            ],
+            content: '<img src=1 onerror=alert("htmlContent")>\n<div class="myClass {{data.textField + \'-class\'}}">{{' +
+                ' data.textField ? data.textField : \'No Text\'}}</div>',
+            refreshOnChange: true,
+            key: 'html',
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/html/fixtures/index.js

@@ -1,3 +1,4 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
-export { comp1, comp2 };
+import comp3 from './comp3';
+export { comp1, comp2, comp3 };

package/lib/mjs/components/radio/Radio.js

@@ -166,7 +166,8 @@ export default class RadioComponent extends ListComponent {
                     dataValue = _.toString(this.dataValue);
                 }
                 if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
-                    input.checked = _.isEqual(this.loadedOptions[index].value, this.dataValue);
+                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
+                    input.checked = _.isEqual(optionValue, this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -362,18 +363,36 @@ export default class RadioComponent extends ListComponent {
      * @return {*}
      */
     normalizeValue(value) {
+        const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
         }
-        const isEquivalent = _.toString(value) === Number(value).toString();
-        if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
-            value = +value;
-        }
-        if (value === 'true') {
-            value = true;
-        }
-        if (value === 'false') {
-            value = false;
+        switch (dataType) {
+            case 'auto':
+                if (!isNaN(parseFloat(value)) && isFinite(value) && _.toString(value) === Number(value).toString()) {
+                    value = +value;
+                }
+                if (value === 'true') {
+                    value = true;
+                }
+                if (value === 'false') {
+                    value = false;
+                }
+                break;
+            case 'number':
+                value = +value;
+                break;
+            case 'string':
+                if (typeof value === 'object') {
+                    value = JSON.stringify(value);
+                }
+                else {
+                    value = String(value);
+                }
+                break;
+            case 'boolean':
+                value = !(!value || value.toString() === 'false');
+                break;
         }
         if (this.isSelectURL && this.templateData && this.templateData[value]) {
             const submission = this.root.submission;

package/lib/mjs/components/radio/editForm/Radio.edit.data.js

@@ -71,6 +71,26 @@ export default [
             json: { '===': [{ var: 'data.dataSrc' }, 'values'] },
         },
     },
+    {
+        type: 'select',
+        input: true,
+        label: 'Storage Type',
+        key: 'dataType',
+        clearOnHide: true,
+        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',
+        weight: 12,
+        template: '<span>{{ item.label }}</span>',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'Autotype', value: 'auto' },
+                { label: 'String', value: 'string' },
+                { label: 'Number', value: 'number' },
+                { label: 'Boolean', value: 'boolean' },
+                { label: 'Object', value: 'object' },
+            ],
+        },
+    },
     {
         key: 'template',
         conditional: {

package/lib/mjs/components/radio/fixtures/comp11.js

@@ -0,0 +1,83 @@
+export default {
+    title: 'Test',
+    name: 'test',
+    path: 'test',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: '0',
+                    value: '0',
+                    shortcut: ''
+                },
+                {
+                    label: '1',
+                    value: '1',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioNumber',
+            type: 'radio',
+            dataType: 'number',
+            input: true
+        },
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: '0',
+                    value: '0',
+                    shortcut: ''
+                },
+                {
+                    label: '1',
+                    value: '1',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioString',
+            dataType: 'string',
+            type: 'radio',
+            input: true
+        },
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: 'true',
+                    value: 'true',
+                    shortcut: ''
+                },
+                {
+                    label: 'false',
+                    value: 'false',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioBoolean',
+            dataType: 'boolean',
+            type: 'radio',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

package/lib/mjs/components/radio/fixtures/index.js

@@ -8,4 +8,5 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };

package/lib/mjs/components/select/Select.js

@@ -215,6 +215,9 @@ export default class SelectComponent extends ListComponent {
         }
         return super.shouldLoad;
     }
+    get selectData() {
+        return this.component.selectData || super.selectData;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -1,4 +1,30 @@
+import _ from 'lodash';
 import { eachComponent } from '../../../utils/utils';
+const calculateSelectData = (context) => {
+    const { instance, data } = context;
+    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === instance.getValue());
+    const options = { data: {}, noeval: true };
+    instance.interpolate(data.template, {
+        item: rawDefaultValue,
+    }, options);
+    return options.data.item;
+};
+const setSelectData = (context) => {
+    // Wait before downloadedResources will be set
+    setTimeout(() => {
+        const { instance, data } = context;
+        const selectDataComponent = instance?.root.getComponent('selectData');
+        // nothing can set if don't have downloaded resources
+        if (!selectDataComponent || !instance.getValue() || !instance.downloadedResources?.length) {
+            return;
+        }
+        // if valueProperty is not provided, we have entire object
+        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
+        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
+        selectDataComponent.setValue(newValue);
+    }, 0);
+};
 export default [
     {
         key: 'dataSrc',
@@ -623,5 +649,37 @@ export default [
         key: 'useExactSearch',
         label: 'Use exact search',
         tooltip: 'Disables search algorithm threshold.',
-    }
+    },
+    {
+        key: 'defaultValue',
+        onSetItems(component) {
+            setSelectData(component.evalContext());
+        },
+        onChange(context) {
+            if (context && context.flags && context.flags.modified) {
+                setSelectData(context);
+            }
+        },
+    },
+    {
+        key: 'selectData',
+        conditional: {
+            json: { 'and': [
+                    { '!==': [{ var: 'data.valueProperty' }, null] },
+                    { '!==': [{ var: 'data.valueProperty' }, ''] },
+                ] },
+        },
+    },
+    {
+        key: 'template',
+        onChange(context) {
+            if (context && context.flags && context.flags.modified) {
+                const defaultValueComponent = context.instance.root.getComponent('defaultValue');
+                if (!defaultValueComponent) {
+                    return;
+                }
+                setSelectData(defaultValueComponent.evalContext());
+            }
+        },
+    },
 ];

package/lib/mjs/components/signature/Signature.js

@@ -171,7 +171,7 @@ export default class SignatureComponent extends Input {
     getModalPreviewTemplate() {
         return this.renderTemplate('modalPreview', {
             previewText: this.dataValue ?
-                `<img src=${this.dataValue} ref='openModal' style="width: 100%;height: 100%;" />` :
+                `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')
         });
     }

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

@@ -57,7 +57,7 @@ export default class TextAreaComponent extends TextFieldComponent {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ref="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,

package/lib/mjs/formio.form.js

@@ -10,6 +10,8 @@ import Form from './Form';
 import Utils from './utils';
 import Evaluator from './utils/Evaluator';
 import Licenses from './licenses';
+import EventEmitter from './EventEmitter';
+import Webform from './Webform';
 Formio.loadModules = (path = `${Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio.requireLibrary(name, name, path, true)
         .then((modules) => {
@@ -116,4 +118,4 @@ export function useModule(defaultFn = null) {
  */
 Formio.use = useModule();
 // Export the components.
-export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses };
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform };

package/lib/mjs/providers/storage/s3.js

@@ -1,6 +1,10 @@
 import XHR from './xhr';
 import { withRetries } from './util';
-const AbortController = window.AbortController || require('abortcontroller-polyfill/dist/cjs-ponyfill');
+const loadAbortControllerPolyfill = async () => {
+    if (typeof AbortController === 'undefined') {
+        await import('abortcontroller-polyfill/dist/polyfill-patch-fetch');
+    }
+};
 function s3(formio) {
     return {
         async uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {
@@ -10,6 +14,7 @@ function s3(formio) {
                 if (response.signed) {
                     if (multipartOptions && Array.isArray(response.signed)) {
                         // patch abort callback
+                        await loadAbortControllerPolyfill();
                         const abortController = new AbortController();
                         const abortSignal = abortController.signal;
                         if (typeof abortCallback === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.43",
+  "version": "5.0.0-rc.44",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -29,7 +29,6 @@
     },
     "./dist/*": "./dist/*"
   },
-  "types": "index.d.ts",
   "files": [
     "dist",
     "lib",
@@ -84,9 +83,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.22",
+    "@formio/bootstrap": "^3.0.0-rc.24",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.2",
+    "@formio/core": "^2.1.0-dev.tt.3",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -114,7 +113,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.44",
-    "quill": "^2.0.0-rc.4",
+    "quill": "^2.0.0",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",
@@ -122,9 +121,9 @@
     "vanilla-picker": "^2.12.3"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "ace-builds": "1.33.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "ace-builds": "1.33.1",
     "async-limiter": "^2.0.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.3",

package/types/builders.d.ts

@@ -1,7 +0,0 @@
-export class Builders {
-  static readonly builders: any;
-  static addBuilder(name: string, builder: any): void;
-  static addBuilders(builders: any): void;
-  static getBuilder(name: string): any;
-  static getBuilder(): any;
-}

package/types/components/_classes/component/component.d.ts

@@ -1,175 +0,0 @@
-import { Element } from '../../../element';
-import { ValidateOptions } from '../../../formio';
-import { ComponentSchema, ElementInfo, ExtendedComponentSchema } from './../../schema.d';
-
-export class Component extends Element {
-  static schema(sources: ExtendedComponentSchema): ExtendedComponentSchema;
-  static tableView(value: any, options: any): void;
-  constructor(component: any, options: Object, data: Object);
-  public originalComponent: any | Component;
-  public refs: Object;
-  public attached: boolean;
-  public rendered: boolean;
-  public data: Object;
-  public component: any;
-  public error: string;
-  public tooltip: string;
-  public row: any;
-  public pristine: boolean;
-  public parent: any;
-  public root: any;
-  public lastChanged: any;
-  public triggerRedraw: Function;
-  public tooltips: any[];
-  public invalid: boolean;
-  public isBuilt: boolean;
-  readonly ready: any;
-  readonly labelInfo: any;
-  init(): void;
-  destroy(): void;
-  readonly shouldDisabled: any | boolean;
-  readonly isInputComponent: boolean;
-  readonly defaultSchema: ComponentSchema;
-  readonly hasInput: boolean;
-  readonly key: any;
-  public parentVisible: any | boolean;
-  public parentDisabled: any | boolean;
-  public visible: any | boolean;
-  public currentForm: any;
-  readonly fullMode: boolean;
-  readonly builderMode: boolean;
-  getModifiedSchema(
-    schema: ExtendedComponentSchema,
-    defaultSchema: ComponentSchema,
-    recursion: boolean,
-  ): ExtendedComponentSchema;
-  readonly schema: ExtendedComponentSchema;
-  t(text: string, params?: Object): any;
-  labelIsHidden(): boolean;
-  readonly transform: any;
-  getTemplate(names: any, modes: any): any;
-  checkTemplate(templates: any, names: any, modes: any): any;
-  checkTemplateMode(templatesByName: any, modes: any): any;
-  renderTemplate(name: any, data: any, modeOption?: any[]): any;
-  sanitize(dirty: string): any;
-  renderString(template: any, data: any): HTMLElement;
-  performInputMapping(input: any): any;
-  getBrowserLanguage(): string | null;
-  beforeNext(): any;
-  beforePage(): any;
-  beforeSubmit(): any;
-  readonly submissionTimezone: string | any;
-  readonly canDisable: boolean;
-  loadRefs(element: any, refs: any): any;
-  build(element: any): any;
-  render(children: any, topLevel?: boolean): any;
-  attach(element: any): any;
-  addShortcut(element: any, shortcut: any): void;
-  removeShortcut(element: any, shortcut: any): void;
-  detach(): void;
-  attachRefreshEvent(refreshData: any): void;
-  attachRefreshOn(): void;
-  refresh(value: any): void;
-  inContext(component: any): boolean;
-  readonly viewOnly: boolean | any;
-  createViewOnlyElement(): HTMLElement;
-  readonly defaultViewOnlyValue: '-';
-  getValueAsString(value: any): string;
-  getView(value: any): string;
-  updateItems(...args: any[]): void;
-  createModal(): HTMLElement;
-  readonly className: string;
-  readonly customStyle: string;
-  getElement(): HTMLElement;
-  evalContext(additional: any): any;
-  setPristine(pristine: boolean): void;
-  removeValue(index: number): void;
-  iconClass(name: any, spinning: any): any;
-  readonly name: string;
-  readonly errorLabel: string;
-  errorMessage(type: any): any;
-  setContent(element: any, content: any): boolean;
-  redraw(): any;
-  rebuild(): any;
-  removeEventListeners(): void;
-  hasClass(element: any, className: string): any;
-  addClass(element: any, className: string): any;
-  removeClass(element: any, className: string): any;
-  hasCondition(): boolean;
-  conditionallyVisible(data: any): boolean;
-  checkCondition(row: any, data: Object): boolean;
-  checkConditions(data: any): any;
-  readonly logic: any[];
-  fieldLogic(data: any): any;
-  applyActions(actions: any[], result: any, data: any, newComponent: any): boolean;
-  addInputError(message: any, dirty: boolean): void;
-  clearOnHide(show: boolean): void;
-  onChange(flags: Object, fromRoot: boolean): void;
-  readonly wysiwygDefault: {
-    theme: string;
-    placeholder: any | string;
-    modules: {
-      clipboard: {
-        matchVisual: boolean;
-      };
-      toolbar: any[];
-    };
-  };
-  addCKE(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
-  addQuill(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
-  addAce(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
-  readonly emptyValue: null;
-  hasValue(data: Object): boolean;
-  readonly rootValue: any;
-  readonly rootPristine: any;
-  public dataValue: any;
-  splice(index: number | string): void;
-  deleteValue(): void;
-  readonly defaultValue: any;
-  getValue(): any;
-  getValueAt(index: number): any;
-  setValue(value: any, flags: any): boolean;
-  setValueAt(index: number, value: any, flags: any): void;
-  readonly hasSetValue: boolean;
-  restoreValue(): void;
-  normalizeValue(value: any): any;
-  getIcon(name: any | string, content: any, styles: any, ref?: string): any | HTMLElement;
-  resetValue(): void;
-  hasChanged(before: any, after: any): boolean;
-  updateOnChange(flags: any, changed: boolean | any): boolean;
-  calculateValue(data: Object, flags: any): boolean;
-  public label: any | string;
-  getRoot(): Component;
-  invalidMessage(data: any, dirty: boolean, ignoreCondition?: boolean): any;
-  isValid(data: any, dirty: boolean): boolean;
-  checkValidity(data: any, dirty: any | boolean, rowData: any): boolean;
-  readonly validationValue: any;
-  isEmpty(value: any): boolean;
-  validateMultiple(): boolean;
-  readonly errors: any[];
-  setCustomValidity(message: any, dirty: any): void;
-  shouldSkipValidation(data: any, dirty: any, rowData: any): boolean;
-  whenReady(): any | Promise<any>;
-  readonly dataReady: any | Promise<any>;
-  asString(value: any): string;
-  public disabled: boolean;
-  setDisabled(element: any, disabled: any | boolean): void;
-  setLoading(element: any, loading: any | boolean): void;
-  selectOptions(select: any, tag: any, options: any, defaultValue: any): void;
-  setSelectValue(select: any, value: any): void;
-  clear(): any;
-  append(element: HTMLElement): void;
-  prepend(element: HTMLElement): void;
-  removeChild(element: HTMLElement): void;
-  attachLogic(): void;
-  elementInfo(): ElementInfo;
-  autofocus(): void;
-  focus(): void;
-  readonly shouldDisable: boolean;
-  readonly info: ElementInfo;
-  public element: any;
-  public validators: (keyof ValidateOptions)[];
-  public calculatedValue: any;
-  public options: any;
-  public labelElement: any;
-}