ps-toolkit-ui 1.7.5 → 1.7.8

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

@@ -1920,7 +1920,6 @@
             this.allowed = null;
             this.row = null;
             this.rows = [];
-            this.index = 0;
             this.level = null;
             this.modal = null;
             this.nameFun = null;
@@ -1969,7 +1968,6 @@
             if (u) {
                 this.options = [];
                 this.hover = -1;
-                this.index = 0;
                 this.rows = [];
                 if (typeof u === 'string') {
                     if (!u.includes('{}')) {
@@ -2002,9 +2000,6 @@
                     this.setOptions(r);
                 }
             }
-            else if (this.options instanceof Array) {
-                this.options.forEach(function (x) { return x.index = _this.index++; });
-            }
         };
         InputClass.prototype.setOptions = function (r) {
             var _this = this;
@@ -2035,7 +2030,6 @@
                 }
                 o.search = x.Search;
                 o.option = x;
-                o.index = _this.index++;
                 o.options = tree ? _this.getOptions(r, x.Id) : [];
                 return o;
             });
@@ -4642,9 +4636,6 @@
             }
             else if (code === 40) {
                 e.preventDefault();
-                if (this.inp.hover + 1 >= this.inp.index) {
-                    return;
-                }
                 this.inp.hover = this.getHover();
                 this.setHoverCenter();
             }
@@ -4675,7 +4666,6 @@
             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);
@@ -5246,29 +5236,12 @@
         FormSelectItemComponent.prototype.ngOnInit = function () {
             this.item.parent = this.parent;
         };
-        FormSelectItemComponent.prototype.hoverOption = function (opt) {
-            this.select.hover = opt.index;
-        };
-        FormSelectItemComponent.prototype.toggleChildren = function (e) {
-            var ch = $__namespace(e.target).closest('.option-con').find(' > .children');
-            var oc = $__namespace(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');
-            }
-        };
         return FormSelectItemComponent;
     }());
     FormSelectItemComponent.decorators = [
         { type: core.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)}"]
                 },] }
     ];
@@ -5277,7 +5250,7 @@
         select: [{ type: core.Input }],
         item: [{ type: core.Input }],
         parent: [{ type: core.Input }],
-        index: [{ type: core.Input }]
+        level: [{ type: core.Input }]
     };
 
     var FormSelectComponent = /** @class */ (function () {
@@ -5380,7 +5353,7 @@
             var _this = this;
             setTimeout(function () {
                 $__namespace(_this.inputDiv.nativeElement).removeClass('top');
-                _this.inp.hover = -1;
+                _this.removeHover();
                 if (_this.inp.value === null) {
                     if (!_this.inp.addNew) {
                         _this.inp.search = '';
@@ -5428,7 +5401,7 @@
                     if (!h) {
                         return;
                     }
-                    this.selectOption(h.value);
+                    this.selectOption(h);
                 }
                 else {
                     this.cI('Tab');
@@ -5436,20 +5409,11 @@
             }
             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();
             }
         };
         FormSelectComponent.prototype.toggleOption = function (e) {
@@ -5465,6 +5429,8 @@
                     return;
                 }
                 this.inp.value = null;
+                this.removeHover();
+                this.setHoverCenter();
                 if (this.inp.onChange) {
                     this.inp.onChange(this.inp, false);
                 }
@@ -5489,7 +5455,6 @@
             }
             else {
                 this.inp.value = v;
-                this.inp.hover = va ? va.index : -1;
                 this.inp.search = va ? (((this.inp.type !== exports.InputType.SelectSearch && this.inp.type !== exports.InputType.Select) || va.search) ? va.search : va.name) : '';
             }
             this.setOptions();
@@ -5499,8 +5464,6 @@
             }
             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) {
@@ -5579,17 +5542,6 @@
                 _this.closeOptions();
             }, 20);
         };
-        FormSelectComponent.prototype.setHoverCenter = function () {
-            var _this = this;
-            setTimeout(function () {
-                var hover = $__namespace(_this.inputOptionsDiv.nativeElement).find('.option.hover');
-                var items = $__namespace(_this.inputOptionsDiv.nativeElement).find('.items');
-                if (hover.length === 0) {
-                    return;
-                }
-                items.scrollTop = items.scrollTop - items.offset.top + hover.offset.top - hover.height();
-            }, 1);
-        };
         FormSelectComponent.prototype.title = function () {
             if (this.inp.value == null) {
                 return null;
@@ -5619,33 +5571,8 @@
             }
             return null;
         };
-        FormSelectComponent.prototype.getSelectedHover = function (o) {
-            var e_3, _a;
-            var _this = this;
-            if (o === void 0) { o = this.inp.options; }
-            var h = o.find(function (x) { return x.index === _this.inp.hover; });
-            if (h) {
-                return h;
-            }
-            try {
-                for (var o_1 = __values(o), o_1_1 = o_1.next(); !o_1_1.done; o_1_1 = o_1.next()) {
-                    var i = o_1_1.value;
-                    var hi = this.getSelectedHover(i.options);
-                    if (hi) {
-                        return hi;
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (o_1_1 && !o_1_1.done && (_a = o_1.return)) _a.call(o_1);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-        };
         FormSelectComponent.prototype.getHover = function (i, o, h) {
-            var e_4, _a;
+            var e_3, _a;
             if (i === void 0) { i = 1; }
             if (o === void 0) { o = this.inp.options; }
             if (h === void 0) { h = this.inp.hover; }
@@ -5659,49 +5586,49 @@
                 }
             }
             try {
-                for (var o_2 = __values(o), o_2_1 = o_2.next(); !o_2_1.done; o_2_1 = o_2.next()) {
-                    var it = o_2_1.value;
+                for (var o_1 = __values(o), o_1_1 = o_1.next(); !o_1_1.done; o_1_1 = o_1.next()) {
+                    var it = o_1_1.value;
                     var hi = this.getHover(i, it.options, h);
                     if (hi) {
                         return hi;
                     }
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (o_2_1 && !o_2_1.done && (_a = o_2.return)) _a.call(o_2);
+                    if (o_1_1 && !o_1_1.done && (_a = o_1.return)) _a.call(o_1);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_3) throw e_3.error; }
             }
             return 0;
         };
         FormSelectComponent.prototype.getValue = function (v, o) {
-            var e_5, _a;
+            var e_4, _a;
             if (o === void 0) { o = this.inp.options; }
             var h = o.find(function (x) { return x.value === v; });
             if (h) {
                 return h;
             }
             try {
-                for (var o_3 = __values(o), o_3_1 = o_3.next(); !o_3_1.done; o_3_1 = o_3.next()) {
-                    var i = o_3_1.value;
+                for (var o_2 = __values(o), o_2_1 = o_2.next(); !o_2_1.done; o_2_1 = o_2.next()) {
+                    var i = o_2_1.value;
                     var hi = this.getValue(v, i.options);
                     if (hi) {
                         return hi;
                     }
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (o_3_1 && !o_3_1.done && (_a = o_3.return)) _a.call(o_3);
+                    if (o_2_1 && !o_2_1.done && (_a = o_2.return)) _a.call(o_2);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         };
         FormSelectComponent.prototype.getSelected = function (opts) {
-            var e_6, _a;
+            var e_5, _a;
             if (opts === void 0) { opts = this.inp.options; }
             var l = [];
             try {
@@ -5714,24 +5641,76 @@
                     l = l.concat(rs);
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
                     if (opts_1_1 && !opts_1_1.done && (_a = opts_1.return)) _a.call(opts_1);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_5) throw e_5.error; }
             }
             return l;
         };
         FormSelectComponent.prototype.onClickButton = function () {
             this.inp.onClickButton(this.inp);
         };
+        FormSelectComponent.prototype.setHoverCenter = function () {
+            var _this = this;
+            setTimeout(function () {
+                var option = _this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+                option = option !== null ? option : _this.inputOptionsDiv.nativeElement.querySelector('.option-con.selected');
+                var items = _this.inputOptionsDiv.nativeElement;
+                if (option === null) {
+                    items.scrollTop = 0;
+                    return;
+                }
+                items.scrollTop = option.offsetTop - option.clientHeight * 2;
+            }, 1);
+        };
+        FormSelectComponent.prototype.removeHover = function () {
+            var option = this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+            if (option !== null) {
+                option.classList.remove('hover');
+            }
+        };
+        FormSelectComponent.prototype.getSelectedHover = function () {
+            var option = this.inputOptionsDiv.nativeElement.querySelector('.option-con.hover');
+            if (option === null) {
+                return null;
+            }
+            return option.getAttribute('data-value');
+        };
+        FormSelectComponent.prototype.setHoverUp = function () {
+            var options = this.inputOptionsDiv.nativeElement;
+            var h = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.hover'));
+            var 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();
+        };
+        FormSelectComponent.prototype.setHoverDown = function () {
+            var options = this.inputOptionsDiv.nativeElement;
+            var countOptions = options.querySelectorAll('.option-con').length;
+            var h = [].indexOf.call(options.querySelectorAll('.option-con'), options.querySelector('.option-con.hover'));
+            var 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();
+        };
         return FormSelectComponent;
     }());
     FormSelectComponent.decorators = [
         { type: core.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}"]
                 },] }
     ];