@formio/js 5.0.0-rc.10

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -0,0 +1,177 @@
+import _ from 'lodash';
+import { fastCloneDeep } from '../../../utils/utils';
+export default class ComponentModal {
+    static render(component, data, topLevel) {
+        const children = component.renderTemplate('component', data, topLevel);
+        return component.renderTemplate('componentModal', {
+            ...data,
+            children,
+        });
+    }
+    constructor(component, element, isOpened, currentValue) {
+        this.isOpened = isOpened;
+        this.component = component;
+        this.element = element;
+        this.currentValue = fastCloneDeep(currentValue ?? this.component.getValue());
+        this.dataLoaded = false;
+        this.init();
+    }
+    get refs() {
+        return this.component.refs;
+    }
+    init() {
+        this.openModalListener = this.openModalHandler.bind(this);
+        this.showDialogListener = (event) => {
+            if (this.isValueChanged() && !this.component.disabled) {
+                this.showDialog();
+            }
+            else {
+                this.closeModalHandler(event);
+            }
+        };
+        this.closeModalListener = this.closeModalHandler.bind(this);
+        this.saveModalListener = this.saveModalValueHandler.bind(this);
+        this.closeDialogListener = this.closeDialog.bind(this);
+        this.saveDialogListener = this.saveDialog.bind(this);
+        this.loadRefs();
+    }
+    setValue(value) {
+        if (this.dataLoaded && this.currentValue === value) {
+            return;
+        }
+        this.currentValue = fastCloneDeep(value);
+        this.dataLoaded = true;
+        this.updateView();
+    }
+    setOpenModalElement(template) {
+        if (this.component?.visible) {
+            this.openModalTemplate = template;
+            this.component.setContent(this.refs.openModalWrapper, template);
+            this.loadRefs();
+            this.setEventListeners();
+            if (this.isOpened) {
+                this.refs.modalWrapper.classList.add('formio-dialog-disabled-animation');
+                this.openModal();
+            }
+        }
+    }
+    get templateRefs() {
+        return {
+            modalOverlay: 'single',
+            modalContents: 'single',
+            modalClose: 'single',
+            openModalWrapper: 'single',
+            openModal: 'single',
+            modalSave: 'single',
+            modalWrapper: 'single',
+        };
+    }
+    loadRefs() {
+        this.component.loadRefs(this.element, this.templateRefs);
+    }
+    removeEventListeners() {
+        this.component.removeEventListener(this.refs.openModal, 'click', this.openModalListener);
+        this.component.removeEventListener(this.refs.modalOverlay, 'click', this.refs.modalSave ? this.showDialogListener : this.saveModalListener);
+        this.component.removeEventListener(this.refs.modalClose, 'click', this.showDialogListener);
+        this.component.removeEventListener(this.refs.modalSave, 'click', this.saveModalListener);
+    }
+    setEventListeners() {
+        this.removeEventListeners();
+        this.component.addEventListener(this.refs.openModal, 'click', this.openModalListener);
+        this.component.addEventListener(this.refs.modalOverlay, 'click', this.refs.modalSave ? this.showDialogListener : this.saveModalListener);
+        this.component.addEventListener(this.refs.modalClose, 'click', this.showDialogListener);
+        this.component.addEventListener(this.refs.modalSave, 'click', this.saveModalListener);
+    }
+    isValueChanged() {
+        let componentValue = this.component.getValue();
+        let currentValue = this.currentValue;
+        //excluding metadata comparison for components that have it in dataValue (for ex. nested forms)
+        if (componentValue && componentValue.data && componentValue.metadata) {
+            componentValue = this.component.getValue().data;
+            currentValue = this.currentValue.data;
+        }
+        return !_.isEqual(fastCloneDeep(componentValue), currentValue);
+    }
+    setOpenEventListener() {
+        this.component.removeEventListener(this.refs.openModal, 'click', this.openModalListener);
+        this.component.loadRefs(this.refs.openModalWrapper ?? this.element, {
+            'openModal': 'single',
+        });
+        this.component.addEventListener(this.refs.openModal, 'click', this.openModalListener);
+    }
+    openModalHandler(event) {
+        event.preventDefault();
+        this.openModal();
+    }
+    positionOverElement() {
+        // Position the modal just over the element on the page.
+        const elementOffset = this.element.getBoundingClientRect().top;
+        const modalHeight = this.refs.modalContents.getBoundingClientRect().height;
+        let modalTop = elementOffset - modalHeight - 10;
+        modalTop = modalTop > 0 ? modalTop : 10;
+        this.refs.modalWrapper.style.paddingTop = `${modalTop}px`;
+    }
+    openModal() {
+        this.isOpened = true;
+        this.refs.modalWrapper.classList.remove('component-rendering-hidden');
+        if (this.component.component.type === 'signature') {
+            // Position signature modals just above the signature button.
+            this.positionOverElement();
+        }
+    }
+    updateView() {
+        const template = _.isEqual(this.currentValue, this.component.defaultValue)
+            ? this.openModalTemplate
+            : this.component.getModalPreviewTemplate();
+        this.component.setContent(this.refs.openModalWrapper, template);
+        this.setOpenEventListener();
+    }
+    closeModal() {
+        this.refs.modalWrapper.classList.remove('formio-dialog-disabled-animation');
+        this.refs.modalWrapper.classList.add('component-rendering-hidden');
+        this.isOpened = false;
+        this.updateView();
+    }
+    closeModalHandler(event) {
+        event.preventDefault();
+        if (!this.component.disabled) {
+            this.component.setValue(_.cloneDeep(this.currentValue), { resetValue: true });
+        }
+        this.closeModal();
+    }
+    showDialog() {
+        this.dialogElement = this.component.ce('div');
+        const dialogContent = `
+      <h3 ref="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
+      <div style="display:flex; justify-content: flex-end;">
+        <button ref="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
+        <button ref="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
+      </div>
+    `;
+        this.dialogElement.innerHTML = dialogContent;
+        this.dialogElement.refs = {};
+        this.component.loadRefs.call(this.dialogElement, this.dialogElement, {
+            dialogHeader: 'single',
+            dialogCancelButton: 'single',
+            dialogYesButton: 'single',
+        });
+        this.dialog = this.component.createModal(this.dialogElement);
+        this.component.addEventListener(this.dialogElement.refs.dialogYesButton, 'click', this.saveDialogListener);
+        this.component.addEventListener(this.dialogElement.refs.dialogCancelButton, 'click', this.closeDialogListener);
+    }
+    closeDialog(event) {
+        event.preventDefault();
+        this.dialog.close();
+        this.component.removeEventListener(this.dialogElement.refs.dialogYesButton, 'click', this.saveDialogListener);
+        this.component.removeEventListener(this.dialogElement.refs.dialogCancelButton, 'click', this.closeDialogListener);
+    }
+    saveDialog(event) {
+        this.closeDialog(event);
+        this.closeModalHandler(event);
+    }
+    saveModalValueHandler(event) {
+        event.preventDefault();
+        this.currentValue = fastCloneDeep(this.component.dataValue ?? this.component.getValue());
+        this.closeModal();
+    }
+}

package/lib/mjs/components/_classes/field/Field.d.ts

@@ -0,0 +1,4 @@
+export default class Field extends Component {
+    render(element: any): any;
+}
+import Component from '../component/Component';

package/lib/mjs/components/_classes/field/Field.js

@@ -0,0 +1,21 @@
+import Component from '../component/Component';
+export default class Field extends Component {
+    render(element) {
+        if (this.noField) {
+            return super.render(element);
+        }
+        else if (this.isAdvancedLabel || this.options.condensedMode) {
+            return super.render(this.renderTemplate('field', {
+                ...this.getLabelInfo(this.options.condensedMode),
+                labelMarkup: this.renderTemplate('label'),
+                element: element
+            }, 'align'));
+        }
+        else {
+            return super.render(this.renderTemplate('field', {
+                labelMarkup: this.renderTemplate('label'),
+                element: element,
+            }));
+        }
+    }
+}

package/lib/mjs/components/_classes/input/Input.d.ts

@@ -0,0 +1,42 @@
+export default class Input extends Multivalue {
+    constructor(component: any, options: any, data: any);
+    triggerUpdateValueAt: any;
+    get inputInfo(): {
+        id: any;
+        type: string;
+        changeEvent: string;
+        content: string;
+        attr: {
+            name: any;
+            type: any;
+            class: string;
+            lang: any;
+        };
+    };
+    get autocompleteDisableAttrName(): string;
+    get maskOptions(): any;
+    get isMultipleMasksField(): any;
+    getMaskByName(maskName: any): any;
+    setInputMask(input: any, inputMask: any): void;
+    getMaskOptions(): any;
+    getWordCount(value: any): any;
+    get remainingWords(): number;
+    get prefix(): any;
+    get suffix(): any;
+    renderElement(value: any, index: any): any;
+    setCounter(type: any, element: any, count: any, max: any): void;
+    updateValueAt(value: any, flags: any, index: any): void;
+    getValueAt(index: any): any;
+    updateValue(value: any, flags: any, index: any): boolean;
+    parseValue(value: any): any;
+    formatValue(value: any): any;
+    getWidget(index: any): any;
+    attachElement(element: any, index: any): any;
+    /**
+     * Creates an instance of a widget for this component.
+     *
+     * @return {null}
+     */
+    createWidget(index: any): null;
+}
+import Multivalue from '../multivalue/Multivalue';

package/lib/mjs/components/_classes/input/Input.js

@@ -0,0 +1,297 @@
+import Multivalue from '../multivalue/Multivalue';
+import { convertStringToHTMLElement } from '../../../utils/utils';
+import Widgets from '../../../widgets';
+import NativePromise from 'native-promise-only';
+import _ from 'lodash';
+export default class Input extends Multivalue {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.triggerUpdateValueAt = _.debounce(this.updateValueAt.bind(this), 100);
+    }
+    static schema(...extend) {
+        return Multivalue.schema({
+            widget: {
+                type: 'input'
+            }
+        }, ...extend);
+    }
+    get inputInfo() {
+        const attr = {
+            name: this.options.name,
+            type: this.component.inputType || 'text',
+            class: 'form-control',
+            lang: this.options.language
+        };
+        if (this.options.attachMode === 'builder' || this.options.building || _.get(this.root, 'form.settings.disableAutocomplete')) {
+            attr.autocomplete = this.autocompleteDisableAttrName;
+        }
+        if (this.component.inputMode) {
+            attr.inputmode = this.component.inputMode;
+        }
+        if (this.component.placeholder) {
+            attr.placeholder = this.getFormattedAttribute(this.component.placeholder);
+        }
+        if (this.component.tabindex) {
+            attr.tabindex = this.component.tabindex;
+        }
+        if (this.disabled) {
+            attr.disabled = 'disabled';
+        }
+        if (this.component.autocomplete) {
+            attr.autocomplete = this.component.autocomplete;
+        }
+        _.defaults(attr, this.component.attributes);
+        return {
+            id: this.key,
+            type: 'input',
+            changeEvent: 'input',
+            content: '',
+            attr
+        };
+    }
+    get autocompleteDisableAttrName() {
+        return 'off';
+    }
+    get maskOptions() {
+        return _.map(this.component.inputMasks, mask => {
+            return {
+                label: mask.label,
+                value: mask.label
+            };
+        });
+    }
+    get isMultipleMasksField() {
+        return this.component.allowMultipleMasks && !!this.component.inputMasks && !!this.component.inputMasks.length;
+    }
+    getMaskByName(maskName) {
+        const inputMask = _.find(this.component.inputMasks, (inputMask) => {
+            return inputMask.label === maskName;
+        });
+        return inputMask ? inputMask.mask : undefined;
+    }
+    setInputMask(input, inputMask) {
+        const mask = inputMask || this.component.displayMask || this.component.inputMask;
+        return super.setInputMask(input, mask, !this.component.placeholder);
+    }
+    getMaskOptions() {
+        return this.component.inputMasks
+            .map(mask => ({
+            label: mask.label,
+            value: mask.label,
+        }));
+    }
+    getWordCount(value) {
+        return !value ? 0 : value.trim().split(/\s+/).length;
+    }
+    get remainingWords() {
+        const maxWords = _.parseInt(_.get(this.component, 'validate.maxWords'), 10);
+        const wordCount = this.getWordCount(this.dataValue);
+        return maxWords - wordCount;
+    }
+    get prefix() {
+        return this.component.prefix;
+    }
+    get suffix() {
+        if (this.component.widget && this.component.widget.type === 'calendar') {
+            const calendarIcon = this.renderTemplate('icon', {
+                ref: 'icon',
+                // After font-awesome would be updated to v5.x, "clock-o" should be replaced with "clock"
+                className: this.iconClass(this.component.enableDate || this.component.widget.enableDate ? 'calendar' : 'clock-o'),
+                styles: '',
+                content: ''
+            }).trim();
+            if (this.component.prefix !== calendarIcon) {
+                // converting string to HTML markup to render correctly DateTime component in portal.form.io
+                return convertStringToHTMLElement(calendarIcon, '[ref="icon"]');
+            }
+        }
+        return this.component.suffix;
+    }
+    renderElement(value, index) {
+        // Double quotes cause the input value to close so replace them with html quote char.
+        if (value && typeof value === 'string') {
+            value = value.replace(/"/g, '"');
+        }
+        const info = this.inputInfo;
+        info.attr = info.attr || {};
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
+            .replace(/"/g, '"');
+        const valueMask = this.component.inputMask;
+        const displayMask = this.component.displayMask;
+        const hasDifferentDisplayAndSaveFormats = valueMask && displayMask && valueMask !== displayMask;
+        if (this.isMultipleMasksField) {
+            info.attr.class += ' formio-multiple-mask-input';
+        }
+        return this.isMultipleMasksField
+            ? this.renderTemplate('multipleMasksInput', {
+                input: info,
+                value,
+                index,
+                selectOptions: this.getMaskOptions() || [],
+            }, this.isHtmlRenderMode() ? 'html' : null)
+            : this.renderTemplate('input', {
+                prefix: this.prefix,
+                suffix: this.suffix,
+                input: info,
+                value: this.formatValue(this.parseValue(value)),
+                hasValueMaskInput: hasDifferentDisplayAndSaveFormats,
+                index
+            }, this.isHtmlRenderMode() ? 'html' : null);
+    }
+    setCounter(type, element, count, max) {
+        if (max) {
+            const remaining = max - count;
+            if (remaining > 0) {
+                this.removeClass(element, 'text-danger');
+            }
+            else {
+                this.addClass(element, 'text-danger');
+            }
+            this.setContent(element, this.t(`{{ remaining }} ${type} remaining.`, {
+                remaining: remaining
+            }));
+        }
+        else {
+            this.setContent(element, this.t(`{{ count }} ${type}`, {
+                count: count
+            }));
+        }
+    }
+    updateValueAt(value, flags, index) {
+        flags = flags || {};
+        if (_.get(this.component, 'showWordCount', false)) {
+            if (this.refs.wordcount && this.refs.wordcount[index]) {
+                const maxWords = _.parseInt(_.get(this.component, 'validate.maxWords', 0), 10);
+                this.setCounter(this.t('words'), this.refs.wordcount[index], this.getWordCount(value), maxWords);
+            }
+        }
+        if (_.get(this.component, 'showCharCount', false)) {
+            if (this.refs.charcount && this.refs.charcount[index]) {
+                const maxChars = _.parseInt(_.get(this.component, 'validate.maxLength', 0), 10);
+                this.setCounter(this.t('characters'), this.refs.charcount[index], value.length, maxChars);
+            }
+        }
+    }
+    getValueAt(index) {
+        const input = this.performInputMapping(this.refs.input[index]);
+        if (input && input.widget) {
+            return input.widget.getValue();
+        }
+        return input ? input.value : undefined;
+    }
+    updateValue(value, flags, index) {
+        flags = flags || {};
+        const changed = super.updateValue(value, flags);
+        this.triggerUpdateValueAt(this.dataValue, flags, index);
+        return changed;
+    }
+    parseValue(value) {
+        return value;
+    }
+    formatValue(value) {
+        return value;
+    }
+    attach(element) {
+        this.loadRefs(element, {
+            charcount: 'multiple',
+            wordcount: 'multiple',
+            prefix: 'multiple',
+            suffix: 'multiple'
+        });
+        return super.attach(element);
+    }
+    getWidget(index) {
+        index = index || 0;
+        if (this.refs.input && this.refs.input[index]) {
+            return this.refs.input[index].widget;
+        }
+        return null;
+    }
+    attachElement(element, index) {
+        super.attachElement(element, index);
+        if (element.widget) {
+            element.widget.destroy();
+        }
+        // Attach the widget.
+        let promise = NativePromise.resolve();
+        element.widget = this.createWidget(index);
+        if (element.widget) {
+            promise = element.widget.attach(element);
+            if (this.refs.prefix && this.refs.prefix[index]) {
+                element.widget.addPrefix(this.refs.prefix[index]);
+            }
+            if (this.refs.suffix && this.refs.suffix[index]) {
+                element.widget.addSuffix(this.refs.suffix[index]);
+            }
+        }
+        // Add focus and blur events.
+        this.addFocusBlurEvents(element);
+        if (this.options.submitOnEnter) {
+            this.addEventListener(element, 'keypress', (event) => {
+                const key = event.keyCode || event.which;
+                if (key === 13) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.emit('submitButton');
+                }
+            });
+        }
+        return promise;
+    }
+    /**
+     * Creates an instance of a widget for this component.
+     *
+     * @return {null}
+     */
+    createWidget(index) {
+        // Return null if no widget is found.
+        if (!this.component.widget) {
+            return null;
+        }
+        // Get the widget settings.
+        const settings = (typeof this.component.widget === 'string') ? {
+            type: this.component.widget
+        } : this.component.widget;
+        if (this.root?.shadowRoot) {
+            settings.shadowRoot = this.root?.shadowRoot;
+        }
+        // Make sure we have a widget.
+        if (!Widgets.hasOwnProperty(settings.type)) {
+            return null;
+        }
+        // Create the widget.
+        const widget = new Widgets[settings.type](settings, this.component, this, index);
+        widget.on('update', () => this.updateValue(this.getValue(), {
+            modified: true
+        }, index), true);
+        widget.on('redraw', () => this.redraw(), true);
+        return widget;
+    }
+    teardown() {
+        if (this.element && this.element.widget) {
+            this.element.widget.destroy();
+            delete this.element.widget;
+        }
+        if (this.refs && this.refs.input) {
+            for (let i = 0; i <= this.refs.input.length; i++) {
+                const widget = this.getWidget(i);
+                if (widget) {
+                    widget.destroy();
+                }
+            }
+        }
+        super.teardown();
+    }
+    detach() {
+        if (this.refs && this.refs.input) {
+            for (let i = 0; i <= this.refs.input.length; i++) {
+                const widget = this.getWidget(i);
+                if (widget) {
+                    widget.destroy();
+                }
+            }
+        }
+        this.refs.input = [];
+        super.detach();
+    }
+}

package/lib/mjs/components/_classes/list/ListComponent.d.ts

@@ -0,0 +1,14 @@
+export default class ListComponent extends Field {
+    get isSelectURL(): boolean;
+    get requestHeaders(): any;
+    setItems(): void;
+    updateCustomItems(): void;
+    loadItems(): void;
+    getOptionTemplate(data: any, value: any): any;
+    itemTemplate(data: any, value: any): any;
+    handleLoadingError(err: any): void;
+    loading: boolean | undefined;
+    networkError: boolean | undefined;
+    updateItems(searchInput: any, forceUpdate: any): void;
+}
+import Field from '../field/Field';

package/lib/mjs/components/_classes/list/ListComponent.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/mjs/components/_classes/list/ListComponent.form.js

@@ -0,0 +1,10 @@
+import Components from '../../Components';
+import ListEditData from './editForm/ListComponent.edit.data';
+export default function (...extend) {
+    return Components.baseEditForm([
+        {
+            key: 'data',
+            components: ListEditData
+        },
+    ], ...extend);
+}