dom-render 1.0.96 → 1.0.97

package/dist/bundle.js

@@ -2,7 +2,7 @@
 
 try{if(!exports){exports = {};} }catch(e){var exports = {}};
 
-/******************************************************************************
+/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -16,8 +16,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
 
+/* global Reflect, Promise */
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -26,24 +26,31 @@ var extendStatics = function (d, b) {
   } || function (d, b) {
     for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
+
   return extendStatics(d, b);
 };
+
 function __extends(d, b) {
   if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
   extendStatics(d, b);
+
   function __() {
     this.constructor = d;
   }
+
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 var __assign = function () {
   __assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
+
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
+
     return t;
   };
+
   return __assign.apply(this, arguments);
 };
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -52,6 +59,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
       resolve(value);
     });
   }
+
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -60,6 +68,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
+
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -67,26 +76,28 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
+
     function step(result) {
       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
+
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 }
 function __generator(thisArg, body) {
   var _ = {
-      label: 0,
-      sent: function () {
-        if (t[0] & 1) throw t[1];
-        return t[1];
-      },
-      trys: [],
-      ops: []
+    label: 0,
+    sent: function () {
+      if (t[0] & 1) throw t[1];
+      return t[1];
     },
-    f,
-    y,
-    t,
-    g;
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
   return g = {
     next: verb(0),
     "throw": verb(1),
@@ -94,59 +105,78 @@ function __generator(thisArg, body) {
   }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
     return this;
   }), g;
+
   function verb(n) {
     return function (v) {
       return step([n, v]);
     };
   }
+
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+
+    while (_) try {
       if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
       if (y = 0, t) op = [op[0] & 2, t.value];
+
       switch (op[0]) {
         case 0:
         case 1:
           t = op;
           break;
+
         case 4:
           _.label++;
           return {
             value: op[1],
             done: false
           };
+
         case 5:
           _.label++;
           y = op[1];
           op = [0];
           continue;
+
         case 7:
           op = _.ops.pop();
+
           _.trys.pop();
+
           continue;
+
         default:
           if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
             _ = 0;
             continue;
           }
+
           if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
             _.label = op[1];
             break;
           }
+
           if (op[0] === 6 && _.label < t[1]) {
             _.label = t[1];
             t = op;
             break;
           }
+
           if (t && _.label < t[2]) {
             _.label = t[2];
+
             _.ops.push(op);
+
             break;
           }
+
           if (t[2]) _.ops.pop();
+
           _.trys.pop();
+
           continue;
       }
+
       op = body.call(thisArg, _);
     } catch (e) {
       op = [6, e];
@@ -154,6 +184,7 @@ function __generator(thisArg, body) {
     } finally {
       f = t = 0;
     }
+
     if (op[0] & 5) throw op[1];
     return {
       value: op[0] ? op[1] : void 0,
@@ -304,6 +335,23 @@ var StringUtils = /** @class */ (function () {
         }
         return usingVars;
     };
+    StringUtils.regexExecArrayReplace = function (origin, regexpExecArrayOrRegex, replace) {
+        var regexpExecArrays = Array.isArray(regexpExecArrayOrRegex) ? regexpExecArrayOrRegex : StringUtils.regexExec(regexpExecArrayOrRegex, origin);
+        regexpExecArrays.reverse().forEach(function (it) {
+            var r = typeof replace === 'string' ? replace : replace(it);
+            origin = origin.substr(0, it.index) + origin.substr(it.index).replace(it[0], r);
+        });
+        return origin;
+    };
+    // public static regexGroups(regex: RegExp, text: string) {
+    //   const usingVars = [];
+    //   let varExec = regex.exec(text)
+    //   while (varExec) {
+    //     usingVars.push(varExec)
+    //     varExec = regex.exec(varExec.input)
+    //   }
+    //   return usingVars;
+    // }
     // public static betweenRegexpStr(start: string, end: string, data: string, flag = 'gm') {
     //     const startEspace = StringUtils.escapeSpecialCharacterRegExp(start);
     //     const reg = RegExp(`(${start}(?:(${start})??[^${startEspace}]*?${end}))`,flag);
@@ -359,7 +407,7 @@ var ScriptUtils = /** @class */ (function () {
         }, new GetDetectProxy());
         try {
             // eslint-disable-next-line no-new-func,no-unused-expressions
-            Function("\"use strict\"; ".concat(script, "; ")).bind(destUser)();
+            Function("\"use strict\"; " + script + "; ").bind(destUser)();
         }
         catch (e) {
             console.error(e);
@@ -375,7 +423,7 @@ var ScriptUtils = /** @class */ (function () {
     };
     ScriptUtils.eval = function (script, thisTarget) {
         // eslint-disable-next-line no-new-func,no-unused-expressions
-        return Function("\"use strict\"; ".concat(script, " ")).bind(thisTarget)();
+        return Function("\"use strict\"; " + script + " ").bind(thisTarget)();
     };
     ScriptUtils.loadElement = function (name, attribute, document) {
         return new Promise(function (resolve, reject) {
@@ -478,10 +526,22 @@ var RangeIterator = /** @class */ (function () {
             r = new RangeResult(this._current, false);
             this._current += this._step;
         }
+        else if (this._first < this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current += this._step;
+        }
         else if (this._first > this._last && this._current > this._last) {
             r = new RangeResult(this._current, false);
             this._current -= this._step;
         }
+        else if (this._first > this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
+        else if (this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
         else {
             r = new RangeResult(undefined, true);
         }
@@ -500,6 +560,9 @@ var Range = /** @class */ (function () {
     Range.prototype[Symbol.iterator] = function () {
         return new RangeIterator(this.first, this.last, this.step);
     };
+    Range.prototype.map = function (callbackfn, thisArg) {
+        return Array.from(this).map(callbackfn);
+    };
     Range.range = function (first, last, step) {
         if (step === void 0) { step = 1; }
         if (typeof first === 'number' && last === undefined) {
@@ -570,21 +633,21 @@ var EventManager = /** @class */ (function () {
             EventManager.onInitAttrName,
             this.eventParam
         ];
-        this.bindScript = "\n        const ".concat(EventManager.VALUE_VARNAME, " = this.__render.value;\n        const ").concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n        const ").concat(EventManager.RANGE_VARNAME, " = this.__render.range;\n        const ").concat(EventManager.ROUTER_VARNAME, " = this.__render.router;\n        const ").concat(EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n        const ").concat(EventManager.ELEMENT_VARNAME, " = this.__render.element;\n        const ").concat(EventManager.TARGET_VARNAME, " = this.__render.target;\n        const ").concat(EventManager.EVENT_VARNAME, " = this.__render.event;\n    ");
+        this.bindScript = "\n        const " + EventManager.VALUE_VARNAME + " = this.__render.value;\n        const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n        const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n        const " + EventManager.ROUTER_VARNAME + " = this.__render.router;\n        const " + EventManager.ATTRIBUTE_VARNAME + " = this.__render.attribute;\n        const " + EventManager.ELEMENT_VARNAME + " = this.__render.element;\n        const " + EventManager.TARGET_VARNAME + " = this.__render.target;\n        const " + EventManager.EVENT_VARNAME + " = this.__render.event;\n    ";
         this.eventNames.forEach(function (it) {
             _this.attrNames.push(EventManager.attrPrefix + 'event-' + it);
         });
         if (typeof window !== 'undefined') {
             EventManager.WINDOW_EVENTS.forEach(function (eventName) {
                 window === null || window === void 0 ? void 0 : window.addEventListener(eventName, function (event) {
-                    var targetAttr = "dr-window-event-".concat(eventName);
-                    document.querySelectorAll("[".concat(targetAttr, "]")).forEach(function (it) {
+                    var targetAttr = "dr-window-event-" + eventName;
+                    document.querySelectorAll("[" + targetAttr + "]").forEach(function (it) {
                         var _a;
                         var script = it.getAttribute(targetAttr);
                         if (script) {
                             var obj = it.obj;
                             var config = (_a = obj === null || obj === void 0 ? void 0 : obj._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.config;
-                            ScriptUtils.eval("".concat(_this.bindScript, " ").concat(script, " "), Object.assign(obj, {
+                            ScriptUtils.eval(_this.bindScript + " " + script + " ", Object.assign(obj, {
                                 __render: Object.freeze({
                                     target: DomRenderFinalProxy.final(event.target),
                                     element: it,
@@ -612,7 +675,7 @@ var EventManager = /** @class */ (function () {
         var elements = new Set();
         var addAttributes = (_b = (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.map(function (it) { return it.attrName; })) !== null && _b !== void 0 ? _b : [];
         addAttributes.concat(this.attrNames).forEach(function (attrName) {
-            fragment === null || fragment === void 0 ? void 0 : fragment.querySelectorAll("[".concat(attrName, "]")).forEach(function (it) {
+            fragment === null || fragment === void 0 ? void 0 : fragment.querySelectorAll("[" + attrName + "]").forEach(function (it) {
                 elements.add(it);
             });
         });
@@ -648,7 +711,7 @@ var EventManager = /** @class */ (function () {
         this.procAttr(childNodes, EventManager.normalAttrMapAttrName, function (it, attribute) {
             var map = new Map(JSON.parse(attribute));
             map.forEach(function (v, k) {
-                var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -667,7 +730,7 @@ var EventManager = /** @class */ (function () {
         this.procAttr(childNodes, EventManager.valueLinkAttrName, function (it, varName) {
             if (varName) {
                 var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
-                var mapScript_1 = it.getAttribute("".concat(EventManager.valueLinkAttrName, ":map"));
+                var mapScript_1 = it.getAttribute(EventManager.valueLinkAttrName + ":map");
                 // const inMapScript = it.getAttribute(`${valueLinkAttrName}:in-map`);
                 var bindObj_1 = obj;
                 if (ownerVariablePathName) {
@@ -678,7 +741,7 @@ var EventManager = /** @class */ (function () {
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript_1) {
-                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     getValue(setValue);
                     // 여기서 value가 먼저냐 value-link가 먼저냐 선을 정해야되는거네...
@@ -686,14 +749,14 @@ var EventManager = /** @class */ (function () {
                 else if (getValue) {
                     var setValue = getValue;
                     if (mapScript_1) {
-                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     it.value = setValue;
                 }
                 it.addEventListener('input', function (event) {
                     var value = it.value;
                     if (mapScript_1) {
-                        value = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, {
+                        value = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, {
                             __render: Object.freeze(__assign({ event: event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                         }));
                     }
@@ -713,7 +776,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (script) {
-                ScriptUtils.eval("".concat(_this.getBindScript(config), "; ").concat(script, " "), Object.assign(obj, {
+                ScriptUtils.eval(_this.getBindScript(config) + "; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze(__assign({ element: it, attribute: DomUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 }));
                 // console.log('onInit--->', obj, varName, it)
@@ -744,20 +807,20 @@ var EventManager = /** @class */ (function () {
             if (ownerVariablePathName) {
                 bindObj = ScriptUtils.evalReturn(ownerVariablePathName, obj);
             }
-            var mapScript = it.getAttribute("".concat(EventManager.valueLinkAttrName, ":map"));
+            var mapScript = it.getAttribute(EventManager.valueLinkAttrName + ":map");
             if (attribute && attribute === varName) {
                 var getValue = _this.getValue(obj, attribute, bindObj);
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript) {
-                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript), Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript, Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     getValue(setValue);
                 }
                 else { //  if (getValue !== undefined && getValue !== null)
                     var setValue = getValue;
                     if (mapScript) {
-                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript), Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript, Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     it.value = setValue;
                 }
@@ -770,7 +833,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -822,7 +885,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -851,7 +914,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -886,7 +949,7 @@ var EventManager = /** @class */ (function () {
                 var isUsing = EventManager.isUsingThisVar(v, varName);
                 // console.log('---isUsing--> varName:', varName, 'k:', k, 'v:', v, 'isUsing:', isUsing);
                 if (isUsing) {
-                    var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                    var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
                         __render: Object.freeze({
                             element: it,
                             attribute: DomUtils.getAttributeToObject(it)
@@ -906,15 +969,15 @@ var EventManager = /** @class */ (function () {
             var script = attribute;
             it.addEventListener(eventName, function (event) {
                 var filter = true;
-                var filterScript = it.getAttribute("".concat(attr, ":filter"));
+                var filterScript = it.getAttribute(attr + ":filter");
                 var thisTarget = Object.assign(obj, {
                     __render: Object.freeze(__assign({ event: event, element: it, target: event.target, range: Range.range, attribute: DomUtils.getAttributeToObject(it), router: config === null || config === void 0 ? void 0 : config.router, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 });
                 if (filterScript) {
-                    filter = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(filterScript), thisTarget);
+                    filter = ScriptUtils.eval(_this.getBindScript(config) + " return " + filterScript, thisTarget);
                 }
                 if (filter) {
-                    ScriptUtils.eval("".concat(_this.getBindScript(config), " ").concat(script, " "), thisTarget);
+                    ScriptUtils.eval(_this.getBindScript(config) + " " + script + " ", thisTarget);
                 }
             });
         });
@@ -937,7 +1000,7 @@ var EventManager = /** @class */ (function () {
                 });
                 bind.split(',').forEach(function (eventName) {
                     it.addEventListener(eventName.trim(), function (event) {
-                        ScriptUtils.eval("const $params = this.__render.params; ".concat(_this.getBindScript(config), "  ").concat(script_1, " "), Object.assign(obj, {
+                        ScriptUtils.eval("const $params = this.__render.params; " + _this.getBindScript(config) + "  " + script_1 + " ", Object.assign(obj, {
                             __render: Object.freeze(__assign({ event: event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj), params: params_1 }, config === null || config === void 0 ? void 0 : config.eventVariables))
                         }));
                     });
@@ -958,7 +1021,7 @@ var EventManager = /** @class */ (function () {
             if (it.nodeType === 1) {
                 var e = it;
                 sets.add(e);
-                e.querySelectorAll("[".concat(attrName, "]")).forEach(function (it) {
+                e.querySelectorAll("[" + attrName + "]").forEach(function (it) {
                     sets.add(it);
                 });
             }
@@ -981,7 +1044,7 @@ var EventManager = /** @class */ (function () {
     };
     EventManager.prototype.setValue = function (obj, name, value) {
         name = name.replaceAll('this.', 'this.this.');
-        ScriptUtils.eval("".concat(name, " = this.value;"), {
+        ScriptUtils.eval(name + " = this.value;", {
             this: obj,
             value: value
         });
@@ -995,7 +1058,7 @@ var EventManager = /** @class */ (function () {
             }
             EventManager.VARNAMES.forEach(function (it) {
                 // raws = raws!.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
-                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
+                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
             });
             var variablePaths = ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
             return variablePaths.has(varName);
@@ -1020,10 +1083,10 @@ var EventManager = /** @class */ (function () {
         if (config === null || config === void 0 ? void 0 : config.eventVariables) {
             var bindScript = Object.entries(config.eventVariables).filter(function (_a) {
                 var key = _a[0]; _a[1];
-                return !_this.bindScript.includes("const ".concat(key));
+                return !_this.bindScript.includes("const " + key);
             }).map(function (_a) {
                 var key = _a[0]; _a[1];
-                return "const ".concat(key, " = this.__render.").concat(key, ";");
+                return "const " + key + " = this.__render." + key + ";";
             }).join(';');
             return this.bindScript + '' + bindScript;
         }
@@ -1090,7 +1153,7 @@ var OperatorExecuter = /** @class */ (function () {
                         }
                         r = attrValue;
                         if (r && this.startingExecute) {
-                            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
+                            r = ScriptUtils.eval(" " + this.render.bindScript + "; return " + 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);
@@ -1110,8 +1173,10 @@ var OperatorExecuter = /** @class */ (function () {
 var DrPre = /** @class */ (function (_super) {
     __extends(DrPre, _super);
     function DrPre(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
+        return _this;
     }
     DrPre.prototype.execute = function (value) {
         return __awaiter(this, void 0, void 0, function () {
@@ -1160,7 +1225,7 @@ var Dr = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 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, {
+                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    const n = $element.cloneNode(true);\n                    var destIt = " + 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);
@@ -1181,8 +1246,10 @@ var Dr = /** @class */ (function (_super) {
 var DrIf = /** @class */ (function (_super) {
     __extends(DrIf, _super);
     function DrIf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrIf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1193,7 +1260,7 @@ var DrIf = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                keepgoing = ScriptUtils.eval("\n                ".concat(this.render.bindScript, "\n                ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', ";\n                return true;\n                "), Object.assign(this.source.obj, {
+                keepgoing = ScriptUtils.eval("\n                " + this.render.bindScript + "\n                " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                if ($rawset.data === (" + attr + ")) {\n                    return false;\n                }\n                $rawset.data = " + 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 = " + 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                " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + ";\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: 뭐지?? 지워야되는거 아닌가?
@@ -1245,7 +1312,7 @@ var DrThis = /** @class */ (function (_super) {
                             RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
                         }
                         this.rawSet.data = attr;
-                        return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis).concat(attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
+                        return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, "" + this.elementSource.attrs.drThis + (attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
                     case 1:
                         componentBody = _j.sent();
                         this.returnContainer.fag.append(componentBody);
@@ -1616,9 +1683,9 @@ var DrForm = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_c) {
                 RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
-                data = ScriptUtils.evalReturn("".concat(attr), this.source.obj);
+                data = ScriptUtils.evalReturn("" + attr, this.source.obj);
                 childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _a !== void 0 ? _a : '', this.source.obj);
+                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute(RawSet.DR_FORM_NAME + ":name")) !== null && _a !== void 0 ? _a : '', this.source.obj);
                 thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
                 // // 자기자신이 Input 대상일때
                 if (childs.length <= 0 && thisName) {
@@ -1631,32 +1698,32 @@ var DrForm = /** @class */ (function (_super) {
                 }
                 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 eventName = (_a = it.getAttribute(RawSet.DR_FORM_NAME + ":event")) !== null && _a !== void 0 ? _a : 'change';
+                    var validatorName = it.getAttribute(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');
+                    var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute(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, {
+                            ScriptUtils.eval("\n                                " + _this.render.bindScript + "\n                                const validator = typeof " + validatorName + " ==='function' ?  new  " + validatorName + "() : " + validatorName + ";\n                                " + attr + "['" + varpath + "'] = validator;\n                            ", Object.assign(_this.source.obj, {
                                 __render: Object.freeze(__assign({ drStripOption: _this.elementSource.attrs.drStripOption }, _this.render))
                             }));
                         }
-                        varpath = "".concat(attr, "['").concat(varpath, "']");
-                        var data_1 = ScriptUtils.evalReturn("".concat(varpath), _this.source.obj);
+                        varpath = attr + "['" + varpath + "']";
+                        var data_1 = ScriptUtils.evalReturn("" + 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 : '', ";"));
+                            it.setAttribute(attrEventName, varpath + ".setArrayValue($target, $target.value, $event); " + ((_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 : '', ";"));
+                            it.setAttribute(attrEventName, varpath + ".set($target.value, $target, $event); " + ((_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;"));
+                            it.setAttribute(attrEventName, varpath + " = $target.value;");
                         }
                     }
                 });
@@ -1681,7 +1748,7 @@ var DrInnerText = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval(" \n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '', "\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((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval(" \n                        " + this.render.bindScript + "\n                        const n = $element.cloneNode(true);  \n                        " + ((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '') + "\n                        n.innerText = " + 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                        " + ((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '') + "\n                    ", Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render))
                 }));
                 tempalte = this.source.config.window.document.createElement('template');
@@ -1709,7 +1776,7 @@ var DrInnerHTML = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '', "\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((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                        " + this.render.bindScript + "\n                        const n = $element.cloneNode(true);\n                        " + ((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '') + "\n                        n.innerHTML = " + 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                        " + ((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '') + "\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
                     ))
@@ -1730,8 +1797,10 @@ var DrInnerHTML = /** @class */ (function (_super) {
 var DrFor = /** @class */ (function (_super) {
     __extends(DrFor, _super);
     function DrFor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrFor.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1742,7 +1811,7 @@ var DrFor = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    for(" + attr + ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + 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                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    ", Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1763,8 +1832,10 @@ var DrFor = /** @class */ (function (_super) {
 var DrForOf = /** @class */ (function (_super) {
     __extends(DrForOf, _super);
     function DrForOf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrForOf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1775,7 +1846,7 @@ var DrForOf = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    var i = 0; \n                    const forOf = " + attr + ";\n                    const forOfStr = `" + 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('" + 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] = '" + 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                    " + ((_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, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
                     // eslint-disable-next-line no-use-before-define
                     ))
@@ -1799,8 +1870,10 @@ var DrForOf = /** @class */ (function (_super) {
 var DrAppender = /** @class */ (function (_super) {
     __extends(DrAppender, _super);
     function DrAppender(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrAppender.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1811,7 +1884,7 @@ var DrAppender = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    try{\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    }catch(e){}\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    try{\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '" + this.elementSource.attrs.drAppender + " && " + 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', '" + this.elementSource.attrs.drAppender + "[' + (" + this.elementSource.attrs.drAppender + ".length-1) + ']');\n                        n.setAttribute('dr-next', '" + this.elementSource.attrs.drAppender + ",' + " + this.elementSource.attrs.drAppender + ".length);\n                        ifWrap.append(n);\n                        this.__render.fag.append(ifWrap);\n                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\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
                     ))
@@ -1835,8 +1908,10 @@ var DrAppender = /** @class */ (function (_super) {
 var DrRepeat = /** @class */ (function (_super) {
     __extends(DrRepeat, _super);
     function DrRepeat(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrRepeat.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1847,7 +1922,7 @@ var DrRepeat = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    var i = 0; \n                    const repeat = " + attr + ";\n                    const repeatStr = `" + attr + "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = " + 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                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    ", Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1868,8 +1943,10 @@ var DrRepeat = /** @class */ (function (_super) {
 var DrTargetElement = /** @class */ (function (_super) {
     __extends(DrTargetElement, _super);
     function DrTargetElement(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrTargetElement.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -1893,7 +1970,7 @@ var DrTargetElement = /** @class */ (function (_super) {
                             if (detectAction_1 && render_1) {
                                 this.rawSet.detect = {
                                     action: function () {
-                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ".concat(detectAction_1, " ");
+                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  " + detectAction_1 + " ";
                                         ScriptUtils.eval(script, Object.assign(_this.source.obj, {
                                             __render: render_1
                                         }));
@@ -1923,8 +2000,10 @@ var DrTargetElement = /** @class */ (function (_super) {
 var DrTargetAttr = /** @class */ (function (_super) {
     __extends(DrTargetAttr, _super);
     function DrTargetAttr(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrTargetAttr.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -1978,8 +2057,10 @@ exports.RawSetType = void 0;
 var DrThisProperty = /** @class */ (function (_super) {
     __extends(DrThisProperty, _super);
     function DrThisProperty(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrThisProperty.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d, _e;
@@ -1998,7 +2079,7 @@ var DrThisProperty = /** @class */ (function (_super) {
                 // }
                 // await new Promise(resolve => setTimeout(resolve, 1000));
                 // console.log('!!!!!!!!!!!!!!', this.rawSet);
-                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 dictionary = ").concat(attr, ";\n                    const dictionaryKey = '").concat(dictionaryKey, "';\n                    const dictionaryStr = `").concat(attr, "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '') + "\n                    var i = 0; \n                    const dictionary = " + attr + ";\n                    const dictionaryKey = '" + dictionaryKey + "';\n                    const dictionaryStr = `" + attr + "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    " + ((_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))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -2024,7 +2105,7 @@ var DrThisProperty = /** @class */ (function (_super) {
             var cNode = _c[_i];
             var element = cNode.cloneNode(true);
             element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);
-            element.setAttribute(RawSet.DR_THIS_NAME, "this.".concat(fullPath));
+            element.setAttribute(RawSet.DR_THIS_NAME, "this." + fullPath);
             element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);
             // rawSet.point.end.after(element);
             var fg = config.window.document.createDocumentFragment();
@@ -2052,6 +2133,605 @@ exports.RawSetOperatorType = void 0;
     RawSetOperatorType["DR_THIS_PROPERTY"] = "this-property";
 })(exports.RawSetOperatorType || (exports.RawSetOperatorType = {}));
 
+// http://www.w3.org/TR/CSS21/grammar.html
+// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
+var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
+function cssParse (css, options) {
+  options = options || {};
+  /**
+   * Positional.
+   */
+
+  var lineno = 1;
+  var column = 1;
+  /**
+   * Update lineno and column based on `str`.
+   */
+
+  function updatePosition(str) {
+    var lines = str.match(/\n/g);
+    if (lines) lineno += lines.length;
+    var i = str.lastIndexOf('\n');
+    column = ~i ? str.length - i : column + str.length;
+  }
+  /**
+   * Mark position and patch `node.position`.
+   */
+
+
+  function position() {
+    var start = {
+      line: lineno,
+      column: column
+    };
+    return function (node) {
+      node.position = new Position(start);
+      whitespace();
+      return node;
+    };
+  }
+  /**
+   * Store position information for a node
+   */
+
+
+  function Position(start) {
+    this.start = start;
+    this.end = {
+      line: lineno,
+      column: column
+    };
+    this.source = options.source;
+  }
+  /**
+   * Non-enumerable source string
+   */
+
+
+  Position.prototype.content = css;
+  /**
+   * Error `msg`.
+   */
+
+  var errorsList = [];
+
+  function error(msg) {
+    var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
+    err.reason = msg;
+    err.filename = options.source;
+    err.line = lineno;
+    err.column = column;
+    err.source = css;
+
+    if (options.silent) {
+      errorsList.push(err);
+    } else {
+      throw err;
+    }
+  }
+  /**
+   * Parse stylesheet.
+   */
+
+
+  function stylesheet() {
+    var rulesList = rules();
+    return {
+      type: 'stylesheet',
+      stylesheet: {
+        source: options.source,
+        rules: rulesList,
+        parsingErrors: errorsList
+      }
+    };
+  }
+  /**
+   * Opening brace.
+   */
+
+
+  function open() {
+    return match(/^{\s*/);
+  }
+  /**
+   * Closing brace.
+   */
+
+
+  function close() {
+    return match(/^}/);
+  }
+  /**
+   * Parse ruleset.
+   */
+
+
+  function rules() {
+    var node;
+    var rules = [];
+    whitespace();
+    comments(rules);
+
+    while (css.length && css.charAt(0) != '}' && (node = atrule() || rule())) {
+      if (node !== false) {
+        rules.push(node);
+        comments(rules);
+      }
+    }
+
+    return rules;
+  }
+  /**
+   * Match `re` and return captures.
+   */
+
+
+  function match(re) {
+    var m = re.exec(css);
+    if (!m) return;
+    var str = m[0];
+    updatePosition(str);
+    css = css.slice(str.length);
+    return m;
+  }
+  /**
+   * Parse whitespace.
+   */
+
+
+  function whitespace() {
+    match(/^\s*/);
+  }
+  /**
+   * Parse comments;
+   */
+
+
+  function comments(rules) {
+    var c;
+    rules = rules || [];
+
+    while (c = comment()) {
+      if (c !== false) {
+        rules.push(c);
+      }
+    }
+
+    return rules;
+  }
+  /**
+   * Parse comment.
+   */
+
+
+  function comment() {
+    var pos = position();
+    if ('/' != css.charAt(0) || '*' != css.charAt(1)) return;
+    var i = 2;
+
+    while ("" != css.charAt(i) && ('*' != css.charAt(i) || '/' != css.charAt(i + 1))) ++i;
+
+    i += 2;
+
+    if ("" === css.charAt(i - 1)) {
+      return error('End of comment missing');
+    }
+
+    var str = css.slice(2, i - 2);
+    column += 2;
+    updatePosition(str);
+    css = css.slice(i);
+    column += 2;
+    return pos({
+      type: 'comment',
+      comment: str
+    });
+  }
+  /**
+   * Parse selector.
+   */
+
+
+  function selector() {
+    var m = match(/^([^{]+)/);
+    if (!m) return;
+    /* @fix Remove all comments from selectors
+     * http://ostermiller.org/findcomment.html */
+
+    return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function (m) {
+      return m.replace(/,/g, '\u200C');
+    }).split(/\s*(?![^(]*\)),\s*/).map(function (s) {
+      return s.replace(/\u200C/g, ',');
+    });
+  }
+  /**
+   * Parse declaration.
+   */
+
+
+  function declaration() {
+    var pos = position(); // prop
+
+    var prop = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
+    if (!prop) return;
+    prop = trim(prop[0]); // :
+
+    if (!match(/^:\s*/)) return error("property missing ':'"); // val
+
+    var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);
+    var ret = pos({
+      type: 'declaration',
+      property: prop.replace(commentre, ''),
+      value: val ? trim(val[0]).replace(commentre, '') : ''
+    }); // ;
+
+    match(/^[;\s]*/);
+    return ret;
+  }
+  /**
+   * Parse declarations.
+   */
+
+
+  function declarations() {
+    var decls = [];
+    if (!open()) return error("missing '{'");
+    comments(decls); // declarations
+
+    var decl;
+
+    while (decl = declaration()) {
+      if (decl !== false) {
+        decls.push(decl);
+        comments(decls);
+      }
+    }
+
+    if (!close()) return error("missing '}'");
+    return decls;
+  }
+  /**
+   * Parse keyframe.
+   */
+
+
+  function keyframe() {
+    var m;
+    var vals = [];
+    var pos = position();
+
+    while (m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)) {
+      vals.push(m[1]);
+      match(/^,\s*/);
+    }
+
+    if (!vals.length) return;
+    return pos({
+      type: 'keyframe',
+      values: vals,
+      declarations: declarations()
+    });
+  }
+  /**
+   * Parse keyframes.
+   */
+
+
+  function atkeyframes() {
+    var pos = position();
+    var m = match(/^@([-\w]+)?keyframes\s*/);
+    if (!m) return;
+    var vendor = m[1]; // identifier
+
+    var m = match(/^([-\w]+)\s*/);
+    if (!m) return error("@keyframes missing name");
+    var name = m[1];
+    if (!open()) return error("@keyframes missing '{'");
+    var frame;
+    var frames = comments();
+
+    while (frame = keyframe()) {
+      frames.push(frame);
+      frames = frames.concat(comments());
+    }
+
+    if (!close()) return error("@keyframes missing '}'");
+    return pos({
+      type: 'keyframes',
+      name: name,
+      vendor: vendor,
+      keyframes: frames
+    });
+  }
+  /**
+   * Parse supports.
+   */
+
+
+  function atsupports() {
+    var pos = position();
+    var m = match(/^@supports *([^{]+)/);
+    if (!m) return;
+    var supports = trim(m[1]);
+    if (!open()) return error("@supports missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@supports missing '}'");
+    return pos({
+      type: 'supports',
+      supports: supports,
+      rules: style
+    });
+  }
+  /**
+   * Parse host.
+   */
+
+
+  function athost() {
+    var pos = position();
+    var m = match(/^@host\s*/);
+    if (!m) return;
+    if (!open()) return error("@host missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@host missing '}'");
+    return pos({
+      type: 'host',
+      rules: style
+    });
+  }
+  /**
+   * Parse media.
+   */
+
+
+  function atmedia() {
+    var pos = position();
+    var m = match(/^@media *([^{]+)/);
+    if (!m) return;
+    var media = trim(m[1]);
+    if (!open()) return error("@media missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@media missing '}'");
+    return pos({
+      type: 'media',
+      media: media,
+      rules: style
+    });
+  }
+  /**
+   * Parse custom-media.
+   */
+
+
+  function atcustommedia() {
+    var pos = position();
+    var m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
+    if (!m) return;
+    return pos({
+      type: 'custom-media',
+      name: trim(m[1]),
+      media: trim(m[2])
+    });
+  }
+  /**
+   * Parse paged media.
+   */
+
+
+  function atpage() {
+    var pos = position();
+    var m = match(/^@page */);
+    if (!m) return;
+    var sel = selector() || [];
+    if (!open()) return error("@page missing '{'");
+    var decls = comments(); // declarations
+
+    var decl;
+
+    while (decl = declaration()) {
+      decls.push(decl);
+      decls = decls.concat(comments());
+    }
+
+    if (!close()) return error("@page missing '}'");
+    return pos({
+      type: 'page',
+      selectors: sel,
+      declarations: decls
+    });
+  }
+  /**
+   * Parse document.
+   */
+
+
+  function atdocument() {
+    var pos = position();
+    var m = match(/^@([-\w]+)?document *([^{]+)/);
+    if (!m) return;
+    var vendor = trim(m[1]);
+    var doc = trim(m[2]);
+    if (!open()) return error("@document missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@document missing '}'");
+    return pos({
+      type: 'document',
+      document: doc,
+      vendor: vendor,
+      rules: style
+    });
+  }
+  /**
+   * Parse font-face.
+   */
+
+
+  function atfontface() {
+    var pos = position();
+    var m = match(/^@font-face\s*/);
+    if (!m) return;
+    if (!open()) return error("@font-face missing '{'");
+    var decls = comments(); // declarations
+
+    var decl;
+
+    while (decl = declaration()) {
+      decls.push(decl);
+      decls = decls.concat(comments());
+    }
+
+    if (!close()) return error("@font-face missing '}'");
+    return pos({
+      type: 'font-face',
+      declarations: decls
+    });
+  }
+  /**
+   * Parse import
+   */
+
+
+  var atimport = _compileAtrule('import');
+  /**
+   * Parse charset
+   */
+
+
+  var atcharset = _compileAtrule('charset');
+  /**
+   * Parse namespace
+   */
+
+
+  var atnamespace = _compileAtrule('namespace');
+  /**
+   * Parse non-block at-rules
+   */
+
+
+  function _compileAtrule(name) {
+    var re = new RegExp('^@' + name + '\\s*([^;]+);');
+    return function () {
+      var pos = position();
+      var m = match(re);
+      if (!m) return;
+      var ret = {
+        type: name
+      };
+      ret[name] = m[1].trim();
+      return pos(ret);
+    };
+  }
+  /**
+   * Parse at rule.
+   */
+
+
+  function atrule() {
+    if (css[0] != '@') return;
+    return atkeyframes() || atmedia() || atcustommedia() || atsupports() || atimport() || atcharset() || atnamespace() || atdocument() || atpage() || athost() || atfontface();
+  }
+  /**
+   * Parse rule.
+   */
+
+
+  function rule() {
+    var pos = position();
+    var sel = selector();
+    if (!sel) return error('selector missing');
+    comments();
+    return pos({
+      type: 'rule',
+      selectors: sel,
+      declarations: declarations()
+    });
+  }
+
+  return addParent(stylesheet());
+}
+/**
+ * Trim `str`.
+ */
+
+function trim(str) {
+  return str ? str.replace(/^\s+|\s+$/g, '') : '';
+}
+/**
+ * Adds non-enumerable parent node reference to each node.
+ */
+
+
+function addParent(obj, parent) {
+  var isNode = obj && typeof obj.type === 'string';
+  var childParent = isNode ? obj : parent;
+
+  for (var k in obj) {
+    var value = obj[k];
+
+    if (Array.isArray(value)) {
+      value.forEach(function (v) {
+        addParent(v, childParent);
+      });
+    } else if (value && typeof value === 'object') {
+      addParent(value, childParent);
+    }
+  }
+
+  if (isNode) {
+    Object.defineProperty(obj, 'parent', {
+      configurable: true,
+      writable: true,
+      enumerable: false,
+      value: parent || null
+    });
+  }
+
+  return obj;
+}
+
+/**
+ * Module dependencies.
+ */
+var Compressed = require('./compress');
+
+var Identity = require('./identity');
+/**
+ * Stringfy the given AST `node`.
+ *
+ * Options:
+ *
+ *  - `compress` space-optimized output
+ *  - `sourcemap` return an object with `.code` and `.map`
+ *
+ * @param {Object} node
+ * @param {Object} [options]
+ * @return {String}
+ * @api public
+ */
+
+
+function cssStringify (node, options) {
+  options = options || {};
+  var compiler = options.compress ? new Compressed(options) : new Identity(options); // source maps
+  // if (options.sourcemap) {
+  //   var sourcemaps = require('./source-map-support');
+  //   sourcemaps(compiler);
+  //
+  //   var code = compiler.compile(node);
+  //   compiler.applySourceMaps();
+  //
+  //   var map = options.sourcemap === 'generator'
+  //     ? compiler.map
+  //     : compiler.map.toJSON();
+  //
+  //   return { code: code, map: map };
+  // }
+
+  var code = compiler.compile(node);
+  return code;
+}
+
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -2077,7 +2757,7 @@ var RawSet = /** @class */ (function () {
             var _a, _b, _c;
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
+                script = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
                 // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -2106,11 +2786,11 @@ var RawSet = /** @class */ (function () {
                 EventManager.VARNAMES.forEach(function (it) {
                     // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
                     // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
-                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
                     // console.log('scripts-->', script)
                 });
                 // console.log('----------', script);
-                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___".concat(EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
             }
         });
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
@@ -2147,7 +2827,7 @@ var RawSet = /** @class */ (function () {
                             range: Range.range,
                             element: cNode,
                             attribute: attribute,
-                            bindScript: "\n                    const ".concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                    const ").concat(EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                    const ").concat(EventManager.ELEMENT_VARNAME, " = this.__render.element;\n                    const ").concat(EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n                    const ").concat(EventManager.RANGE_VARNAME, " = this.__render.range;\n                    const ").concat(EventManager.ROUTER_VARNAME, " = this.__render.router;\n            ")
+                            bindScript: "\n                    const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                    const " + EventManager.ELEMENT_VARNAME + " = this.__render.element;\n                    const " + EventManager.ATTRIBUTE_VARNAME + " = this.__render.attribute;\n                    const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n                    const " + EventManager.ROUTER_VARNAME + " = this.__render.router;\n            "
                             // eslint-disable-next-line no-use-before-define
                         });
                         fag = config.window.document.createDocumentFragment();
@@ -2156,13 +2836,13 @@ var RawSet = /** @class */ (function () {
                         runText = RawSet.exporesionGrouops(textContent)[0][1];
                         newNode = void 0;
                         if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                            r = ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
                             template = config.window.document.createElement('template');
                             template.innerHTML = r;
                             newNode = template.content;
                         }
                         else {
-                            r = ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval(__render.bindScript + "  return " + runText, Object.assign(obj, { __render: __render }));
                             newNode = config.window.document.createTextNode(r);
                         }
                         (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
@@ -2247,11 +2927,12 @@ var RawSet = /** @class */ (function () {
                                     fag: genNode,
                                     scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
                                 });
-                                ScriptUtils.eval("\n                const ".concat(EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption), Object.assign(obj, { __render: render }));
+                                ScriptUtils.eval("\n                const " + EventManager.FAG_VARNAME + " = this.__render.fag;\n                const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                " + it.drCompleteOption, Object.assign(obj, { __render: render }));
                             }
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-                        RawSet.generateStyleSheetsLocal();
+                        // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
+                        // RawSet.generateStyleSheetsLocal(config);
                         for (_1 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _1 < onThisComponentSetCallBacks_1.length; _1++) {
                             it_1 = onThisComponentSetCallBacks_1[_1];
                             (_q = (_p = it_1.obj) === null || _p === void 0 ? void 0 : _p.onInitRender) === null || _q === void 0 ? void 0 : _q.call(_p);
@@ -2262,7 +2943,7 @@ var RawSet = /** @class */ (function () {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
-                                    script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
+                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
                                     param = ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: it_2.targetElement.__render
                                     }));
@@ -2301,8 +2982,13 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    RawSet.generateStyleSheetsLocal = function () {
-        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+    /**
+     * @deprecated
+     * @param config
+     */
+    RawSet.generateStyleSheetsLocal = function (config) {
+        // console.log('config.window.document.styleSheets---------', config.window.document.styleSheets);
+        Array.from(config.window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
             var _a;
             var styleElement = it.ownerNode;
             var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
@@ -2319,8 +3005,8 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
-        var start = "#".concat(id, "-start");
-        var end = "#".concat(id, "-end");
+        var start = "#" + id + "-start";
+        var end = "#" + id + "-end";
         if (cssRule.constructor.name === 'CSSStyleRule') {
             var rule = cssRule;
             // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
@@ -2329,14 +3015,14 @@ var RawSet = /** @class */ (function () {
             if (!rule.selectorText.startsWith(':root')) {
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
+                var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
                 if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
+                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
                     //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
                 }
                 else {
-                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
-                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
+                    var divText = start + " ~ " + rule.selectorText + ":not(" + start + " ~ " + end + " ~ *)";
+                    rule.selectorText = selectorText + " " + rule.selectorText + ", " + divText;
                     // rule.selectorText = `${selectorText} ${rule.selectorText}`;
                     //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
                 }
@@ -2351,13 +3037,40 @@ var RawSet = /** @class */ (function () {
         }
     };
     // 중요 스타일 적용 부분
-    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+    RawSet.generateStyleTransform = function (styleBody, componentKey, styleTagWrap) {
+        var _a;
         if (styleTagWrap === void 0) { styleTagWrap = true; }
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
+        var start = "#" + componentKey + "-start";
+        var end = "#" + componentKey + "-end";
+        var before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
+            return "var(--domrender-" + data[0] + ")";
+        });
+        var cssobject = cssParse(before);
+        (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
+            var _a, _b;
+            var isRoot = (_a = rule.selectors) === null || _a === void 0 ? void 0 : _a.find(function (it) { return it.startsWith(':root'); });
+            if (rule.type === 'rule' && !isRoot) { //  && !!isRoot
+                rule.selectors = (_b = rule.selectors) === null || _b === void 0 ? void 0 : _b.map(function (sit) {
+                    var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
+                    if (sit.startsWith('.')) {
+                        return "" + selectorText + sit + ", " + selectorText + " " + sit;
+                    }
+                    else {
+                        var divText = start + " ~ " + sit + ":not(" + start + " ~ " + end + " ~ *)";
+                        return selectorText + " " + sit + ", " + divText;
+                    }
+                });
+            }
+        });
+        var stringify = cssStringify(cssobject);
+        var after = StringUtils.regexExecArrayReplace(stringify, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, function (data) {
+            return data[2];
+        });
         if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
+            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
         }
         return styleBody;
     };
@@ -2378,13 +3091,13 @@ var RawSet = /** @class */ (function () {
         var data = element.getAttribute(RawSet.DR_APPENDER_NAME);
         // if (data && !/\[[0-9]+\]/g.test(data)) {
         if (data && !/\[.+\]/g.test(data)) {
-            var currentIndex = ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
+            var currentIndex = ScriptUtils.evalReturn(data + "?.length -1", obj);
             // console.log('------?', currentIndex)
             // if (currentIndex === undefined || isNaN(currentIndex)) {
             //     return undefined;
             // }
             // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = "".concat(data, "[").concat(currentIndex, "]");
+            data = data + "[" + currentIndex + "]";
             element.setAttribute(RawSet.DR_APPENDER_NAME, data);
             // element.setAttribute(RawSet.DR_IF_NAME, data);
             // element.setAttribute('dr-id', data);
@@ -2406,9 +3119,8 @@ var RawSet = /** @class */ (function () {
     // 중요 important
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        // console.log('start==========')
+        // const NodeFilter = (config.window as any).NodeFilter;
         var thisVariableName = element.__domrender_this_variable_name;
-        // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
@@ -2529,7 +3241,7 @@ var RawSet = /** @class */ (function () {
             var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
-            start.setAttribute('id', "".concat(id, "-start"));
+            start.setAttribute('id', id + "-start");
             var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
             var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
             if (thisPropertyType) {
@@ -2539,19 +3251,19 @@ var RawSet = /** @class */ (function () {
                 element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
                 start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', "".concat(id, "-end"));
+            end.setAttribute('id', id + "-end");
             return { start: start, end: end };
         }
         else if (type === exports.RawSetType.STYLE_TEXT) {
             return {
-                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
-                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
+                start: config.window.document.createTextNode("/*start text " + id + "*/"),
+                end: config.window.document.createTextNode("/*end text " + id + "*/")
             };
         }
         else { // text
             return {
-                start: config.window.document.createComment("start text ".concat(id)),
-                end: config.window.document.createComment("end text ".concat(id))
+                start: config.window.document.createComment("start text " + id),
+                end: config.window.document.createComment("end text " + id)
             };
         }
     };
@@ -2598,13 +3310,13 @@ var RawSet = /** @class */ (function () {
     RawSet.drItOtherEncoding = function (element) {
         var random = RandomUtils.uuid();
         var regex = /#it#/g;
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(regex, random);
         });
         return random;
     };
     RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
         });
     };
@@ -2617,35 +3329,35 @@ var RawSet = /** @class */ (function () {
         // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
         //     let message = it.innerHTML;
         // })
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             var message = it.innerHTML;
             StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
                 var _a;
-                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
             });
             it.innerHTML = message;
         });
         var message = element.innerHTML;
         StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
             var _a;
-            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
         });
         element.innerHTML = message;
         return thisRandom;
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
     };
     RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
+        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
             var _a;
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
@@ -2683,7 +3395,7 @@ var RawSet = /** @class */ (function () {
             };
         });
         // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
             });
@@ -2694,7 +3406,7 @@ var RawSet = /** @class */ (function () {
         return vars;
     };
     RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
             });
@@ -2756,7 +3468,7 @@ var RawSet = /** @class */ (function () {
                         renderScript = '';
                         createParam = [];
                         if (onCreate) {
-                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                            script = renderScript + " return " + onCreate + " ";
                             createParam = ScriptUtils.eval(script, obj);
                             if (!Array.isArray(createParam)) {
                                 createParam = [createParam];
@@ -2765,14 +3477,16 @@ var RawSet = /** @class */ (function () {
                         (_e = (_d = set.obj) === null || _d === void 0 ? void 0 : _d.onCreateRender) === null || _e === void 0 ? void 0 : _e.call.apply(_e, __spreadArray([_d], createParam, false));
                         oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                         if (oninit) {
-                            script = "".concat(renderScript, "  ").concat(oninit, " ");
+                            script = renderScript + "  " + oninit + " ";
                             ScriptUtils.eval(script, obj);
                         }
                         _m.label = 12;
                     case 12:
-                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
+                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[" + it + "]"; }).join(',')).forEach(function (it) {
                             it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
                         });
+                        // attribute
+                        n.getAttributeNames().forEach(function (it) { return n.setAttribute(it, n.getAttribute(it).replace(/#this#/g, drThis)); });
                         thisRandom = this.drThisEncoding(n, drThis);
                         vars = this.drVarEncoding(n, drVarOption);
                         this.drVarDecoding(n, vars);
@@ -2822,10 +3536,11 @@ var RawSet = /** @class */ (function () {
             callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return __awaiter(this, void 0, void 0, function () {
-                    var stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, componentKey, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
+                    var componentKey, stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
                     return __generator(this, function (_p) {
                         switch (_p.label) {
                             case 0:
+                                componentKey = rawSet.uuid;
                                 stylePromises = [];
                                 if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
                                 return [4 /*yield*/, fetch(this.template.substring(6))];
@@ -2878,7 +3593,6 @@ var RawSet = /** @class */ (function () {
                                     obj.__domrender_components = {};
                                 }
                                 domrenderComponents = obj.__domrender_components;
-                                componentKey = rawSet.uuid;
                                 attribute = DomUtils.getAttributeToObject(element);
                                 renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                                 render = Object.freeze({
@@ -2896,7 +3610,7 @@ var RawSet = /** @class */ (function () {
                                 constructorParam = [];
                                 // dr-constructor
                                 if (constructor) {
-                                    script = "".concat(renderScript, " return ").concat(constructor, " ");
+                                    script = renderScript + " return " + constructor + " ";
                                     param = (_b = ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
                                     if (!Array.isArray(param)) {
                                         param = [param];
@@ -2908,7 +3622,7 @@ var RawSet = /** @class */ (function () {
                                 instance = domrenderComponents[componentKey];
                                 i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new DomRenderFinalProxy()));
                                 i.thisVariableName = rawSet.point.thisVariableName;
-                                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
+                                i.thisFullVariableName = "this.__domrender_components." + componentKey;
                                 i.componentKey = componentKey;
                                 i.rawSet = rawSet;
                                 i.attribute = attribute;
@@ -2923,7 +3637,7 @@ var RawSet = /** @class */ (function () {
                                 normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
                                 if (instance.onChangeAttrRender && normalAttrMap) {
                                     new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
-                                        var script = "".concat(renderScript, " return ").concat(value, " ");
+                                        var script = renderScript + " return " + value + " ";
                                         var cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                         // element.setAttribute(key, cval);
                                         instance.onChangeAttrRender(key, cval);
@@ -2933,7 +3647,7 @@ var RawSet = /** @class */ (function () {
                                 this.__render = render;
                                 createParam = [];
                                 if (onCreate) {
-                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                                    script = renderScript + " return " + onCreate + " ";
                                     createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                     if (!Array.isArray(createParam)) {
                                         createParam = [createParam];
@@ -2949,20 +3663,20 @@ var RawSet = /** @class */ (function () {
                                     innerHTMLThisRandom = RandomUtils.uuid();
                                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                                     // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
+                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
                                 }
                                 // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
                                 oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                                 if (oninit) {
-                                    script = "".concat(renderScript, "  ").concat(oninit, " ");
+                                    script = renderScript + "  " + oninit + " ";
                                     ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: render
                                     }));
                                 }
                                 style = RawSet.generateStyleTransform(this.styles, componentKey, true);
                                 element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config)];
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components." + componentKey, '', true, obj, config)];
                             case 12:
                                 data = _p.sent();
                                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -3093,9 +3807,9 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.run = function (objProxy) {
         var _this = this;
-        var _a;
+        var _a, _b;
         this._domRender_proxy = objProxy;
-        (_a = objProxy === null || objProxy === void 0 ? void 0 : objProxy.onProxyDomRender) === null || _a === void 0 ? void 0 : _a.call(objProxy, this.config);
+        (_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
         var obj = objProxy._DomRender_origin;
         if (obj) {
             Object.keys(obj).forEach(function (it) {
@@ -3121,7 +3835,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
         var createParam = [];
         if (onCreate) {
@@ -3131,7 +3845,6 @@ var DomRenderProxy = /** @class */ (function () {
             }
         }
         (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
-        (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
         var rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
@@ -3210,11 +3923,11 @@ var DomRenderProxy = /** @class */ (function () {
                                         new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                                             var _a;
                                             // it?.data.onChangeAttrRender(k, null, v);
-                                            var isUsing = EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
+                                            var isUsing = EventManager.isUsingThisVar(v, "this." + fullPathStr);
                                             if (isUsing) {
                                                 var render = it_1.fragment.render;
                                                 // console.log('render-->', (it.fragment as any).render)
-                                                var script = "".concat(render.renderScript, " return ").concat(v, " ");
+                                                var script = render.renderScript + " return " + v + " ";
                                                 var cval = ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
                                                 it_1.data.onChangeAttrRender(k, cval);
                                             }
@@ -3286,7 +3999,7 @@ var DomRenderProxy = /** @class */ (function () {
             // const firstPathStr = paths.slice(1).reverse().join('.');
             var strings = paths.reverse();
             // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
-            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
+            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('').slice(1);
             // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
             if (lastDoneExecute) {
                 // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
@@ -3295,7 +4008,7 @@ var DomRenderProxy = /** @class */ (function () {
                 // }
                 var iterable_1 = this._rawSets.get(fullPathStr_1);
                 // array check
-                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
+                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('');
                 var last_1 = strings[strings.length - 1];
                 var data_1 = ScriptUtils.evalReturn('this' + front_1, this._domRender_proxy);
                 // console.log('-------!!!!!', fullPathStr, iterable, data, front, last);
@@ -3350,14 +4063,12 @@ var DomRenderProxy = /** @class */ (function () {
                         return _this.render(Array.from(iterable_1), fullPathStr_1);
                     }
                 }).then(function (it) {
-                    console.log('target1------->,', it);
                     _this._targets.forEach(function (it) {
-                        console.log('target2------->,', it);
                         // return;
                         if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
                             var targets = eventManager.findAttrElements(it, _this.config);
                             // console.log('------>', targets);
-                            eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
+                            eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1, _this.config);
                         }
                     });
                 });
@@ -3367,7 +4078,7 @@ var DomRenderProxy = /** @class */ (function () {
         return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         // console.log('set-->', p, value, target, receiver);
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
@@ -3389,12 +4100,12 @@ var DomRenderProxy = /** @class */ (function () {
         }
         // console.log('full path:', fullPath);
         if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnSets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-            (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, value, fullPath);
+            (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         // console.log('get-->', target, p, receiver);
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
@@ -3425,7 +4136,7 @@ var DomRenderProxy = /** @class */ (function () {
                 it_2 = it_2._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-                (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnGet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, it_2, this.root([p], it_2, false));
+                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
             }
             return it_2;
         }
@@ -3541,7 +4252,7 @@ var Router = /** @class */ (function () {
         var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___".concat(EventManager.ROUTER_VARNAME);
+            var key = "___" + EventManager.ROUTER_VARNAME;
             proxy.render(key);
         }
         this.attachCallbacks.forEach(function (it) {
@@ -3968,7 +4679,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -3995,10 +4706,7 @@ var DomRender = /** @class */ (function () {
         else if (config.routerType === 'hash') {
             config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter(robj, config.window);
         }
-        else { // default
-            config.routerType = 'hash';
-            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter(robj, config.window);
-        }
+        else ;
         domRender.run(robj);
         return robj;
     };
@@ -4133,21 +4841,6 @@ var CheckedValidator = /** @class */ (function (_super) {
     return CheckedValidator;
 }(Validator));
 
-var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsCheckedValidatorArray, _super);
-    function CountEqualsCheckedValidatorArray(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;
-    }
-    CountEqualsCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
-    };
-    return CountEqualsCheckedValidatorArray;
-}(ValidatorArray));
-
 var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsUnCheckedValidatorArray, _super);
     function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4163,34 +4856,34 @@ var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(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;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.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 CountGreaterThanEqualsCheckedValidatorArray;
+    return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsCheckedValidatorArray, _super);
+    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
     };
-    return CountGreaterThanEqualsUnCheckedValidatorArray;
+    return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4208,19 +4901,34 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+    CountGreaterThanEqualsUnCheckedValidatorArray.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 CountGreaterThanCheckedValidatorArray;
+    return CountGreaterThanEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
+
+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 CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4238,20 +4946,6 @@ var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanCheckedValidatorArray;
 }(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;
-        var value = this.value;
-        return value === undefined || value === null || ((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) <= 0;
-    };
-    return EmptyValidator;
-}(Validator));
-
 var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountLessThanUnCheckedValidatorArray, _super);
     function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4267,20 +4961,19 @@ var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+    EmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
     };
-    return CountUnCheckedValidatorArray;
-}(ValidatorArray));
+    return EmptyValidator;
+}(Validator));
 
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
@@ -4304,35 +4997,6 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-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()); });
-    };
-    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 IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(IncludeCheckedValidatorArray, _super);
     function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -4373,119 +5037,122 @@ var FormValidator = /** @class */ (function (_super) {
     return FormValidator;
 }(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;
-        var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) > 0;
-    };
-    return NotEmptyValidator;
-}(Validator));
-
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+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.count = count;
+        _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;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
+    MultipleValidator.prototype.changeValue = function (value) {
+        var _this = this;
+        this.validators.forEach(function (it) { return it.set(_this.value, _this.getTarget(), _this.getEvent()); });
     };
-    return CountLessThanEqualsCheckedValidatorArray;
-}(ValidatorArray));
+    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 CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return CountLessThanEqualsUnCheckedValidatorArray;
+    return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var NotRegExpTestValidator = /** @class */ (function (_super) {
-    __extends(NotRegExpTestValidator, _super);
-    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
+var RegExpTestValidator = /** @class */ (function (_super) {
+    __extends(RegExpTestValidator, _super);
+    function RegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    NotRegExpTestValidator.prototype.valid = function () {
+    RegExpTestValidator.prototype.valid = function () {
         var _a;
         var value = this.value;
         var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
+        // console.log('regexp-->', value, this.regexp, regExp.test(value))
         if (value) {
-            return !regExp.test(value);
+            return regExp.test(value);
         }
         else {
-            return true;
+            return false;
         }
     };
-    return NotRegExpTestValidator;
+    return RegExpTestValidator;
 }(Validator));
 
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
+var RequiredValidator = /** @class */ (function (_super) {
+    __extends(RequiredValidator, _super);
+    function RequiredValidator(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;
+    RequiredValidator.prototype.valid = function () {
+        var value = this.value;
+        // console.log('required', value, value !== undefined && value !== null)
+        return value !== undefined && value !== null;
     };
-    return PassValidator;
+    return RequiredValidator;
 }(Validator));
 
-var RegExpTestValidator = /** @class */ (function (_super) {
-    __extends(RegExpTestValidator, _super);
-    function RegExpTestValidator(regexp, value, target, event, autoValid) {
+var NotRegExpTestValidator = /** @class */ (function (_super) {
+    __extends(NotRegExpTestValidator, _super);
+    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    RegExpTestValidator.prototype.valid = function () {
+    NotRegExpTestValidator.prototype.valid = function () {
         var _a;
         var value = this.value;
         var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        // console.log('regexp-->', value, this.regexp, regExp.test(value))
         if (value) {
-            return regExp.test(value);
+            return !regExp.test(value);
         }
         else {
-            return false;
+            return true;
         }
     };
-    return RegExpTestValidator;
+    return NotRegExpTestValidator;
 }(Validator));
 
-var UnCheckedValidator = /** @class */ (function (_super) {
-    __extends(UnCheckedValidator, _super);
-    function UnCheckedValidator(value, target, event, autoValid) {
+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;
     }
-    UnCheckedValidator.prototype.valid = function () {
+    NotEmptyValidator.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);
+        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 UnCheckedValidator;
+    return NotEmptyValidator;
 }(Validator));
 
 var ValidMultipleValidator = /** @class */ (function (_super) {
@@ -4503,18 +5170,17 @@ var ValidMultipleValidator = /** @class */ (function (_super) {
     return ValidMultipleValidator;
 }(MultipleValidator));
 
-var RequiredValidator = /** @class */ (function (_super) {
-    __extends(RequiredValidator, _super);
-    function RequiredValidator(value, target, event, autoValid) {
+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;
     }
-    RequiredValidator.prototype.valid = function () {
-        var value = this.value;
-        // console.log('required', value, value !== undefined && value !== null)
-        return value !== undefined && value !== null;
+    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 RequiredValidator;
+    return UnCheckedValidator;
 }(Validator));
 
 var ValidValidator = /** @class */ (function (_super) {
@@ -4545,6 +5211,20 @@ var ValidValidatorArray = /** @class */ (function (_super) {
     return ValidValidatorArray;
 }(ValidatorArray));
 
+var ValueEqualsValidator = /** @class */ (function (_super) {
+    __extends(ValueEqualsValidator, _super);
+    function ValueEqualsValidator(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;
+    }
+    ValueEqualsValidator.prototype.valid = function () {
+        return this.value === this.equalsValue;
+    };
+    return ValueEqualsValidator;
+}(Validator));
+
 var ValueNotEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueNotEqualsValidator, _super);
     function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -4559,41 +5239,47 @@ var ValueNotEqualsValidator = /** @class */ (function (_super) {
     return ValueNotEqualsValidator;
 }(Validator));
 
-var ValueEqualsValidator = /** @class */ (function (_super) {
-    __extends(ValueEqualsValidator, _super);
-    function ValueEqualsValidator(equalsValue, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.equalsValue = equalsValue;
+        _this.count = count;
         return _this;
     }
-    ValueEqualsValidator.prototype.valid = function () {
-        return this.value === this.equalsValue;
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    return ValueEqualsValidator;
-}(Validator));
+    return CountLessThanEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
 
-var ClipBoardUtils = /** @class */ (function () {
-    function ClipBoardUtils() {
+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;
     }
-    ClipBoardUtils.readText = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.readText();
-    };
-    ClipBoardUtils.read = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.read();
-    };
-    ClipBoardUtils.writeText = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.writeText(data);
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    ClipBoardUtils.write = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.write(data);
+    return CountLessThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
+
+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 ClipBoardUtils;
-}());
+    return PassValidator;
+}(Validator));
 
 var NodeUtils = /** @class */ (function () {
     function NodeUtils() {
@@ -4628,17 +5314,34 @@ var StorageUtils = /** @class */ (function () {
         }
         window.localStorage.setItem(k, v);
     };
+    StorageUtils.setSessionStorageItem = function (k, v, window) {
+        if (typeof v === 'object') {
+            v = JSON.stringify(v);
+        }
+        window.sessionStorage.setItem(k, v);
+    };
     StorageUtils.getLocalStorageItem = function (k, window) {
         return window.localStorage.getItem(k);
     };
+    StorageUtils.getSessionStorageItem = function (k, window) {
+        return window.sessionStorage.getItem(k);
+    };
     StorageUtils.cutLocalStorageItem = function (k, window) {
         var data = StorageUtils.getLocalStorageItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return data;
     };
+    StorageUtils.cutSessionStorageItem = function (k, window) {
+        var data = StorageUtils.getSessionStorageItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return data;
+    };
     StorageUtils.removeLocalStorageItem = function (k, window) {
         return window.localStorage.removeItem(k);
     };
+    StorageUtils.removeSessionStorageItem = function (k, window) {
+        return window.sessionStorage.removeItem(k);
+    };
     StorageUtils.getLocalStorageJsonItem = function (k, window) {
         var item = window.localStorage.getItem(k);
         if (item) {
@@ -4653,17 +5356,61 @@ var StorageUtils = /** @class */ (function () {
             return undefined;
         }
     };
+    StorageUtils.getSessionStorageJsonItem = function (k, window) {
+        var item = window.sessionStorage.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.cutSessionStorageJsonItem = function (k, window) {
+        var item = StorageUtils.getSessionStorageJsonItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return item;
+    };
     StorageUtils.clearLocalStorage = function (window) {
         window.localStorage.clear();
     };
+    StorageUtils.clearSessionStorage = function (window) {
+        window.sessionStorage.clear();
+    };
     return StorageUtils;
 }());
 
+var ClipBoardUtils = /** @class */ (function () {
+    function ClipBoardUtils() {
+    }
+    ClipBoardUtils.readText = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.readText();
+    };
+    ClipBoardUtils.read = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.read();
+    };
+    ClipBoardUtils.writeText = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.writeText(data);
+    };
+    ClipBoardUtils.write = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.write(data);
+    };
+    return ClipBoardUtils;
+}());
+
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;