@operato/data-grist 9.0.0-beta.6 → 9.0.0-beta.62

package/dist/src/data-grist.js

@@ -1,1022 +0,0 @@
-import { __decorate } from "tslib";
-import './data-grid/data-grid.js';
-import './data-list/data-list.js';
-import './data-card/data-card.js';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query, queryAsync, state } from 'lit/decorators.js';
-import isEmpty from 'lodash-es/isEmpty.js';
-import isEqual from 'lodash-es/isEqual.js';
-import Headroom from '@operato/headroom';
-import { pulltorefresh } from '@operato/pull-to-refresh';
-import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles';
-import { SnapshotTaker, TimeCapsule } from '@operato/utils';
-import { buildConfig } from './configure/config-builder.js';
-import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGES, ZERO_PAGINATION } from './configure/zero-config.js';
-import { DataProvider } from './data-provider.js';
-import { ValidationReason } from './types.js';
-import { convertListParamToSearchString, convertSearchStringToListParam } from './utils/index.js';
-/**
- * A custom element for rendering data in a grid, list, or card format.
- *
- * @element ox-grist
- */
-let DataGrist = class DataGrist extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The rendering mode of the component, which can be 'GRID', 'LIST', or 'CARD'.
-         * Default is 'GRID'.
-         *
-         * @property {string}
-         */
-        this.mode = 'GRID';
-        /**
-         * The data to be displayed in the data grist.
-         *
-         * @property {GristData}
-         */
-        this.data = ZERO_DATA;
-        /**
-         * Indicates whether explicit fetching of data is enabled. If true, data will be fetched
-         * only when `fetch` method is called. Default is false.
-         *
-         * @property {boolean}
-         */
-        this.explicitFetch = false;
-        this.personalConfigProvider = {
-            load: () => {
-                return {};
-            },
-            save: (preference) => preference,
-            reset: () => { }
-        };
-        this._data = ZERO_DATA; // copy data, dirty data
-        this._config = ZERO_CONFIG; // compiled configuration
-        this._showSpinner = false;
-        this.lastLocation = {};
-        this.popstateEventHandler = ((e) => {
-            const { origin, pathname, search } = window.location;
-            if (this.lastLocation.origin &&
-                (this.lastLocation.origin !== origin ||
-                    this.lastLocation.pathname !== pathname ||
-                    this.lastLocation.search === search)) {
-                return;
-            }
-            this.lastLocation = {
-                origin,
-                pathname,
-                search
-            };
-            var { filters = [], sorters = [] } = convertSearchStringToListParam(search);
-            try {
-                if (!isEqual(filters, this.filters) || !isEqual(sorters, this.sorters)) {
-                    this.dispatchEvent(new CustomEvent('fetch-params-change', {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            filters,
-                            sorters,
-                            from: 'url-parameter'
-                        }
-                    }));
-                }
-            }
-            catch (e) {
-                console.error(`invalid fetch params on URL query string : ${e}`);
-            }
-        }).bind(this);
-        this.fetchParamsChangeEventHandler = ((e) => {
-            const { sorters, filters, from } = e.detail;
-            sorters && (this.sorters = sorters);
-            filters && (this.filters = filters);
-            if (!this.urlParamsSensitive || from === 'url-parameter') {
-                return;
-            }
-            const queryString = convertListParamToSearchString({ filters, sorters, base: window.location.search });
-            this.lastLocation.search = queryString ? `?${queryString}` : '';
-            const url = `${window.location.pathname}${this.lastLocation.search}`;
-            history.pushState({}, document.title, url);
-        }).bind(this);
-    }
-    async firstUpdated() {
-        // Mutation Observer를 사용하여 슬롯의 크기 변경을 감지하고 다시 그린다.
-        const observer = new ResizeObserver(mutationsList => {
-            this.setHeadroom();
-        });
-        observer.observe(this.head);
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        this.dataProvider = new DataProvider(this);
-        this.timeCapsule = new TimeCapsule(10);
-        this.snapshotTaker = new SnapshotTaker(this, this.timeCapsule);
-        this.addEventListener('fetch-params-change', this.fetchParamsChangeEventHandler);
-        await this.updateComplete;
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        this.removeEventListener('fetch-params-change', this.fetchParamsChangeEventHandler);
-        this.timeCapsule && this.timeCapsule.dispose();
-        this.snapshotTaker && this.snapshotTaker.dispose();
-        delete this.timeCapsule;
-        delete this.snapshotTaker;
-        (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.dispose();
-        this.resetPullToRefresh();
-    }
-    resetPullToRefresh() {
-        if (this.pulltorefreshHandle) {
-            this.pulltorefreshHandle();
-            delete this.pulltorefreshHandle;
-        }
-    }
-    async setPullToRefresh() {
-        this.resetPullToRefresh();
-        if (this.mode !== 'GRID' && this.fetchHandler) {
-            this.pulltorefreshHandle = pulltorefresh({
-                container: await this.wrap,
-                scrollable: this.grist.pullToRefreshTarget,
-                refresh: () => {
-                    return this.fetch(true);
-                }
-            });
-        }
-    }
-    applyUpdatedConfiguration() {
-        var _a, _b;
-        if (!this.personalConfig || !this.config) {
-            return;
-        }
-        const config = { ...this.config };
-        const columns = config.columns;
-        const { columns: personalColumns, sorters, pagination, mode } = this.personalConfig;
-        if (personalColumns) {
-            const xcolumns = columns.map((column) => {
-                const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name);
-                return personalColumn ? { ...column, ...personalColumn } : column;
-            });
-            function reorderList(a, b) {
-                // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
-                const result = new Array(a.length);
-                // b 배열에 없는 아이템은 원래 위치로 채움
-                a.forEach((item, index) => {
-                    if (!item.name || !b.find(bi => bi.name == item.name)) {
-                        result[index] = item;
-                    }
-                });
-                b.forEach(item => {
-                    const ai = a.find(ai => ai.name == item.name);
-                    if (ai) {
-                        result[result.findIndex(slot => slot === undefined)] = ai;
-                    }
-                });
-                return result;
-            }
-            // 배열 재정렬 실행
-            config.columns = reorderList(xcolumns, personalColumns);
-        }
-        if (pagination) {
-            config.pagination = pagination;
-        }
-        if (sorters) {
-            config.sorters = sorters;
-        }
-        if (mode) {
-            this.mode = mode;
-        }
-        this._config = buildConfig({
-            ...config
-        });
-        this.dispatchEvent(new CustomEvent('config-change', {
-            bubbles: true,
-            composed: true,
-            detail: this.compiledConfig
-        }));
-        this.pagination = this.compiledConfig.pagination || {};
-        if (!this.urlParamsSensitive) {
-            const sorters = (_a = this.compiledConfig) === null || _a === void 0 ? void 0 : _a.sorters;
-            const filters = (_b = this.compiledConfig) === null || _b === void 0 ? void 0 : _b.columns.filter(column => column.filter &&
-                'value' in column.filter &&
-                (typeof column.filter.value === 'boolean' ||
-                    column.filter.value)).map(column => {
-                const filter = column.filter;
-                return { name: column.name, operator: filter.operator, value: filter.value };
-            });
-            this.dispatchEvent(new CustomEvent('fetch-params-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    filters,
-                    sorters,
-                    from: 'config'
-                }
-            }));
-        }
-        if (this.dataProvider) {
-            const { limit, pages = ZERO_PAGES } = this._config.pagination || ZERO_PAGINATION;
-            this.dataProvider.page = 1;
-            this.dataProvider.limit = limit || pages[0] || ZERO_PAGES[0];
-        }
-        if (this.pendingFetch || (!this.urlParamsSensitive && !this.explicitFetch)) {
-            this.pendingFetch = false;
-            this.fetch();
-        }
-    }
-    setHeadroom() {
-        var _a;
-        (_a = this.headroom) === null || _a === void 0 ? void 0 : _a.destroy();
-        if (this.grist && this.head && this.head.style.display !== 'none') {
-            const style = getComputedStyle(this.grist);
-            this.orginPaddingTop = style.paddingTop || '0';
-            this.originMarginTop = style.marginTop || '0';
-            this.headroom = new Headroom(this.head, {
-                scroller: this.grist,
-                onTop: () => {
-                    this.grist.style.paddingTop = this.orginPaddingTop;
-                    this.originMarginTop = this.grist.style.marginTop;
-                    this.grist.style.marginTop = this.head.clientHeight + 'px';
-                },
-                onNotTop: () => {
-                    this.grist.style.marginTop = this.originMarginTop;
-                    this.orginPaddingTop = this.grist.style.paddingTop;
-                    this.grist.style.paddingTop = this.head.clientHeight + 'px';
-                }
-            });
-            this.headroom.init();
-        }
-        else if (this.orginPaddingTop) {
-            this.grist.style.paddingTop = this.orginPaddingTop;
-            this.grist.style.marginTop = this.originMarginTop;
-        }
-    }
-    render() {
-        const empty = !this._showSpinner && this._data.records.length == 0;
-        return html `
-      <slot name="headroom"> </slot>
-      <div id="wrap" @keydown=${(e) => this.onKeydown(e)}>
-        ${this.mode == 'GRID'
-            ? html `
-              <ox-grid
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                .pagination=${this.pagination || {}}
-                ?empty=${empty}
-              >
-                <slot name="setting" slot="setting"> </slot>
-              </ox-grid>
-            `
-            : this.mode == 'CARD'
-                ? html `
-                <ox-card
-                  id="grist"
-                  .config=${this.compiledConfig}
-                  .data=${this._data}
-                  .sorters=${this.sorters || []}
-                  .filters=${this.filters || []}
-                  ?empty=${empty}
-                >
-                </ox-card>
-              `
-                : html `
-                <ox-list
-                  id="grist"
-                  .config=${this.compiledConfig}
-                  .data=${this._data}
-                  .sorters=${this.sorters || []}
-                  .filters=${this.filters || []}
-                  ?empty=${empty}
-                >
-                </ox-list>
-              `}
-      </div>
-
-      <div id="spinner" ?show=${this._showSpinner}></div>
-    `;
-    }
-    /* for timecapsule feature */
-    onKeydown(e) {
-        if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
-            if (e.shiftKey) {
-                this.redo();
-            }
-            else {
-                this.undo();
-            }
-        }
-    }
-    /**
-     * Gets the current state of the component. The state includes information about the
-     * dirty records and their changes.
-     *
-     * @getter
-     * @public
-     * @type {string}
-     */
-    get state() {
-        return JSON.stringify(this.dirtyData);
-    }
-    /**
-     * Undoes the previous change in the component's data by restoring it to the previous state.
-     * This method is part of the TimeCapsule feature, allowing users to revert changes.
-     */
-    undo() {
-        var _a, _b;
-        if (!((_a = this.timeCapsule) === null || _a === void 0 ? void 0 : _a.backwardable)) {
-            return;
-        }
-        this._data = JSON.parse((_b = this.timeCapsule) === null || _b === void 0 ? void 0 : _b.backward());
-    }
-    /**
-     * Redoes the previously undone change in the component's data by restoring it to the next state.
-     * This method is part of the TimeCapsule feature, allowing users to reapply changes.
-     */
-    redo() {
-        var _a, _b;
-        if (!((_a = this.timeCapsule) === null || _a === void 0 ? void 0 : _a.forwardable)) {
-            return;
-        }
-        this._data = JSON.parse((_b = this.timeCapsule) === null || _b === void 0 ? void 0 : _b.forward());
-    }
-    /**
-     * Fetches data from a data source and updates the component's data. This method is used to retrieve
-     * new data or refresh the existing data in the component.
-     *
-     * @method
-     * @param {boolean} reset - If true, the method resets the scroll position to the top.
-     */
-    async fetch(reset = true) {
-        var _a, _b;
-        if (this.compiledConfig === ZERO_CONFIG) {
-            /* avoid to be here */
-            console.warn('grist is not configured yet.');
-            this.pendingFetch = true;
-            return;
-        }
-        if (reset && this.grist) {
-            /*
-             * scroll 의 현재위치에 의해서 scroll 이벤트가 발생할 수 있으므로, 이를 방지하기 위해서 스크롤의 위치를 TOP으로 옮긴다.
-             * (scroll 이 첫페이지 크기 이상으로 내려가 있는 경우, 첫페이지부터 다시 표시하는 경우에, scroll 이벤트가 발생한다.)
-             */
-            this.grist.scrollTop = 0;
-        }
-        if (this.dataProvider) {
-            let { limit: initLimit, page: initPage, infinite } = this.compiledConfig.pagination || {};
-            let { limit = initLimit || ZERO_PAGINATION.limit, page = initPage || ZERO_PAGINATION.page } = this.dataProvider;
-            if (infinite || this.mode !== 'GRID') {
-                await this.dataProvider.attach(reset);
-            }
-            else {
-                await this.dataProvider.fetch({
-                    limit,
-                    page,
-                    sorters: this.sorters || ((_a = this.compiledConfig) === null || _a === void 0 ? void 0 : _a.sorters),
-                    sortings: this.sorters || ((_b = this.compiledConfig) === null || _b === void 0 ? void 0 : _b.sorters),
-                    filters: this.filters
-                });
-                this.pagination && (this.pagination.limit = limit);
-            }
-        }
-    }
-    async updated(changes) {
-        var needToSetPullToRefresh = false;
-        if (changes.has('filters')) {
-            await this.requestUpdate();
-        }
-        if (changes.has('sorters')) {
-            await this.requestUpdate();
-        }
-        if (changes.has('personalConfigProvider')) {
-            this.personalConfig = await this.personalConfigProvider.load();
-        }
-        else if (changes.has('config') || changes.has('personalConfig')) {
-            this.applyUpdatedConfiguration();
-        }
-        if (changes.has('fetchHandler')) {
-            this.dataProvider && (this.dataProvider.fetchHandler = this.fetchHandler);
-            needToSetPullToRefresh = true;
-        }
-        if (changes.has('fetchOptions')) {
-            this.dataProvider && (this.dataProvider.fetchOptions = this.fetchOptions);
-        }
-        if (changes.has('data')) {
-            this.reset();
-        }
-        if (changes.has('mode')) {
-            if (this.mode === 'GRID') {
-                this.style.removeProperty('--ox-grist-padding');
-            }
-            else {
-                this.style.setProperty('--ox-grist-padding', '0');
-            }
-            needToSetPullToRefresh = true;
-            this.setHeadroom();
-        }
-        if (changes.has('selectedRecords')) {
-            var { records } = this.data || [];
-            var selectedRecords = this.selectedRecords || [];
-            var _records = this.dirtyData.records;
-            /* 원본데이타에서 index를 찾아서, 복사본 데이타의 selected를 설정한다. */
-            selectedRecords.forEach(selected => {
-                var index = records.indexOf(selected);
-                var record = _records[index];
-                if (record) {
-                    record['__selected__'] = true;
-                }
-            });
-            /* update _data property intentionally */
-            this.refresh();
-        }
-        if (changes.has('urlParamsSensitive')) {
-            if (this.urlParamsSensitive) {
-                //@ts-ignore
-                this.popstateEventHandler(); // call for the first time
-                window.addEventListener('popstate', this.popstateEventHandler);
-            }
-            else {
-                window.removeEventListener('popstate', this.popstateEventHandler);
-            }
-        }
-        if (needToSetPullToRefresh) {
-            await this.setPullToRefresh();
-        }
-    }
-    /**
-     * Represents the compiled configuration of the component, which includes various settings and
-     * column configurations. You can access this property to get information about how the component
-     * is configured.
-     *
-     * @getter
-     * @public
-     * @type  {GristConfig}
-     */
-    get compiledConfig() {
-        return this._config;
-    }
-    /**
-     * Returns the dirty data in the component, which includes the records that have been added,
-     * modified, or deleted but have not been committed to the main data yet.
-     *
-     * @getter
-     * @public
-     * @type  {GristData} - An object representing the dirty data.
-     */
-    get dirtyData() {
-        var _a;
-        return ((_a = this.grist) === null || _a === void 0 ? void 0 : _a.data) || {};
-    }
-    /**
-     * Returns an array of GristRecord objects representing the records in the dirty state. These are
-     * the records that have been added, modified, or deleted but have not been committed to the main
-     * data yet.
-     *
-     * @getter
-     * @public
-     * @type  {GristRecord[]} - An array of GristRecord objects representing the dirty records.
-     */
-    get dirtyRecords() {
-        var { records = [] } = this.dirtyData;
-        return records.filter(record => record['__dirty__']);
-    }
-    /**
-     * Exports a list of patches representing the changes in the dirty state of records. Each patch
-     * contains information about whether a record was added, modified, or deleted, along with the
-     * record's unique identifier and the changed field values.
-     *
-     * @param {Object} options - Export options that control the format of the patch list.
-     * @param {string} options.flagName - The name of the flag field in the patch indicating the change type (default: 'patchFlag').
-     * @param {string} options.addedFlag - The flag value for added records (default: '+').
-     * @param {string} options.deletedFlag - The flag value for deleted records (default: '-').
-     * @param {string} options.modifiedFlag - The flag value for modified records (default: 'M').
-     * @param {string} options.idField - The name of the unique identifier field (default: 'id').
-     * @returns {Object[]} - An array of objects representing the patches.
-     */
-    exportPatchList({ flagName = 'patchFlag', addedFlag = '+', deletedFlag = '-', modifiedFlag = 'M', idField = 'id' }) {
-        let dirtyRecords = this.dirtyRecords;
-        if (!dirtyRecords || dirtyRecords.length == 0) {
-            return [];
-        }
-        return dirtyRecords.map(record => {
-            let flag = record.__dirty__;
-            let patch = {
-                [flagName]: flag == 'M' ? modifiedFlag : flag == '+' ? addedFlag : deletedFlag
-            };
-            if (idField in record && record[idField]) {
-                patch[idField] = record[idField];
-            }
-            for (let key in record.__dirtyfields__) {
-                patch[key] = record[key];
-            }
-            return patch;
-        });
-    }
-    /**
-     * Exports the selected records or all records in the component, depending on the specified options.
-     * You can use this method to export data from the component in various formats or for different purposes.
-     *
-     * @param {Object} options - Export options that control the behavior of the export.
-     * @param {boolean} options.ifSelectedOnly - If true, exports only the selected records. If false, exports all records.
-     * @param {boolean} options.includeHiddenField - If true, includes hidden fields in the exported data.
-     * @returns {Object[]} - An array of objects representing the exported records.
-     */
-    exportRecords({ ifSelectedOnly = true, includeHiddenField = true } = {}) {
-        let records = ifSelectedOnly ? this.selected : this.data.records;
-        if (ifSelectedOnly && (!records || records.length == 0)) {
-            records = this.data.records;
-        }
-        let columns = this.compiledConfig.columns.filter(column => column.type !== 'gutter');
-        if (!includeHiddenField) {
-            columns = columns.filter(column => !column.hidden);
-        }
-        let columnNames = columns.map(column => column.name);
-        return records.map(item => {
-            return columnNames.reduce((record, name) => {
-                record[name] = item[name];
-                return record;
-            }, {});
-        });
-    }
-    /**
-     * Gets the currently selected records in the component. It returns an array of GristRecord objects
-     * that are currently selected. You can access this getter to retrieve the selected records.
-     *
-     * @getter
-     * @public
-     * @type {GristRecord[]}
-     */
-    get selected() {
-        var _a;
-        var { records = [] } = (_a = this.grist) === null || _a === void 0 ? void 0 : _a.data;
-        return records.filter(record => record['__selected__']);
-    }
-    /**
-     * Sets the currently selected records in the component. You can use this setter to programmatically
-     * select specific records by providing an array of GristRecord objects to be selected.
-     *
-     * @setter
-     * @public
-     * @type {GristRecord[]}
-     */
-    set selected(selected) {
-        if (!this.grist) {
-            console.warn('grist not ready');
-            return;
-        }
-        selected.forEach(record => (record.__selected__ = true));
-        this.refresh();
-    }
-    /**
-     * Selects records in the component based on the provided selector function. You can use this method
-     * to programmatically select specific records in the component.
-     *
-     * @method
-     * @param {GristSelectFunction} selector - A function that determines which records to select.
-     * @param {boolean} reset - If true, clears the previous selection before applying the new one.
-     *                         If false, adds to the existing selection.
-     */
-    select(selector, reset = false) {
-        var _a;
-        var { records = [] } = (_a = this.grist) === null || _a === void 0 ? void 0 : _a.data;
-        if (reset) {
-            this.selected.forEach(record => (record.__selected__ = false));
-        }
-        records.filter(record => selector(record)).forEach(record => (record.__selected__ = true));
-        this.refresh();
-    }
-    /**
-     * Shows the loading spinner in the component's UI to indicate ongoing data loading or processing.
-     * You can call this method to display the spinner when necessary.
-     */
-    showSpinner() {
-        this._showSpinner = true;
-    }
-    /**
-     * Hides the loading spinner in the component's UI to indicate that data loading or processing has completed.
-     * You can call this method to hide the spinner when loading or processing is finished.
-     */
-    hideSpinner() {
-        this._showSpinner = false;
-    }
-    /**
-     * Focuses on the component, making it the active element in the document. This method is useful
-     * when you want to programmatically set focus to the component.
-     */
-    focus() {
-        super.focus();
-        this.grist.focus();
-    }
-    /**
-     * Commits the changes made in the dirty state to the component's data. This method updates the
-     * component's data with the changes made in the dirty state and clears the dirty state.
-     */
-    commit() {
-        var { page, total, limit, records } = this.grist.data;
-        this.data = {
-            page,
-            total,
-            limit,
-            records: records.map(record => {
-                var copied = {
-                    ...record
-                };
-                delete copied.__seq__;
-                delete copied.__dirty__;
-                delete copied.__selected__;
-                delete copied.__changes__;
-                delete copied.__dirtyfields__;
-                delete copied.__origin__;
-                delete copied.__depth__;
-                delete copied.__expanded__;
-                delete copied.__check_in_tree__;
-                delete copied.__children__;
-                delete copied.__typename;
-                return copied;
-            })
-        };
-    }
-    /**
-     * Shows the headroom element in the component. The headroom element is typically used for
-     * displaying additional information or controls at the top of the component.
-     */
-    showHeadroom() {
-        if (this.head) {
-            this.head.style.display = 'block';
-            this.setHeadroom();
-        }
-    }
-    /**
-     * Hides the headroom element in the component. This method hides the additional information
-     * or controls displayed at the top of the component.
-     */
-    hideHeadroom() {
-        if (this.head) {
-            this.head.style.display = 'none';
-            this.setHeadroom();
-        }
-    }
-    /**
-     * Toggles the visibility of the headroom element in the component. If the headroom element is
-     * currently visible, this method hides it. If it's hidden, this method shows it.
-     */
-    toggleHeadroom() {
-        if (this.head) {
-            const display = this.head.style.display;
-            this.head.style.display = display !== 'none' ? 'none' : 'block';
-            this.setHeadroom();
-        }
-    }
-    /**
-     * Forced internal data to be reflected on the screen
-     * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
-     * Therefore, it will be deprecated.
-     * @method
-     */
-    refresh() {
-        this.grist.refresh();
-    }
-    /**
-     * Resets the component's data to its original state before any changes were made.
-     * This method discards all unsaved changes and restores the data to its initial state.
-     *
-     * @method
-     * @public
-     */
-    reset() {
-        var _a, _b;
-        // TODO tree 형태의 데이타로 _data를 만들 때, children, collapsed 등을 감안한다.
-        var { limit = ZERO_PAGINATION.limit, page = ZERO_PAGINATION.page, total = ZERO_PAGINATION.total, records = [] } = this.data || ZERO_PAGINATION;
-        const { childrenProperty, expanded } = this.compiledConfig.tree;
-        /* 원본 데이타를 남기고, 복사본(_data)을 사용한다. */
-        records = [].concat(...records.map((record, idx) => this.traverseReset(record, this.mode == 'GRID' ? (page - 1) * limit + idx + 1 : idx + 1, 0, childrenProperty, expanded)));
-        if (childrenProperty) {
-            records = [].concat(...records.map(record => this.traverseExpanded(record)));
-        }
-        this._data = {
-            limit,
-            page,
-            total,
-            records
-        };
-        (_a = this.timeCapsule) === null || _a === void 0 ? void 0 : _a.reset();
-        (_b = this.snapshotTaker) === null || _b === void 0 ? void 0 : _b.take(true);
-    }
-    traverseReset(record, seq, __depth__, childrenProperty, expanded) {
-        const copied = {
-            ...record,
-            __seq__: seq,
-            __origin__: record
-        };
-        if (childrenProperty) {
-            const children = record[childrenProperty];
-            const __expanded__ = expanded(record);
-            const __children__ = (children || []).map(child => this.traverseReset(child, seq, __depth__ + 1, childrenProperty, expanded));
-            Object.assign(copied, { __depth__, __children__, __expanded__ });
-        }
-        return copied;
-    }
-    traverseExpanded(record) {
-        const { __expanded__, __children__ = [] } = record;
-        if (__expanded__ && __children__.length > 0) {
-            return [record].concat(...__children__.map(child => this.traverseExpanded(child)));
-        }
-        else {
-            return [record];
-        }
-    }
-    /**
-     * Checks for dirty records in the component's data and marks them as dirty.
-     * Dirty records are those that have unsaved changes.
-     */
-    checkDirties() {
-        var _a;
-        const records = this.dirtyRecords;
-        const { columns = [] } = this.compiledConfig || {};
-        for (var record of records || []) {
-            var origin = record['__origin__'] || {};
-            var dirtyFields = (record['__dirtyfields__'] = columns
-                .filter(column => column.type !== 'gutter' && !isEqual(origin[column.name], record[column.name]))
-                .reduce((sum, column) => {
-                var name = column.name;
-                sum[name] = {
-                    before: origin[name],
-                    after: record[name]
-                };
-                return sum;
-            }, {}));
-            if (record['__dirty__'] == 'M' && isEmpty(dirtyFields)) {
-                delete record['__dirty__'];
-            }
-        }
-        this._data = { ...this.dirtyData };
-        (_a = this.snapshotTaker) === null || _a === void 0 ? void 0 : _a.touch();
-    }
-    /**
-     * Clones the selected records in the component's data. It creates a copy of the selected records
-     * and marks them as new (added) records.
-     */
-    cloneSelectedRecords() {
-        const records = this.selected || [];
-        records.forEach(record => {
-            var cloned = {
-                __dirty__: '+'
-            };
-            this.compiledConfig.columns
-                .filter(column => column.record.editable)
-                .forEach(column => {
-                cloned[column.name] = record[column.name];
-            });
-            const rowIndex = this.dirtyData.records.findIndex(rec => rec === record);
-            this.dirtyData.records.splice(rowIndex + 1, 0, cloned);
-        });
-        this.checkDirties();
-    }
-    /**
-     * Adds child nodes to selected records in the component's tree data. It allows users to add child nodes
-     * to the selected parent records.
-     */
-    addChildNodes() {
-        const records = this.selected || [];
-        records.forEach(record => {
-            this.grist.addChildNode(record);
-        });
-    }
-    /**
-     * Adds sibling nodes to selected records in the component's tree data. It allows users to add sibling nodes
-     * to the selected records.
-     */
-    addSiblingNodes() {
-        const records = this.selected || [];
-        records.forEach(record => {
-            this.grist.addSiblingNode(record);
-        });
-    }
-    /**
-     * Deletes the selected records in the component's data. It removes the selected records from the data,
-     * optionally marking them as deleted.
-     *
-     * @method
-     * @param {boolean} dirty - If true, the method marks the records as deleted.
-     */
-    deleteSelectedRecords(dirty = true) {
-        const records = this.selected || [];
-        records.forEach(record => {
-            if (dirty) {
-                record.__dirty__ = '-';
-            }
-            const rowIndex = this.dirtyData.records.findIndex(rec => rec === record);
-            this.dirtyData.records.splice(rowIndex, 1);
-        });
-        this.checkDirties();
-    }
-    /**
-     * Adds a new record to the data grid. The added record is marked as newly created
-     * by setting the `__dirty__` flag to '+'. This flag indicates that the record
-     * is in a "new" state and hasn't been committed to the main data yet.
-     *
-     * @param {GristRecord} [record] - An optional record to add. If no record is provided,
-     * an empty record with the `__dirty__` flag set to '+' will be added.
-     */
-    addRecord(record) {
-        this._data = {
-            ...this._data,
-            records: [
-                ...this.dirtyData.records,
-                {
-                    ...record,
-                    __dirty__: '+'
-                }
-            ]
-        };
-    }
-    /**
-     * Retrieves the search text used for filtering records.
-     *
-     * @property {string}
-     */
-    get searchText() {
-        var _a, _b, _c, _d;
-        return ((_d = (_c = (_b = (_a = this.filters) === null || _a === void 0 ? void 0 : _a.find(filter => filter.operator === 'search')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.match(/^\%(.*)\%$/)) === null || _d === void 0 ? void 0 : _d[1]) || '';
-    }
-    /**
-     * Sets the search text for filtering records.
-     *
-     * @property {string}
-     */
-    set searchText(searchText) {
-        var filters = (this.filters || []).filter((filter) => filter.operator !== 'search');
-        if (searchText) {
-            const filtersConfig = this.compiledConfig.columns.filter(columnConfig => !!columnConfig.filter);
-            const searchColumns = filtersConfig.filter(columnConfig => {
-                const filter = columnConfig.filter;
-                return filter.operator === 'search';
-            });
-            filters = [
-                ...searchColumns.map((column) => {
-                    const { name } = column;
-                    return {
-                        name,
-                        operator: 'search',
-                        value: `%${searchText}%`
-                    };
-                }),
-                ...filters
-            ];
-        }
-        this.grist.dispatchEvent(new CustomEvent('fetch-params-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                filters
-            }
-        }));
-    }
-    /**
-     * Returns the current pagination limit.
-     * @returns {number} The current pagination limit value
-     */
-    getCurrentLimit() {
-        var _a;
-        return ((_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.limit) || ZERO_PAGINATION.limit;
-    }
-    /**
-     * Checks the validity of dirty records.
-     * @returns {Array<{record: GristRecord, invalidFields: Array<{field: string, reason: ValidationReason}>}>} List of invalid records and their corresponding invalid fields
-     */
-    checkDirtyRecordsValidity() {
-        var _a;
-        const records = this.dirtyRecords;
-        const validationResults = [];
-        for (const record of records) {
-            const invalidFields = [];
-            for (const column of this.compiledConfig.columns) {
-                if (((_a = column.record) === null || _a === void 0 ? void 0 : _a.mandatory) && (record[column.name] === undefined || record[column.name] === null)) {
-                    invalidFields.push({
-                        field: column.name,
-                        reason: ValidationReason.MANDATORY
-                    });
-                }
-                // Additional validation rules can be implemented here.
-            }
-            if (invalidFields.length > 0) {
-                validationResults.push({
-                    record,
-                    invalidFields
-                });
-            }
-        }
-        return validationResults;
-    }
-};
-DataGrist.styles = [
-    ScrollbarStyles,
-    HeadroomStyles,
-    SpinnerStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        background-color: var(--grist-background-color);
-        min-height: 120px;
-
-        overflow: hidden;
-
-        /* for pulltorefresh controller */
-        position: relative;
-
-        padding: var(--ox-grist-padding);
-
-        --md-icon-size: var(--grid-record-wide-fontsize);
-      }
-
-      #wrap {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-      }
-
-      ox-grid {
-        flex: 1;
-        border: var(--grid-wrap-container-border, 0px solid transparent);
-        border-width: var(--grid-wrap-container-border-width, 0px);
-      }
-
-      slot[name='headroom'] {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        box-sizing: border-box;
-        background-color: var(--grist-background-color);
-
-        z-index: 8;
-      }
-    `
-];
-__decorate([
-    property()
-], DataGrist.prototype, "mode", void 0);
-__decorate([
-    property()
-], DataGrist.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], DataGrist.prototype, "data", void 0);
-__decorate([
-    property({ type: Array })
-], DataGrist.prototype, "selectedRecords", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'explicit-fetch' })
-], DataGrist.prototype, "explicitFetch", void 0);
-__decorate([
-    property()
-], DataGrist.prototype, "fetchHandler", void 0);
-__decorate([
-    property()
-], DataGrist.prototype, "fetchOptions", void 0);
-__decorate([
-    property({ type: Array })
-], DataGrist.prototype, "filters", void 0);
-__decorate([
-    property({ type: Array })
-], DataGrist.prototype, "sorters", void 0);
-__decorate([
-    property({ type: Object })
-], DataGrist.prototype, "pagination", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'url-params-sensitive' })
-], DataGrist.prototype, "urlParamsSensitive", void 0);
-__decorate([
-    property({ type: Object })
-], DataGrist.prototype, "personalConfigProvider", void 0);
-__decorate([
-    state()
-], DataGrist.prototype, "personalConfig", void 0);
-__decorate([
-    state()
-], DataGrist.prototype, "_data", void 0);
-__decorate([
-    state()
-], DataGrist.prototype, "_config", void 0);
-__decorate([
-    state()
-], DataGrist.prototype, "_showSpinner", void 0);
-__decorate([
-    query('slot[name=headroom]')
-], DataGrist.prototype, "head", void 0);
-__decorate([
-    query('#grist')
-], DataGrist.prototype, "grist", void 0);
-__decorate([
-    queryAsync('#wrap')
-], DataGrist.prototype, "wrap", void 0);
-DataGrist = __decorate([
-    customElement('ox-grist')
-], DataGrist);
-export { DataGrist };
-//# sourceMappingURL=data-grist.js.map