@formio/js 5.0.0-rc.27 → 5.0.0-rc.27-dev.5543.40bb827

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

@@ -1,177 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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,
-            }));
-        }
-    }
-    // Saves current caret position to restore it after the component is redrawn
-    saveCaretPosition(element, index) {
-        if (this.root?.focusedComponent?.path === this.path) {
-            try {
-                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
-            }
-            catch (e) {
-                if (!(e instanceof DOMException)) {
-                    console.debug(e);
-                }
-            }
-        }
-    }
-}

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

@@ -1,42 +0,0 @@
-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): Promise<void>;
-    /**
-     * 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

@@ -1,296 +0,0 @@
-import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/utils';
-import Widgets from '../../../widgets';
-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 = Promise.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

@@ -1,18 +0,0 @@
-export default class ListComponent extends Field {
-    get isSelectURL(): boolean;
-    get selectData(): any;
-    get shouldLoad(): any;
-    getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
-    get requestHeaders(): any;
-    setItems(): void;
-    updateCustomItems(): void;
-    loadItems(): void;
-    getOptionTemplate(data: any, value: any, index: any): any;
-    itemTemplate(data: any, value: any, index: 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

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

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

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