@formio/js 5.0.0-rc.5

package/lib/cjs/Element.js

@@ -0,0 +1,593 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const EventEmitter_1 = __importDefault(require("./EventEmitter"));
+const Formio_1 = require("./Formio");
+const FormioUtils = __importStar(require("./utils/utils"));
+const i18next_1 = __importDefault(require("i18next"));
+const lodash_1 = __importDefault(require("lodash"));
+const moment_1 = __importDefault(require("moment"));
+const vanilla_text_mask_1 = __importDefault(require("@formio/vanilla-text-mask"));
+/**
+ * The root component for all elements within the Form.io renderer.
+ */
+class Element {
+    constructor(options) {
+        /**
+         * The options for this component.
+         * @type {{}}
+         */
+        this.options = Object.assign({
+            language: 'en',
+            highlightErrors: true,
+            componentErrorClass: 'formio-error-wrapper',
+            componentWarningClass: 'formio-warning-wrapper',
+            row: '',
+            namespace: 'formio'
+        }, options || {});
+        /**
+         * The ID of this component. This value is auto-generated when the component is created, but
+         * can also be provided from the component.id value passed into the constructor.
+         * @type {string}
+         */
+        this.id = FormioUtils.getRandomComponentId();
+        /**
+         * An array of event handlers so that the destry command can deregister them.
+         * @type {Array}
+         */
+        this.eventHandlers = [];
+        // Use the i18next that is passed in, otherwise use the global version.
+        this.i18next = this.options.i18next || i18next_1.default;
+        /**
+         * An instance of the EventEmitter class to handle the emitting and registration of events.
+         *
+         * @type {EventEmitter}
+         */
+        this.events = (options && options.events) ? options.events : new EventEmitter_1.default();
+        this.defaultMask = null;
+        /**
+         * Conditional to show or hide helplinks in editForm
+         *
+         * @type {*|boolean}
+         */
+        this.helplinks = (this.options.helplinks === 'false') ? false : (this.options.helplinks || 'https://help.form.io');
+    }
+    /**
+     * Register for a new event within this component.
+     *
+     * @example
+     * let component = new BaseComponent({
+     *   type: 'textfield',
+     *   label: 'First Name',
+     *   key: 'firstName'
+     * });
+     * component.on('componentChange', (changed) => {
+     *   console.log('this element is changed.');
+     * });
+     *
+     *
+     * @param {string} event - The event you wish to register the handler for.
+     * @param {function} cb - The callback handler to handle this event.
+     */
+    on(event, cb, internal, once = false) {
+        if (!this.events) {
+            return;
+        }
+        const type = `${this.options.namespace}.${event}`;
+        // Store the component id in the handler so that we can determine which events are for this component.
+        cb.id = this.id;
+        cb.key = this.key;
+        cb.internal = internal;
+        // Register for this event.
+        return this.events[once ? 'once' : 'on'](type, cb);
+    }
+    /**
+     * Register for a new single-fire event within this component.
+     *
+     * @param {string} event - The event you wish to register the handler for.
+     * @param {function} cb - The callback handler to handle this event.
+     */
+    once(event, cb, internal) {
+        return this.on(event, cb, internal, true);
+    }
+    /**
+     * Allow catching any event.
+     *
+     * @param cb
+     * @returns {this}
+     */
+    onAny(cb) {
+        if (!this.events) {
+            return;
+        }
+        return this.events.onAny(cb);
+    }
+    /**
+     * Removes the listener that will be fired when any event is emitted.
+     *
+     * @param cb
+     * @returns {this}
+     */
+    offAny(cb) {
+        if (!this.events) {
+            return;
+        }
+        return this.events.offAny(cb);
+    }
+    /**
+     * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.
+     *
+     * @param {string} event - The event you wish to register the handler for.
+     * @param {function|undefined} cb - The callback handler to handle this event.
+     */
+    off(event, cb) {
+        if (!this.events) {
+            return;
+        }
+        const type = `${this.options.namespace}.${event}`;
+        this.events.listeners(type).forEach((listener) => {
+            // Ensure the listener is for this element
+            if (!listener || listener.id !== this.id) {
+                return;
+            }
+            // If there is a given callback, only deal with the match
+            if (cb && cb !== listener) {
+                return;
+            }
+            this.events.off(type, listener);
+        });
+    }
+    /**
+     * Emit a new event.
+     *
+     * @param {string} event - The event to emit.
+     * @param {Object} data - The data to emit with the handler.
+     */
+    emit(event, ...data) {
+        if (this.events) {
+            this.events.emit(`${this.options.namespace}.${event}`, ...data);
+        }
+    }
+    /**
+     * Check if the component has an event handler set up for the event.
+     *
+     * @param {string} event - The event name.
+     * @returns {boolean}
+     */
+    hasEventHandler(event) {
+        if (!this.events) {
+            return false;
+        }
+        const type = `${this.options.namespace}.${event}`;
+        return this.events.listeners(type).some((listener) => {
+            if (!listener) {
+                return false;
+            }
+            return listener.id === this.id || listener.key === this.key;
+        });
+    }
+    /**
+     * Wrapper method to add an event listener to an HTML element.
+     *
+     * @param obj
+     *   The DOM element to add the event to.
+     * @param type
+     *   The event name to add.
+     * @param func
+     *   The callback function to be executed when the listener is triggered.
+     * @param persistent
+     *   If this listener should persist beyond "destroy" commands.
+     */
+    addEventListener(obj, type, func, persistent) {
+        if (!obj) {
+            return;
+        }
+        if (!persistent) {
+            this.eventHandlers.push({ id: this.id, obj, type, func });
+        }
+        if ('addEventListener' in obj) {
+            obj.addEventListener(type, func, false);
+        }
+        else if ('attachEvent' in obj) {
+            obj.attachEvent(`on${type}`, func);
+        }
+        return this;
+    }
+    /**
+     * Remove an event listener from the object.
+     *
+     * @param obj
+     * @param type
+     */
+    removeEventListener(obj, type, func = null) {
+        const indexes = [];
+        if (!obj) {
+            return;
+        }
+        this.eventHandlers.forEach((handler, index) => {
+            if ((handler.id === this.id)
+                && obj.removeEventListener
+                && (handler.type === type)
+                && (!func || handler.func === func)) {
+                obj.removeEventListener(type, handler.func);
+                indexes.push(index);
+            }
+        });
+        if (indexes.length) {
+            lodash_1.default.pullAt(this.eventHandlers, indexes);
+        }
+        return this;
+    }
+    removeEventListeners() {
+        this.eventHandlers.forEach(handler => {
+            if ((this.id === handler.id) && handler.type && handler.obj && handler.obj.removeEventListener) {
+                handler.obj.removeEventListener(handler.type, handler.func);
+            }
+        });
+        this.eventHandlers = [];
+    }
+    removeAllEvents(includeExternal) {
+        if (this.events) {
+            lodash_1.default.each(this.events._events, (events, type) => {
+                lodash_1.default.each(events, (listener) => {
+                    if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
+                        this.events.off(type, listener);
+                    }
+                });
+            });
+        }
+    }
+    teardown() {
+        delete this.i18next;
+        delete this.events;
+    }
+    /**
+     * Removes all event listeners attached to this component.
+     */
+    destroy(all = false) {
+        this.removeEventListeners();
+        this.removeAllEvents();
+        if (all) {
+            this.teardown();
+        }
+    }
+    /**
+     * Append an HTML DOM element to a container.
+     *
+     * @param element
+     * @param container
+     */
+    appendTo(element, container) {
+        container === null || container === void 0 ? void 0 : container.appendChild(element);
+        return this;
+    }
+    /**
+     * Prepend an HTML DOM element to a container.
+     *
+     * @param {HTMLElement} element - The DOM element to prepend.
+     * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.
+     */
+    prependTo(element, container) {
+        if (container) {
+            if (container.firstChild) {
+                try {
+                    container.insertBefore(element, container.firstChild);
+                }
+                catch (err) {
+                    console.warn(err);
+                    container.appendChild(element);
+                }
+            }
+            else {
+                container.appendChild(element);
+            }
+        }
+        return this;
+    }
+    /**
+     * Removes an HTML DOM element from its bounding container.
+     *
+     * @param {HTMLElement} element - The element to remove.
+     * @param {HTMLElement} container - The DOM element that is the container of the element to remove.
+     */
+    removeChildFrom(element, container) {
+        if (container && container.contains(element)) {
+            try {
+                container.removeChild(element);
+            }
+            catch (err) {
+                console.warn(err);
+            }
+        }
+        return this;
+    }
+    /**
+     * Alias for document.createElement.
+     *
+     * @param {string} type - The type of element to create
+     * @param {Object} attr - The element attributes to add to the created element.
+     * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.
+     *
+     * @return {HTMLElement} - The created element.
+     */
+    ce(type, attr, children = null) {
+        // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');
+        // Create the element.
+        const element = document.createElement(type);
+        // Add attributes.
+        if (attr) {
+            this.attr(element, attr);
+        }
+        // Append the children.
+        this.appendChild(element, children);
+        return element;
+    }
+    /**
+     * Append different types of children.
+     *
+     * @param child
+     */
+    appendChild(element, child) {
+        if (Array.isArray(child)) {
+            child.forEach((oneChild) => this.appendChild(element, oneChild));
+        }
+        else if (child instanceof HTMLElement || child instanceof Text) {
+            element.appendChild(child);
+        }
+        else if (child) {
+            element.appendChild(this.text(child.toString()));
+        }
+        return this;
+    }
+    /**
+     * Creates a new input mask placeholder.
+     * @param {HTMLElement} mask - The input mask.
+     * @returns {string} - The placeholder that will exist within the input as they type.
+     */
+    maskPlaceholder(mask) {
+        return mask.map((char) => (char instanceof RegExp) ? this.placeholderChar : char).join('');
+    }
+    get placeholderChar() {
+        var _a;
+        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.inputMaskPlaceholderChar) || '_';
+    }
+    /**
+     * Sets the input mask for an input.
+     *
+     * @param {HTMLElement} input - The html input to apply the mask to.
+     * @param {String} inputMask - The input mask to add to this input.
+     * @param {Boolean} usePlaceholder - Set the mask placeholder on the input.
+     */
+    setInputMask(input, inputMask, usePlaceholder) {
+        if (input && inputMask) {
+            const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);
+            this.defaultMask = mask;
+            try {
+                //destroy previous mask
+                if (input.mask) {
+                    input.mask.destroy();
+                }
+                input.mask = (0, vanilla_text_mask_1.default)({
+                    inputElement: input,
+                    mask,
+                    placeholderChar: this.placeholderChar,
+                    shadowRoot: this.root ? this.root.shadowRoot : null
+                });
+            }
+            catch (e) {
+                // Don't pass error up, to prevent form rejection.
+                // Internal bug of vanilla-text-mask on iOS (`selectionEnd`);
+                console.warn(e);
+            }
+            if (mask.numeric) {
+                input.setAttribute('pattern', '\\d*');
+            }
+            if (usePlaceholder) {
+                input.setAttribute('placeholder', this.maskPlaceholder(mask));
+            }
+        }
+    }
+    /**
+     * Translate a text using the i18n system.
+     *
+     * @param {string|Array<string>} text - The i18n identifier.
+     * @param {Object} params - The i18n parameters to use for translation.
+     */
+    t(text, ...args) {
+        return this.i18next ? this.i18next.t(text, ...args) : text;
+    }
+    /**
+     * Alias to create a text node.
+     * @param text
+     * @returns {Text}
+     */
+    text(text) {
+        return document.createTextNode(this.t(text));
+    }
+    /**
+     * Adds an object of attributes onto an element.
+     * @param {HtmlElement} element - The element to add the attributes to.
+     * @param {Object} attr - The attributes to add to the input element.
+     */
+    attr(element, attr) {
+        if (!element) {
+            return;
+        }
+        lodash_1.default.each(attr, (value, key) => {
+            if (typeof value !== 'undefined') {
+                if (key.indexOf('on') === 0) {
+                    // If this is an event, add a listener.
+                    this.addEventListener(element, key.substr(2).toLowerCase(), value);
+                }
+                else {
+                    // Otherwise it is just an attribute.
+                    element.setAttribute(key, value);
+                }
+            }
+        });
+    }
+    /**
+     * Determines if an element has a class.
+     *
+     * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass
+     */
+    hasClass(element, className) {
+        if (!element) {
+            return false;
+        }
+        // Allow templates to intercept.
+        className = ` ${className} `;
+        return ((` ${element.className} `).replace(/[\n\t\r]/g, ' ').indexOf(className) > -1);
+    }
+    /**
+     * Adds a class to a DOM element.
+     *
+     * @param element
+     *   The element to add a class to.
+     * @param className
+     *   The name of the class to add.
+     */
+    addClass(element, className) {
+        if (!element || !(element instanceof HTMLElement)) {
+            return this;
+        }
+        // Allow templates to intercept.
+        const classes = element.getAttribute('class');
+        if (!(classes === null || classes === void 0 ? void 0 : classes.includes(className))) {
+            element.setAttribute('class', `${classes} ${className}`);
+        }
+        return this;
+    }
+    /**
+     * Remove a class from a DOM element.
+     *
+     * @param element
+     *   The DOM element to remove the class from.
+     * @param className
+     *   The name of the class that is to be removed.
+     */
+    removeClass(element, className) {
+        if (!element || !className || !(element instanceof HTMLElement)) {
+            return this;
+        }
+        // Allow templates to intercept.
+        let cls = element.getAttribute('class');
+        if (cls) {
+            cls = cls.replace(new RegExp(` ${className}`, 'g'), '');
+            element.setAttribute('class', cls);
+        }
+        return this;
+    }
+    /**
+     * Empty's an HTML DOM element.
+     *
+     * @param {HTMLElement} element - The element you wish to empty.
+     */
+    empty(element) {
+        if (element) {
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+        }
+    }
+    /**
+     * Create an evaluation context for all script executions and interpolations.
+     *
+     * @param additional
+     * @return {*}
+     */
+    evalContext(additional) {
+        var _a;
+        return Object.assign({
+            _: lodash_1.default,
+            utils: FormioUtils,
+            util: FormioUtils,
+            user: Formio_1.Formio.getUser(),
+            moment: moment_1.default,
+            instance: this,
+            self: this,
+            token: Formio_1.Formio.getToken({
+                decode: true
+            }),
+            config: this.root && this.root.form && this.root.form.config
+                ? this.root.form.config
+                : ((_a = this.options) === null || _a === void 0 ? void 0 : _a.formConfig)
+                    ? this.options.formConfig
+                    : {},
+        }, additional, lodash_1.default.get(this.root, 'options.evalContext', {}));
+    }
+    /**
+     * Performs an interpolation using the evaluation context of this component.
+     *
+     * @param string
+     * @param data
+     * @return {XML|string|*|void}
+     */
+    interpolate(string, data, options = {}) {
+        if (typeof string !== 'function' && (this.component.content || this.component.html)
+            && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
+            string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
+        }
+        return FormioUtils.interpolate(string, this.evalContext(data), options);
+    }
+    /**
+     * Performs an evaluation using the evaluation context of this component.
+     *
+     * @param func
+     * @param args
+     * @param ret
+     * @param tokenize
+     * @return {*}
+     */
+    evaluate(func, args, ret, tokenize) {
+        return FormioUtils.evaluate(func, this.evalContext(args), ret, tokenize);
+    }
+    /**
+     * Allow for options to hook into the functionality of this renderer.
+     * @return {*}
+     */
+    hook() {
+        const name = arguments[0];
+        if (this.options &&
+            this.options.hooks &&
+            this.options.hooks[name]) {
+            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));
+        }
+        else {
+            // If this is an async hook instead of a sync.
+            const fn = (typeof arguments[arguments.length - 1] === 'function') ? arguments[arguments.length - 1] : null;
+            if (fn) {
+                return fn(null, arguments[1]);
+            }
+            else {
+                return arguments[1];
+            }
+        }
+    }
+}
+exports.default = Element;

package/lib/cjs/Embed.d.ts

@@ -0,0 +1 @@
+export function embed(config?: {}): void;