@easydata/crud 1.4.18 → 1.4.21

package/dist/easydata.crud.esm.js

@@ -0,0 +1,1507 @@
+
+/*
+ * EasyData.JS CRUD v1.4.21
+ * Copyright 2020-2024 Korzh.com
+ * Licensed under MIT
+ */
+
+import { EasyDataTable, utils, DataType, i18n, EntityAttrKind, EditorTag, ValueEditor, DataRow, HttpClient, MetaData, combinePath } from '@easydata/core';
+import { domel, CellRendererType, browserUtils, DFMT_REGEX, DefaultDialogService, EasyGrid, DefaultDateTimePicker } from '@easydata/ui';
+
+class TextDataFilter {
+    constructor(loader, sourceTable, sourceId, isLookup = false) {
+        this.loader = loader;
+        this.sourceTable = sourceTable;
+        this.sourceId = sourceId;
+        this.isLookup = isLookup;
+        this.filterValue = '';
+        //turns off client-side search
+        //for test purposes
+        this.justServerSide = false;
+    }
+    getValue() {
+        return this.filterValue;
+    }
+    apply(value) {
+        this.filterValue = value;
+        if (this.filterValue) {
+            return this.applyCore();
+        }
+        else {
+            return this.clear();
+        }
+    }
+    clear() {
+        this.filterValue = '';
+        return Promise.resolve(this.sourceTable);
+    }
+    applyCore() {
+        if (this.sourceTable.getTotal() == this.sourceTable.getCachedCount() && !this.justServerSide) {
+            return this.applyInMemoryFilter();
+        }
+        else {
+            const filters = [
+                { class: "__substring", value: this.filterValue }
+            ];
+            return this.loader.loadChunk({
+                offset: 0,
+                limit: this.sourceTable.chunkSize,
+                needTotal: true,
+                filters: filters,
+                sourceId: this.sourceId,
+                lookup: this.isLookup
+            })
+                .then(data => {
+                const filteredTable = new EasyDataTable({
+                    chunkSize: this.sourceTable.chunkSize,
+                    loader: {
+                        loadChunk: (params) => this.loader
+                            .loadChunk(Object.assign(Object.assign({}, params), { filters: filters, sourceId: this.sourceId, lookup: this.isLookup }))
+                    }
+                });
+                for (const col of this.sourceTable.columns.getItems()) {
+                    filteredTable.columns.add(col);
+                }
+                filteredTable.setTotal(data.total);
+                for (const row of data.table.getCachedRows()) {
+                    filteredTable.addRow(row);
+                }
+                return filteredTable;
+            });
+        }
+    }
+    applyInMemoryFilter() {
+        return new Promise((resolve, reject) => {
+            const filteredTable = new EasyDataTable({
+                chunkSize: this.sourceTable.chunkSize,
+                inMemory: true
+            });
+            for (const col of this.sourceTable.columns.getItems()) {
+                filteredTable.columns.add(col);
+            }
+            const words = this.filterValue.split('||').map(w => w.trim().toLowerCase());
+            const suitableColumns = this.sourceTable.columns.getItems()
+                .filter(col => utils.isNumericType(col.type)
+                || utils.getStringDataTypes().indexOf(col.type) >= 0);
+            const hasEnterance = (row) => {
+                for (const col of suitableColumns) {
+                    const value = row.getValue(col.id);
+                    if (value) {
+                        const normalized = value.toString().toLowerCase();
+                        for (const word of words) {
+                            if (normalized.indexOf(word) >= 0) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                return false;
+            };
+            for (const row of this.sourceTable.getCachedRows()) {
+                if (hasEnterance(row)) {
+                    filteredTable.addRow(row);
+                }
+            }
+            filteredTable.setTotal(filteredTable.getCachedCount());
+            resolve(filteredTable);
+        });
+    }
+}
+
+const internalDateFormat = 'yyyy-MM-dd';
+const internalTimeFormat = 'HH:mm';
+const getInternalDateTimeFormat = (dtype) => {
+    if (dtype == DataType.Date)
+        return internalDateFormat;
+    if (dtype == DataType.Time)
+        return internalTimeFormat;
+    return `${internalDateFormat}T${internalTimeFormat}`;
+};
+const getEditDateTimeFormat = (dtype) => {
+    const settings = i18n.getLocaleSettings();
+    if (dtype == DataType.Date)
+        return settings.editDateFormat;
+    if (dtype == DataType.Time)
+        return settings.editTimeFormat;
+    return `${settings.editDateFormat} ${settings.editTimeFormat}`;
+};
+const setLocation = (path) => {
+    const state = window.history.state;
+    history.pushState(state, document.title, path);
+    window.dispatchEvent(new Event('ed_set_location'));
+};
+
+class Validator {
+}
+
+class DateTimeValidator extends Validator {
+    constructor() {
+        super();
+        this.name = 'DateTime';
+    }
+    validate(attr, value) {
+        if (!utils.IsDefinedAndNotNull(value) || value == '')
+            return { successed: true };
+        if (utils.getDateDataTypes().indexOf(attr.dataType) >= 0) {
+            try {
+                const editFormat = getEditDateTimeFormat(attr.dataType);
+                const newDate = utils.strToDateTime(value, editFormat);
+            }
+            catch (_a) {
+                return {
+                    successed: false,
+                    messages: [i18n.getText('DateTimeError')]
+                };
+            }
+        }
+        return { successed: true };
+    }
+}
+
+class EntityEditForm {
+    constructor(context) {
+        this.context = context;
+        this.validators = [new DateTimeValidator()];
+    }
+    getHtml() {
+        return this.html;
+    }
+    setHtmlInt(html) {
+        this.html = html;
+        this.errorsDiv = this.html.querySelector('.errors-block');
+    }
+    validate() {
+        this.clearErrors();
+        const inputs = Array.from(this.html.querySelectorAll('input, select'));
+        let isValid = true;
+        for (const input of inputs) {
+            const attr = this.context.getMetaData().getAttributeById(input.name);
+            if (input.type === 'checkbox')
+                continue;
+            const result = this.validateValue(attr, input.value);
+            if (!result.successed) {
+                if (isValid) {
+                    domel(this.errorsDiv)
+                        .addChild('ul');
+                }
+                isValid = false;
+                for (const message of result.messages) {
+                    this.errorsDiv.firstElementChild.innerHTML += `<li>${attr.caption}: ${message}</li>`;
+                }
+            }
+            this.markInputValid(input, result.successed);
+        }
+        return isValid;
+    }
+    getData() {
+        return new Promise((resolve, reject) => {
+            const filePromises = [];
+            const inputs = Array.from(this.html
+                .querySelectorAll('input, select, textarea'));
+            let obj = {};
+            for (const input of inputs) {
+                const property = input.name.substring(input.name.lastIndexOf('.') + 1);
+                const attr = this.context.getMetaData().getAttributeById(input.name);
+                if (input.type === 'checkbox') {
+                    obj[property] = input.checked;
+                }
+                else if (input.type === 'file') {
+                    filePromises.push(this.fileToBase64(input.files[0])
+                        .then(content => obj[property] = content));
+                }
+                else {
+                    obj[property] = this.mapValue(attr.dataType, input.value);
+                }
+            }
+            Promise.all(filePromises)
+                .then(() => resolve(obj))
+                .catch((e) => reject(e));
+        });
+    }
+    fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const result = reader.result.toString();
+                resolve(result.substring(result.indexOf(',') + 1));
+            };
+            reader.onerror = error => reject(error);
+        });
+    }
+    useValidator(...validator) {
+        this.useValidators(validator);
+    }
+    useValidators(validators) {
+        this.validators = this.validators.concat(validators);
+    }
+    mapValue(type, value) {
+        if (utils.getDateDataTypes().indexOf(type) >= 0) {
+            if (type !== DataType.Time && value && value.length) {
+                const editFormat = getEditDateTimeFormat(type);
+                const internalFormat = getInternalDateTimeFormat(type);
+                const date = utils.strToDateTime(value, editFormat);
+                return i18n.dateTimeToStr(date, internalFormat);
+            }
+            return value && value.length ? value : null;
+        }
+        if (utils.isIntType(type))
+            return parseInt(value);
+        if (utils.isNumericType(type))
+            return parseFloat(value);
+        return value;
+    }
+    clearErrors() {
+        this.errorsDiv.innerHTML = '';
+        this.html.querySelectorAll('input, select').forEach(el => {
+            el.classList.remove('is-valid');
+            el.classList.remove('is-invalid');
+        });
+    }
+    markInputValid(input, valid) {
+        input.classList.add(valid ? 'is-valid' : 'is-invalid');
+    }
+    validateValue(attr, value) {
+        const result = { successed: true, messages: [] };
+        for (const validator of this.validators) {
+            const res = validator.validate(attr, value);
+            if (!res.successed) {
+                result.successed = false;
+                result.messages = result.messages.concat(res.messages);
+            }
+        }
+        return result;
+    }
+}
+
+class TextFilterWidget {
+    constructor(slot, grid, filter, options) {
+        this.slot = slot;
+        this.grid = grid;
+        this.filter = filter;
+        this.options = {
+            focus: false,
+            instantMode: false,
+            instantTimeout: 1000
+        };
+        this.options = utils.assignDeep(this.options, options || {});
+        const stringDefRenderer = this.grid.cellRendererStore
+            .getDefaultRendererByType(CellRendererType.STRING);
+        this.grid.cellRendererStore
+            .setDefaultRenderer(CellRendererType.STRING, (value, column, cellElement, rowElement) => this.highlightCellRenderer(stringDefRenderer, value, column, cellElement, rowElement));
+        const numDefRenderer = this.grid.cellRendererStore
+            .getDefaultRendererByType(CellRendererType.NUMBER);
+        this.grid.cellRendererStore
+            .setDefaultRenderer(CellRendererType.NUMBER, (value, column, cellElement, rowElement) => this.highlightCellRenderer(numDefRenderer, value, column, cellElement, rowElement));
+        this.render();
+    }
+    render() {
+        const horizClass = browserUtils.IsIE()
+            ? 'kfrm-fields-ie is-horizontal'
+            : 'kfrm-fields is-horizontal';
+        const isEdgeOrIE = browserUtils.IsIE() || browserUtils.IsEdge();
+        domel(this.slot)
+            .addClass(horizClass)
+            .addChild('div', b => {
+            b
+                .addClass('control')
+                .addChild('input', b => {
+                this.filterInput = b.toDOM();
+                b
+                    .attr('placeholder', i18n.getText('SearchInputPlaceholder'))
+                    .type('text');
+                b.on('keydown', this.inputKeydownHandler.bind(this));
+                if (this.options.instantMode) {
+                    b.on('keyup', this.inputKeyupHandler.bind(this));
+                }
+            });
+            if (!isEdgeOrIE) {
+                b
+                    .addClass('has-icons-right')
+                    .addChild('span', b => {
+                    b
+                        .addClass('icon')
+                        .addClass('is-right')
+                        .addClass('is-clickable')
+                        .html('&#x1F5D9;')
+                        .on('click', this.clearButtonClickHander.bind(this));
+                });
+            }
+        });
+        if (!this.options.instantMode) {
+            domel(this.slot)
+                .addChild('button', b => b
+                .addClass('kfrm-button')
+                .addText(i18n.getText('SearchBtn'))
+                .on('click', this.searchButtonClickHandler.bind(this)));
+        }
+        if (this.options.focus) {
+            this.filterInput.focus();
+        }
+    }
+    inputKeydownHandler(ev) {
+        if (ev.keyCode == 13) {
+            this.applyFilter(true);
+        }
+    }
+    inputKeyupHandler() {
+        if (this.applyFilterTimeout) {
+            clearTimeout(this.applyFilterTimeout);
+        }
+        this.applyFilterTimeout = setTimeout(() => {
+            this.applyFilter(true);
+        }, this.options.instantTimeout);
+    }
+    clearButtonClickHander() {
+        this.filterInput.value = '';
+        this.filterInput.focus();
+        this.applyFilter(true);
+    }
+    searchButtonClickHandler() {
+        this.applyFilter(true);
+    }
+    applyFilter(checkChange) {
+        if (this.applyFilterTimeout) {
+            clearTimeout(this.applyFilterTimeout);
+        }
+        const filterValue = this.filter.getValue();
+        if (!checkChange || filterValue != this.filterInput.value) {
+            this.filter.apply(this.filterInput.value)
+                .then(data => {
+                this.grid.setData(data);
+            });
+            return true;
+        }
+        return false;
+    }
+    highlightCellRenderer(defaultRenderer, value, column, cellElement, rowElement) {
+        if (utils.isNumericType(column.type)
+            || utils.getStringDataTypes().indexOf(column.type) >= 0) {
+            if (value) {
+                if (column.dataColumn && column.dataColumn.displayFormat
+                    && DFMT_REGEX.test(column.dataColumn.displayFormat)) {
+                    value = column.dataColumn.displayFormat.replace(DFMT_REGEX, (_, $1) => {
+                        return i18n.numberToStr(value, $1);
+                    });
+                }
+                else {
+                    value = value.toLocaleString();
+                }
+                const result = this.highlightText(value.toString());
+                if (result instanceof HTMLElement) {
+                    cellElement.title = value;
+                    cellElement.appendChild(result);
+                    return;
+                }
+            }
+        }
+        defaultRenderer(value, column, cellElement, rowElement);
+    }
+    highlightText(content) {
+        const normalizedContent = content.toLowerCase();
+        const filterValue = this.filter.getValue().toString();
+        if (filterValue && filterValue.length > 0 && content && content.length > 0) {
+            const indexInMas = [];
+            const words = filterValue.split('||').map(w => w.trim().toLowerCase());
+            for (let i = 0; i < words.length; i++) {
+                let pos = 0;
+                const lowerWord = words[i];
+                if (!lowerWord.length)
+                    continue;
+                if (lowerWord === normalizedContent) {
+                    const highlightSpan = document.createElement('span');
+                    highlightSpan.style.backgroundColor = 'yellow';
+                    highlightSpan.innerText = content;
+                    return highlightSpan;
+                }
+                while (pos < content.length - 1) {
+                    const index = normalizedContent.indexOf(lowerWord, pos);
+                    if (index >= 0) {
+                        indexInMas.push({ index: index, length: words[i].length });
+                        pos = index + lowerWord.length;
+                    }
+                    else {
+                        pos++;
+                    }
+                }
+            }
+            if (indexInMas.length > 0) {
+                //sort array item by index
+                indexInMas.sort((item1, item2) => {
+                    if (item1.index > item2.index) {
+                        return 1;
+                    }
+                    else if (item1.index == item2.index2) {
+                        return 0;
+                    }
+                    else {
+                        return -1;
+                    }
+                });
+                //remove intersecting gaps
+                for (let i = 0; i < indexInMas.length - 1;) {
+                    const delta = indexInMas[i + 1].index - (indexInMas[i].index + indexInMas[i].length);
+                    if (delta < 0) {
+                        const addDelta = indexInMas[i + 1].length + delta;
+                        if (addDelta > 0) {
+                            indexInMas[i].length += addDelta;
+                        }
+                        indexInMas.splice(i + 1, 1);
+                    }
+                    else {
+                        i++;
+                    }
+                }
+                const div = document.createElement('div');
+                for (let i = 0; i < indexInMas.length; i++) {
+                    if (i === 0) {
+                        const text = document.createTextNode(content.substring(0, indexInMas[i].index));
+                        div.appendChild(text);
+                    }
+                    const highlightSpan = document.createElement('span');
+                    highlightSpan.style.backgroundColor = 'yellow';
+                    highlightSpan.innerText = content.substring(indexInMas[i].index, indexInMas[i].index + indexInMas[i].length);
+                    div.appendChild(highlightSpan);
+                    const text = (i < indexInMas.length - 1)
+                        ? document.createTextNode(content.substring(indexInMas[i].index
+                            + indexInMas[i].length, indexInMas[i + 1].index))
+                        : document.createTextNode(content.substring(indexInMas[i].index
+                            + indexInMas[i].length));
+                    div.appendChild(text);
+                }
+                return div;
+            }
+        }
+        return content;
+    }
+}
+
+const isIE = browserUtils.IsIE();
+class EntityEditFormBuilder {
+    constructor(context, params) {
+        this.context = context;
+        this.params = params;
+        this.params = params || {};
+        this.reset();
+    }
+    reset() {
+        this.form = new EntityEditForm(this.context);
+    }
+    setupLookupField(parent, attr, readOnly, value) {
+        const lookupEntity = this.context.getMetaData().getRootEntity()
+            .subEntities.filter(ent => ent.id == attr.lookupEntity)[0];
+        const dataAttr = this.context.getMetaData().getAttributeById(attr.dataAttr);
+        if (!dataAttr)
+            return;
+        readOnly = readOnly || !dataAttr.isEditable;
+        value = this.params.values
+            ? this.params.values.getValue(dataAttr.id)
+            : undefined;
+        const horizClass = isIE
+            ? 'kfrm-fields-ie is-horizontal'
+            : 'kfrm-fields is-horizontal';
+        let inputEl;
+        domel(parent)
+            .addChild('div', b => {
+            b
+                .addClass(horizClass)
+                .addChild('input', b => {
+                inputEl = b.toDOM();
+                b.attr('readonly', '');
+                b.name(dataAttr.id);
+                b.type(this.resolveInputType(dataAttr.dataType));
+                b.value(utils.IsDefinedAndNotNull(value)
+                    ? value.toString() : '');
+            });
+            if (!readOnly)
+                b.addChild('button', b => b
+                    .addClass('kfrm-button')
+                    .attr('title', i18n.getText('NavigationBtnTitle'))
+                    .addText('...')
+                    .on('click', (ev) => {
+                    const lookupTable = new EasyDataTable({
+                        loader: {
+                            loadChunk: (chunkParams) => this.context.getDataLoader()
+                                .loadChunk(Object.assign(Object.assign({}, chunkParams), { id: lookupEntity.id }))
+                        }
+                    });
+                    this.context.getDataLoader()
+                        .loadChunk({ offset: 0, limit: 1000, needTotal: true, sourceId: lookupEntity.id })
+                        .then(data => {
+                        for (const col of data.table.columns.getItems()) {
+                            const attrs = lookupEntity.attributes.filter(attr => attr.id == col.id && (attr.isPrimaryKey || attr.showInLookup));
+                            if (attrs.length) {
+                                lookupTable.columns.add(col);
+                            }
+                        }
+                        lookupTable.setTotal(data.total);
+                        for (const row of data.table.getCachedRows()) {
+                            lookupTable.addRow(row);
+                        }
+                        const ds = new DefaultDialogService();
+                        let gridSlot = null;
+                        let selectedSlot = null;
+                        let widgetSlot;
+                        const slot = domel('div')
+                            .addClass(`kfrm-form`)
+                            .addChild('div', b => b
+                            .addClass(`kfrm-field`)
+                            .addChild('label', b => b
+                            .addText(i18n.getText('LookupSelectedItem'))
+                            .toDOM())
+                            .addChild('div', b => selectedSlot = b
+                            .addText('None')
+                            .toDOM()))
+                            .addChild('div', b => widgetSlot = b.toDOM())
+                            .addChild('div', b => b
+                            .addClass('kfrm-control')
+                            .addChild('div', b => gridSlot = b.toDOM()))
+                            .toDOM();
+                        let selectedValue = inputEl.value;
+                        const getValue = (row, colId) => {
+                            if (row instanceof DataRow) {
+                                return row.getValue(colId);
+                            }
+                            const property = colId.substring(colId.lastIndexOf('.') + 1);
+                            return row[property];
+                        };
+                        const updateSelectedValue = (row) => {
+                            selectedSlot.innerHTML = lookupTable.columns
+                                .getItems()
+                                .map(col => {
+                                return `<b>${col.label}:</b> ${getValue(row, col.id)}`;
+                            })
+                                .join(', ');
+                        };
+                        if (selectedValue) {
+                            const attr = lookupEntity.getFirstPrimaryAttr();
+                            const key = attr.id.substring(attr.id.lastIndexOf('.') + 1);
+                            this.context.fetchRecord({ [key]: selectedValue }, lookupEntity.id)
+                                .then(data => {
+                                if (data.entity) {
+                                    updateSelectedValue(data.entity);
+                                }
+                            })
+                                .catch(error => {
+                                console.error(error);
+                            });
+                        }
+                        const lookupGrid = new EasyGrid({
+                            slot: gridSlot,
+                            dataTable: lookupTable,
+                            fixHeightOnFirstRender: true,
+                            paging: {
+                                pageSize: 10
+                            },
+                            onActiveRowChanged: (ev) => {
+                                lookupGrid.getData().getRow(ev.rowIndex)
+                                    .then((row) => {
+                                    selectedValue = row.getValue(attr.lookupDataAttr);
+                                    updateSelectedValue(row);
+                                });
+                            }
+                        });
+                        ds.open({
+                            title: i18n.getText('LookupDlgCaption')
+                                .replace('{entity}', lookupEntity.caption),
+                            body: slot,
+                            arrangeParents: true,
+                            beforeOpen: () => {
+                                const dataFilter = this.context.createFilter(lookupEntity.id, lookupGrid.getData(), true);
+                                new TextFilterWidget(widgetSlot, lookupGrid, dataFilter, { instantMode: true, focus: true });
+                            },
+                            onSubmit: () => {
+                                inputEl.value = selectedValue;
+                                return true;
+                            },
+                            onDestroy: () => {
+                                lookupGrid.destroy();
+                                // return focus on button
+                                b.toDOM().focus();
+                            }
+                        });
+                    });
+                }));
+        });
+    }
+    setupDateTimeField(parent, attr, value, readOnly, hidden) {
+        const horizClass = isIE
+            ? 'kfrm-fields-ie is-horizontal'
+            : 'kfrm-fields is-horizontal';
+        const editFormat = getEditDateTimeFormat(attr.dataType);
+        let inputEl;
+        const mask = editFormat
+            .replace('yyyy', '9999')
+            .replace('MM', '99')
+            .replace('dd', '99')
+            .replace('HH', '99')
+            .replace('mm', '99')
+            .replace('ss', '99');
+        domel(parent)
+            .addChild('div', b => {
+            b
+                .addClass(horizClass)
+                .addChild('input', b => {
+                inputEl = b.toDOM();
+                b.name(attr.id);
+                b.type(hidden ? 'hidden' : this.resolveInputType(attr.dataType));
+                if (readOnly) {
+                    b.attr('readonly', '');
+                }
+                else {
+                    b.mask(mask);
+                    b.on('keypress', (ev) => this.applySumbit(ev))
+                        .on('input', ev => {
+                        b.removeClass('is-invalid');
+                        try {
+                            const newDate = utils.strToDateTime(inputEl.value, editFormat);
+                        }
+                        catch (e) {
+                            b.addClass('is-invalid');
+                        }
+                        finally {
+                        }
+                    })
+                        .on('blur', ev => {
+                        if (inputEl.value === mask.replace(/[9]/g, '_')) {
+                            inputEl.value = '';
+                        }
+                    });
+                }
+                b.value((utils.IsDefinedAndNotNull(value)
+                    ? i18n.dateTimeToStr(value, editFormat)
+                    : ''));
+            });
+            if (!readOnly)
+                b.addChild('button', b => b
+                    .addClass('kfrm-button')
+                    .attr('title', i18n.getText(attr.dataType !== DataType.Time
+                    ? 'CalendarBtnTitle'
+                    : 'TimerBtnTitle'))
+                    .addChild('i', b => b.addClass(attr.dataType !== DataType.Time
+                    ? 'ed-calendar-icon'
+                    : 'ed-timer-icon'))
+                    .on('click', (ev) => {
+                    let value;
+                    try {
+                        value = inputEl.value.length
+                            ? attr.dataType !== DataType.Time
+                                ? utils.strToDateTime(inputEl.value, editFormat)
+                                : utils.strToTime(inputEl.value)
+                            : new Date(new Date().setSeconds(0));
+                    }
+                    catch (_a) {
+                        value = new Date(new Date().setSeconds(0));
+                    }
+                    const pickerOptions = {
+                        zIndex: 9999999999,
+                        showCalendar: attr.dataType !== DataType.Time,
+                        showTimePicker: attr.dataType !== DataType.Date,
+                        onApply: (dateTime) => {
+                            dateTime.setSeconds(0);
+                            dateTime.setMilliseconds(0);
+                            inputEl.value = i18n.dateTimeToStr(dateTime, editFormat);
+                        }
+                    };
+                    const dtp = new DefaultDateTimePicker(pickerOptions);
+                    dtp.setDateTime(value);
+                    dtp.show(ev.target);
+                }).toDOM());
+        });
+    }
+    setupListField(parent, attr, value, values, readOnly) {
+        domel(parent)
+            .addChild('div', b => b
+            .addClass('kfrm-select full-width')
+            .addChild('select', b => {
+            if (readOnly)
+                b.attr('readonly', '');
+            b.attr('name', attr.id);
+            b.on('keypress', (ev) => this.applySumbit(ev));
+            if (values) {
+                for (let i = 0; i < values.length; i++) {
+                    const val = values[i];
+                    b.addOption({
+                        value: val.id,
+                        title: val.text,
+                        selected: i === 0
+                    });
+                }
+            }
+            b.value(value);
+        }));
+    }
+    setupFileField(parent, attr, readOnly, accept) {
+        domel(parent)
+            .addChild('input', b => {
+            if (readOnly)
+                b.attr('readonly', '');
+            b.name(attr.id)
+                .type(this.resolveInputType(attr.dataType));
+            b.attr('accept', accept);
+        });
+    }
+    setupTextField(parent, attr, value, readOnly, hidden) {
+        domel(parent)
+            .addChild('input', b => {
+            if (readOnly) {
+                b.attr('readonly', '');
+            }
+            b.type(hidden ? 'hidden' : this.resolveInputType(attr.dataType));
+            b.name(attr.id)
+                .type(this.resolveInputType(attr.dataType));
+            if (attr.dataType == DataType.Bool) {
+                if (value)
+                    b.attr('checked', '');
+            }
+            else {
+                b.on('keypress', (ev) => this.applySumbit(ev))
+                    .value(utils.IsDefinedAndNotNull(value)
+                    ? value.toString()
+                    : '');
+            }
+        });
+    }
+    setupTextArea(parent, attr, value, readOnly) {
+        // feature: modify size in value editor ??
+        domel(parent)
+            .addChild('textarea', b => {
+            if (readOnly)
+                b.attr('readonly', '');
+            b.attr('name', attr.id);
+            b.setStyle('height', `120px`);
+            b.value(utils.IsDefinedAndNotNull(value)
+                ? value.toString()
+                : '');
+        });
+    }
+    addFormField(parent, attr) {
+        const value = (this.params.values && attr.kind !== EntityAttrKind.Lookup)
+            ? this.params.values.getValue(attr.id)
+            : !this.params.isEditForm
+                ? attr.defaultValue
+                : undefined;
+        const editor = this.resolveEditor(attr);
+        const readOnly = this.params.isEditForm && (attr.isPrimaryKey || !attr.isEditable);
+        const required = !attr.isNullable;
+        if (isIE) {
+            parent = domel('div', parent)
+                .addClass('kfrm-field-ie')
+                .toDOM();
+        }
+        domel(parent)
+            .addChild('label', b => {
+            b.attr('for', attr.id);
+            b.addHtml(`${attr.caption} ${required ? '<sup style="color: red">*</sup>' : ''}: `);
+            if (attr.description) {
+                b.addChild('div', b => b
+                    .attr('title', attr.description)
+                    .addClass('question-mark')
+                    .setStyle('vertical-align', 'middle')
+                    .setStyle('display', 'inline-block'));
+            }
+        });
+        const hidden = attr.isPrimaryKey;
+        if (attr.kind === EntityAttrKind.Lookup) {
+            this.setupLookupField(parent, attr, readOnly, value);
+            return;
+        }
+        switch (editor.tag) {
+            case EditorTag.DateTime:
+                this.setupDateTimeField(parent, attr, value, readOnly, hidden);
+                break;
+            case EditorTag.List:
+                this.setupListField(parent, attr, value, editor.values, readOnly);
+                break;
+            case EditorTag.File:
+                this.setupFileField(parent, attr, readOnly, editor.accept);
+                break;
+            case EditorTag.Edit:
+            default:
+                if (editor.multiline) {
+                    this.setupTextArea(parent, attr, value, readOnly);
+                }
+                else {
+                    this.setupTextField(parent, attr, value, readOnly, hidden);
+                }
+                break;
+        }
+    }
+    resolveInputType(dataType) {
+        if (dataType === DataType.Bool)
+            return 'checkbox';
+        if (dataType === DataType.Blob)
+            return 'file';
+        return 'text';
+    }
+    resolveEditor(attr) {
+        let editor = attr.defaultEditor || new ValueEditor();
+        if (editor.tag == EditorTag.Unknown) {
+            if (utils.getDateDataTypes().indexOf(attr.dataType) >= 0) {
+                editor.tag = EditorTag.DateTime;
+            }
+            else {
+                editor.tag = EditorTag.Edit;
+            }
+        }
+        return editor;
+    }
+    applySumbit(ev) {
+        if (ev.keyCode === 13) {
+            this.sumbitCallback && this.sumbitCallback();
+            return false;
+        }
+        return false;
+    }
+    onSubmit(sumbitCallback) {
+        this.sumbitCallback = sumbitCallback;
+        return this;
+    }
+    build() {
+        let fb;
+        const formHtml = domel('div')
+            .addClass('kfrm-form')
+            .addChild('div', b => b
+            .addClass(`errors-block`)
+            .toDOM())
+            .addChild('div', b => {
+            b.addClass(`${isIE
+                ? 'kfrm-fields-ie col-ie-1-4 label-align-right'
+                : 'kfrm-fields col-a-1 label-align-right'}`);
+            fb = b;
+        })
+            .toDOM();
+        this.form['setHtmlInt'](formHtml);
+        for (const attr of this.context.getActiveEntity().attributes) {
+            if (!this.params.isEditForm && !attr.showOnCreate)
+                continue;
+            if (!attr.isPrimaryKey && this.params.isEditForm && !attr.showOnEdit) {
+                continue;
+            }
+            this.addFormField(fb.toDOM(), attr);
+        }
+        return this.form;
+    }
+}
+
+class ProgressBar {
+    constructor(slot) {
+        this.slot = slot;
+        this.hide();
+        this.slot.classList.add('ed-progress-bar');
+    }
+    show() {
+        this.slot.style.removeProperty('display');
+    }
+    hide() {
+        this.slot.style.display = 'none';
+    }
+}
+
+class EasyDataServerLoader {
+    constructor(context) {
+        this.context = context;
+    }
+    loadChunk(params) {
+        const url = this.context.resolveEndpoint('FetchDataset', { sourceId: params.sourceId || this.context.getActiveEntity().id });
+        delete params.sourceId;
+        this.context.startProcess();
+        const http = this.context.getHttpClient();
+        return http.post(url, params)
+            .then((result) => {
+            const dataTable = new EasyDataTable({
+                chunkSize: 1000
+            });
+            const resultSet = result.resultSet;
+            for (const col of resultSet.cols) {
+                dataTable.columns.add(col);
+            }
+            for (const row of resultSet.rows) {
+                dataTable.addRow(row);
+            }
+            let totalRecords = 0;
+            if (result.meta && result.meta.totalRecords) {
+                totalRecords = result.meta.totalRecords;
+            }
+            return {
+                table: dataTable,
+                total: totalRecords,
+                hasNext: !params.needTotal
+                    || params.offset + params.limit < totalRecords
+            };
+        })
+            .finally(() => {
+            this.context.endProcess();
+        });
+    }
+}
+
+class DataContext {
+    constructor(options) {
+        this.endpoints = new Map();
+        this.endpointVarsRegex = /\{.*?\}/g;
+        this.options = options || {};
+        this.http = new HttpClient();
+        this.model = new MetaData();
+        this.model.id = options.metaDataId || '__default';
+        this.dataLoader = new EasyDataServerLoader(this);
+        const dataTableOptions = Object.assign({ loader: this.dataLoader }, options.dataTable);
+        this.data = new EasyDataTable(dataTableOptions);
+        this.setDefaultEndpoints(this.options.endpoint || '/api/easydata');
+    }
+    getActiveEntity() {
+        return this.activeEntity;
+    }
+    setActiveSource(entityId) {
+        this.activeEntity = this.model.getRootEntity().subEntities
+            .filter(e => e.id == entityId)[0];
+    }
+    getMetaData() {
+        return this.model;
+    }
+    getData() {
+        return this.data;
+    }
+    getDataLoader() {
+        return this.dataLoader;
+    }
+    createFilter(sourceId, data, isLookup) {
+        return new TextDataFilter(this.dataLoader, data || this.getData(), sourceId || this.activeEntity.id, isLookup);
+    }
+    loadMetaData() {
+        const url = this.resolveEndpoint('GetMetaData');
+        this.startProcess();
+        return this.http.get(url)
+            .then(result => {
+            if (result.model) {
+                this.model.loadFromData(result.model);
+            }
+            return this.model;
+        })
+            .catch(error => {
+            console.error(`Error: ${error.message}. Source: ${error.sourceError}`);
+            return null;
+        })
+            .finally(() => {
+            this.endProcess();
+        });
+    }
+    getHttpClient() {
+        return this.http;
+    }
+    fetchDataset() {
+        this.data.clear();
+        return this.dataLoader.loadChunk({ offset: 0, limit: this.data.chunkSize, needTotal: true })
+            .then(result => {
+            for (const col of result.table.columns.getItems()) {
+                this.data.columns.add(col);
+            }
+            this.data.setTotal(result.total);
+            for (const row of result.table.getCachedRows()) {
+                this.data.addRow(row);
+            }
+            return this.data;
+        });
+    }
+    fetchRecord(keys, sourceId) {
+        const url = this.resolveEndpoint('FetchRecord', { sourceId: sourceId || this.activeEntity.id });
+        this.startProcess();
+        return this.http.get(url, { queryParams: keys })
+            .finally(() => this.endProcess());
+    }
+    createRecord(obj, sourceId) {
+        const url = this.resolveEndpoint('CreateRecord', { sourceId: sourceId || this.activeEntity.id });
+        this.startProcess();
+        return this.http.post(url, obj, { dataType: 'json' })
+            .finally(() => this.endProcess());
+    }
+    updateRecord(obj, sourceId) {
+        const url = this.resolveEndpoint('UpdateRecord', { sourceId: sourceId || this.activeEntity.id });
+        this.startProcess();
+        return this.http.post(url, obj, { dataType: 'json' })
+            .finally(() => this.endProcess());
+    }
+    deleteRecord(obj, sourceId) {
+        const url = this.resolveEndpoint('DeleteRecord', { sourceId: sourceId || this.activeEntity.id });
+        this.startProcess();
+        return this.http.post(url, obj, { dataType: 'json' })
+            .finally(() => this.endProcess());
+    }
+    setEndpoint(key, value) {
+        this.endpoints.set(key, value);
+    }
+    setEnpointIfNotExist(key, value) {
+        if (!this.endpoints.has(key))
+            this.endpoints.set(key, value);
+    }
+    resolveEndpoint(endpointKey, options) {
+        options = options || {};
+        let result = this.endpoints.get(endpointKey);
+        if (!result) {
+            throw endpointKey + ' endpoint is not defined';
+        }
+        let matches = result.match(this.endpointVarsRegex);
+        if (matches) {
+            for (let match of matches) {
+                let opt = match.substring(1, match.length - 1);
+                let optVal = options[opt];
+                if (!optVal) {
+                    if (opt == 'modelId') {
+                        optVal = this.model.getId();
+                    }
+                    else if (opt == 'sourceId') {
+                        optVal = this.activeEntity.id;
+                    }
+                    else {
+                        throw `Parameter [${opt}] is not defined`;
+                    }
+                }
+                result = result.replace(match, optVal);
+            }
+        }
+        return result;
+    }
+    startProcess() {
+        if (this.options.onProcessStart)
+            this.options.onProcessStart();
+    }
+    endProcess() {
+        if (this.options.onProcessEnd)
+            this.options.onProcessEnd();
+    }
+    setDefaultEndpoints(endpointBase) {
+        this.setEnpointIfNotExist('GetMetaData', combinePath(endpointBase, 'models/{modelId}'));
+        this.setEnpointIfNotExist('FetchDataset', combinePath(endpointBase, 'models/{modelId}/sources/{sourceId}/fetch'));
+        this.setEnpointIfNotExist('FetchRecord', combinePath(endpointBase, 'models/{modelId}/sources/{sourceId}/fetch'));
+        this.setEnpointIfNotExist('CreateRecord', combinePath(endpointBase, 'models/{modelId}/sources/{sourceId}/create'));
+        this.setEnpointIfNotExist('UpdateRecord', combinePath(endpointBase, 'models/{modelId}/sources/{sourceId}/update'));
+        this.setEnpointIfNotExist('DeleteRecord', combinePath(endpointBase, 'models/{modelId}/sources/{sourceId}/delete'));
+    }
+}
+
+class TypeValidator extends Validator {
+    constructor() {
+        super();
+        this.name = 'Type';
+    }
+    validate(attr, value) {
+        if (!utils.IsDefinedAndNotNull(value) || value == '')
+            return { successed: true };
+        if (utils.isNumericType(attr.dataType)) {
+            if (!utils.isNumeric(value))
+                return {
+                    successed: false,
+                    messages: [i18n.getText('NumberError')]
+                };
+            if (utils.isIntType(attr.dataType)
+                && !Number.isInteger(Number.parseFloat(value))) {
+                return {
+                    successed: false,
+                    messages: [i18n.getText('IntNumberError')]
+                };
+            }
+        }
+        return { successed: true };
+    }
+}
+
+class RequiredValidator extends Validator {
+    constructor() {
+        super();
+        this.name = 'Required';
+    }
+    validate(attr, value) {
+        if (!attr.isNullable && (!utils.IsDefinedAndNotNull(value)
+            || value === ''))
+            return {
+                successed: false,
+                messages: [i18n.getText('RequiredError')]
+            };
+        return { successed: true };
+    }
+}
+
+class EntityDataView {
+    constructor(slot, context, basePath, options) {
+        this.slot = slot;
+        this.context = context;
+        this.basePath = basePath;
+        this.options = {
+            showFilterBox: true,
+            showBackToEntities: true
+        };
+        this.defaultValidators = [new RequiredValidator(), new TypeValidator()];
+        this.options = utils.assignDeep(this.options, options || {});
+        this.dlg = new DefaultDialogService();
+        const ent = this.context.getActiveEntity();
+        if (!ent) {
+            throw "Can't find active entity for " + window.location.pathname;
+        }
+        this.slot.innerHTML += `<h1>${ent.captionPlural || ent.caption}</h1>`;
+        if (this.options.showBackToEntities) {
+            domel(this.slot)
+                .addChild('a', b => b
+                .attr('href', 'javascript:void(0)')
+                .text(`← ${i18n.getText('BackToEntities')}`)
+                .on('click', (e) => {
+                e.preventDefault();
+                setLocation(this.basePath);
+            }));
+        }
+        this.renderGrid();
+    }
+    syncGridColumnHandler(column) {
+        if (column.dataColumn) {
+            const attr = this.context.getMetaData().getAttributeById(column.dataColumn.id);
+            if (attr) {
+                column.isVisible = attr.showOnView;
+            }
+        }
+    }
+    renderGrid() {
+        this.context.fetchDataset()
+            .then(result => {
+            const gridSlot = document.createElement('div');
+            this.slot.appendChild(gridSlot);
+            gridSlot.id = 'Grid';
+            this.grid = new EasyGrid(utils.assignDeep({
+                slot: gridSlot,
+                dataTable: result,
+                paging: {
+                    pageSize: 15,
+                    allowPageSizeChange: true,
+                    pageSizeItems: [15, 30, 50, 100, 200]
+                },
+                showPlusButton: this.context.getActiveEntity().isEditable,
+                plusButtonTitle: i18n.getText('AddRecordBtnTitle'),
+                showActiveRow: false,
+                onPlusButtonClick: this.addClickHandler.bind(this),
+                onGetCellRenderer: this.manageCellRenderer.bind(this),
+                onRowDbClick: this.rowDbClickHandler.bind(this),
+                onSyncGridColumn: this.syncGridColumnHandler.bind(this)
+            }, this.options.grid || {}));
+            if (this.options.showFilterBox) {
+                let filterWidgetSlot;
+                const filterBarDiv = domel('div')
+                    .addClass(`kfrm-form`)
+                    .setStyle('margin', '10px 0px')
+                    .addChild('div', b => filterWidgetSlot = b.toDOM()).toDOM();
+                this.slot.insertBefore(filterBarDiv, gridSlot);
+                const dataFilter = this.context.createFilter();
+                this.filterWidget = new TextFilterWidget(filterWidgetSlot, this.grid, dataFilter);
+            }
+        });
+    }
+    manageCellRenderer(column, defaultRenderer) {
+        if (column.isRowNum) {
+            column.width = 110;
+            return (value, column, cell, rowEl) => {
+                const b = domel('div', cell)
+                    .addClass(`keg-cell-value`);
+                if (this.context.getActiveEntity().isEditable) {
+                    b.addChild('a', b => b
+                        .attr('href', 'javascript:void(0)')
+                        .text(i18n.getText('EditBtn'))
+                        .on('click', (ev) => this.editClickHandler(ev, parseInt(rowEl.getAttribute('data-row-idx')))))
+                        .addChild('span', b => b.text(' | '))
+                        .addChild('a', b => b
+                        .attr('href', 'javascript:void(0)')
+                        .text(i18n.getText('DeleteBtn'))
+                        .on('click', (ev) => this.deleteClickHandler(ev, parseInt(rowEl.getAttribute('data-row-idx')))));
+                }
+            };
+        }
+    }
+    addClickHandler() {
+        const activeEntity = this.context.getActiveEntity();
+        const form = new EntityEditFormBuilder(this.context)
+            .onSubmit(() => dlg.submit())
+            .build();
+        form.useValidators(this.defaultValidators);
+        const dlg = this.dlg.open({
+            title: i18n.getText('AddDlgCaption')
+                .replace('{entity}', activeEntity.caption),
+            body: form.getHtml(),
+            onSubmit: () => {
+                if (!form.validate())
+                    return false;
+                form.getData()
+                    .then(obj => this.context.createRecord(obj))
+                    .then(() => {
+                    return this.refreshData();
+                })
+                    .catch((error) => {
+                    this.processError(error);
+                });
+            }
+        });
+    }
+    editClickHandler(ev, rowIndex) {
+        this.grid.getData().getRow(rowIndex)
+            .then(row => {
+            if (row) {
+                this.showEditForm(row);
+            }
+        });
+    }
+    showEditForm(row) {
+        const activeEntity = this.context.getActiveEntity();
+        const form = new EntityEditFormBuilder(this.context, { isEditForm: true, values: row })
+            .onSubmit(() => dlg.submit())
+            .build();
+        form.useValidators(this.defaultValidators);
+        const dlg = this.dlg.open({
+            title: i18n.getText('EditDlgCaption')
+                .replace('{entity}', activeEntity.caption),
+            body: form.getHtml(),
+            onSubmit: () => {
+                if (!form.validate())
+                    return false;
+                form.getData()
+                    .then(obj => this.context.updateRecord(obj))
+                    .then(() => {
+                    return this.refreshData();
+                })
+                    .catch((error) => {
+                    this.processError(error);
+                });
+            }
+        });
+    }
+    rowDbClickHandler(ev) {
+        if (this.context.getActiveEntity().isEditable) {
+            this.showEditForm(ev.row);
+        }
+    }
+    deleteClickHandler(ev, rowIndex) {
+        this.grid.getData().getRow(rowIndex)
+            .then(row => {
+            if (row) {
+                const activeEntity = this.context.getActiveEntity();
+                const keyAttrs = activeEntity.getPrimaryAttrs();
+                const keyVals = keyAttrs.map(attr => row.getValue(attr.id));
+                const keys = keyAttrs.reduce((val, attr, index) => {
+                    const property = attr.id.substring(attr.id.lastIndexOf('.') + 1);
+                    val[property] = keyVals[index];
+                    return val;
+                }, {});
+                this.dlg.openConfirm(i18n.getText('DeleteDlgCaption')
+                    .replace('{entity}', activeEntity.caption), i18n.getText('DeleteDlgMessage')
+                    .replace('{recordId}', Object.keys(keys)
+                    .map(key => `${key}:${keys[key]}`).join(';')))
+                    .then((result) => {
+                    if (result) {
+                        this.context.deleteRecord(keys)
+                            .then(() => {
+                            return this.refreshData();
+                        })
+                            .catch((error) => {
+                            this.processError(error);
+                        });
+                    }
+                });
+            }
+        });
+    }
+    processError(error) {
+        this.dlg.open({
+            title: 'Ooops, something went wrong',
+            body: error.message,
+            closable: true,
+            cancelable: false
+        });
+    }
+    refreshData() {
+        return this.context.fetchDataset()
+            .then(() => {
+            let processed = false;
+            if (this.filterWidget) {
+                processed = this.filterWidget.applyFilter(false);
+            }
+            if (!processed) {
+                this.grid.refresh();
+            }
+        });
+    }
+}
+
+class RootDataView {
+    constructor(slot, context, basePath) {
+        this.slot = slot;
+        this.context = context;
+        this.basePath = basePath;
+        this.metaData = this.context.getMetaData();
+        this.slot.innerHTML += `<h1>${i18n.getText('RootViewTitle')}</h1>`;
+        this.renderEntitySelector();
+    }
+    renderEntitySelector() {
+        const entities = this.metaData.getRootEntity().subEntities;
+        if (this.slot) {
+            domel(this.slot)
+                .addChild('div', b => b
+                .addClass('ed-root')
+                .addChild('div', b => b
+                .addClass('ed-menu-description')
+                .addText(i18n.getText(!this.metaData.isEmpty() ? 'EntityMenuDesc' : 'ModelIsEmpty')))
+                .addChild('ul', b => {
+                b.addClass('ed-entity-menu');
+                entities.forEach(ent => {
+                    b.addChild('li', b => {
+                        b.addClass('ed-entity-item')
+                            .on('click', () => {
+                            setLocation(`${this.basePath}/${decodeURIComponent(ent.id)}`);
+                        })
+                            .addChild('div', b => {
+                            b.addClass('ed-entity-item-caption')
+                                .addText(ent.captionPlural || ent.caption);
+                        });
+                        if (ent.description) {
+                            b.addChild('div', b => {
+                                b.addClass('ed-entity-item-descr')
+                                    .addText(`${ent.description}`);
+                            });
+                        }
+                    });
+                });
+            }));
+        }
+    }
+}
+
+class EasyDataViewDispatcher {
+    constructor(options) {
+        this.options = {
+            container: '#EasyDataContainer',
+            basePath: 'easydata'
+        };
+        this.onSetLocation = () => {
+            this.setActiveView();
+        };
+        this.attach = () => {
+            window.addEventListener('ed_set_location', this.onSetLocation);
+            window.addEventListener('popstate', this.onSetLocation);
+        };
+        this.options = utils.assign(this.options, options || {});
+        if (this.options.rootEntity) {
+            this.options.showBackToEntities = false;
+            this.basePath = '/';
+        }
+        else {
+            this.basePath = this.normalizeBasePath(this.options.basePath);
+        }
+        this.setContainer(this.options.container);
+        const progressBarSlot = document.createElement('div');
+        const bar = new ProgressBar(progressBarSlot);
+        const parent = this.container.parentElement;
+        parent.insertBefore(progressBarSlot, parent.firstElementChild);
+        this.context = new DataContext({
+            endpoint: this.options.endpoint,
+            dataTable: this.options.dataTable,
+            onProcessStart: () => bar.show(),
+            onProcessEnd: () => bar.hide()
+        });
+    }
+    normalizeBasePath(basePath) {
+        basePath = this.trimSlashes(basePath);
+        const fullPath = decodeURIComponent(window.location.pathname);
+        const idx = fullPath.toLocaleLowerCase().indexOf(basePath);
+        return idx >= 0 ? fullPath.substring(0, idx + basePath.length) : '/';
+    }
+    trimSlashes(path) {
+        return path.replace(/^\/|\/$/g, '');
+    }
+    setContainer(container) {
+        if (!container) {
+            throw 'Container is undefined';
+        }
+        if (typeof container === 'string') {
+            if (container.length) {
+                if (container[0] === '.') {
+                    const result = document.getElementsByClassName(container.substring(1));
+                    if (result.length)
+                        this.container = result[0];
+                }
+                else {
+                    if (container[0] === '#') {
+                        container = container.substring(1);
+                    }
+                    this.container = document.getElementById(container);
+                }
+                if (!this.container) {
+                    throw Error('Unrecognized `container` parameter: ' + container + '\n'
+                        + 'It must be an element ID, a class name (starting with .) or an HTMLElement object itself.');
+                }
+            }
+        }
+        else {
+            this.container = container;
+        }
+    }
+    getActiveSourceId() {
+        if (this.options.rootEntity)
+            return this.options.rootEntity;
+        const path = decodeURIComponent(window.location.pathname);
+        const idIndex = this.basePath.length + 1;
+        return idIndex < path.length ? path.substring(idIndex) : null;
+    }
+    run() {
+        this.attach();
+        return this.context.loadMetaData()
+            .then(() => {
+            this.setActiveView();
+        })
+            .catch(error => console.error(error));
+    }
+    setActiveView() {
+        this.clear();
+        const sourceId = this.getActiveSourceId();
+        if (sourceId) {
+            this.context.setActiveSource(sourceId);
+            window['EDView'] = new EntityDataView(this.container, this.context, this.basePath, this.options);
+        }
+        else {
+            window['EDView'] = new RootDataView(this.container, this.context, this.basePath);
+        }
+    }
+    clear() {
+        this.container.innerHTML = '';
+        this.context.getData().clear();
+    }
+    detach() {
+        window.removeEventListener('ed_set_location', this.onSetLocation);
+        window.removeEventListener('popstate', this.onSetLocation);
+    }
+}
+
+function addEasyDataCRUDTexts() {
+    i18n.updateDefaultTexts({
+        RequiredError: 'Value is required.',
+        NumberError: 'Value should be a number',
+        IntNumberError: 'Value should be an integer number',
+        DateTimeError: 'Invalid date or time value',
+        LookupSelectedItem: 'Selected item: ',
+        LookupDlgCaption: 'Select {entity}',
+        None: 'None',
+        NavigationBtnTitle: 'Navigation values',
+        CalendarBtnTitle: 'Open calendar',
+        TimerBtnTitle: 'Open timer',
+        AddBtnTitle: 'Add',
+        AddRecordBtnTitle: 'Add record',
+        EditBtn: 'Edit',
+        DeleteBtn: 'Delete',
+        SelectLink: '[ select ]',
+        AddDlgCaption: 'Create {entity}',
+        EditDlgCaption: 'Edit {entity}',
+        DeleteDlgCaption: 'Delete {entity}',
+        DeleteDlgMessage: 'Are you sure you want to remove this record: {{recordId}}?',
+        EntityMenuDesc: 'Click on an entity to view/edit its content',
+        BackToEntities: 'Back to entities',
+        SearchBtn: 'Search',
+        SearchInputPlaceholder: 'Search...',
+        RootViewTitle: 'Entities',
+        ModelIsEmpty: 'No entity was found.'
+    });
+}
+addEasyDataCRUDTexts();
+
+export { DataContext, EasyDataServerLoader, EasyDataViewDispatcher, EntityDataView, EntityEditForm, EntityEditFormBuilder, ProgressBar, RequiredValidator, RootDataView, TextDataFilter, TextFilterWidget, TypeValidator, Validator };