@things-factory/meta-ui 10.1.246 → 10.1.248

package/dist-client/utils/meta-ui-util.js

@@ -1,2994 +0,0 @@
-// @ts-nocheck
-import '@material/web/icon/icon.js';
-import '@operato/data-grist/ox-record-creator.js';
-import 'ses';
-import { css, html, render, nothing } from 'lit';
-import { getEditor, getRenderer } from '@operato/data-grist';
-import { getValueGenerators } from '@operato/time-calculator';
-import moment from '@operato/moment-timezone-es';
-import { ScrollbarStyles, CommonGristStyles, CommonButtonStyles, ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles';
-import { MetaCrypto } from './meta-crypto';
-import { TermsUtil } from './terms-util';
-import { ValueUtil } from './value-util';
-import { ServiceUtil } from './service-util';
-import { UiUtil } from './ui-util';
-import { MetaApi } from './meta-api';
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop shortstop@hatiolab.com
- * @description 메타 UI에서 필요한 유틸리티 함수 정의
- */
-export class MetaUiUtil {
-    /**
-     * @description 메뉴 ID 정보로 메뉴 메타 정보 조회
-     ********************************************
-     * @param {String} menuId 메뉴 ID 값
-     * @returns {Object} 메뉴 메타 정보
-     */
-    static async findMenuMeta(menuId) {
-        let menu = await ServiceUtil.findOne('menu', menuId, 'template');
-        if (!menu) {
-            throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${menuId}` }));
-        }
-        if (!menu.template) {
-            throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${TermsUtil.tLabel('model')}` }));
-        }
-        this.menuId = menuId;
-        return JSON.parse(menu.template);
-    }
-    /**
-     * @description 메뉴 라우팅 정보로 메뉴 메타 정보 조회
-     **********************************************
-     * @param {String} menuRouting 메뉴 route 값
-     * @returns {Object} 메뉴 메타 정보 (암호)
-     */
-    static async getMenuMetaData(menuRouting) {
-        let filters = [{ name: 'routing', operator: 'eq', value: menuRouting }];
-        let data = await ServiceUtil.searchByPagination('menus', filters, null, 0, 0, 'id,template');
-        return data;
-    }
-    /**
-     * @description 메뉴 라우팅 정보로 메뉴 메타 정보 조회
-     **********************************************
-     * @param {Object} pageView
-     * @param {String} menuRouting 메뉴 route 값
-     * @returns {Object} 메뉴 메타 정보
-     */
-    static async findMenuMetaByRouting(pageView, menuRouting) {
-        let data = await MetaUiUtil.getMenuMetaData(menuRouting);
-        let menu = undefined;
-        if (!data || !data.records || data.records.length == 0) {
-            if (pageView.defaultPageConfig) {
-                menu = { id: menuRouting, template: pageView.defaultPageConfig };
-            }
-        }
-        else {
-            menu = data.records[0];
-            if (!menu.template && pageView.defaultPageConfig) {
-                menu.template = pageView.defaultPageConfig;
-            }
-        }
-        if (!menu) {
-            throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${menuRouting}` }));
-        }
-        else if (!menu.template) {
-            throw new Error(TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${TermsUtil.tLabel('model')}` }));
-        }
-        pageView.menuId = menu.id;
-        return JSON.parse(MetaCrypto.dec(menu.template));
-    }
-    /**
-     * @description 기본 그리스트 페이지 프로퍼티 리턴
-     *******************************************
-     * @returns {Object} 기본 그리스트 페이지 프로퍼티
-     */
-    static getBasicGristPageProperties() {
-        return {
-            /* 메뉴 메타 정보  */
-            menuInfo: Object, // 메뉴 기본 정보
-            gridConfig: Object, // 그리드 구성 정보
-            gridColumnConfig: Array, // 그리드 컬럼 정보
-            formColumnConfig: Array, // form 컬럼 정보
-            buttonConfig: Array, // 버튼 구성 정보
-            searchConfig: Array, // 서치폼 구성 정보
-            gqlInfo: String, // GraphQL 정보
-            gqlFetchField: String, // GraphQL 조회 필드
-            searchFormElement: String, // 화면에서 사용 되는 서치폼 (grist, filter, not)
-            useFilterForm: Boolean, // 그리드내 filter 폼 사용 여부
-            /* 화면 구성  */
-            gristConfigSet: Object, // 메타정보에서 변환된 그리드 구성 정보
-            formConfigSet: Array, // 메타정보에서 변환된 폼 구성 정보
-            useButtonExport: Boolean, // 내보내기 버튼 사용 여부
-            useButtonImport: Boolean, // 가져오기 버튼 사용 여부
-            useButtonAdd: Boolean, // 추가 버튼 사용 여부
-            gridMobileMode: String, // 모바일 기기에서 그리드 뷰
-            gridDeskMode: String, // 데스크탑에서 그리드 뷰
-            gridViewOptions: Array, // 그리드 뷰 옵션
-            gridMode: String, // 현재 그리드 뷰 모드
-            infinityPage: true, // 페이지 사용시 false
-            route_name: String, // Element 로드시 화면을 그릴 메뉴 정보,
-            parent_id: String, // 상세 폼 뷰 상위 데이터 ID
-            /* 속성 ? */
-            is_detail: {
-                // 페이지 컴포넌트 여부
-                type: Boolean,
-                converter(value) {
-                    let retVal = Boolean(value);
-                    return retVal;
-                }
-            },
-            is_popup: {
-                // 팝업 여부
-                type: Boolean,
-                converter(value) {
-                    let retVal = Boolean(value);
-                    return retVal;
-                }
-            },
-            is_activity: {
-                // 작업 결재 관련 화면에서 호출 여부
-                type: Boolean,
-                converter(value) {
-                    let retVal = Boolean(value);
-                    return retVal;
-                }
-            },
-            is_readonly: {
-                // 수정 불가 페이지
-                type: Boolean,
-                converter(value) {
-                    let retVal = Boolean(value);
-                    return retVal;
-                }
-            }
-        };
-    }
-    /**
-     * @description 메뉴 메타 정보를 조회한 후 파싱...
-     ********************************************
-     * @param {HTMLElement} pageView
-     * @returns {Object} 메뉴 메타 정보
-     */
-    static async getMenuMeta(pageView) {
-        // 1. 라우팅 추출 및 메뉴 메타 정보 조회
-        let currentRouting = pageView.isPage ? UiUtil.currentRouting() : pageView.route_name;
-        pageView.currentRouting = currentRouting;
-        let menuMetaData = await MetaUiUtil.findMenuMetaByRouting(pageView, currentRouting);
-        // 2. Activity 여부에 따라 버튼 / 검색 삭제
-        if (pageView.is_activity === true) {
-            menuMetaData.grid.option.grid_refresh_when_page_activated = false;
-            menuMetaData.grid.option.use_row_checker = false;
-            menuMetaData.grid.option.pages = 'unlimited';
-            menuMetaData.grid.use_filter_form = false;
-            menuMetaData.grid.button = [];
-            menuMetaData.button = menuMetaData.button.filter(x => x.name == 'add');
-        }
-        // 3. 화면이 읽기 전용인 경우 그리드 Configuration 처리
-        if (pageView.is_readonly === true) {
-            menuMetaData.grid_column.forEach(x => {
-                x.editable = false;
-            });
-            menuMetaData.button = menuMetaData.button.filter(x => x.name != 'add');
-        }
-        // 4. 필터 폼 사용 여부 강제 설정
-        if (pageView.use_filter_form === false) {
-            menuMetaData.grid.use_filter_form = false;
-        }
-        // 5. 필드 변경 이벤트 처리자 설정
-        menuMetaData.grid_column
-            .filter(x => x.change_event_handler)
-            .forEach(x => {
-            if (!pageView.fieldChangeHandlers)
-                pageView.fieldChangeHandlers = {};
-            pageView.fieldChangeHandlers[x.name] = x.change_event_handler;
-        });
-        // 6. 그리드 타입 통합 처리 : object, resource-object -> meta-object-selector, resource-code-selector -> meta-code-selector
-        menuMetaData.grid_column.forEach(x => {
-            if (['resource-object', 'object'].includes(x.type)) {
-                x.type = 'meta-object-selector';
-            }
-            else if (['resource-code-selector'].includes(x.type)) {
-                x.type = 'meta-code-selector';
-            }
-        });
-        // 7. 검색 필드의 검색 Operator가 in인 경우 디폴트 값을 배열로 변경
-        if (menuMetaData.search && menuMetaData.search.length > 0) {
-            menuMetaData.search.forEach(c => {
-                let value = c.value;
-                if (value && c.operator == 'in' && value.indexOf(',') > 0) {
-                    c.value = value.split(',');
-                }
-            });
-        }
-        // 8. 메뉴 메타 정보 리턴
-        return menuMetaData;
-    }
-    /**
-     * @description 파라미터로 받은 pageLimits로 페이지네이션 페이지 수를 표시
-     ***************************************************************
-     * @param {Array} 페이지네이션 페이지 수 배열
-     * @returns {Object} 페이지네이션 페이지 수
-     */
-    static getGristPaginationCustomConfig(...pageLimits) {
-        return { pages: pageLimits };
-    }
-    /**
-     * @description 그리스트 기본 gutter 설정 리턴
-     ********************************************
-     * @param {Boolean} useRowSelector 행 선택 기능 사용 여부
-     * @param {Boolean} multiple 여러 행 선택 가능 여부
-     * @returns {Object} 그리스트 기본 gutter 설정
-     */
-    static getGristGuttersConfig(useRowSelector, multiple) {
-        let configList = [
-            { type: 'gutter', gutterName: 'dirty' },
-            { type: 'gutter', gutterName: 'sequence' }
-        ];
-        if (useRowSelector) {
-            configList.push({ type: 'gutter', gutterName: 'row-selector', multiple: multiple });
-        }
-        return configList;
-    }
-    /**
-     * @description 그리스트 선택 모드 설정
-     ***************************************
-     * @returns {Object} 그리스트 선택 모드 설정
-     */
-    static getGristSelectableConfig(multiple) {
-        return { selectable: { multiple: multiple } };
-    }
-    /**
-     * @description 메뉴 메타 정보를 기반으로 그리드 설정 셋을 파싱하여 리턴
-     ************************************************************
-     * @param {Object} pageView 페이지
-     * @returns {Object} 그리드 설정 셋
-     */
-    static async parseGridConfigSet(pageView) {
-        // 0. GraphQL 예외 처리를 위한 오브젝트 초기 화
-        if (!pageView.gqlInfo)
-            pageView.gqlInfo = {};
-        if (!pageView.gqlInfo.query)
-            pageView.gqlInfo.query = {};
-        if (!pageView.gqlInfo.query.after_set_fields)
-            pageView.gqlInfo.query.after_set_fields = {};
-        if (!pageView.gqlInfo.mutation)
-            pageView.gqlInfo.mutation = {};
-        if (!pageView.gqlInfo.mutation.multiple)
-            pageView.gqlInfo.mutation.multiple = {};
-        if (!pageView.gqlInfo.mutation.multiple.skip_fields)
-            pageView.gqlInfo.mutation.multiple.skip_fields = [];
-        // 1. 그리드 옵션
-        let gridOption = MetaUiUtil.getGridOptionSet(pageView);
-        // 2. 그리드 리스트 설정
-        let gridList = MetaUiUtil.getGridListSet(pageView);
-        // 3. 그리드 row 설정
-        let gridRow = MetaUiUtil.getGridRowSet(pageView);
-        // 4. 그리드 버튼 설정
-        let gridButton = MetaUiUtil.getGridButtonSet(pageView);
-        // 5. 그리드 컬럼 설정
-        let gridColumns = await MetaUiUtil.getGridColumnSet(pageView);
-        // 6. 그리드 meta-object-selector 타입이면서 검색 조건에 해당하는 컬럼을 찾아 숨김 컬럼으로 등록
-        gridColumns
-            .filter(x => ['meta-object-selector'].includes(x.type))
-            .forEach(col => {
-            pageView.searchConfig
-                .filter(x => x.name == col.name)
-                .forEach(x => {
-                const options = col.record.options;
-                // 6.1. 검색 필드 명 설정
-                const filterName = options.referenceField ? options.referenceField : `${col.name}Id`;
-                // 6.2. 검색 필드 설정 찾기
-                const filterIdx = pageView.searchConfig.findIndex(item => {
-                    return item.name == col.name;
-                });
-                // 6.3. 검색 필드를 그리드 컬럼 리스트에 추가
-                gridColumns.push({
-                    type: 'meta-object-selector',
-                    header: col.header,
-                    name: filterName,
-                    hidden: true,
-                    record: {
-                        editable: false,
-                        mandatory: false,
-                        options: options
-                    },
-                    unusable: true
-                });
-                // 6.4. 조회시 skip 필드 추가
-                pageView.gqlInfo.query.after_set_fields[filterName] = 'x';
-                // 6.5. 저장시 skip 필드 추가
-                pageView.gqlInfo.mutation.multiple.skip_fields.push(filterName);
-                // 6.6. 검색 설정 이름 변경
-                pageView.searchConfig[filterIdx].name = filterName;
-                pageView.searchConfig[filterIdx].type = 'meta-object-selector';
-            });
-        });
-        // 7. 누적 계산 설정 컬럼 추출
-        let accumulatorCols = gridColumns.filter(col => (col.accumulator ? true : false));
-        if (accumulatorCols && accumulatorCols.length > 0) {
-            gridRow.accumulator = true;
-        }
-        // 8. default 그리드 gutter
-        let gutterConfigs = MetaUiUtil.getGristGuttersConfig(gridOption.use_row_checker, gridRow.selectable.multiple);
-        // 9. 필터 폼에 검색 조건 필드 정의
-        if (pageView.useFilterForm == true) {
-            gridColumns = MetaUiUtil.setGridColumnSearchOption(pageView, gridColumns);
-        }
-        // 10. 그리드 강조 설정
-        if (pageView.gridEmphasized) {
-            // 10.1. 그리드 row
-            if (pageView.gridEmphasized && pageView.gridEmphasized.row && pageView.gridEmphasized.row.length > 0) {
-                gridRow.classifier = function (recordData, rowIdx) {
-                    let settings = pageView.gridEmphasized.row;
-                    for (let idx = 0; idx < settings.length; idx++) {
-                        const logic = settings[idx].logic;
-                        const c = new Compartment({ record: recordData, rowIdx });
-                        const evalFunc = c.evaluate(`(record, rowIdx) => {
-                ${logic}
-            }`);
-                        if (evalFunc(recordData, rowIdx)) {
-                            return {
-                                emphasized: [settings[idx].backgroundColor, settings[idx].fontColor]
-                            };
-                        }
-                    }
-                };
-            }
-            // 10.2. 그리드 column
-            if (pageView.gridEmphasized && pageView.gridEmphasized.column) {
-                let columSetting = pageView.gridEmphasized.column;
-                Object.keys(columSetting).forEach(key => {
-                    let settings = columSetting[key];
-                    let colIdx = gridColumns.findIndex(x => x.name == key);
-                    if (!gridColumns[colIdx].record)
-                        gridColumns[colIdx].record = {};
-                    gridColumns[colIdx].record.classifier = function (recordData, rowIdx) {
-                        for (let idx = 0; idx < settings.length; idx++) {
-                            const logic = settings[idx].logic;
-                            const c = new Compartment({ record: recordData, rowIdx });
-                            const evalFunc = c.evaluate(`(record, rowIdx) => {
-                ${logic}
-              }`);
-                            if (evalFunc(recordData, rowIdx)) {
-                                return {
-                                    emphasized: [settings[idx].backgroundColor, settings[idx].fontColor]
-                                };
-                            }
-                        }
-                    };
-                });
-            }
-        }
-        // 11. 그리드 최종 Configuration
-        return {
-            list: gridList,
-            pagination: gridOption.pages,
-            sorters: gridOption.sorters,
-            rows: gridRow,
-            columns: [...gutterConfigs, ...gridButton, ...gridColumns]
-        };
-    }
-    /**
-     * @description 메뉴 메타 정보를 기반으로 폼 설정 셋을 파싱하여 리턴
-     ********************************************************
-     * @param {Object} pageView 페이지
-     * @returns {Object} 폼 설정 셋
-     */
-    static async parseFormConfigSet(pageView) {
-        let formColumnConfig = pageView.formColumnConfig;
-        let columns = [];
-        let defaultValueGenerators = Object.keys(getValueGenerators());
-        for (let idx = 0; idx < formColumnConfig.length; idx++) {
-            let { type = 'string', name = undefined, header = undefined, hidden = false, editable = true, mandatory = false, align = 'left', select_opt = undefined, object_opt = undefined, default_value = undefined } = formColumnConfig[idx];
-            // 컬럼 config 으로 변경 및 문자열 처리
-            let column = {
-                type: type,
-                name: name,
-                header_txt: ValueUtil.isEmpty(header) ? TermsUtil.tLabel(name) : TermsUtil.tLabel(header),
-                header: {
-                    renderer: function (column) {
-                        return column.header_txt;
-                    }
-                },
-                hidden: hidden,
-                record: {
-                    editable: editable,
-                    mandatory: mandatory,
-                    align: align,
-                    classifier: function () { },
-                    renderer: getRenderer(type)
-                }
-            };
-            if (editable) {
-                column.record.editor = getEditor(type);
-            }
-            if (default_value) {
-                let defaultSet = default_value.split(',');
-                let defaultName = defaultSet[0];
-                if (defaultValueGenerators.includes(defaultName)) {
-                    column.record.defaultValue =
-                        defaultSet.length == 1 ? { name: defaultName } : { name: defaultName, params: { calc: defaultSet[1] } };
-                }
-                else {
-                    column.record.defaultValue = type === 'number' ? Number(default_value) : default_value;
-                }
-            }
-            if (type == 'boolean-all') {
-                column.type = 'boolean';
-            }
-            // meta- 로 시작 되는 타입은 공통으로 메뉴를 조회 template 을 가져간다.
-            if (type.startsWith('meta-') && object_opt && object_opt.menu) {
-                object_opt = await MetaUiUtil.getGristMetaObjectOptions(type, object_opt);
-            }
-            // select-option
-            if (type === 'select' && ValueUtil.isNotEmpty(select_opt)) {
-                if (Array.isArray(select_opt)) {
-                    column.record.options = select_opt;
-                }
-                else {
-                    if (select_opt.type === 'code') {
-                        // 공통 코드
-                        column.record.options = await ServiceUtil.getCodeSelectorData(select_opt.values ? select_opt.values : select_opt.name);
-                    }
-                    else if (select_opt.type === 'scenario') {
-                        // 시나리오
-                        column.record.options = await ServiceUtil.getCodeByScenario(select_opt.name, select_opt.args);
-                    }
-                    else if (select_opt.type === 'entity') {
-                        // 엔티티
-                        column.record.options = await ServiceUtil.getCodeByEntity(select_opt.args);
-                    }
-                }
-            }
-            if (type === 'meta-object-selector' && ValueUtil.isNotEmpty(object_opt)) {
-                column.record.options = { ...object_opt };
-            }
-            else if (type === 'meta-code-selector' && ValueUtil.isNotEmpty(object_opt)) {
-                if (object_opt.dispField) {
-                    object_opt.codes = await ServiceUtil.getCodeByEntity(object_opt);
-                }
-                column.record.options = { ...object_opt };
-            }
-            columns.push(column);
-        }
-        return columns;
-    }
-    /**
-     * @description 메타 설정에서 그리드 옵션을 추출
-     *****************************************
-     * @param {Object} pageView
-     * @returns {Object}
-     */
-    static getGridOptionSet(pageView) {
-        let gridConfig = pageView.gridConfig;
-        pageView.useFilterForm = gridConfig && gridConfig.use_filter_form != undefined ? gridConfig.use_filter_form : true;
-        let { mobile_mode = 'LIST', desk_mode = 'GRID', view_mode = [], use_row_checker = true, sorters = [], pages = [50, 100, 500, 1000] } = ValueUtil.isEmpty(gridConfig.option) ? {} : gridConfig.option;
-        // 페이지 설정 변환
-        if (pages === 'unlimited' || pages === '-1') {
-            pageView.infinityPage = true;
-            pages = { infinite: true };
-        }
-        else {
-            pageView.infinityPage = false;
-            pages.sort(function (a, b) {
-                return a - b;
-            });
-            pages = { pages: pages };
-        }
-        // 모바일 데스크 뷰 모드
-        if (ValueUtil.isNotEmpty(view_mode)) {
-            if (view_mode.length == 1) {
-                desk_mode = view_mode[0];
-                mobile_mode = view_mode[0];
-            }
-            else if (view_mode.length >= 2) {
-                if (!view_mode.includes(mobile_mode)) {
-                    mobile_mode = view_mode[1];
-                }
-                if (!view_mode.includes(desk_mode)) {
-                    desk_mode = view_mode[0];
-                }
-            }
-        }
-        pageView.gridMobileMode = mobile_mode;
-        pageView.gridDeskMode = desk_mode;
-        pageView.gridViewOptions = view_mode;
-        pageView.gridMode = UiUtil.isMobileEnv() ? pageView.gridMobileMode : pageView.gridDeskMode;
-        return {
-            use_row_checker: use_row_checker,
-            sorters: sorters,
-            pages: pages
-        };
-    }
-    /**
-     * @description 메타 설정에서 그리드 리스트 설정을 추출
-     ***********************************************
-     * @param {Object} pageView
-     * @returns {Object}
-     */
-    static getGridListSet(pageView) {
-        let gridList = {
-            fields: [ValueUtil.getParams(pageView.menuInfo, 'name'), ValueUtil.getParams(pageView.menuInfo, 'desc')]
-        };
-        // 기본 리스트 설정과 메타에서 가져온 설정 merge
-        if (pageView.gridConfig.list) {
-            Object.assign(gridList, pageView.gridConfig.list);
-        }
-        return gridList;
-    }
-    /**
-     * @description 메타 설정에서 그리드 Row 옵션을 추출
-     *********************************************
-     * @param {Object} pageView
-     * @returns {Object}
-     */
-    static getGridRowSet(pageView) {
-        // 기본 옵션, 메타와 상관없이 그리드 로우 멀티 셀렉트는 false, click 이벤트는 없다.
-        let { multiple_select = false, click = undefined } = ValueUtil.isEmpty(pageView.gridConfig.row)
-            ? {}
-            : pageView.gridConfig.row;
-        let retObject = {
-            selectable: { multiple: multiple_select },
-            appendable: pageView.useButtonAdd
-        };
-        if (ValueUtil.isNotEmpty(click)) {
-            retObject.handlers = { click: click };
-        }
-        return retObject;
-    }
-    /**
-     * @description 메타 설정에서 그리드 버튼 옵션을 추출
-     *********************************************
-     * @param {Object} pageView
-     * @returns {Array}
-     */
-    static getGridButtonSet(pageView) {
-        let gridButtons = pageView.gridConfig.button;
-        return ValueUtil.isEmpty(gridButtons)
-            ? []
-            : // 그리드 버튼 정보로 버튼 설정 정보를 구성하여 리턴
-                gridButtons.map(btn => {
-                    // 기본 그리드 버튼
-                    let button = { type: 'gutter', gutterName: 'button' };
-                    // 레코드 특정 필드 값 조건에 따라서 아이콘을 변경 ...
-                    if (ValueUtil.isNotEmpty(btn.icon)) {
-                        // 아이콘이 Array 타입
-                        if (Array.isArray(btn.icon)) {
-                            // 지정 된 조건에 따라 아이콘을 바꾼다.
-                            button.icon = record => {
-                                if (ValueUtil.isNotEmpty(record)) {
-                                    // 지정된 조건 Loop
-                                    for (let i = 0; i < btn.icon.length; i++) {
-                                        let logic = btn.icon[i];
-                                        let useIcon = ValueUtil.compareObjectValues(logic, record, Object.keys(logic).filter(key => key != 'icon'));
-                                        if (useIcon === true) {
-                                            return logic.icon;
-                                        }
-                                    }
-                                }
-                            };
-                        }
-                        else {
-                            button.icon = btn.icon;
-                        }
-                    }
-                    // 이름이 지정되어 있으면 변환
-                    if (ValueUtil.isNotEmpty(btn.name)) {
-                        button.name = btn.name;
-                    }
-                    // Tooltip
-                    if (ValueUtil.isNotEmpty(btn.label)) {
-                        button.title = TermsUtil.tButton(btn.label);
-                    }
-                    // 버튼 유형이 기본이면 ( 그리스트 기본 제공 기능 및 추가 기능 )
-                    if (btn.type === 'basic') {
-                        let logicTxt = ValueUtil.getParams(btn, 'logic');
-                        if (['history_copy', 'history_json'].includes(logicTxt)) {
-                            button.handlers = {
-                                click: (_columns, _data, _column, record, _rowIdx) => {
-                                    if (record.id) {
-                                        let action = {
-                                            title: 'data_history_list',
-                                            type: 'popup',
-                                            tagname: logicTxt == 'history_copy' ? 'history-copy-list-popup' : 'history-json-list-popup',
-                                            location: logicTxt == 'history_copy'
-                                                ? 'pages/hgistory/history-copy-list-popup.js'
-                                                : 'pages/hgistory/history-json-list-popup.js',
-                                            menu: pageView.currentRouting,
-                                            size: 'large',
-                                            popup_field: 'open_param',
-                                            parent_field: 'id'
-                                        };
-                                        let params = {
-                                            ...record,
-                                            gqlFunc: ValueUtil.getParams(pageView.gqlInfo, 'query', 'find_one_func'),
-                                            gristConfig: JSON.parse(JSON.stringify(pageView.grist.config))
-                                        };
-                                        MetaUiUtil.gristButtonHandler(pageView, { logic: action }, params);
-                                    }
-                                }
-                            };
-                        }
-                        else {
-                            button.handlers = { click: logicTxt };
-                        }
-                        // 버튼 유형이 커스텀이면 ...
-                    }
-                    else {
-                        button.handlers = {
-                            click: (_columns, _data, _column, record, _rowIdx) => {
-                                if (record.id) {
-                                    MetaUiUtil.gristButtonHandler(pageView, btn, record);
-                                }
-                            }
-                        };
-                    }
-                    return button;
-                });
-    }
-    /**
-     * @description 메타 데이터에서 그리드 렌더링 config 을 생성
-     ***************************************************
-     * @param {Object} pageView 페이지
-     * @returns {Array} 그리드 컬럼 설정 리스트
-     */
-    static async getGridColumnSet(pageView) {
-        let gridColumnConfig = pageView.gridColumnConfig;
-        // 메타에 그리드 컬럼 정보가 없으면
-        if (ValueUtil.isEmpty(gridColumnConfig)) {
-            return [];
-        }
-        // CARD, LIST인 경우 컬럼 정보를 표시하기 위한 컬럼들 추출
-        let mobileDisplayColumns = UiUtil.isMobileEnv() && pageView.etcConfig && pageView.etcConfig.mobile_display_columns
-            ? pageView.etcConfig.mobile_display_columns.split(',')
-            : [];
-        let defaultValueGenerators = Object.keys(getValueGenerators());
-        let columns = [];
-        for (let idx = 0; idx < gridColumnConfig.length; idx++) {
-            let { type = 'string', name = undefined, header = undefined, hidden = false, editable = true, mandatory = false, sortable = false, align = 'left', width = 0, exportable = false, select_opt = undefined, object_opt = undefined, format = undefined, default_value = undefined, accumulator = undefined, fixed = false } = gridColumnConfig[idx];
-            // 컬럼 config 으로 변경 및 문자열 처리
-            let column = {
-                type: type,
-                name: name,
-                header: ValueUtil.isEmpty(header) ? '' : TermsUtil.tLabel(header),
-                hidden: hidden,
-                sortable: sortable,
-                width: width,
-                fixed: fixed,
-                record: { editable: editable, mandatory: mandatory, align: align, format: format }
-            };
-            // accumulator 설정이 있고 type이 number이면 accumulator 설정 추가
-            if (type.indexOf('number') >= 0 && accumulator) {
-                column.accumulator = accumulator;
-            }
-            if (default_value) {
-                let defaultSet = default_value.split(',');
-                let defaultName = defaultSet[0];
-                if (defaultValueGenerators.includes(defaultName)) {
-                    column.record.defaultValue =
-                        defaultSet.length == 1 ? { name: defaultName } : { name: defaultName, params: { calc: defaultSet[1] } };
-                }
-                else {
-                    column.record.defaultValue = type === 'number' ? Number(default_value) : default_value;
-                }
-            }
-            if (type == 'boolean-all') {
-                column.type = 'boolean';
-                let colHeaderTxt = column.header;
-                column.header = {
-                    renderer: function (col) {
-                        return html `
-              <span>${colHeaderTxt}
-                <input type='checkbox'
-                  @change=${e => {
-                            e.stopPropagation();
-                            let targetElement = e.target;
-                            let selected = targetElement.checked;
-                            let grist = pageView.grist;
-                            if (grist._data && grist._data.records) {
-                                let records = grist._data.records;
-                                for (let idx = 0; idx < records.length; idx++) {
-                                    targetElement.dispatchEvent(new CustomEvent('field-change', {
-                                        bubbles: true,
-                                        composed: true,
-                                        detail: {
-                                            before: records[idx][col.name],
-                                            after: selected,
-                                            record: records[idx],
-                                            column: col,
-                                            row: idx
-                                        }
-                                    }));
-                                }
-                            }
-                        }}
-                ></input>
-              </span>
-            `;
-                    }
-                };
-            }
-            // meta- 로 시작 되는 타입은 공통으로 메뉴를 조회 template 을 가져간다.
-            if (type.startsWith('meta-') && object_opt && object_opt.menu) {
-                object_opt = await MetaUiUtil.getGristMetaObjectOptions(type, object_opt);
-            }
-            // select-option
-            if (type === 'select' && ValueUtil.isNotEmpty(select_opt)) {
-                if (Array.isArray(select_opt)) {
-                    column.record.options = select_opt;
-                }
-                else {
-                    // 공통 코드
-                    if (select_opt.type === 'code') {
-                        column.record.options = await ServiceUtil.getCodeSelectorData(select_opt.values ? select_opt.values : select_opt.name);
-                        // 시나리오
-                    }
-                    else if (select_opt.type === 'scenario') {
-                        column.record.options = await ServiceUtil.getCodeByScenario(select_opt.name, select_opt.args);
-                        // 엔티티
-                    }
-                    else if (select_opt.type === 'entity') {
-                        column.record.options = await ServiceUtil.getCodeByEntity(select_opt.args);
-                    }
-                }
-            }
-            // object-option
-            if (type === 'meta-object-selector' && ValueUtil.isNotEmpty(object_opt)) {
-                column.record.options = { ...object_opt };
-            }
-            else if (type === 'meta-code-selector' && ValueUtil.isNotEmpty(object_opt)) {
-                if (object_opt.dispField) {
-                    object_opt.codes = await ServiceUtil.getCodeByEntity(object_opt);
-                }
-                column.record.options = { ...object_opt };
-            }
-            // attributes (확장 속성)
-            if (type === 'attributes' && format) {
-                column.record.options = await ServiceUtil.getAttributeSetOptionFor(format);
-            }
-            // mask
-            if (type == 'mask') {
-                column.record.renderer = (value, column, record, rowIndex, field) => {
-                    let maskVal = '';
-                    if (value) {
-                        let valCount = value.length;
-                        for (let i = 1; i <= valCount; i++) {
-                            maskVal += '*';
-                        }
-                    }
-                    else {
-                        maskVal = '********';
-                    }
-                    return maskVal;
-                };
-            }
-            // LIST, CARD 에서 컬럼 정보 표시
-            if (mobileDisplayColumns.includes(name)) {
-                column.record.renderer = (value, column, record, rowIndex, field) => {
-                    return TermsUtil.tLabel(header) + ': ' + value;
-                };
-            }
-            // 내보내기 버튼 사용, 컬럼 내보내기 옵션
-            if (pageView.useButtonExport === true && exportable === true) {
-                column.imex = { header: column.header, key: column.name, width: column.width / 6, type: column.type };
-            }
-            columns.push(column);
-        }
-        if (this.is_activity !== true) {
-            return columns;
-        }
-        return columns;
-    }
-    /**
-     * @description meta-object, meta-code에 대한 설정을 가져온다. (menu or 설정)
-     ***********************************************************************
-     * @param {String} type 컬럼 타입
-     * @param {Object} options 컬럼 오브젝트 설정
-     * @returns {Object} 메타 변경 결과
-     */
-    static async getGristMetaObjectOptions(type, options) {
-        let data = await MetaUiUtil.getMenuMetaData(options.menu);
-        if (data && data.records && data.records.length > 0 && data.records[0].template) {
-            let menu = data.records[0];
-            let menu_template = JSON.parse(MetaCrypto.dec(menu.template));
-            if (!options.queryName) {
-                options.queryName = menu_template.gql.query.list_func;
-            }
-            if (!options.select) {
-                options.select = menu_template.grid_column;
-            }
-            if (!options.filterFields || options.filterFields.length == 0) {
-                options.filterFields = menu_template.search;
-            }
-            if (!options.selectorName) {
-                options.selectorName = menu_template.menu.title;
-            }
-            if (!options.filters) {
-                options.filters = menu_template.gql.query.filters || [];
-            }
-            if (type.includes('-object-')) {
-                if (!options.nameField) {
-                    options.nameField = menu_template.menu.name || 'name';
-                }
-            }
-            else if (type.includes('-code-')) {
-                if (!options.codeField) {
-                    options.codeField = menu_template.menu.name || 'code';
-                }
-                if (!options.dispField) {
-                    options.dispField = menu_template.menu.desc || undefined;
-                }
-            }
-        }
-        return options;
-    }
-    /**
-     * @description 필터 폼에 검색 조건 필드 정의
-     *****************************************
-     * @param {HTMLElement} pageView 페이지
-     * @param {Array} gridColumns 그리드 컬럼 설정
-     * @returns
-     */
-    static setGridColumnSearchOption(pageView, gridColumns) {
-        let searchConfig = pageView.searchConfig;
-        if (searchConfig) {
-            searchConfig.forEach(config => {
-                if (typeof config === 'string') {
-                    gridColumns
-                        .filter(col => col.name == config)
-                        .forEach(col => {
-                        col.filter = 'search';
-                    });
-                }
-                else if (typeof config === 'object') {
-                    gridColumns
-                        .filter(col => col.name == config.name)
-                        .forEach(col => {
-                        col.filter = config;
-                        col.filter.type = col.type === 'datetime' && config.operator == 'eq' ? 'datetime-local' : col.type;
-                        let defValue = col.filter.value;
-                        let dateKeywords = ['today', 'year', 'month', 'date', 'hour', 'min', 'sec'];
-                        if (defValue &&
-                            typeof defValue == 'string' &&
-                            dateKeywords.filter(x => defValue.startsWith(x)).length > 0) {
-                            let defRes = [];
-                            let dateFormat = { date: 'YYYY-MM-DD', datetime: 'YYYY-MM-DD HH:mm:ss' };
-                            let durationType = {
-                                today: 'day',
-                                year: 'year',
-                                month: 'month',
-                                date: 'day',
-                                hour: 'hour',
-                                min: 'minute',
-                                sec: 'second'
-                            };
-                            let defDates = defValue.split(',');
-                            defDates.forEach(x => {
-                                const todayMoment = moment();
-                                if (dateKeywords.includes(x)) {
-                                    defRes.push(todayMoment.startOf(durationType[x]).format(dateFormat[col.type]));
-                                }
-                                else if (x.includes('-')) {
-                                    let wordSplits = x.split('-');
-                                    let key = wordSplits[0];
-                                    let value = wordSplits[1];
-                                    defRes.push(todayMoment
-                                        .subtract(value, durationType[key])
-                                        .startOf(durationType[key])
-                                        .format(dateFormat[col.type]));
-                                }
-                                else if (x.includes('+')) {
-                                    let wordSplits = x.split('+');
-                                    let key = wordSplits[0];
-                                    let value = wordSplits[1];
-                                    defRes.push(todayMoment.add(value, durationType[key]).startOf(durationType[key]).format(dateFormat[col.type]));
-                                }
-                            });
-                            if (defRes.length > 0)
-                                col.filter.value = defRes.length == 1 ? defRes[0] : defRes;
-                        }
-                    });
-                }
-            });
-        }
-        return gridColumns;
-    }
-    /**
-     * @description 컨텍스트 오브젝트 리턴
-     **********************************
-     * @param {Object} pageView
-     * @returns {Object} 컨텍스트 오브젝트
-     */
-    static getContextObject(pageView) {
-        let ctx = pageView && pageView.menuInfo
-            ? {
-                title: TermsUtil.tTitle(pageView.menuInfo.title),
-                help: pageView.menuInfo.help || '',
-                actions: [...MetaUiUtil.getContextButtons(pageView)]
-            }
-            : {};
-        // export 버튼
-        if (pageView.useButtonExport) {
-            ctx.exportable = {
-                name: ctx.title,
-                data: pageView.export.bind(pageView)
-            };
-        }
-        // import 버튼
-        if (pageView.useButtonImport) {
-            ctx.importable = {
-                handler: pageView.import.bind(pageView)
-            };
-        }
-        // Context
-        return ctx;
-    }
-    /**
-     * @description 메뉴 컨텍스트에서 사용할 버튼 정보 추출
-     **********************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {Array} 버튼 엘리먼트 리스트
-     */
-    static getContextButtons(pageView) {
-        let buttonConfig = pageView.buttonConfig;
-        return ValueUtil.isEmpty(buttonConfig)
-            ? []
-            : buttonConfig
-                .filter(b => b.name != 'export' && b.name != 'import' && b.name != 'add')
-                .map(btn => {
-                let { name = undefined, label = undefined, style = undefined, type = 'basic', action = undefined, logic = undefined } = btn;
-                if (ValueUtil.isEmpty(name)) {
-                    return { title: '-1' };
-                }
-                if (ValueUtil.isEmpty(label))
-                    label = name;
-                if (ValueUtil.isEmpty(style))
-                    style = name;
-                if (ValueUtil.isEmpty(action))
-                    action = name;
-                let btnStylecss = ValueUtil.isNotEmpty(style)
-                    ? CommonButtonStyles[style] || {
-                        icon: style,
-                        emphasis: {
-                            raised: true,
-                            outlined: false,
-                            dense: false,
-                            danger: false
-                        }
-                    }
-                    : {};
-                return {
-                    title: TermsUtil.tButton(label),
-                    action: MetaUiUtil.getButtonActionHandler(pageView, type, action, logic),
-                    ...btnStylecss
-                };
-            })
-                .filter(btn => btn.title != '-1');
-    }
-    /**
-     * @description element로 로드시 버튼 element를 container에 직접 추가
-     ****************************************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {Array}  버튼 엘리먼트 리스트
-     */
-    static getContainerButtons(pageView) {
-        let buttonConfig = pageView && pageView.buttonConfig ? pageView.buttonConfig : null;
-        return !buttonConfig
-            ? []
-            : buttonConfig
-                .filter(b => b.name != 'add')
-                .map(b => {
-                let { name = undefined, label = undefined, style = undefined, type = 'basic', action = undefined, logic = undefined } = b;
-                if (ValueUtil.isEmpty(label))
-                    label = name;
-                if (ValueUtil.isEmpty(style))
-                    style = name;
-                if (ValueUtil.isEmpty(action))
-                    action = name;
-                let btn = MetaUiUtil.createButtonElement(TermsUtil.tButton(label), style);
-                btn.onclick = MetaUiUtil.getButtonActionHandler(pageView, type, action, logic);
-                return btn;
-            });
-    }
-    /**
-     * @description 버튼 엘리먼트를 생성
-     ********************************
-     * @param {String} buttonName
-     * @param {String} style
-     * @returns {HTMLElement} 버튼 엘리먼트
-     */
-    static createButtonElement(buttonName, style) {
-        let btnStyle = CommonButtonStyles[style] || {
-            icon: style,
-            emphasis: {
-                raised: true,
-                outlined: false,
-                dense: false,
-                danger: false
-            }
-        };
-        const { raised, outlined, dense, danger, icon } = btnStyle.emphasis;
-        const template = html `
-      <button ?dense=${dense} ?raised=${raised} ?outlined=${outlined} ?danger=${danger}>
-        <md-icon>${icon || 'done'}</md-icon>
-        ${buttonName}
-      </button>
-    `;
-        const container = document.createElement('div');
-        render(template, container);
-        const element = container.firstElementChild;
-        return container.removeChild(element);
-    }
-    /**
-     * @description 버튼과 연결할 핸들러를 리턴
-     *************************************
-     * @param {Object} pageView 화면
-     * @param {String} type 버튼 유형 (기본, 커스텀, 그리드 버튼)
-     * @param {String} action 버튼 명
-     * @param {Object} logic 버튼 로직 (String || JSON)
-     * @returns {Function} 버튼 클릭시 실행될 액션 핸들러
-     */
-    static getButtonActionHandler(pageView, type, action, logic) {
-        if (type == 'basic') {
-            if (pageView[action]) {
-                return pageView[action].bind(pageView);
-            }
-        }
-        else if (type == 'custom') {
-            return () => MetaUiUtil.customButtonHandler(pageView, action, logic);
-        }
-        // 버튼과 연결된 함수가 없습니다.
-        return () => {
-            UiUtil.showAlertPopup('title.warning', 'text.button_bind_func_is_not_exist', 'info', 'confirm');
-        };
-    }
-    /**
-     * @description 그리스트 버튼 (그리드에 추가된 버튼)에 대한 커스텀 액션 분기
-     ***************************************************************
-     * @param {Object} pageView
-     * @param {Object} actionInfo
-     * @param {Object} record
-     */
-    static async gristButtonHandler(pageView, actionInfo, record) {
-        let action = ValueUtil.getParams(actionInfo, 'logic');
-        let buttonName = ValueUtil.getParams(actionInfo, 'name');
-        let eventType = ValueUtil.getParams(action, 'type');
-        // 폼 팝업
-        if (eventType === 'form') {
-            // 상세 폼 뷰는 기본 정의된 로직으로 셋팅
-            action.tagname = 'meta-form-element';
-            action.location = 'pages/meta-form-element.js';
-            action.parent_field = 'id';
-            await MetaUiUtil.commonButtonOpenPopup(pageView, action, record);
-            // 다른 객체로 파라미터 전달
-        }
-        else if (eventType === 'pass_param') {
-            MetaUiUtil.gristButtonPassParam(pageView, action, record);
-            // 페이지 이동
-        }
-        else if (eventType === 'page') {
-            let passParams = action.param_field ? {} : record;
-            if (action.param_field) {
-                Object.keys(record)
-                    .filter(x => Object.keys(action.param_field).includes(x))
-                    .map(x => {
-                    if (Object.keys(action.param_field).includes(x)) {
-                        let data = record[x];
-                        passParams[action.param_field[x]] =
-                            Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data;
-                    }
-                });
-            }
-            UiUtil.pageNavigate(action.url, [passParams]);
-            // 팝업 실행
-        }
-        else if (eventType === 'popup') {
-            await MetaUiUtil.commonButtonOpenPopup(pageView, action, record);
-            // 서비스 호출
-        }
-        else if (eventType === 'graphql') {
-            await MetaUiUtil.commonButtonCallService(pageView, action, record, record);
-            // 시나리오 호출
-        }
-        else if (eventType === 'scenario') {
-            await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, action, record);
-            // 설정된 조건에 따라 커스텀 로직 처리
-        }
-        else if (eventType === 'value_reference') {
-            await MetaUiUtil.gristButtonValueReference(pageView, action, record);
-            // 첨부파일 다운로드 처리
-        }
-        else if (eventType === 'download') {
-            MetaUiUtil.downloadFile(action, record);
-        }
-    }
-    /**
-     * @description 폼 화면에서의 커스텀 버튼에 대한 액션
-     *********************************************
-     * @param {Object} pageView
-     * @param {String} buttonName
-     * @param {Object} logic
-     */
-    static async formScreenCustomButtonHandler(pageView, buttonName, logic) {
-        if (ValueUtil.isEmpty(logic))
-            return;
-        // TODO 현재 폼 엘리먼트에 검색 폼 기능이 없으므로 추후 추가 필요 && gristButtonHandler 함수와 거의 동일하게 로직이 처리되어야 하는데 로직이 약간 다름...
-        let formData = pageView.currentData;
-        let eventType = ValueUtil.getParams(logic, 'type');
-        let paramInfo = ValueUtil.getParams(logic, 'param');
-        let params = { form: paramInfo && paramInfo.includes('form_changed') ? pageView.patchData() : formData };
-        /**
-         * data 정보가 있는 경우 폼 데이터로 부터 아래 구조대로 변형 처리
-         * data: {
-         *    "id": "$id",
-         *    "name": "$name",
-         *    "description": "$description",
-         *    "activeFlag": true,
-         *    "cuFlag": "M"
-         * }
-         */
-        let dataSchema = ValueUtil.getParams(logic, 'data');
-        // data schema (데이터 형태) 추출
-        if (ValueUtil.isNotEmpty(dataSchema)) {
-            params.form = ValueUtil.replaceVariableObject(dataSchema, formData);
-        }
-        // 페이지 이동
-        if (eventType === 'page') {
-            UiUtil.pageNavigate(logic.url, [params.form]);
-            // 팝업 오픈
-        }
-        else if (eventType === 'popup') {
-            await MetaUiUtil.commonButtonOpenPopup(pageView, logic, params);
-            // 서비스 호출
-        }
-        else if (eventType === 'graphql') {
-            await MetaUiUtil.commonButtonCallService(pageView, logic, params.filter, params.form);
-            // 시나리오 호출
-        }
-        else if (eventType === 'scenario') {
-            await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, logic, params);
-        }
-    }
-    /**
-     * @description 그리드 화면에서의 커스텀 버튼에 대한 액션
-     ************************************************
-     * @param {Object} pageView 화면
-     * @param {String} buttonName 버튼 명
-     * @param {Object} logic 버튼 커스텀 로직 JSON
-     */
-    static async gristScreenCustomButtonHandler(pageView, buttonName, logic) {
-        if (ValueUtil.isEmpty(logic))
-            return;
-        let grist = pageView.grist;
-        let filterForm = pageView.filterForm;
-        let eventType = ValueUtil.getParams(logic, 'type');
-        let paramInfo = ValueUtil.getParams(logic, 'param');
-        let includeGristParams = paramInfo.filter(p => p.startsWith('grist'));
-        // 오류 메시지 처리
-        if (ValueUtil.isNotEmpty(includeGristParams)) {
-            // 그리스트 존재 여부
-            if (!grist) {
-                // 그리드가 없습니다.
-                UiUtil.showAlertPopup('title.info', 'text.grid_is_not_exist', 'info', 'confirm');
-                return;
-            }
-            // 그리스트 데이터 존재 여부 (편집중 데이터도 체크)
-            if ((grist?.data?.records || []).length == 0 && (grist?.dirtyData?.records || []).length == 0) {
-                // 비어있는 그리드 입니다.
-                UiUtil.showAlertPopup('title.info', 'text.grid_data_is_empty', 'info', 'confirm');
-                return;
-            }
-            if (paramInfo.includes('grist_one') || paramInfo.includes('grist_selected')) {
-                // 선택된 행이 있는지 확인
-                let selectedRows = grist.selected;
-                if (ValueUtil.isEmpty(selectedRows)) {
-                    // 선택된 항목이 없습니다.
-                    UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm');
-                    return;
-                }
-                if (paramInfo.includes('grist_one')) {
-                    // 하나의 행만 선택 되었는지 확인
-                    if (selectedRows.length > 1) {
-                        //  하나의 항목만 선택해주세요.
-                        UiUtil.showAlertPopup('title.info', 'text.please_select_only_one', 'info', 'confirm');
-                        return;
-                    }
-                }
-            }
-        }
-        let params = {};
-        if (paramInfo.includes('filter')) {
-            if (!filterForm) {
-                // 서치폼이 없습니다.
-                UiUtil.showAlertPopup('title.info', 'text.search_form_is_not_exist', 'info', 'confirm');
-                return;
-            }
-            let filterValues = filterForm ? await filterForm.getQueryFilters() : [];
-            params['filter'] = filterValues;
-        }
-        if (paramInfo.includes('grist_all')) {
-            params['grist'] = grist.data.records;
-        }
-        else if (paramInfo.includes('grist_one')) {
-            params['grist'] = grist.selected[0];
-        }
-        else if (paramInfo.includes('grist_selected')) {
-            params['grist'] = grist.selected;
-        }
-        else if (paramInfo.includes('grist_changed')) {
-            let changedList = ServiceUtil.patchesForUpdateMultiple(grist);
-            if (!changedList) {
-                return;
-            }
-            // 화면이 팝업 화면이라면 부모 ID를 레코드에 추가한다.
-            let pId = pageView.parent_id ? pageView.parent_id : null;
-            let parentIdField = ValueUtil.getParams(logic, 'parent_field');
-            changedList.forEach(item => {
-                if (pId && parentIdField && !item[parentIdField]) {
-                    item[parentIdField] = pId;
-                }
-            });
-            params['grist'] = changedList;
-        }
-        // 페이지 이동
-        if (eventType === 'page') {
-            let records = Array.isArray(params['grist']) ? params['grist'] : [params['grist']];
-            let passParams = logic.param_field ? null : records;
-            if (logic.param_field) {
-                passParams = records.map(record => {
-                    let recordParams = {};
-                    Object.keys(record)
-                        .filter(x => Object.keys(logic.param_field).includes(x))
-                        .map(x => {
-                        if (Object.keys(logic.param_field).includes(x)) {
-                            let data = record[x];
-                            recordParams[logic.param_field[x]] =
-                                Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data;
-                        }
-                    });
-                    return recordParams;
-                });
-            }
-            UiUtil.pageNavigate(logic.url, passParams);
-            // 팝업 오픈
-        }
-        else if (eventType === 'popup') {
-            let convParam = {
-                ...(params['grist'] ? params['grist'] : {}),
-                ...(params['filter'] ? params['filter'] : {})
-            };
-            await MetaUiUtil.commonButtonOpenPopup(pageView, logic, convParam);
-            // 서비스 호출
-        }
-        else if (eventType === 'graphql') {
-            let filterParam = params['filter'] ? params['filter'] : {};
-            let dataParams = params['grist'] ? params['grist'] : filterParam;
-            await MetaUiUtil.commonButtonCallService(pageView, logic, filterParam, dataParams);
-            // 시나리오 호출
-        }
-        else if (eventType === 'scenario') {
-            await MetaUiUtil.commonButtonCallScenario(pageView, buttonName, logic, params);
-            // 첨부파일 다운로드 처리
-        }
-        else if (eventType == 'download' && paramInfo.includes('grist_one')) {
-            MetaUiUtil.downloadFile(logic, params['grist']);
-        }
-    }
-    /**
-     * @description 커스텀 버튼에 대한 액션 처리
-     **************************************
-     * @param {Object} pageView 화면
-     * @param {String} buttonName 버튼 명
-     * @param {Object} logic 커스텀 버튼 로직 JSON
-     */
-    static async customButtonHandler(pageView, buttonName, logic) {
-        // 폼 화면의 버튼 핸들링인지 그리드 계열 화면의 버튼 핸들링 인지 구분
-        if (pageView.localName.startsWith('meta-form')) {
-            await MetaUiUtil.formScreenCustomButtonHandler(pageView, buttonName, logic);
-        }
-        else {
-            await MetaUiUtil.gristScreenCustomButtonHandler(pageView, buttonName, logic);
-        }
-    }
-    /**
-     * @description 파라미터 전달 버튼 처리
-     **********************************
-     * @param {Object} pageView
-     * @param {Object} action
-     * @param {Object} record
-     */
-    static gristButtonPassParam(pageView, action, record) {
-        // 파라미터 전달 정보
-        let passInfoAll = action.pass_field;
-        let elementTagName = pageView.tagName.toLowerCase();
-        let pageElement = pageView;
-        let passInfo = elementTagName.startsWith('meta-grist-tab-') || elementTagName.startsWith('meta-master-detail-')
-            ? passInfoAll.detail
-                ? { ...passInfoAll } // 그리스트 탭 페이지는 하단으로 보내는 이벤트만 허용
-                : { detail: { ...passInfoAll } }
-            : { ...passInfoAll }; // tab+tab or tab+etc or main-tab
-        Object.keys(passInfo).forEach(tab => {
-            if (tab == 'master') {
-                pageElement = pageView.rootElement.masterElement;
-            }
-            else if (tab == 'detail') {
-                pageElement = pageView.rootElement ? pageView.rootElement.detailElement : pageView.detailElement;
-            }
-            else if (tab == 'self') {
-                pageElement = pageView;
-            }
-            if (pageElement) {
-                if (pageElement.tagName.toLowerCase().startsWith('meta-tab-element')) {
-                    // Object Key로 Element 검색.
-                    Object.keys(passInfo[tab]).forEach(elementId => {
-                        let targetElement = pageElement.shadowRoot.querySelector(`#${elementId}`);
-                        // 상위 데이터 ID
-                        if (record.id) {
-                            targetElement.setParentId(record.id);
-                        }
-                        // 대상 엘리먼트에 매치할 필드 정보
-                        let matchInfo = passInfo[tab][elementId];
-                        // 필드 정보 Loop tField : target , sField : source
-                        Object.keys(matchInfo).forEach(tField => {
-                            let sField = matchInfo[tField];
-                            // param 값이 * 이면 record 전체
-                            let param = sField === '*' ? record : record[sField];
-                            // tElement.tField에 파라미터 set
-                            targetElement[tField] = param;
-                        });
-                    });
-                }
-                else {
-                    let targetElement = pageElement;
-                    // 상위 데이터 ID
-                    if (record.id) {
-                        targetElement.setParentId(record.id);
-                    }
-                    // 대상 엘리먼트에 매치할 필드 정보
-                    let matchInfo = passInfo[tab];
-                    // 필드 정보 Loop tField : target , sField : source
-                    Object.keys(matchInfo).forEach(tField => {
-                        let sField = matchInfo[tField];
-                        // param 값이 * 이면 record 전체
-                        let param = sField === '*' ? record : record[sField];
-                        // tElement.tField에 파라미터 set
-                        targetElement[tField] = param;
-                    });
-                }
-            }
-        });
-    }
-    /**
-     * @description 팝업 오픈 버튼 처리
-     ********************************
-     * @param {Object} pageView
-     * @param {Object} action
-     * @param {Object} record
-     */
-    static async commonButtonOpenPopup(pageView, action, record) {
-        // 타이틀 변환
-        let title = TermsUtil.tTitle(action.title);
-        // 타이틀 상세 필드 정의 확인
-        if (ValueUtil.isNotEmpty(action.title_detail)) {
-            title = `${title}(${ValueUtil.getParams(record, ...action.title_detail.split('.'))})`;
-        }
-        // closeCallback
-        let closeCallback = action.after && typeof action.after === 'string' && action.after === 'fetch' && pageView && pageView.fetch
-            ? pageView.fetch.bind(pageView)
-            : undefined;
-        // 팝업 오픈
-        UiUtil.openDynamicPopup(title, action, record, closeCallback);
-    }
-    /**
-     * @description 서비스 호출 버튼 처리
-     *************************************
-     * @param {Object} pageView 페이지 뷰
-     * @param {Object} action 액션
-     * @param {Object or Array} filterParam 필터 파라미터
-     * @param {Object or Array} records 선택 레코드
-     */
-    static async commonButtonCallService(pageView, action, filterParam, records) {
-        // Graphql 서비스 호출
-        let response = await ServiceUtil.callService(pageView, action, filterParam, records);
-        // 후 처리 액션 처리
-        if (!response.errors && action.after && ValueUtil.isNotEmpty(action.after)) {
-            let afterParams = null;
-            if (typeof action.after === 'object') {
-                afterParams = Array.isArray(response) ? response : [response];
-            }
-            await MetaUiUtil.afterActionHandler(pageView, action, afterParams);
-        }
-    }
-    /**
-     * @description 시나리오 호출 버튼 처리
-     ***********************************
-     * @param {Object} pageView
-     * @param {String} buttonName
-     * @param {Object} action
-     * @param {Object or Array} params
-     */
-    static async commonButtonCallScenario(pageView, buttonName, action, params) {
-        // 시나리오 호출
-        let response = await ServiceUtil.callScenario(buttonName, action.name, params);
-        // 처리 중 에러가 발생했거나 시나리오 호출 후 처리가 없으면 return
-        if (!response.errors && action.after && ValueUtil.isNotEmpty(action.after)) {
-            let afterParams = null;
-            // after가 오브젝트이면 후 처리 로직
-            if (typeof action.after === 'object') {
-                let after = action.after;
-                afterParams = ValueUtil.getParams(response.data.runScenario.result, ...after.result_name.split('.'));
-                if (Array.isArray(afterParams) == false) {
-                    afterParams = [afterParams];
-                }
-            }
-            // 후 처리 처리
-            await MetaUiUtil.afterActionHandler(pageView, action, afterParams);
-        }
-    }
-    /**
-     * @description 버튼 처리 후 처리
-     *******************************
-     * @param {Object} pageView
-     * @param {Object} action
-     * @param {Object or Array} afterParams
-     */
-    static async afterActionHandler(pageView, action, afterParams) {
-        // after가 오브젝트이면 후 처리 로직
-        if (typeof action.after === 'object') {
-            let after = action.after;
-            // 상세 폼 뷰 팝업 실행
-            if (after.type === 'form') {
-                after.tagname = 'meta-form-element';
-                after.location = 'pages/meta-form-element.js';
-                after.parent_field = 'id';
-                afterParams = afterParams[0];
-                await MetaUiUtil.commonButtonOpenPopup(pageView, after, afterParams);
-                // 페이지 이동 처리
-            }
-            else if (after.type === 'page') {
-                let records = afterParams;
-                let passParams = after.param_field ? null : records;
-                if (after.param_field) {
-                    passParams = records.map(record => {
-                        let recordParams = {};
-                        Object.keys(record)
-                            .filter(x => Object.keys(after.param_field).includes(x))
-                            .map(x => {
-                            if (Object.keys(after.param_field).includes(x)) {
-                                let data = record[x];
-                                recordParams[after.param_field[x]] =
-                                    Array.isArray(data) === false && typeof data === 'object' && data.id ? { id: data.id } : data;
-                            }
-                        });
-                        return recordParams;
-                    });
-                }
-                UiUtil.pageNavigate(after.url, passParams);
-                // 다른 객체로 파라미터 전달
-            }
-            else if (after.type === 'pass_param') {
-                afterParams = afterParams[0];
-                MetaUiUtil.gristButtonPassParam(pageView, after, afterParams);
-                // 팝업 오픈
-            }
-            else if (after.type === 'popup') {
-                afterParams = afterParams[0];
-                await MetaUiUtil.commonButtonOpenPopup(pageView, after, afterParams);
-                // 설정된 조건에 따라 커스텀 로직 처리
-            }
-            else if (after.type === 'value_reference') {
-                afterParams = afterParams[0];
-                await MetaUiUtil.gristButtonValueReference(pageView, after, afterParams);
-            }
-            // after가 fetch이면 리프레쉬
-        }
-        else if (action.after === 'fetch') {
-            pageView.fetch();
-            // after가 close이면 팝업 닫기
-        }
-        else if (action.after == 'close') {
-            UiUtil.closePopupBy(pageView);
-        }
-    }
-    /**
-     * @description UI에서 파일 다운로드 처리
-     *************************************
-     * @param {Object} config 설정
-     * @param {Object} record 레코드
-     */
-    static downloadFile(config, record) {
-        let attachmentRoot = config.attachment_root;
-        let attachColumn = config.attachment_column;
-        let downloadColumn = config.download_name_column ? config.download_name_column : null;
-        if (!attachColumn) {
-            throw new Error('attachmentColumn 정보가 없습니다.');
-        }
-        let attachColumns = attachColumn.split('.');
-        let fileData = record[attachColumns[0]];
-        let fileName = attachColumns.length == 1 ? fileData : fileData[attachColumns[1]];
-        let downloadName = downloadColumn ? record[downloadColumn] : fileName;
-        const link = document.createElement('a');
-        link.setAttribute('href', `./${attachmentRoot}/${fileName}`);
-        link.setAttribute('download', downloadName);
-        document.body.appendChild(link);
-        link.click();
-        link.parentNode.removeChild(link);
-    }
-    /**
-     * @description 설정된 조건과 record 의 값을 비교. 로직 처리
-     ****************************************************
-     * @param {Object} pageView
-     * @param {Object} config
-     * @param {Object} record
-     */
-    static async gristButtonValueReference(pageView, config, record) {
-        // 지정된 조건 Loop
-        for (let idx = 0; idx < config.relation.length; idx++) {
-            let relation = config.relation[idx];
-            let useRelation = ValueUtil.compareObjectValues(relation, record, Object.keys(relation).filter(key => key != 'logic'));
-            if (useRelation === true) {
-                // 조건 체크 후 버튼 핸들러 호출
-                await MetaUiUtil.gristButtonHandler(pageView, relation, record);
-            }
-        }
-    }
-    /**
-     * @description 그리스트 Hidden 컬럼 설정
-     *************************************
-     * @param {String} type
-     * @param {String} name
-     * @returns {Object} 그리스트 Hidden 컬럼 설정
-     */
-    static getGristHiddenColumnConfig(type, name) {
-        return {
-            type: type,
-            name: name,
-            sortable: false,
-            hidden: true
-        };
-    }
-    /**
-     * @description 그리스트 기본 컬럼 설정
-     ***********************************
-     * @param {String} type
-     * @param {String} name
-     * @param {String} align
-     * @param {Boolean} editable
-     * @param {Boolean} sortable
-     * @param {Number} width
-     * @returns {Object} 그리스트 기본 컬럼 설정
-     */
-    static getGristColumnConfig(type, name, align, editable, sortable, width) {
-        let dispName = TermsUtil.tLabel(name);
-        return {
-            type: type,
-            name: name,
-            header: dispName,
-            record: {
-                align: align,
-                editable: editable
-            },
-            sortable: sortable,
-            width: width,
-            imex: {
-                width: Math.floor(width / 6),
-                header: dispName,
-                type: type,
-                key: name
-            }
-        };
-    }
-    /**
-     * @description 그리스트 컬럼 설정
-     *******************************
-     * @param {String} type
-     * @param {String} name
-     * @param {String} displayName
-     * @param {String} align
-     * @param {Boolean} editable
-     * @param {Boolean} sortable
-     * @param {Number} width
-     * @returns {Object} 그리스트 기본 컬럼 설정
-     */
-    static getGristColumnConfig2(type, name, displayName, align, editable, sortable, width) {
-        let dispName = TermsUtil.tLabel(displayName);
-        return {
-            type: type,
-            name: name,
-            header: dispName,
-            record: {
-                align: align,
-                editable: editable
-            },
-            sortable: sortable,
-            width: width,
-            imex: {
-                width: Math.floor(width / 6),
-                header: dispName,
-                type: type,
-                key: name
-            }
-        };
-    }
-    /**
-     * @description 그리스트 컬럼 설정
-     *******************************
-     * @param {String} type
-     * @param {String} name
-     * @param {String} displayName
-     * @param {String} align
-     * @param {Boolean} editable
-     * @param {Boolean} sortable
-     * @param {Boolean} mandatory
-     * @param {Number} width
-     * @returns {Object} 그리스트 기본 컬럼 설정
-     */
-    static getGristColumnConfig3(type, name, displayName, align, editable, sortable, mandatory, width) {
-        let dispName = TermsUtil.tLabel(displayName);
-        return {
-            type: type,
-            name: name,
-            header: dispName,
-            record: {
-                align: align,
-                editable: editable,
-                mandatory: mandatory
-            },
-            sortable: sortable,
-            width: width,
-            imex: {
-                width: Math.floor(width / 6),
-                header: dispName,
-                type: type,
-                key: name
-            }
-        };
-    }
-    /**
-     * @description 그리스트 Selector 컬럼 설정
-     ***************************************
-     * @param {String} name
-     * @param {String} displayName
-     * @param {String} align
-     * @param {Boolean} sortable
-     * @param {Number} width
-     * @param {Boolean} mandatory
-     * @param {Array} optionValues
-     * @returns {Object} 그리스트 기본 컬럼 설정
-     */
-    static getGristSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, optionValues) {
-        let dispName = TermsUtil.tLabel(displayName);
-        return {
-            type: 'select',
-            name: name,
-            header: dispName,
-            record: {
-                align: align,
-                editable: true,
-                mandatory: mandatory,
-                options: optionValues
-            },
-            sortable: sortable,
-            width: width,
-            imex: {
-                width: Math.floor(width / 6),
-                header: dispName,
-                type: 'string',
-                key: name
-            }
-        };
-    }
-    /**
-     * @description 그리스트 Code Selector 컬럼 설정
-     ********************************************
-     * @param {String} name
-     * @param {String} displayName
-     * @param {String} align
-     * @param {Boolean} sortable
-     * @param {Number} width
-     * @param {Boolean} mandatory
-     * @param {String} codeName
-     * @returns {Object} 그리스트 기본 컬럼 설정
-     */
-    static async getGristCodeSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, codeName) {
-        let optionValue = await ServiceUtil.getCodeSelectorData(codeName);
-        return MetaUiUtil.getGristSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, optionValue);
-    }
-    /**
-     * @description 그리스트 검색 편집기 설정
-     ************************************
-     * @param {String} name
-     * @param {String} type
-     * @param {String} label
-     * @param {String} operator
-     * @param {Array} optionValues
-     * @returns {Object} 그리스트 검색 편집기 설정
-     */
-    static getGristSearchColumnConfig(name, type, label, operator, optionValues) {
-        let dispName = TermsUtil.tLabel(label);
-        let column = {
-            name: name,
-            type: type,
-            label: dispName,
-            operator: operator,
-            imex: {
-                width: 16,
-                header: dispName,
-                type: type,
-                key: name
-            }
-        };
-        if (optionValues) {
-            column.options = optionValues;
-        }
-        return column;
-    }
-    /**
-     * @description 그리스트 검색 코드 편집기 설정
-     ***************************************
-     * @param {String} name 검색 필드 명
-     * @param {String} type 검색 편집기 유형
-     * @param {String} label 검색 필드 라벨명
-     * @param {String} operator 검색 연산자
-     * @param {String} codeName 코드 이름
-     * @returns {Object} 그리스트 검색 코드 편집기 설정
-     */
-    static async getGristSearchCodeColumnConfig(name, type, label, operator, codeName) {
-        let optionValues = await ServiceUtil.getCodeSelectorData(codeName);
-        return MetaUiUtil.getGristSearchColumnConfig(name, type, label, operator, optionValues);
-    }
-    /**
-     * @description 기본 컨텍스트 버튼이 아닌 커스텀 버튼 컨테이너 스타일
-     *********************************************************
-     * @returns {Array} 커스텀 버튼 컨테이너 CSS 리턴
-     */
-    static getCustomButtonContainerStyles() {
-        return [ButtonContainerStyles];
-    }
-    /**
-     * @description 그리스트 강조 스타일 리턴
-     ************************************
-     * @returns {Array} 그리스트 강조 스타일 CSS
-     */
-    static getGristEmphasizedStyles() {
-        return [
-            css `
-        :host {
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-        ];
-    }
-    /**
-     * @description 기본 그리스트 스타일 리턴
-     ************************************
-     * @returns {Array} 기본 그리스트 스타일 CSS 리턴
-     */
-    static getBasicGristStyles() {
-        return [
-            ScrollbarStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-            ...MetaUiUtil.getGristEmphasizedStyles(),
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 그리스트 탭 스타일 리턴
-     **************************************
-     * @returns {Array} 기본 그리스트 탭 스타일 CSS 리턴
-     */
-    static getBasicGristTabStyles() {
-        return [
-            ScrollbarStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-            ...MetaUiUtil.getGristEmphasizedStyles(),
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 마스터 디테일 스타일 리턴
-     ****************************************
-     * @returns {Array} 기본 마스터 디테일 스타일 CSS 리턴
-     */
-    static getBasicMasterDetailStyles() {
-        return [
-            ScrollbarStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-            ...MetaUiUtil.getGristEmphasizedStyles(),
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 TAB 디테일 스타일 리턴
-     **************************************
-     * @returns {Array} 기본 TAB 디테일 스타일 CSS 리턴
-     */
-    static getBasicTabDetailStyles() {
-        return [
-            ScrollbarStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-            ...MetaUiUtil.getGristEmphasizedStyles(),
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 MAIN TAB 스타일 리턴
-     **************************************
-     * @returns {Array} 기본 MAIN TAB 스타일 CSS 리턴
-     */
-    static getBasicMainTabStyles() {
-        return [
-            ScrollbarStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `,
-            ...MetaUiUtil.getGristEmphasizedStyles(),
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 마스터 디테일 그리스트 스타일 리턴
-     *********************************************************
-     * @param {String} masterDetailType top-down / left-right
-     * @returns {Array} 마스터 디테일 그리스트 스타일 CSS
-     */
-    static getBasicMasterDetailGristStyle(masterDetailType) {
-        if (masterDetailType == 'top-down') {
-            return MetaUiUtil.getMasterDetailTopDownGristStyle();
-        }
-        else {
-            return MetaUiUtil.getMasterDetailLeftRightGristStyle();
-        }
-    }
-    /**
-     * @description top-down 형태의 마스터 디테일 그리스트 스타일 리턴
-     ************************************************************
-     * @returns {Array} top-down 형태의 마스터 디테일 그리스트 스타일 CSS
-     */
-    static getMasterDetailTopDownGristStyle() {
-        return [
-            ButtonContainerStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            ScrollbarStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: auto;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-          grid-template-rows: 50% 50%;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `
-        ];
-    }
-    /**
-     * @description left-rigth 형태의 마스터 디테일 그리스트 스타일 리턴
-     **************************************************************
-     * @returns {Array} left-rigth 형태의 마스터 디테일 그리스트 스타일 CSS
-     */
-    static getMasterDetailLeftRightGristStyle() {
-        return [
-            ButtonContainerStyles,
-            CommonGristStyles,
-            CommonHeaderStyles,
-            ScrollbarStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: auto;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-          grid-template-columns: 50% 50%;
-        }
-
-        .container_detail {
-          background-color: var(--md-sys-color-background);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-        }
-
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        ox-filters-form {
-          flex: 1;
-        }
-      `
-        ];
-    }
-    /**
-     * @description 기본 폼 스타일 리턴
-     ************************************
-     * @returns {Array} 기본 폼 스타일 CSS 리턴
-     */
-    static getBasicFormStyles() {
-        return [
-            ScrollbarStyles,
-            CommonHeaderStyles,
-            css `
-        :host {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .container {
-          display: grid;
-          grid-auto-rows: min-content;
-          grid-gap: var(--record-view-gap);
-          padding: var(--record-view-padding);
-          overflow-y: auto;
-          height: 100%;
-          border-bottom: var(--record-view-border-bottom);
-        }
-
-        .root_container {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          padding: var(--record-view-padding);
-          overflow-y: auto;
-          height: 100%;
-          border-bottom: var(--record-view-border-bottom);
-        }
-
-        .content_container {
-          display: grid;
-          grid-auto-rows: min-content;
-          grid-gap: var(--record-view-gap);
-          padding: var(--record-view-padding);
-        }
-
-        h2 {
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--md-sys-color-secondary);
-          margin: var(--grist-title-margin);
-          padding-bottom: var(--grist-title-with-grid-padding);
-          padding-top: var(--grist-title-with-grid-padding);
-          border-bottom: var(--subtitle-border-bottom);
-        }
-
-        h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
-
-        label {
-          display: flex;
-          align-items: center;
-          position: relative;
-          text-transform: capitalize;
-
-          padding: var(--record-view-item-padding);
-          border-bottom: var(--record-view-border-bottom);
-          font: var(--record-view-label-font);
-          color: var(--record-view-label-color);
-        }
-
-        label md-icon {
-          display: none;
-        }
-
-        label[editable] md-icon {
-          --md-icon-size: var(--record-view-label-icon-size);
-          display: inline-block;
-          opacity: 0.5;
-        }
-
-        ox-grid-field {
-          border-top: none;
-          border-bottom: var(--record-view-border-bottom);
-          font: var(--record-view-font);
-          color: var(--record-view-color);
-          background-color: transparent;
-          margin-right: 10px;
-        }
-
-        ox-grid-field[editing='true'] {
-          border-bottom: var(--record-view-edit-border-bottom);
-        }
-      `,
-            ...MetaUiUtil.getCustomButtonContainerStyles()
-        ];
-    }
-    /**
-     * @description 기본 탭 스타일 리턴
-     ************************************
-     * @returns {Array} 기본 탭 스타일 CSS 리턴
-     */
-    static getBasicTabStyles() {
-        return [
-            css `
-        :host {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-
-        .tabs {
-          display: flex;
-          padding: 0 0 0 var(--spacing-medium);
-          border-bottom: 1px solid var(--md-sys-color-primary);
-        }
-
-        .tab {
-          background-color: var(--md-sys-color-secondary-container);
-          color: var(--md-sys-color-on-secondary-container);
-          margin-top: var(--spacing-medium);
-          padding: var(--spacing-small) var(--spacing-large) 0 var(--spacing-large);
-          border-radius: 9px 9px 0 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.4);
-          text-transform: capitalize;
-          opacity: 0.7;
-          font-size: 15px;
-          cursor: pointer;
-        }
-
-        .tab[activate] {
-          background-color: var(--md-sys-color-primary);
-          color: var(--md-sys-color-on-primary);
-          box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
-          opacity: 1;
-          font-weight: bold;
-        }
-
-        .tab > md-icon {
-          width: 15px;
-          height: 20px;
-          padding: 0;
-          margin: 0;
-          --md-icon-size: 15px;
-          vertical-align: middle;
-        }
-
-        .content-container {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          background-color: var(--md-sys-color-surface);
-          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
-          border: var(--border-dim-color);
-          border-width: 0 1px 1px 1px;
-          box-shadow: var(--box-shadow);
-          overflow: auto;
-        }
-
-        .tab-contents {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--md-sys-color-background);
-        }
-      `
-        ];
-    }
-    /**
-     * @description 그리드 설정에 버튼 이름이 buttonName인 버튼이 있는지 체크
-     **************************************************************
-     * @param {Object} buttonConfig 버튼 설정
-     * @param {String} buttonName 버튼 명
-     * @returns
-     */
-    static isButtonExist(buttonConfig, buttonName) {
-        let button = buttonConfig
-            ? buttonConfig.find(b => {
-                return b.name == buttonName;
-            })
-            : null;
-        return button ? true : false;
-    }
-    /**
-     * @description 그리드 설정에 버튼 이름이 buttonName인 버튼이 있는지 체크
-     **************************************************************
-     * @param {Object} gridConfig 그리드 설정
-     * @param {String} buttonName 버튼 명
-     * @returns
-     */
-    static isGridButtonExist(gridConfig, buttonName) {
-        let button = gridConfig && gridConfig.button
-            ? gridConfig.button.find(b => {
-                return b.name == buttonName;
-            })
-            : null;
-        return button ? true : false;
-    }
-    /**
-     * @description 그리드 설정에서 셀렉트 컬럼을 추출
-     *******************************************
-     * @param {Array} gridColumns 그리드 컬럼 설정
-     * @returns {String} 셀렉트 필드 정보
-     */
-    static getSelectColumns(gridColumns) {
-        let fields = '';
-        gridColumns
-            .filter(x => x.type != 'gutter')
-            .forEach(c => {
-            fields += '\n';
-            fields += ['meta-object-selector', 'object', 'resource-object'].includes(c.type)
-                ? `${c.name}\n{${MetaUiUtil.getObjctColumnSelectFields(c)}}`
-                : c.type == 'board'
-                    ? `${c.name}\n{${'\nid\nname\nthumbnail'}}`
-                    : c.name;
-        });
-        return fields;
-    }
-    /**
-     * Object 타입의 컬럼에 대한 셀렉트 필드 추출 후 리턴
-     ********************************************
-     * @param {Object} gridCol
-     * @returns {String} Object 타입의 필드 문자열
-     */
-    static getObjctColumnSelectFields(gridCol) {
-        let colStr = '';
-        if (ValueUtil.isNotEmpty(gridCol.record) &&
-            ValueUtil.isNotEmpty(gridCol.record.options) &&
-            ValueUtil.isNotEmpty(gridCol.record.options.select)) {
-            // 설정에 정의가 되어 있으면
-            gridCol.record.options.select.forEach(x => {
-                if (x.name && x.name !== '') {
-                    if (['meta-object-selector', 'object', 'resource-object'].includes(x.type)) {
-                        colStr += `\n${x.name} { ${MetaUiUtil.getObjctColumnSelectFields(x)} \n }`;
-                    }
-                    else {
-                        colStr += `\n${x.name}`;
-                    }
-                }
-            });
-        }
-        if (colStr == '') {
-            // 설정에 정의가 되어 있지 않으면 기본 id, name, description 필드
-            colStr += '\nid\nname\ndescription';
-        }
-        return colStr;
-    }
-    /**
-     * @description pageView의 그리드 정보로 기본 그리스트 Html을 생성하여 리턴
-     *****************************************************************
-     * @param {String} pageView 페이지 뷰
-     * @returns {HTMLElement} 그리스트 HTML
-     */
-    static getBasicGristHtml(pageView) {
-        let gristConfigSet = pageView.gristConfigSet;
-        if (!gristConfigSet) {
-            return html ``;
-        }
-        else {
-            let gristElementId = pageView.gristId ? pageView.gristId : 'ox-grist';
-            let gridMode = pageView.gridMode;
-            return html `
-        <ox-grist
-          id=${gristElementId}
-          .config=${gristConfigSet}
-          .mode=${gridMode}
-          auto-fetch
-          .personalConfigProvider=${pageView.getPagePreferenceProvider(gristElementId)}
-          .fetchHandler=${pageView.fetchHandler.bind(pageView)}
-        >
-          ${MetaUiUtil.getGridDetailHtml(pageView)}
-
-          <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-        </ox-grist>
-      `;
-        }
-    }
-    /**
-     * @description pageView의 폼 정보로 기본 폼 Html을 생성하여 리턴
-     *********************************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 폼을 HTML
-     */
-    static getBasicFormHtml(pageView) {
-        if (!pageView)
-            return html ``;
-        if (!pageView.formConfigSet)
-            return html ``;
-        let cols = pageView.formConfigSet;
-        let record = pageView.record || {};
-        let columns = cols.filter(x => x.hidden == false);
-        // 폼 렌더링 옵션 여부
-        if (ValueUtil.isEmpty(pageView.formRenderConfig)) {
-            return MetaUiUtil.getBasicFormHtmlNoOption(pageView, columns, record);
-        }
-        else {
-            return MetaUiUtil.getBasicFormHtmlOnOption(pageView, columns, record);
-        }
-    }
-    /**
-     * @description pageView의 폼 정보로 폼렌더링 옵션을 적용한 폼 Html을 생성하여 리턴
-     ***********************************************************************
-     * @param {Object} pageView 페이지 뷰
-     * @param {Array} columns 구성 컬럼
-     * @param {Object} record 표현 데이터
-     * @returns {HTMLElement} 폼을 HTML
-     */
-    static getBasicFormHtmlOnOption(pageView, columns, record) {
-        let renderConfig = pageView.formRenderConfig;
-        return html `
-      <div class="root_container">
-        ${renderConfig.map(config => {
-            let renderCols = [];
-            config.column_list.forEach(x => {
-                let columnInfo = columns.filter(col => x == col.name) || [];
-                if (columnInfo.length > 0) {
-                    renderCols.push(columnInfo[0]);
-                }
-            });
-            // 그리드 구분 스타일
-            let divStyle = 'height:auto;grid-template-columns:';
-            for (let i = 0; i < config.column; i++) {
-                divStyle += ' 1fr 2fr';
-            }
-            divStyle += ';';
-            let rowIndex = 0;
-            return html `
-            <h2><md-icon>list_alt</md-icon>${TermsUtil.tTitle(config.display)}</h2>
-            <div id="content_container" class="content_container" style="${divStyle}">
-              ${renderCols.map(column => {
-                let { editable = false, mandatory = false } = column.record;
-                let dirtyFields = record['__dirtyfields__'] || {};
-                return html `
-                  <label ?editable=${editable}
-                    ><span>${mandatory ? '*' : ''}${column.header_txt}</span>
-                    ${editable ? html `<md-icon>edit</md-icon>` : ''}
-                  </label>
-                  <ox-grid-field
-                    .rowIndex=${rowIndex}
-                    .column=${column}
-                    .record=${record}
-                    .value=${record[column.name]}
-                    ?dirty=${!!dirtyFields[column.name]}
-                  ></ox-grid-field>
-                `;
-            })}
-            </div>
-          `;
-        })}
-      </div>
-      ${pageView.isPage ? html `` : MetaUiUtil.getButtonContainer(pageView)}
-    `;
-    }
-    /**
-     * @description pageView의 폼 정보로 기본 폼 Html을 생성하여 리턴
-     *********************************************************
-     * @param {Object} pageView 페이지 뷰
-     * @param {Array} columns 구성 컬럼
-     * @param {Object} record 표현 데이터
-     * @returns {HTMLElement} 폼을 HTML
-     */
-    static getBasicFormHtmlNoOption(pageView, columns, record) {
-        // 그리드 구분 스타일
-        let divStyle = 'grid-template-columns:';
-        if (!pageView.column || pageView.column == 0) {
-            pageView.column = 1;
-        }
-        pageView.column = parseInt((pageView.etcConfig || {}).default_form_column || pageView.column);
-        for (let i = 0; i < pageView.column; i++) {
-            divStyle += ' 1fr 2fr';
-        }
-        divStyle += ';';
-        let rowIndex = 0;
-        return html `
-      <div id="container" class="container" style="${divStyle}">
-        ${columns.map(column => {
-            let { editable = false, mandatory = false } = column.record;
-            let dirtyFields = record['__dirtyfields__'] || {};
-            return html `
-            <label ?editable=${editable}
-              ><span>${mandatory ? '*' : ''}${column.header_txt}</span>
-              ${editable ? html `<md-icon>edit</md-icon>` : ''}
-            </label>
-            <ox-grid-field
-              .rowIndex=${rowIndex}
-              .column=${column}
-              .record=${record}
-              .value=${record[column.name]}
-              ?dirty=${!!dirtyFields[column.name]}
-            ></ox-grid-field>
-          `;
-        })}
-      </div>
-      ${pageView.isPage ? html `` : MetaUiUtil.getButtonContainer(pageView)}
-    `;
-    }
-    /**
-     * @description pageView의 탭 정보로 기본 탭 Html을 생성하여 리턴
-     **********************************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 탭 HTML
-     */
-    static getBasicTabHtml(pageView) {
-        if (!pageView)
-            return html ``;
-        if (!pageView.tabRenderConfig)
-            return html ``;
-        let tabs = pageView.tabRenderConfig;
-        if (!pageView.currentTabKey)
-            pageView.currentTabKey = tabs[0]?.name || undefined;
-        return html `
-      <div class="tabs">
-        ${tabs.map(tab => {
-            let label = TermsUtil.tLabel(tab.display);
-            let key = tab.name;
-            return html `
-            <div
-              class="tab"
-              ?activate="${key === pageView.currentTabKey}"
-              @click="${() => (pageView.currentTabKey = key)}"
-            >
-              ${tab.icon ? html `<md-icon>${tab.icon}</md-icon>` : html ``}
-              <span>${label}</span>
-            </div>
-          `;
-        })}
-      </div>
-      <div class="content-container">
-        ${tabs.map(tab => {
-            let displayStyle = 'display:none';
-            let key = tab.name;
-            if (key == pageView.currentTabKey) {
-                displayStyle = 'display:flex';
-            }
-            return html `
-            <div class="tab-contents" style="${displayStyle}">${MetaUiUtil.getBasicTabContent(pageView, tab)}</div>
-          `;
-        })}
-      </div>
-    `;
-    }
-    /**
-     * @description Grist 탭 Html을 생성하여 리턴
-     *****************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 탭 HTML
-     */
-    static getGristTabHtml(pageView) {
-        let type = (pageView.etcConfig || {}).master_detail_type || 'top_bottom';
-        let size = (pageView.etcConfig || {}).master_detail_size || '50% 50%';
-        let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`;
-        let currentRouting = pageView.isPage ? UiUtil.currentRouting() : pageView.route_name;
-        return html `
-      ${pageView.useMasterFilterForm == false
-            ? html ``
-            : html `
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                pageView.grist?.fetch();
-            }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">
-          ${MetaApi.getBasicGristHtml(pageView)} ${MetaUiUtil.getButtonContainer(pageView)}
-        </div>
-        <div class="container_detail">
-          ${pageView.is_activity === true
-            ? html `${pageView.is_readonly === true
-                ? html `<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    .activityDataSet=${(pageView.activityDataSet || {}).detail}
-                    is_readonly="true"
-                    is_activity="true"
-                    is_detail="true"
-                  >
-                  </meta-tab-element>`
-                : html `<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    .activityDataSet=${(pageView.activityDataSet || {}).detail}
-                    is_activity="true"
-                    is_detail="true"
-                  >
-                  </meta-tab-element>`}`
-            : html `${pageView.is_readonly === true
-                ? html `<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    is_readonly="true"
-                    is_detail="true"
-                  ></meta-tab-element>`
-                : html `<meta-tab-element
-                    id="detail"
-                    route_name="${currentRouting}"
-                    is_detail="true"
-                  ></meta-tab-element>`}`}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * @description Tab Detail Html을 생성하여 리턴
-     ********************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 탭 HTML
-     */
-    static getTabDetailHtml(pageView) {
-        let type = pageView.etcConfig.master_detail_type || 'top_bottom';
-        let size = pageView.etcConfig.master_detail_size || '50% 50%';
-        let detailInfoTxt = pageView.etcConfig.master_detail_element;
-        let detailInfo = JSON.parse(detailInfoTxt || '{}');
-        let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`;
-        MetaUiUtil.createMasterElement(pageView);
-        MetaUiUtil.createDetailElement(pageView, detailInfo);
-        return html `
-      ${pageView.useMasterFilterForm == false
-            ? html ``
-            : html `
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                pageView.fetch();
-            }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">${pageView.masterElement}</div>
-        <div class="container_detail">
-          ${detailInfo.tagname == '' || detailInfo.tagname == 'meta-tab-element'
-            ? html ``
-            : html `<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${detailInfo.display}`)}</h2>`}
-          ${pageView.detailElement}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * @description 메인 탭 Html을 생성하여 리턴
-     ***************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 탭 HTML
-     */
-    static getMainTabHtml(pageView) {
-        MetaUiUtil.createMasterElement(pageView);
-        return html `
-      ${pageView.useMasterFilterForm == false
-            ? html ``
-            : html `
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                pageView.fetch();
-            }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container">${pageView.masterElement}</div>
-    `;
-    }
-    /**
-     * @description 마스터 디테일 Html을 생성하여 리턴
-     ********************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 탭 HTML
-     */
-    static getMasterDetailHtml(pageView) {
-        let type = pageView.etcConfig.master_detail_type || 'top_bottom';
-        let size = pageView.etcConfig.master_detail_size || '50% 50%';
-        let masterDisplay = (pageView.masterOption || {}).display;
-        let detailInfoTxt = pageView.etcConfig.master_detail_element;
-        let detailInfo = JSON.parse(detailInfoTxt || '{}');
-        let layoutContainerStyle = type == 'left_right' ? `grid-template-columns:${size};` : `grid-template-rows:${size};`;
-        MetaUiUtil.createDetailElement(pageView, detailInfo);
-        return html `
-      ${pageView.useMasterFilterForm == false
-            ? html ``
-            : html `
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form-base
-                  id="ox-filters-form"
-                  .filters=${pageView.searchFields || []}
-                  .value=${pageView.searchFieldValues || []}
-                  @filters-change=${e => {
-                pageView.grist?.fetch();
-            }}
-                ></ox-filters-form-base>
-              </div>
-            </div>
-          `}
-      <div id="container" class="container" style="${layoutContainerStyle}">
-        <div class="container_detail">
-          ${pageView.useFilterForm
-            ? masterDisplay
-                ? html `<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${masterDisplay}`)}</h2>`
-                : html ``
-            : html ``}
-          ${MetaApi.getBasicGristHtml(pageView)} ${MetaUiUtil.getButtonContainer(pageView)}
-        </div>
-        <div class="container_detail">
-          ${detailInfo.tagname == '' || detailInfo.tagname == 'meta-tab-element'
-            ? html ``
-            : detailInfo.display
-                ? html `<h2 id="detail_title"><md-icon>list_alt</md-icon>${TermsUtil.tTitle(`${detailInfo.display}`)}</h2>`
-                : html ``}
-          ${pageView.detailElement}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * @descrtiption 디테일 엘리먼트 렌더링
-     **********************************
-     * @param {Object} pageView
-     * @param {Object} detailInfo
-     * @returns htmlElement
-     */
-    static createDetailElement(pageView, detailInfo) {
-        if (!pageView.detailElement) {
-            let name = detailInfo.name ? detailInfo.name : 'detail';
-            let elementTxt = `<${detailInfo.tagname} id="${name}" name="${name}" route_name="${detailInfo.routing}" ${pageView.is_activity === true ? 'is_activity=true' : ''} ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true style="flex:1;"></${detailInfo.tagname}>`;
-            pageView.detailElement = UiUtil.htmlToElement(elementTxt);
-            pageView.detailElement.activityDataSet = (pageView.activityDataSet || {}).detail;
-            if (pageView.tagName.toLowerCase().startsWith('meta-tab-detail-')) {
-                pageView.detailElement.rootElement = pageView;
-            }
-        }
-    }
-    /**
-     * @descrtiption 마스터 엘리먼트 렌더링
-     **********************************
-     * @param {Object} pageView
-     * @returns {HTMLElement} 마스터 엘리먼트 HTML
-     */
-    static createMasterElement(pageView) {
-        if (!pageView.masterElement && pageView.filterForm) {
-            let name = 'master';
-            let elementTxt = `<meta-tab-element id="${name}" name="${name}" route_name="${pageView.currentRouting}" ${pageView.is_activity === true ? 'is_activity=true' : ''} ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true style="flex:1;"></meta-tab-element>`;
-            pageView.masterElement = UiUtil.htmlToElement(elementTxt);
-            pageView.masterElement.activityDataSet = (pageView.activityDataSet || {}).master;
-            pageView.masterElement.includeMainList = true;
-            pageView.masterElement.mainFilterForm = pageView.filterForm;
-            pageView.masterElement.rootElement = pageView;
-        }
-    }
-    /**
-     * @descrtiption 기본 탭 컨텐트 리턴
-     ********************************
-     * @param {Object} pageView
-     * @param {Object} tabConfig
-     * @returns {HTMLElement} 탭 컨텐트 HTML
-     */
-    static getBasicTabContent(pageView, tabConfig) {
-        if (!pageView.tabElements) {
-            pageView.tabElements = {};
-        }
-        if (Object.keys(pageView.tabElements).filter(key => key == tabConfig.name).length > 0) {
-            return pageView.tabElements[tabConfig.name];
-        }
-        let htmlText = `<${tabConfig.tagname} id='${tabConfig.name}' route_name='${tabConfig.menu}' style="flex:1;" ${pageView.is_activity === true ? 'is_activity=true' : ''} ${pageView.is_readonly === true ? 'is_readonly=true' : ''} is_detail=true></${tabConfig.tagname}>`;
-        let tabElement = UiUtil.htmlToElement(htmlText);
-        tabElement.activityDataSet = (pageView.activityDataSet || {})[tabConfig.name];
-        if (pageView.parent_id) {
-            tabElement.parent_id = pageView.parent_id;
-        }
-        if (pageView.rootElement) {
-            tabElement.rootElement = pageView.rootElement;
-        }
-        else {
-            tabElement.detailElement = pageView;
-        }
-        if (tabConfig.filter_from === false) {
-            tabElement.use_filter_form = false;
-        }
-        if (tabConfig.main_filter_form) {
-            tabElement.mainFilterForm = tabConfig.main_filter_form;
-        }
-        pageView.tabElements[tabConfig.name] = tabElement;
-        return tabElement;
-    }
-    /**
-     * @description 그리드 상세 내용 HTML 생성
-     **************************************
-     * @param {Object} pageView 페이지 뷰
-     * @returns {HTMLElement} 그리드 상세 내용 HTML
-     */
-    static getGridDetailHtml(pageView) {
-        let useAddButton = pageView.useButtonAdd;
-        let useFilterForm = pageView.useFilterForm;
-        let useFilterAddButton = JSON.parse((pageView.etcConfig || {}).use_filter_add_button || 'false');
-        let recordCreationCallback = pageView.recordCreationCallback;
-        let useSortButton = JSON.parse((pageView.etcConfig || {}).use_grid_sort_button || 'false');
-        useFilterAddButton = useFilterAddButton === true && useAddButton === true;
-        return html `
-      ${useFilterForm
-            ? html `
-            <div slot="headroom" class="header">
-              <div class="filters">
-                <ox-filters-form></ox-filters-form>
-                ${useSortButton
-                ? html `
-                      <div id="sorters">
-                        <md-icon
-                          @click=${e => {
-                    const target = e.currentTarget;
-                    target.nextElementSibling.open({
-                        right: 0,
-                        top: target.offsetTop + target.offsetHeight
-                    });
-                }}
-                          >sort</md-icon
-                        >
-                        <ox-popup id="sorter-control">
-                          <ox-sorters-control></ox-sorters-control>
-                        </ox-popup>
-                      </div>
-                    `
-                : nothing}
-                ${MetaUiUtil.getGridViewOption(pageView)}
-                <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
-                  <button style="display: flex; justify-content: center">
-                    <md-icon>add</md-icon>
-                  </button>
-                </ox-record-creator>
-              </div>
-            </div>
-          `
-            : nothing}
-    `;
-    }
-    /**
-     * @description 그리드 보기 옵션 버튼을 그린다.
-     ****************************************
-     * @param {Object} pageView 페이지 뷰
-     * @return {HTMLElement} 그리드 뷰 옵션 HTML
-     */
-    static getGridViewOption(pageView) {
-        if (ValueUtil.isEmpty(pageView.gridViewOptions) || pageView.gridViewOptions.length == 1) {
-            return html ``;
-        }
-        else {
-            return html `
-        <div id="modes">
-          ${pageView.gridViewOptions.includes('GRID')
-                ? html `<md-icon @click="${() => (pageView.gridMode = 'GRID')}" ?active="${pageView.gridMode == 'GRID'}"
-                >grid_on</md-icon
-              >`
-                : ``}
-          ${pageView.gridViewOptions.includes('LIST')
-                ? html `<md-icon @click="${() => (pageView.gridMode = 'LIST')}" ?active="${pageView.gridMode == 'LIST'}"
-                >format_list_bulleted</md-icon
-              >`
-                : ``}
-          ${pageView.gridViewOptions.includes('CARD')
-                ? html `<md-icon @click="${() => (pageView.gridMode = 'CARD')}" ?active="${pageView.gridMode == 'CARD'}"
-                >apps</md-icon
-              >`
-                : ``}
-        </div>
-      `;
-        }
-    }
-    /**
-     * @description 버튼 컨테이너 엘리먼트 생성
-     *************************************
-     * @param {Object} pageView
-     * @returns {HTMLElement}
-     */
-    static getButtonContainer(pageView) {
-        return html `<div class="button-container">${MetaUiUtil.getContainerButtons(pageView)}</div>`;
-    }
-}
-//# sourceMappingURL=meta-ui-util.js.map