dom-render 1.0.90 → 1.0.91

package/dist/bundle.js

@@ -979,106 +979,155 @@ exports.ExecuteState = void 0;
     ExecuteState[ExecuteState["NO_EXECUTE"] = 1] = "NO_EXECUTE";
     ExecuteState[ExecuteState["STOP"] = 2] = "STOP";
 })(exports.ExecuteState || (exports.ExecuteState = {}));
-var OperatorRender = /** @class */ (function () {
-    function OperatorRender(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+var OperatorExecuter = /** @class */ (function () {
+    function OperatorExecuter(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute) {
+        if (startingExecute === void 0) { startingExecute = true; }
         this.rawSet = rawSet;
         this.render = render;
         this.returnContainer = returnContainer;
         this.elementSource = elementSource;
         this.source = source;
         this.afterCallBack = afterCallBack;
+        this.startingExecute = startingExecute;
     }
-    return OperatorRender;
+    OperatorExecuter.prototype.start = function () {
+        var _a, _b, _c, _d, _e, _f;
+        var attrValue = this.elementSource.attr;
+        if ((_a = this.source.operatorAround) === null || _a === void 0 ? void 0 : _a.beforeAttr) {
+            attrValue = (_b = this.source.operatorAround.beforeAttr(attrValue, this)) !== null && _b !== void 0 ? _b : '';
+        }
+        var r = attrValue;
+        if (r && this.startingExecute) {
+            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
+        }
+        if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
+            r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);
+        }
+        var state = this.execute(r);
+        (_f = (_e = this.source.operatorAround) === null || _e === void 0 ? void 0 : _e.after) === null || _f === void 0 ? void 0 : _f.call(_e, r, this);
+        return state;
+    };
+    return OperatorExecuter;
 }());
 
 var DrPre = /** @class */ (function (_super) {
     __extends(DrPre, _super);
-    function DrPre() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrPre(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
+        return _this;
     }
-    DrPre.prototype.execRender = function () {
-        return (this.elementSource.attrs.drPre != null) ? exports.ExecuteState.EXECUTE : exports.ExecuteState.NO_EXECUTE;
+    DrPre.prototype.execute = function (value) {
+        return (value != null) ? exports.ExecuteState.EXECUTE : exports.ExecuteState.NO_EXECUTE;
     };
     return DrPre;
-}(OperatorRender));
+}(OperatorExecuter));
+
+// export type OperatorAround = {
+//     beforeAttr?: (value: string, obj: any) => string,
+//     before?: (data: any, obj: any) => any,
+//     after?: (data: any, obj: any) => void,
+// }
+//
+// export enum ExecuteState {
+//     EXECUTE,
+//     NO_EXECUTE,
+//     STOP
+// }
+//
+// export type AfterCallBack = {
+//     onAttrInitCallBacks: AttrInitCallBack[],
+//     onElementInitCallBacks: ElementInitCallBack[],
+//     onThisComponentSetCallBacks: ComponentSet[]
+// }
+var OperatorExecuterAttrRequire = /** @class */ (function (_super) {
+    __extends(OperatorExecuterAttrRequire, _super);
+    function OperatorExecuterAttrRequire(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute) {
+        if (startingExecute === void 0) { startingExecute = true; }
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute) || this;
+    }
+    // executes(): ExecuteState {
+    //      return ExecuteState.EXECUTE;
+    //  }
+    OperatorExecuterAttrRequire.prototype.execute = function (data) {
+        if (!this.elementSource.attr) {
+            return exports.ExecuteState.NO_EXECUTE;
+        }
+        return this.executeAttrRequire(data);
+    };
+    return OperatorExecuterAttrRequire;
+}(OperatorExecuter));
 
 var Dr = /** @class */ (function (_super) {
     __extends(Dr, _super);
-    function Dr() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function Dr(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
     }
-    Dr.prototype.execRender = function () {
+    Dr.prototype.executeAttrRequire = function (data) {
         var _a;
         var _b, _c;
-        if (this.elementSource.attrs.dr !== null && this.elementSource.attrs.dr.length >= 0) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            // console.log('----', n.innerHTML);\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                            // console.log('----', n.innerHTML);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }"), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-            }));
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            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.obj, this.source.config);
-            (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    const n = $element.cloneNode(true);\n                    var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                    if (destIt !== undefined) {\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        // console.log('----', n.innerHTML);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        // console.log('----', n.innerHTML);\n                    }\n                    if (this.__render.drStripOption === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }"), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        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.obj, this.source.config);
+        (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return Dr;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrIf = /** @class */ (function (_super) {
     __extends(DrIf, _super);
-    function DrIf() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrIf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrIf.prototype.execRender = function () {
+    DrIf.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e;
-        if (this.elementSource.attrs.drIf) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- 이부분은 다른 attr에도 적용을 할지말지 생각해야됨  엘리먼트 존재유무에 따라서 적용을 할지말지 결정해야됨
-            var keepgoing = ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    if ($rawset.data === (").concat(this.elementSource.attrs.drIf, ")) {\n                        return false;\n                    }\n                    $rawset.data = ").concat(this.elementSource.attrs.drIf, "\n                    if($rawset.data) {\n                        const n = $element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', ";\n                    return true;\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-            }));
-            // console.log('keepgoing', keepgoing);
-            if (keepgoing === false) {
-                return exports.ExecuteState.STOP;
-            }
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;
-            var tempalte = this.source.config.window.document.createElement('template');
-            tempalte.innerHTML = newTemp.innerHTML;
-            // console.log(tempalte.innerHTML)
-            this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            // if (bypass) {
-            //     continue;
-            // }
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- 이부분은 다른 attr에도 적용을 할지말지 생각해야됨  엘리먼트 존재유무에 따라서 적용을 할지말지 결정해야됨
+        var keepgoing = ScriptUtils.eval("\n                ".concat(this.render.bindScript, "\n                ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                if ($rawset.data === (").concat(attr, ")) {\n                    return false;\n                }\n                $rawset.data = ").concat(attr, ";\n                if($rawset.data) {\n                    const n = $element.cloneNode(true);\n                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                    var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                    if (destIt !== undefined) {\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                    }\n                    if (this.__render.drStripOption === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }\n                }\n                ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', ";\n                return true;\n                "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+        }));
+        // TODO: 뭐지?? 지워야되는거 아닌가?
+        if (keepgoing === false) {
+            return exports.ExecuteState.STOP;
+        }
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;
+        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.obj, this.source.config);
+        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrIf;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var ComponentSet = /** @class */ (function () {
-    function ComponentSet(obj, template, styles, styleLocale) {
-        if (styleLocale === void 0) { styleLocale = false; }
+    function ComponentSet(obj, template, styles, config) {
         this.obj = obj;
         this.template = template;
         this.styles = styles;
-        this.styleLocale = styleLocale;
+        this.config = Object.assign({ objPath: 'obj' }, config);
     }
     return ComponentSet;
 }());
@@ -1088,40 +1137,34 @@ var DrThis = /** @class */ (function (_super) {
     function DrThis() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    DrThis.prototype.execRender = function () {
+    DrThis.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e, _f;
-        if (this.elementSource.attrs.drThis) {
-            var r = ScriptUtils.evalReturn(this.elementSource.attrs.drThis, this.source.obj);
-            // const isStrip = ScriptUtils.eval(`if (${this.elementSource.attrs.drStripOption ?? 'false'}) { return true; } else { return false; }`, this.source.obj);
-            // console.log('isStrip', isStrip)
-            if (r) {
-                if (r instanceof ComponentSet) {
-                    if (this.rawSet.data) {
-                        var destroyOptions = (_c = (_b = this.elementSource.attrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
-                        RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
-                    }
-                    this.rawSet.data = r;
-                    var componentBody = RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis, ".obj"), (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, r);
-                    this.returnContainer.fag.append(componentBody);
-                    this.afterCallBack.onThisComponentSetCallBacks.push(r);
-                }
-                else {
-                    this.returnContainer.fag.append(RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_e = this.elementSource.attrs.drVarOption) !== null && _e !== void 0 ? _e : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
+        if (attr && this.elementSource.attrs.drThis) {
+            if (attr instanceof ComponentSet) {
+                if (this.rawSet.data) {
+                    var destroyOptions = (_c = (_b = this.elementSource.attrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
+                    RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
                 }
-                var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-                (_f = this.elementSource.element.parentNode) === null || _f === void 0 ? void 0 : _f.replaceChild(this.returnContainer.fag, this.elementSource.element);
-                (_a = this.returnContainer.raws).push.apply(_a, rr);
+                this.rawSet.data = attr;
+                var componentBody = RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis).concat(attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr);
+                this.returnContainer.fag.append(componentBody);
+                this.afterCallBack.onThisComponentSetCallBacks.push(attr);
             }
             else {
-                this.elementSource.element.remove();
+                this.returnContainer.fag.append(RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_e = this.elementSource.attrs.drVarOption) !== null && _e !== void 0 ? _e : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
             }
-            return exports.ExecuteState.EXECUTE;
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+            (_f = this.elementSource.element.parentNode) === null || _f === void 0 ? void 0 : _f.replaceChild(this.returnContainer.fag, this.elementSource.element);
+            (_a = this.returnContainer.raws).push.apply(_a, rr);
         }
-        return exports.ExecuteState.NO_EXECUTE;
+        else {
+            this.elementSource.element.remove();
+        }
+        return exports.ExecuteState.EXECUTE;
     };
     return DrThis;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 // export interface Valid<T = any, E = Element> {
 //     valid(value?: T, target?: E, event?: Event): boolean;
@@ -1453,255 +1496,249 @@ var ValidatorArray = /** @class */ (function (_super) {
 
 var DrForm = /** @class */ (function (_super) {
     __extends(DrForm, _super);
-    function DrForm() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrForm(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
-    DrForm.prototype.execRender = function () {
+    DrForm.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _this = this;
         var _b;
-        if (this.elementSource.attrs.drForm) {
-            RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
-            var data = ScriptUtils.evalReturn("".concat(this.elementSource.attrs.drForm), this.source.obj);
-            var childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-            var fromName = ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', this.source.obj);
-            var thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
-            // console.log('dr-form:name', thisName, element.getAttribute('dr-form:name'), obj, element);
-            // // 자기자신이 Input 대상일때
-            if (childs.length <= 0 && thisName) {
-                childs.push(this.elementSource.element);
+        RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
+        var data = ScriptUtils.evalReturn("".concat(attr), this.source.obj);
+        var childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
+        var fromName = ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', this.source.obj);
+        var thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
+        // // 자기자신이 Input 대상일때
+        if (childs.length <= 0 && thisName) {
+            childs.push(this.elementSource.element);
+        }
+        else {
+            if (data instanceof Validator) {
+                data.setTarget(this.elementSource.element);
             }
-            else {
-                if (data instanceof Validator) {
-                    data.setTarget(this.elementSource.element);
+        }
+        childs.forEach(function (it) {
+            var _a, _b, _c, _d, _e;
+            var eventName = (_a = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":event"))) !== null && _a !== void 0 ? _a : 'change';
+            var validatorName = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":validator"));
+            var attrEventName = EventManager.attrPrefix + 'event-' + eventName;
+            var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
+            if (varpath != null) {
+                if (validatorName) {
+                    ScriptUtils.eval("\n                                ".concat(_this.render.bindScript, "\n                                const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                ").concat(attr, "['").concat(varpath, "'] = validator;\n                            "), Object.assign(_this.source.obj, {
+                        __render: Object.freeze(__assign({ drStripOption: _this.elementSource.attrs.drStripOption }, _this.render))
+                    }));
                 }
-            }
-            childs.forEach(function (it) {
-                var _a, _b, _c, _d, _e;
-                var eventName = (_a = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":event"))) !== null && _a !== void 0 ? _a : 'change';
-                var validatorName = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":validator"));
-                var attrEventName = EventManager.attrPrefix + 'event-' + eventName;
-                var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
-                if (varpath != null) {
-                    if (validatorName) {
-                        ScriptUtils.eval("\n                                    ".concat(_this.render.bindScript, "\n                                    const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                    ").concat(_this.elementSource.attrs.drForm, "['").concat(varpath, "'] = validator;\n                                "), Object.assign(_this.source.obj, {
-                            __render: Object.freeze(__assign({ drStripOption: _this.elementSource.attrs.drStripOption }, _this.render))
-                        }));
-                    }
-                    varpath = "".concat(_this.elementSource.attrs.drForm, "['").concat(varpath, "']");
-                    var data_1 = ScriptUtils.evalReturn("".concat(varpath), _this.source.obj);
-                    if (data_1 instanceof ValidatorArray) {
-                        it.setAttribute(attrEventName, "".concat(varpath, ".setArrayValue($target, $target.value, $event); ").concat((_d = it.getAttribute(attrEventName)) !== null && _d !== void 0 ? _d : '', ";"));
-                        data_1.addValidator(it.value, it);
-                    }
-                    else if (data_1 instanceof Validator) {
-                        // varpath += (varpath ? '.value' : 'value');
-                        // varpath = drAttr.drForm + '.' + varpath;
-                        // it.setAttribute(attrEventName, `${varpath} = $target.value; ${target}=$target; ${event}=$event;`);
-                        it.setAttribute(attrEventName, "".concat(varpath, ".set($target.value, $target, $event); ").concat((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '', ";"));
-                        data_1.setTarget(it);
-                        data_1.value = it.value;
-                    }
-                    else {
-                        it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
-                    }
+                varpath = "".concat(attr, "['").concat(varpath, "']");
+                var data_1 = ScriptUtils.evalReturn("".concat(varpath), _this.source.obj);
+                if (data_1 instanceof ValidatorArray) {
+                    it.setAttribute(attrEventName, "".concat(varpath, ".setArrayValue($target, $target.value, $event); ").concat((_d = it.getAttribute(attrEventName)) !== null && _d !== void 0 ? _d : '', ";"));
+                    data_1.addValidator(it.value, it);
                 }
-            });
-            RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
-            (_a = this.returnContainer.raws).push.apply(_a, RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+                else if (data_1 instanceof Validator) {
+                    // varpath += (varpath ? '.value' : 'value');
+                    // varpath = drAttr.drForm + '.' + varpath;
+                    // it.setAttribute(attrEventName, `${varpath} = $target.value; ${target}=$target; ${event}=$event;`);
+                    it.setAttribute(attrEventName, "".concat(varpath, ".set($target.value, $target, $event); ").concat((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '', ";"));
+                    data_1.setTarget(it);
+                    data_1.value = it.value;
+                }
+                else {
+                    it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
+                }
+            }
+        });
+        RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
+        (_a = this.returnContainer.raws).push.apply(_a, RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
+        return exports.ExecuteState.EXECUTE;
     };
     return DrForm;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrInnerText = /** @class */ (function (_super) {
     __extends(DrInnerText, _super);
-    function DrInnerText() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrInnerText(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
-    DrInnerText.prototype.execRender = function () {
+    DrInnerText.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d;
-        if (this.elementSource.attrs.drInnerText) {
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval(" \n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                        n.innerText = ").concat(this.elementSource.attrs.drInnerText, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, 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.obj, this.source.config);
-            (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval(" \n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                        n.innerText = ").concat(attr, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, 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.obj, this.source.config);
+        (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrInnerText;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrInnerHTML = /** @class */ (function (_super) {
     __extends(DrInnerHTML, _super);
-    function DrInnerHTML() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrInnerHTML(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
-    DrInnerHTML.prototype.execRender = function () {
+    DrInnerHTML.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d;
-        if (this.elementSource.attrs.drInnerHTML) {
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                        n.innerHTML = ").concat(this.elementSource.attrs.drInnerHTML, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render
-                // eslint-disable-next-line no-use-before-define
-                ))
-            }));
-            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.obj, this.source.config);
-            (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                        n.innerHTML = ").concat(attr, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render
+            // eslint-disable-next-line no-use-before-define
+            ))
+        }));
+        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.obj, this.source.config);
+        (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrInnerHTML;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrFor = /** @class */ (function (_super) {
     __extends(DrFor, _super);
-    function DrFor() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrFor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrFor.prototype.execRender = function () {
+    DrFor.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e;
-        if (this.elementSource.attrs.drFor) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    for(").concat(this.elementSource.attrs.drFor, ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForIt\\#/g, destIt).replace(/\\#nearForIndex\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-            }));
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            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.obj, this.source.config);
-            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    for(").concat(attr, ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForIt\\#/g, destIt).replace(/\\#nearForIndex\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        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.obj, this.source.config);
+        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrFor;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrForOf = /** @class */ (function (_super) {
     __extends(DrForOf, _super);
-    function DrForOf() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrForOf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrForOf.prototype.execRender = function () {
+    DrForOf.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e;
-        if (this.elementSource.attrs.drForOf) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const forOf = ").concat(this.elementSource.attrs.drForOf, ";\n                    const forOfStr = `").concat(this.elementSource.attrs.drForOf, "`.trim();\n                    if (forOf) {\n                        for(const it of forOf) {\n                            var destIt = it;\n                            if (/\\[(.*,?)\\],/g.test(forOfStr)) {\n                                if (typeof it === 'string') {\n                                    destIt = it;\n                                } else {\n                                    destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                                }\n                            } else if (forOf.isRange) {\n                                    destIt = it;\n                            }  else {\n                                destIt = forOfStr + '[' + i +']'\n                            }\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);\n                            if (this.__render.drStripOption === 'true') {\n                                Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                            } else {\n                                this.__render.fag.append(n);\n                            }\n                            i++;\n                        }\n                        \n                        if('").concat(this.elementSource.attrs.drNextOption, "' !== 'null') {\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            const [name, idx] = '").concat(this.elementSource.attrs.drNextOption, "'.split(',');\n                            n.setAttribute('dr-for-of', name + '[' + idx + ']');\n                            n.setAttribute('dr-next', name + ',' +  (Number(idx) + 1));\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
-                // eslint-disable-next-line no-use-before-define
-                ))
-            }));
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            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.obj, this.source.config);
-            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const forOf = ").concat(attr, ";\n                    const forOfStr = `").concat(attr, "`.trim();\n                    if (forOf) {\n                        for(const it of forOf) {\n                            var destIt = it;\n                            if (/\\[(.*,?)\\],/g.test(forOfStr)) {\n                                if (typeof it === 'string') {\n                                    destIt = it;\n                                } else {\n                                    destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                                }\n                            } else if (forOf.isRange) {\n                                    destIt = it;\n                            }  else {\n                                destIt = forOfStr + '[' + i +']'\n                            }\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);\n                            if (this.__render.drStripOption === 'true') {\n                                Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                            } else {\n                                this.__render.fag.append(n);\n                            }\n                            i++;\n                        }\n                        \n                        if('").concat(this.elementSource.attrs.drNextOption, "' !== 'null') {\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            const [name, idx] = '").concat(this.elementSource.attrs.drNextOption, "'.split(',');\n                            n.setAttribute('dr-for-of', name + '[' + idx + ']');\n                            n.setAttribute('dr-next', name + ',' +  (Number(idx) + 1));\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
+            // eslint-disable-next-line no-use-before-define
+            ))
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        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.obj, this.source.config);
+        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrForOf;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrAppender = /** @class */ (function (_super) {
     __extends(DrAppender, _super);
-    function DrAppender() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrAppender(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrAppender.prototype.execRender = function () {
+    DrAppender.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e;
-        if (this.elementSource.attrs.drAppender) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                    try{\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '").concat(this.elementSource.attrs.drAppender, " && ").concat(this.elementSource.attrs.drAppender, ".length > 0');\n                        const n = this.__render.element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        n.setAttribute('dr-for-of', '").concat(this.elementSource.attrs.drAppender, "[' + (").concat(this.elementSource.attrs.drAppender, ".length-1) + ']');\n                        n.setAttribute('dr-next', '").concat(this.elementSource.attrs.drAppender, ",' + ").concat(this.elementSource.attrs.drAppender, ".length);\n                        ifWrap.append(n);\n                        \n                        // n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))\n                        // n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);\n                        // if (this.__render.drStripOption === 'true') {\n                        // Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        // } else {\n                        // this.__render.fag.append(n);\n                        // }\n                        this.__render.fag.append(ifWrap);\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    }catch(e){}\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
-                // eslint-disable-next-line no-use-before-define
-                ))
-            }));
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            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.obj, this.source.config);
-            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        console.log('appender-->', attr);
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                    try{\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '").concat(this.elementSource.attrs.drAppender, " && ").concat(this.elementSource.attrs.drAppender, ".length > 0');\n                        const n = this.__render.element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        n.setAttribute('dr-for-of', '").concat(this.elementSource.attrs.drAppender, "[' + (").concat(this.elementSource.attrs.drAppender, ".length-1) + ']');\n                        n.setAttribute('dr-next', '").concat(this.elementSource.attrs.drAppender, ",' + ").concat(this.elementSource.attrs.drAppender, ".length);\n                        ifWrap.append(n);\n                        this.__render.fag.append(ifWrap);\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    }catch(e){}\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
+            // eslint-disable-next-line no-use-before-define
+            ))
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        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.obj, this.source.config);
+        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrAppender;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrRepeat = /** @class */ (function (_super) {
     __extends(DrRepeat, _super);
-    function DrRepeat() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrRepeat(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrRepeat.prototype.execRender = function () {
+    DrRepeat.prototype.executeAttrRequire = function (attr) {
         var _a;
         var _b, _c, _d, _e;
-        if (this.elementSource.attrs.drRepeat) {
-            var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-            var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-            var newTemp = this.source.config.window.document.createElement('temp');
-            ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const repeat = ").concat(this.elementSource.attrs.drRepeat, ";\n                    const repeatStr = `").concat(this.elementSource.attrs.drRepeat, "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = ").concat(EventManager.RANGE_VARNAME, "(repeat);\n                    } \n                    for(const it of range) {\n                        var destIt = it;\n                        if (range.isRange) {\n                            destIt = it;\n                        }  else {\n                            destIt = repeatStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearRangeIt\\#/g, destIt).replace(/\\#nearRangeIndex\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-            }));
-            RawSet.drVarDecoding(newTemp, vars);
-            RawSet.drItOtherDecoding(newTemp, itRandom);
-            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.obj, this.source.config);
-            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
+        var newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const repeat = ").concat(attr, ";\n                    const repeatStr = `").concat(attr, "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = ").concat(EventManager.RANGE_VARNAME, "(repeat);\n                    } \n                    for(const it of range) {\n                        var destIt = it;\n                        if (range.isRange) {\n                            destIt = it;\n                        }  else {\n                            destIt = repeatStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearRangeIt\\#/g, destIt).replace(/\\#nearRangeIndex\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        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.obj, this.source.config);
+        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        (_a = this.returnContainer.raws).push.apply(_a, rr);
+        return exports.ExecuteState.EXECUTE;
     };
     return DrRepeat;
-}(OperatorRender));
+}(OperatorExecuterAttrRequire));
 
 var DrTargetElement = /** @class */ (function (_super) {
     __extends(DrTargetElement, _super);
-    function DrTargetElement() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrTargetElement(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrTargetElement.prototype.execRender = function () {
+    DrTargetElement.prototype.execute = function () {
         var _a;
         var _this = this;
         var _b, _c, _d, _e;
@@ -1709,34 +1746,10 @@ var DrTargetElement = /** @class */ (function (_super) {
         if (targetElement) {
             var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config);
             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 () {
@@ -1757,7 +1770,6 @@ var DrTargetElement = /** @class */ (function (_super) {
                     targetElement: targetElement,
                     creatorMetaData: targetElement.__creatorMetaData
                 });
-                // console.log(document.body.innerHTML);
                 (_e = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _e === void 0 ? void 0 : _e.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
             }
             return exports.ExecuteState.EXECUTE;
@@ -1765,18 +1777,20 @@ var DrTargetElement = /** @class */ (function (_super) {
         return exports.ExecuteState.NO_EXECUTE;
     };
     return DrTargetElement;
-}(OperatorRender));
+}(OperatorExecuter));
 
 var DrTargetAttr = /** @class */ (function (_super) {
     __extends(DrTargetAttr, _super);
-    function DrTargetAttr() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DrTargetAttr(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
+        source.operatorAround = undefined;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrTargetAttr.prototype.execRender = function () {
+    DrTargetAttr.prototype.execute = function () {
         var _a;
         var _b, _c, _d, _e;
         var attributeNames = this.elementSource.element.getAttributeNames();
-        // const targetAttr = config?.targetAttrs?.find(it => (!drAttr.drForOf && !drAttr.drFor && !drAttr.drRepeat) && attributeNames.includes(it.name));
         var targetAttr = (_c = (_b = this.source.config) === null || _b === void 0 ? void 0 : _b.targetAttrs) === null || _c === void 0 ? void 0 : _c.find(function (it) { return attributeNames.includes(it.name); });
         if (targetAttr) {
             var attrName = targetAttr.name;
@@ -1800,7 +1814,7 @@ var DrTargetAttr = /** @class */ (function (_super) {
         return exports.ExecuteState.NO_EXECUTE;
     };
     return DrTargetAttr;
-}(OperatorRender));
+}(OperatorExecuter));
 
 exports.DestroyOptionType = void 0;
 (function (DestroyOptionType) {
@@ -1883,15 +1897,15 @@ var RawSet = /** @class */ (function () {
     // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         var genNode = config.window.document.importNode(this.fragment, true);
         var raws = [];
         var onAttrInitCallBacks = [];
         var onElementInitCallBacks = [];
         var onThisComponentSetCallBacks = [];
         var drAttrs = [];
-        for (var _i = 0, _m = Array.from(genNode.childNodes.values()); _i < _m.length; _i++) {
-            var cNode = _m[_i];
+        for (var _i = 0, _y = Array.from(genNode.childNodes.values()); _i < _y.length; _i++) {
+            var cNode = _y[_i];
             var attribute = {};
             if (cNode.nodeType === Node.ELEMENT_NODE) {
                 attribute = DomUtils.getAttributeToObject(cNode);
@@ -1957,23 +1971,23 @@ var RawSet = /** @class */ (function () {
                 };
                 drAttrs.push(drAttr);
                 var operators = [
-                    new DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    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 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 }),
-                    new DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drPre, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_b = config.operatorAround) === null || _b === void 0 ? void 0 : _b.drPre }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new Dr(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.dr, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_c = config.operatorAround) === null || _c === void 0 ? void 0 : _c.dr }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drIf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_d = config.operatorAround) === null || _d === void 0 ? void 0 : _d.drIf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drThis, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_e = config.operatorAround) === null || _e === void 0 ? void 0 : _e.drThis }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drForm, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_f = config.operatorAround) === null || _f === void 0 ? void 0 : _f.drForm }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drInnerText, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_g = config.operatorAround) === null || _g === void 0 ? void 0 : _g.drInnerText }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drInnerHTML, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerHTML }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drFor, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drFor }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drForOf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drForOf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrTargetElement(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                     new DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
                 ];
-                for (var _o = 0, operators_1 = operators; _o < operators_1.length; _o++) {
-                    var operator = operators_1[_o];
-                    var state = operator.execRender();
+                for (var _z = 0, operators_1 = operators; _z < operators_1.length; _z++) {
+                    var operator = operators_1[_z];
+                    var state = operator.start();
                     if (state === exports.ExecuteState.EXECUTE) {
                         break;
                     }
@@ -1998,13 +2012,13 @@ var RawSet = /** @class */ (function () {
         });
         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
         RawSet.generateStyleSheetsLocal();
-        for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
-            var it_1 = onThisComponentSetCallBacks_1[_p];
-            (_c = (_b = it_1.obj) === null || _b === void 0 ? void 0 : _b.onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
+        for (var _0 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _0 < onThisComponentSetCallBacks_1.length; _0++) {
+            var it_1 = onThisComponentSetCallBacks_1[_0];
+            (_p = (_o = it_1.obj) === null || _o === void 0 ? void 0 : _o.onInitRender) === null || _p === void 0 ? void 0 : _p.call(_o);
         }
-        for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
-            var it_2 = onElementInitCallBacks_1[_q];
-            if (((_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.element) && ((_g = (_f = it_2.targetElement) === null || _f === void 0 ? void 0 : _f.__render) === null || _g === void 0 ? void 0 : _g.component)) {
+        for (var _1 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _1 < onElementInitCallBacks_1.length; _1++) {
+            var it_2 = onElementInitCallBacks_1[_1];
+            if (((_r = (_q = it_2.targetElement) === null || _q === void 0 ? void 0 : _q.__render) === null || _r === void 0 ? void 0 : _r.element) && ((_t = (_s = it_2.targetElement) === null || _s === void 0 ? void 0 : _s.__render) === null || _t === void 0 ? void 0 : _t.component)) {
                 var oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME); // dr-on-component-init
                 var param = [];
                 if (oninit) {
@@ -2016,14 +2030,14 @@ var RawSet = /** @class */ (function () {
                         param = [param];
                     }
                 }
-                (_j = (_h = it_2.targetElement.__render.component).onInitRender) === null || _j === void 0 ? void 0 : _j.call.apply(_j, __spreadArray([_h], param, false));
+                (_v = (_u = it_2.targetElement.__render.component).onInitRender) === null || _v === void 0 ? void 0 : _v.call.apply(_v, __spreadArray([_u], param, false));
             }
-            (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
+            (_w = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _w === void 0 ? void 0 : _w.call(config, it_2.name, obj, this, it_2.targetElement);
         }
         // TODO: 이부분도 위에 targetElement 처럼 해야될까?
-        for (var _r = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _r < onAttrInitCallBacks_1.length; _r++) {
-            var it_3 = onAttrInitCallBacks_1[_r];
-            (_l = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _l === void 0 ? void 0 : _l.call(config, it_3.attrName, it_3.attrValue, obj, this);
+        for (var _2 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _2 < onAttrInitCallBacks_1.length; _2++) {
+            var it_3 = onAttrInitCallBacks_1[_2];
+            (_x = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _x === void 0 ? void 0 : _x.call(config, it_3.attrName, it_3.attrValue, obj, this);
         }
         // component destroy
         if (obj.__domrender_components) {
@@ -3531,6 +3545,21 @@ 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 () {
     function Appender(defaultDatas) {
         this.length = 0;
@@ -3584,47 +3613,6 @@ 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 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;
-    }
-    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 AllCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllCheckedValidatorArray, _super);
-    function AllCheckedValidatorArray(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    AllCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > 0);
-    };
-    return AllCheckedValidatorArray;
-}(ValidatorArray));
-
 var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllUnCheckedValidatorArray, _super);
     function AllUnCheckedValidatorArray(value, target, event, autoValid) {
@@ -3638,36 +3626,6 @@ var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
     return AllUnCheckedValidatorArray;
 }(ValidatorArray));
 
-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 CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsCheckedValidatorArray, _super);
     function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -3683,19 +3641,32 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var AllCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllCheckedValidatorArray, _super);
+    function AllCheckedValidatorArray(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    AllCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > 0);
+    };
+    return AllCheckedValidatorArray;
+}(ValidatorArray));
+
+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;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    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 ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3713,6 +3684,19 @@ var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_su
     return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(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;
+    }
+    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 CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanUnCheckedValidatorArray, _super);
     function CountGreaterThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -3728,23 +3712,38 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
+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;
     }
-    CountLessThanCheckedValidatorArray.prototype.valid = function () {
+    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 ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
     };
-    return CountLessThanCheckedValidatorArray;
+    return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsCheckedValidatorArray(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;
+    }
+    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length >= this.count;
+    };
+    return CountGreaterThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
+
+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;
@@ -3758,34 +3757,34 @@ var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super
     return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(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;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.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 CountGreaterThanEqualsCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanCheckedValidatorArray, _super);
+    function CountLessThanCheckedValidatorArray(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;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanCheckedValidatorArray.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 CountUnCheckedValidatorArray;
+    return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3803,22 +3802,62 @@ var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
         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.count = count;
+        return _this;
     }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(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;
     };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
+    return CountUnCheckedValidatorArray;
+}(ValidatorArray));
+
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, 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.reset = function () {
-        this.targetReset();
+    return EmptyValidator;
+}(Validator));
+
+var MultipleValidator = /** @class */ (function (_super) {
+    __extends(MultipleValidator, _super);
+    function MultipleValidator(validators, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.validators = validators.map(function (it) {
+            it.setAutoValid(false);
+            it.setAutoValidAction(false);
+            return it;
+        });
+        _this.validators.forEach(function (it) {
+            it.set(_this.value, _this.getTarget(), _this.getEvent());
+        });
+        return _this;
+    }
+    MultipleValidator.prototype.changeValue = function (value) {
+        var _this = this;
+        this.validators.forEach(function (it) { return it.set(_this.value, _this.getTarget(), _this.getEvent()); });
     };
-    return FormValidator;
+    MultipleValidator.prototype.validAction = function () {
+        return !(this.validators.filter(function (it) { return !it.validAction(); }).length > 0);
+    };
+    MultipleValidator.prototype.valid = function () {
+        // console.log('mm', this.validators)
+        return !(this.validators.filter(function (it) { return !it.valid(); }).length > 0);
+    };
+    return MultipleValidator;
 }(Validator));
 
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3843,20 +3882,6 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, 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;
-    };
-    return EmptyValidator;
-}(Validator));
-
 var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(IncludeCheckedValidatorArray, _super);
     function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -3879,33 +3904,22 @@ var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var MultipleValidator = /** @class */ (function (_super) {
-    __extends(MultipleValidator, _super);
-    function MultipleValidator(validators, value, target, event, autoValid) {
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.validators = validators.map(function (it) {
-            it.setAutoValid(false);
-            it.setAutoValidAction(false);
-            return it;
-        });
-        _this.validators.forEach(function (it) {
-            it.set(_this.value, _this.getTarget(), _this.getEvent());
-        });
-        return _this;
+        return _super.call(this, undefined, target, event, autoValid) || this;
     }
-    MultipleValidator.prototype.changeValue = function (value) {
-        var _this = this;
-        this.validators.forEach(function (it) { return it.set(_this.value, _this.getTarget(), _this.getEvent()); });
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
     };
-    MultipleValidator.prototype.validAction = function () {
-        return !(this.validators.filter(function (it) { return !it.validAction(); }).length > 0);
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
     };
-    MultipleValidator.prototype.valid = function () {
-        // console.log('mm', this.validators)
-        return !(this.validators.filter(function (it) { return !it.valid(); }).length > 0);
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
     };
-    return MultipleValidator;
+    return FormValidator;
 }(Validator));
 
 var NotRegExpTestValidator = /** @class */ (function (_super) {
@@ -3930,32 +3944,16 @@ var NotRegExpTestValidator = /** @class */ (function (_super) {
     return NotRegExpTestValidator;
 }(Validator));
 
-var UnCheckedValidator = /** @class */ (function (_super) {
-    __extends(UnCheckedValidator, _super);
-    function UnCheckedValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    UnCheckedValidator.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 UnCheckedValidator;
-}(Validator));
-
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
+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;
     }
-    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;
+    PassValidator.prototype.valid = function () {
+        return true;
     };
-    return NotEmptyValidator;
+    return PassValidator;
 }(Validator));
 
 var RegExpTestValidator = /** @class */ (function (_super) {
@@ -3981,18 +3979,6 @@ var RegExpTestValidator = /** @class */ (function (_super) {
     return RegExpTestValidator;
 }(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 RequiredValidator = /** @class */ (function (_super) {
     __extends(RequiredValidator, _super);
     function RequiredValidator(value, target, event, autoValid) {
@@ -4007,6 +3993,34 @@ var RequiredValidator = /** @class */ (function (_super) {
     return RequiredValidator;
 }(Validator));
 
+var UnCheckedValidator = /** @class */ (function (_super) {
+    __extends(UnCheckedValidator, _super);
+    function UnCheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    UnCheckedValidator.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 UnCheckedValidator;
+}(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 ValidMultipleValidator = /** @class */ (function (_super) {
     __extends(ValidMultipleValidator, _super);
     function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
@@ -4050,20 +4064,6 @@ var ValidValidatorArray = /** @class */ (function (_super) {
     return ValidValidatorArray;
 }(ValidatorArray));
 
-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 ValueEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueEqualsValidator, _super);
     function ValueEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -4078,50 +4078,19 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
 
-var StorageUtils = /** @class */ (function () {
-    function StorageUtils() {
+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;
     }
-    StorageUtils.setLocalStorageItem = function (k, v, window) {
-        if (typeof v === 'object') {
-            v = JSON.stringify(v);
-        }
-        window.localStorage.setItem(k, v);
-    };
-    StorageUtils.getLocalStorageItem = function (k, window) {
-        return window.localStorage.getItem(k);
-    };
-    StorageUtils.cutLocalStorageItem = function (k, window) {
-        var data = StorageUtils.getLocalStorageItem(k, window);
-        StorageUtils.removeLocalStorageItem(k, window);
-        return data;
-    };
-    StorageUtils.removeLocalStorageItem = function (k, window) {
-        return window.localStorage.removeItem(k);
-    };
-    StorageUtils.getLocalStorageJsonItem = function (k, window) {
-        var item = window.localStorage.getItem(k);
-        if (item) {
-            try {
-                return JSON.parse(item);
-            }
-            catch (e) {
-                return undefined;
-            }
-        }
-        else {
-            return undefined;
-        }
-    };
-    StorageUtils.cutLocalStorageJsonItem = function (k, window) {
-        var item = StorageUtils.getLocalStorageJsonItem(k, window);
-        StorageUtils.removeLocalStorageItem(k, window);
-        return item;
-    };
-    StorageUtils.clearLocalStorage = function (window) {
-        window.localStorage.clear();
+    ValueNotEqualsValidator.prototype.valid = function () {
+        return this.value !== this.equalsValue;
     };
-    return StorageUtils;
-}());
+    return ValueNotEqualsValidator;
+}(Validator));
 
 var ClipBoardUtils = /** @class */ (function () {
     function ClipBoardUtils() {
@@ -4169,6 +4138,51 @@ var NodeUtils = /** @class */ (function () {
     return NodeUtils;
 }());
 
+var StorageUtils = /** @class */ (function () {
+    function StorageUtils() {
+    }
+    StorageUtils.setLocalStorageItem = function (k, v, window) {
+        if (typeof v === 'object') {
+            v = JSON.stringify(v);
+        }
+        window.localStorage.setItem(k, v);
+    };
+    StorageUtils.getLocalStorageItem = function (k, window) {
+        return window.localStorage.getItem(k);
+    };
+    StorageUtils.cutLocalStorageItem = function (k, window) {
+        var data = StorageUtils.getLocalStorageItem(k, window);
+        StorageUtils.removeLocalStorageItem(k, window);
+        return data;
+    };
+    StorageUtils.removeLocalStorageItem = function (k, window) {
+        return window.localStorage.removeItem(k);
+    };
+    StorageUtils.getLocalStorageJsonItem = function (k, window) {
+        var item = window.localStorage.getItem(k);
+        if (item) {
+            try {
+                return JSON.parse(item);
+            }
+            catch (e) {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
+    StorageUtils.cutLocalStorageJsonItem = function (k, window) {
+        var item = StorageUtils.getLocalStorageJsonItem(k, window);
+        StorageUtils.removeLocalStorageItem(k, window);
+        return item;
+    };
+    StorageUtils.clearLocalStorage = function (window) {
+        window.localStorage.clear();
+    };
+    return StorageUtils;
+}());
+
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;
@@ -4220,7 +4234,8 @@ exports.NodeUtils = NodeUtils;
 exports.NonPassValidator = NonPassValidator;
 exports.NotEmptyValidator = NotEmptyValidator;
 exports.NotRegExpTestValidator = NotRegExpTestValidator;
-exports.OperatorRender = OperatorRender;
+exports.OperatorExecuter = OperatorExecuter;
+exports.OperatorExecuterAttrRequire = OperatorExecuterAttrRequire;
 exports.PassValidator = PassValidator;
 exports.PathRouter = PathRouter;
 exports.RandomUtils = RandomUtils;