dom-render 1.0.84 → 1.0.87

package/dist/bundle.js

@@ -1101,11 +1101,11 @@ var DrThis = /** @class */ (function (_super) {
                         RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
                     }
                     this.rawSet.data = r;
-                    this.returnContainer.fag.append(RawSet.drThisCreate(this.elementSource.element, "".concat(this.elementSource.attrs.drThis, ".obj"), (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, r));
+                    this.returnContainer.fag.append(RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis, ".obj"), (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, r));
                     this.afterCallBack.onThisComponentSetCallBacks.push(r);
                 }
                 else {
-                    this.returnContainer.fag.append(RawSet.drThisCreate(this.elementSource.element, this.elementSource.attrs.drThis, (_e = this.elementSource.attrs.drVarOption) !== null && _e !== void 0 ? _e : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
+                    this.returnContainer.fag.append(RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_e = this.elementSource.attrs.drVarOption) !== null && _e !== void 0 ? _e : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
                 }
                 var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
                 (_f = this.elementSource.element.parentNode) === null || _f === void 0 ? void 0 : _f.replaceChild(this.returnContainer.fag, this.elementSource.element);
@@ -1705,7 +1705,7 @@ var DrTargetElement = /** @class */ (function (_super) {
         var _b, _c, _d, _e;
         var targetElement = (_c = (_b = this.source.config) === null || _b === void 0 ? void 0 : _b.targetElements) === null || _c === void 0 ? void 0 : _c.find(function (it) { return it.name.toLowerCase() === _this.elementSource.element.tagName.toLowerCase(); });
         if (targetElement) {
-            var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs);
+            var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config);
             if (documentFragment) {
                 // const targetAttrMap = this.elementSource.element.getAttribute(EventManager.normalAttrMapAttrName);
                 var detectAction_1 = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
@@ -1808,6 +1808,7 @@ exports.DestroyOptionType = void 0;
 exports.RawSetType = void 0;
 (function (RawSetType) {
     RawSetType["TEXT"] = "TEXT";
+    RawSetType["STYLE_TEXT"] = "STYLE_TEXT";
     RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
     RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
     RawSetType["UNKOWN"] = "UNKOWN";
@@ -1904,21 +1905,28 @@ var RawSet = /** @class */ (function () {
             });
             var fag = config.window.document.createDocumentFragment();
             if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
+                // console.log('text-->', this, obj, config)
+                // console.log('text-->', Array.from(this.fragment.childNodes))
                 var textContent = cNode.textContent;
                 var runText = RawSet.exporesionGrouops(textContent)[0][1];
                 // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
-                var n = void 0;
+                var newNode = void 0;
                 if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
                     var r = ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
                     var template = config.window.document.createElement('template');
                     template.innerHTML = r;
-                    n = template.content;
+                    newNode = template.content;
                 }
                 else {
                     var r = ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    n = config.window.document.createTextNode(r);
+                    newNode = config.window.document.createTextNode(r);
+                }
+                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
+                // console.log('-------', this.point.start.parentNode.nodeName)
+                // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
+                if (this.type === exports.RawSetType.STYLE_TEXT && this.point.parent) {
+                    this.point.parent.removeAttribute('completed');
                 }
-                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
                 var element = cNode;
@@ -1973,7 +1981,7 @@ var RawSet = /** @class */ (function () {
             }
         }
         this.applyEvent(obj, genNode, config);
-        this.replaceBody(genNode);
+        this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
         drAttrs.forEach(function (it) {
             if (it.drCompleteOption) {
                 // genNode.childNodes
@@ -1986,25 +1994,16 @@ var RawSet = /** @class */ (function () {
                 }));
             }
         });
+        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
+        RawSet.generateStyleSheetsLocal();
+        // console.log('-22222-')
+        // alert(1);
         for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
             var it_1 = onThisComponentSetCallBacks_1[_p];
             (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
             var it_2 = onElementInitCallBacks_1[_q];
-            // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-            Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
-                var _a;
-                var styleElement = it.ownerNode;
-                var id = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-')[0];
-                if (id) {
-                    // console.log('------->', id)
-                    Array.from(it.cssRules).forEach(function (it) {
-                        _this.generateCSS(id, it);
-                    });
-                }
-                it.ownerNode.setAttribute('completed', 'true');
-            });
             (_g = (_f = (_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.component) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, Object.freeze({ render: (_h = it_2.targetElement) === null || _h === void 0 ? void 0 : _h.__render, creatorMetaData: (_j = it_2.targetElement) === null || _j === void 0 ? void 0 : _j.__creatorMetaData }));
             (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
         }
@@ -2031,7 +2030,23 @@ var RawSet = /** @class */ (function () {
         }
         return raws;
     };
-    RawSet.prototype.generateCSS = function (id, cssRule) {
+    RawSet.generateStyleSheetsLocal = function () {
+        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+            var _a;
+            var styleElement = it.ownerNode;
+            var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
+            split === null || split === void 0 ? void 0 : split.pop();
+            var id = split === null || split === void 0 ? void 0 : split.join('-');
+            if (id) {
+                // console.log('------->', id)
+                Array.from(it.cssRules).forEach(function (it) {
+                    RawSet.generateCSS(id, it);
+                });
+            }
+            it.ownerNode.setAttribute('completed', 'true');
+        });
+    };
+    RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
         var start = "#".concat(id, "-start");
         var end = "#".concat(id, "-end");
@@ -2064,6 +2079,17 @@ var RawSet = /** @class */ (function () {
             });
         }
     };
+    // 중요 스타일 적용 부분
+    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+        if (styleTagWrap === void 0) { styleTagWrap = true; }
+        if (Array.isArray(styleBody)) {
+            styleBody = styleBody.join('\n');
+        }
+        if (styleTagWrap) {
+            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
+        }
+        return styleBody;
+    };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
         if (fragment === void 0) { fragment = this.fragment; }
         eventManager.applyEvent(obj, eventManager.findAttrElements(fragment, config), config);
@@ -2104,17 +2130,19 @@ var RawSet = /** @class */ (function () {
     RawSet.prototype.replaceBody = function (genNode) {
         var _a;
         this.childAllRemove();
-        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
+        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling); // 중요 start checkpoint 다음인 end checkpoint 앞에 넣는다. 즉 중간 껴넣기 (나중에 meta tag로 변경을 해도될듯하긴한데..)
     };
     // 중요 important
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        // console.log('start==========')
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
                 if (node.nodeType === Node.TEXT_NODE) {
+                    // console.log('text--->', node.textContent)
                     // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
                     // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
                     // TODO: 나중에
@@ -2159,49 +2187,60 @@ var RawSet = /** @class */ (function () {
                 // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
                 // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
                 var groups = RawSet.exporesionGrouops(text);
-                var map = groups.map(function (it) { return ({ uuid: RandomUtils.uuid(), content: it[0], regexArr: it }); });
+                var map = groups.map(function (it) { return ({ uuid: RandomUtils.getRandomString(40), content: it[0], regexArr: it }); });
                 var lasterIndex = 0;
                 for (var i = 0; i < map.length; i++) {
                     var it_4 = map[i];
                     var regexArr = it_4.regexArr;
                     var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
-                    var start = config.window.document.createComment("start text ".concat(it_4.uuid));
-                    var end = config.window.document.createComment("end text ".concat(it_4.uuid));
+                    // const start = config.window.document.createElement('meta');
+                    // start.setAttribute('id', `${it.uuid}-start`);
+                    // const end = config.window.document.createElement('meta');
+                    // end.setAttribute('id', `${it.uuid}-end`);
+                    var type = void 0;
+                    if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
+                        type = exports.RawSetType.STYLE_TEXT;
+                    }
+                    else {
+                        type = exports.RawSetType.TEXT;
+                    }
+                    var startEndPoint = RawSet.createStartEndPoint(it_4.uuid, type, config);
                     // layout setting
-                    template.content.append(document.createTextNode(preparedText)); // 사이사이값.
-                    template.content.append(start);
-                    template.content.append(end);
-                    // content
+                    template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
+                    template.content.append(startEndPoint.start); // add start checkpoint
+                    template.content.append(startEndPoint.end); // add end checkpoint
+                    // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
                     var fragment = config.window.document.createDocumentFragment();
                     fragment.append(config.window.document.createTextNode(it_4.content));
-                    pars.push(new RawSet(it_4.uuid, exports.RawSetType.TEXT, {
-                        start: start,
+                    pars.push(new RawSet(it_4.uuid, type, {
+                        start: startEndPoint.start,
                         node: currentNode,
-                        end: end,
+                        end: startEndPoint.end,
+                        parent: currentNode.parentNode,
                         thisVariableName: thisVariableName
                     }, fragment));
                     lasterIndex = regexArr.index + it_4.content.length;
                 }
                 template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
-                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode);
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
             }
             else if (currentNode.nodeType === Node.ELEMENT_NODE) {
-                var uuid = RandomUtils.uuid();
+                var uuid = RandomUtils.getRandomString(40);
                 var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
-                var start = config.window.document.createComment("start ".concat(uuid));
-                var end = config.window.document.createComment("end ".concat(uuid));
-                // console.log('start--', uuid)
+                var type = exports.RawSetType.TARGET_ELEMENT;
+                var startEndPoint = RawSet.createStartEndPoint(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;
-                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
-                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
+                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(startEndPoint.start, currentNode);
+                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(startEndPoint.end, currentNode.nextSibling);
                 fragment.append(currentNode);
-                pars.push(new RawSet(uuid, isElement ? exports.RawSetType.TARGET_ELEMENT : (isAttr ? exports.RawSetType.TARGET_ATTR : exports.RawSetType.UNKOWN), {
-                    start: start,
+                pars.push(new RawSet(uuid, isElement ? type : (isAttr ? exports.RawSetType.TARGET_ATTR : exports.RawSetType.UNKOWN), {
+                    start: startEndPoint.start,
                     node: currentNode,
-                    end: end,
+                    end: startEndPoint.end,
+                    parent: currentNode.parentNode,
                     thisVariableName: thisVariableName
                 }, fragment));
             }
@@ -2213,6 +2252,30 @@ var RawSet = /** @class */ (function () {
         // console.log('check-->', pars)
         return pars;
     };
+    RawSet.createStartEndPoint = function (id, type, config) {
+        if (type === exports.RawSetType.TARGET_ELEMENT) {
+            var start = config.window.document.createElement('meta');
+            var end = config.window.document.createElement('meta');
+            start.setAttribute('id', "".concat(id, "-start"));
+            end.setAttribute('id', "".concat(id, "-end"));
+            return {
+                start: start,
+                end: end,
+            };
+        }
+        else if (type === exports.RawSetType.STYLE_TEXT) {
+            return {
+                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
+                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
+            };
+        }
+        else { // text
+            return {
+                start: config.window.document.createComment("start text ".concat(id)),
+                end: config.window.document.createComment("end text ".concat(id))
+            };
+        }
+    };
     RawSet.prototype.childAllRemove = function () {
         var next = this.point.start.nextSibling;
         while (next) {
@@ -2328,16 +2391,18 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    RawSet.drThisCreate = function (element, drThis, drVarOption, drStripOption, obj, config, set) {
+    RawSet.drThisCreate = function (rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
         var _a, _b, _c, _d;
         var fag = config.window.document.createDocumentFragment();
         var n = element.cloneNode(true);
+        // console.log('--------',n, n.innerHTML)
         if (set) {
-            var id = RandomUtils.getRandomString(20);
-            var style = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], id, true, set.styleLocale);
-            var metaStart = RawSet.metaStart(id);
-            var metaEnd = RawSet.metaEnd(id);
-            n.innerHTML = metaStart + style + ((_b = set.template) !== null && _b !== void 0 ? _b : '') + metaEnd;
+            // const id = RandomUtils.getRandomString(20);
+            var style = RawSet.generateStyleTransform((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
+            n.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            // const metaStart = RawSet.metaStart(id);
+            // const metaEnd = RawSet.metaEnd(id);
+            // n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
             // dr-on-create onCreateRender
             var onCreate = element.getAttribute("".concat(EventManager.attrPrefix, "on-create"));
             var renderScript = '';
@@ -2365,6 +2430,7 @@ var RawSet = /** @class */ (function () {
         this.drVarDecoding(n, vars);
         this.drThisDecoding(n, thisRandom);
         if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
+            // console.log('------childNodes', Array.from(n.childNodes))
             Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
         }
         else {
@@ -2395,21 +2461,22 @@ var RawSet = /** @class */ (function () {
         };
         return targetAttribute;
     };
-    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, styleLocale, config) {
+    RawSet.createComponentTargetElement = function (name, objFactory, template, styles) {
         if (template === void 0) { template = ''; }
         if (styles === void 0) { styles = []; }
         var targetElement = {
             name: name,
             styles: styles,
             template: template,
-            callBack: function (element, obj, rawSet, attrs) {
+            callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f;
                 // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
                 var domrenderComponents = obj.__domrender_components;
-                var componentKey = '_' + RandomUtils.getRandomString(20);
+                // const componentKey = '_' + RandomUtils.getRandomString(20);
+                var componentKey = rawSet.uuid;
                 var attribute = DomUtils.getAttributeToObject(element);
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                 var render = Object.freeze({
@@ -2492,12 +2559,13 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var style = RawSet.styleTransformLocal(styles, componentKey, true, styleLocale);
-                var metaStart = RawSet.metaStart(componentKey);
-                var metaEnd = RawSet.metaEnd(componentKey);
-                element.innerHTML = metaStart + style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '') + metaEnd;
+                var style = RawSet.generateStyleTransform(styles, componentKey, true);
+                element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                // const metaStart = RawSet.metaStart(componentKey);
+                // const metaEnd = RawSet.metaEnd(componentKey);
+                // element.innerHTML = metaStart + style + (applayTemplate ?? '') + metaEnd;
                 // console.log('------>', element.innerHTML, obj)
-                var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
+                var data = RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
                 if (innerHTMLThisRandom) {
                     var template_1 = config.window.document.createElement('template');
@@ -2521,38 +2589,13 @@ var RawSet = /** @class */ (function () {
         var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
         return StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
     };
-    // 중요 스타일 적용 부분
-    RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap, locale) {
-        if (styleTagWrap === void 0) { styleTagWrap = true; }
-        if (locale === void 0) { locale = false; }
-        // <style id="first">
-        //     #first ~ *:not(#first ~ style[domstyle] ~ *) {
-        //     font-size: 30px;
-        //     color: blue;
-        // }
-        // </style>
-        if (Array.isArray(styleBody)) {
-            styleBody = styleBody.join('\n');
-        }
-        if (locale) {
-            styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
-                if (typeof b === 'string') {
-                    b = b.trim();
-                }
-                return "#".concat(id, " ~ ").concat(b, ":not(#").concat(id, " ~ style[domstyle] ~ *), #").concat(id, " ~ * ").concat(b, " {");
-            });
-        }
-        if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
-        }
-        return styleBody;
-    };
-    RawSet.metaStart = function (id) {
-        return "<meta id='".concat(id, "-start' />");
-    };
-    RawSet.metaEnd = function (id) {
-        return "<meta id='".concat(id, "-end' />");
-    };
+    // public static metaStart(id: string) {
+    //     return `<meta id='${id}-start' />`;
+    // }
+    //
+    // public static metaEnd(id: string) {
+    //     return `<meta id='${id}-end' />`;
+    // }
     RawSet.destroy = function (obj, parameter, config, destroyOptions) {
         var _a;
         if (destroyOptions === void 0) { destroyOptions = []; }
@@ -2743,7 +2786,9 @@ var DomRenderProxy = /** @class */ (function () {
                     // ------------------->
                 }
                 else {
+                    // console.log('---rawSets->', it)
                     var rawSets = it.render(_this._domRender_proxy, _this.config);
+                    // console.log('---rawSets->', rawSets)
                     // 대상 attribute 있으면
                     // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
                     // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
@@ -3400,7 +3445,7 @@ var DefaultMessenger = /** @class */ (function (_super) {
 var DomRender = /** @class */ (function () {
     function DomRender() {
     }
-    DomRender.run = function (obj, target, config) {
+    DomRender.run = function (obj, target, oConfig) {
         var _a, _b, _c;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
@@ -3410,9 +3455,13 @@ var DomRender = /** @class */ (function () {
             robj = obj;
             return robj;
         }
+        var config = oConfig;
         if (!config) {
             config = { window: window };
         }
+        if (config && !config.window) {
+            config.window = window;
+        }
         config.routerType = config.routerType || 'none';
         config.messenger = DomRenderFinalProxy.final((_a = config.messenger) !== null && _a !== void 0 ? _a : new DefaultMessenger(config));
         var domRender = new DomRenderProxy(obj, target, config);
@@ -3427,12 +3476,13 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
-    DomRender.createComponent = function (param, config) {
+    DomRender.createComponent = function (param) {
         var _a, _b;
-        var component = RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : param.type.name, function (e, o, r2, counstructorParam) {
+        // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
+        var component = RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : (typeof param.type === 'function' ? param.type.name : param.type.constructor.name), function (e, o, r2, counstructorParam) {
             var _a;
-            return new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))();
-        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined), false, config);
+            return typeof param.type === 'function' ? new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))() : param.type;
+        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined));
         return component;
     };
     DomRender.createAttribute = function (attrName, getThisObj, factory) {
@@ -3442,6 +3492,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;
@@ -3495,32 +3560,32 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
-var RenderManager = /** @class */ (function () {
-    function RenderManager() {
+var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllUnCheckedValidatorArray, _super);
+    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    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]);
-            });
-        }
+    AllUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > 0);
     };
-    return RenderManager;
-}());
+    return AllUnCheckedValidatorArray;
+}(ValidatorArray));
 
-var AllCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllCheckedValidatorArray, _super);
-    function AllCheckedValidatorArray(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    AllCheckedValidatorArray.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 > 0);
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
     };
-    return AllCheckedValidatorArray;
+    return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
 var CheckedValidator = /** @class */ (function (_super) {
@@ -3536,32 +3601,19 @@ var CheckedValidator = /** @class */ (function (_super) {
     return CheckedValidator;
 }(Validator));
 
-var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllUnCheckedValidatorArray, _super);
-    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    AllUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > 0);
-    };
-    return AllUnCheckedValidatorArray;
-}(ValidatorArray));
-
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsCheckedValidatorArray, _super);
+    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+    CountEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
     };
-    return CountGreaterThanCheckedValidatorArray;
+    return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3579,123 +3631,129 @@ var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
-    function CountGreaterThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var AllCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllCheckedValidatorArray, _super);
+    function AllCheckedValidatorArray(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountGreaterThanUnCheckedValidatorArray.prototype.valid = function () {
+    AllCheckedValidatorArray.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 > 0);
     };
-    return CountGreaterThanUnCheckedValidatorArray;
+    return AllCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsCheckedValidatorArray, _super);
-    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanCheckedValidatorArray, _super);
+    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length < this.count;
     };
-    return CountEqualsCheckedValidatorArray;
+    return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(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;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.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 CountGreaterThanEqualsCheckedValidatorArray;
+    return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(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;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.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 CountLessThanEqualsUnCheckedValidatorArray;
+    return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    EmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
+    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 EmptyValidator;
-}(Validator));
+    return CountLessThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
 
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanCheckedValidatorArray.prototype.valid = function () {
+    CountUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length < this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return CountLessThanCheckedValidatorArray;
+    return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length >= this.count;
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return CountGreaterThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsUnCheckedValidatorArray(count, 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.count = count;
+        _this.include = include;
+        _this.allRequired = allRequired;
         return _this;
     }
-    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        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 CountGreaterThanEqualsUnCheckedValidatorArray;
+    return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
 var FormValidator = /** @class */ (function (_super) {
@@ -3716,6 +3774,21 @@ var FormValidator = /** @class */ (function (_super) {
     return FormValidator;
 }(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;
+    }
+    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 CountLessThanUnCheckedValidatorArray;
+}(ValidatorArray));
+
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
     function ExcludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -3738,6 +3811,50 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    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 CountLessThanEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
+
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    EmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
+    };
+    return EmptyValidator;
+}(Validator));
+
+var NotEmptyValidator = /** @class */ (function (_super) {
+    __extends(NotEmptyValidator, _super);
+    function NotEmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    NotEmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
+        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    };
+    return NotEmptyValidator;
+}(Validator));
+
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
     function MultipleValidator(validators, value, target, event, autoValid) {
@@ -3767,65 +3884,6 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var NotRegExpTestValidator = /** @class */ (function (_super) {
-    __extends(NotRegExpTestValidator, _super);
-    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.regexp = DomRenderProxy.final(regexp);
-        return _this;
-    }
-    NotRegExpTestValidator.prototype.valid = function () {
-        var _a;
-        var value = this.value;
-        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        if (value) {
-            return !regExp.test(value);
-        }
-        else {
-            return true;
-        }
-    };
-    return NotRegExpTestValidator;
-}(Validator));
-
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
-        if (allRequired === void 0) { allRequired = false; }
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.include = include;
-        _this.allRequired = allRequired;
-        return _this;
-    }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
-        var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
-        return checkedValue.length > 0 &&
-            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
-    };
-    return IncludeCheckedValidatorArray;
-}(ValidatorArray));
-
-var 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;
-    }
-    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 CountLessThanUnCheckedValidatorArray;
-}(ValidatorArray));
-
 var PassValidator = /** @class */ (function (_super) {
     __extends(PassValidator, _super);
     function PassValidator(value, target, event, autoValid) {
@@ -3838,71 +3896,53 @@ var PassValidator = /** @class */ (function (_super) {
     return PassValidator;
 }(Validator));
 
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
+var RequiredValidator = /** @class */ (function (_super) {
+    __extends(RequiredValidator, _super);
+    function RequiredValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a, _b;
+    RequiredValidator.prototype.valid = function () {
         var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        // console.log('required', value, value !== undefined && value !== null)
+        return value !== undefined && value !== null;
     };
-    return NotEmptyValidator;
+    return RequiredValidator;
 }(Validator));
 
-var RegExpTestValidator = /** @class */ (function (_super) {
-    __extends(RegExpTestValidator, _super);
-    function RegExpTestValidator(regexp, value, target, event, autoValid) {
+var NotRegExpTestValidator = /** @class */ (function (_super) {
+    __extends(NotRegExpTestValidator, _super);
+    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    RegExpTestValidator.prototype.valid = function () {
+    NotRegExpTestValidator.prototype.valid = function () {
         var _a;
         var value = this.value;
         var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        // console.log('regexp-->', value, this.regexp, regExp.test(value))
         if (value) {
-            return regExp.test(value);
+            return !regExp.test(value);
         }
         else {
-            return false;
+            return true;
         }
     };
-    return RegExpTestValidator;
+    return NotRegExpTestValidator;
 }(Validator));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
-    }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
-    };
-    return CountUnCheckedValidatorArray;
-}(ValidatorArray));
-
-var RequiredValidator = /** @class */ (function (_super) {
-    __extends(RequiredValidator, _super);
-    function RequiredValidator(value, target, event, autoValid) {
+var UnCheckedValidator = /** @class */ (function (_super) {
+    __extends(UnCheckedValidator, _super);
+    function UnCheckedValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    RequiredValidator.prototype.valid = function () {
-        var value = this.value;
-        // console.log('required', value, value !== undefined && value !== null)
-        return value !== undefined && value !== null;
+    UnCheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
     };
-    return RequiredValidator;
+    return UnCheckedValidator;
 }(Validator));
 
 var ValidMultipleValidator = /** @class */ (function (_super) {
@@ -3934,6 +3974,29 @@ var ValidValidator = /** @class */ (function (_super) {
     return ValidValidator;
 }(Validator));
 
+var RegExpTestValidator = /** @class */ (function (_super) {
+    __extends(RegExpTestValidator, _super);
+    function RegExpTestValidator(regexp, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.regexp = DomRenderProxy.final(regexp);
+        return _this;
+    }
+    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 RegExpTestValidator;
+}(Validator));
+
 var ValidValidatorArray = /** @class */ (function (_super) {
     __extends(ValidValidatorArray, _super);
     function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
@@ -3948,19 +4011,6 @@ var ValidValidatorArray = /** @class */ (function (_super) {
     return ValidValidatorArray;
 }(ValidatorArray));
 
-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 ValueNotEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueNotEqualsValidator, _super);
     function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -3989,6 +4039,28 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
 
+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;
+}());
+
 var NodeUtils = /** @class */ (function () {
     function NodeUtils() {
     }
@@ -4013,28 +4085,6 @@ var NodeUtils = /** @class */ (function () {
     return NodeUtils;
 }());
 
-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;
-}());
-
 var StorageUtils = /** @class */ (function () {
     function StorageUtils() {
     }