ps-toolkit-ui 1.7.5 → 1.7.8

package/fesm2015/ps-toolkit-ui.js

@@ -1451,7 +1451,6 @@ class InputClass {
         this.allowed = null;
         this.row = null;
         this.rows = [];
-        this.index = 0;
         this.level = null;
         this.modal = null;
         this.nameFun = null;
@@ -1495,7 +1494,6 @@ class InputClass {
         if (u) {
             this.options = [];
             this.hover = -1;
-            this.index = 0;
             this.rows = [];
             if (typeof u === 'string') {
                 if (!u.includes('{}')) {
@@ -1528,9 +1526,6 @@ class InputClass {
                 this.setOptions(r);
             }
         }
-        else if (this.options instanceof Array) {
-            this.options.forEach(x => x.index = this.index++);
-        }
     }
     setOptions(r) {
         this.options = r;
@@ -1558,7 +1553,6 @@ class InputClass {
             }
             o.search = x.Search;
             o.option = x;
-            o.index = this.index++;
             o.options = tree ? this.getOptions(r, x.Id) : [];
             return o;
         });
@@ -3934,9 +3928,6 @@ class FormPlaqueSelectComponent {
         }
         else if (code === 40) {
             e.preventDefault();
-            if (this.inp.hover + 1 >= this.inp.index) {
-                return;
-            }
             this.inp.hover = this.getHover();
             this.setHoverCenter();
         }
@@ -3966,7 +3957,6 @@ class FormPlaqueSelectComponent {
         if (this.inp.rel) {
             this.inp.rel.value = null;
             this.inp.rel.hover = -1;
-            this.inp.rel.index = 0;
             this.inp.rel.search = '';
             this.inp.rel.options = [];
             this.inp.rel.url = this.inp.relUrl.replace('{}', this.inp.value);
@@ -4484,28 +4474,11 @@ class FormSelectItemComponent {
     ngOnInit() {
         this.item.parent = this.parent;
     }
-    hoverOption(opt) {
-        this.select.hover = opt.index;
-    }
-    toggleChildren(e) {
-        const ch = $$1(e.target).closest('.option-con').find(' > .children');
-        const oc = $$1(e.target).closest('.option-con').find(' > .caret-icon');
-        if (ch.hasClass('open')) {
-            ch.removeClass('open');
-            ch.slideUp();
-            oc.removeClass('fa-caret-down').addClass('fa-caret-left');
-        }
-        else {
-            ch.addClass('open');
-            ch.slideDown();
-            oc.addClass('fa-caret-down').removeClass('fa-caret-left');
-        }
-    }
 }
 FormSelectItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-select-item',
-                template: "<div [className]=\"'option-con' + (item.value == select.value ? ' selected' : '') + (item.index == select.hover ? ' hover' : '')\" *ngIf=\"item.show\">\r\n<!--  <i class=\"fas fa-caret-left caret-icon\" (click)=\"toggleChildren($event)\" *ngIf=\"item.options.length > 0\"></i>-->\r\n  <div (mousemove)=\"hoverOption(item)\" (click)=\"selectOption.emit(item.value)\" class=\"option\">\r\n    <div [className]=\"(item.selected ? 'checked ' : item.selected == null ? 'null ' : '') + ' check'\" *ngIf=\"select.multiple\"></div>\r\n    <span [innerHTML]=\"select.l(item.name) | safeHtml\"></span>\r\n  </div>\r\n  <div *ngIf=\"item.options.length > 0 && (select.level === null || select.level > index)\" class=\"children rightline\">\r\n    <lib-form-select-item (selectOption)=\"selectOption.emit($event)\" [index]=\"index + 1\" [parent]=\"item\" [item]=\"op\" [select]=\"select\" *ngFor=\"let op of item.options\"></lib-form-select-item>\r\n  </div>\r\n</div>\r\n",
+                template: "<div [className]=\"'option-con' + (item.value == select.value ? ' selected' : '')\" *ngIf=\"item.show\" [attr.data-value]=\"item.value\">\r\n<!--  <i class=\"fas fa-caret-left caret-icon\" (click)=\"toggleChildren($event)\" *ngIf=\"item.options.length > 0\"></i>-->\r\n  <div (click)=\"selectOption.emit(item.value)\" class=\"option\">\r\n    <div [className]=\"(item.selected ? 'checked ' : item.selected == null ? 'null ' : '') + ' check'\" *ngIf=\"select.multiple\"></div>\r\n    <span [innerHTML]=\"select.l(item.name) | safeHtml\"></span>\r\n  </div>\r\n  <div *ngIf=\"item.options.length > 0 && (select.level === null || select.level > level)\" class=\"children rightline\">\r\n    <lib-form-select-item (selectOption)=\"selectOption.emit($event)\" [level]=\"level + 1\" [parent]=\"item\" [item]=\"op\" [select]=\"select\" *ngFor=\"let op of item.options\"></lib-form-select-item>\r\n  </div>\r\n</div>\r\n",
                 styles: [".option-con{float:right;width:100%}.option-con .caret-icon{float:right;font-size:20px;height:35px;line-height:33px;text-align:center;width:35px}.option-con .children{float:left;position:relative;width:calc(100% - 35px)}.option{align-items:center;border-radius:0;display:flex;float:left;font-size:10px;justify-content:center;line-height:15px;min-height:30px;padding:3px 10px;position:relative;text-align:center;width:100%}::ng-deep .plaque-inp .option{direction:ltr}.option .check:after{content:\"\\f0c8\";font-family:Font Awesome\\ 5 Pro;font-size:18px;font-weight:400;height:20px;line-height:20px;position:absolute;right:5px;top:5px;width:20px}.option .check.checked:after{content:\"\\f14a\"}.option .check.checked:after,.option .check.null:after{animation:pop .18s ease-in;color:var(--green);font-weight:900}.option .check.null:after{content:\"\\f146\"}.option-con.hover>.option,.option-con.selected>.option{background-color:var(--black-white)}"]
             },] }
 ];
@@ -4514,7 +4487,7 @@ FormSelectItemComponent.propDecorators = {
     select: [{ type: Input }],
     item: [{ type: Input }],
     parent: [{ type: Input }],
-    index: [{ type: Input }]
+    level: [{ type: Input }]
 };
 
 class FormSelectComponent {
@@ -4600,7 +4573,7 @@ class FormSelectComponent {
     closeOptions() {
         setTimeout(() => {
             $$1(this.inputDiv.nativeElement).removeClass('top');
-            this.inp.hover = -1;
+            this.removeHover();
             if (this.inp.value === null) {
                 if (!this.inp.addNew) {
                     this.inp.search = '';
@@ -4646,7 +4619,7 @@ class FormSelectComponent {
                 if (!h) {
                     return;
                 }
-                this.selectOption(h.value);
+                this.selectOption(h);
             }
             else {
                 this.cI('Tab');
@@ -4654,20 +4627,11 @@ class FormSelectComponent {
         }
         else if (code === 40) {
             e.preventDefault();
-            if (this.inp.hover + 1 >= this.inp.index) {
-                return;
-            }
-            this.inp.hover = this.getHover();
-            this.setHoverCenter();
+            this.setHoverDown();
         }
         else if (code === 38) {
             e.preventDefault();
-            if (this.inp.hover <= 0) {
-                this.inp.hover = 0;
-                return;
-            }
-            this.inp.hover = this.getHover(-1);
-            this.setHoverCenter();
+            this.setHoverUp();
         }
     }
     toggleOption(e) {
@@ -4683,6 +4647,8 @@ class FormSelectComponent {
                 return;
             }
             this.inp.value = null;
+            this.removeHover();
+            this.setHoverCenter();
             if (this.inp.onChange) {
                 this.inp.onChange(this.inp, false);
             }
@@ -4706,7 +4672,6 @@ class FormSelectComponent {
         }
         else {
             this.inp.value = v;
-            this.inp.hover = va ? va.index : -1;
             this.inp.search = va ? (((this.inp.type !== InputType.SelectSearch && this.inp.type !== InputType.Select) || va.search) ? va.search : va.name) : '';
         }
         this.setOptions();
@@ -4716,8 +4681,6 @@ class FormSelectComponent {
         }
         if (this.inp.rel) {
             this.inp.rel.value = null;
-            this.inp.rel.hover = -1;
-            this.inp.rel.index = 0;
             this.inp.rel.search = '';
             this.inp.rel.options = [];
             if (v !== null) {
@@ -4792,16 +4755,6 @@ class FormSelectComponent {
             this.closeOptions();
         }, 20);
     }
-    setHoverCenter() {
-        setTimeout(() => {
-            const hover = $$1(this.inputOptionsDiv.nativeElement).find('.option.hover');
-            const items = $$1(this.inputOptionsDiv.nativeElement).find('.items');
-            if (hover.length === 0) {
-                return;
-            }
-            items.scrollTop = items.scrollTop - items.offset.top + hover.offset.top - hover.height();
-        }, 1);
-    }
     title() {
         if (this.inp.value == null) {
             return null;
@@ -4820,18 +4773,6 @@ class FormSelectComponent {
         }
         return null;
     }
-    getSelectedHover(o = this.inp.options) {
-        const h = o.find(x => x.index === this.inp.hover);
-        if (h) {
-            return h;
-        }
-        for (const i of o) {
-            const hi = this.getSelectedHover(i.options);
-            if (hi) {
-                return hi;
-            }
-        }
-    }
     getHover(i = 1, o = this.inp.options, h = this.inp.hover) {
         const ho = o.find(x => x.index === h + i);
         if (ho) {
@@ -4876,11 +4817,62 @@ class FormSelectComponent {
     onClickButton() {
         this.inp.onClickButton(this.inp);
     }
+    setHoverCenter() {
+        setTimeout(() => {
+            let option = this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+            option = option !== null ? option : this.inputOptionsDiv.nativeElement.querySelector('.option-con.selected');
+            const items = this.inputOptionsDiv.nativeElement;
+            if (option === null) {
+                items.scrollTop = 0;
+                return;
+            }
+            items.scrollTop = option.offsetTop - option.clientHeight * 2;
+        }, 1);
+    }
+    removeHover() {
+        const option = this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+        if (option !== null) {
+            option.classList.remove('hover');
+        }
+    }
+    getSelectedHover() {
+        const option = this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+        if (option === null) {
+            return null;
+        }
+        return option.getAttribute('data-value');
+    }
+    setHoverUp() {
+        const options = this.inputOptionsDiv.nativeElement;
+        let h = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.hover'));
+        const s = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.selected'));
+        h = h >= 0 ? h : s;
+        if (h > 0) {
+            this.removeHover();
+            options.querySelectorAll('.option-con')[h - 1].classList.add('hover');
+        }
+        this.setHoverCenter();
+    }
+    setHoverDown() {
+        const options = this.inputOptionsDiv.nativeElement;
+        const countOptions = options.querySelectorAll('.option-con').length;
+        let h = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.hover'));
+        const s = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.selected'));
+        h = h >= 0 ? h : s;
+        if (h === -1 && countOptions > 0) {
+            options.querySelector('.option-con').classList.add('hover');
+        }
+        else if (h >= 0 && h < countOptions - 1) {
+            this.removeHover();
+            options.querySelectorAll('.option-con')[h + 1].classList.add('hover');
+        }
+        this.setHoverCenter();
+    }
 }
 FormSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-select',
-                template: "<div #inputDiv [id]=\"inp.id + 'SelectInput'\" [style]=\"inp.style\" [className]=\"'form-input-con select w-100' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + (inp.icon != null ? '' : ' without-icon') + ' ' + inp.class\">\r\n  <div class=\"form-input\" (click)=\"toggleOption($event)\">\r\n    <div *ngIf=\"inp.displayLabel\" class=\"label\"><i *ngIf=\"inp.required\" class=\"f-r fas fa-star-of-life required-icon\"></i><span class=\"f-r\" [innerHTML]=\"inp.getLabel()\"></span></div>\r\n    <div class=\"w-100 p-r\">\r\n      <div *ngIf=\"inp.type === type.Select\" class=\"without-search\"></div>\r\n      <span *ngIf=\"inp.icon != null || inp.loading\" (click)=\"inp.button && onClickButton()\" #inputIcon [className]=\"(inp.button ? inp.button + ' button ' : '') + 'icon'\">\r\n        <i [className]=\"inp.loading ? 'fa-duotone fa-spin fa-spinner ' : inp.icon + ' '\"></i>\r\n      </span>\r\n      <i *ngIf=\"inp.withClear && inp.value\" (click)=\"inp.clear()\" class=\"fa-duotone fa-eraser clear-icon\"></i>\r\n      <input (keydown)=\"onKeyDown($event)\" (focusout)=\"onFocusOut()\" (keyup)=\"onKeyUp($event)\" [disabled]=\"inp.disabled\" [(ngModel)]=\"inp.search\"  [placeholder]=\"inp.placeholder ? inp.l(inp.placeholder) : ''\" #inputBase type=\"text\" [name]=\"inp.name\" class=\"control\" autocomplete=\"off\" [readOnly]=\"inp.type === type.Select\" [maxLength]=\"inp.maxLength > 0 ? inp.maxLength : 524288\">\r\n      <div #inputOptionsDiv class=\"options\">\r\n        <div class=\"items\">\r\n          <lib-form-select-item (selectOption)=\"selectOption($event)\" [index]=\"1\" [select]=\"inp\" [item]=\"opt\" *ngFor=\"let opt of inp.options\"></lib-form-select-item>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div #inputDiv [id]=\"inp.id + 'SelectInput'\" [style]=\"inp.style\" [className]=\"'form-input-con select w-100' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + (inp.icon != null ? '' : ' without-icon') + ' ' + inp.class\">\r\n  <div class=\"form-input\" (click)=\"toggleOption($event)\">\r\n    <div *ngIf=\"inp.displayLabel\" class=\"label\"><i *ngIf=\"inp.required\" class=\"f-r fas fa-star-of-life required-icon\"></i><span class=\"f-r\" [innerHTML]=\"inp.getLabel()\"></span></div>\r\n    <div class=\"w-100 p-r\">\r\n      <div *ngIf=\"inp.type === type.Select\" class=\"without-search\"></div>\r\n      <span *ngIf=\"inp.icon != null || inp.loading\" (click)=\"inp.button && onClickButton()\" #inputIcon [className]=\"(inp.button ? inp.button + ' button ' : '') + 'icon'\">\r\n        <i [className]=\"inp.loading ? 'fa-duotone fa-spin fa-spinner ' : inp.icon + ' '\"></i>\r\n      </span>\r\n      <i *ngIf=\"inp.withClear && inp.value\" (click)=\"inp.clear()\" class=\"fa-duotone fa-eraser clear-icon\"></i>\r\n      <input (keydown)=\"onKeyDown($event)\" (focusout)=\"onFocusOut()\" (keyup)=\"onKeyUp($event)\" [disabled]=\"inp.disabled\" [(ngModel)]=\"inp.search\"  [placeholder]=\"inp.placeholder ? inp.l(inp.placeholder) : ''\" #inputBase type=\"text\" [name]=\"inp.name\" class=\"control\" autocomplete=\"off\" [readOnly]=\"inp.type === type.Select\" [maxLength]=\"inp.maxLength > 0 ? inp.maxLength : 524288\">\r\n      <div class=\"options\">\r\n        <div #inputOptionsDiv class=\"items\">\r\n          <lib-form-select-item (selectOption)=\"selectOption($event)\" [level]=\"1\" [select]=\"inp\" [item]=\"opt\" *ngFor=\"let opt of inp.options\"></lib-form-select-item>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".form-input-con.select{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;font-size:12px;padding:0 15px;position:relative}.form-input-con.select.plaque{width:185px!important}.form-input-con.select>.form-input{float:right;position:relative;width:100%}.form-input-con.select>.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.select.error>.form-input>.label{color:var(--red);font-size:10px}.form-input-con.select>.form-input>.label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.select>.form-input .without-search{cursor:pointer;height:100%;position:absolute;right:0;top:0;width:100%;z-index:3}.form-input-con.select>.form-input .control{background-color:#fff;background-image:none;border:var(--border-input);border-radius:var(--border-radius-base);color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;text-align:center;width:100%}.form-input-con.select>.form-input .control:focus,.form-input-con.select>.form-input:hover .control{border:1px solid var(--black-light);outline:none}.form-input-con.select>.form-input .control:focus{border-radius:var(--border-radius-base) var(--border-radius-base) 0 0;outline:none}.form-input-con.select.error>.form-input .control{border:var(--border-input-red)}.form-input-con.select.error>.form-input .control,.form-input-con.select.error>.form-input span.icon{color:var(--red)}.form-input-con.select.error>.form-input .control:focus,.form-input-con.select.error>.form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.select.top>.form-input .control:focus{border-radius:0 0 var(--border-radius-base) var(--border-radius-base);outline:none}.form-input-con.select>.form-input span.icon{bottom:0;color:var(--primary);font-size:15px;height:35px;left:0;line-height:37px;position:absolute;text-align:center;width:35px;z-index:1}.form-input-con.select>.form-input span.icon.button{background-color:var(--base);border-radius:5px 0 0 5px;color:#fff;cursor:pointer}.form-input-con.select>.form-input span.icon.button:hover{background-color:var(--base-dark)}.form-input-con.select>.form-input span.icon.button.blue{background-color:var(--blue)}.form-input-con.select>.form-input span.icon.button.blue:hover{background-color:var(--blue-dark)}.form-input-con.select>.form-input span.icon.button.green{background-color:var(--green)}.form-input-con.select>.form-input span.icon.button.green:hover{background-color:var(--green-dark)}.form-input-con.select>.form-input span.icon.button.red{background-color:var(--red)}.form-input-con.select>.form-input span.icon.button.red:hover{background-color:var(--red-dark)}.form-input-con.select>.form-input span.icon.button.yellow{background-color:var(--yellow)}.form-input-con.select>.form-input span.icon.button.yellow:hover{background-color:var(--yellow-dark)}.form-input-con.select>.form-input i.clear-icon{bottom:0;color:var(--red);cursor:pointer;font-size:15px;height:35px;line-height:35px;position:absolute;right:0;text-align:center;width:35px;z-index:1}.form-input-con.select>.form-input .options{background-color:#fff;border:var(--border-input);border-radius:0 0 var(--border-radius-base) var(--border-radius-base);cursor:pointer;overflow:hidden;position:absolute;right:0;top:-200000px;width:100%;z-index:103}.form-input-con.select>.form-input .control:focus+.options{top:35px!important}.form-input-con.select.top>.form-input .control:focus+.options{border-radius:var(--border-radius-base) var(--border-radius-base) 0 0;bottom:35px;top:unset!important}.form-input-con.select>.form-input .options .items{float:right;max-height:200px;overflow-y:auto;scroll-behavior:smooth;width:100%}.form-input-con.select>.form-input .options .option{border-radius:0;float:right;font-size:11px;height:35px;line-height:35px;text-align:center;width:100%}.form-input-con.select .tags{float:right;width:100%}.form-input-con.select .tags .tag-con{float:right;padding:5px;width:auto}.form-input-con.select .tags .tag-con .tag{background-color:var(--base);border-radius:var(--border-radius-base);color:#fff;float:right;font-size:12px;height:25px;line-height:25px;overflow:hidden;position:relative;width:auto}.form-input-con.select .tags .tag-con .tag>.label{float:right;padding:0 5px 0 10px;width:auto}.form-input-con.select .tags .tag-con .tag>.delete{cursor:pointer;float:right;line-height:25px;text-align:center;width:25px}.form-input-con.select .tags .tag-con .tag>.delete:hover{background-color:var(--base-dark)}.form-input-con.select.h-50>.form-input .control{height:50px;line-height:50px}.form-input-con.select.h-50>.form-input .control:focus+.options{top:50px!important}.form-input-con.select.h-50.top>.form-input .options{bottom:50px;top:unset!important}.form-input-con.select.h-25,.form-input-con.select.h-25>.form-input .control{height:25px;line-height:25px}.form-input-con.select.h-25>.form-input span.icon{height:25px;line-height:25px;width:25px}.form-input-con.select.h-25>.form-input .control:focus+.options{top:25px!important}.form-input-con.select.h-25.top>.form-input .control:focus+.options{border-radius:var(--border-radius-base) var(--border-radius-base) 0 0;bottom:25px;top:unset!important}.form-input-con.select.h-30,.form-input-con.select.h-30>.form-input .control{height:30px;line-height:30px;padding:0}.form-input-con.select.h-30>.form-input span.icon{height:30px;line-height:30px;width:30px}.form-input-con.select.h-30>.form-input .control:focus+.options{top:30px!important}.form-input-con.select.h-30.top>.form-input .control:focus+.options{border-radius:var(--border-radius-base) var(--border-radius-base) 0 0;bottom:30px;top:unset!important}::ng-deep .form-input-con.select.h-30>.form-input .options .option{font-size:12px;height:30px;line-height:30px}.form-input-con.select.h-45,.form-input-con.select.h-45>.form-input .control{height:45px;line-height:45px}.form-input-con.select.h-45>.form-input .control::-moz-placeholder,.form-input-con.select.h-45>.form-input .control::-webkit-input-placeholder{font-size:12px}.form-input-con.select.h-45>.form-input span.icon{height:45px;line-height:45px;width:45px}.form-input-con.select.h-45>.form-input .control:focus+.options{top:45px!important}.form-input-con.select.h-45.top>.form-input .control:focus+.options{border-radius:var(--border-radius-base) var(--border-radius-base) 0 0;bottom:45px;top:unset!important}::ng-deep .form-input-con.select.h-45>.form-input .options .option{font-size:12px;min-height:40px}.form-input-con.select.without-icon.h-25>.form-input .control,.form-input-con.select.without-icon.h-30>.form-input .control{padding:0}.form-input-con.select.h-30>.form-input span.icon{font-size:11px}::ng-deep .form-input-con.select.without-sub-options>.form-input .options .option{width:100%}.form-input-con.select.disabled>.form-input .control,.form-input-con.select.disabled>.form-input .label,.form-input-con.select.disabled>.form-input span.icon{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;box-shadow:unset;cursor:default;filter:blur(.5px);opacity:.7}"]
             },] }
 ];