dom-render 1.0.93 → 1.0.95

package/dist/bundle.js

@@ -736,6 +736,7 @@ var EventManager = /** @class */ (function () {
     EventManager.prototype.changeVar = function (obj, elements, varName, config) {
         var _this = this;
         // console.log('-changeVar-->', obj, elements, varName);
+        // forEach elements
         // value-link event
         this.procAttr(elements, EventManager.valueLinkAttrName, function (it, attribute) {
             var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
@@ -1251,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:
@@ -1972,6 +1975,103 @@ exports.RawSetType = void 0;
     RawSetType["UNKOWN"] = "UNKOWN";
 })(exports.RawSetType || (exports.RawSetType = {}));
 
+var DrDictionary = /** @class */ (function (_super) {
+    __extends(DrDictionary, _super);
+    function DrDictionary(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+    }
+    DrDictionary.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.drDictionaryOption) !== 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                            // const oldChild = this.__render.oldChild.get(it);\n                            // if (oldChild && oldChild.length > 0) {\n                            //     this.__render.fag.append(...oldChild);\n                            // } else {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            // if (!this.__render.oldChild.get(it)) {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            // n.setAttribute('dr-dictionary', dictionaryStr);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dictionary-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];
+            });
+        });
+    };
+    DrDictionary.getChildren = function (rawSet, config) {
+        var _a, _b, _c;
+        var next = rawSet.point.start.nextSibling;
+        var oldChild = new Map();
+        var currentKey = '';
+        while (next) {
+            if (next === rawSet.point.end) {
+                break;
+            }
+            var dictionaryKey = (_b = (_a = next).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dictionary-key');
+            if (dictionaryKey) {
+                currentKey = dictionaryKey;
+                oldChild.set(dictionaryKey, []);
+            }
+            // console.log('next-------->', currentKey, next);
+            if (currentKey) {
+                (_c = oldChild.get(currentKey)) === null || _c === void 0 ? void 0 : _c.push(next);
+            }
+            next = next.nextSibling;
+        }
+        return oldChild;
+    };
+    DrDictionary.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('dr-dictionary');
+            element.setAttribute('dr-this', "this.".concat(fullPath));
+            // 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('dictionary-keys')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+            keys.push(key);
+            start.setAttribute('dictionary-keys', 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()];
+                }
+            }); }); });
+            // console.log('WWW', fg, Array.from(fg.childNodes));
+            // console.log('--------------------------rawSets', rawSets);
+        }
+        return rawSets;
+        // rawSet.
+        // rawSet.point.end.before()
+    };
+    return DrDictionary;
+}(OperatorExecuterAttrRequire));
+
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -2037,12 +2137,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 = [];
@@ -2050,11 +2150,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);
@@ -2099,6 +2199,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),
+                            drDictionary: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_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),
@@ -2113,7 +2214,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),
+                            drDictionaryOption: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_OPTIONKEYNAME)
                         };
                         drAttrs.push(drAttr);
                         operators = [
@@ -2126,28 +2228,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 DrDictionary(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_DICTIONARY_NAME, attr: drAttr.drDictionary, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drDictionary }, { 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++;
@@ -2168,13 +2271,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) {
@@ -2186,14 +2289,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) {
@@ -2391,9 +2494,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 연산해서 들어간다.
@@ -2416,7 +2520,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;
@@ -2439,11 +2543,20 @@ 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 dictionaryKey = element.getAttribute('dr-dictionary-key');
+            var dictionary = element.getAttribute('dr-dictionary');
+            if (dictionary) {
+                start.setAttribute('type', 'dictionary');
+            }
+            if (dictionaryKey) {
+                start.setAttribute('dictionary-key', dictionaryKey);
+            }
             end.setAttribute('id', "".concat(id, "-end"));
             return {
                 start: start,
@@ -2894,6 +3007,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_DICTIONARY_NAME = 'dr-dictionary';
     RawSet.DR_REPEAT_NAME = 'dr-repeat';
     RawSet.DR_THIS_NAME = 'dr-this';
     RawSet.DR_FORM_NAME = 'dr-form';
@@ -2912,6 +3026,7 @@ 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_DICTIONARY_OPTIONKEYNAME = 'dr-dictionary-key';
     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';
@@ -2921,6 +3036,7 @@ var RawSet = /** @class */ (function () {
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
+        drDictionary: RawSet.DR_DICTIONARY_NAME,
         drAppender: RawSet.DR_APPENDER_NAME,
         drRepeat: RawSet.DR_REPEAT_NAME,
         drThis: RawSet.DR_THIS_NAME,
@@ -2935,10 +3051,11 @@ 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,
+        drDictionaryOption: RawSet.DR_DICTIONARY_OPTIONKEYNAME
     };
     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_DICTIONARY_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;
 }());
 
@@ -2993,7 +3110,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) {
@@ -3020,22 +3137,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();
@@ -3070,11 +3189,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) {
@@ -3090,20 +3209,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*/];
                                 }
                             });
                         };
@@ -3153,33 +3272,88 @@ 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) {
-                var iterable = this._rawSets.get(fullPathStr_1);
-                // console.log('----->', iterable);
+                // 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 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
-                var last = strings[strings.length - 1];
-                var data = ScriptUtils.evalReturn('this' + front, this._domRender_proxy);
-                if (last === 'length' && Array.isArray(data)) {
-                    var aIterable = this._rawSets.get(front.slice(1));
-                    if (aIterable) {
-                        this.render(Array.from(aIterable));
+                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);
+                    // 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 === 'dictionary') {
+                            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 keys = (_b = (_a = it.point.start.getAttribute('dictionary-keys')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                            if (!keys.includes(last_1)) {
+                                var raws = DrDictionary.append(_this._domRender_proxy, fullPathStr_1, last_1, it, _this.config);
+                                // console.log('----append---', raws);
+                                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);
+                        }
+                        // console.log('rawSets-->#$$$$$$$$$$$', this._rawSets);
+                        // rawSets.forEach(it => this.addRawSet(fullPathStr, it));
+                        // DrDictionary.append(this._domRender_proxy, fullPathStr, it, this.config);
+                        // it.render(this._domRender_proxy, this.config);
                     }
-                }
-                else if (iterable) {
-                    this.render(Array.from(iterable), fullPathStr_1);
-                }
-                this._targets.forEach(function (it) {
-                    // console.log('target------->,', it)
-                    // return;
-                    if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
-                        var targets = eventManager.findAttrElements(it, _this.config);
-                        // console.log('------>', targets);
-                        eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
+                    /* if (data instanceof Dictionary) {
+                         const a = this._rawSets.get(firstPathStr);
+                         // a?.forEach(it => {
+                         //     if (it.type === RawSetType.TARGET_ATTR)
+                         // })
+                         console.log('dictionary-->', data, last, value, this._rawSets, a);
+                     } else */
+                    if (last_1 === 'length' && Array.isArray(data_1)) {
+                        var aIterable = _this._rawSets.get(firstPathStr);
+                        if (aIterable) {
+                            return _this.render(Array.from(aIterable));
+                        }
+                    }
+                    else if (iterable_1) {
+                        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);
+                        }
+                    });
                 });
             }
             fullPaths.push(fullPathStr_1);
@@ -3188,6 +3362,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;
@@ -3249,6 +3424,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;
     };
@@ -3880,7 +4062,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)
@@ -3888,6 +4070,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++) {
@@ -3911,18 +4101,18 @@ var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
     return AllUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(value, target, event, autoValid) {
+var AllCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllCheckedValidatorArray, _super);
+    function AllCheckedValidatorArray(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    CheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    AllCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > 0);
     };
-    return CheckedValidator;
-}(Validator));
+    return AllCheckedValidatorArray;
+}(ValidatorArray));
 
 var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsCheckedValidatorArray, _super);
@@ -3939,18 +4129,18 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var AllCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllCheckedValidatorArray, _super);
-    function AllCheckedValidatorArray(value, target, event, autoValid) {
+var CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    AllCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > 0);
+    CheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
     };
-    return AllCheckedValidatorArray;
-}(ValidatorArray));
+    return CheckedValidator;
+}(Validator));
 
 var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsUnCheckedValidatorArray, _super);
@@ -3982,79 +4172,64 @@ var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_supe
     return CountGreaterThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
-    }
-    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
-    };
-    return CountGreaterThanEqualsUnCheckedValidatorArray;
-}(ValidatorArray));
-
-var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
-    function CountGreaterThanUnCheckedValidatorArray(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;
     }
-    CountGreaterThanUnCheckedValidatorArray.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 CountGreaterThanUnCheckedValidatorArray;
+    return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
+    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    return CountGreaterThanCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(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;
     }
-    CountLessThanCheckedValidatorArray.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 CountLessThanCheckedValidatorArray;
+    return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanUnCheckedValidatorArray, _super);
-    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
+    function CountGreaterThanUnCheckedValidatorArray(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;
     }
-    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
+    CountGreaterThanUnCheckedValidatorArray.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 CountLessThanUnCheckedValidatorArray;
+    return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4072,58 +4247,21 @@ var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super
     return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanUnCheckedValidatorArray, _super);
+    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    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 ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(ExcludeCheckedValidatorArray, _super);
-    function ExcludeCheckedValidatorArray(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;
-    }
-    ExcludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
+    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var unCheckedValue = valus.filter(function (it) { return !it.checked; }).map(function (it) { return it.value; });
-        return unCheckedValue.length > 0 &&
-            (!(unCheckedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? unCheckedValue.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 ExcludeCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-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 EmptyValidator = /** @class */ (function (_super) {
     __extends(EmptyValidator, _super);
     function EmptyValidator(value, target, event, autoValid) {
@@ -4153,9 +4291,9 @@ var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
+var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(ExcludeCheckedValidatorArray, _super);
+    function ExcludeCheckedValidatorArray(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;
@@ -4163,28 +4301,49 @@ var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
         _this.allRequired = allRequired;
         return _this;
     }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
+    ExcludeCheckedValidatorArray.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);
+        var unCheckedValue = valus.filter(function (it) { return !it.checked; }).map(function (it) { return it.value; });
+        return unCheckedValue.length > 0 &&
+            (!(unCheckedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? unCheckedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
     };
-    return IncludeCheckedValidatorArray;
+    return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
+var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanCheckedValidatorArray, _super);
+    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    PassValidator.prototype.valid = function () {
-        return true;
+    CountLessThanCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length < this.count;
     };
-    return PassValidator;
+    return CountLessThanCheckedValidatorArray;
+}(ValidatorArray));
+
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, undefined, target, event, autoValid) || this;
+    }
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
+    };
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
+    };
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
+    };
+    return FormValidator;
 }(Validator));
 
 var NotRegExpTestValidator = /** @class */ (function (_super) {
@@ -4209,59 +4368,27 @@ var NotRegExpTestValidator = /** @class */ (function (_super) {
     return NotRegExpTestValidator;
 }(Validator));
 
-var RegExpTestValidator = /** @class */ (function (_super) {
-    __extends(RegExpTestValidator, _super);
-    function RegExpTestValidator(regexp, value, target, event, autoValid) {
+var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(IncludeCheckedValidatorArray, _super);
+    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
+        if (allRequired === void 0) { allRequired = false; }
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.regexp = DomRenderProxy.final(regexp);
+        _this.include = include;
+        _this.allRequired = allRequired;
         return _this;
     }
-    RegExpTestValidator.prototype.valid = function () {
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
         var _a;
-        var value = this.value;
-        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        // console.log('regexp-->', value, this.regexp, regExp.test(value))
-        if (value) {
-            return regExp.test(value);
-        }
-        else {
-            return false;
-        }
-    };
-    return RegExpTestValidator;
-}(Validator));
-
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, undefined, target, event, autoValid) || this;
-    }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(this);
-    };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
-    };
-    FormValidator.prototype.reset = function () {
-        this.targetReset();
-    };
-    return FormValidator;
-}(Validator));
-
-var UnCheckedValidator = /** @class */ (function (_super) {
-    __extends(UnCheckedValidator, _super);
-    function UnCheckedValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    UnCheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
+        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 UnCheckedValidator;
-}(Validator));
+    return IncludeCheckedValidatorArray;
+}(ValidatorArray));
 
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
@@ -4292,32 +4419,39 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var ValidValidatorArray = /** @class */ (function (_super) {
-    __extends(ValidValidatorArray, _super);
-    function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.validCallBack = validCallBack;
-        return _this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    ValidValidatorArray.prototype.valid = function () {
-        return this.validCallBack(this.value, this.getTarget(), this.getEvent());
+    PassValidator.prototype.valid = function () {
+        return true;
     };
-    return ValidValidatorArray;
-}(ValidatorArray));
+    return PassValidator;
+}(Validator));
 
-var ValidValidator = /** @class */ (function (_super) {
-    __extends(ValidValidator, _super);
-    function ValidValidator(validCallBack, 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.validCallBack = validCallBack;
+        _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    ValidValidator.prototype.valid = function (value, target, event) {
-        return this.validCallBack(value, target, event);
+    RegExpTestValidator.prototype.valid = function () {
+        var _a;
+        var value = this.value;
+        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
+        // console.log('regexp-->', value, this.regexp, regExp.test(value))
+        if (value) {
+            return regExp.test(value);
+        }
+        else {
+            return false;
+        }
     };
-    return ValidValidator;
+    return RegExpTestValidator;
 }(Validator));
 
 var RequiredValidator = /** @class */ (function (_super) {
@@ -4334,6 +4468,21 @@ var RequiredValidator = /** @class */ (function (_super) {
     return RequiredValidator;
 }(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 ValidMultipleValidator = /** @class */ (function (_super) {
     __extends(ValidMultipleValidator, _super);
     function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
@@ -4349,6 +4498,47 @@ var ValidMultipleValidator = /** @class */ (function (_super) {
     return ValidMultipleValidator;
 }(MultipleValidator));
 
+var UnCheckedValidator = /** @class */ (function (_super) {
+    __extends(UnCheckedValidator, _super);
+    function UnCheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    UnCheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
+    };
+    return UnCheckedValidator;
+}(Validator));
+
+var ValidValidator = /** @class */ (function (_super) {
+    __extends(ValidValidator, _super);
+    function ValidValidator(validCallBack, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.validCallBack = validCallBack;
+        return _this;
+    }
+    ValidValidator.prototype.valid = function (value, target, event) {
+        return this.validCallBack(value, target, event);
+    };
+    return ValidValidator;
+}(Validator));
+
+var ValidValidatorArray = /** @class */ (function (_super) {
+    __extends(ValidValidatorArray, _super);
+    function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.validCallBack = validCallBack;
+        return _this;
+    }
+    ValidValidatorArray.prototype.valid = function () {
+        return this.validCallBack(this.value, this.getTarget(), this.getEvent());
+    };
+    return ValidValidatorArray;
+}(ValidatorArray));
+
 var ValueEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueEqualsValidator, _super);
     function ValueEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -4399,30 +4589,6 @@ var ClipBoardUtils = /** @class */ (function () {
     return ClipBoardUtils;
 }());
 
-var NodeUtils = /** @class */ (function () {
-    function NodeUtils() {
-    }
-    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
-    NodeUtils.removeAllChildNode = function (node) {
-        while (node === null || node === void 0 ? void 0 : node.firstChild) {
-            node.firstChild.remove();
-        }
-    };
-    NodeUtils.appendChild = function (parentNode, childNode) {
-        return parentNode.appendChild(childNode);
-    };
-    NodeUtils.replaceNode = function (targetNode, newNode) {
-        var _a;
-        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
-    };
-    NodeUtils.addNode = function (targetNode, newNode) {
-        var _a;
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
-    };
-    return NodeUtils;
-}());
-
 var StorageUtils = /** @class */ (function () {
     function StorageUtils() {
     }
@@ -4468,6 +4634,30 @@ var StorageUtils = /** @class */ (function () {
     return StorageUtils;
 }());
 
+var NodeUtils = /** @class */ (function () {
+    function NodeUtils() {
+    }
+    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
+    NodeUtils.removeAllChildNode = function (node) {
+        while (node === null || node === void 0 ? void 0 : node.firstChild) {
+            node.firstChild.remove();
+        }
+    };
+    NodeUtils.appendChild = function (parentNode, childNode) {
+        return parentNode.appendChild(childNode);
+    };
+    NodeUtils.replaceNode = function (targetNode, newNode) {
+        var _a;
+        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
+    };
+    NodeUtils.addNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    };
+    return NodeUtils;
+}());
+
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;
@@ -4495,6 +4685,7 @@ exports.DomRenderProxy = DomRenderProxy;
 exports.DomUtils = DomUtils;
 exports.Dr = Dr;
 exports.DrAppender = DrAppender;
+exports.DrDictionary = DrDictionary;
 exports.DrFor = DrFor;
 exports.DrForOf = DrForOf;
 exports.DrForm = DrForm;