@formio/js 5.0.0-dev.5613.77144cc → 5.0.0-dev.5614.b5c93f3

package/lib/mjs/components/select/Select.d.ts

@@ -9,23 +9,9 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
@@ -44,21 +30,11 @@ export default class SelectComponent extends ListComponent {
     get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
-    get inputInfo(): {
-        type: string;
-        component: any;
-        changeEvent: string;
-        attr: {
-            name: any;
-            type: any;
-            class: string;
-            lang: any;
-        };
-    };
+    get inputInfo(): any;
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
-    get shouldInitialLoad(): any;
+    get shouldInitialLoad(): boolean;
     get selectMetadata(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
@@ -68,11 +44,12 @@ export default class SelectComponent extends ListComponent {
     itemTemplate(data: any, value: any): any;
     /**
      * Adds an option to the select dropdown.
-     *
-     * @param value
-     * @param label
+     * @param {*} value - The value of the new option.
+     * @param {string} label - The label of the new option.
+     * @param {object} [attrs] - Additional value attributes. Defaults to {}.
+     * @param {string} [id] - An id. Defaults to a random string.
      */
-    addOption(value: any, label: any, attrs?: {}, id?: string): void;
+    addOption(value: any, label: string, attrs?: object | undefined, id?: string | undefined): void;
     addValueOptions(items: any): boolean;
     disableInfiniteScroll(): void;
     set serverCount(value: any);
@@ -82,6 +59,7 @@ export default class SelectComponent extends ListComponent {
     set downloadedResources(value: any);
     get downloadedResources(): any;
     getSingleItemValueForHTMLMode(data: any): any;
+    itemValueForHTMLMode(value: any): any;
     get loadingError(): boolean | undefined;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     getCustomItems(): any;
@@ -99,7 +77,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): any;
+    render(): import("../_classes/field/Field").default;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;
@@ -115,11 +93,8 @@ export default class SelectComponent extends ListComponent {
     attachRefreshOnBlur(): void;
     addPlaceholderItem(placeholderValue: any): void;
     update(): void;
-    /**
-     * @param {*} value
-     * @param {Array} items
-     */
-    addCurrentChoices(values: any, items: any[], keyValue: any): any;
+    addCurrentChoices(values: any, items: any, keyValue: any): any;
+    getValueAsString(data: any, options: any): any;
     normalizeSingleValue(value: any): any;
     setMetadata(value: any): any;
     updateValue(value: any, flags: any): boolean;
@@ -131,22 +106,24 @@ export default class SelectComponent extends ListComponent {
     validateValueAvailability(setting: any, value: any): boolean;
     /**
      * Performs required transformations on the initial value to use in selectOptions
-     * @param {*} value
+     * @param {*} value - The value to transform.
+     * @returns {*} - Returns the options value.
      */
     getOptionValue(value: any): any;
     /**
      * If component has static values (values, json) or custom values, returns an array of them
-     * @returns {Array<*>|undefined}
+     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.
      */
     getOptionsValues(): Array<any> | undefined;
     /**
      * Output this select dropdown as a string value.
-     * @return {*}
+     * @returns {*}
      */
     isBooleanOrNumber(value: any): any;
     getNormalizedValues(): any;
     asString(value: any, options?: {}): any;
     focus(): void;
+    setErrorClasses(elements: any, dirty: any, hasError: any, hasMessages: any, element?: any): void;
 }
 import ListComponent from '../_classes/list/ListComponent';
 import Choices from '../../utils/ChoicesWrapper';

package/lib/mjs/components/select/Select.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -2,6 +2,11 @@ import listComponentForm from '../_classes/list/ListComponent.form';
 import SelectEditData from './editForm/Select.edit.data';
 import SelectEditDisplay from './editForm/Select.edit.display';
 import SelectEditValidation from './editForm/Select.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return listComponentForm([
         {

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

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
-import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -226,9 +225,10 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -284,9 +284,10 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * Adds an option to the select dropdown.
-     *
-     * @param value
-     * @param label
+     * @param {*} value - The value of the new option.
+     * @param {string} label - The label of the new option.
+     * @param {object} [attrs] - Additional value attributes. Defaults to {}.
+     * @param {string} [id] - An id. Defaults to a random string.
      */
     addOption(value, label, attrs = {}, id = getRandomComponentId()) {
         if (_.isNil(label))
@@ -592,6 +593,7 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * Get the request headers for this select dropdown.
+     * @returns {*} - Returns the request headers for this select dropdown.
      */
     get requestHeaders() {
         // Create the headers object.
@@ -840,9 +842,7 @@ export default class SelectComponent extends ListComponent {
         }
         const tabIndex = input.tabIndex;
         this.addPlaceholder();
-        if (this.i18next) {
-            input.setAttribute('dir', this.i18next.dir());
-        }
+        input.setAttribute('dir', this.i18next.dir());
         if (this.choices?.containerOuter?.element?.parentNode) {
             this.choices.destroy();
         }
@@ -860,7 +860,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -1068,10 +1068,6 @@ export default class SelectComponent extends ListComponent {
     get visible() {
         return super.visible;
     }
-    /**
-     * @param {*} value
-     * @param {Array} items
-     */
     addCurrentChoices(values, items, keyValue) {
         if (!values) {
             return false;
@@ -1220,10 +1216,9 @@ export default class SelectComponent extends ListComponent {
         }
     }
     /**
-     * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
      */
     normalizeValue(value) {
         if (this.component.multiple && Array.isArray(value)) {
@@ -1418,7 +1413,8 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * Performs required transformations on the initial value to use in selectOptions
-     * @param {*} value
+     * @param {*} value - The value to transform.
+     * @returns {*} - Returns the options value.
      */
     getOptionValue(value) {
         return _.isObject(value) && this.isEntireObjectDisplay()
@@ -1433,7 +1429,7 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * If component has static values (values, json) or custom values, returns an array of them
-     * @returns {Array<*>|undefined}
+     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.
      */
     getOptionsValues() {
         let rawItems = [];
@@ -1473,8 +1469,7 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * Check if a component is eligible for multiple validation
-     *
-     * @return {boolean}
+     * @returns {boolean} - Returns FALSE for select components.
      */
     validateMultiple() {
         // Select component will contain one input when flagged as multiple.
@@ -1482,7 +1477,7 @@ export default class SelectComponent extends ListComponent {
     }
     /**
      * Output this select dropdown as a string value.
-     * @return {*}
+     * @returns {*}
      */
     isBooleanOrNumber(value) {
         return typeof value === 'number' || typeof value === 'boolean';
@@ -1495,6 +1490,10 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {
@@ -1546,7 +1545,7 @@ export default class SelectComponent extends ListComponent {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? unescapeHTML(itemTemplate)
+                ? removeHTML(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {
@@ -1570,6 +1569,7 @@ export default class SelectComponent extends ListComponent {
             : '-';
     }
     detach() {
+        super.detach();
         this.off('blur');
         if (this.choices) {
             if (this.choices.containerOuter?.element?.parentNode) {
@@ -1577,7 +1577,6 @@ export default class SelectComponent extends ListComponent {
             }
             this.choices = null;
         }
-        super.detach();
     }
     focus() {
         if (this.focusableElement) {

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

@@ -1,14 +1,28 @@
 import _ from 'lodash';
 import { eachComponent } from '../../../utils/utils';
-const calculateSelectData = (context) => {
+const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
-    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === instance.getValue());
+    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === defaultValue);
     const options = { data: {}, noeval: true };
     instance.interpolate(data.template, {
         item: rawDefaultValue,
     }, options);
     return options.data.item;
 };
+const calculateSelectData = (context) => {
+    const { instance } = context;
+    const defaultValue = instance.getValue();
+    if (instance.component.multiple) {
+        const multiSelectData = {};
+        (defaultValue ?? []).forEach((defaultValueItem) => {
+            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);
+        });
+        return multiSelectData;
+    }
+    else {
+        return calculateSingleSelectData(context, defaultValue);
+    }
+};
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {

package/lib/mjs/components/select/fixtures/comp22.js

@@ -6,7 +6,7 @@ export default {
     display: 'form',
     components: [{
             label: 'Select',
-            widget: 'choicesjs',
+            widget: 'html5',
             tableView: true,
             dataSrc: 'url',
             data: {

package/lib/mjs/components/select/fixtures/comp23.d.ts

@@ -0,0 +1,58 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        multiple: boolean;
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string[];
+        selectValues: string;
+        disableLimit: boolean;
+        noRefreshOnScroll: boolean;
+        selectData: {
+            value1: {
+                label: string;
+            };
+            value3: {
+                label: string;
+            };
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        multiple?: undefined;
+        valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        defaultValue?: undefined;
+        selectValues?: undefined;
+        disableLimit?: undefined;
+        noRefreshOnScroll?: undefined;
+        selectData?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp23.js

@@ -0,0 +1,47 @@
+export default {
+    title: 'FIO-8281',
+    name: 'fio8281',
+    path: 'fio8281',
+    type: 'form',
+    display: 'form',
+    components: [{
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'url',
+            data: {
+                url: 'https://fake_url.com',
+                headers: [
+                    {
+                        key: '',
+                        value: ''
+                    },
+                ],
+            },
+            multiple: true,
+            valueProperty: 'value',
+            validateWhenHidden: false,
+            key: 'select',
+            type: 'select',
+            input: true,
+            defaultValue: ['value1', 'value3'],
+            selectValues: 'data',
+            disableLimit: false,
+            noRefreshOnScroll: false,
+            selectData: {
+                value1: {
+                    label: 'Label 1',
+                },
+                value3: {
+                    label: 'Label 3',
+                },
+            },
+        }, {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        }]
+};

package/lib/mjs/components/select/fixtures/comp24.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp24.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/select/fixtures/index.d.ts

@@ -19,5 +19,7 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+import comp24 from './comp24';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };
 export { multiSelect, multiSelectOptions } from "./comp3";

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

@@ -20,4 +20,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+import comp24 from './comp24';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -9,13 +9,6 @@ export default class SelectBoxesComponent extends RadioComponent {
                 custom: string;
             };
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): {
@@ -27,22 +20,14 @@ export default class SelectBoxesComponent extends RadioComponent {
                 custom: string;
             };
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     get emptyValue(): any;
     /**
      * Only empty if the values are all false.
-     *
-     * @param value
-     * @return {boolean}
+     * @param {any} value - The value to check if empty.
+     * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
     setInputsDisabled(value: any, onlyUnchecked: any): void;

package/lib/mjs/components/selectboxes/SelectBoxes.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/mjs/components/selectboxes/SelectBoxes.form.js

@@ -1,5 +1,10 @@
 import radioEditForm from '../radio/Radio.form';
 import SelectBoxesEditValidation from './editForm/SelectBoxes.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return radioEditForm([
         {

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -79,9 +79,8 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
     /**
      * Only empty if the values are all false.
-     *
-     * @param value
-     * @return {boolean}
+     * @param {any} value - The value to check if empty.
+     * @returns {boolean} - If the value is empty.
      */
     isEmpty(value = this.dataValue) {
         let empty = true;
@@ -105,9 +104,8 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
     /**
      * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * @param {any} value - The value to normalize.
+     * @returns {*} - The normalized value
      */
     normalizeValue(value) {
         value = value || {};
@@ -140,9 +138,9 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
     /**
      * Set the value of this component.
-     *
-     * @param value
-     * @param flags
+     * @param {any} value - The value to set.
+     * @param {any} flags - Flags to apply to this update.
+     * @returns {boolean} - If the value has changed.
      */
     setValue(value, flags = {}) {
         const changed = this.updateValue(value, flags);
@@ -162,11 +160,14 @@ export default class SelectBoxesComponent extends RadioComponent {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return _(value).pickBy((val) => val).keys().join(', ');
         }
         return _(this.component.values || [])