dom-render 1.0.79 → 1.0.82

package/dist/bundle.js

@@ -541,7 +541,8 @@ var EventManager = /** @class */ (function () {
             map.forEach(function (v, k) {
                 var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
                     __render: Object.freeze({
-                        element: it
+                        element: it,
+                        attribute: DomUtils.getAttributeToObject(it)
                     })
                 }));
                 it.setAttribute(k, data);
@@ -553,26 +554,6 @@ var EventManager = /** @class */ (function () {
                 it.obj = obj;
             });
         });
-        // on-init event
-        this.procAttr(childNodes, EventManager.onInitAttrName, function (it, attribute) {
-            var script = attribute;
-            if (script) {
-                script = 'return ' + script;
-            }
-            if (script) {
-                ScriptUtils.eval("".concat(_this.bindScript, "; ").concat(script, " "), Object.assign(obj, {
-                    __render: Object.freeze({
-                        element: it
-                    })
-                }));
-                // console.log('onInit--->', obj, varName, it)
-                // if (typeof this.getValue(obj, varName) === 'function') {
-                //     this.getValue(obj, varName)(it);
-                // } else {
-                //     this.setValue(obj, varName, it);
-                // }
-            }
-        });
         // value-link event
         this.procAttr(childNodes, EventManager.valueLinkAttrName, function (it, varName) {
             if (varName) {
@@ -621,6 +602,7 @@ var EventManager = /** @class */ (function () {
                             __render: Object.freeze({
                                 event: event,
                                 element: it,
+                                attribute: DomUtils.getAttributeToObject(it),
                                 target: event.target,
                                 range: Range.range,
                                 scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
@@ -636,6 +618,27 @@ var EventManager = /** @class */ (function () {
                 });
             }
         });
+        // on-init event
+        this.procAttr(childNodes, EventManager.onInitAttrName, function (it, attribute) {
+            var script = attribute;
+            if (script) {
+                script = 'return ' + script;
+            }
+            if (script) {
+                ScriptUtils.eval("".concat(_this.bindScript, "; ").concat(script, " "), Object.assign(obj, {
+                    __render: Object.freeze({
+                        element: it,
+                        attribute: DomUtils.getAttributeToObject(it)
+                    })
+                }));
+                // console.log('onInit--->', obj, varName, it)
+                // if (typeof this.getValue(obj, varName) === 'function') {
+                //     this.getValue(obj, varName)(it);
+                // } else {
+                //     this.setValue(obj, varName, it);
+                // }
+            }
+        });
         this.changeVar(obj, childNodes, undefined, config);
         // console.log('eventManager-applyEvent-->', config?.applyEvents)
         var elements = Array.from(childNodes).filter(function (it) { return it.nodeType === 1; }).map(function (it) { return it; });
@@ -683,7 +686,8 @@ var EventManager = /** @class */ (function () {
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
-                        element: it
+                        element: it,
+                        attribute: DomUtils.getAttributeToObject(it)
                     })
                 }));
                 if (typeof data === 'string') {
@@ -734,7 +738,8 @@ var EventManager = /** @class */ (function () {
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
-                        element: it
+                        element: it,
+                        attribute: DomUtils.getAttributeToObject(it)
                     })
                 }));
                 if (typeof data === 'string') {
@@ -762,7 +767,8 @@ var EventManager = /** @class */ (function () {
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
-                        element: it
+                        element: it,
+                        attribute: DomUtils.getAttributeToObject(it)
                     })
                 }));
                 if (typeof data === 'string') {
@@ -796,7 +802,8 @@ var EventManager = /** @class */ (function () {
                 if (isUsing) {
                     var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
                         __render: Object.freeze({
-                            element: it
+                            element: it,
+                            attribute: DomUtils.getAttributeToObject(it)
                         })
                     }));
                     it.setAttribute(k, data);
@@ -813,14 +820,13 @@ var EventManager = /** @class */ (function () {
             it.addEventListener(eventName, function (event) {
                 var filter = true;
                 var filterScript = it.getAttribute("".concat(attr, ":filter"));
-                var attribute = DomUtils.getAttributeToObject(it);
                 var thisTarget = Object.assign(obj, {
                     __render: Object.freeze({
                         event: event,
                         element: it,
                         target: event.target,
                         range: Range.range,
-                        attribute: attribute,
+                        attribute: DomUtils.getAttributeToObject(it),
                         router: config === null || config === void 0 ? void 0 : config.router,
                         scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
                     })
@@ -856,6 +862,7 @@ var EventManager = /** @class */ (function () {
                             __render: Object.freeze({
                                 event: event,
                                 element: it,
+                                attribute: DomUtils.getAttributeToObject(it),
                                 target: event.target,
                                 range: Range.range,
                                 scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
@@ -1016,7 +1023,7 @@ var Dr = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             return exports.ExecuteState.EXECUTE;
@@ -1053,7 +1060,7 @@ var DrIf = /** @class */ (function (_super) {
             tempalte.innerHTML = newTemp.innerHTML;
             // console.log(tempalte.innerHTML)
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             // if (bypass) {
@@ -1100,7 +1107,7 @@ var DrThis = /** @class */ (function (_super) {
                 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));
                 }
-                var rr = RawSet.checkPointCreates(this.returnContainer.fag, 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);
                 (_a = this.returnContainer.raws).push.apply(_a, rr);
             }
@@ -1206,7 +1213,7 @@ var Validator = /** @class */ (function () {
                 target.value = this._value;
             }
             catch (e) {
-                console.log('set value function is blocked ');
+                console.error('set value function is blocked ');
             }
         }
         if (this.getAutoValidAction()) {
@@ -1499,7 +1506,7 @@ var DrForm = /** @class */ (function (_super) {
                 }
             });
             RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
-            (_a = this.returnContainer.raws).push.apply(_a, RawSet.checkPointCreates(this.elementSource.element, this.source.config));
+            (_a = this.returnContainer.raws).push.apply(_a, RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
             return exports.ExecuteState.EXECUTE;
         }
         return exports.ExecuteState.NO_EXECUTE;
@@ -1523,7 +1530,7 @@ var DrInnerText = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             return exports.ExecuteState.EXECUTE;
@@ -1551,7 +1558,7 @@ var DrInnerHTML = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             return exports.ExecuteState.EXECUTE;
@@ -1581,7 +1588,7 @@ var DrFor = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             return exports.ExecuteState.EXECUTE;
@@ -1613,7 +1620,7 @@ var DrForOf = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
             // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
             (_a = this.returnContainer.raws).push.apply(_a, rr);
@@ -1646,7 +1653,7 @@ var DrAppender = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
             // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
             (_a = this.returnContainer.raws).push.apply(_a, rr);
@@ -1677,7 +1684,7 @@ var DrRepeat = /** @class */ (function (_super) {
             var tempalte = this.source.config.window.document.createElement('template');
             tempalte.innerHTML = newTemp.innerHTML;
             this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
             (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
             (_a = this.returnContainer.raws).push.apply(_a, rr);
             return exports.ExecuteState.EXECUTE;
@@ -1739,7 +1746,7 @@ var DrTargetElement = /** @class */ (function (_super) {
                     };
                 }
                 // fag.append(documentFragment)
-                var rr = RawSet.checkPointCreates(documentFragment, this.source.config);
+                var rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
                 (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
                 (_a = this.returnContainer.raws).push.apply(_a, rr);
                 this.afterCallBack.onElementInitCallBacks.push({
@@ -1748,6 +1755,7 @@ var DrTargetElement = /** @class */ (function (_super) {
                     targetElement: targetElement,
                     creatorMetaData: targetElement.__creatorMetaData
                 });
+                // console.log(document.body.innerHTML);
                 (_e = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _e === void 0 ? void 0 : _e.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
             }
             return exports.ExecuteState.EXECUTE;
@@ -1774,7 +1782,7 @@ var DrTargetAttr = /** @class */ (function (_super) {
             if (attrValue && attrName && (!this.elementSource.attrs.drForOf && !this.elementSource.attrs.drFor && !this.elementSource.attrs.drRepeat)) {
                 var documentFragment = targetAttr.callBack(this.elementSource.element, attrValue, this.source.obj, this.rawSet);
                 if (documentFragment) {
-                    var rr = RawSet.checkPointCreates(documentFragment, this.source.config);
+                    var rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
                     (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
                     (_a = this.returnContainer.raws).push.apply(_a, rr);
                     this.afterCallBack.onAttrInitCallBacks.push({
@@ -1868,7 +1876,7 @@ var RawSet = /** @class */ (function () {
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
         return usingTriggerVariables;
     };
-    // 중요 render
+    // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1984,6 +1992,33 @@ var RawSet = /** @class */ (function () {
         }
         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)
+                    var start_1 = "#".concat(id, "-start");
+                    var end_1 = "#".concat(id, "-end");
+                    Array.from(it.cssRules).filter(function (it) { return it.constructor.name === 'CSSStyleRule'; }).forEach(function (it) {
+                        var rule = it;
+                        // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
+                        // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ ${rule.selectorText})`;
+                        // console.log('-----', rule, rule.selectorText)
+                        if (!rule.selectorText.startsWith(':root')) {
+                            rule.selectorText = "".concat(start_1, " ~ ").concat(rule.selectorText, ":not(").concat(start_1, " ~ ").concat(end_1, " ~ *)");
+                            // if (rule.selectorText.startsWith('.')) {
+                            //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
+                            // } else {
+                            //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
+                            // }
+                        }
+                        // console.log(rule.selectorText);
+                    });
+                }
+                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);
         }
@@ -2053,7 +2088,7 @@ var RawSet = /** @class */ (function () {
         (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
     };
     // 중요 important
-    RawSet.checkPointCreates = function (element, config) {
+    RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
@@ -2280,7 +2315,10 @@ var RawSet = /** @class */ (function () {
         var n = element.cloneNode(true);
         if (set) {
             var id = RandomUtils.getRandomString(20);
-            n.innerHTML = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], id, true, set.styleLocale) + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            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;
             // dr-on-create onCreateRender
             var onCreate = element.getAttribute("".concat(EventManager.attrPrefix, "on-create"));
             var renderScript = '';
@@ -2435,8 +2473,10 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var innerHTML = RawSet.styleTransformLocal(styles, componentKey, true, styleLocale) + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                element.innerHTML = innerHTML;
+                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;
                 // console.log('------>', element.innerHTML, obj)
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -2462,6 +2502,7 @@ 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; }
@@ -2483,10 +2524,16 @@ var RawSet = /** @class */ (function () {
             });
         }
         if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "' domstyle>").concat(styleBody, "</style>");
+            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' />");
+    };
     RawSet.destroy = function (obj, parameter, config, destroyOptions) {
         var _a;
         if (destroyOptions === void 0) { destroyOptions = []; }
@@ -2607,7 +2654,7 @@ var DomRenderProxy = /** @class */ (function () {
         (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call(_c, createParam);
         var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
-        var rawSets = RawSet.checkPointCreates(target, this.config);
+        var rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
         // 중요 초기에 한번 튕겨줘야함.
         eventManager.applyEvent(this._domRender_proxy, eventManager.findAttrElements(target, this.config), this.config);
@@ -2725,6 +2772,7 @@ var DomRenderProxy = /** @class */ (function () {
         }
         else {
             var strings = paths.reverse();
+            // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
             var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             if (lastDoneExecute) {
                 var iterable = this._rawSets.get(fullPathStr_1);
@@ -3250,7 +3298,7 @@ var Messenger = /** @class */ (function () {
         this.config.window.addEventListener(Messenger.EVENT_PUBLISH_KEY, function (e) {
             var _a, _b;
             var detail = e.detail;
-            console.log('--->', detail);
+            // console.log('--->', detail)
             var rtns = [];
             (_a = _this.getChannels(detail.key)) === null || _a === void 0 ? void 0 : _a.forEach(function (it) {
                 try {
@@ -3267,7 +3315,7 @@ var Messenger = /** @class */ (function () {
         });
         this.config.window.addEventListener(Messenger.EVENT_SUBSCRIBE_KEY, function (e) {
             var detail = e.detail;
-            console.log('--->', detail);
+            // console.log('--->', detail)
             var channel = _this.createChannel(detail.obj, detail.key);
             detail.init(channel, channel.subscribe(detail.subscribe));
         });
@@ -3293,7 +3341,7 @@ var Messenger = /** @class */ (function () {
         if (obj) {
             this.channels.forEach(function (it) {
                 if (it.obj === obj) {
-                    console.log('dddddddddddd', obj);
+                    // console.log('dddddddddddd', obj)
                     _this.deleteChannel(it);
                 }
             });
@@ -3360,54 +3408,66 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
-    DomRender.addComponent = function (config, _a, _b) {
-        var _c;
-        var type = _a.type, _d = _a.tagName, tagName = _d === void 0 ? type.name : _d;
-        var template = _b.template, _e = _b.styles, styles = _e === void 0 ? [] : _e, _f = _b.styleLocale, styleLocale = _f === void 0 ? false : _f;
-        var component = RawSet.createComponentTargetElement(tagName, function (e, o, r2, counstructorParam) {
-            return new (type.bind.apply(type, __spreadArray([void 0], counstructorParam, false)))();
-        }, template, styles, styleLocale, config);
-        config.targetElements = (_c = config.targetElements) !== null && _c !== void 0 ? _c : [];
-        config.targetElements.push(component);
-        return {
-            add: function (source, front) {
-                return DomRender.addComponent(config, source, front);
-            }
-        };
+    DomRender.createComponent = function (param, config) {
+        var _a, _b;
+        var component = RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : param.type.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 component;
     };
-    DomRender.addAttribute = function (config, attrName, getThisObj, factory) {
-        var _a;
+    DomRender.createAttribute = function (attrName, getThisObj, factory) {
         var targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
-        config.targetAttrs = (_a = config.targetAttrs) !== null && _a !== void 0 ? _a : [];
-        config.targetAttrs.push(targetAttribute);
-        return {
-            add: function (attrName, getThisObj, factory) {
-                return DomRender.addAttribute(config, attrName, getThisObj, factory);
-            }
-        };
-    };
-    DomRender.addAttributeCallBack = function (config, attrName, callBack) {
-        var _a;
-        config.applyEvents = (_a = config.applyEvents) !== null && _a !== void 0 ? _a : [];
-        config.applyEvents.push({
-            attrName: attrName,
-            callBack: callBack
-        });
-        return {
-            add: function (attrName, callBack) {
-                return DomRender.addAttributeCallBack(config, attrName, callBack);
-            }
-        };
+        return targetAttribute;
     };
     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 () {
-    // [keys: string]: any;
-    function Appender() {
+    function Appender(defaultDatas) {
         this.length = 0;
+        if (defaultDatas) {
+            this.push.apply(this, defaultDatas);
+        }
         // (this.childs as any).isAppender = true;
     }
+    Appender.prototype[Symbol.iterator] = function () {
+        var items = this.getAll();
+        var idx = 0;
+        return {
+            next: function (value) {
+                var r = { value: undefined, done: true };
+                if (items.length > idx) {
+                    r = { value: items[idx], done: false };
+                }
+                idx++;
+                return r;
+            }
+        };
+    };
+    Appender.prototype.getAll = function () {
+        return this.getAlls().flat();
+    };
+    Appender.prototype.getAlls = function () {
+        var _this = this;
+        var map = Array.from({ length: this.length }).filter(function (it, idx) { return _this[idx]; }).map(function (it, idx) { return _this[idx]; });
+        return map;
+    };
     Appender.prototype.push = function () {
         var items = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -3431,21 +3491,6 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
-var RenderManager = /** @class */ (function () {
-    function RenderManager() {
-    }
-    RenderManager.render = function (obj, target) {
-        if (target === void 0) { target = Object.keys(obj); }
-        var domRenderProxy = obj._DomRender_proxy;
-        if (domRenderProxy) {
-            target.forEach(function (it) {
-                domRenderProxy.root([it], obj[it]);
-            });
-        }
-    };
-    return RenderManager;
-}());
-
 var AllCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllCheckedValidatorArray, _super);
     function AllCheckedValidatorArray(value, target, event, autoValid) {
@@ -3487,20 +3532,18 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsUnCheckedValidatorArray, _super);
-    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(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;
     }
-    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
+    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 CountEqualsUnCheckedValidatorArray;
-}(ValidatorArray));
+    return CheckedValidator;
+}(Validator));
 
 var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanCheckedValidatorArray, _super);
@@ -3517,18 +3560,20 @@ var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _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;
+    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 CheckedValidator;
-}(Validator));
+    return CountGreaterThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
 
 var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
@@ -3545,64 +3590,64 @@ var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_su
     return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(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;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.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 CountGreaterThanEqualsCheckedValidatorArray;
+    return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(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;
     }
-    CountLessThanEqualsCheckedValidatorArray.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 CountLessThanEqualsCheckedValidatorArray;
+    return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(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;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.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 CountLessThanEqualsUnCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
-    function CountGreaterThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsUnCheckedValidatorArray, _super);
+    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanUnCheckedValidatorArray.prototype.valid = function () {
+    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
     };
-    return CountGreaterThanUnCheckedValidatorArray;
+    return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3620,34 +3665,34 @@ var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanUnCheckedValidatorArray;
 }(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 CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    return CountUnCheckedValidatorArray;
+    return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var EmptyValidator = /** @class */ (function (_super) {
@@ -3664,9 +3709,9 @@ var EmptyValidator = /** @class */ (function (_super) {
     return EmptyValidator;
 }(Validator));
 
-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;
@@ -3674,21 +3719,21 @@ 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 ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(ExcludeCheckedValidatorArray, _super);
-    function ExcludeCheckedValidatorArray(include, allRequired, 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;
@@ -3696,31 +3741,28 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
         _this.allRequired = allRequired;
         return _this;
     }
-    ExcludeCheckedValidatorArray.prototype.valid = function () {
+    IncludeCheckedValidatorArray.prototype.valid = function () {
         var _this = this;
         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);
+        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 ExcludeCheckedValidatorArray;
+    return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    PassValidator.prototype.valid = function () {
+        return true;
     };
-    return NotEmptyValidator;
+    return PassValidator;
 }(Validator));
 
 var FormValidator = /** @class */ (function (_super) {
@@ -3741,6 +3783,20 @@ var FormValidator = /** @class */ (function (_super) {
     return FormValidator;
 }(Validator));
 
+var RequiredValidator = /** @class */ (function (_super) {
+    __extends(RequiredValidator, _super);
+    function RequiredValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    RequiredValidator.prototype.valid = function () {
+        var value = this.value;
+        // console.log('required', value, value !== undefined && value !== null)
+        return value !== undefined && value !== null;
+    };
+    return RequiredValidator;
+}(Validator));
+
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
     function MultipleValidator(validators, value, target, event, autoValid) {
@@ -3770,28 +3826,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 RegExpTestValidator = /** @class */ (function (_super) {
     __extends(RegExpTestValidator, _super);
     function RegExpTestValidator(regexp, value, target, event, autoValid) {
@@ -3828,6 +3862,28 @@ var UnCheckedValidator = /** @class */ (function (_super) {
     return UnCheckedValidator;
 }(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 ValidMultipleValidator = /** @class */ (function (_super) {
     __extends(ValidMultipleValidator, _super);
     function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
@@ -3843,46 +3899,21 @@ var ValidMultipleValidator = /** @class */ (function (_super) {
     return ValidMultipleValidator;
 }(MultipleValidator));
 
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    PassValidator.prototype.valid = function () {
-        return true;
-    };
-    return PassValidator;
-}(Validator));
-
-var RequiredValidator = /** @class */ (function (_super) {
-    __extends(RequiredValidator, _super);
-    function RequiredValidator(value, target, event, autoValid) {
+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;
     }
-    RequiredValidator.prototype.valid = function () {
+    NotEmptyValidator.prototype.valid = function () {
+        var _a, _b;
         var value = this.value;
-        // console.log('required', value, value !== undefined && value !== null)
-        return value !== undefined && value !== null;
+        // 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 RequiredValidator;
+    return NotEmptyValidator;
 }(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 ValidValidator = /** @class */ (function (_super) {
     __extends(ValidValidator, _super);
     function ValidValidator(validCallBack, value, target, event, autoValid) {
@@ -3911,6 +3942,20 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(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 ValueNotEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueNotEqualsValidator, _super);
     function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -3925,6 +3970,28 @@ var ValueNotEqualsValidator = /** @class */ (function (_super) {
     return ValueNotEqualsValidator;
 }(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() {
     }
@@ -3994,28 +4061,6 @@ var StorageUtils = /** @class */ (function () {
     return StorageUtils;
 }());
 
-var ClipBoardUtils = /** @class */ (function () {
-    function ClipBoardUtils() {
-    }
-    ClipBoardUtils.readText = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.readText();
-    };
-    ClipBoardUtils.read = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.read();
-    };
-    ClipBoardUtils.writeText = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.writeText(data);
-    };
-    ClipBoardUtils.write = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.write(data);
-    };
-    return ClipBoardUtils;
-}());
-
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;