dom-render 1.0.76 → 1.0.79

package/dist/bundle.js

@@ -454,6 +454,7 @@ var EventManager = /** @class */ (function () {
             EventManager.valueAttrName,
             EventManager.valueLinkAttrName,
             EventManager.attrAttrName,
+            EventManager.normalAttrMapAttrName,
             EventManager.styleAttrName,
             EventManager.classAttrName,
             EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_POPSTATE,
@@ -495,6 +496,7 @@ var EventManager = /** @class */ (function () {
     //     (obj as any)._DomRender_isFinal = true;
     //     return obj;
     // }
+    // 중요 이벤트에 대상이될 Elements를 찾는다.
     EventManager.prototype.findAttrElements = function (fragment, config) {
         var _a, _b;
         // const datas: {name: string, value: string | null, element: Element}[] = [];
@@ -507,6 +509,7 @@ var EventManager = /** @class */ (function () {
         });
         return elements;
     };
+    // 중요 처음 이벤트 처리
     // eslint-disable-next-line no-undef
     EventManager.prototype.applyEvent = function (obj, childNodes, config) {
         var _this = this;
@@ -532,6 +535,18 @@ var EventManager = /** @class */ (function () {
                 }
             }
         });
+        // normal-attr-map
+        this.procAttr(childNodes, EventManager.normalAttrMapAttrName, function (it, attribute) {
+            var map = new Map(JSON.parse(attribute));
+            map.forEach(function (v, k) {
+                var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                    __render: Object.freeze({
+                        element: it
+                    })
+                }));
+                it.setAttribute(k, data);
+            });
+        });
         // window event
         EventManager.WINDOW_EVENTS.forEach(function (it) {
             _this.procAttr(childNodes, EventManager.attrPrefix + 'window-event-' + it, function (it, attribute) {
@@ -569,7 +584,7 @@ var EventManager = /** @class */ (function () {
                     bindObj_1 = ScriptUtils.evalReturn(ownerVariablePathName, obj);
                 }
                 var getValue = _this.getValue(obj, varName, bindObj_1);
-                // 아래 나중에 리팩토링 필요함
+                // TODO: 아래 나중에 리팩토링 필요함
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript_1) {
@@ -665,7 +680,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -716,7 +731,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -744,7 +759,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -771,6 +786,23 @@ var EventManager = /** @class */ (function () {
                 }
             }
         });
+        // 중요 변수값 바꼈을때 이벤트 타겟 찾는것 normal-attr-map
+        this.procAttr(elements, EventManager.normalAttrMapAttrName, function (it, attribute) {
+            var map = new Map(JSON.parse(attribute));
+            map.forEach(function (v, k) {
+                // console.log('--->', v, k)
+                var isUsing = EventManager.isUsingThisVar(v, varName);
+                // console.log('---isUsing--> varName:', varName, 'k:', k, 'v:', v, 'isUsing:', isUsing);
+                if (isUsing) {
+                    var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                        __render: Object.freeze({
+                            element: it
+                        })
+                    }));
+                    it.setAttribute(k, data);
+                }
+            });
+        });
     };
     // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEvents = function (obj, eventName, elements, config) {
@@ -802,6 +834,7 @@ var EventManager = /** @class */ (function () {
             });
         });
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEventPram = function (obj, attr, elements, config) {
         var _this = this;
         this.procAttr(elements, attr, function (it, attribute, attributes) {
@@ -875,7 +908,7 @@ var EventManager = /** @class */ (function () {
             value: value
         });
     };
-    EventManager.prototype.isUsingThisVar = function (raws, varName) {
+    EventManager.isUsingThisVar = function (raws, varName) {
         // console.log('isUsingV', raws)
         // console.log('isUsingV', raws, varName, ScriptUtils.getVariablePaths(raws ?? ''))
         if (varName && raws) {
@@ -911,6 +944,7 @@ var EventManager = /** @class */ (function () {
     EventManager.valueAttrName = EventManager.attrPrefix + 'value';
     EventManager.valueLinkAttrName = EventManager.attrPrefix + 'value-link';
     EventManager.attrAttrName = EventManager.attrPrefix + 'attr';
+    EventManager.normalAttrMapAttrName = EventManager.attrPrefix + 'normal-attr-map';
     EventManager.styleAttrName = EventManager.attrPrefix + 'style';
     EventManager.classAttrName = EventManager.attrPrefix + 'class';
     EventManager.VALUE_VARNAME = '$value';
@@ -1666,8 +1700,34 @@ var DrTargetElement = /** @class */ (function (_super) {
         if (targetElement) {
             var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs);
             if (documentFragment) {
+                // const targetAttrMap = this.elementSource.element.getAttribute(EventManager.normalAttrMapAttrName);
                 var detectAction_1 = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
                 var render_1 = documentFragment.render;
+                // console.log('-------drTargetElement->', render, targetAttrMap);
+                this.rawSet.fragment = documentFragment;
+                this.rawSet.data = render_1.component;
+                // const targetAttrs = this.elementSource.element.getAttributeNames()
+                //     .filter(it => RawSet.isExporesion(this.elementSource.element.getAttribute(it)))
+                //     .map(it => ({name: it, expresion: RawSet.exporesionGrouops(this.elementSource.element.getAttribute(it))[0][1]}))
+                //     .filter(it => it.name.length > 0 && it.expresion.length > 0)
+                //     .map(it => {
+                //         return `n.setAttribute('${it.name}', ${it.expresion})`;
+                //     });
+                // if (targetAttrMap) {
+                //     ScriptUtils.eval(`
+                //                 ${this.render.bindScript}
+                //                 //const n = $element.cloneNode(true);
+                //                 const n = $element;
+                //                 ${targetAttrMap.join(';')};
+                //                 // this.__render.fag.append(n);
+                //             `, Object.assign(this.source.obj, {
+                //         __render: Object.freeze({
+                //             fag: newTemp,
+                //             targetAttrs: targetAttrMap,
+                //             ...this.render
+                //         } as Render)
+                //     }));
+                // }
                 if (detectAction_1 && render_1) {
                     this.rawSet.detect = {
                         action: function () {
@@ -1732,55 +1792,27 @@ var DrTargetAttr = /** @class */ (function (_super) {
     return DrTargetAttr;
 }(OperatorRender));
 
-var AttrExpresion = /** @class */ (function (_super) {
-    __extends(AttrExpresion, _super);
-    function AttrExpresion() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AttrExpresion.prototype.execRender = function () {
-        var _a;
-        var _this = this;
-        var _b;
-        var targetAttrs = this.elementSource.element.getAttributeNames()
-            .filter(function (it) { return RawSet.isExporesion(_this.elementSource.element.getAttribute(it)); })
-            .map(function (it) { return ({ name: it, expresion: RawSet.exporesionGrouops(_this.elementSource.element.getAttribute(it))[0][1] }); })
-            .filter(function (it) { return it.name.length > 0 && it.expresion.length > 0; })
-            .map(function (it) {
-            return "n.setAttribute('".concat(it.name, "', ").concat(it.expresion, ")");
-        });
-        // console.log('-----', targetAttrs)
-        if ((targetAttrs === null || targetAttrs === void 0 ? void 0 : targetAttrs.length) > 0) {
-            var newTemp = this.source.config.window.document.createElement('temp');
-            // console.log('------>', targetAttrs, targetAttrs.join(';'))
-            ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat(targetAttrs.join(';'), ";\n                        this.__render.fag.append(n);\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, targetAttrs: targetAttrs }, this.render))
-            }));
-            var tempalte = this.source.config.window.document.createElement('template');
-            tempalte.innerHTML = newTemp.innerHTML;
-            this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
-            (_b = this.elementSource.element.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
-    };
-    return AttrExpresion;
-}(OperatorRender));
-
 exports.DestroyOptionType = void 0;
 (function (DestroyOptionType) {
     DestroyOptionType["NO_DESTROY"] = "NO_DESTROY";
     DestroyOptionType["NO_MESSENGER_DESTROY"] = "NO_MESSENGER_DESTROY";
 })(exports.DestroyOptionType || (exports.DestroyOptionType = {}));
+exports.RawSetType = void 0;
+(function (RawSetType) {
+    RawSetType["TEXT"] = "TEXT";
+    RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
+    RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
+    RawSetType["UNKOWN"] = "UNKOWN";
+})(exports.RawSetType || (exports.RawSetType = {}));
 var RawSet = /** @class */ (function () {
-    function RawSet(uuid, point, fragment, detect, data) {
-        if (data === void 0) { data = {}; }
+    function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
+        this.type = type;
         this.point = point;
         this.fragment = fragment;
         this.detect = detect;
         this.data = data;
+        // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
     }
     Object.defineProperty(RawSet.prototype, "isConnected", {
         get: function () {
@@ -1801,19 +1833,24 @@ var RawSet = /** @class */ (function () {
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
                 var element_1 = cNode;
-                var targetAttrNames_1 = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES);
-                script = targetAttrNames_1.map(function (it) {
-                    // console.log('-?', element.getAttribute(it))
-                    return element_1.getAttribute(it);
-                }).filter(function (it) { return it; }).join(';');
+                var targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES); // .concat(EventManager.normalAttrMapAttrName);
+                var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
+                var targetAttrMap = element_1.getAttribute(EventManager.normalAttrMapAttrName);
+                if (targetAttrMap) {
+                    // console.log('----->', targetAttr);
+                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
+                        targetScripts_1.push(v);
+                    });
+                }
+                script = targetScripts_1.join(';');
+                // attribute쪽 체크하는거 추가
                 // console.log('----!!!!!-->', targetAttrNames)
-                var otherAttrs = element_1.getAttributeNames()
-                    .filter(function (it) { return !targetAttrNames_1.includes(it.toLowerCase()) && RawSet.isExporesion(element_1.getAttribute(it)); })
-                    .map(function (it) {
-                    var _a;
-                    return "`".concat((_a = element_1.getAttribute(it)) !== null && _a !== void 0 ? _a : '', "`");
-                }).join(';');
-                script += ';' + otherAttrs;
+                // const otherAttrs = element.getAttributeNames()
+                //     .filter(it => !targetAttrNames.includes(it.toLowerCase()) && RawSet.isExporesion(element.getAttribute(it)))
+                //     .map(it => {
+                //         return `\`${element.getAttribute(it) ?? ''}\``;
+                //     }).join(';');
+                // script += ';' + otherAttrs
             }
             if (script) {
                 // script = script.replace('}$','}');
@@ -1831,6 +1868,7 @@ var RawSet = /** @class */ (function () {
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
         return usingTriggerVariables;
     };
+    // 중요 render
     RawSet.prototype.render = function (obj, config) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1904,7 +1942,6 @@ var RawSet = /** @class */ (function () {
                     new Dr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new AttrExpresion(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
@@ -2015,8 +2052,9 @@ var RawSet = /** @class */ (function () {
         this.childAllRemove();
         (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
     };
+    // 중요 important
     RawSet.checkPointCreates = function (element, config) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
@@ -2025,7 +2063,7 @@ var RawSet = /** @class */ (function () {
                 if (node.nodeType === Node.TEXT_NODE) {
                     // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
                     // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-                    // 나중에
+                    // TODO: 나중에
                     // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
                     var between = RawSet.exporesionGrouops(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
                     // console.log('bbbb', between)
@@ -2037,13 +2075,21 @@ var RawSet = /** @class */ (function () {
                     var element_2 = node;
                     // console.log('------>', element);
                     var isElement = ((_c = (_b = config.targetElements) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name.toLowerCase(); })) !== null && _c !== void 0 ? _c : []).includes(element_2.tagName.toLowerCase());
-                    var targetAttrNames_2 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
+                    var targetAttrNames_1 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
+                    var normalAttrs_1 = new Map();
                     var isAttr = element_2.getAttributeNames().filter(function (it) {
-                        var attrExpresion = RawSet.isExporesion(element_2.getAttribute(it));
+                        var value = element_2.getAttribute(it);
+                        if (value && RawSet.isExporesion(value)) {
+                            normalAttrs_1.set(it, RawSet.exporesionGrouops(value)[0][1]);
+                        }
                         // console.log(element.getAttribute(it), attrExpresion);
-                        var isTargetAttr = targetAttrNames_2.includes(it.toLowerCase());
-                        return isTargetAttr || attrExpresion;
+                        var isTargetAttr = targetAttrNames_1.includes(it.toLowerCase());
+                        return isTargetAttr;
                     }).length > 0;
+                    // 기본 attribute를 처리하기위해
+                    if (normalAttrs_1.size) {
+                        element_2.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs_1.entries())));
+                    }
                     return (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                 }
                 return NodeFilter.FILTER_REJECT;
@@ -2054,52 +2100,53 @@ var RawSet = /** @class */ (function () {
         var _loop_1 = function () {
             if (currentNode.nodeType === Node.TEXT_NODE) {
                 var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
-                var template_1 = config.window.document.createElement('template');
+                var template = config.window.document.createElement('template');
                 // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
                 // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
-                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--나중에..
-                var a = RawSet.exporesionGrouops(text); // <--나중에..
-                var map = a.map(function (it) {
-                    return {
-                        uuid: RandomUtils.uuid(),
-                        content: it[0],
-                        regexArr: it
-                    };
-                });
-                var lasterIndex_1 = 0;
-                map.forEach(function (it) {
-                    var regexArr = it.regexArr;
-                    var preparedText = regexArr.input.substring(lasterIndex_1, regexArr.index);
-                    var start = config.window.document.createComment("start text ".concat(it.uuid));
-                    var end = config.window.document.createComment("end text ".concat(it.uuid));
+                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
+                var groups = RawSet.exporesionGrouops(text);
+                var map = groups.map(function (it) { return ({ uuid: RandomUtils.uuid(), content: it[0], regexArr: it }); });
+                var lasterIndex = 0;
+                for (var i = 0; i < map.length; i++) {
+                    var it_4 = map[i];
+                    var regexArr = it_4.regexArr;
+                    var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
+                    var start = config.window.document.createComment("start text ".concat(it_4.uuid));
+                    var end = config.window.document.createComment("end text ".concat(it_4.uuid));
                     // layout setting
-                    template_1.content.append(document.createTextNode(preparedText)); // 사이사이값.
-                    template_1.content.append(start);
-                    template_1.content.append(end);
+                    template.content.append(document.createTextNode(preparedText)); // 사이사이값.
+                    template.content.append(start);
+                    template.content.append(end);
                     // content
                     var fragment = config.window.document.createDocumentFragment();
-                    fragment.append(config.window.document.createTextNode(it.content));
-                    pars.push(new RawSet(it.uuid, {
+                    fragment.append(config.window.document.createTextNode(it_4.content));
+                    pars.push(new RawSet(it_4.uuid, exports.RawSetType.TEXT, {
                         start: start,
+                        node: currentNode,
                         end: end,
                         thisVariableName: thisVariableName
                     }, fragment));
-                    lasterIndex_1 = regexArr.index + it.content.length;
-                });
-                template_1.content.append(config.window.document.createTextNode(text.substring(lasterIndex_1, text.length)));
-                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
+                    lasterIndex = regexArr.index + it_4.content.length;
+                }
+                template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode);
             }
-            else {
+            else if (currentNode.nodeType === Node.ELEMENT_NODE) {
                 var uuid = RandomUtils.uuid();
+                var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
                 var start = config.window.document.createComment("start ".concat(uuid));
                 var end = config.window.document.createComment("end ".concat(uuid));
                 // console.log('start--', uuid)
-                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
-                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
+                var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
+                var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
+                var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
+                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
+                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
                 fragment.append(currentNode);
-                pars.push(new RawSet(uuid, {
+                pars.push(new RawSet(uuid, isElement ? exports.RawSetType.TARGET_ELEMENT : (isAttr ? exports.RawSetType.TARGET_ATTR : exports.RawSetType.UNKOWN), {
                     start: start,
+                    node: currentNode,
                     end: end,
                     thisVariableName: thisVariableName
                 }, fragment));
@@ -2177,8 +2224,8 @@ var RawSet = /** @class */ (function () {
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
                     if (node.nodeType === Node.ELEMENT_NODE) {
-                        var element_3 = node;
-                        return element_3.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                        var element_4 = node;
+                        return element_4.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                     }
                     else {
                         return NodeFilter.FILTER_REJECT;
@@ -2188,9 +2235,9 @@ var RawSet = /** @class */ (function () {
             var node;
             // eslint-disable-next-line no-cond-assign
             while (node = nodeIterator.nextNode()) {
-                var element_4 = node;
-                element_4.setAttribute(to, (_a = element_4.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
-                element_4.removeAttribute(as);
+                var element_5 = node;
+                element_5.setAttribute(to, (_a = element_5.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
+                element_5.removeAttribute(as);
             }
         });
     };
@@ -2299,8 +2346,8 @@ var RawSet = /** @class */ (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet, attrs) {
-                var _a, _b, _c, _d;
-                // console.log('callback------->')
+                var _a, _b, _c, _d, _e, _f;
+                // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
@@ -2309,6 +2356,7 @@ var RawSet = /** @class */ (function () {
                 var attribute = DomUtils.getAttributeToObject(element);
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                 var render = Object.freeze({
+                    renderScript: renderScript,
                     element: element,
                     innerHTML: element.innerHTML,
                     attribute: attribute,
@@ -2344,6 +2392,16 @@ var RawSet = /** @class */ (function () {
                 i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
                 this.__creatorMetaData = i;
                 render = __assign({ component: instance, creatorMetaData: i }, render);
+                // 중요 dr-normal-attr-map
+                var normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
+                if (instance.onChangeAttrRender && normalAttrMap) {
+                    new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
+                        var script = "".concat(renderScript, " return ").concat(value, " ");
+                        var cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                        // element.setAttribute(key, cval);
+                        instance.onChangeAttrRender(key, cval);
+                    });
+                }
                 // dr-on-create onCreateRender
                 var onCreate = element.getAttribute("".concat(EventManager.attrPrefix, "on-create"));
                 this.__render = render;
@@ -2358,15 +2416,17 @@ var RawSet = /** @class */ (function () {
                 (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
                 var applayTemplate = element.innerHTML;
                 var innerHTMLThisRandom;
+                var componentName = (_e = element.getAttribute("".concat(EventManager.attrPrefix, "component-name"))) !== null && _e !== void 0 ? _e : 'component';
+                var innerHTMLName = (_f = element.getAttribute("".concat(EventManager.attrPrefix, "component-inner-html-name"))) !== null && _f !== void 0 ? _f : 'innerHTML';
                 if (applayTemplate) {
                     // if (rawSet.point.thisVariableName) {
                     // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
                     innerHTMLThisRandom = RandomUtils.uuid();
                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                     // }
-                    applayTemplate = applayTemplate.replace(/#component#/g, 'this');
+                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
                 }
-                applayTemplate = template.replace(/#innerHTML#/g, applayTemplate);
+                applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                 // dr-on-component-init
                 var oninit = element.getAttribute("".concat(EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
                 if (oninit) {
@@ -2381,10 +2441,10 @@ var RawSet = /** @class */ (function () {
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
                 if (innerHTMLThisRandom) {
-                    var template_2 = config.window.document.createElement('template');
-                    template_2.content.append(data);
-                    template_2.innerHTML = template_2.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-                    data = template_2.content;
+                    var template_1 = config.window.document.createElement('template');
+                    template_1.content.append(data);
+                    template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+                    data = template_1.content;
                 }
                 data.render = render;
                 return data;
@@ -2539,8 +2599,8 @@ var DomRenderProxy = /** @class */ (function () {
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g;
-        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dr-on-create');
-        var createParam = undefined;
+        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "".concat(EventManager.attrPrefix, "on-create"));
+        var createParam;
         if (onCreate) {
             createParam = ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
         }
@@ -2548,7 +2608,8 @@ var DomRenderProxy = /** @class */ (function () {
         var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
         var rawSets = RawSet.checkPointCreates(target, this.config);
-        // console.log('-------rawSet', rawSets)
+        // console.log('initRender -------rawSet', rawSets)
+        // 중요 초기에 한번 튕겨줘야함.
         eventManager.applyEvent(this._domRender_proxy, eventManager.findAttrElements(target, this.config), this.config);
         rawSets.forEach(function (it) {
             var variables = it.getUsingTriggerVariables(_this.config);
@@ -2577,7 +2638,8 @@ var DomRenderProxy = /** @class */ (function () {
         });
         return Array.from(set);
     };
-    DomRenderProxy.prototype.render = function (raws) {
+    // 중요 important
+    DomRenderProxy.prototype.render = function (raws, fullPathStr) {
         var _this = this;
         if (typeof raws === 'string') {
             var iter = this._rawSets.get(raws);
@@ -2590,15 +2652,40 @@ var DomRenderProxy = /** @class */ (function () {
         }
         var removeRawSets = [];
         (raws !== null && raws !== void 0 ? raws : this.getRawSets()).forEach(function (it) {
-            var _a;
+            var _a, _b, _c;
             it.getUsingTriggerVariables(_this.config).forEach(function (path) { return _this.addRawSet(path, it); });
-            // console.log('------->', it, it.isConnected)
+            // console.log('------->', it, it.isConnected);
             if (it.isConnected) {
-                if ((_a = it.detect) === null || _a === void 0 ? void 0 : _a.action) {
+                // 중요 render될때 targetAttribute 체크 해야함.
+                var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager.normalAttrMapAttrName);
+                if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
                     it.detect.action();
                 }
+                else if (it.type === exports.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
+                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
+                        // it?.data.onChangeAttrRender(k, null, v);
+                        var isUsing = EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
+                        if (isUsing) {
+                            var render = it.fragment.render;
+                            // console.log('render-->', (it.fragment as any).render)
+                            var script = "".concat(render.renderScript, " return ").concat(v, " ");
+                            var cval = ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
+                            it.data.onChangeAttrRender(k, cval);
+                        }
+                        // console.log('---?', v, fullPathStr, isUsing);
+                    });
+                    // ------------------->
+                }
                 else {
                     var rawSets = it.render(_this._domRender_proxy, _this.config);
+                    // 대상 attribute 있으면
+                    // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
+                    // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
+                    //     new Map<string, string>(JSON.parse(targetAttrs)).forEach((v, k) => {
+                    //         it?.data.onChangeAttrRender(k, null, v);
+                    //     });
+                    // }
+                    // 그외 자식들 render
                     if (rawSets && rawSets.length > 0) {
                         _this.render(rawSets);
                     }
@@ -2641,6 +2728,7 @@ var DomRenderProxy = /** @class */ (function () {
             var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             if (lastDoneExecute) {
                 var iterable = this._rawSets.get(fullPathStr_1);
+                // console.log('----->', iterable);
                 // array check
                 var front = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
                 var last = strings[strings.length - 1];
@@ -2652,12 +2740,14 @@ var DomRenderProxy = /** @class */ (function () {
                     }
                 }
                 else if (iterable) {
-                    // console.log('----->', iterable)
-                    this.render(Array.from(iterable));
+                    this.render(Array.from(iterable), fullPathStr_1);
                 }
                 this._targets.forEach(function (it) {
+                    // console.log('target------->,', it)
+                    // return;
                     if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
                         var targets = eventManager.findAttrElements(it, _this.config);
+                        // console.log('------>', targets);
                         eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
                     }
                 });
@@ -2764,7 +2854,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.addRawSet = function (path, rawSet) {
         var _a;
-        // console.log('addRawSet-->', path, rawSet)
+        // console.log('addRawSet--> path:', path, 'rawSet:', rawSet)
         if (!this._rawSets.get(path)) {
             this._rawSets.set(path, new Set());
         }
@@ -3312,21 +3402,6 @@ var DomRender = /** @class */ (function () {
     return DomRender;
 }());
 
-var RenderManager = /** @class */ (function () {
-    function RenderManager() {
-    }
-    RenderManager.render = function (obj, target) {
-        if (target === void 0) { target = Object.keys(obj); }
-        var domRenderProxy = obj._DomRender_proxy;
-        if (domRenderProxy) {
-            target.forEach(function (it) {
-                domRenderProxy.root([it], obj[it]);
-            });
-        }
-    };
-    return RenderManager;
-}());
-
 var Appender = /** @class */ (function () {
     // [keys: string]: any;
     function Appender() {
@@ -3356,6 +3431,21 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
+var RenderManager = /** @class */ (function () {
+    function RenderManager() {
+    }
+    RenderManager.render = function (obj, target) {
+        if (target === void 0) { target = Object.keys(obj); }
+        var domRenderProxy = obj._DomRender_proxy;
+        if (domRenderProxy) {
+            target.forEach(function (it) {
+                domRenderProxy.root([it], obj[it]);
+            });
+        }
+    };
+    return RenderManager;
+}());
+
 var AllCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllCheckedValidatorArray, _super);
     function AllCheckedValidatorArray(value, target, event, autoValid) {
@@ -3369,18 +3459,18 @@ var AllCheckedValidatorArray = /** @class */ (function (_super) {
     return AllCheckedValidatorArray;
 }(ValidatorArray));
 
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(value, target, event, autoValid) {
+var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllUnCheckedValidatorArray, _super);
+    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    CheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    AllUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > 0);
     };
-    return CheckedValidator;
-}(Validator));
+    return AllUnCheckedValidatorArray;
+}(ValidatorArray));
 
 var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsCheckedValidatorArray, _super);
@@ -3397,17 +3487,62 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllUnCheckedValidatorArray, _super);
-    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
+var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsUnCheckedValidatorArray, _super);
+    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
+    };
+    return CountEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
+
+var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanCheckedValidatorArray, _super);
+    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
+    };
+    return CountGreaterThanCheckedValidatorArray;
+}(ValidatorArray));
+
+var CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    AllUnCheckedValidatorArray.prototype.valid = function () {
+    CheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    };
+    return CheckedValidator;
+}(Validator));
+
+var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > 0);
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return AllUnCheckedValidatorArray;
+    return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3425,34 +3560,34 @@ var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_supe
     return CountGreaterThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsUnCheckedValidatorArray, _super);
-    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
+    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    return CountEqualsUnCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3470,19 +3605,19 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanUnCheckedValidatorArray, _super);
+    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
     };
-    return CountGreaterThanEqualsUnCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3500,53 +3635,56 @@ var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return CountLessThanEqualsUnCheckedValidatorArray;
+    return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanUnCheckedValidatorArray, _super);
-    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
+    EmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
     };
-    return CountLessThanUnCheckedValidatorArray;
-}(ValidatorArray));
+    return EmptyValidator;
+}(Validator));
 
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
+var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(IncludeCheckedValidatorArray, _super);
+    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
+        if (allRequired === void 0) { allRequired = false; }
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, undefined, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.include = include;
+        _this.allRequired = allRequired;
+        return _this;
     }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(this);
-    };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
-    };
-    FormValidator.prototype.reset = function () {
-        this.targetReset();
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
+        var _a;
+        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
+        return checkedValue.length > 0 &&
+            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
     };
-    return FormValidator;
-}(Validator));
+    return IncludeCheckedValidatorArray;
+}(ValidatorArray));
 
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
@@ -3570,33 +3708,37 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var NotEmptyValidator = /** @class */ (function (_super) {
+    __extends(NotEmptyValidator, _super);
+    function NotEmptyValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+    NotEmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
+        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
     };
-    return CountUnCheckedValidatorArray;
-}(ValidatorArray));
+    return NotEmptyValidator;
+}(Validator));
 
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(value, target, event, autoValid) {
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        return _super.call(this, undefined, target, event, autoValid) || this;
     }
-    EmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
     };
-    return EmptyValidator;
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
+    };
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
+    };
+    return FormValidator;
 }(Validator));
 
 var MultipleValidator = /** @class */ (function (_super) {
@@ -3628,21 +3770,6 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
-    };
-    return NotEmptyValidator;
-}(Validator));
-
 var NotRegExpTestValidator = /** @class */ (function (_super) {
     __extends(NotRegExpTestValidator, _super);
     function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
@@ -3665,42 +3792,28 @@ var NotRegExpTestValidator = /** @class */ (function (_super) {
     return NotRegExpTestValidator;
 }(Validator));
 
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
-        if (allRequired === void 0) { allRequired = false; }
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.include = include;
-        _this.allRequired = allRequired;
-        return _this;
-    }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
-        var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
-        return checkedValue.length > 0 &&
-            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
-    };
-    return IncludeCheckedValidatorArray;
-}(ValidatorArray));
-
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var RegExpTestValidator = /** @class */ (function (_super) {
+    __extends(RegExpTestValidator, _super);
+    function RegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
+        _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+    RegExpTestValidator.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
+        var value = this.value;
+        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
+        // console.log('regexp-->', value, this.regexp, regExp.test(value))
+        if (value) {
+            return regExp.test(value);
+        }
+        else {
+            return false;
+        }
     };
-    return CountGreaterThanCheckedValidatorArray;
-}(ValidatorArray));
+    return RegExpTestValidator;
+}(Validator));
 
 var UnCheckedValidator = /** @class */ (function (_super) {
     __extends(UnCheckedValidator, _super);
@@ -3715,6 +3828,33 @@ var UnCheckedValidator = /** @class */ (function (_super) {
     return UnCheckedValidator;
 }(Validator));
 
+var ValidMultipleValidator = /** @class */ (function (_super) {
+    __extends(ValidMultipleValidator, _super);
+    function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, validators, value, target, event, autoValid) || this;
+        _this.validMultipleCallback = validMultipleCallback;
+        _this.validators = validators;
+        return _this;
+    }
+    ValidMultipleValidator.prototype.valid = function () {
+        return this.validMultipleCallback(this.validators, this.value, this.getTarget(), this.getEvent());
+    };
+    return ValidMultipleValidator;
+}(MultipleValidator));
+
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    PassValidator.prototype.valid = function () {
+        return true;
+    };
+    return PassValidator;
+}(Validator));
+
 var RequiredValidator = /** @class */ (function (_super) {
     __extends(RequiredValidator, _super);
     function RequiredValidator(value, target, event, autoValid) {
@@ -3743,21 +3883,6 @@ var ValidValidatorArray = /** @class */ (function (_super) {
     return ValidValidatorArray;
 }(ValidatorArray));
 
-var ValidMultipleValidator = /** @class */ (function (_super) {
-    __extends(ValidMultipleValidator, _super);
-    function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, validators, value, target, event, autoValid) || this;
-        _this.validMultipleCallback = validMultipleCallback;
-        _this.validators = validators;
-        return _this;
-    }
-    ValidMultipleValidator.prototype.valid = function () {
-        return this.validMultipleCallback(this.validators, this.value, this.getTarget(), this.getEvent());
-    };
-    return ValidMultipleValidator;
-}(MultipleValidator));
-
 var ValidValidator = /** @class */ (function (_super) {
     __extends(ValidValidator, _super);
     function ValidValidator(validCallBack, value, target, event, autoValid) {
@@ -3772,32 +3897,6 @@ var ValidValidator = /** @class */ (function (_super) {
     return ValidValidator;
 }(Validator));
 
-var ValueNotEqualsValidator = /** @class */ (function (_super) {
-    __extends(ValueNotEqualsValidator, _super);
-    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.equalsValue = equalsValue;
-        return _this;
-    }
-    ValueNotEqualsValidator.prototype.valid = function () {
-        return this.value !== this.equalsValue;
-    };
-    return ValueNotEqualsValidator;
-}(Validator));
-
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    PassValidator.prototype.valid = function () {
-        return true;
-    };
-    return PassValidator;
-}(Validator));
-
 var ValueEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueEqualsValidator, _super);
     function ValueEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -3812,49 +3911,42 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
 
-var RegExpTestValidator = /** @class */ (function (_super) {
-    __extends(RegExpTestValidator, _super);
-    function RegExpTestValidator(regexp, value, target, event, autoValid) {
+var ValueNotEqualsValidator = /** @class */ (function (_super) {
+    __extends(ValueNotEqualsValidator, _super);
+    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.regexp = DomRenderProxy.final(regexp);
+        _this.equalsValue = equalsValue;
         return _this;
     }
-    RegExpTestValidator.prototype.valid = function () {
-        var _a;
-        var value = this.value;
-        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        // console.log('regexp-->', value, this.regexp, regExp.test(value))
-        if (value) {
-            return regExp.test(value);
-        }
-        else {
-            return false;
-        }
+    ValueNotEqualsValidator.prototype.valid = function () {
+        return this.value !== this.equalsValue;
     };
-    return RegExpTestValidator;
+    return ValueNotEqualsValidator;
 }(Validator));
 
-var ClipBoardUtils = /** @class */ (function () {
-    function ClipBoardUtils() {
+var NodeUtils = /** @class */ (function () {
+    function NodeUtils() {
     }
-    ClipBoardUtils.readText = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.readText();
+    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
+    NodeUtils.removeAllChildNode = function (node) {
+        while (node === null || node === void 0 ? void 0 : node.firstChild) {
+            node.firstChild.remove();
+        }
     };
-    ClipBoardUtils.read = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.read();
+    NodeUtils.appendChild = function (parentNode, childNode) {
+        return parentNode.appendChild(childNode);
     };
-    ClipBoardUtils.writeText = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.writeText(data);
+    NodeUtils.replaceNode = function (targetNode, newNode) {
+        var _a;
+        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
     };
-    ClipBoardUtils.write = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.write(data);
+    NodeUtils.addNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
     };
-    return ClipBoardUtils;
+    return NodeUtils;
 }());
 
 var StorageUtils = /** @class */ (function () {
@@ -3902,34 +3994,31 @@ var StorageUtils = /** @class */ (function () {
     return StorageUtils;
 }());
 
-var NodeUtils = /** @class */ (function () {
-    function NodeUtils() {
+var ClipBoardUtils = /** @class */ (function () {
+    function ClipBoardUtils() {
     }
-    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
-    NodeUtils.removeAllChildNode = function (node) {
-        while (node === null || node === void 0 ? void 0 : node.firstChild) {
-            node.firstChild.remove();
-        }
+    ClipBoardUtils.readText = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.readText();
     };
-    NodeUtils.appendChild = function (parentNode, childNode) {
-        return parentNode.appendChild(childNode);
+    ClipBoardUtils.read = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.read();
     };
-    NodeUtils.replaceNode = function (targetNode, newNode) {
-        var _a;
-        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
+    ClipBoardUtils.writeText = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.writeText(data);
     };
-    NodeUtils.addNode = function (targetNode, newNode) {
-        var _a;
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    ClipBoardUtils.write = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.write(data);
     };
-    return NodeUtils;
+    return ClipBoardUtils;
 }());
 
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;
-exports.AttrExpresion = AttrExpresion;
 exports.Channel = Channel;
 exports.ChannelSubscriber = ChannelSubscriber;
 exports.ChannelSubscription = ChannelSubscription;