ps-toolkit-ui 1.3.31 → 1.3.32

package/bundles/ps-toolkit-ui.umd.js

@@ -757,18 +757,19 @@
         InputType[InputType["Price"] = 23] = "Price";
         InputType[InputType["Radio"] = 24] = "Radio";
         InputType[InputType["Tree"] = 25] = "Tree";
-        InputType[InputType["Plaque"] = 26] = "Plaque";
-        InputType[InputType["PlaqueM"] = 27] = "PlaqueM";
-        InputType[InputType["SelectAutoCompletePlaque"] = 28] = "SelectAutoCompletePlaque";
-        InputType[InputType["SelectAutoCompletePlaqueM"] = 29] = "SelectAutoCompletePlaqueM";
-        InputType[InputType["BankCard"] = 30] = "BankCard";
-        InputType[InputType["Constant"] = 31] = "Constant";
-        InputType[InputType["Hidden"] = 32] = "Hidden";
-        InputType[InputType["Table"] = 33] = "Table";
-        InputType[InputType["CarSearch"] = 34] = "CarSearch";
-        InputType[InputType["Car"] = 35] = "Car";
-        InputType[InputType["Finger"] = 36] = "Finger";
-        InputType[InputType["Color"] = 37] = "Color";
+        InputType[InputType["TreeRadio"] = 26] = "TreeRadio";
+        InputType[InputType["Plaque"] = 27] = "Plaque";
+        InputType[InputType["PlaqueM"] = 28] = "PlaqueM";
+        InputType[InputType["SelectAutoCompletePlaque"] = 29] = "SelectAutoCompletePlaque";
+        InputType[InputType["SelectAutoCompletePlaqueM"] = 30] = "SelectAutoCompletePlaqueM";
+        InputType[InputType["BankCard"] = 31] = "BankCard";
+        InputType[InputType["Constant"] = 32] = "Constant";
+        InputType[InputType["Hidden"] = 33] = "Hidden";
+        InputType[InputType["Table"] = 34] = "Table";
+        InputType[InputType["CarSearch"] = 35] = "CarSearch";
+        InputType[InputType["Car"] = 36] = "Car";
+        InputType[InputType["Finger"] = 37] = "Finger";
+        InputType[InputType["Color"] = 38] = "Color";
     })(exports.InputType || (exports.InputType = {}));
     (function (OperationEnum) {
         OperationEnum[OperationEnum["All"] = -1] = "All";
@@ -1934,69 +1935,6 @@
             this.selected = selected;
             this.children = children;
         }
-        TreeRowClass.prototype.toggle = function (onlyChild) {
-            var _this = this;
-            if (onlyChild === void 0) { onlyChild = true; }
-            if (this.selected) {
-                this.unCheck(onlyChild);
-                if (onlyChild) {
-                    setTimeout(function () { _this.unCheckParent(); });
-                }
-            }
-            else {
-                this.check(onlyChild);
-                if (onlyChild) {
-                    setTimeout(function () { _this.checkParent(); });
-                }
-            }
-        };
-        TreeRowClass.prototype.check = function (onlyChild, c) {
-            if (c === void 0) { c = this; }
-            c.selected = true;
-            if (onlyChild) {
-                c.checkChildren(onlyChild);
-            }
-        };
-        TreeRowClass.prototype.unCheck = function (onlyChild, c) {
-            var _this = this;
-            if (c === void 0) { c = this; }
-            c.selected = false;
-            if (onlyChild) {
-                c.children.forEach(function (ch) {
-                    _this.unCheck(onlyChild, ch);
-                });
-            }
-        };
-        TreeRowClass.prototype.checkChildren = function (onlyChild) {
-            var _this = this;
-            this.children.forEach(function (ch) {
-                _this.check(onlyChild, ch);
-            });
-        };
-        TreeRowClass.prototype.checkParent = function (p) {
-            if (p === void 0) { p = this.parent; }
-            if (p) {
-                if (p.children.filter(function (x) { return !x.selected; }).length > 0) {
-                    p.selected = null;
-                }
-                else {
-                    p.selected = true;
-                }
-                this.checkParent(p.parent);
-            }
-        };
-        TreeRowClass.prototype.unCheckParent = function (p) {
-            if (p === void 0) { p = this.parent; }
-            if (p) {
-                if (p.children.filter(function (x) { return x.selected || x.selected == null; }).length > 0) {
-                    p.selected = null;
-                }
-                else {
-                    p.selected = false;
-                }
-                this.unCheckParent(p.parent);
-            }
-        };
         return TreeRowClass;
     }());
     var AccordionClass = /** @class */ (function () {
@@ -4198,7 +4136,7 @@
     FormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'lib-form',
-                    template: "<form [style]=\"form.style\" *ngIf=\"form\" [id]=\"form.id + 'Form'\" [className]=\"'form' + (form.class ? ' ' + form.class : '')\">\r\n  <div *ngIf=\"form.displayLabel\" [className]=\"(form.subName ? '' : 'underline ') + 'title'\">{{this.form.l(this.form.name)}}</div>\r\n  <div *ngIf=\"form.displayLabel && form.subName\" class=\"sub-title underline\">{{this.form.l(this.form.subName)}}</div>\r\n  <div *ngIf=\"form.loading\" class=\"loading\">\r\n    <div class=\"text\" [innerHTML]=\"form.l('LoadingTable', 'Processing')\"></div>\r\n  </div>\r\n  <div *ngIf=\"!form.permission\" class=\"loading\">\r\n    <div class=\"text\"><i class=\"fas fa-shield-alt icon\"></i>{{ form.l(\"PermissionDenied\") }}</div>\r\n  </div>\r\n  <div class=\"inputs\">\r\n    <span *ngFor=\"let inp of form.inputs; let i = index\">\r\n      <lib-form-textbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Text || inp.type == type.Password || inp.type == type.Mobile || inp.type == type.Phone || inp.type == type.Email || inp.type == type.NationalCode || inp.type == type.Number || inp.type == type.Url || inp.type == type.PostalCode || inp.type == type.Price || inp.type == type.Sheba || inp.type == type.Color)\" [inp]=\"inp\"></lib-form-textbox>\r\n      <lib-form-textarea (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.TextArea\" [inp]=\"inp\"></lib-form-textarea>\r\n      <lib-form-checkbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Check\" [inp]=\"inp\"></lib-form-checkbox>\r\n      <lib-form-select [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Select || inp.type == type.SelectSearch || inp.type == type.SelectAutoComplete)\" [inp]=\"inp\"></lib-form-select>\r\n      <lib-form-date [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Date\" [inp]=\"inp\"></lib-form-date>\r\n      <lib-form-time [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Time\" [inp]=\"inp\"></lib-form-time>\r\n      <lib-form-datetime [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.DateTime\" [inp]=\"inp\"></lib-form-datetime>\r\n      <lib-form-label *ngIf=\"inp.visible && inp.type == type.Label\" [inp]=\"inp\"></lib-form-label>\r\n      <lib-form-file (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.File\" [inp]=\"inp\"></lib-form-file>\r\n      <lib-form-button (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Button || inp.type == type.Submit)\" [inp]=\"inp\"></lib-form-button>\r\n      <lib-form-icon (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Icon\" [inp]=\"inp\"></lib-form-icon>\r\n      <lib-form-radio (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Radio\" [inp]=\"inp\"></lib-form-radio>\r\n      <lib-form-tree (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Tree\" [inp]=\"inp\"></lib-form-tree>\r\n      <lib-form-plaque (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Plaque || inp.type == type.PlaqueM)\" [inp]=\"inp\"></lib-form-plaque>\r\n      <lib-form-plaque-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.SelectAutoCompletePlaque || inp.type == type.SelectAutoCompletePlaqueM)\" [inp]=\"inp\"></lib-form-plaque-select>\r\n      <lib-form-bank-card (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.BankCard\" [inp]=\"inp\"></lib-form-bank-card>\r\n      <lib-form-car-search (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.CarSearch\" [inp]=\"inp\"></lib-form-car-search>\r\n      <lib-form-car (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Car\" [inp]=\"inp\"></lib-form-car>\r\n      <lib-form-finger (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Finger\" [inp]=\"inp\"></lib-form-finger>\r\n      <lib-form-table *ngIf=\"inp.visible && inp.type == type.Table\" [inp]=\"inp\"></lib-form-table>\r\n      <lib-form-hidden *ngIf=\"inp.type == type.Hidden\" [inp]=\"inp\"></lib-form-hidden>\r\n    </span>\r\n  </div>\r\n</form>\r\n",
+                    template: "<form [style]=\"form.style\" *ngIf=\"form\" [id]=\"form.id + 'Form'\" [className]=\"'form' + (form.class ? ' ' + form.class : '')\">\r\n  <div *ngIf=\"form.displayLabel\" [className]=\"(form.subName ? '' : 'underline ') + 'title'\">{{this.form.l(this.form.name)}}</div>\r\n  <div *ngIf=\"form.displayLabel && form.subName\" class=\"sub-title underline\">{{this.form.l(this.form.subName)}}</div>\r\n  <div *ngIf=\"form.loading\" class=\"loading\">\r\n    <div class=\"text\" [innerHTML]=\"form.l('LoadingTable', 'Processing')\"></div>\r\n  </div>\r\n  <div *ngIf=\"!form.permission\" class=\"loading\">\r\n    <div class=\"text\"><i class=\"fas fa-shield-alt icon\"></i>{{ form.l(\"PermissionDenied\") }}</div>\r\n  </div>\r\n  <div class=\"inputs\">\r\n    <span *ngFor=\"let inp of form.inputs; let i = index\">\r\n      <lib-form-textbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Text || inp.type == type.Password || inp.type == type.Mobile || inp.type == type.Phone || inp.type == type.Email || inp.type == type.NationalCode || inp.type == type.Number || inp.type == type.Url || inp.type == type.PostalCode || inp.type == type.Price || inp.type == type.Sheba || inp.type == type.Color)\" [inp]=\"inp\"></lib-form-textbox>\r\n      <lib-form-textarea (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.TextArea\" [inp]=\"inp\"></lib-form-textarea>\r\n      <lib-form-checkbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Check\" [inp]=\"inp\"></lib-form-checkbox>\r\n      <lib-form-select [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Select || inp.type == type.SelectSearch || inp.type == type.SelectAutoComplete)\" [inp]=\"inp\"></lib-form-select>\r\n      <lib-form-date [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Date\" [inp]=\"inp\"></lib-form-date>\r\n      <lib-form-time [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Time\" [inp]=\"inp\"></lib-form-time>\r\n      <lib-form-datetime [inForm]=\"true\" (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.DateTime\" [inp]=\"inp\"></lib-form-datetime>\r\n      <lib-form-label *ngIf=\"inp.visible && inp.type == type.Label\" [inp]=\"inp\"></lib-form-label>\r\n      <lib-form-file (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.File\" [inp]=\"inp\"></lib-form-file>\r\n      <lib-form-button (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Button || inp.type == type.Submit)\" [inp]=\"inp\"></lib-form-button>\r\n      <lib-form-icon (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Icon\" [inp]=\"inp\"></lib-form-icon>\r\n      <lib-form-radio (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Radio\" [inp]=\"inp\"></lib-form-radio>\r\n      <lib-form-tree (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Tree || inp.type == type.TreeRadio)\" [inp]=\"inp\"></lib-form-tree>\r\n      <lib-form-plaque (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Plaque || inp.type == type.PlaqueM)\" [inp]=\"inp\"></lib-form-plaque>\r\n      <lib-form-plaque-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.SelectAutoCompletePlaque || inp.type == type.SelectAutoCompletePlaqueM)\" [inp]=\"inp\"></lib-form-plaque-select>\r\n      <lib-form-bank-card (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.BankCard\" [inp]=\"inp\"></lib-form-bank-card>\r\n      <lib-form-car-search (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.CarSearch\" [inp]=\"inp\"></lib-form-car-search>\r\n      <lib-form-car (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Car\" [inp]=\"inp\"></lib-form-car>\r\n      <lib-form-finger (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Finger\" [inp]=\"inp\"></lib-form-finger>\r\n      <lib-form-table *ngIf=\"inp.visible && inp.type == type.Table\" [inp]=\"inp\"></lib-form-table>\r\n      <lib-form-hidden *ngIf=\"inp.type == type.Hidden\" [inp]=\"inp\"></lib-form-hidden>\r\n    </span>\r\n  </div>\r\n</form>\r\n",
                     styles: [".form{border-radius:var(--border-radius-base);float:right;padding:20px;position:relative;width:100%}.form>.title{font-family:VazirBold;font-size:16px;height:40px}.form>.sub-title,.form>.title{float:right;line-height:30px;margin-bottom:10px;position:relative;text-align:right;width:100%}.form>.sub-title{color:var(--black-light);font-family:VazirLight;font-size:12px;height:30px}.form .loading{background-color:#fff;border-radius:var(--border-radius-base);height:100%;right:0;top:0;z-index:4}.form .loading,.form .loading .text{position:absolute;text-align:center;width:100%}.form .loading .text{font-family:VazirBold;height:35px;line-height:35px;top:calc(50% - 20px)}::ng-deep .form .loading .icon{font-size:20px!important;line-height:30px;margin-left:5px;position:relative;top:5px}.form-buttons,.form-error{float:right;width:100%}.form-error{color:var(--red-light);font-size:11px;height:15px;line-height:8px;margin-top:10px;padding:0 10px;position:relative;text-align:center}.form-error .message{float:left;width:calc(100% - 40px)}.form-error .icon{float:right;height:20px;line-height:6px;right:0;top:0;width:40px}.form .inputs{margin:0 -15px}"]
                 },] }
     ];
@@ -5953,8 +5891,13 @@
     var FormTreeItemComponent = /** @class */ (function () {
         function FormTreeItemComponent() {
             this.parent = null;
-            this.changeIndex = new core.EventEmitter();
+            this.toggle = new core.EventEmitter();
         }
+        Object.defineProperty(FormTreeItemComponent.prototype, "type", {
+            get: function () { return exports.InputType; },
+            enumerable: false,
+            configurable: true
+        });
         FormTreeItemComponent.prototype.ngOnInit = function () {
             this.item.parent = this.parent;
         };
@@ -5973,15 +5916,15 @@
             }
         };
         FormTreeItemComponent.prototype.onClick = function () {
-            this.item.toggle(this.tree.onlyChild);
+            this.toggle.emit(this.item);
         };
         return FormTreeItemComponent;
     }());
     FormTreeItemComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'lib-form-tree-item',
-                    template: "<div [className]=\"(item.selected ? 'selected ' : item.selected == null ? 'null ' : '') + 'row-item'\">\r\n  <div (click)=\"onClick()\" class=\"checkbox\">{{tree.l(item.name)}}</div>\r\n  <i *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" [className]=\"(index == 0 && level == 0 ? 'fa-duotone fa-caret-down ' : 'fa-duotone fa-caret-left ') + 'open-close'\"></i>\r\n  <div [className]=\"(index == 0 && level == 0 ? 'open ' : '') + 'children'\" [style]=\"index == 0 && level == 0 ? {display: 'block'} : {}\" *ngIf=\"item.children.length > 0\">\r\n    <div class=\"items rightline\">\r\n      <lib-form-tree-item [level]=\"level + 1\" [index]=\"i\" [item]=\"child\" [parent]=\"item\" [tree]=\"tree\" *ngFor=\"let child of item.children; let i = index\"></lib-form-tree-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".row-item{float:left;position:relative;text-align:center;width:90%}.row-item .content{background-color:rgba(11,72,107,.06666666666666667);border-radius:var(--border-radius-base);cursor:pointer;float:right;width:100%}.row-item .open-close{cursor:pointer;font-size:20px;height:40px;line-height:38px;position:absolute;right:-25px;text-align:center;width:15px}.row-item .content.parent,.row-item .content:hover{background-color:rgba(11,72,107,.13333333333333333)}.row-item .content.parent:hover{background-color:rgba(11,72,107,.26666666666666666)}.row-item .children{display:none;padding:10px;position:relative}.row-item .children,.row-item .children .items{float:left;width:100%}.row-item .children>.line{height:calc(100% - 30px);right:20px;top:15px;width:2px}.row-item .children .row-item>.line,.row-item .children>.line{background-color:rgba(11,72,107,.13333333333333333);position:absolute}.row-item .children .row-item>.line{height:2px;right:-35px;top:17px;width:10px}.row-item .checkbox{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;float:right;font-size:11px;justify-content:center;line-height:20px;min-height:40px;padding:5px 30px;position:relative;text-align:center;width:100%;z-index:2}.row-item .control{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.row-item>.checkbox:before{content:\"\\f0c8\";font-family:Font Awesome\\ 5 Pro;font-size:18px;font-weight:400;height:40px;line-height:40px;position:absolute;right:0;top:0;width:30px}.row-item.selected>.checkbox:before{animation:pop .18s ease-in;color:var(--green);content:\"\\f14a\";font-weight:900}.row-item.null>.checkbox:before{animation:pop .18s ease-in;color:var(--green);content:\"\\f146\";font-weight:900}.row-item:after{background-image:linear-gradient(90deg,transparent,rgba(50,50,50,.25),transparent);border:0;bottom:-1px;content:\"\";float:right;height:1px;position:absolute;right:0;width:100%}::ng-deep lib-form-tree-item:last-of-type>.row-item:after{display:none}"]
+                    template: "<div [className]=\"(item.selected ? 'selected ' : item.selected == null ? 'null ' : '') + 'row-item'\">\r\n  <div (click)=\"onClick()\" [className]=\"'checkbox' + (this.tree.type === type.TreeRadio ? ' radio' : '')\">{{tree.l(item.name)}}</div>\r\n  <i *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" [className]=\"(index == 0 && level == 0 ? 'fa-duotone fa-caret-down ' : 'fa-duotone fa-caret-left ') + 'open-close'\"></i>\r\n  <div [className]=\"(index == 0 && level == 0 ? 'open ' : '') + 'children'\" [style]=\"index == 0 && level == 0 ? {display: 'block'} : {}\" *ngIf=\"item.children.length > 0\">\r\n    <div class=\"items rightline\">\r\n      <lib-form-tree-item [level]=\"level + 1\" (toggle)=\"toggle.emit($event)\" [index]=\"i\" [item]=\"child\" [parent]=\"item\" [tree]=\"tree\" *ngFor=\"let child of item.children; let i = index\"></lib-form-tree-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    styles: [".row-item{float:left;position:relative;text-align:center;width:90%}.row-item .content{background-color:rgba(11,72,107,.06666666666666667);border-radius:var(--border-radius-base);cursor:pointer;float:right;width:100%}.row-item .open-close{cursor:pointer;font-size:20px;height:40px;line-height:38px;position:absolute;right:-25px;text-align:center;width:15px}.row-item .content.parent,.row-item .content:hover{background-color:rgba(11,72,107,.13333333333333333)}.row-item .content.parent:hover{background-color:rgba(11,72,107,.26666666666666666)}.row-item .children{display:none;padding:10px;position:relative}.row-item .children,.row-item .children .items{float:left;width:100%}.row-item .children>.line{height:calc(100% - 30px);right:20px;top:15px;width:2px}.row-item .children .row-item>.line,.row-item .children>.line{background-color:rgba(11,72,107,.13333333333333333);position:absolute}.row-item .children .row-item>.line{height:2px;right:-35px;top:17px;width:10px}.row-item .checkbox{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;float:right;font-size:11px;justify-content:center;line-height:20px;min-height:40px;padding:5px 30px;position:relative;text-align:center;width:100%;z-index:2}.row-item .control{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.row-item>.checkbox:before{content:\"\\f0c8\";font-family:Font Awesome\\ 5 Pro;font-size:18px;font-weight:400;height:40px;line-height:40px;position:absolute;right:0;top:0;width:30px}.row-item>.checkbox.radio:before{content:\"\\f111\"}.row-item.selected>.checkbox:before{animation:pop .18s ease-in;color:var(--green);content:\"\\f14a\";content:\"\\f192\";font-weight:900}.row-item.null>.checkbox:before{animation:pop .18s ease-in;color:var(--green);content:\"\\f146\";font-weight:900}.row-item:after{background-image:linear-gradient(90deg,transparent,rgba(50,50,50,.25),transparent);border:0;bottom:-1px;content:\"\";float:right;height:1px;position:absolute;right:0;width:100%}::ng-deep lib-form-tree-item:last-of-type>.row-item:after{display:none}"]
                 },] }
     ];
     FormTreeItemComponent.ctorParameters = function () { return []; };
@@ -5992,7 +5935,7 @@
         tree: [{ type: core.Input }],
         parent: [{ type: core.Input }],
         base: [{ type: core.Input }],
-        changeIndex: [{ type: core.Output }],
+        toggle: [{ type: core.Output }],
         inputDiv: [{ type: core.ViewChild, args: ['inputDiv',] }],
         inputBase: [{ type: core.ViewChild, args: ['inputBase',] }]
     };
@@ -6019,7 +5962,7 @@
                 return _this.getSelected();
             };
             this.inp.setValue = function (v) {
-                _this.check(v.map(String));
+                _this.setValue(v.map(String));
             };
             this.inp.clear = function () {
                 _this.inp.setValue([], false);
@@ -6068,57 +6011,91 @@
             });
             return l;
         };
-        FormTreeComponent.prototype.check = function (ids, chs) {
+        FormTreeComponent.prototype.setValue = function (ids, rows) {
             var e_2, _a;
-            if (chs === void 0) { chs = this.inp.rows; }
-            var isChecked = false;
-            var cIsChecked = false;
+            if (rows === void 0) { rows = this.inp.rows; }
             try {
-                for (var chs_1 = __values(chs), chs_1_1 = chs_1.next(); !chs_1_1.done; chs_1_1 = chs_1.next()) {
-                    var r = chs_1_1.value;
+                for (var rows_1 = __values(rows), rows_1_1 = rows_1.next(); !rows_1_1.done; rows_1_1 = rows_1.next()) {
+                    var r = rows_1_1.value;
                     r.selected = ids.includes(r.value);
-                    if (r.selected) {
-                        isChecked = true;
-                    }
                     if (this.inp.onlyChild) {
-                        cIsChecked = this.check(ids, r.children);
-                        if (cIsChecked) {
-                            r.selected = r.children.filter(function (x) { return !x.selected; }).length > 0 ? null : true;
+                        if (r.selected) {
+                            this.checkParent(r.parent);
                         }
+                        this.setValue(ids, r.children);
                     }
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (chs_1_1 && !chs_1_1.done && (_a = chs_1.return)) _a.call(chs_1);
+                    if (rows_1_1 && !rows_1_1.done && (_a = rows_1.return)) _a.call(rows_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
-            return isChecked || cIsChecked;
+            return true;
         };
-        FormTreeComponent.prototype.checkChildren = function (chs, ids) {
-            var e_3, _a;
+        FormTreeComponent.prototype.toggle = function (row) {
+            if (row.selected) {
+                this.unCheck(row);
+                if (this.inp.onlyChild && this.inp.type === exports.InputType.Tree) {
+                    this.unCheckParent(row.parent);
+                }
+            }
+            else {
+                this.check(row);
+                if (this.inp.onlyChild && this.inp.type === exports.InputType.Tree) {
+                    this.checkParent(row.parent);
+                }
+            }
+        };
+        FormTreeComponent.prototype.check = function (c) {
+            if (this.inp.type === exports.InputType.Tree) {
+                c.selected = true;
+                if (this.inp.onlyChild) {
+                    this.checkChildren(c);
+                }
+            }
+            else {
+                this.inp.clear();
+                c.selected = true;
+            }
+        };
+        FormTreeComponent.prototype.unCheck = function (c) {
             var _this = this;
-            var _loop_1 = function (r) {
-                if (ids.includes(r.value)) {
-                    r.toggle(this_1.inp.onlyChild);
+            c.selected = false;
+            if (this.inp.onlyChild) {
+                c.children.forEach(function (ch) {
+                    _this.unCheck(ch);
+                });
+            }
+        };
+        FormTreeComponent.prototype.checkChildren = function (c) {
+            var _this = this;
+            c.children.forEach(function (ch) {
+                _this.check(ch);
+            });
+        };
+        FormTreeComponent.prototype.checkParent = function (p) {
+            if (p) {
+                if (p.children.filter(function (x) { return !x.selected; }).length > 0) {
+                    p.selected = null;
                 }
-                setTimeout(function () { _this.checkChildren(r.children, ids); });
-            };
-            var this_1 = this;
-            try {
-                for (var chs_2 = __values(chs), chs_2_1 = chs_2.next(); !chs_2_1.done; chs_2_1 = chs_2.next()) {
-                    var r = chs_2_1.value;
-                    _loop_1(r);
+                else {
+                    p.selected = true;
                 }
+                this.checkParent(p.parent);
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (chs_2_1 && !chs_2_1.done && (_a = chs_2.return)) _a.call(chs_2);
+        };
+        FormTreeComponent.prototype.unCheckParent = function (p) {
+            if (p) {
+                if (p.children.filter(function (x) { return x.selected || x.selected == null; }).length > 0) {
+                    p.selected = null;
                 }
-                finally { if (e_3) throw e_3.error; }
+                else {
+                    p.selected = false;
+                }
+                this.unCheckParent(p.parent);
             }
         };
         return FormTreeComponent;
@@ -6126,7 +6103,7 @@
     FormTreeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'lib-form-tree',
-                    template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [className]=\"'form-input-con tree w-100' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + ' ' + inp.class\">\r\n  <div class=\"form-input\" (click)=\"onClick()\">\r\n    <div *ngIf=\"inp.displayLabel\" class=\"label\"><i *ngIf=\"inp.required\" class=\"fas fa-star-of-life required-icon\"></i>{{inp.getLabel()}}</div>\r\n    <input #inputBase type=\"checkbox\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n    <div [className]=\"(inp.loading ? 'o-h ' : '') + 'control'\">\r\n      <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n      <i *ngIf=\"inp.withClear && inp.value\" (click)=\"inp.clear()\" class=\"fa-duotone fa-eraser clear-icon\"></i>\r\n      <lib-form-tree-item [level]=\"0\" [index]=\"i\" [item]=\"item\" [tree]=\"inp\" [base]=\"true\" *ngFor=\"let item of inp.rows; let i = index\"></lib-form-tree-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [className]=\"'form-input-con tree w-100' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + ' ' + inp.class\">\r\n  <div class=\"form-input\" (click)=\"onClick()\">\r\n    <div *ngIf=\"inp.displayLabel\" class=\"label\"><i *ngIf=\"inp.required\" class=\"fas fa-star-of-life required-icon\"></i>{{inp.getLabel()}}</div>\r\n    <input #inputBase type=\"checkbox\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n    <div [className]=\"(inp.loading ? 'o-h ' : '') + 'control'\">\r\n      <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n      <i *ngIf=\"inp.withClear && inp.value\" (click)=\"inp.clear()\" class=\"fa-duotone fa-eraser clear-icon\"></i>\r\n      <lib-form-tree-item [level]=\"0\" [index]=\"i\" (toggle)=\"toggle($event)\" [item]=\"item\" [tree]=\"inp\" [base]=\"true\" *ngFor=\"let item of inp.rows; let i = index\"></lib-form-tree-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     styles: [".form-input-con.tree{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;padding:0 15px;position:relative}.form-input-con.tree .form-input{float:right;position:relative;width:100%}.form-input-con.tree .form-input .label{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:default;direction:rtl;float:right;font-size:12px;height:20px;line-height:20px;margin-bottom:3px;padding:0 10px;text-align:right;width:100%}.form-input-con.tree.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.tree .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.tree .form-input>.control{background-color:#fff;border:var(--border-input);border-radius:var(--border-radius-base);float:right;max-height:400px;min-height:35px;overflow-x:hidden;overflow-y:auto;padding:10px;position:relative;width:100%}.form-input-con.tree.without-border .form-input>.control{border:unset}.form-input-con.tree:not(.without-border) .form-input .input-base:focus+.control,.form-input-con.tree:not(.without-border) .form-input:hover .control{border:var(--border-input-dark)}.form-input-con.tree.error .form-input .input-base:focus+.control,.form-input-con.tree.error .form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.tree .form-input .input-base{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.tree .form-input i.icon{color:var(--primary);cursor:default;left:0;line-height:35px;top:0;z-index:1}.form-input-con.tree .form-input i.clear-icon,.form-input-con.tree .form-input i.icon{font-size:14px;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px}.form-input-con.tree .form-input i.clear-icon{bottom:0;color:var(--red);cursor:pointer;line-height:38px;right:0;z-index:3}.form-input-con.tree.error .form-input>.control{border:var(--border-input-red)}.form-input-con.tree.error .form-input i.icon{color:var(--red)}"]
                 },] }
     ];