dom-render 1.0.94 → 1.0.96

package/dist/bundle.js

@@ -1252,9 +1252,11 @@ var DrThis = /** @class */ (function (_super) {
                         this.afterCallBack.onThisComponentSetCallBacks.push(attr);
                         return [3 /*break*/, 4];
                     case 2:
+                        // console.log('dr-this!!!!!!!', this.rawSet, this.source.obj)
                         _g = (_f = this.returnContainer.fag).append;
                         return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config)];
                     case 3:
+                        // console.log('dr-this!!!!!!!', this.rawSet, this.source.obj)
                         _g.apply(_f, [_j.sent()]);
                         _j.label = 4;
                     case 4:
@@ -1973,6 +1975,83 @@ exports.RawSetType = void 0;
     RawSetType["UNKOWN"] = "UNKOWN";
 })(exports.RawSetType || (exports.RawSetType = {}));
 
+var DrThisProperty = /** @class */ (function (_super) {
+    __extends(DrThisProperty, _super);
+    function DrThisProperty(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+    }
+    DrThisProperty.prototype.executeAttrRequire = function (attr) {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, dictionaryKey, tempalte, rr;
+            var _f;
+            return __generator(this, function (_g) {
+                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.evalReturn(attr, this.source.obj);
+                dictionaryKey = (_b = this.elementSource.attrs.drKeyOption) !== null && _b !== void 0 ? _b : '';
+                // console.log('--->', attr, dictionaryKey)
+                // if (!(dictioanry instanceof Dictionary)) {
+                //     return ExecuteState.STOP;
+                // }
+                // 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, {
+                    __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+                (_f = this.returnContainer.raws).push.apply(_f, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
+    };
+    DrThisProperty.append = function (obj, fullPath, key, rawSet, config) {
+        var _this = this;
+        var _a, _b;
+        var genNode = config.window.document.importNode(rawSet.fragment, true);
+        // console.log('---> append', rawSet, genNode);
+        var rawSets = [];
+        for (var _i = 0, _c = Array.from(genNode.childNodes.values()); _i < _c.length; _i++) {
+            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_KEY_OPTIONNAME, key);
+            // rawSet.point.end.after(element);
+            var fg = config.window.document.createDocumentFragment();
+            fg.append(element);
+            rawSets.push.apply(rawSets, RawSet.checkPointCreates(fg, obj, config));
+            rawSet.point.end.before(fg);
+            var start = rawSet.point.start;
+            var keys = (_b = (_a = start.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+            keys.push(key);
+            start.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.join(','));
+            rawSets.forEach(function (it) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, it.render(obj, config)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            }); }); });
+        }
+        return rawSets;
+    };
+    return DrThisProperty;
+}(OperatorExecuterAttrRequire));
+
+exports.RawSetOperatorType = void 0;
+(function (RawSetOperatorType) {
+    RawSetOperatorType["DR_THIS_PROPERTY"] = "this-property";
+})(exports.RawSetOperatorType || (exports.RawSetOperatorType = {}));
+
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -1981,6 +2060,7 @@ var RawSet = /** @class */ (function () {
         this.fragment = fragment;
         this.detect = detect;
         this.data = data;
+        point.start.rawSet = this;
         // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
     }
     Object.defineProperty(RawSet.prototype, "isConnected", {
@@ -2038,12 +2118,12 @@ var RawSet = /** @class */ (function () {
     };
     // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         return __awaiter(this, void 0, void 0, function () {
-            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _y, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _z, operators_1, operator, state, _0, onThisComponentSetCallBacks_1, it_1, _1, onElementInitCallBacks_1, it_2, oninit, param, script, _2, onAttrInitCallBacks_1, it_3;
+            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _z, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _0, operators_1, operator, state, _1, onThisComponentSetCallBacks_1, it_1, _2, onElementInitCallBacks_1, it_2, oninit, param, script, _3, onAttrInitCallBacks_1, it_3;
             var _this = this;
-            return __generator(this, function (_3) {
-                switch (_3.label) {
+            return __generator(this, function (_4) {
+                switch (_4.label) {
                     case 0:
                         genNode = config.window.document.importNode(this.fragment, true);
                         raws = [];
@@ -2051,11 +2131,11 @@ var RawSet = /** @class */ (function () {
                         onElementInitCallBacks = [];
                         onThisComponentSetCallBacks = [];
                         drAttrs = [];
-                        _i = 0, _y = Array.from(genNode.childNodes.values());
-                        _3.label = 1;
+                        _i = 0, _z = Array.from(genNode.childNodes.values());
+                        _4.label = 1;
                     case 1:
-                        if (!(_i < _y.length)) return [3 /*break*/, 7];
-                        cNode = _y[_i];
+                        if (!(_i < _z.length)) return [3 /*break*/, 7];
+                        cNode = _z[_i];
                         attribute = {};
                         if (cNode.nodeType === Node.ELEMENT_NODE) {
                             attribute = DomUtils.getAttributeToObject(cNode);
@@ -2100,6 +2180,7 @@ var RawSet = /** @class */ (function () {
                             drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
                             drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
                             drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_NAME),
+                            drThisProperty: this.getAttributeAndDelete(element, RawSet.DR_THIS_PROPERTY_NAME),
                             drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
                             drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
                             drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
@@ -2114,7 +2195,8 @@ var RawSet = /** @class */ (function () {
                             drBeforeOption: this.getAttributeAndDelete(element, RawSet.DR_BEFORE_OPTIONNAME),
                             drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
                             drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
-                            drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME)
+                            drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
+                            drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME)
                         };
                         drAttrs.push(drAttr);
                         operators = [
@@ -2127,28 +2209,29 @@ var RawSet = /** @class */ (function () {
                             new DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerHTML }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drFor }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drForOf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrThisProperty(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drThisProperty }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_o = config.operatorAround) === null || _o === void 0 ? void 0 : _o.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrTargetElement(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
                         ];
-                        _z = 0, operators_1 = operators;
-                        _3.label = 3;
+                        _0 = 0, operators_1 = operators;
+                        _4.label = 3;
                     case 3:
-                        if (!(_z < operators_1.length)) return [3 /*break*/, 6];
-                        operator = operators_1[_z];
+                        if (!(_0 < operators_1.length)) return [3 /*break*/, 6];
+                        operator = operators_1[_0];
                         return [4 /*yield*/, operator.start()];
                     case 4:
-                        state = _3.sent();
+                        state = _4.sent();
                         if (state === exports.ExecuteState.EXECUTE) {
                             return [3 /*break*/, 6];
                         }
                         else if (state === exports.ExecuteState.STOP) {
                             return [2 /*return*/, raws];
                         }
-                        _3.label = 5;
+                        _4.label = 5;
                     case 5:
-                        _z++;
+                        _0++;
                         return [3 /*break*/, 3];
                     case 6:
                         _i++;
@@ -2169,13 +2252,13 @@ var RawSet = /** @class */ (function () {
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
                         RawSet.generateStyleSheetsLocal();
-                        for (_0 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _0 < onThisComponentSetCallBacks_1.length; _0++) {
-                            it_1 = onThisComponentSetCallBacks_1[_0];
-                            (_p = (_o = it_1.obj) === null || _o === void 0 ? void 0 : _o.onInitRender) === null || _p === void 0 ? void 0 : _p.call(_o);
+                        for (_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);
                         }
-                        for (_1 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _1 < onElementInitCallBacks_1.length; _1++) {
-                            it_2 = onElementInitCallBacks_1[_1];
-                            if (((_r = (_q = it_2.targetElement) === null || _q === void 0 ? void 0 : _q.__render) === null || _r === void 0 ? void 0 : _r.element) && ((_t = (_s = it_2.targetElement) === null || _s === void 0 ? void 0 : _s.__render) === null || _t === void 0 ? void 0 : _t.component)) {
+                        for (_2 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _2 < onElementInitCallBacks_1.length; _2++) {
+                            it_2 = onElementInitCallBacks_1[_2];
+                            if (((_s = (_r = it_2.targetElement) === null || _r === void 0 ? void 0 : _r.__render) === null || _s === void 0 ? void 0 : _s.element) && ((_u = (_t = it_2.targetElement) === null || _t === void 0 ? void 0 : _t.__render) === null || _u === void 0 ? void 0 : _u.component)) {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
@@ -2187,14 +2270,14 @@ var RawSet = /** @class */ (function () {
                                         param = [param];
                                     }
                                 }
-                                (_v = (_u = it_2.targetElement.__render.component).onInitRender) === null || _v === void 0 ? void 0 : _v.call.apply(_v, __spreadArray([_u], param, false));
+                                (_w = (_v = it_2.targetElement.__render.component).onInitRender) === null || _w === void 0 ? void 0 : _w.call.apply(_w, __spreadArray([_v], param, false));
                             }
-                            (_w = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _w === void 0 ? void 0 : _w.call(config, it_2.name, obj, this, it_2.targetElement);
+                            (_x = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _x === void 0 ? void 0 : _x.call(config, it_2.name, obj, this, it_2.targetElement);
                         }
                         // TODO: 이부분도 위에 targetElement 처럼 해야될까?
-                        for (_2 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _2 < onAttrInitCallBacks_1.length; _2++) {
-                            it_3 = onAttrInitCallBacks_1[_2];
-                            (_x = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _x === void 0 ? void 0 : _x.call(config, it_3.attrName, it_3.attrValue, obj, this);
+                        for (_3 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _3 < onAttrInitCallBacks_1.length; _3++) {
+                            it_3 = onAttrInitCallBacks_1[_3];
+                            (_y = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _y === void 0 ? void 0 : _y.call(config, it_3.attrName, it_3.attrValue, obj, this);
                         }
                         // component destroy
                         if (obj.__domrender_components) {
@@ -2392,9 +2475,10 @@ var RawSet = /** @class */ (function () {
                     else {
                         type = exports.RawSetType.TEXT;
                     }
-                    var startEndPoint = RawSet.createStartEndPoint(it_4.uuid, type, config);
+                    var node = document.createTextNode(preparedText);
+                    var startEndPoint = RawSet.createStartEndPoint(node, it_4.uuid, type, config);
                     // layout setting
-                    template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
+                    template.content.append(node); // 앞 부분 넣고
                     template.content.append(startEndPoint.start); // add start checkpoint
                     template.content.append(startEndPoint.end); // add end checkpoint
                     // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
@@ -2417,7 +2501,7 @@ var RawSet = /** @class */ (function () {
                 var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
                 var type = exports.RawSetType.TARGET_ELEMENT;
-                var startEndPoint = RawSet.createStartEndPoint(uuid, type, config);
+                var startEndPoint = RawSet.createStartEndPoint(element_3, uuid, type, config);
                 var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
                 var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
                 var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
@@ -2440,16 +2524,23 @@ var RawSet = /** @class */ (function () {
         // console.log('check-->', pars)
         return pars;
     };
-    RawSet.createStartEndPoint = function (id, type, config) {
+    RawSet.createStartEndPoint = function (node, id, type, config) {
         if (type === exports.RawSetType.TARGET_ELEMENT) {
+            var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
             start.setAttribute('id', "".concat(id, "-start"));
+            var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
+            var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
+            if (thisPropertyType) {
+                start.setAttribute('type', exports.RawSetOperatorType.DR_THIS_PROPERTY);
+            }
+            if (keys) {
+                element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
+                start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
+            }
             end.setAttribute('id', "".concat(id, "-end"));
-            return {
-                start: start,
-                end: end
-            };
+            return { start: start, end: end };
         }
         else if (type === exports.RawSetType.STYLE_TEXT) {
             return {
@@ -2464,6 +2555,11 @@ var RawSet = /** @class */ (function () {
             };
         }
     };
+    RawSet.prototype.remove = function () {
+        this.childAllRemove();
+        this.point.end.remove();
+        this.point.start.remove();
+    };
     RawSet.prototype.childAllRemove = function () {
         var next = this.point.start.nextSibling;
         while (next) {
@@ -2474,6 +2570,31 @@ var RawSet = /** @class */ (function () {
             next = this.point.start.nextSibling;
         }
     };
+    RawSet.prototype.childs = function (stopNext) {
+        var childs = [];
+        var next = this.point.start.nextSibling;
+        while (next && next !== this.point.end) {
+            if (stopNext === null || stopNext === void 0 ? void 0 : stopNext(next)) {
+                return;
+            }
+            childs.push(next);
+            next = next.nextSibling;
+        }
+        return childs;
+    };
+    RawSet.prototype.getHasRawSet = function (key) {
+        var rawSet;
+        this.childs(function (node) {
+            var _a, _b;
+            var drKey = (_b = (_a = node).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dr-key');
+            if (drKey && drKey === key) {
+                rawSet = node.rawSet;
+                return true;
+            }
+            return false;
+        });
+        return rawSet;
+    };
     RawSet.drItOtherEncoding = function (element) {
         var random = RandomUtils.uuid();
         var regex = /#it#/g;
@@ -2895,6 +3016,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_NAME = 'dr-for';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
+    RawSet.DR_THIS_PROPERTY_NAME = 'dr-this-property';
     RawSet.DR_REPEAT_NAME = 'dr-repeat';
     RawSet.DR_THIS_NAME = 'dr-this';
     RawSet.DR_FORM_NAME = 'dr-form';
@@ -2913,6 +3035,8 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
     RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
     RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
+    RawSet.DR_KEY_OPTIONNAME = 'dr-key';
+    RawSet.DR_HAS_KEYS_OPTIONNAME = 'dr-has-keys';
     RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
     RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
     RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
@@ -2922,6 +3046,7 @@ var RawSet = /** @class */ (function () {
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
+        drThisProperty: RawSet.DR_THIS_PROPERTY_NAME,
         drAppender: RawSet.DR_APPENDER_NAME,
         drRepeat: RawSet.DR_REPEAT_NAME,
         drThis: RawSet.DR_THIS_NAME,
@@ -2936,10 +3061,12 @@ var RawSet = /** @class */ (function () {
         drBeforeOption: RawSet.DR_BEFORE_OPTIONNAME,
         drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
         drStripOption: RawSet.DR_STRIP_OPTIONNAME,
-        drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME
+        drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
+        drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
+        drKeyOption: RawSet.DR_KEY_OPTIONNAME
     };
     RawSet.DR_TAGS = [];
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_THIS_PROPERTY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
     return RawSet;
 }());
 
@@ -2994,7 +3121,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e;
         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) {
@@ -3021,22 +3148,24 @@ var DomRenderProxy = /** @class */ (function () {
                 });
             }
         });
-        this.render(this.getRawSets());
-        // const render = {target} as Render;
-        // const creatorMetaData = {
-        //     creator: this._domRender_proxy,
-        //     rootCreator: this._domRender_proxy,
-        //     innerHTML
-        // } as CreatorMetaData;
-        (_g = (_f = target).getAttribute) === null || _g === void 0 ? void 0 : _g.call(_f, RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
-        var initParam = [];
-        if (onCreate) {
-            initParam = ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
-            if (!Array.isArray(initParam)) {
-                initParam = [initParam];
+        this.render(this.getRawSets()).then(function (it) {
+            var _a, _b, _c, _d;
+            // const render = {target} as Render;
+            // const creatorMetaData = {
+            //     creator: this._domRender_proxy,
+            //     rootCreator: this._domRender_proxy,
+            //     innerHTML
+            // } as CreatorMetaData;
+            (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
+            var initParam = [];
+            if (onCreate) {
+                initParam = ScriptUtils.evalReturn(onCreate, _this._domRender_proxy);
+                if (!Array.isArray(initParam)) {
+                    initParam = [initParam];
+                }
             }
-        }
-        (_j = (_h = this._domRender_proxy) === null || _h === void 0 ? void 0 : _h.onInitRender) === null || _j === void 0 ? void 0 : _j.call.apply(_j, __spreadArray([_h], initParam, false));
+            (_d = (_c = _this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onInitRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], initParam, false));
+        });
     };
     DomRenderProxy.prototype.getRawSets = function () {
         var set = new Set();
@@ -3071,11 +3200,11 @@ var DomRenderProxy = /** @class */ (function () {
                                 switch (_e.label) {
                                     case 0:
                                         it_1.getUsingTriggerVariables(this_1.config).forEach(function (path) { return _this.addRawSet(path, it_1); });
-                                        if (!it_1.isConnected) return [3 /*break*/, 5];
+                                        if (!it_1.isConnected) return [3 /*break*/, 6];
                                         targetAttrMap = (_b = (_a = it_1.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager.normalAttrMapAttrName);
                                         if (!((_c = it_1.detect) === null || _c === void 0 ? void 0 : _c.action)) return [3 /*break*/, 1];
                                         it_1.detect.action();
-                                        return [3 /*break*/, 4];
+                                        return [3 /*break*/, 5];
                                     case 1:
                                         if (!(it_1.type === exports.RawSetType.TARGET_ELEMENT && it_1.data && fullPathStr && targetAttrMap && it_1.fragment.render)) return [3 /*break*/, 2];
                                         new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
@@ -3091,20 +3220,20 @@ var DomRenderProxy = /** @class */ (function () {
                                             }
                                             // console.log('---?', v, fullPathStr, isUsing);
                                         });
-                                        return [3 /*break*/, 4];
+                                        return [3 /*break*/, 5];
                                     case 2: return [4 /*yield*/, it_1.render(this_1._domRender_proxy, this_1.config)];
                                     case 3:
                                         rawSets_2 = _e.sent();
-                                        // 그외 자식들 render
-                                        if (rawSets_2 && rawSets_2.length > 0) {
-                                            this_1.render(rawSets_2);
-                                        }
-                                        _e.label = 4;
-                                    case 4: return [3 /*break*/, 6];
-                                    case 5:
+                                        if (!(rawSets_2 && rawSets_2.length > 0)) return [3 /*break*/, 5];
+                                        return [4 /*yield*/, this_1.render(rawSets_2)];
+                                    case 4:
+                                        _e.sent();
+                                        _e.label = 5;
+                                    case 5: return [3 /*break*/, 7];
+                                    case 6:
                                         removeRawSets.push(it_1);
-                                        _e.label = 6;
-                                    case 6: return [2 /*return*/];
+                                        _e.label = 7;
+                                    case 7: return [2 /*return*/];
                                 }
                             });
                         };
@@ -3154,18 +3283,65 @@ var DomRenderProxy = /** @class */ (function () {
             });
         }
         else {
+            // 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);
+            // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
             if (lastDoneExecute) {
+                // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
+                // console.log('-------', firstPathStr, firstData);
+                // if (firstData instanceof Dictionary) {
+                // }
                 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 last_1 = strings[strings.length - 1];
                 var data_1 = ScriptUtils.evalReturn('this' + front_1, this._domRender_proxy);
+                // console.log('-------!!!!!', fullPathStr, iterable, data, front, last);
                 new Promise(function (resolve) {
+                    var firstPathStr = front_1.slice(1);
+                    // check dictionary
+                    // console.log('-promise-------', firstPathStr, this)
+                    var firstTargets = _this._rawSets.get(firstPathStr);
+                    var firstTargetDictionary = [];
+                    firstTargets === null || firstTargets === void 0 ? void 0 : firstTargets.forEach(function (it) {
+                        var _a, _b;
+                        // console.log('----forEach---', it);
+                        var type = (_b = (_a = it.point.start).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'type');
+                        if (type === exports.RawSetOperatorType.DR_THIS_PROPERTY) {
+                            firstTargetDictionary.push(it);
+                        }
+                    });
+                    if (firstTargetDictionary.length > 0) {
+                        // console.log('ddddddddddd', firstTargetDictionary);
+                        var rawSets_3 = [];
+                        var skip_1 = false;
+                        firstTargetDictionary.forEach(function (it) {
+                            var _a, _b;
+                            var startElement = it.point.start;
+                            var keys = (_b = (_a = startElement.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                            if (value === undefined) {
+                                var rawSet = it.getHasRawSet(last_1);
+                                rawSet === null || rawSet === void 0 ? void 0 : rawSet.remove();
+                                startElement.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.filter(function (it) { return it !== last_1; }).join(','));
+                            }
+                            if (!keys.includes(last_1)) {
+                                var raws = DrThisProperty.append(_this._domRender_proxy, fullPathStr_1, last_1, it, _this.config);
+                                if (raws) {
+                                    rawSets_3.push.apply(rawSets_3, raws);
+                                }
+                            }
+                            else {
+                                skip_1 = true;
+                            }
+                        });
+                        if (skip_1 === false || rawSets_3.length > 0) {
+                            return _this.render(rawSets_3);
+                        }
+                    }
                     if (last_1 === 'length' && Array.isArray(data_1)) {
-                        var aIterable = _this._rawSets.get(front_1.slice(1));
+                        var aIterable = _this._rawSets.get(firstPathStr);
                         if (aIterable) {
                             return _this.render(Array.from(aIterable));
                         }
@@ -3174,8 +3350,9 @@ 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('target------->,', 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);
@@ -3191,6 +3368,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
         var _a, _b;
+        // console.log('set-->', p, value, target, receiver);
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
             return true;
@@ -3252,6 +3430,13 @@ var DomRenderProxy = /** @class */ (function () {
             return it_2;
         }
     };
+    DomRenderProxy.prototype.deleteProperty = function (target, p) {
+        delete target[p];
+        if (typeof p === 'string') {
+            this.root([p]);
+        }
+        return true;
+    };
     DomRenderProxy.prototype.has = function (target, p) {
         return p === '_DomRender_isProxy' || p in target;
     };
@@ -3833,6 +4018,21 @@ var DomRender = /** @class */ (function () {
     return DomRender;
 }());
 
+var RenderManager = /** @class */ (function () {
+    function RenderManager() {
+    }
+    RenderManager.render = function (obj, target) {
+        if (target === void 0) { target = Object.keys(obj); }
+        var domRenderProxy = obj._DomRender_proxy;
+        if (domRenderProxy) {
+            target.forEach(function (it) {
+                domRenderProxy.root([it], obj[it]);
+            });
+        }
+    };
+    return RenderManager;
+}());
+
 var Appender = /** @class */ (function () {
     function Appender(defaultDatas) {
         this.length = 0;
@@ -3868,7 +4068,7 @@ var Appender = /** @class */ (function () {
         for (var _i = 0; _i < arguments.length; _i++) {
             items[_i] = arguments[_i];
         }
-        // console.log('----2>', this.length)
+        // console.log('----2>', items, this.length);
         items.index = this.length;
         this[this.length++] = items;
         // console.log('---22->', this.length)
@@ -3876,6 +4076,14 @@ var Appender = /** @class */ (function () {
         // appender.values = items;
         // this.childs.push(new Appender(appender.index + 1));
     };
+    // delete(idx: number): void {
+    //     // if (idx in this) {
+    //     //     console.log('---------dele',idx)
+    //     //     delete this[idx];
+    //     //     this.length = this.length - 1;
+    //     // }
+    //     this.length = this.length - 1;
+    // }
     Appender.prototype.clear = function () {
         // console.log('length', this.length);
         for (var i = 0; i < this.length; i++) {
@@ -3886,21 +4094,6 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
-var RenderManager = /** @class */ (function () {
-    function RenderManager() {
-    }
-    RenderManager.render = function (obj, target) {
-        if (target === void 0) { target = Object.keys(obj); }
-        var domRenderProxy = obj._DomRender_proxy;
-        if (domRenderProxy) {
-            target.forEach(function (it) {
-                domRenderProxy.root([it], obj[it]);
-            });
-        }
-    };
-    return RenderManager;
-}());
-
 var AllCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllCheckedValidatorArray, _super);
     function AllCheckedValidatorArray(value, target, event, autoValid) {
@@ -3955,6 +4148,21 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
+var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsUnCheckedValidatorArray, _super);
+    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
+    };
+    return CountEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
+
 var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
     function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4000,6 +4208,21 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
+var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanCheckedValidatorArray, _super);
+    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
+    };
+    return CountGreaterThanCheckedValidatorArray;
+}(ValidatorArray));
+
 var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountLessThanCheckedValidatorArray, _super);
     function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4015,19 +4238,33 @@ var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(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; }
+        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) {
         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 () {
+    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
     };
-    return CountLessThanEqualsUnCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4045,21 +4282,6 @@ var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
-    }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
-    };
-    return CountGreaterThanCheckedValidatorArray;
-}(ValidatorArray));
-
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
     function ExcludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -4082,20 +4304,57 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        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;
     }
-    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;
+    MultipleValidator.prototype.changeValue = function (value) {
+        var _this = this;
+        this.validators.forEach(function (it) { return it.set(_this.value, _this.getTarget(), _this.getEvent()); });
     };
-    return EmptyValidator;
+    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) {
+        if (allRequired === void 0) { allRequired = false; }
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.include = include;
+        _this.allRequired = allRequired;
+        return _this;
+    }
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
+        var _a;
+        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
+        return checkedValue.length > 0 &&
+            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
+    };
+    return IncludeCheckedValidatorArray;
+}(ValidatorArray));
+
 var FormValidator = /** @class */ (function (_super) {
     __extends(FormValidator, _super);
     function FormValidator(target, event, autoValid) {
@@ -4114,41 +4373,49 @@ var FormValidator = /** @class */ (function (_super) {
     return FormValidator;
 }(Validator));
 
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
-        if (allRequired === void 0) { allRequired = false; }
+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) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.include = include;
-        _this.allRequired = allRequired;
+        _this.count = count;
         return _this;
     }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
-        return checkedValue.length > 0 &&
-            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    return IncludeCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsUnCheckedValidatorArray, _super);
-    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    return CountEqualsUnCheckedValidatorArray;
+    return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var NotRegExpTestValidator = /** @class */ (function (_super) {
@@ -4173,19 +4440,16 @@ var NotRegExpTestValidator = /** @class */ (function (_super) {
     return NotRegExpTestValidator;
 }(Validator));
 
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a;
-        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;
+    PassValidator.prototype.valid = function () {
+        return true;
     };
-    return NotEmptyValidator;
+    return PassValidator;
 }(Validator));
 
 var RegExpTestValidator = /** @class */ (function (_super) {
@@ -4224,50 +4488,6 @@ var UnCheckedValidator = /** @class */ (function (_super) {
     return UnCheckedValidator;
 }(Validator));
 
-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;
-    }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
-    };
-    return CountLessThanEqualsCheckedValidatorArray;
-}(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 ValidMultipleValidator = /** @class */ (function (_super) {
     __extends(ValidMultipleValidator, _super);
     function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
@@ -4283,6 +4503,20 @@ var ValidMultipleValidator = /** @class */ (function (_super) {
     return ValidMultipleValidator;
 }(MultipleValidator));
 
+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;
+    }
+    RequiredValidator.prototype.valid = function () {
+        var value = this.value;
+        // console.log('required', value, value !== undefined && value !== null)
+        return value !== undefined && value !== null;
+    };
+    return RequiredValidator;
+}(Validator));
+
 var ValidValidator = /** @class */ (function (_super) {
     __extends(ValidValidator, _super);
     function ValidValidator(validCallBack, value, target, event, autoValid) {
@@ -4339,46 +4573,27 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
 
-var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanUnCheckedValidatorArray, _super);
-    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+var ClipBoardUtils = /** @class */ (function () {
+    function ClipBoardUtils() {
     }
-    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
+    ClipBoardUtils.readText = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.readText();
     };
-    return CountLessThanUnCheckedValidatorArray;
-}(ValidatorArray));
-
-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;
-    }
-    RequiredValidator.prototype.valid = function () {
-        var value = this.value;
-        // console.log('required', value, value !== undefined && value !== null)
-        return value !== undefined && value !== null;
+    ClipBoardUtils.read = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.read();
     };
-    return RequiredValidator;
-}(Validator));
-
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    PassValidator.prototype.valid = function () {
-        return true;
+    ClipBoardUtils.writeText = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.writeText(data);
     };
-    return PassValidator;
-}(Validator));
+    ClipBoardUtils.write = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.write(data);
+    };
+    return ClipBoardUtils;
+}());
 
 var NodeUtils = /** @class */ (function () {
     function NodeUtils() {
@@ -4449,28 +4664,6 @@ var StorageUtils = /** @class */ (function () {
     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;
@@ -4509,6 +4702,7 @@ exports.DrRepeat = DrRepeat;
 exports.DrTargetAttr = DrTargetAttr;
 exports.DrTargetElement = DrTargetElement;
 exports.DrThis = DrThis;
+exports.DrThisProperty = DrThisProperty;
 exports.EmptyValidator = EmptyValidator;
 exports.EventManager = EventManager;
 exports.ExcludeCheckedValidatorArray = ExcludeCheckedValidatorArray;