@formio/js 5.0.0-rc.36 → 5.0.0-rc.38

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

@@ -3,7 +3,7 @@ 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 } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -61,7 +61,19 @@ export default class SelectComponent extends ListComponent {
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
-                return { ...classComp, type: 'select' };
+                const valueComp = { ...classComp, type: 'select' };
+                if (isSelectResourceWithObjectValue(classComp)) {
+                    valueComp.reference = false;
+                    valueComp.onSetItems = `
+            var templateKeys = utils.getItemTemplateKeys(component.template) || [];
+            items = _.map(items || [], i => {
+              var item = {};
+              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));
+              return item;
+            })
+          `;
+                }
+                return valueComp;
             }
         };
     }
@@ -120,6 +132,7 @@ export default class SelectComponent extends ListComponent {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
+        this.shouldPositionDropdown = this.hasDataGridAncestor();
         if (this.isHtmlRenderMode()) {
             this.activate();
         }
@@ -851,6 +864,11 @@ export default class SelectComponent extends ListComponent {
                 });
             }
         }
+        if (window && this.choices && this.shouldPositionDropdown) {
+            this.addEventListener(window.document, 'scroll', () => {
+                this.positionDropdown(true);
+            }, false, true);
+        }
         this.focusableElement.setAttribute('tabIndex', tabIndex);
         // If a search field is provided, then add an event listener to update items on search.
         if (this.component.searchField) {
@@ -880,7 +898,10 @@ export default class SelectComponent extends ListComponent {
             const updateComponent = (evt) => {
                 this.triggerUpdate(evt.detail.value);
             };
-            this.addEventListener(input, 'search', _.debounce(updateComponent, debounceTimeout));
+            this.addEventListener(input, 'search', _.debounce((e) => {
+                updateComponent(e);
+                this.positionDropdown();
+            }, debounceTimeout));
             this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());
             this.addEventListener(input, 'hideDropdown', () => {
                 if (this.choices && this.choices.input && this.choices.input.element) {
@@ -889,7 +910,15 @@ export default class SelectComponent extends ListComponent {
                 this.updateItems(null, true);
             });
         }
-        this.addEventListener(input, 'showDropdown', () => this.update());
+        this.addEventListener(input, 'showDropdown', () => {
+            this.update();
+            this.positionDropdown();
+        });
+        if (this.shouldPositionDropdown) {
+            this.addEventListener(input, 'highlightChoice', () => {
+                this.positionDropdown();
+            });
+        }
         if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
             this.addPlaceholderItem(choicesOptions.placeholderValue);
             this.addEventListener(input, 'removeItem', () => {
@@ -926,6 +955,44 @@ export default class SelectComponent extends ListComponent {
         this.triggerUpdate();
         return superAttach;
     }
+    setDropdownPosition() {
+        const dropdown = this.choices?.dropdown?.element;
+        const container = this.choices?.containerOuter?.element;
+        if (!dropdown || !container) {
+            return;
+        }
+        const containerPosition = container.getBoundingClientRect();
+        const isFlipped = container.classList.contains('is-flipped');
+        _.assign(dropdown.style, {
+            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,
+            left: `${containerPosition.left}px`,
+            width: `${containerPosition.width}px`,
+            position: 'fixed',
+            bottom: 'unset',
+            right: 'unset',
+        });
+    }
+    hasDataGridAncestor(comp) {
+        comp = comp || this;
+        if (comp.inDataGrid || comp.type === 'datagrid') {
+            return true;
+        }
+        else if (comp.parent) {
+            return this.hasDataGridAncestor(comp.parent);
+        }
+        else {
+            return false;
+        }
+    }
+    positionDropdown(scroll) {
+        if (!this.shouldPositionDropdown || !this.choices || (!this.choices.dropdown?.isActive && scroll)) {
+            return;
+        }
+        this.setDropdownPosition();
+        this.itemsLoaded.then(() => {
+            this.setDropdownPosition();
+        });
+    }
     get isLoadingAvailable() {
         return !this.isScrollLoading && this.additionalResourcesAvailable;
     }
@@ -1043,10 +1110,10 @@ export default class SelectComponent extends ListComponent {
         }
         return added;
     }
-    getValueAsString(data) {
+    getValueAsString(data, options) {
         return (this.component.multiple && Array.isArray(data))
-            ? data.map(this.asString.bind(this)).join(', ')
-            : this.asString(data);
+            ? data.map((v) => this.asString(v, options)).join(', ')
+            : this.asString(data, options);
     }
     getValue() {
         // If the widget isn't active.
@@ -1398,7 +1465,7 @@ export default class SelectComponent extends ListComponent {
         }
         return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));
     }
-    asString(value) {
+    asString(value, options = {}) {
         value = value ?? this.getValue();
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
@@ -1448,9 +1515,15 @@ export default class SelectComponent extends ListComponent {
         if (_.isString(value)) {
             return value;
         }
+        const getTemplateValue = (v) => {
+            const itemTemplate = this.itemTemplate(v);
+            return options.csv && itemTemplate
+                ? unescapeHTML(itemTemplate)
+                : itemTemplate;
+        };
         if (Array.isArray(value)) {
             const items = [];
-            value.forEach(item => items.push(this.itemTemplate(item)));
+            value.forEach(item => items.push(getTemplateValue(item)));
             if (this.component.dataSrc === 'resource' && items.length > 0) {
                 return items.join(', ');
             }
@@ -1465,7 +1538,7 @@ export default class SelectComponent extends ListComponent {
             return JSON.stringify(value);
         }
         return !_.isNil(value)
-            ? this.itemTemplate(value)
+            ? getTemplateValue(value)
             : '-';
     }
     detach() {

package/lib/mjs/components/survey/Survey.js

@@ -148,6 +148,16 @@ export default class SurveyComponent extends Field {
             result += '</tbody></table>';
             return result;
         }
+        if (_.isPlainObject(value)) {
+            const { values = [], questions = [] } = this.component;
+            return _.isEmpty(value)
+                ? ''
+                : _.map(value, (v, q) => {
+                    const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v);
+                    const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q);
+                    return `${questionLabel}: ${valueLabel}`;
+                }).join('; ');
+        }
         return super.getValueAsString(value, options);
     }
 }

package/lib/mjs/utils/conditionOperators/IsEqualTo.js

@@ -1,5 +1,6 @@
 import ConditionOperator from './ConditionOperator';
 import _ from 'lodash';
+import { getItemTemplateKeys, isSelectResourceWithObjectValue } from '../utils';
 export default class IsEqualTo extends ConditionOperator {
     static get operatorKey() {
         return 'isEqual';
@@ -7,7 +8,7 @@ export default class IsEqualTo extends ConditionOperator {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue }) {
+    execute({ value, comparedValue, instance, conditionComponentPath }) {
         if (value && comparedValue && typeof value !== typeof comparedValue && _.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -15,6 +16,22 @@ export default class IsEqualTo extends ConditionOperator {
             // eslint-disable-next-line no-empty
             catch (e) { }
         }
+        if (instance && instance.root) {
+            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            if (conditionTriggerComponent
+                && isSelectResourceWithObjectValue(conditionTriggerComponent.component)
+                && conditionTriggerComponent.component?.template) {
+                if (!value || !_.isPlainObject(value)) {
+                    return false;
+                }
+                const { template, valueProperty } = conditionTriggerComponent.component;
+                if (valueProperty === 'data') {
+                    value = { data: value };
+                    comparedValue = { data: comparedValue };
+                }
+                return _.every(getItemTemplateKeys(template) || [], k => _.isEqual(_.get(value, k), _.get(comparedValue, k)));
+            }
+        }
         //special check for select boxes
         if (_.isObject(value) && comparedValue && _.isString(comparedValue)) {
             return value[comparedValue];

package/lib/mjs/utils/conditionOperators/IsNotEqualTo.js

@@ -1,13 +1,12 @@
-import ConditionOperator from './ConditionOperator';
-import _ from 'lodash';
-export default class IsNotEqualTo extends ConditionOperator {
+import IsEqualTo from './IsEqualTo';
+export default class IsNotEqualTo extends IsEqualTo {
     static get operatorKey() {
         return 'isNotEqual';
     }
     static get displayedName() {
         return 'Is Not Equal To';
     }
-    execute({ value, comparedValue }) {
-        return !_.isEqual(value, comparedValue);
+    execute(options) {
+        return !super.execute(options);
     }
 }

package/lib/mjs/utils/utils.js

@@ -394,6 +394,21 @@ export function unescapeHTML(str) {
     const doc = new window.DOMParser().parseFromString(str, 'text/html');
     return doc.documentElement.textContent;
 }
+/**
+ * Escape HTML characters like <, >, & and etc.
+ * @param str
+ * @returns {string}
+ */
+export function escapeHTML(html) {
+    if (html) {
+        return html.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    return '';
+}
 /**
  * Make HTML element from string
  * @param str
@@ -1407,3 +1422,23 @@ export const interpolateErrors = (component, errors, interpolateFn) => {
         return { ...error, message: unescapeHTML(interpolateFn(toInterpolate, context)), context: { ...context } };
     });
 };
+export function getItemTemplateKeys(template) {
+    const templateKeys = [];
+    if (!template) {
+        return templateKeys;
+    }
+    const keys = template.match(/({{\s*(.*?)\s*}})/g);
+    if (keys) {
+        keys.forEach((key) => {
+            const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
+            if (propKey && propKey.length > 1) {
+                templateKeys.push(propKey[1]);
+            }
+        });
+    }
+    return templateKeys;
+}
+export function isSelectResourceWithObjectValue(comp = {}) {
+    const { reference, dataSrc, valueProperty } = comp;
+    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.36",
+  "version": "5.0.0-rc.38",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -86,7 +86,7 @@
   "dependencies": {
     "@formio/bootstrap": "^3.0.0-rc.20",
     "@formio/choices.js": "^10.2.0",
-    "@formio/core": "^2.0.0-rc.2",
+    "@formio/core": "^2.0.0-rc.6",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",

package/types/formio.d.ts

@@ -159,6 +159,10 @@ export declare class Formio {
      * Stores all of the libraries lazy loaded with ```Formio.requireLibrary``` method.
      */
     static libraries: any;
+    /**
+     * The Library license for this application.
+     */
+    static license: string;
     /**
      * A direct interface to the Form.io fetch polyfill.
      */