@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

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

@@ -9,29 +9,51 @@ 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;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     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;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    set itemsLoaded(promise: any);
-    get itemsLoaded(): any;
     itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
@@ -41,24 +63,13 @@ export default class SelectComponent extends ListComponent {
     defaultDownloadedResources: any;
     activated: boolean | undefined;
     shouldPositionDropdown: any;
-    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 +79,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 +94,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 +112,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,38 +128,37 @@ 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;
+    undoValueTyping(value: any): any;
     setValue(value: any, flags?: {}): boolean;
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;
     setChoicesValue(value: any, hasPreviousValue: any, flags?: {}): void;
-    _itemsLoaded: any;
     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/cjs/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/cjs/components/select/Select.form.js

@@ -7,6 +7,11 @@ const ListComponent_form_1 = __importDefault(require("../_classes/list/ListCompo
 const Select_edit_data_1 = __importDefault(require("./editForm/Select.edit.data"));
 const Select_edit_display_1 = __importDefault(require("./editForm/Select.edit.display"));
 const Select_edit_validation_1 = __importDefault(require("./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.
+ */
 function default_1(...extend) {
     return (0, ListComponent_form_1.default)([
         {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const Form_1 = __importDefault(require("../../Form"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -63,6 +62,7 @@ class SelectComponent extends ListComponent_1.default {
         return SelectComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
+        const numberType = () => ({ type: 'number' });
         return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
                 const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });
                 if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {
@@ -77,6 +77,15 @@ class SelectComponent extends ListComponent_1.default {
           `;
                 }
                 return valueComp;
+            }, dataTypeOperators: {
+                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
+            }, dataTypeValueComponents: {
+                number: {
+                    lessThan: numberType,
+                    greaterThan: numberType,
+                    lessThanOrEqual: numberType,
+                    greaterThanOrEqual: numberType,
+                },
             } });
     }
     static savedValueTypes(schema) {
@@ -141,16 +150,6 @@ class SelectComponent extends ListComponent_1.default {
         // Get the template keys for this select component.
         this.getTemplateKeys();
     }
-    get dataReady() {
-        // If the root submission has been set, and we are still not attached, then assume
-        // that our data is ready.
-        if (this.root &&
-            this.root.submissionSet &&
-            !this.attached) {
-            return Promise.resolve();
-        }
-        return this.itemsLoaded;
-    }
     get defaultSchema() {
         return SelectComponent.schema();
     }
@@ -228,10 +227,9 @@ class SelectComponent extends ListComponent_1.default {
     }
     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() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)
         };
     }
     itemTemplate(data, value) {
@@ -248,7 +246,11 @@ class SelectComponent extends ListComponent_1.default {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
+        // Inside DataTable component won't have dataValue set
+        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)
+            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
+            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
+        if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
@@ -287,9 +289,10 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * 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 = (0, utils_1.getRandomComponentId)()) {
         if (lodash_1.default.isNil(label))
@@ -526,13 +529,13 @@ class SelectComponent extends ListComponent_1.default {
             skip,
         };
         // Allow for url interpolation.
-        url = this.interpolate(url, {
+        url = this.sanitize(this.interpolate(url, {
             formioBase: Formio_1.Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        });
+        }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -593,6 +596,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Get the request headers for this select dropdown.
+     * @returns {*} - Returns the request headers for this select dropdown.
      */
     get requestHeaders() {
         // Create the headers object.
@@ -832,7 +836,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input_1.default.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());
@@ -1042,10 +1046,6 @@ class SelectComponent extends ListComponent_1.default {
     get visible() {
         return super.visible;
     }
-    /**
-     * @param {*} value
-     * @param {Array} items
-     */
     addCurrentChoices(values, items, keyValue) {
         if (!values) {
             return false;
@@ -1194,10 +1194,9 @@ class SelectComponent extends ListComponent_1.default {
         }
     }
     /**
-     * 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)) {
@@ -1218,7 +1217,7 @@ class SelectComponent extends ListComponent_1.default {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
         const shouldSaveData = !valueIsObject || this.component.reference;
-        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
+        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1253,6 +1252,23 @@ class SelectComponent extends ListComponent_1.default {
         }
         return changed;
     }
+    undoValueTyping(value) {
+        let untypedValue = value;
+        if (this.component.multiple && Array.isArray(value)) {
+            untypedValue = value.map(v => {
+                if (typeof v === 'boolean' || typeof v === 'number') {
+                    return v.toString();
+                }
+                return v;
+            });
+        }
+        else {
+            if (typeof value === 'boolean' || typeof value === 'number') {
+                untypedValue = value.toString();
+            }
+        }
+        return untypedValue;
+    }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
         const changed = this.updateValue(value, flags);
@@ -1263,19 +1279,7 @@ class SelectComponent extends ListComponent_1.default {
         const hasPreviousValue = !this.isEmpty(previousValue);
         const hasValue = !this.isEmpty(value);
         // Undo typing when searching to set the value.
-        if (this.component.multiple && Array.isArray(value)) {
-            value = value.map(value => {
-                if (typeof value === 'boolean' || typeof value === 'number') {
-                    return value.toString();
-                }
-                return value;
-            });
-        }
-        else {
-            if (typeof value === 'boolean' || typeof value === 'number') {
-                value = value.toString();
-            }
-        }
+        value = this.undoValueTyping(value);
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.itemsLoaded.then(() => {
                 this.redraw();
@@ -1359,12 +1363,6 @@ class SelectComponent extends ListComponent_1.default {
             }
         }
     }
-    get itemsLoaded() {
-        return this._itemsLoaded || Promise.resolve();
-    }
-    set itemsLoaded(promise) {
-        this._itemsLoaded = promise;
-    }
     validateValueAvailability(setting, value) {
         if (!(0, utils_1.boolValue)(setting) || !value) {
             return true;
@@ -1393,7 +1391,8 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * 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 lodash_1.default.isObject(value) && this.isEntireObjectDisplay()
@@ -1408,7 +1407,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * 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 = [];
@@ -1422,6 +1421,9 @@ class SelectComponent extends ListComponent_1.default {
             case 'custom':
                 rawItems = this.getCustomItems();
                 break;
+            case 'url':
+                rawItems = this.selectItems;
+                break;
         }
         if (typeof rawItems === 'string') {
             try {
@@ -1448,8 +1450,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * 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.
@@ -1457,7 +1458,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Output this select dropdown as a string value.
-     * @return {*}
+     * @returns {*}
      */
     isBooleanOrNumber(value) {
         return typeof value === 'number' || typeof value === 'boolean';
@@ -1471,9 +1472,13 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview && this.selectData) {
-            const { label } = this.selectValueAndLabel(value);
-            return label;
+        if (options.modalPreview || this.inDataTable) {
+            if (this.inDataTable) {
+                value = this.undoValueTyping(value);
+            }
+            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;
+            const template = this.itemTemplate(templateValue, value, options);
+            return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
@@ -1481,7 +1486,7 @@ class SelectComponent extends ListComponent_1.default {
                 if (Array.isArray(data)) {
                     data.forEach((item) => item[valueProperty] = item[valueProperty].toString());
                 }
-                else {
+                else if (lodash_1.default.isObject(data)) {
                     data[valueProperty] = data[valueProperty].toString();
                 }
                 return data;
@@ -1490,11 +1495,7 @@ class SelectComponent extends ListComponent_1.default {
                 data = data.toString();
             }
             if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {
-                data = data.map(item => {
-                    if (this.isBooleanOrNumber(item)) {
-                        item = item.toString();
-                    }
-                });
+                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);
             }
             return data;
         };
@@ -1516,7 +1517,7 @@ class SelectComponent extends ListComponent_1.default {
             };
             value = (this.component.multiple && Array.isArray(value))
                 ? lodash_1.default.filter(items, (item) => value.includes(item.value))
-                : valueProperty
+                : (valueProperty && items)
                     ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }
                     : value;
         }
@@ -1561,8 +1562,8 @@ class SelectComponent extends ListComponent_1.default {
         super.detach();
     }
     focus() {
+        super.focus.call(this);
         if (this.focusableElement) {
-            super.focus.call(this);
             this.focusableElement.focus();
         }
     }

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts

@@ -1102,13 +1102,47 @@ declare const _default: ({
     conditional: {
         json: {
             and: ({
-                '!==': ({
+                var: string;
+                '==='?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
+            } | {
+                '===': (boolean | {
                     var: string;
-                } | null)[];
+                })[];
+                var?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
             } | {
                 '!==': (string | {
                     var: string;
                 })[];
+                var?: undefined;
+                '==='?: undefined;
+                or?: undefined;
+            } | {
+                or: ({
+                    '===': (string | {
+                        var: string;
+                    })[];
+                    and?: undefined;
+                } | {
+                    and: ({
+                        '===': (string | {
+                            var: string;
+                        })[];
+                        '!=='?: undefined;
+                    } | {
+                        '!==': (string | {
+                            var: string;
+                        })[];
+                        '==='?: undefined;
+                    })[];
+                    '==='?: undefined;
+                })[];
+                var?: undefined;
+                '==='?: undefined;
+                '!=='?: undefined;
             })[];
             '==='?: undefined;
             in?: undefined;

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

@@ -31,18 +31,22 @@ const calculateSelectData = (context) => {
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {
-        var _a;
+        var _a, _b;
         const { instance, data } = context;
-        const selectDataComponent = instance === null || instance === void 0 ? void 0 : instance.root.getComponent('selectData');
+        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');
+        // clear selectData if conditions are not met or clearing default value
+        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {
+            selectDataComponent.setValue(null, { resetValue: true });
+            return;
+        }
         // nothing can set if don't have downloaded resources
-        if (!selectDataComponent || !instance.getValue() || !((_a = instance.downloadedResources) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.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);
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;
+        selectDataComponent.setValue(newValue, { resetValue: newValue === null });
     }, 0);
 };
 exports.default = [
@@ -684,10 +688,25 @@ exports.default = [
     {
         key: 'selectData',
         conditional: {
-            json: { 'and': [
-                    { '!==': [{ var: 'data.valueProperty' }, null] },
-                    { '!==': [{ var: 'data.valueProperty' }, ''] },
-                ] },
+            json: {
+                and: [
+                    { var: 'data.valueProperty' },
+                    { '===': [{ var: 'data.lazyLoad' }, true] },
+                    { '!==': [{ var: 'data.widget' }, 'html5'] },
+                    {
+                        or: [
+                            { '===': [{ var: 'data.dataSrc' }, 'url'] },
+                            {
+                                and: [
+                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                                    // 'data' means entire object from resource will be used
+                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },
+                                ],
+                            }
+                        ]
+                    }
+                ]
+            },
         },
     },
     {

package/lib/cjs/components/select/editForm/Select.edit.validation.js

@@ -26,7 +26,8 @@ exports.default = [
                     [
                         'values',
                         'json',
-                        'custom'
+                        'custom',
+                        'url'
                     ],
                 ],
             },