gnui 1.2.19 → 1.2.21

package/styleguide/assets/js/gnui.js

@@ -16876,65 +16876,65 @@
 	        return GNCoreEventManager.instance;
 	    }
 	    // life cycle event add
-	    stateAdd(uid, name, handler) {
-	        return this.add(undefined, uid, name, handler);
+	    stateAdd(cid, name, handler) {
+	        return this.add(undefined, cid, name, handler);
 	    }
-	    add(target, uid, name, handler) {
-	        if (!this._eventMap[uid]) {
-	            this._eventMap[uid] = []; // 해당 uid에 대한 이벤트가 없는 경우 초기화
+	    add(target, cid, name, handler) {
+	        if (!this._eventMap[cid]) {
+	            this._eventMap[cid] = []; // 해당 cid에 대한 이벤트가 없는 경우 초기화
 	        }
-	        const eid = this._getEventId(uid); // eventID 생성
-	        this._eventMap[uid].push(target
+	        const eid = this._getEventId(cid); // eventID 생성
+	        this._eventMap[cid].push(target
 	            ? {
 	                target,
 	                eid,
-	                uid,
+	                cid,
 	                name,
 	                handler
 	            }
 	            : {
 	                eid,
-	                uid,
+	                cid,
 	                name,
 	                handler
 	            });
 	        target && on(target, name, handler); // 이벤트 바인딩
 	        return eid;
 	    }
-	    remove(uid, name) {
-	        const _events = this._getEvent(uid, name);
+	    remove(cid, name) {
+	        const _events = this._getEvent(cid, name);
 	        // 이벤트 해제
 	        if (_events.length) {
 	            _events.forEach((_event) => {
 	                off(_event.target, _event.name, _event.handler);
 	                // eventMap에서 해당 이벤트 삭제
-	                this._eventMap[uid].some(event => event.eid === _event.eid) &&
-	                    this._eventMap[uid].splice(this._eventMap[uid].findIndex(event => event.eid === _event.eid), 1);
+	                this._eventMap[cid].some(event => event.eid === _event.eid) &&
+	                    this._eventMap[cid].splice(this._eventMap[cid].findIndex(event => event.eid === _event.eid), 1);
 	            });
-	            // uid에 대한 이벤트가 남아있지 않은 경우 uid 키 삭제
-	            if (!this._eventMap[uid].length) {
-	                delete this._eventMap[uid];
+	            // cid에 대한 이벤트가 남아있지 않은 경우 cid 키 삭제
+	            if (!this._eventMap[cid].length) {
+	                delete this._eventMap[cid];
 	            }
 	        }
 	    }
-	    removeAll(uid) {
-	        if (!this._eventMap[uid]) {
+	    removeAll(cid) {
+	        if (!this._eventMap[cid]) {
 	            return;
 	        }
 	        // 이벤트 해제
-	        this._eventMap[uid].forEach(event => {
+	        this._eventMap[cid].forEach(event => {
 	            if (event.target) {
 	                off(event.target, event.name, event.handler);
 	            }
 	        });
 	        // 이벤트 삭제
-	        delete this._eventMap[uid];
+	        delete this._eventMap[cid];
 	    }
 	    /**
 	     * lifeCycle 핸들러 실행
 	     */
-	    cyclepatch(uid, name, params) {
-	        const _events = this._getEvent(uid, name);
+	    cyclepatch(cid, name, params) {
+	        const _events = this._getEvent(cid, name);
 	        if (_events.length) {
 	            _events.forEach((_event) => {
 	                const _tagret = _event.target || this;
@@ -16949,8 +16949,8 @@
 	     * - 모든 핸들러를 순차 실행한 뒤, 하나라도 `false` 를 반환한 경우 `true`(cancelled)를 반환한다.
 	     *   (첫 false 에서 중단하지 않고, 나머지 핸들러도 계속 실행한다)
 	     */
-	    async dispatch(uid, name, params) {
-	        const _events = this._getEvent(uid, name);
+	    async dispatch(cid, name, params) {
+	        const _events = this._getEvent(cid, name);
 	        let cancelled = false;
 	        if (_events.length) {
 	            for (const _event of _events) {
@@ -16964,17 +16964,17 @@
 	        }
 	        return cancelled;
 	    }
-	    _getEvent(uid, name) {
+	    _getEvent(cid, name) {
 	        // parameters에 해당하는 이벤트 반환
-	        return this._eventMap[uid]
-	            ? this._eventMap[uid].filter(event => {
+	        return this._eventMap[cid]
+	            ? this._eventMap[cid].filter(event => {
 	                return event.name === name;
 	            }) || []
 	            : [];
 	    }
-	    _getEventId(uid) {
+	    _getEventId(cid) {
 	        // event ID 생성
-	        return `ev_${uid}${this._eventMap[uid].length}`;
+	        return `ev_${cid}${this._eventMap[cid].length}`;
 	    }
 	}
 
@@ -17018,12 +17018,12 @@
 	    }
 	    // 최초 생성 후 state에 등록 - created
 	    _addComponent(component) {
-	        const uid = component._uid;
-	        if (uid) {
-	            this._componentMap[uid] = {
+	        const cid = component._cid;
+	        if (cid) {
+	            this._componentMap[cid] = {
 	                component: component,
 	                selector: component.$selector,
-	                uid: uid,
+	                cid: cid,
 	                status: 'created'
 	            };
 	        }
@@ -17038,13 +17038,28 @@
 	        if (!_selector) {
 	            return undefined;
 	        }
-	        Object.values(this._componentMap).forEach(n => {
-	            // 동일한 selector 인지 비교
-	            if (isEquals(n.uid, _selector) || isEquals(_selector.id, n.uid)) {
+	        // 1) cid 직접 조회 (string selector 인 경우)
+	        if (typeof selector === 'string' && this._componentMap[selector]) {
+	            _findComponent = this._componentMap[selector].component;
+	            _findComponent._status = this._componentMap[selector].status;
+	            return _findComponent;
+	        }
+	        // 2) data-component-id 기반 조회
+	        const dataCid = (_selector === null || _selector === void 0 ? void 0 : _selector.getAttribute) && _selector.getAttribute('data-component-id');
+	        if (dataCid && this._componentMap[dataCid]) {
+	            _findComponent = this._componentMap[dataCid].component;
+	            _findComponent._status = this._componentMap[dataCid].status;
+	            return _findComponent;
+	        }
+	        // 3) selector/element 비교 fallback
+	        Object.values(this._componentMap).some(n => {
+	            var _a;
+	            if (isEquals(n.selector, _selector) || isEquals((_a = n.component) === null || _a === void 0 ? void 0 : _a.$el, _selector)) {
 	                _findComponent = n.component;
 	                _findComponent._status = n.status;
-	                return false;
+	                return true;
 	            }
+	            return false;
 	        });
 	        return _findComponent;
 	    }
@@ -17058,7 +17073,7 @@
 	            // 동일한 selector 인지 비교해서 동일한 component의 selector이면 제거 처리
 	            if (isEquals(n.selector, _selector)) {
 	                // componentMap에서 완전히 제거
-	                delete this._componentMap[n.uid];
+	                delete this._componentMap[n.cid];
 	                // 컴포넌트 내부 참조도 제거 (메모리 누수 방지)
 	                if (n.component) {
 	                    n.component = null;
@@ -17067,32 +17082,32 @@
 	            }
 	        });
 	    }
-	    // 등록된 컴포넌트 제거 (uid 기반 - 더 효율적)
-	    _removeComponentByUid(uid) {
-	        if (!uid || !this._componentMap[uid]) {
+	    // 등록된 컴포넌트 제거 (cid 기반)
+	    _removeComponentByCid(cid) {
+	        if (!cid || !this._componentMap[cid]) {
 	            return;
 	        }
 	        // 컴포넌트 내부 참조 제거 (메모리 누수 방지)
-	        const componentInfo = this._componentMap[uid];
+	        const componentInfo = this._componentMap[cid];
 	        if (componentInfo.component) {
 	            componentInfo.component = null;
 	        }
 	        componentInfo.selector = null;
 	        // componentMap에서 완전히 제거
-	        delete this._componentMap[uid];
+	        delete this._componentMap[cid];
 	    }
 	    // 컴포넌트 life cycle에 따른 eventManager dispatch
-	    _detectedCycle(uid, name) {
+	    _detectedCycle(cid, name) {
 	        // component 마지막 status 업데이트
-	        if (this._componentMap[uid]) {
-	            this._componentMap[uid].status = name;
+	        if (this._componentMap[cid]) {
+	            this._componentMap[cid].status = name;
 	        }
-	        // event manager를 이용해 해당 uid 이벤트 dispatch
+	        // event manager를 이용해 해당 cid 이벤트 dispatch
 	        const eventManager = GNCoreEventManager.getInstance();
 	        // 호출 후
-	        eventManager.cyclepatch(uid, name, '');
+	        eventManager.cyclepatch(cid, name, '');
 	        // 이벤트 해제 - life cycle 은 컴포넌트 별로 한번씩만 존재하므로..
-	        eventManager.remove(uid, name);
+	        eventManager.remove(cid, name);
 	    }
 	    // document DOM observer 실행
 	    // - DOM 변환 이벤트 감지해서 removedNodes 가 생기면 해당 node와 일치하는 component를 찾아 제거한다.
@@ -17117,18 +17132,18 @@
 	                if (isElement$2(rm) && attr(rm, 'data-gnui')) {
 	                    remove($('#' + attr(rm, 'data-gnui')));
 	                }
-	                const childComponents = $$('[data-gn-uid]', rm);
+	                const childComponents = $$('[data-component-id]', rm);
 	                each(childComponents, (childComponent) => {
 	                    if (isElement$2(childComponent)) {
 	                        const findComponent = closerThis._getComponent($(childComponent));
-	                        if (findComponent && findComponent._uid && findComponent.$el && findComponent.$name !== 'modal') {
-	                            // $destroy 내부에서 removeAll과 _removeComponentByUid를 처리하므로 직접 호출만
+	                        if (findComponent && findComponent._cid && findComponent.$el && findComponent.$name !== 'modal') {
+	                            // $destroy 내부에서 removeAll과 _removeComponentByCid를 처리하므로 직접 호출만
 	                            findComponent.$destroy(findComponent, false);
 	                        }
 	                    }
 	                });
 	                const findComponent = closerThis._getComponent($(rm));
-	                if (findComponent && findComponent._uid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
+	                if (findComponent && findComponent._cid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
 	                    findComponent.$destroy(findComponent, false);
 	                }
 	            });
@@ -17161,6 +17176,7 @@
 	            return generateUUID();
 	        };
 	        this._uid = ((_a = this.$options) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.$selector) === null || _b === void 0 ? void 0 : _b.id) || `${GN_CONSTANT.PREFIX}${uuid()}`;
+	        this._cid = `${GN_CONSTANT.PREFIX}${uuid()}`;
 	    }
 	    $reset() { }
 	    $init(component, options) {
@@ -17171,14 +17187,14 @@
 	        // component.$options.states => 사용자가 정의한 lifecycle callback handler
 	        this.$stateBind(component);
 	        // stateManager를 통해 beforeMount 상태 dispatch
-	        stateManager._detectedCycle(component._uid, 'beforeMount');
+	        stateManager._detectedCycle(component._cid, 'beforeMount');
 	        this.$mount(component, this.$selector);
 	        this.$render(component.$options);
 	        // stateManager를 통해 beforeBind 상태 dispatch
-	        stateManager._detectedCycle(component._uid, 'beforeBind');
+	        stateManager._detectedCycle(component._cid, 'beforeBind');
 	        this.$bind(component);
 	        // stateManager를 통해 completed 상태 dispatch
-	        stateManager._detectedCycle(component._uid, 'completed');
+	        stateManager._detectedCycle(component._cid, 'completed');
 	    }
 	    $create(component, options) {
 	        // extend options
@@ -17240,7 +17256,7 @@
 	        const eventManager = GNCoreEventManager.getInstance();
 	        // lifecycle 관련 이벤트 add to eventManager
 	        GN_CONSTANT.LIFE_CYCLE.forEach((ev) => {
-	            eventManager.stateAdd(component._uid, ev, (...args) => {
+	            eventManager.stateAdd(component._cid, ev, (...args) => {
 	                // 해당 life cycle 상태에 해당하는 함수가 각 컴포넌트 내부에 정의되어 있으면 호출한다.
 	                if (isFunction(component[ev])) {
 	                    component[ev](args);
@@ -17285,13 +17301,17 @@
 	            if (tmpRole) {
 	                attr(this.$el, 'role', tmpRole);
 	            }
-	            attr(this.$el, 'data-gn-uid', this._uid);
+	            attr(this.$el, 'data-component-id', this._cid);
 	            // inherit selector class
 	            selector.className && addClass(this.$el, selector.className);
 	        }
 	        else {
 	            this.$el = $(this.$selector);
 	        }
+	        // 항상 컴포넌트 cid를 DOM에 표시 (기존 DOM 사용 시에도)
+	        if (this.$el) {
+	            attr(this.$el, 'data-component-id', this._cid);
+	        }
 	        // delegates 바인딩
 	        each(this.$options.delegates, (val, key) => {
 	            if (isString(val)) {
@@ -17311,11 +17331,11 @@
 	            const eventManager = GNCoreEventManager.getInstance();
 	            each(events, (event, name) => {
 	                if (isFunction(event)) {
-	                    eventManager.add(this.$el, this._uid, event.name || name, event);
+	                    eventManager.add(this.$el, this._cid, event.name || name, event);
 	                }
 	                else if (isPlainObject$1(event)) {
 	                    const delegate = isFunction(event.delegate) ? event.delegate() : event.delegate;
-	                    eventManager.add(delegate, this._uid, event.name, event.handler);
+	                    eventManager.add(delegate, this._cid, event.name, event.handler);
 	                }
 	            });
 	        }
@@ -17334,13 +17354,13 @@
 	     */
 	    async $event(component, name, ...params) {
 	        const eventManager = GNCoreEventManager.getInstance();
-	        return eventManager.dispatch(component._uid, name, params);
+	        return eventManager.dispatch(component._cid, name, params);
 	    }
 	    $destroy(component = this, removeEl = true) {
 	        var _a;
 	        const stateManager = GNUIState.getInstance();
 	        // state manager 를 통해 destroy 상태 dispatch
-	        stateManager._detectedCycle(component._uid, 'destroy');
+	        stateManager._detectedCycle(component._cid, 'destroy');
 	        // remove DOM (by removeEl)
 	        if (removeEl) {
 	            style(component.$el, 'display', 'none');
@@ -17350,11 +17370,11 @@
 	            component.$options._destroy();
 	        }
 	        // state manager 를 통해 destroy 상태 dispatch
-	        stateManager._detectedCycle(component._uid, 'destroyed');
+	        stateManager._detectedCycle(component._cid, 'destroyed');
 	        // event manager 에서 등록 해제
-	        GNCoreEventManager.getInstance().removeAll(component._uid);
-	        // state manager에서 component 제거 (uid 기반으로 효율적 제거)
-	        stateManager._removeComponentByUid(component._uid);
+	        GNCoreEventManager.getInstance().removeAll(component._cid);
+	        // state manager에서 component 제거 (cid 기반)
+	        stateManager._removeComponentByCid(component._cid);
 	        // 메모리 누수 방지: component의 모든 hasOwnProperty 제거
 	        // config, events, methods, _hidden 등 동적으로 추가된 속성 포함
 	        Object.keys(component).forEach((key) => {
@@ -33311,7 +33331,10 @@
 	                        text: ''
 	                    };
 	                }
-	                this.$event(this, 'onChange', option.value, option.text, this.$options.value);
+	                // 기존 의미 유지: 클릭된 옵션 기준으로 value/text 전달
+	                const value = !isArray$1(option.value) ? String(option.value) : '';
+	                const text = option.text || (isArray$1(option === null || option === void 0 ? void 0 : option.cols) ? option.cols : value);
+	                this.$event(this, 'onChange', value, text, this.$options.value);
 	            },
 	            toggle: () => {
 	                if (this.$options.disabled) {
@@ -33407,18 +33430,33 @@
 	                    const target = e instanceof Event ? $(e.currentTarget) : find(`[data-value=${option.value}]`, this.$el);
 	                    e instanceof Event && e.stopPropagation();
 	                    // toggle 처리
+	                    const checkbox = find('input[type=checkbox]', target);
 	                    if (hasClass(target, 'is-active')) {
 	                        removeClass(target, 'is-active');
-	                        find('input[type=checkbox]', target).checked = false;
+	                        if (checkbox) {
+	                            checkbox.checked = false;
+	                        }
 	                    }
 	                    else {
 	                        addClass(target, 'is-active');
-	                        find('input[type=checkbox]', target).checked = true;
+	                        if (checkbox) {
+	                            checkbox.checked = true;
+	                        }
 	                    }
 	                    const selected = findAll('.dropdown-item.is-active', this.$el).map((item) => data(item, 'data-value'));
-	                    this.$options.value = this.$options.data.filter((opt) => selected.includes(opt.value));
+	                    this.$options.value = this.$options.data.filter((opt) => {
+	                        // value가 배열이 아닌 경우에만 비교
+	                        return !isArray$1(opt.value) && selected.includes(opt.value);
+	                    });
 	                    // text 표시
-	                    const selectText = this.$options.value.map((v) => v.text).join(',');
+	                    // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+	                    const selectText = this.$options.value.map((v) => {
+	                        if (isArray$1(v === null || v === void 0 ? void 0 : v.cols)) {
+	                            return v.cols[0];
+	                        }
+	                        // value가 배열이 아닌 경우에만 사용
+	                        return v.text || (!isArray$1(v.value) ? String(v.value) : '');
+	                    }).join(',');
 	                    text$1(find('.dropdown-text', this.$el), selectText.length ? escapeEntity(selectText) : this.$options.textSets && this.$options.textSets.selectText ? this.$options.textSets.selectText : '');
 	                    this._hidden.change(option);
 	                }
@@ -33440,9 +33478,21 @@
 	                    }
 	                    // text 표시
 	                    const selectText = find('.dropdown-text', this.$el);
-	                    text$1(selectText, escapeEntity(option.text));
+	                    // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+	                    let displayText;
+	                    if (isArray$1(option === null || option === void 0 ? void 0 : option.cols)) {
+	                        displayText = option.cols[0];
+	                    }
+	                    else {
+	                        // value가 배열이 아닌 경우에만 사용
+	                        displayText = option.text || (!isArray$1(option.value) ? String(option.value) : '');
+	                    }
+	                    text$1(selectText, escapeEntity(displayText));
 	                    // select 선택값 변경
-	                    targetSelect.value = option.value;
+	                    // value가 배열이 아닌 경우에만 설정
+	                    if (!isArray$1(option.value)) {
+	                        targetSelect.value = option.value;
+	                    }
 	                    trigger(targetSelect, 'change');
 	                    this.$options.value = option;
 	                    this._hidden.change(option);
@@ -33499,21 +33549,76 @@
 	                    return;
 	                }
 	                findAll('.dropdown-item', this.$el).forEach((option) => {
-	                    if (!includes(data(option, 'value').toUpperCase(), q.toUpperCase()) && !includes(text$1(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
+	                    const itemValue = data(option, 'value');
+	                    // value가 배열이 아닌 항목만 검색 대상으로 처리
+	                    const rowData = this.$options.flatData.find((item) => {
+	                        // value가 배열이 아닌 경우에만 비교
+	                        return !isArray$1(item.value) && String(item.value) === itemValue;
+	                    });
+	                    let match = false;
+	                    // Implements [US-Rev-014] 다중 컬럼 모드: cols 배열의 값들을 검색
+	                    if (isArray$1(rowData === null || rowData === void 0 ? void 0 : rowData.cols)) {
+	                        match = rowData.cols.some((colValue) => {
+	                            return includes(String(colValue).toUpperCase(), q.toUpperCase());
+	                        });
+	                        // value 필드도 검색 대상에 포함 (배열이 아닌 경우에만)
+	                        if (!match && rowData.value && !isArray$1(rowData.value)) {
+	                            match = includes(String(rowData.value).toUpperCase(), q.toUpperCase());
+	                        }
+	                    }
+	                    else if (rowData) {
+	                        // 단일 컬럼 모드: text 또는 value 필드 검색
+	                        const textValue = rowData.text || (!isArray$1(rowData.value) ? String(rowData.value) : '');
+	                        const valueStr = !isArray$1(rowData.value) ? String(rowData.value) : '';
+	                        match = includes(valueStr.toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+	                    }
+	                    else {
+	                        // rowData를 찾지 못한 경우 (그룹화된 항목 등), DOM에서 직접 검색
+	                        const textValue = text$1(find('.dropdown-text', option));
+	                        match = includes(itemValue.toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+	                    }
+	                    if (!match) {
 	                        css$1(option, 'display', 'none');
 	                    }
 	                });
 	            },
 	            renderLabel: () => {
-	                const _labelText = this.$options.value
-	                    ? isArray$1(this.$options.value)
-	                        ? this.$options.value.map((v) => v.text).join(',')
-	                        : this.$options.value.text
-	                    : this.$options.textSets && this.$options.textSets.selectText
-	                        ? this.$options.textSets.selectText
-	                        : this.$options.flatData.length
-	                            ? this.$options.flatData[0].text
-	                            : '';
+	                // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+	                let _labelText = '';
+	                if (this.$options.value) {
+	                    if (isArray$1(this.$options.value)) {
+	                        _labelText = this.$options.value.map((v) => {
+	                            if (isArray$1(v === null || v === void 0 ? void 0 : v.cols)) {
+	                                return v.cols[0];
+	                            }
+	                            // value가 배열이 아닌 경우에만 사용
+	                            return v.text || (!isArray$1(v.value) ? String(v.value) : '');
+	                        }).join(',');
+	                    }
+	                    else {
+	                        const value = this.$options.value;
+	                        if (isArray$1(value === null || value === void 0 ? void 0 : value.cols)) {
+	                            _labelText = value.cols[0];
+	                        }
+	                        else {
+	                            // value가 배열이 아닌 경우에만 사용
+	                            _labelText = value.text || (!isArray$1(value.value) ? String(value.value) : '');
+	                        }
+	                    }
+	                }
+	                else if (this.$options.textSets && this.$options.textSets.selectText) {
+	                    _labelText = this.$options.textSets.selectText;
+	                }
+	                else if (this.$options.flatData.length) {
+	                    const firstItem = this.$options.flatData[0];
+	                    if (isArray$1(firstItem === null || firstItem === void 0 ? void 0 : firstItem.cols)) {
+	                        _labelText = firstItem.cols[0];
+	                    }
+	                    else {
+	                        // value가 배열이 아닌 경우에만 사용
+	                        _labelText = firstItem.text || (!isArray$1(firstItem.value) ? String(firstItem.value) : '');
+	                    }
+	                }
 	                return createElement$1("span", { className: "dropdown-text" }, escapeEntity(_labelText));
 	            },
 	            renderSub: (data) => {
@@ -33523,24 +33628,43 @@
 	                if (this.$options.type === 'opened' && !items.length) {
 	                    return createElement$1("div", { className: 'dropdown-nodata' }, this.$options.textSets.noData);
 	                }
-	                return (createElement$1("ul", null, items.map((option, index) => (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' +
-	                        (option.text ? '' : ' is-unselectable') +
-	                        (this.$options.value &&
-	                            (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value)
-	                            ? ' is-active'
-	                            : '') +
-	                        (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !option.text ? null : this._hidden.select.bind(this, option), "data-value": isArray$1(option.value) ? '' : option.value, title: option.text ? escapeEntity(option.text) : '' },
-	                    createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' },
-	                        option.html ? ('') : this.$options.multiple ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
-	                            createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
-	                                    (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
-	                            createElement$1("label", { for: this._uid + '_chk_' + index }, escapeEntity(option.text)))) : option.icon ? (createElement$1("span", null,
-	                            createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
-	                                createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
-	                            escapeEntity(option.text))) : (escapeEntity(option.text)),
-	                        isArray$1(option.value) && (createElement$1("span", { className: "gn-icon is-small submenu-icon" },
-	                            createElement$1("i", { className: "fas fa-angle-right" })))),
-	                    isArray$1(option.value) && this._hidden.renderSub(option.value))))));
+	                const hasCols = items.some((item) => !(item === null || item === void 0 ? void 0 : item.html) && isArray$1(item === null || item === void 0 ? void 0 : item.cols));
+	                return (createElement$1("ul", { className: hasCols ? 'is-cols' : '' }, items.map((option, index) => {
+	                    const hasHtml = !!option.html;
+	                    const hasColsData = isArray$1(option === null || option === void 0 ? void 0 : option.cols);
+	                    const renderAsCols = !hasHtml && hasColsData;
+	                    // html이 있으면 text가 있는 항목만 선택 가능
+	                    // cols가 있으면 첫 번째 컬럼을 displayText로 사용 (value가 비어도 선택 가능)
+	                    const displayText = hasHtml
+	                        ? (option.text || '')
+	                        : renderAsCols
+	                            ? (option.cols && option.cols.length ? String(option.cols[0]) : '')
+	                            : (option.text || (!isArray$1(option.value) ? String(option.value) : ''));
+	                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' +
+	                            (renderAsCols ? ' dropdown-row' : '') +
+	                            (displayText ? '' : ' is-unselectable') +
+	                            (this.$options.value &&
+	                                (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value)
+	                                ? ' is-active'
+	                                : '') +
+	                            (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !displayText ? null : this._hidden.select.bind(this, option), "data-value": isArray$1(option.value) ? '' : option.value, title: displayText ? escapeEntity(String(displayText)) : '' },
+	                        createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' },
+	                            option.html ? ('') : renderAsCols ? (createElement$1("div", { className: "gn-checks dropdown-cols" },
+	                                this.$options.multiple && (createElement$1("div", { className: "is-small is-no-padding" },
+	                                    createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
+	                                            (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
+	                                    createElement$1("label", { for: this._uid + '_chk_' + index }))),
+	                                option.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "dropdown-col" }, escapeEntity(col)))))) : this.$options.multiple ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
+	                                createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
+	                                        (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
+	                                createElement$1("label", { for: this._uid + '_chk_' + index }, escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : ''))))) : option.icon ? (createElement$1("span", null,
+	                                createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
+	                                    createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
+	                                escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : '')))) : (escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : ''))),
+	                            isArray$1(option.value) && (createElement$1("span", { className: "gn-icon is-small submenu-icon" },
+	                                createElement$1("i", { className: "fas fa-angle-right" })))),
+	                        isArray$1(option.value) && this._hidden.renderSub(option.value)));
+	                })));
 	            },
 	            flatData: () => {
 	                // data 검색 편의성을 위해 depth를 없앤 flatdata 생성
@@ -33578,11 +33702,17 @@
 	                                    : [String(this.$options.value)]; // 기타: 숫자 등
 	                        this.$options.value = this.$options.flatData.filter((opt) => {
 	                            const optValue = typeof opt.value === 'string' ? opt.value : String(opt.value);
-	                            return values.includes(optValue) && opt.text;
+	                            // Implements [US-Rev-014] cols가 있으면 text 없어도 선택 가능
+	                            return values.includes(optValue) && (opt.text || isArray$1(opt === null || opt === void 0 ? void 0 : opt.cols) || (!isArray$1(opt.value)));
 	                        });
 	                    }
 	                    else {
-	                        this.$options.value = this.$options.flatData.find((opt) => opt.value + '' === this.$options.value + '' && opt.text);
+	                        // Implements [US-Rev-014] cols가 있으면 text 없어도 선택 가능
+	                        this.$options.value = this.$options.flatData.find((opt) => {
+	                            const optValue = !isArray$1(opt.value) ? String(opt.value) : '';
+	                            const compareValue = String(this.$options.value);
+	                            return optValue === compareValue && (opt.text || isArray$1(opt === null || opt === void 0 ? void 0 : opt.cols) || optValue);
+	                        });
 	                    }
 	                }
 	            },
@@ -34425,7 +34555,7 @@
 	        const newOptions = merge(this.chartDefault, merge(chartOptions, typesDefault[this.$options.type] || {}));
 	        if (!newOptions.theme) {
 	            newOptions.theme = {
-	                palette: 'palette4'
+	                palette: 'palette1'
 	            };
 	        }
 	        this.$options.chart = new ApexCharts$1(this.$el, newOptions);
@@ -37095,6 +37225,13 @@
 	                this.$event(this, 'onSort', column);
 	            },
 	            renderHeader: (columns, isReset = false) => {
+	                if (this._isHorizontalState()) {
+	                    return (createElement$1("div", { className: "gn-datagrid-header-row is-horizontal" },
+	                        createElement$1("div", { className: "gn-datagrid-header-cell is-horizontal" }, this.$options.hasCheck && (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+	                            createElement$1("input", { type: "checkbox", className: "is-allChecker", id: this._uid + '-rows-check', "on-click": (e) => {
+	                                    this._hidden.checkAll.call(this, e);
+	                                }, disabled: this.$options.disabled }))))));
+	                }
 	                this._setColumnsTemplate(isReset);
 	                return (createElement$1("div", { className: "gn-datagrid-header-row", style: {
 	                        'grid-template-columns': this._columnsTemplate.join(' ')
@@ -37135,15 +37272,24 @@
 	            },
 	            renderBody: (data, columns) => {
 	                // 헤더가 숨겨진 경우에도 body 렌더 전에 템플릿 폭을 준비한다
-	                if (!this._columnsTemplate || !this._columnsTemplate.length) {
+	                if (!this._isHorizontalState() && (!this._columnsTemplate || !this._columnsTemplate.length)) {
 	                    this._setColumnsTemplate();
 	                }
 	                rowIdx$1 = 0;
-	                return (createElement$1("div", { className: "gn-datagrid-body", style: {
+	                return (createElement$1("div", { className: 'gn-datagrid-body' + (this._isHorizontalState() ? ' is-horizontal' : ''), style: {
+	                        'grid-template-columns': this._isHorizontalState()
+	                            ? this._orientationState.columns === 'auto-fit'
+	                                ? `repeat(auto-fit, minmax(${this._orientationState.minWidth}, 1fr))`
+	                                : `repeat(${this._orientationState.columns}, minmax(0, 1fr))`
+	                            : '',
+	                        gap: this._isHorizontalState() ? this._orientationState.gap : '',
 	                        maxHeight: this.$options.bodyHeight ? this.$options.bodyHeight : 'auto'
 	                    } }, (data === null || data === void 0 ? void 0 : data.length) ? this._hidden.renderRows(data, columns) : this._hidden.renderNodata()));
 	            },
 	            renderRows: (rows, columns, depth = 0, isOpen = false) => {
+	                if (this._isHorizontalState()) {
+	                    return rows.map((row) => this._hidden.renderRow(row, columns, 0, false, false));
+	                }
 	                return rows.map((row) => {
 	                    return row[this.$options.childField] && isArray$1(row[this.$options.childField])
 	                        ? [this._hidden.renderRow(row, columns, depth, true, isOpen), this._hidden.renderRows(row[this.$options.childField], columns, depth + 1, row.isOpened)]
@@ -37152,83 +37298,140 @@
 	            },
 	            renderRow: (row, columns, depth = 0, hasChild, isOpened, isCheck = false) => {
 	                const _index = rowIdx$1++;
+	                const getHorizontalRowClass = () => {
+	                    if (!this._isHorizontalState() || this._orientationState.columns === 'auto-fit') {
+	                        return '';
+	                    }
+	                    const classes = ['is-horizontal'];
+	                    if (_index % this._orientationState.columns === 0) {
+	                        classes.push('is-horizontal-first-col');
+	                    }
+	                    if ((_index + 1) % this._orientationState.columns === 0 || _index === this.$options.data.length - 1) {
+	                        classes.push('is-horizontal-last-col');
+	                    }
+	                    if (_index < this._orientationState.columns) {
+	                        classes.push('is-horizontal-first-row');
+	                    }
+	                    return ' ' + classes.join(' ');
+	                };
+	                const horizontalClass = getHorizontalRowClass();
 	                if (row.isChecked) {
 	                    isCheck = true;
 	                }
 	                return (createElement$1("div", { "on-click": (e) => {
-	                        !this.$options.disabled && this._hidden.selectRow.call(this, row, _index, e);
+	                        var _a;
+	                        ((_a = this === null || this === void 0 ? void 0 : this.$options) === null || _a === void 0 ? void 0 : _a.onSelect) && !this.$options.disabled && this._hidden.selectRow.call(this, row, _index, e);
 	                    }, "on-dblclick": (e) => {
-	                        !this.$options.disabled && this._hidden.doubleSelect.call(this, row, _index, e);
-	                    }, className: 'gn-datagrid-body-row' + (hasChild ? ' has-child' : '') + (row.isOpened ? '' : ' is-collapsed') + (depth > 0 && !isOpened ? ' is-hidden' : '') + (row.color ? ` ${row.color}` : ''), style: {
-	                        'grid-template-columns': this._columnsTemplate.join(' ')
-	                    }, id: this._uid + '-row-' + _index, "data-depth": depth }, columns.map((col, idx) => {
-	                    const cellStyle = {};
-	                    if (col.bodyStyle || col.style) {
-	                        each(col.bodyStyle || col.style, (value, key) => {
-	                            if (key !== 'width') {
-	                                cellStyle[key] = value;
-	                            }
-	                        });
-	                    }
-	                    if (idx === 0 && depth !== 0) {
-	                        cellStyle.paddingLeft = depth * 15 + 10 + 'px';
-	                    }
-	                    if (isIE) {
-	                        cellStyle.display = 'inline-block';
-	                    }
-	                    if (col.key === 'btnOrder') {
-	                        cellStyle.display = 'flex';
-	                        cellStyle.padding = '0';
-	                        cellStyle['justify-content'] = 'space-evenly';
-	                        cellStyle['align-items'] = 'center';
-	                        return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : ''), style: cellStyle, "on-click": (e) => {
-	                                this._hidden.stopRowSelectEvent(e);
-	                            } },
-	                            createElement$1("span", { className: 'gn-icon btn-order ' + (_index == 0 ? 'is-cancel' : 'is-info'), "on-click": () => {
-	                                    !this.$options.disabled && this._hidden.moveRowUp.call(this, _index);
-	                                } },
-	                                createElement$1("i", { className: "fas fa-arrow-circle-up" })),
-	                            createElement$1("span", { className: 'gn-icon btn-order ' + (_index == this.$options.data.length - 1 ? 'is-cancel' : 'is-info'), "on-click": () => {
-	                                    !this.$options.disabled && this._hidden.moveRowDown.call(this, _index);
+	                        var _a;
+	                        ((_a = this === null || this === void 0 ? void 0 : this.$options) === null || _a === void 0 ? void 0 : _a.onDoubleClick) && !this.$options.disabled && this._hidden.doubleSelect.call(this, row, _index, e);
+	                    }, className: 'gn-datagrid-body-row' +
+	                        (hasChild ? ' has-child' : '') +
+	                        (row.isOpened ? '' : ' is-collapsed') +
+	                        (depth > 0 && !isOpened ? ' is-hidden' : '') +
+	                        (row.color ? ` ${row.color}` : '') +
+	                        horizontalClass, style: {
+	                        'grid-template-columns': this._isHorizontalState() ? '' : this._columnsTemplate.join(' ')
+	                    }, id: this._uid + '-row-' + _index, "data-depth": depth },
+	                    this._isHorizontalState() && this._hidden.renderHorizontalCardHeader(row, _index, hasChild, isCheck),
+	                    columns.map((col, idx) => {
+	                        const cellStyle = {};
+	                        if (col.bodyStyle || col.style) {
+	                            each(col.bodyStyle || col.style, (value, key) => {
+	                                if (key !== 'width') {
+	                                    cellStyle[key] = value;
+	                                }
+	                            });
+	                        }
+	                        if (idx === 0 && depth !== 0) {
+	                            cellStyle.paddingLeft = depth * 15 + 10 + 'px';
+	                        }
+	                        if (isIE) {
+	                            cellStyle.display = 'inline-block';
+	                        }
+	                        if (col.key === 'btnOrder') {
+	                            cellStyle.display = 'flex';
+	                            cellStyle.padding = '0';
+	                            cellStyle['justify-content'] = 'space-evenly';
+	                            cellStyle['align-items'] = 'center';
+	                            return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : '') + (this._isHorizontalState() ? ' is-horizontal' : ''), style: cellStyle, "data-key": col.key, "on-click": (e) => {
+	                                    this._hidden.stopRowSelectEvent(e);
 	                                } },
-	                                createElement$1("i", { className: "fas fa-arrow-circle-down" }))));
-	                    }
-	                    if (col.key === 'btnDelete') {
-	                        cellStyle.display = 'flex';
-	                        cellStyle['justify-content'] = 'center';
-	                        cellStyle['align-items'] = 'center';
-	                        return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : ''), style: cellStyle, "on-click": (e) => {
-	                                this._hidden.stopRowSelectEvent(e);
-	                            } },
-	                            createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": () => {
-	                                    !this.$options.disabled && this._hidden.deleteRow.call(this, _index);
+	                                createElement$1("span", { className: 'gn-icon btn-order ' + (_index == 0 ? 'is-cancel' : 'is-info'), "on-click": () => {
+	                                        !this.$options.disabled && this._hidden.moveRowUp.call(this, _index);
+	                                    } },
+	                                    createElement$1("i", { className: "fas fa-arrow-circle-up" })),
+	                                createElement$1("span", { className: 'gn-icon btn-order ' + (_index == this.$options.data.length - 1 ? 'is-cancel' : 'is-info'), "on-click": () => {
+	                                        !this.$options.disabled && this._hidden.moveRowDown.call(this, _index);
+	                                    } },
+	                                    createElement$1("i", { className: "fas fa-arrow-circle-down" }))));
+	                        }
+	                        if (col.key === 'btnDelete') {
+	                            cellStyle.display = 'flex';
+	                            cellStyle['justify-content'] = 'center';
+	                            cellStyle['align-items'] = 'center';
+	                            return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : '') + (this._isHorizontalState() ? ' is-horizontal' : ''), style: cellStyle, "data-key": col.key, "on-click": (e) => {
+	                                    this._hidden.stopRowSelectEvent(e);
 	                                } },
-	                                createElement$1("i", { className: "fas fa-trash" }))));
-	                    }
-	                    return (createElement$1("div", { className: 'gn-datagrid-body-cell ' +
-	                            (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
-	                            (isFunction(col.onSelect) ? ' is-selectable' : '') +
-	                            (col.isHidden ? ' is-unvisible' : ''), "data-key": col.key, style: cellStyle, "on-click": (e) => {
-	                            !this.$options.disabled && this._hidden.selectCell.call(this, col, row, _index, e);
-	                        }, "on-mouseenter": (e) => {
-	                            !this.$options.disabled && this._hidden.hoverCell.call(this, col, row, _index, e);
-	                        }, "on-mouseleave": (e) => {
-	                            this._hidden.blurCell.call(this, col, row, _index, e);
-	                        }, title: col.tipField && row[col.tipField] ? row[col.tipField] : !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild, isCheck, _index)));
-	                })));
-	            },
-	            renderCell: (row, col, idx, hasChild, isCheck, _index) => {
+	                                createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": () => {
+	                                        !this.$options.disabled && this._hidden.deleteRow.call(this, _index);
+	                                    } },
+	                                    createElement$1("i", { className: "fas fa-trash" }))));
+	                        }
+	                        return (createElement$1("div", { className: 'gn-datagrid-body-cell ' +
+	                                (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
+	                                (isFunction(col.onSelect) ? ' is-selectable' : '') +
+	                                (col.isHidden ? ' is-unvisible' : '') +
+	                                (this._isHorizontalState() ? ' is-horizontal' : ''), "data-key": col.key, style: cellStyle, "on-click": (e) => {
+	                                col.onSelect && !this.$options.disabled && this._hidden.selectCell.call(this, col, row, _index, e);
+	                            }, "on-mouseenter": (e) => {
+	                                col.onHover && !this.$options.disabled && this._hidden.hoverCell.call(this, col, row, _index, e);
+	                            }, "on-mouseleave": (e) => {
+	                                col.offHover && this._hidden.blurCell.call(this, col, row, _index, e);
+	                            }, title: col.tipField && row[col.tipField] ? row[col.tipField] : !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild, isCheck, _index)));
+	                    })));
+	            },
+	            renderHorizontalCellLabel: (col) => {
+	                if (this._isSystemAddedColumn(col.key)) {
+	                    return null;
+	                }
+	                return createElement$1("span", { className: "gn-datagrid-cell-label" }, col.label);
+	            },
+	            renderHorizontalCardHeader: (row, index, hasChild, isCheck) => {
+	                const hasHeader = this.$options.hasCheck || (this.$options.hasDelete && !this.$options.readonly);
+	                const showCheck = this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true';
+	                const showDelete = this.$options.hasDelete && !this.$options.readonly;
+	                if (!hasHeader) {
+	                    return null;
+	                }
+	                return (createElement$1("div", { className: "gn-datagrid-card-header" },
+	                    createElement$1("div", { className: "gn-datagrid-card-header-left" }, showCheck && (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+	                        createElement$1("input", { type: "checkbox", id: this._uid + '-row-check-' + index, className: "is-rowChecker", "on-click": (e) => {
+	                                this._hidden.check.call(this, row, e);
+	                            }, defaultChecked: isCheck, disabled: this.$options.disabled || row.disabled })))),
+	                    createElement$1("div", { className: "gn-datagrid-card-header-right" }, showDelete && (createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": (e) => {
+	                            this._hidden.stopRowSelectEvent(e);
+	                            !this.$options.disabled && this._hidden.deleteRow.call(this, index);
+	                        } },
+	                        createElement$1("i", { className: "fas fa-trash" }))))));
+	            },
+	            renderCellValue: (row, col, idx, hasChild, isCheck, _index) => {
 	                return [
-	                    idx === 0 && hasChild ? (createElement$1("span", { className: "is-toggler", "on-click": (e) => {
+	                    idx === 0 && hasChild && !this._isHorizontalState() ? (createElement$1("span", { className: "is-toggler", "on-click": (e) => {
 	                            !this.$options.disabled && this._hidden.toggle.call(this, row, e);
 	                        } })) : (''),
-	                    idx === 0 && this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true' ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+	                    idx === 0 && this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true' && !this._isHorizontalState() ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
 	                        createElement$1("input", { type: "checkbox", id: this._uid + '-row-check-' + _index, className: "is-rowChecker", "on-click": (e) => {
 	                                this._hidden.check.call(this, row, e);
 	                            }, defaultChecked: isCheck, disabled: this.$options.disabled || row.disabled }))) : (''),
 	                    col.template ? createElement$1("span", { className: "gn-datagrid-cell", innerHTML: col.template(col.key, row, col) }) : row[col.key] !== undefined ? row[col.key] : ''
 	                ];
 	            },
+	            renderCell: (row, col, idx, hasChild, isCheck, _index) => {
+	                if (this._isHorizontalState()) {
+	                    return [this._hidden.renderHorizontalCellLabel(col), createElement$1("div", { className: "gn-datagrid-cell-value" }, this._hidden.renderCellValue(row, col, idx, hasChild, isCheck, _index))];
+	                }
+	                return this._hidden.renderCellValue(row, col, idx, hasChild, isCheck, _index);
+	            },
 	            renderNodata: () => {
 	                return (createElement$1("div", { className: "gn-datagrid-body-row is-nodata" },
 	                    createElement$1("div", { className: "gn-datagrid-body-cell has-text-center" }, this.$options.textSets.noData)));
@@ -37314,7 +37517,10 @@
 	                });
 	                this.$event(this, 'onCheckAll', e.target.checked);
 	            },
-	            showDetail(index, headerKeys, rawDataKeys) {
+	            showDetail: (index, headerKeys, rawDataKeys) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                const rows = findAll(`.gn-datagrid-body > .gn-datagrid-body-row`, this.$el);
 	                const row = rows[+index];
 	                if (next(row) && hasClass(next(row), 'gn-datagrid-body-row-detail')) {
@@ -37401,6 +37607,7 @@
 	            },
 	            reRender: ({ headers, data, hasCheck }) => {
 	                return new Promise(resolve => {
+	                    this._refreshOrientationState(this.$options);
 	                    if (hasCheck === undefined) {
 	                        hasCheck = this.$options.hasCheck;
 	                    }
@@ -37609,8 +37816,8 @@
 	                visibles.forEach((visible, index) => {
 	                    const colNumber = index + 1;
 	                    !visible
-	                        ? addClass(findAll('.gn-datagrid-body-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible')
-	                        : removeClass(findAll('.gn-datagrid-body-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible');
+	                        ? addClass(findAll(`.gn-datagrid-body-cell[data-key="${this.$options.headers[index].key}"]`, this.$el), 'is-unvisible')
+	                        : removeClass(findAll(`.gn-datagrid-body-cell[data-key="${this.$options.headers[index].key}"]`, this.$el), 'is-unvisible');
 	                    !visible
 	                        ? addClass(findAll('.gn-datagrid-header-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible')
 	                        : removeClass(findAll('.gn-datagrid-header-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible');
@@ -37655,6 +37862,13 @@
 	                removeClass(this.$el, 'is-disabled');
 	            }
 	        };
+	        this._orientationState = {
+	            orientation: 'vertical',
+	            columns: 1,
+	            gap: 0,
+	            minWidth: 240,
+	            hasGap: false
+	        };
 	        this.config = {
 	            width: '100%',
 	            hasCheck: false,
@@ -37669,6 +37883,7 @@
 	                deleteLabel: '',
 	                deleteConfirmMessage: ''
 	            },
+	            orientation: 'vertical',
 	            childField: 'child',
 	            checkCapturing: true,
 	            sort: {
@@ -37689,10 +37904,10 @@
 	            onDelete: true
 	        };
 	        this.methods = {
-	            reRender(options) {
+	            reRender: (options) => {
 	                return this._hidden.reRender(options);
 	            },
-	            resetData(data) {
+	            resetData: (data) => {
 	                if (isFunction(data)) {
 	                    this.$options.asyncData = data;
 	                    data = [];
@@ -37701,45 +37916,60 @@
 	                }
 	                return this._hidden.resetData(arrClone(data));
 	            },
-	            addChild(index, data) {
+	            addChild: (index, data) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                this._hidden.addChild(index, arrClone(data));
 	            },
-	            addRow(data) {
+	            addRow: (data) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                this._hidden.addChild(null, arrClone(data));
 	                this.$options.data = this.$options.data.concat(data);
 	            },
-	            expand(index) {
+	            expand: (index) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                this._hidden.expand(index);
 	            },
-	            collapse(index) {
+	            collapse: (index) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                this._hidden.collapse(index);
 	            },
-	            getChecked() {
+	            getChecked: () => {
 	                return this._hidden.getChecked();
 	            },
-	            hideCols(keys) {
+	            hideCols: (keys) => {
 	                this._hidden.hideCols(keys);
 	            },
-	            showCols(keys) {
+	            showCols: (keys) => {
 	                this._hidden.showCols(keys);
 	            },
-	            showAll() {
+	            showAll: () => {
 	                this._hidden.showAll();
 	            },
-	            showDetail(index, headerKeys, rawDataKeys) {
+	            showDetail: (index, headerKeys, rawDataKeys) => {
+	                if (this._isHorizontalState()) {
+	                    return;
+	                }
 	                this._hidden.showDetail.call(this, index, headerKeys, rawDataKeys);
 	            },
-	            selectRow(index, rowData) {
+	            selectRow: (index, rowData) => {
 	                let row = rowData;
 	                if (!row) {
 	                    row = this.$options.data[index];
 	                }
 	                !this.$options.disable && this._hidden.selectRow(row, index);
 	            },
-	            disable() {
+	            disable: () => {
 	                this._hidden.disable();
 	            },
-	            enable() {
+	            enable: () => {
 	                this._hidden.enable();
 	            }
 	        };
@@ -37792,6 +38022,34 @@
 	            });
 	        }
 	    }
+	    // 렌더에서 바로 쓸 수 있는 orientation 상태를 만든다.
+	    _resolveOrientationState(config = this.$options) {
+	        var _a, _b, _c, _d, _e;
+	        const orientation = (config === null || config === void 0 ? void 0 : config.orientation) === 'horizontal' ? 'horizontal' : 'vertical';
+	        const optionColumns = (_a = config === null || config === void 0 ? void 0 : config.orientationOptions) === null || _a === void 0 ? void 0 : _a.columns;
+	        const columns = optionColumns === 'auto-fit' ? optionColumns : Number.isInteger(Number(optionColumns)) && Number(optionColumns) > 0 ? Number(optionColumns) : 1;
+	        const optionGap = (_c = (_b = config === null || config === void 0 ? void 0 : config.orientationOptions) === null || _b === void 0 ? void 0 : _b.gap) !== null && _c !== void 0 ? _c : 0;
+	        const isZeroLikeGap = optionGap === 0 || optionGap === '0' || optionGap === '0px' || optionGap === '';
+	        const gap = columns === 'auto-fit' && isZeroLikeGap ? '5px' : isZeroLikeGap ? 0 : typeof optionGap === 'number' ? optionGap + 'px' : optionGap;
+	        const rawMinWidth = (_e = (_d = config.orientationOptions) === null || _d === void 0 ? void 0 : _d.minWidth) !== null && _e !== void 0 ? _e : 240;
+	        const minWidth = typeof rawMinWidth === 'number' ? rawMinWidth + 'px' : rawMinWidth;
+	        return {
+	            orientation,
+	            columns,
+	            gap,
+	            minWidth,
+	            hasGap: gap !== 0
+	        };
+	    }
+	    // 실제 옵션이 갱신될 때 내부 orientation 상태를 새로 계산한다.
+	    _refreshOrientationState(config = this.$options) {
+	        this._orientationState = this._resolveOrientationState(config);
+	        return this._orientationState;
+	    }
+	    // 내부 렌더 분기에서는 orientationState만 기준으로 사용한다.
+	    _isHorizontalState() {
+	        return this._orientationState.orientation === 'horizontal';
+	    }
 	    _isSystemAddedColumn(key) {
 	        return ['btnOrder', 'btnDelete'].includes(key);
 	    }
@@ -37799,6 +38057,10 @@
 	    _prepareHeaders(headers = []) {
 	        const hasOrderColumn = headers.some((header) => header.key === 'btnOrder');
 	        const hasDeleteColumn = headers.some((header) => header.key === 'btnDelete');
+	        const horizontal = this._isHorizontalState();
+	        if (horizontal) {
+	            headers = headers.map((header) => (Object.assign(Object.assign({}, header), { sortable: false, draggable: false })));
+	        }
 	        if (this.$options.hasOrder && !this.$options.readonly && !hasOrderColumn) {
 	            headers.push({
 	                label: this.$options.textSets.orderLabel,
@@ -37808,7 +38070,7 @@
 	                }
 	            });
 	        }
-	        if (this.$options.hasDelete && !this.$options.readonly && !hasDeleteColumn) {
+	        if (this.$options.hasDelete && !this.$options.readonly && !hasDeleteColumn && !horizontal) {
 	            headers.push({
 	                label: this.$options.textSets.deleteLabel,
 	                key: 'btnDelete',
@@ -37821,9 +38083,14 @@
 	        return headers;
 	    }
 	    template(config) {
+	        const resolvedConfig = Object.assign(Object.assign({}, this.$options), config);
+	        this._refreshOrientationState(resolvedConfig);
+	        const contentsMarginTop = this.$options.bodyTopMargin ? this.$options.bodyTopMargin : this._isHorizontalState() && this._orientationState.hasGap ? String(this._orientationState.gap) : '0';
 	        const styles = {};
 	        const headers = this._prepareHeaders(config.headers);
 	        return (createElement$1("div", { id: this._uid, className: 'gn-datagrid' +
+	                (this._isHorizontalState() ? ' is-horizontal' : '') +
+	                (this._isHorizontalState() && this._orientationState.hasGap ? ' has-horizontal-gap' : '') +
 	                (config.style ? ' is-' + config.style : '') +
 	                (config.isEllipsis ? ' is-ellipsis' : '') +
 	                (config.bodyHeight ? ' has-fixed-body' : '') +
@@ -37833,7 +38100,7 @@
 	                (config.data.some((d) => isArray$1(d[this.$options.childField])) ? ' has-left-padding' : '') +
 	                (config.disabled ? ' is-disabled' : ''), style: styles },
 	            config.hasHeader && createElement$1("div", { className: "gn-datagrid-header" }, this._hidden.renderHeader(headers)),
-	            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: this.$options.bodyTopMargin ? this.$options.bodyTopMargin : '0', marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), headers)),
+	            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: contentsMarginTop, marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), headers)),
 	            config.paginator /* 페이지네이터 옵션 확인 */ && createElement$1("div", { className: "gn-datagrid-footer" })));
 	    }
 	    // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37850,7 +38117,12 @@
 	        }
 	    }
 	    completed() {
-	        if (this.$options.fixHeader && this.$options.hasHeader) {
+	        const isHorizontal = this._isHorizontalState();
+	        const isVertical = !isHorizontal;
+	        const usesFixedHeader = this.$options.fixHeader && this.$options.hasHeader;
+	        const needsBlankHeader = usesFixedHeader || this.$options.bodyHeight;
+	        isHorizontal ? addClass(this.$el, 'is-horizontal') : removeClass(this.$el, 'is-horizontal');
+	        if (usesFixedHeader && isVertical) {
 	            const body = find('.gn-datagrid-contents', this.$el);
 	            const header = find('.gn-datagrid-header', this.$el);
 	            if (header) {
@@ -37863,7 +38135,7 @@
 	                css$1(body, 'margin-bottom', this.$options.bodyBottomMargin);
 	            }
 	        }
-	        if ((this.$options.fixHeader && this.$options.hasHeader) || this.$options.bodyHeight) {
+	        if (isVertical && needsBlankHeader) {
 	            this._hidden.setBlankHeader();
 	            on(window, 'resize', this._hidden.setBlankHeader);
 	        }
@@ -37899,7 +38171,7 @@
 	                    color: (this.$options.readonly ? 'info' : 'cancel')
 	                };
 	                return (createElement$1("div", { "on-dblclick": (e) => {
-	                        this._hidden.doubleSelect.call(this, row, _index, e);
+	                        this.$options.onDoubleClick && this._hidden.doubleSelect.call(this, row, _index, e);
 	                    }, id: this._uid + '-row-' + _index, className: 'gn-datalist-body-row' + (hasChild ? ' has-child' : '') + (row.isOpened ? '' : ' is-collapsed') + (row.isSelectedRow ? ' is-active' : '') + (depth > 0 && !isOpened ? ' is-hidden' : ''), "data-depth": depth, style: { cursor: this.$options.onSelect ? 'pointer' : 'default' } },
 	                    createElement$1("ol", { className: 'gn-datalist-ol-container' }, columns.map((col, idx) => {
 	                        const cellStyle = {};
@@ -37928,9 +38200,9 @@
 	                                    (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
 	                                    (isFunction(col.onSelect) ? ' is-selectable' : '') +
 	                                    (col.isHidden ? ' is-unvisible' : ''), style: cellStyle, "on-mouseenter": (e) => {
-	                                    this._hidden.hoverCell.call(this, col, row, _index, e);
+	                                    col.onHover && this._hidden.hoverCell.call(this, col, row, _index, e);
 	                                }, "on-mouseleave": (e) => {
-	                                    this._hidden.blurCell.call(this, col, row, _index, e);
+	                                    col.offHover && this._hidden.blurCell.call(this, col, row, _index, e);
 	                                }, title: !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild)))));
 	                    })),
 	                    createElement$1("div", { id: this._uid + '-btn-' + index, className: "gn-datalist-btn-container" },
@@ -38341,6 +38613,10 @@
 	            focus: () => {
 	                const modal = find('.modal-content', this.$el);
 	                modal.focus();
+	            },
+	            extra: (actionKey) => {
+	                // notify page about which extra button clicked
+	                this.$event(this, 'onExtra', actionKey);
 	            }
 	        };
 	        this.config = {
@@ -38358,6 +38634,7 @@
 	            hasClose: true,
 	            hasConfirm: false,
 	            hasCancel: false,
+	            extraButtons: [],
 	            isModal: true,
 	            minimized: false,
 	            resizable: false,
@@ -38368,7 +38645,8 @@
 	        this.events = {
 	            onClose: true,
 	            onConfirm: true,
-	            onOpen: true
+	            onOpen: true,
+	            onExtra: true
 	        };
 	        this.methods = {
 	            close() {
@@ -38410,7 +38688,10 @@
 	                            createElement$1("i", { className: "fas fa-times" })))))),
 	                createElement$1("div", { className: "modal-body", style: styles },
 	                    createElement$1("div", { className: "modal-body-content", style: contStyles })),
-	                (config.hasConfirm || config.hasCancel) /* 확인/취소 옵션 확인 */ && (createElement$1("div", { className: "modal-footer has-text-center" },
+	                (config.hasConfirm || config.hasCancel || (Array.isArray(config.extraButtons) && config.extraButtons.length > 0)) /* 확인/취소/추가버튼 옵션 확인 */ && (createElement$1("div", { className: "modal-footer has-text-center" },
+	                    Array.isArray(config.extraButtons) &&
+	                        config.extraButtons.length > 0 &&
+	                        config.extraButtons.map((btn) => (createElement$1("button", { type: "button", className: 'gn-button ' + (btn.className ? btn.className : 'is-mono'), "on-click": this._hidden.extra.bind(this, btn.key || btn.label) }, btn.label || btn.key))),
 	                    config.hasConfirm && (createElement$1("button", { type: "button", className: 'gn-button' + ` is-${config.sizeSets.confirm}`, id: this._uid + '_confirm', "on-click": this._hidden.confirm }, config.textSets.confirm)),
 	                    config.hasCancel && (createElement$1("button", { type: "button", className: 'gn-button btnCloseModal is-cancel' + ` is-${config.sizeSets.cancel}`, id: this._uid + '_cancel', "on-click": this._hidden.close }, config.textSets.cancel)))))));
 	    }
@@ -39205,6 +39486,7 @@
 
 	class MenuButton extends GNCoreInstance {
 	    constructor(name, selector, options = {}) {
+	        var _a, _b, _c, _d;
 	        super(name, selector, options);
 	        this._hidden = {
 	            open: () => {
@@ -39216,7 +39498,9 @@
 	                removeClass(this.$el, 'is-open');
 	            },
 	            select: (menu, e) => {
-	                this.$event(this, 'onSelect', menu.value, menu.text, menu, e);
+	                // cols만 있고 text가 없는 경우 cols[0]을 text로 사용 (호환성 유지)
+	                const menuText = menu.text || (isArray$1(menu === null || menu === void 0 ? void 0 : menu.cols) ? menu.cols[0] : menu.value || '');
+	                this.$event(this, 'onSelect', menu.value, menuText, menu, e);
 	                this._hidden.close();
 	            },
 	            changeText: (buttonText) => {
@@ -39251,12 +39535,16 @@
 	                    // 부모 경로를 포함한 고유한 ID 생성
 	                    const currentPath = parentPath ? `${parentPath}-${index}` : `${index}`;
 	                    const uniqueId = `${this._uid}-${currentPath}`;
+	                    const hasColsData = isArray$1(menu === null || menu === void 0 ? void 0 : menu.cols);
+	                    const renderAsCols = !hasHtml && hasColsData;
+	                    const canSelect = !hasHtml || !!menu.text;
 	                    return (createElement$1("li", { id: uniqueId, className: 'menuButton-menu' +
 	                            (this.$options.align ? ' has-text-' + this.$options.align : '') +
 	                            (canRenderChild ? ' has-submenu' : '') +
 	                            (depth > 0 ? ' is-submenu-item' : '') +
 	                            (isDisabled ? ' is-disabled' : '') +
-	                            (isActived ? ' is-actived' : ''), "on-click": (e) => {
+	                            (isActived ? ' is-actived' : '') +
+	                            (renderAsCols ? ' has-cols' : ''), "on-click": (e) => {
 	                            // disabled 상태이거나 자식 메뉴가 있는 경우 클릭 이벤트 처리하지 않음
 	                            if (isDisabled) {
 	                                e.stopPropagation();
@@ -39265,12 +39553,16 @@
 	                            }
 	                            // 자식 메뉴가 없는 경우에만 select 이벤트 발생
 	                            if (!canRenderChild) {
+	                                if (!canSelect) {
+	                                    e.stopPropagation();
+	                                    return;
+	                                }
 	                                e.stopPropagation();
 	                                this._hidden.select.call(this, menu, e);
 	                            }
 	                        }, innerHTML: hasHtml ? menu.html : '' },
-	                        hasHtml ? ('') : (createElement$1("span", { className: "menuButton-menu-content" },
-	                            createElement$1("span", { className: "menuButton-menu-text" }, menu.text),
+	                        hasHtml ? ('') : renderAsCols ? (createElement$1("div", { className: "menubutton-cols" }, menu.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "menubutton-col" }, escapeEntity(col)))))) : (createElement$1("span", { className: "menuButton-menu-content" },
+	                            createElement$1("span", { className: "menuButton-menu-text" }, menu.text || menu.value || ''),
 	                            canRenderChild && (createElement$1("span", { className: "menuButton-menu-arrow" },
 	                                createElement$1("i", { className: "fas fa-caret-right" }))))),
 	                        canRenderChild && this._hidden.renderMenus.call(this, menu.child, depth + 1, currentPath)));
@@ -39282,9 +39574,11 @@
 	        };
 	        this.config = {
 	            textSets: {
-	                buttonText: this.$selector.textContent
+	                buttonText: ((_a = this.$selector) === null || _a === void 0 ? void 0 : _a.cols)
+	                    ? (isArray$1(this.$selector.cols) ? this.$selector.cols.join(', ') : String(this.$selector.cols))
+	                    : (((_b = this.$selector) === null || _b === void 0 ? void 0 : _b.textContent) || ((_c = this.$selector) === null || _c === void 0 ? void 0 : _c.text) || '')
 	            },
-	            name: this.$selector.name,
+	            name: (_d = this.$selector) === null || _d === void 0 ? void 0 : _d.name,
 	            data: [],
 	            align: 'left'
 	        };
@@ -39436,15 +39730,124 @@
 	}
 
 	class MultiTextArea extends GNCoreInstance {
+	    _isMaxLengthMessageEnabled() {
+	        return !!(this.$options.maxlength && this.$options.useMaxLengthMessage);
+	    }
+	    _getTotalLength(valueSet) {
+	        return this.$options.lang.reduce((sum, currentLang) => {
+	            const currentValue = valueSet[currentLang] || '';
+	            return sum + currentValue.length;
+	        }, 0);
+	    }
+	    _getTotalLengthWithoutLang(valueSet, excludeLang) {
+	        return this.$options.lang.reduce((sum, currentLang) => {
+	            if (currentLang === excludeLang) {
+	                return sum;
+	            }
+	            const currentValue = valueSet[currentLang] || '';
+	            return sum + currentValue.length;
+	        }, 0);
+	    }
+	    _getRemainMessage(remain) {
+	        var _a, _b;
+	        const template = ((_b = (_a = this.$options) === null || _a === void 0 ? void 0 : _a.textSets) === null || _b === void 0 ? void 0 : _b.maxLengthMessage) || '{{maxlength}}자 입력 가능합니다.';
+	        return template.replace(/\{\{\s*maxlength\s*\}\}/g, String(remain));
+	    }
 	    constructor(name, selector, options = {}) {
 	        super(name, selector, options);
 	        this._hidden = {
+	            beforeInput: (e) => {
+	                var _a, _b;
+	                if (!this.$options.maxlength || !this._isMaxLengthMessageEnabled()) {
+	                    return;
+	                }
+	                const target = e.target;
+	                const lang = data(target, 'data-lang');
+	                if (!lang) {
+	                    return;
+	                }
+	                if (e.inputType && e.inputType.startsWith('delete')) {
+	                    return;
+	                }
+	                const currentValue = val(target) || '';
+	                const selectionStart = typeof target.selectionStart === 'number' ? target.selectionStart : currentValue.length;
+	                const selectionEnd = typeof target.selectionEnd === 'number' ? target.selectionEnd : currentValue.length;
+	                const selectedLength = Math.max(0, selectionEnd - selectionStart);
+	                let insertValue = e.data || '';
+	                if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+	                    insertValue = '\n';
+	                }
+	                if (e.inputType === 'insertFromPaste' && !insertValue) {
+	                    const pastedText = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData) === null || _b === void 0 ? void 0 : _b.call(_a, 'text/plain');
+	                    insertValue = typeof pastedText === 'string' ? pastedText : '';
+	                }
+	                // 현재 언어를 제외한 나머지 언어들의 총 입력 길이를 기준으로 남은 입력 가능 길이를 계산한다.
+	                const totalLengthWithoutCurrent = this._getTotalLengthWithoutLang(this.$options.value, lang);
+	                const allowedLengthForCurrent = Math.max(0, this.$options.maxlength - totalLengthWithoutCurrent);
+	                const remainingForInsert = this.$options.maxlength - totalLengthWithoutCurrent - (currentValue.length - selectedLength);
+	                // paste는 "붙여넣기 내용 우선 반영 + 전체 결과의 뒤를 자르기" 정책을 적용한다.
+	                if (e.inputType === 'insertFromPaste') {
+	                    if (remainingForInsert <= 0) {
+	                        e.preventDefault();
+	                        return;
+	                    }
+	                    const before = currentValue.slice(0, selectionStart);
+	                    const after = currentValue.slice(selectionEnd);
+	                    const nextValue = `${before}${insertValue}${after}`;
+	                    if (nextValue.length <= allowedLengthForCurrent) {
+	                        return;
+	                    }
+	                    e.preventDefault();
+	                    const clamped = nextValue.slice(0, allowedLengthForCurrent);
+	                    val(target, clamped);
+	                    const nextCaret = Math.min((before + insertValue).length, clamped.length);
+	                    target.setSelectionRange(nextCaret, nextCaret);
+	                    trigger(target, 'input');
+	                    return;
+	                }
+	                if (remainingForInsert >= insertValue.length) {
+	                    return;
+	                }
+	                if (remainingForInsert <= 0) {
+	                    e.preventDefault();
+	                    return;
+	                }
+	                // 붙여넣기/다중 입력이 한도를 넘는 경우 허용 가능한 길이만 잘라서 반영한다.
+	                e.preventDefault();
+	                const partial = insertValue.slice(0, remainingForInsert);
+	                target.setRangeText(partial, selectionStart, selectionEnd, 'end');
+	                trigger(target, 'input');
+	            },
 	            change: (e) => {
 	                const target = e.target;
 	                const lang = data(target, 'data-lang');
-	                this.$options.value[lang] = val(target);
-	                if (this.$options.maxlength) {
-	                    text$1(this.$options.delegates[lang], this.$options.value[lang].length);
+	                if (!lang) {
+	                    return;
+	                }
+	                this.$options.value[lang] = val(target) || '';
+	                if (this.$options.maxlength && this._isMaxLengthMessageEnabled()) {
+	                    // 총합 maxlength를 넘지 않도록 현재 언어 값만 상한선까지 보정한다.
+	                    const totalLengthWithoutCurrent = this._getTotalLengthWithoutLang(this.$options.value, lang);
+	                    const allowedLength = Math.max(0, this.$options.maxlength - totalLengthWithoutCurrent);
+	                    const clampedValue = this.$options.value[lang].slice(0, allowedLength);
+	                    if (clampedValue !== this.$options.value[lang]) {
+	                        this.$options.value[lang] = clampedValue;
+	                        val(target, clampedValue);
+	                    }
+	                }
+	                if (this.$options.maxlength && this.$options.delegates[lang]) {
+	                    const hasMaxLengthMessage = this._isMaxLengthMessageEnabled();
+	                    if (hasMaxLengthMessage) {
+	                        // 메시지 모드에서는 모든 탭에 동일한 "남은 글자 수" 안내를 동기화한다.
+	                        const totalLength = this._getTotalLength(this.$options.value);
+	                        const textValue = this._getRemainMessage(this.$options.maxlength - totalLength);
+	                        this.$options.lang.forEach((targetLang) => {
+	                            text$1(this.$options.delegates[targetLang], textValue);
+	                        });
+	                    }
+	                    else {
+	                        text$1(this.$options.delegates[lang], this.$options.value[lang].length);
+	                    }
 	                }
 	                this.$event(this, 'onChange', this.$options.value);
 	            },
@@ -39461,7 +39864,7 @@
 	                    }
 	                    const textInput = find(`[data-lang=${lang}]`, this.$el);
 	                    val(textInput, value[lang]);
-	                    trigger(textInput, 'keyup');
+	                    trigger(textInput, 'input');
 	                });
 	            },
 	            disable: () => {
@@ -39480,6 +39883,10 @@
 	        this.config = {
 	            lang: ['en', 'ko'],
 	            value: {},
+	            useMaxLengthMessage: false,
+	            textSets: {
+	                maxLengthMessage: '{{maxlength}}자 입력 가능합니다.'
+	            },
 	            delegates: {}
 	        };
 	        this.events = {
@@ -39504,6 +39911,12 @@
 	    }
 	    template(config) {
 	        const styles = {};
+	        const totalLength = config.lang.reduce((sum, currentLang) => {
+	            const currentValue = config.value && config.value[currentLang] ? config.value[currentLang] : '';
+	            return sum + currentValue.length;
+	        }, 0);
+	        const hasMaxLengthMessage = this._isMaxLengthMessageEnabled();
+	        const remainMessage = config.maxlength ? this._getRemainMessage(config.maxlength - totalLength) : '';
 	        if (config.width) {
 	            styles.width = getUnit('width', config.width);
 	        }
@@ -39512,11 +39925,14 @@
 	                createElement$1("ul", null, config.lang.map((l, index) => (createElement$1("li", { className: index === 0 ? 'is-active' : '' },
 	                    createElement$1("a", { href: '#' + this._uid + '-' + l }, l)))))),
 	            createElement$1("div", { id: this._uid + '_content' }, config.lang.map((l) => (createElement$1("div", { id: this._uid + '-' + l },
-	                createElement$1("textarea", { className: "gn-textarea", "data-lang": l, rows: config.rows ? config.rows : '', maxLength: config.maxlength ? config.maxlength : 524288, "on-keyup": this._hidden.change, disabled: config.disabled, readOnly: config.readonly }, config.value ? config.value[l] : ''),
-	                config.maxlength && (createElement$1("p", { className: "has-text-right has-text-size6" },
-	                    createElement$1("span", { className: "charLen", "data-lang": l }, config.value && config.value[l] ? config.value[l].length : 0),
-	                    "/",
-	                    config.maxlength))))))));
+	                createElement$1("textarea", { className: "gn-textarea", "data-lang": l, rows: config.rows ? config.rows : '', maxLength: config.maxlength ? config.maxlength : 524288, "on-beforeinput": this._hidden.beforeInput, "on-input": this._hidden.change, disabled: config.disabled, readOnly: config.readonly }, config.value ? config.value[l] : ''),
+	                config.maxlength && (createElement$1("div", { className: "has-text-size6" },
+	                    !hasMaxLengthMessage && (createElement$1("p", null,
+	                        createElement$1("span", { className: "charLen", "data-lang": l }, config.value && config.value[l] ? config.value[l].length : 0),
+	                        "/",
+	                        config.maxlength)),
+	                    hasMaxLengthMessage && (createElement$1("p", null,
+	                        createElement$1("span", { className: "charLen", "data-lang": l }, remainMessage)))))))))));
 	    }
 	    // eslint-disable-next-line @typescript-eslint/no-unused-vars
 	    $render(config) {
@@ -39562,9 +39978,27 @@
 	                    return;
 	                }
 	                findAll(`.picklist-${obj} .dropdown-item`, this.$el).forEach((option) => {
-	                    if (!includes(data(option, 'value').toUpperCase(), q.toUpperCase()) && !includes(text$1(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
+	                    const itemValue = data(option, 'value');
+	                    const rowData = this.$options.data[obj].find((item) => item.value === itemValue);
+	                    let match = false;
+	                    // Implements [US-Rev-023] 다중 컬럼 모드: cols 배열의 값들을 검색
+	                    if (isArray$1(rowData === null || rowData === void 0 ? void 0 : rowData.cols)) {
+	                        match = rowData.cols.some((colValue) => {
+	                            return includes(String(colValue).toUpperCase(), q.toUpperCase());
+	                        });
+	                        // value 필드도 검색 대상에 포함
+	                        if (!match && rowData.value) {
+	                            match = includes(String(rowData.value).toUpperCase(), q.toUpperCase());
+	                        }
+	                    }
+	                    else {
+	                        // 단일 컬럼 모드: text 또는 value 필드 검색
+	                        const textValue = text$1(find('.dropdown-text', option));
+	                        match = includes(data(option, 'value').toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+	                    }
+	                    if (!match) {
 	                        css$1(option, 'display', 'none');
-	                        this.$options.data[`filtered-${obj}`] = this.$options.data[`filtered-${obj}`].filter((e) => e.value !== option.dataset.value);
+	                        this.$options.data[`filtered-${obj}`] = this.$options.data[`filtered-${obj}`].filter((e) => e.value !== itemValue);
 	                    }
 	                });
 	            },
@@ -39673,9 +40107,20 @@
 	                isArray$1(addArr) &&
 	                    addArr.forEach((option) => {
 	                        const _index = source.findIndex((select) => {
-	                            return option.value === select.value && option.text === select.text;
+	                            const valueMatch = option.value === select.value;
+	                            if (isArray$1(option === null || option === void 0 ? void 0 : option.cols)) {
+	                                if (!isArray$1(select === null || select === void 0 ? void 0 : select.cols) || select.cols.length !== option.cols.length) {
+	                                    return false;
+	                                }
+	                                const colsMatch = option.cols.every((col, idx) => col === select.cols[idx]);
+	                                return valueMatch && colsMatch;
+	                            }
+	                            return valueMatch && option.text === select.text;
 	                        });
-	                        target.push(source.splice(_index, 1).pop());
+	                        // 매칭 실패 시 (_index === -1) 마지막 항목이 제거되는 것을 방지
+	                        if (_index >= 0) {
+	                            target.push(source.splice(_index, 1).pop());
+	                        }
 	                    });
 	            },
 	            reRender: (obj) => {
@@ -39685,21 +40130,32 @@
 	            },
 	            renderSub: (item) => {
 	                const items = this.$options.data[item] || [];
-	                return (createElement$1("ul", null, items.map((option, index) => {
+	                const hasColsForList = items.some((item) => !(item === null || item === void 0 ? void 0 : item.html) && isArray$1(item === null || item === void 0 ? void 0 : item.cols));
+	                return (createElement$1("ul", { className: hasColsForList ? 'is-cols' : '' }, items.map((option, index) => {
 	                    var _a;
-	                    return (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !option.text ? null : this._hidden.toggle.bind(this), "on-dblclick": !option.text
+	                    const hasHtml = !!option.html;
+	                    const hasColsData = isArray$1(option === null || option === void 0 ? void 0 : option.cols);
+	                    const renderAsCols = !hasHtml && hasColsData;
+	                    // html이 있으면 text가 있는 항목만 선택 가능
+	                    // cols가 있으면 첫 번째 컬럼을 displayText로 사용 (value가 비어도 선택 가능)
+	                    const displayText = hasHtml
+	                        ? (option.text || '')
+	                        : renderAsCols
+	                            ? (option.cols && option.cols.length ? String(option.cols[0]) : '')
+	                            : (option.text || option.value);
+	                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' + (renderAsCols ? ' picklist-row' : '') + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !displayText ? null : this._hidden.toggle.bind(this), "on-dblclick": !displayText
 	                            ? null
 	                            : this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
 	                                {
 	                                    value: option.value,
-	                                    text: option.text,
+	                                    text: renderAsCols ? undefined : option.text,
+	                                    cols: hasColsData ? option.cols : undefined,
 	                                    html: (_a = option.html) !== null && _a !== void 0 ? _a : null
 	                                }
-	                            ]) },
-	                        createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' }, option.html ? ('') : option.icon ? (createElement$1("span", null,
-	                            createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
-	                                createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
-	                            escapeEntity(option.text))) : (escapeEntity(option.text)))));
+	                            ]) }, hasHtml ? (createElement$1("span", { className: "dropdown-text", innerHTML: option.html })) : renderAsCols ? (createElement$1("div", { className: "picklist-cols" }, option.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "picklist-col" }, escapeEntity(col)))))) : (createElement$1("span", { className: "dropdown-text" }, option.icon ? (createElement$1("span", null,
+	                        createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
+	                            createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
+	                        escapeEntity(option.text || option.value))) : (escapeEntity(option.text || option.value))))));
 	                })));
 	            },
 	            getSelection: (target) => {
@@ -40767,41 +41223,56 @@
 	class Tree extends GNCoreInstance {
 	    constructor(name, selector, options = {}) {
 	        super(name, selector, options);
+	        this._checkerIdSeq = 0;
 	        this._hidden = {
 	            select: (item, e) => {
 	                if (item.disabled) {
 	                    return;
 	                }
+	                if (hasClass(this.$el, 'is-disabled')) {
+	                    return;
+	                }
 	                let target = e.target;
-	                // 트리 아이콘을 클릭한 경우, 텍스트로 타겟 변경
 	                if (this.$options.showIcon && target.tagName === 'I') {
 	                    target = parent(target);
 	                }
-	                if (!this.$options.multiple) {
+	                if (this.$options.hasCheck) {
+	                    // hasCheck 시: 노드 클릭으로 체크박스 토글, is-active 미적용
+	                    const itemEl = hasClass(target, 'tree-item') ? target : parents(target, '.tree-item')[0];
+	                    if (!itemEl)
+	                        return;
+	                    const checker = find('.is-checker', itemEl);
+	                    if (!checker)
+	                        return;
+	                    // 라벨 또는 input 직접 클릭 시 여기서 토글하지 않음 → input 클릭 핸들러만 한 번 실행되게 함 (이중 토글·이중 onCheck 방지)
+	                    const labelTarget = parents(e.target, 'label')[0];
+	                    if (e.target === checker || (labelTarget && checker.id && labelTarget.getAttribute('for') === checker.id)) {
+	                        return;
+	                    }
+	                    checker.checked = !checker.checked;
+	                    this._hidden.check.call(this, item, { target: checker, stopPropagation: () => { } });
+	                }
+	                else {
+	                    // hasCheck 미사용 시: 노드 클릭 시 is-active 적용, onSelect 발생
 	                    removeClass(findAll('.tree-item', this.$el), 'is-active');
 	                    addClass(target, 'is-active');
 	                    this.$event(this, 'onSelect', item, e);
 	                }
-	                else {
-	                    toggleClass(target, 'is-active');
-	                    if (hasClass(target, 'is-active')) {
-	                        this.$event(this, 'onSelect', item, e);
-	                    }
-	                }
 	            },
 	            addChild: (index, addData) => {
 	                const itemEl = findAll('.tree-item', this.$el)[index];
 	                const itemData = this._hidden.findData(index);
+	                const nextChildren = this._hidden.setPaths(addData.slice(), itemData.path);
 	                if (!itemData[this.$options.childField]) {
 	                    itemData[this.$options.childField] = [];
 	                }
-	                itemData[this.$options.childField] = itemData[this.$options.childField].concat(addData);
+	                itemData[this.$options.childField] = itemData[this.$options.childField].concat(nextChildren);
 	                const appendTarget = siblings(itemEl, 'ul').pop();
 	                if (!appendTarget) {
 	                    this.$template.reRender(parent(itemEl), this._hidden.renderItem(itemData));
 	                }
 	                else {
-	                    addData.forEach((item) => {
+	                    nextChildren.forEach((item) => {
 	                        const newItem = document.createElement('li');
 	                        append(appendTarget, newItem);
 	                        this.$template.reRender(newItem, this._hidden.renderItem(item));
@@ -40832,23 +41303,57 @@
 	            },
 	            check: (item, e) => {
 	                const target = e.target;
-	                e.stopPropagation();
-	                findAll('.is-checker', parents(target, 'li')[0]).forEach((c) => {
-	                    c.checked = target.checked;
-	                });
-	                if (this.$options.checkPath && target.checked) {
-	                    parents(target, 'ul')
-	                        .map((list) => siblings(list, '.tree-item').pop())
-	                        .filter((item) => item)
-	                        .forEach((item) => {
-	                        find('.is-checker', item).checked = true;
-	                    });
+	                if (hasClass(this.$el, 'is-disabled') || item.disabled) {
+	                    if (typeof e.preventDefault === 'function')
+	                        e.preventDefault();
+	                    target.checked = !target.checked; // 브라우저가 이미 토글했으므로 원래대로 되돌림
+	                    return;
 	                }
+	                if (typeof e.stopPropagation === 'function')
+	                    e.stopPropagation();
+	                this._hidden.applyCheckedState(target, target.checked);
 	                this.$event(this, 'onCheck', item, target.checked, this._hidden.getItemIndex(target), e);
 	            },
-	            checkAll: () => {
+	            checkAll: (isChecked) => {
+	                if (this.$options.disabled) {
+	                    return;
+	                }
 	                findAll('.is-checker', this.$el).forEach((c) => {
-	                    c.checked = true;
+	                    if (c.disabled) {
+	                        return;
+	                    }
+	                    c.checked = isChecked;
+	                });
+	            },
+	            setChecked: (targets, checked) => {
+	                if (!this.$options.hasCheck || this.$options.disabled) {
+	                    return;
+	                }
+	                const normalizedTargets = Array.isArray(targets) ? targets : [targets];
+	                const targetSet = new Set(normalizedTargets);
+	                findAll('.tree-item', this.$el).forEach((itemEl, index) => {
+	                    const itemData = this._hidden.findData(index);
+	                    const itemValue = itemData === null || itemData === void 0 ? void 0 : itemData.value;
+	                    if (itemValue === undefined || itemValue === null || itemValue === '') {
+	                        return;
+	                    }
+	                    if (!targetSet.has(String(itemValue))) {
+	                        return;
+	                    }
+	                    const checker = find('.is-checker', itemEl);
+	                    if (!checker) {
+	                        return;
+	                    }
+	                    if (checker.disabled || (itemData === null || itemData === void 0 ? void 0 : itemData.disabled)) {
+	                        return;
+	                    }
+	                    checker.checked = checked;
+	                    this._hidden.applyCheckedState(checker, checked);
+	                });
+	            },
+	            setCheckersDisabled: (disabled) => {
+	                findAll('.is-checker', this.$el).forEach((el) => {
+	                    el.disabled = disabled;
 	                });
 	            },
 	            getChecked: (withStatus = false) => {
@@ -40874,14 +41379,53 @@
 	                        findData.__status.isOpened = hasClass(target, 'is-open');
 	                        findData.__status.isChecked = find('.is-checker', target).checked;
 	                        findData.__status.isSelected = hasClass(target, 'is-active');
-	                        findData.__status.hasChildren = isArray$1(findData.child);
+	                        findData.__status.hasChildren = isArray$1(findData[this.$options.childField]);
 	                    }
 	                    return findData;
 	                });
 	            },
 	            getItemIndex: (item) => {
+	                const itemEl = hasClass(item, 'tree-item') ? item : parents(item, '.tree-item')[0];
+	                if (!itemEl) {
+	                    return -1;
+	                }
 	                const itemList = findAll('.tree-item', this.$el);
-	                return itemList.findIndex((el) => el == item);
+	                return itemList.findIndex((el) => el == itemEl);
+	            },
+	            applyCheckedState: (checker, checked) => {
+	                const listItem = parents(checker, 'li')[0];
+	                if (!listItem) {
+	                    return;
+	                }
+	                if (this.$options.checkChild !== false) {
+	                    findAll('.is-checker', listItem).forEach((childChecker) => {
+	                        if (childChecker.disabled) {
+	                            return;
+	                        }
+	                        childChecker.checked = checked;
+	                    });
+	                }
+	                if (!this.$options.checkPath) {
+	                    return;
+	                }
+	                parents(checker, 'ul')
+	                    .map((list) => siblings(list, '.tree-item').pop())
+	                    .filter((item) => item)
+	                    .forEach((item) => {
+	                    const parentChecker = find('.is-checker', item);
+	                    if (!parentChecker) {
+	                        return;
+	                    }
+	                    const parentLi = parents(item, 'li')[0];
+	                    if (!parentLi) {
+	                        return;
+	                    }
+	                    const descendantCheckers = findAll('.is-checker', parentLi).filter((candidate) => candidate !== parentChecker);
+	                    if (!descendantCheckers.length) {
+	                        return;
+	                    }
+	                    parentChecker.checked = descendantCheckers.some((candidate) => candidate.checked);
+	                });
 	            },
 	            getPathArray(path) {
 	                const pathParts = path.split('/');
@@ -40960,34 +41504,46 @@
 	                }
 	                this.$event(this, 'onToggle', item, hasClass(target, 'is-open') ? 'expanded' : 'collapsed', this._hidden.getItemIndex(target), e);
 	            },
-	            renderTree: (data) => {
-	                return (createElement$1("ul", null, data.map((item) => {
-	                    return this._hidden.renderItem(item);
+	            renderTree: (data, keyPath = '') => {
+	                return (createElement$1("ul", null, data.map((item, idx) => {
+	                    const itemKeyPath = keyPath ? `${keyPath}-${idx}` : `${idx}`;
+	                    return this._hidden.renderItem(item, itemKeyPath);
 	                })));
 	            },
-	            renderItem: (item) => {
+	            renderItem: (item, keyPath) => {
 	                var _a;
+	                const resolvedKeyPath = keyPath !== null && keyPath !== void 0 ? keyPath : `seq-${this._checkerIdSeq++}`;
+	                const checkerId = `${this._uid}-chk-${resolvedKeyPath}`;
 	                return (createElement$1("li", null,
-	                    createElement$1("div", { className: ['tree-item', item[this.$options.childField] ? 'has-child' : '', item.opened ? 'is-open' : '', item.actived ? ' is-active' : '', item.disabled ? 'is-disabled' : ''].join(' '), "on-click": this._hidden.select.bind(this, item), "data-path": (_a = item.path) !== null && _a !== void 0 ? _a : '', title: item.text },
+	                    createElement$1("div", { className: [
+	                            'tree-item',
+	                            item[this.$options.childField] ? 'has-child' : '',
+	                            item.opened ? 'is-open' : '',
+	                            !this.$options.hasCheck && item.actived ? ' is-active' : '',
+	                            item.disabled ? 'is-disabled' : ''
+	                        ].join(' '), "on-click": this._hidden.select.bind(this, item), "data-path": (_a = item.path) !== null && _a !== void 0 ? _a : '', title: item.text },
 	                        // has child field - arrow toggle
 	                        item[this.$options.childField] ? (createElement$1("div", { className: "is-toggler", "on-click": (e) => {
 	                                this._hidden.toggle.call(this, item, e);
 	                            } })) : (''),
 	                        // has checkbox
-	                        this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true' ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
-	                            createElement$1("input", { type: "checkbox", className: "is-checker", "on-click": (e) => {
+	                        this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true' ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
+	                            createElement$1("input", { type: "checkbox", className: "is-checker", id: checkerId, disabled: !!this.$options.disabled || !!item.disabled, "on-click": (e) => {
 	                                    this._hidden.check.call(this, item, e);
-	                                }, defaultChecked: !!item.selected }))) : (''),
+	                                }, defaultChecked: !!item.selected }),
+	                            createElement$1("label", { for: checkerId }, item.text))) : (''),
 	                        // show icon
 	                        this.$options.showIcon && !item.hideIcon ? (item.icon ? (createElement$1("span", { innerHTML: item.icon })) : (createElement$1("i", { style: { marginRight: '5px' }, className: 'far fa-' + (item.opened ? 'folder-open' : 'folder') }))) : (''),
-	                        item.text),
-	                    item[this.$options.childField] && this._hidden.renderTree(item[this.$options.childField])));
+	                        !(this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true') && item.text),
+	                    item[this.$options.childField] && this._hidden.renderTree(item[this.$options.childField], resolvedKeyPath)));
 	            },
-	            setPaths(data, basePath = '') {
+	            setPaths: (data, basePath = '') => {
 	                return data.map(item => {
-	                    const itemPath = basePath ? `${basePath}/${item.text}` : item.text;
-	                    const childPath = item.child ? this.setPaths(item.child, itemPath) : null;
-	                    return Object.assign(Object.assign({}, item), { path: itemPath, child: childPath });
+	                    const itemKey = (item === null || item === void 0 ? void 0 : item.value) !== undefined && (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== '' ? String(item.value) : item.text;
+	                    const itemPath = basePath ? `${basePath}/${itemKey}` : itemKey;
+	                    const children = item[this.$options.childField];
+	                    const childPath = children ? this._hidden.setPaths(children, itemPath) : null;
+	                    return Object.assign(Object.assign({}, item), { path: itemPath, [this.$options.childField]: childPath });
 	                });
 	            }
 	        };
@@ -40998,10 +41554,11 @@
 	            data: [],
 	            childField: 'child',
 	            hasCheck: false,
-	            multiple: false,
+	            checkChild: true,
 	            checkPath: false,
 	            showIcon: false,
-	            hideIcon: false
+	            hideIcon: false,
+	            disabled: false
 	        };
 	        this.events = {
 	            onSelect: true,
@@ -41026,7 +41583,19 @@
 	                this._hidden.collapseAll();
 	            },
 	            checkAll() {
-	                this._hidden.checkAll();
+	                if (!this.$options.hasCheck || this.$options.disabled)
+	                    return;
+	                this._hidden.checkAll(true);
+	            },
+	            uncheckAll() {
+	                if (!this.$options.hasCheck || this.$options.disabled)
+	                    return;
+	                this._hidden.checkAll(false);
+	            },
+	            setChecked(targets, checked) {
+	                if (this.$options.disabled)
+	                    return;
+	                this._hidden.setChecked(targets, checked);
 	            },
 	            getChecked(withStatus = false) {
 	                return this._hidden.getChecked(withStatus);
@@ -41039,14 +41608,29 @@
 	            },
 	            filter(keyword) {
 	                return this._hidden.filter(keyword);
+	            },
+	            disable() {
+	                this.$options.disabled = true;
+	                addClass(this.$el, 'is-disabled');
+	                this._hidden.setCheckersDisabled(true);
+	            },
+	            enable() {
+	                this.$options.disabled = false;
+	                removeClass(this.$el, 'is-disabled');
+	                this._hidden.setCheckersDisabled(false);
 	            }
 	        };
+	        // multiple → hasCheck 치환(동일 기능으로 지원 X)
+	        if (options && options.multiple) {
+	            options.hasCheck = true;
+	            delete options.multiple;
+	        }
 	        this.$init(this, options);
 	    }
 	    template(config) {
 	        config.data = this._hidden.setPaths(config.data);
 	        const styles = {};
-	        return (createElement$1("div", { id: this._uid, className: 'gn-tree' + (config.color ? ' is-' + config.color : '') + (config.type ? ' is-' + config.type : '') + (config.size ? ' is-' + config.size : ''), style: styles },
+	        return (createElement$1("div", { id: this._uid, className: 'gn-tree' + (config.color ? ' is-' + config.color : '') + (config.type ? ' is-' + config.type : '') + (config.size ? ' is-' + config.size : '') + (config.disabled ? ' is-disabled' : ''), style: styles },
 	            config.textSets.title && createElement$1("p", { className: "tree-label", innerHTML: config.textSets.title }),
 	            this._hidden.renderTree(config.data)));
 	    }