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

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -1,30 +0,0 @@
-export default class TabsComponent extends NestedComponent {
-    static get builderInfo(): {
-        title: string;
-        group: string;
-        icon: string;
-        weight: number;
-        documentation: string;
-        showPreview: boolean;
-        schema: any;
-    };
-    static savedValueTypes(): never[];
-    constructor(...args: any[]);
-    get tabKey(): string;
-    get tabLikey(): string;
-    get tabLinkKey(): string;
-    currentTab: number;
-    noField: boolean;
-    tabs: any[] | undefined;
-    render(): any;
-    detach(all: any): void;
-    /**
-     * Set the current tab.
-     *
-     * @param index
-     */
-    setTab(index: any): void;
-    beforeFocus(component: any): void;
-    handleTabsValidation(): void;
-}
-import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/tabs/Tabs.form.d.ts

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

package/lib/mjs/components/tabs/Tabs.form.js

@@ -1,10 +0,0 @@
-import nestedComponentForm from '../_classes/nested/NestedComponent.form';
-import TabsEditDisplay from './editForm/Tabs.edit.display';
-export default function (...extend) {
-    return nestedComponentForm([
-        {
-            key: 'display',
-            components: TabsEditDisplay
-        },
-    ], ...extend);
-}

package/lib/mjs/components/tabs/Tabs.js

@@ -1,201 +0,0 @@
-import _ from 'lodash';
-import NestedComponent from '../_classes/nested/NestedComponent';
-export default class TabsComponent extends NestedComponent {
-    static schema(...extend) {
-        return NestedComponent.schema({
-            label: 'Tabs',
-            type: 'tabs',
-            input: false,
-            key: 'tabs',
-            persistent: false,
-            tableView: false,
-            components: [
-                {
-                    label: 'Tab 1',
-                    key: 'tab1',
-                    components: [],
-                },
-            ],
-            verticalLayout: false,
-        }, ...extend);
-    }
-    static get builderInfo() {
-        return {
-            title: 'Tabs',
-            group: 'layout',
-            icon: 'folder-o',
-            weight: 50,
-            documentation: '/userguide/form-building/layout-components#tabs',
-            showPreview: false,
-            schema: TabsComponent.schema(),
-        };
-    }
-    static savedValueTypes() {
-        return [];
-    }
-    get defaultSchema() {
-        return TabsComponent.schema();
-    }
-    get schema() {
-        const schema = super.schema;
-        // We need to clone this because the builder uses the "components" reference and this would reset that reference.
-        const components = _.cloneDeep(this.component.components);
-        schema.components = components.map((tab, index) => {
-            tab.components = this.tabs[index].map((component) => component.schema);
-            return tab;
-        });
-        return schema;
-    }
-    get tabKey() {
-        return `tab-${this.key}`;
-    }
-    get tabLikey() {
-        return `tabLi-${this.key}`;
-    }
-    get tabLinkKey() {
-        return `tabLink-${this.key}`;
-    }
-    constructor(...args) {
-        super(...args);
-        this.currentTab = 0;
-        this.noField = true;
-    }
-    init() {
-        this.components = [];
-        this.tabs = [];
-        _.each(this.component.components, (tab, index) => {
-            this.tabs[index] = [];
-            // Initialize empty tabs.
-            tab.components = tab.components || [];
-            _.each(tab.components, (comp) => {
-                const component = this.createComponent(comp);
-                component.tab = index;
-                this.tabs[index].push(component);
-            });
-        });
-    }
-    render() {
-        return super.render(this.renderTemplate('tab', {
-            tabKey: this.tabKey,
-            tabLikey: this.tabLikey,
-            tabLinkKey: this.tabLinkKey,
-            currentTab: this.currentTab,
-            tabComponents: this.tabs.map(tab => this.renderComponents(tab)),
-        }, (this.options.flatten || this.options.pdf ? 'flat' : null)));
-    }
-    attach(element) {
-        this.loadRefs(element, {
-            [this.tabLinkKey]: 'multiple',
-            [this.tabKey]: 'multiple',
-            [this.tabLikey]: 'multiple',
-        });
-        ['change', 'error'].forEach(event => this.on(event, this.handleTabsValidation.bind(this)));
-        const superAttach = super.attach(element);
-        this.refs[this.tabLinkKey].forEach((tabLink, index) => {
-            this.addEventListener(tabLink, 'click', (event) => {
-                event.preventDefault();
-                this.setTab(index);
-            });
-        });
-        this.refs[this.tabKey].forEach((tab, index) => {
-            this.attachComponents(tab, this.tabs[index], this.component.components[index].components);
-        });
-        return superAttach;
-    }
-    detach(all) {
-        super.detach(all);
-    }
-    /**
-     * Set the current tab.
-     *
-     * @param index
-     */
-    setTab(index) {
-        if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {
-            return;
-        }
-        this.currentTab = index;
-        _.each(this.refs[this.tabKey], (tab) => {
-            this.removeClass(tab, 'formio-tab-panel-active');
-            tab.style.display = 'none';
-        });
-        this.addClass(this.refs[this.tabKey][index], 'formio-tab-panel-active');
-        this.refs[this.tabKey][index].style.display = 'block';
-        _.each(this.refs[this.tabLinkKey], (tabLink, tabIndex) => {
-            if (this.refs[this.tabLinkKey][tabIndex]) {
-                this.removeClass(tabLink, 'active');
-                this.removeClass(tabLink, 'formio-tab-link-active');
-            }
-            if (this.refs[this.tabLikey][tabIndex]) {
-                this.removeClass(this.refs[this.tabLikey][tabIndex], 'active');
-                this.removeClass(this.refs[this.tabLikey][tabIndex], 'formio-tab-link-container-active');
-            }
-        });
-        if (this.refs[this.tabLikey][index]) {
-            this.addClass(this.refs[this.tabLikey][index], 'active');
-            this.addClass(this.refs[this.tabLikey][index], 'formio-tab-link-container-active');
-        }
-        if (this.refs[this.tabLinkKey][index]) {
-            this.addClass(this.refs[this.tabLinkKey][index], 'active');
-            this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
-        }
-        this.triggerChange();
-    }
-    beforeFocus(component) {
-        if ('beforeFocus' in this.parent) {
-            this.parent.beforeFocus(this);
-        }
-        const tabIndex = this.tabs.findIndex((tab) => {
-            return tab.some((comp) => comp === component);
-        });
-        if (tabIndex !== -1 && this.currentTab !== tabIndex) {
-            this.setTab(tabIndex);
-        }
-    }
-    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
-        if (this.component.modalEdit) {
-            super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);
-        }
-        elements.forEach((element) => {
-            this.addClass(element, 'is-invalid');
-            if (element.getAttribute('ref') !== 'openModal') {
-                if (this.options.highlightErrors) {
-                    this.addClass(element, 'tab-error');
-                }
-                else {
-                    this.addClass(element, 'has-error');
-                }
-            }
-        });
-    }
-    clearErrorClasses(elements) {
-        if (this.options.server || !this.rendered) {
-            return;
-        }
-        if (this.component.modalEdit) {
-            const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;
-            super.clearErrorClasses(element);
-        }
-        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];
-        elements.forEach((element) => {
-            this.removeClass(element, 'is-invalid');
-            this.removeClass(element, 'tab-error');
-            this.removeClass(element, 'has-error');
-        });
-    }
-    handleTabsValidation() {
-        if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {
-            return;
-        }
-        this.clearErrorClasses(this.refs[this.tabLinkKey]);
-        const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {
-            const hasComponentWithError = tab.some(comp => !!comp.error);
-            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;
-        }, []);
-        if (!invalidTabsIndexes.length) {
-            return;
-        }
-        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
-        this.setErrorClasses(invalidTabs);
-    }
-}

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.d.ts

@@ -1,49 +0,0 @@
-declare const _default: ({
-    key: string;
-    ignore: boolean;
-    type?: undefined;
-    input?: undefined;
-    label?: undefined;
-    weight?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    tooltip?: undefined;
-} | {
-    key: string;
-    type: string;
-    input: boolean;
-    label: string;
-    weight: number;
-    reorder: boolean;
-    components: ({
-        type: string;
-        input: boolean;
-        key: string;
-        label: string;
-        allowCalculateOverride?: undefined;
-    } | {
-        type: string;
-        input: boolean;
-        key: string;
-        label: string;
-        allowCalculateOverride: boolean;
-        calculateValue: {
-            _camelCase: {
-                var: string;
-            }[];
-        };
-    })[];
-    ignore?: undefined;
-    tooltip?: undefined;
-} | {
-    weight: number;
-    type: string;
-    label: string;
-    tooltip: string;
-    key: string;
-    input: boolean;
-    ignore?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-})[];
-export default _default;

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -1,66 +0,0 @@
-export default [
-    {
-        key: 'labelPosition',
-        ignore: true
-    },
-    {
-        key: 'placeholder',
-        ignore: true
-    },
-    {
-        key: 'description',
-        ignore: true
-    },
-    {
-        key: 'autofocus',
-        ignore: true
-    },
-    {
-        key: 'tooltip',
-        ignore: true
-    },
-    {
-        key: 'tabindex',
-        ignore: true
-    },
-    {
-        key: 'disabled',
-        ignore: true
-    },
-    {
-        key: 'tableView',
-        ignore: true
-    },
-    {
-        key: 'components',
-        type: 'datagrid',
-        input: true,
-        label: 'Tabs',
-        weight: 50,
-        reorder: true,
-        components: [
-            {
-                type: 'textfield',
-                input: true,
-                key: 'label',
-                label: 'Label'
-            },
-            {
-                type: 'textfield',
-                input: true,
-                key: 'key',
-                label: 'Key',
-                allowCalculateOverride: true,
-                calculateValue: { _camelCase: [{ var: 'row.label' }] }
-            }
-        ]
-    },
-    {
-        weight: 1100,
-        type: 'checkbox',
-        label: 'Vertical Layout',
-        tooltip: 'Make this field display in vertical orientation.',
-        key: 'verticalLayout',
-        input: true
-    },
-];

package/lib/mjs/components/tabs/fixtures/comp1.d.ts

@@ -1,23 +0,0 @@
-declare namespace _default {
-    const label: string;
-    const components: {
-        label: string;
-        key: string;
-        components: {
-            label: string;
-            tableView: boolean;
-            validate: {
-                required: boolean;
-            };
-            key: string;
-            type: string;
-            input: boolean;
-        }[];
-    }[];
-    const key: string;
-    const type: string;
-    const input: boolean;
-    const tableView: boolean;
-    const modalEdit: boolean;
-}
-export default _default;

package/lib/mjs/components/tabs/fixtures/comp1.js

@@ -1,31 +0,0 @@
-export default {
-    label: 'Tabs',
-    components: [
-        {
-            label: 'Tab 1',
-            key: 'tab1',
-            components: []
-        },
-        {
-            label: 'Tab 2',
-            key: 'tab2',
-            components: [
-                {
-                    label: 'Text Field',
-                    tableView: true,
-                    validate: {
-                        required: true
-                    },
-                    key: 'textField',
-                    type: 'textfield',
-                    input: true
-                }
-            ]
-        }
-    ],
-    key: 'tabs',
-    type: 'tabs',
-    input: false,
-    tableView: false,
-    modalEdit: true,
-};

package/lib/mjs/components/tabs/fixtures/index.d.ts

@@ -1,2 +0,0 @@
-export { comp1 };
-import comp1 from './comp1';

package/lib/mjs/components/tabs/fixtures/index.js

@@ -1,2 +0,0 @@
-import comp1 from './comp1';
-export { comp1 };

package/lib/mjs/components/tags/Tags.d.ts

@@ -1,41 +0,0 @@
-export default class TagsComponent extends Input {
-    static get builderInfo(): {
-        title: string;
-        icon: string;
-        group: string;
-        documentation: string;
-        weight: number;
-        schema: any;
-    };
-    static get serverConditionSettings(): {
-        operators: any[];
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-    };
-    static get conditionOperatorsSettings(): {
-        operators: any[];
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-    };
-    static savedValueTypes(schema: any): any[];
-    get emptyValue(): "" | never[];
-    get delimiter(): any;
-    attachElement(element: any, index: any): void;
-    choices: Choices | null | undefined;
-    normalizeValue(value: any): any;
-    setValue(value: any, flags?: {}): boolean;
-    focus(): void;
-    getValueAsString(value: any): any;
-}
-import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';

package/lib/mjs/components/tags/Tags.form.d.ts

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

package/lib/mjs/components/tags/Tags.form.js

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

package/lib/mjs/components/tags/Tags.js

@@ -1,171 +0,0 @@
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
-import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
-export default class TagsComponent extends Input {
-    static schema(...extend) {
-        return Input.schema({
-            type: 'tags',
-            label: 'Tags',
-            key: 'tags',
-            delimeter: ',',
-            storeas: 'string',
-            maxTags: 0
-        }, ...extend);
-    }
-    static get builderInfo() {
-        return {
-            title: 'Tags',
-            icon: 'tags',
-            group: 'advanced',
-            documentation: '/userguide/form-building/advanced-components#tags',
-            weight: 30,
-            schema: TagsComponent.schema()
-        };
-    }
-    static get serverConditionSettings() {
-        return TagsComponent.conditionOperatorsSettings;
-    }
-    static get conditionOperatorsSettings() {
-        return {
-            ...super.conditionOperatorsSettings,
-            operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'],
-        };
-    }
-    static savedValueTypes(schema) {
-        schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes[schema.storeas] || componentValueTypes.string];
-    }
-    init() {
-        super.init();
-    }
-    get emptyValue() {
-        return (this.component.storeas === 'string') ? '' : [];
-    }
-    get defaultSchema() {
-        return TagsComponent.schema();
-    }
-    get inputInfo() {
-        const info = super.inputInfo;
-        info.type = 'input';
-        info.attr.type = 'text';
-        info.changeEvent = 'change';
-        return info;
-    }
-    get delimiter() {
-        return this.component.delimeter || ',';
-    }
-    attachElement(element, index) {
-        super.attachElement(element, index);
-        if (!element) {
-            return;
-        }
-        if (this.i18next) {
-            element.setAttribute('dir', this.i18next.dir());
-        }
-        if (this.choices) {
-            this.choices.destroy();
-        }
-        if (!Choices) {
-            return;
-        }
-        const hasPlaceholder = !!this.component.placeholder;
-        this.choices = new Choices(element, {
-            delimiter: this.delimiter,
-            editItems: true,
-            allowHTML: true,
-            maxItemCount: this.component.maxTags,
-            removeItemButton: true,
-            duplicateItemsAllowed: false,
-            shadowRoot: this.root ? this.root.shadowRoot : null,
-            placeholder: hasPlaceholder,
-            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,
-        });
-        this.choices.itemList.element.tabIndex = element.tabIndex;
-        this.addEventListener(this.choices.input.element, 'blur', () => {
-            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked
-            element.dispatchEvent(new Event('blur'));
-            const value = this.choices.input.value;
-            const maxTagsNumber = this.component.maxTags;
-            const valuesCount = this.choices.getValue(true).length;
-            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());
-            if (value) {
-                if (maxTagsNumber && valuesCount === maxTagsNumber) {
-                    this.choices.addItems = false;
-                    this.choices.clearInput();
-                }
-                else if (isRepeatedValue) {
-                    this.choices.clearInput();
-                }
-                else {
-                    this.choices.setValue([value]);
-                    this.choices.clearInput();
-                    this.choices.hideDropdown(true);
-                    this.updateValue(null, {
-                        modified: true
-                    });
-                }
-            }
-        });
-    }
-    detach() {
-        if (this.choices) {
-            this.choices.destroy();
-            this.choices = null;
-        }
-        super.detach();
-    }
-    normalizeValue(value) {
-        if (this.component.storeas === 'string' && Array.isArray(value)) {
-            return value.join(this.delimiter);
-        }
-        else if (this.component.storeas === 'array' && typeof value === 'string') {
-            return value.split(this.delimiter).filter(result => result);
-        }
-        return value;
-    }
-    setValue(value, flags = {}) {
-        const changed = super.setValue(value, flags);
-        if (this.choices) {
-            let dataValue = this.dataValue;
-            this.choices.removeActiveItems();
-            if (dataValue) {
-                if (typeof dataValue === 'string') {
-                    dataValue = dataValue.split(this.delimiter).filter(result => result);
-                }
-                const value = Array.isArray(dataValue) ? dataValue : [dataValue];
-                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));
-            }
-        }
-        return changed;
-    }
-    set disabled(disabled) {
-        super.disabled = disabled;
-        if (!this.choices) {
-            return;
-        }
-        if (disabled) {
-            this.choices.disable();
-        }
-        else {
-            this.choices.enable();
-        }
-    }
-    get disabled() {
-        return super.disabled;
-    }
-    focus() {
-        if (this.refs.input && this.refs.input.length) {
-            this.refs.input[0].parentNode.lastChild.focus();
-        }
-    }
-    getValueAsString(value) {
-        if (!value) {
-            return '';
-        }
-        if (Array.isArray(value)) {
-            return value.join(`${this.delimiter || ','} `);
-        }
-        const stringValue = value.toString();
-        return this.sanitize(stringValue, this.shouldSanitizeValue);
-    }
-}