npm - ps-toolkit-ui - Versions diffs - 0.0.196 → 0.0.200 - Mend

ps-toolkit-ui 0.0.196 → 0.0.200

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/esm2015/lib/components/clock/clock.component.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from '@angular/core';
+export class ClockComponent {
+    constructor() {
+    }
+    ngOnInit() {
+        this.clockInterval = setInterval(() => {
+            this.clockUpdate();
+        }, 1000);
+    }
+    ngOnDestroy() {
+        clearInterval(this.clockInterval);
+    }
+    clockUpdate() {
+        this.active = this.active.add(1, 'second');
+        document.getElementById('hour').style.transform = 'rotate(' + (this.active.get('hour') * 30 + (Math.floor(this.active.get('minute') / 12) * 6)) + 'deg)';
+        document.getElementById('minute').style.transform = 'rotate(' + (this.active.get('minute') * 6) + 'deg)';
+        document.getElementById('second').style.transform = 'rotate(' + (this.active.get('second') * 6) + 'deg)';
+    }
+}
+ClockComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lib-clock',
+                template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n",
+                styles: ["#ClockCon #clock{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;border-radius:5px;float:left;padding:20px;position:relative;width:30%;z-index:4}#ClockCon #clock #clock{background-color:#fff;border:.0625em solid var(--black-33);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-33),-.25em -.5em .5em var(--black-33),0 0 .0625em .5em var(--black-33),0 0 .0625em .5625em var(--black-33),.125em .25em .5em .5em var(--black-33);height:10em;line-height:1.5em;margin:1em auto;position:relative;transform:scale(1.5);width:10em}#ClockCon #clock #clock *,#ClockCon #clock #clock :after,#ClockCon #clock #clock :before{background-clip:padding-box;box-sizing:border-box}#ClockCon #clock #clock:after,#ClockCon #clock #clock:before,#ClockCon #clock #clock b:after,#ClockCon #clock #clock b:before{position:absolute;text-align:center;width:1.5em}#ClockCon #clock #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock #clock:after,#ClockCon #clock #clock:before{left:4.25em}#ClockCon #clock #clock:before{content:\"12\";top:0}#ClockCon #clock #clock:after{bottom:0;content:\"6\"}#ClockCon #clock #clock b:before{content:\"9\";left:0}#ClockCon #clock #clock b:after{content:\"3\";right:0}#ClockCon #clock #clock span{height:100%;left:4.9375em;position:absolute;top:0;width:.125em}#ClockCon #clock #clock span+span{transform:rotate(90deg)}#ClockCon #clock #clock i,#ClockCon #clock #clock span:after,#ClockCon #clock #clock span:before{height:9em;left:0;position:absolute;top:.5em;width:100%}#ClockCon #clock #clock span:after,#ClockCon #clock #clock span:before{border-color:#000;border-style:solid;border-width:.5em 0;content:\"\";transform:rotate(30deg)}#ClockCon #clock #clock span:after{transform:rotate(60deg)}#ClockCon #clock #clock i{background-color:#000;border:solid transparent;border-radius:40%;border-width:0 0 3em;left:4.85em;width:.3em;z-index:2}#ClockCon #clock #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock #clock i:last-of-type{background-color:var(--comp)}#ClockCon #clock #clock i:last-of-type:after,#ClockCon #clock #clock i:last-of-type:before{border-radius:50%;content:\"\";position:absolute}#ClockCon #clock #clock i:last-of-type:before{background:#000;height:1em;left:-.375em;top:4em;width:1em}#ClockCon #clock #clock i:last-of-type:after{background:#abc;height:.5em;left:-.125em;top:4.25em;width:.5em}"]
+            },] }
+];
+ClockComponent.ctorParameters = () => [];
+ClockComponent.propDecorators = {
+    clock: [{ type: ViewChild, args: ['clock',] }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IkQ6L1Byb2plY3RzL1BzVG9vbGtpdC9VSS9wcm9qZWN0cy9wcy10b29sa2l0LXVpL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2Nsb2NrL2Nsb2NrLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUF3QyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFRekYsTUFBTSxPQUFPLGNBQWM7SUFJekI7SUFDQSxDQUFDO0lBQ0QsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUNwQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDckIsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUNELFdBQVc7UUFDVCxhQUFhLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFDM0MsUUFBUSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLFNBQVMsR0FBRyxDQUM1RCxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUNoRixHQUFHLE1BQU0sQ0FBQztRQUNYLFFBQVEsQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxTQUFTLEdBQUcsQ0FDOUQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUM5QixHQUFHLE1BQU0sQ0FBQztRQUNYLFFBQVEsQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxTQUFTLEdBQUcsQ0FDOUQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUM5QixHQUFHLE1BQU0sQ0FBQztJQUNiLENBQUM7OztZQS9CRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFdBQVc7Z0JBQ3JCLGlPQUFxQzs7YUFFdEM7Ozs7b0JBR0UsU0FBUyxTQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgKiBhcyBtb21lbnQgZnJvbSAnamFsYWxpLW1vbWVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1jbG9jaycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Nsb2NrLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jbG9jay5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIENsb2NrQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3l7XHJcbiAgY2xvY2tJbnRlcnZhbDtcclxuICBAVmlld0NoaWxkKCdjbG9jaycpIGNsb2NrOiBFbGVtZW50UmVmO1xyXG4gIGFjdGl2ZTogbW9tZW50Lk1vbWVudDtcclxuICBjb25zdHJ1Y3Rvcigpe1xyXG4gIH1cclxuICBuZ09uSW5pdCgpOiB2b2lke1xyXG4gICAgdGhpcy5jbG9ja0ludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xyXG4gICAgICB0aGlzLmNsb2NrVXBkYXRlKCk7XHJcbiAgICB9LCAxMDAwKTtcclxuICB9XHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZHtcclxuICAgIGNsZWFySW50ZXJ2YWwodGhpcy5jbG9ja0ludGVydmFsKTtcclxuICB9XHJcblxyXG4gIGNsb2NrVXBkYXRlKCk6IHZvaWR7XHJcbiAgICB0aGlzLmFjdGl2ZSA9IHRoaXMuYWN0aXZlLmFkZCgxLCAnc2Vjb25kJyk7XHJcbiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaG91cicpLnN0eWxlLnRyYW5zZm9ybSA9ICdyb3RhdGUoJyArIChcclxuICAgICAgdGhpcy5hY3RpdmUuZ2V0KCdob3VyJykgKiAzMCArIChNYXRoLmZsb29yKHRoaXMuYWN0aXZlLmdldCgnbWludXRlJykgLyAxMikgKiA2KVxyXG4gICAgKSArICdkZWcpJztcclxuICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtaW51dGUnKS5zdHlsZS50cmFuc2Zvcm0gPSAncm90YXRlKCcgKyAoXHJcbiAgICAgIHRoaXMuYWN0aXZlLmdldCgnbWludXRlJykgKiA2XHJcbiAgICApICsgJ2RlZyknO1xyXG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3NlY29uZCcpLnN0eWxlLnRyYW5zZm9ybSA9ICdyb3RhdGUoJyArIChcclxuICAgICAgdGhpcy5hY3RpdmUuZ2V0KCdzZWNvbmQnKSAqIDZcclxuICAgICkgKyAnZGVnKSc7XHJcbiAgfVxyXG59XHJcbiJdfQ==

package/esm2015/lib/components/footer/footer.component.js CHANGED Viewed

@@ -14,7 +14,7 @@ FooterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-footer',
                 template: "<div id=\"Footer\">\r\n    <div class=\"copyright\">\r\n      <i class=\"far fa-copyright\"></i>\r\n      {{l('Copyright')}}\r\n    </div>\r\n    <div class=\"creator\">\r\n      <i class=\"fas fa-heart\"></i> {{l('CreatorDesc')}} <a href=\"http://partsilicon.ir/\" target=\"_blank\">{{l('CreatorCom')}}</a>\r\n    </div>\r\n</div>\r\n",
-                styles: ["#Footer{background-color:var(--base-dark);bottom:0;color:#fff;font-family:VazirBold;font-size:12px;line-height:35px;position:fixed;right:0;text-align:center;width:100%;z-index:2}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator a,#Footer .creator i{color:var(--icon)!important}@media (max-width:399.98px){#Footer .copyright,#Footer .creator{font-size:11px;line-height:30px;width:100%}}@media (min-width:400px) and (max-width:499.98px){#Footer .copyright,#Footer .creator{line-height:30px;width:100%}}@media (min-width:500px) and (max-width:599.98px){#Footer .copyright,#Footer .creator{line-height:30px;width:100%}}"]
+                styles: ["#Footer{background-color:var(--base-dark);bottom:0;color:#fff;font-family:VazirBold;font-size:12px;line-height:35px;position:fixed;right:0;text-align:center;width:100%;z-index:2}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator a,#Footer .creator i{color:var(--comp)!important}@media (max-width:399.98px){#Footer .copyright,#Footer .creator{font-size:11px;line-height:30px;width:100%}}@media (min-width:400px) and (max-width:499.98px){#Footer .copyright,#Footer .creator{line-height:30px;width:100%}}@media (min-width:500px) and (max-width:599.98px){#Footer .copyright,#Footer .creator{line-height:30px;width:100%}}"]
             },] }
 ];
 FooterComponent.ctorParameters = () => [

package/esm2015/lib/components/form/bank-card/form.bank-card.component.js CHANGED Viewed

@@ -134,7 +134,7 @@ FormBankCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-bank-card',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + ' form-input-con bank-card' + (inp.error == null ? '' : ' error') + (inp.disabled || inp.loading ? ' disabled' : '') + (inp.icon == null ? ' without-icon' : '')\">\r\n  <div class=\"form-input\" (click)=\"onFocusIn($event)\">\r\n    <div (click)=\"part1.focus()\" *ngIf=\"inp.displayLabel\" class=\"label\"><i *ngIf=\"inp.required\" class=\"fas fa-star-of-life required-icon\"></i>{{inp.getLabel()}}</div>\r\n    <div class=\"control\">\r\n      <lib-form-textbox (changeIndex)=\"changeFocus('Part1', $event)\" [inp]=\"part1\"></lib-form-textbox>\r\n      <lib-form-textbox (changeIndex)=\"changeFocus('Part2', $event)\" [inp]=\"part2\"></lib-form-textbox>\r\n      <lib-form-textbox (changeIndex)=\"changeFocus('Part3', $event)\" [inp]=\"part3\"></lib-form-textbox>\r\n      <lib-form-textbox (changeIndex)=\"changeFocus('Part4', $event)\" [inp]=\"part4\"></lib-form-textbox>\r\n    </div>\r\n    <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\" (click)=\"part1.focus()\"></i>\r\n    <i *ngIf=\"inp.withClear && (part1.value || part2.value || part3.value || part4.value)\" (click)=\"inp.clear()\" class=\"fad fa-eraser clear-icon\"></i>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input-con.bank-card{padding:0 15px}.form-input-con.bank-card,.form-input-con.bank-card .form-input{float:right;position:relative;width:100%}.form-input-con.bank-card .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.bank-card.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.bank-card .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.bank-card .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;direction:ltr;float:right;height:35px;overflow:hidden;padding:0 35px;position:relative;width:100%}.form-input-con.bank-card .form-input .control:focus,.form-input-con.bank-card .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.bank-card.error .form-input .control{border:var(--border-input-red)}.form-input-con.bank-card.error .form-input .control,.form-input-con.bank-card.error .form-input span.icon{color:var(--red)}.form-input-con.bank-card.error .form-input .control:focus,.form-input-con.bank-card.error .form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.bank-card .form-input i.icon{color:var(--icon);cursor:text;left:0;line-height:35px;z-index:2}.form-input-con.bank-card .form-input i.clear-icon,.form-input-con.bank-card .form-input i.icon{bottom:0;font-size:14px;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px}.form-input-con.bank-card .form-input i.clear-icon{color:var(--red);cursor:pointer;line-height:38px;right:0;z-index:3}.form-input-con.bank-card.disabled .form-input .control,.form-input-con.bank-card.disabled .form-input .label,.form-input-con.bank-card.disabled .form-input i.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}.form-input-con.bank-card.without-icon .form-input .control{padding:5px 10px}"]
+                styles: [".form-input-con.bank-card{padding:0 15px}.form-input-con.bank-card,.form-input-con.bank-card .form-input{float:right;position:relative;width:100%}.form-input-con.bank-card .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.bank-card.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.bank-card .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.bank-card .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;direction:ltr;float:right;height:35px;overflow:hidden;padding:0 35px;position:relative;width:100%}.form-input-con.bank-card .form-input .control:focus,.form-input-con.bank-card .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.bank-card.error .form-input .control{border:var(--border-input-red)}.form-input-con.bank-card.error .form-input .control,.form-input-con.bank-card.error .form-input span.icon{color:var(--red)}.form-input-con.bank-card.error .form-input .control:focus,.form-input-con.bank-card.error .form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.bank-card .form-input i.icon{color:var(--comp);cursor:text;left:0;line-height:35px;z-index:2}.form-input-con.bank-card .form-input i.clear-icon,.form-input-con.bank-card .form-input i.icon{bottom:0;font-size:14px;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px}.form-input-con.bank-card .form-input i.clear-icon{color:var(--red);cursor:pointer;line-height:38px;right:0;z-index:3}.form-input-con.bank-card.disabled .form-input .control,.form-input-con.bank-card.disabled .form-input .label,.form-input-con.bank-card.disabled .form-input i.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}.form-input-con.bank-card.without-icon .form-input .control{padding:5px 10px}"]
             },] }
 ];
 FormBankCardComponent.propDecorators = {

package/esm2015/lib/components/form/button/form.button.component.js CHANGED Viewed

@@ -55,7 +55,7 @@ FormButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-button',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [className]=\"inp.class + (inp.name == null ? ' only-icon' : (inp.icon == null ? ' without-icon' : '')) + ' form-input-con button'\" [style]=\"inp.style\">\r\n  <div *ngIf=\"inp.url == null\" class=\"form-input\" (click)=\"onClick($event)\">\r\n    <input #inputBase type=\"button\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n    <div class=\"control\">\r\n      <div *ngIf=\"inp.name != null\" class=\"text\" [innerHTML]=\"inp.loading ? (inp.loadingName ? inp.l('Loading', inp.loadingName) : inp.l('LoadingEmpty')) : inp.l(inp.name)\"></div>\r\n      <i *ngIf=\"inp.icon != null\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"inp.url != null\" [target]=\"inp.urlNewTab ? '_blank' : ''\" [routerLink]=\"inp.url\" class=\"form-input\" (click)=\"onClick($event)\">\r\n    <input #inputBase type=\"button\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n    <div class=\"control\">\r\n      <div *ngIf=\"inp.name != null\" class=\"text\" [innerHTML]=\"inp.loading ? (inp.loadingName ? inp.l('Loading', inp.loadingName) : inp.l('LoadingEmpty')) : inp.l(inp.name)\"></div>\r\n      <i *ngIf=\"inp.icon != null\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n    </div>\r\n  </a>\r\n</div>\r\n",
-                styles: [".form-input-con.button{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;padding:0 15px;position:relative;width:100%}.form-input-con.button .form-input{cursor:pointer;float:right;position:relative;width:100%}.form-input-con.button .form-input .input-base{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.button .form-input .control{background-color:var(--base);background-image:none;border:none;border-radius:5px;color:#fff;display:block;float:left;font-weight:300;height:35px;line-height:35px;padding:0 35px 0 20px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.button .form-input i.icon{color:#fff;cursor:pointer;float:right;font-size:12px;height:35px;line-height:35px;position:absolute;right:0;text-align:center;top:0;transition:all .35s ease-in-out;width:30px}.form-input-con.button .form-input .control:hover,.form-input-con.button .form-input .input-base:focus+.control{background-color:var(--base-dark)}.form-input-con.button.red .form-input .control{background-color:var(--red)}.form-input-con.button.red .form-input .input-base:focus+.control,.form-input-con.button.red .form-input:hover .control{background-color:var(--red-dark)}.form-input-con.button.grey .form-input .control{background-color:var(--black-22);color:var(--black)}.form-input-con.button.grey .form-input i.icon{color:var(--black)}.form-input-con.button.grey .form-input .input-base:focus+.control,.form-input-con.button.grey .form-input:hover .control{background-color:var(--black-44)}.form-input-con.button.blue .form-input .control{background-color:var(--blue)}.form-input-con.button.blue .form-input .input-base:focus+.control,.form-input-con.button.blue .form-input:hover .control{background-color:var(--blue-dark)}.form-input-con.button.green .form-input .control{background-color:var(--green)}.form-input-con.button.green .form-input .input-base:focus+.control,.form-input-con.button.green .form-input:hover .control{background-color:var(--green-dark)}.form-input-con.button.icon .form-input .control{background-color:var(--icon)}.form-input-con.button.icon .form-input .input-base:focus+.control,.form-input-con.button.icon .form-input:hover .control{background-color:var(--icon-dark)}.form-input-con.button.yellow .form-input .control{background-color:var(--yellow)}.form-input-con.button.yellow .form-input .input-base:focus+.control,.form-input-con.button.yellow .form-input:hover .control{background-color:var(--yellow-dark)}.form-input-con.button.active .form-input .control{background-color:#fff;border:var(--border-input);color:var(--black)}.form-input-con.button.left-icon .form-input .control{float:right;padding:0 20px 0 35px}.form-input-con.button.left-icon .form-input i.icon{left:0;right:unset}.form-input-con.button.only-icon .form-input .control{min-width:35px;padding:0}.form-input-con.button.only-icon .form-input i.icon{width:100%}.form-input-con.button.only-icon .form-input .text{display:none}.form-input-con.button.h-45{font-size:13px;height:45px}.form-input-con.button.h-45 .form-input .control,.form-input-con.button.h-45 .form-input i.icon{height:45px;line-height:45px}.form-input-con.button.h-45 .form-input i.icon{font-size:17px;width:35px}.form-input-con.button.h-30{font-size:12px;height:30px}.form-input-con.button.h-30 .form-input .control,.form-input-con.button.h-30 .form-input i.icon{height:30px;line-height:30px}.form-input-con.button.h-30 .form-input i.icon{max-width:30px}.form-input-con.button.h-30.only-icon .form-input .control{min-width:30px;padding:0}.form-input-con.button.h-25{font-size:12px;height:25px}.form-input-con.button.h-25 .form-input .control,.form-input-con.button.h-25 .form-input i.icon{height:25px;line-height:25px}.form-input-con.button.h-25 .form-input i.icon{width:25px}.form-input-con.button.h-25.only-icon .form-input .control{min-width:25px;padding:0}.form-input-con.button.h-20{font-size:11px;height:20px}.form-input-con.button.h-20 .form-input .control,.form-input-con.button.h-20 .form-input i.icon{height:20px;line-height:20px}.form-input-con.button.h-20 .form-input i.icon{width:20px}.form-input-con.button.without-icon .form-input .control{min-width:25px;padding:0 8px;width:100%}::ng-deep .form-input-con.button.h-25 .form-input .dot-spinner>div{height:3px;margin-right:2px;width:3px}"]
+                styles: [".form-input-con.button{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;padding:0 15px;position:relative;width:100%}.form-input-con.button .form-input{cursor:pointer;float:right;position:relative;width:100%}.form-input-con.button .form-input .input-base{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.button .form-input .control{background-color:var(--base);background-image:none;border:none;border-radius:5px;color:#fff;display:block;float:left;font-weight:300;height:35px;line-height:35px;padding:0 35px 0 20px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.button .form-input i.icon{color:#fff;cursor:pointer;float:right;font-size:12px;height:35px;line-height:35px;position:absolute;right:0;text-align:center;top:0;transition:all .35s ease-in-out;width:30px}.form-input-con.button .form-input .control:hover,.form-input-con.button .form-input .input-base:focus+.control{background-color:var(--base-dark)}.form-input-con.button.red .form-input .control{background-color:var(--red)}.form-input-con.button.red .form-input .input-base:focus+.control,.form-input-con.button.red .form-input:hover .control{background-color:var(--red-dark)}.form-input-con.button.grey .form-input .control{background-color:var(--black-22);color:var(--black)}.form-input-con.button.grey .form-input i.icon{color:var(--black)}.form-input-con.button.grey .form-input .input-base:focus+.control,.form-input-con.button.grey .form-input:hover .control{background-color:var(--black-44)}.form-input-con.button.blue .form-input .control{background-color:var(--blue)}.form-input-con.button.blue .form-input .input-base:focus+.control,.form-input-con.button.blue .form-input:hover .control{background-color:var(--blue-dark)}.form-input-con.button.green .form-input .control{background-color:var(--green)}.form-input-con.button.green .form-input .input-base:focus+.control,.form-input-con.button.green .form-input:hover .control{background-color:var(--green-dark)}.form-input-con.button.comp .form-input .control{background-color:var(--comp)}.form-input-con.button.comp .form-input .input-base:focus+.control,.form-input-con.button.comp .form-input:hover .control{background-color:var(--comp-dark)}.form-input-con.button.yellow .form-input .control{background-color:var(--yellow)}.form-input-con.button.yellow .form-input .input-base:focus+.control,.form-input-con.button.yellow .form-input:hover .control{background-color:var(--yellow-dark)}.form-input-con.button.active .form-input .control{background-color:#fff;border:var(--border-input);color:var(--black)}.form-input-con.button.left-icon .form-input .control{float:right;padding:0 20px 0 35px}.form-input-con.button.left-icon .form-input i.icon{left:0;right:unset}.form-input-con.button.only-icon .form-input .control{min-width:35px;padding:0}.form-input-con.button.only-icon .form-input i.icon{width:100%}.form-input-con.button.only-icon .form-input .text{display:none}.form-input-con.button.h-45{font-size:13px;height:45px}.form-input-con.button.h-45 .form-input .control,.form-input-con.button.h-45 .form-input i.icon{height:45px;line-height:45px}.form-input-con.button.h-45 .form-input i.icon{font-size:17px;width:35px}.form-input-con.button.h-30{font-size:12px;height:30px}.form-input-con.button.h-30 .form-input .control,.form-input-con.button.h-30 .form-input i.icon{height:30px;line-height:30px}.form-input-con.button.h-30 .form-input i.icon{max-width:30px}.form-input-con.button.h-30.only-icon .form-input .control{min-width:30px;padding:0}.form-input-con.button.h-25{font-size:12px;height:25px}.form-input-con.button.h-25 .form-input .control,.form-input-con.button.h-25 .form-input i.icon{height:25px;line-height:25px}.form-input-con.button.h-25 .form-input i.icon{width:25px}.form-input-con.button.h-25.only-icon .form-input .control{min-width:25px;padding:0}.form-input-con.button.h-20{font-size:11px;height:20px}.form-input-con.button.h-20 .form-input .control,.form-input-con.button.h-20 .form-input i.icon{height:20px;line-height:20px}.form-input-con.button.h-20 .form-input i.icon{width:20px}.form-input-con.button.without-icon .form-input .control{min-width:25px;padding:0 8px;width:100%}::ng-deep .form-input-con.button.h-25 .form-input .dot-spinner>div{height:3px;margin-right:2px;width:3px}"]
             },] }
 ];
 FormButtonComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/car/form.car.component.js CHANGED Viewed

@@ -72,7 +72,7 @@ FormCarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-car',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + (inp.error == null ? '' : ' error') + (inp.icon != null ? '' : ' without-icon') + ' form-input car'\">\r\n  <div *ngIf=\"inp.displayLabel\" class=\"label\">\r\n    <i *ngIf=\"inp.required\" class=\"f-r fas fa-star-of-life required-icon\"></i>\r\n    <i [className]=\"(type === vehicleType.Car ? 'active ' : '') + 'change-type-btn fas fa-car'\" (click)=\"changeType(vehicleType.Car)\"></i>\r\n    <i [className]=\"(type === vehicleType.Motorcycle ? 'active ' : '') + 'change-type-btn fas fa-motorcycle'\" (click)=\"changeType(vehicleType.Motorcycle)\"></i>\r\n  </div>\r\n  <div class=\"w-100 p-r\">\r\n    <lib-form-plaque (changeIndex)=\"changeIndex.emit($event)\" [inp]=\"car\" *ngIf=\"type === vehicleType.Car\"></lib-form-plaque>\r\n    <lib-form-plaque (changeIndex)=\"changeIndex.emit($event)\" [inp]=\"motor\" *ngIf=\"type === vehicleType.Motorcycle\"></lib-form-plaque>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input.car{border-radius:5px;float:right;font-size:15px;position:relative;width:185px}.form-input.car .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.car.error .label{color:var(--red);font-size:10px}.form-input.car .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.car .label .change-type-btn{cursor:pointer;float:right;font-size:16px;height:20px;line-height:20px;text-align:center;width:30px}.form-input.car .label .change-type-btn.fa-user{font-size:14px;line-height:18px}.form-input.car .label .change-type-btn.active,.form-input.car .label .change-type-btn:hover{color:var(--icon)}.form-input.car .control{background-color:#fff;background-image:none;border:none;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input.car .control:focus,.form-input.car:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.car span.icon{bottom:0;color:var(--icon);cursor:text;font-size:14px;height:35px;left:0;line-height:38px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input.car span.icon.button{background-color:var(--base);border-radius:5px 0 0 5px;color:#fff;cursor:pointer}.form-input.car span.icon.button:hover{background-color:var(--base-dark)}.form-input.car span.icon.button.blue{background-color:var(--blue)}.form-input.car span.icon.button.blue:hover{background-color:var(--blue-dark)}.form-input.car span.icon.button.green{background-color:var(--green)}.form-input.car span.icon.button.green:hover{background-color:var(--green-dark)}.form-input.car span.icon.button.red{background-color:var(--red)}.form-input.car span.icon.button.red:hover{background-color:var(--red-dark)}.form-input.car span.icon.button.yellow{background-color:var(--yellow)}.form-input.car span.icon.button.yellow:hover{background-color:var(--yellow-dark)}.form-input.car.disabled .control,.form-input.car.disabled .label,.form-input.car.disabled 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}.form-input.car.error .control{box-shadow:0 1px 3px 0 var(--red)}.form-input.car.error .control,.form-input.car.error span.icon{color:var(--red-cc)}.form-input.car .progress{background-color:var(--icon);border-radius:5px;bottom:0;height:3px;line-height:3px;position:absolute;right:0;transition:width .5s ease-in-out;width:100%;z-index:2}.form-input.car.without-icon .control{padding:5px 10px}.form-input.car.h-50 .control{height:50px}.form-input.car.h-50 span.icon{height:50px;line-height:50px}.form-input.car.h-45 .control{height:45px}.form-input.car.h-45 span.icon{height:45px;line-height:45px}.form-input.car.h-30 .control{font-size:10px;height:30px;padding:0}.form-input.car.h-30 span.icon{height:30px;line-height:30px}.form-input.car.h-35{height:35px}.form-input.car.h-35 .control{height:35px;padding:0 35px}.form-input.car.h-35 span.icon{height:35px;line-height:35px}.form-input.car.h-25 .control{height:25px;padding:0}.form-input.car.h-25 span.icon{height:25px;line-height:25px}.form-input.car.table-search{float:right;margin-right:10%;margin-top:4px;width:80%}.form-input.car.h-22 .control{height:22px;padding:0}.form-input.car.h-22 span.icon{height:22px;line-height:22px}.form-input.car.plaque-part-1{float:left;padding:0!important;width:35px!important}.form-input.car.plaque-part-1.plaque-part-m{width:49px!important}.form-input.car.plaque-part-3{float:left;padding:0!important;width:49px!important}.form-input.car.plaque-part-3.plaque-part-m{width:69px!important}.form-input.car.plaque-part-4{float:left;margin-top:10px;padding:0!important;width:34px!important}.form-input.car.plaque-part-4 .control{height:25px!important}.form-input.car.plaque-part-4.plaque-part-m{display:none!important}.form-input.car.bank-card-part-item{float:left;padding:0!important;width:25%}.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{content:\"\\f068\";font-family:Font Awesome\\ 5 Free;font-size:6px;font-weight:900;height:20px;line-height:20px;position:absolute;right:-10px;text-align:center;top:calc(50% - 10px);width:20px}.form-input.car.bank-card-part-item .control{background-color:initial!important;box-shadow:unset!important;font-size:13px!important;padding:0!important}"]
+                styles: [".form-input.car{border-radius:5px;float:right;font-size:15px;position:relative;width:185px}.form-input.car .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.car.error .label{color:var(--red);font-size:10px}.form-input.car .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.car .label .change-type-btn{cursor:pointer;float:right;font-size:16px;height:20px;line-height:20px;text-align:center;width:30px}.form-input.car .label .change-type-btn.fa-user{font-size:14px;line-height:18px}.form-input.car .label .change-type-btn.active,.form-input.car .label .change-type-btn:hover{color:var(--comp)}.form-input.car .control{background-color:#fff;background-image:none;border:none;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input.car .control:focus,.form-input.car:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.car span.icon{bottom:0;color:var(--comp);cursor:text;font-size:14px;height:35px;left:0;line-height:38px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input.car span.icon.button{background-color:var(--base);border-radius:5px 0 0 5px;color:#fff;cursor:pointer}.form-input.car span.icon.button:hover{background-color:var(--base-dark)}.form-input.car span.icon.button.blue{background-color:var(--blue)}.form-input.car span.icon.button.blue:hover{background-color:var(--blue-dark)}.form-input.car span.icon.button.green{background-color:var(--green)}.form-input.car span.icon.button.green:hover{background-color:var(--green-dark)}.form-input.car span.icon.button.red{background-color:var(--red)}.form-input.car span.icon.button.red:hover{background-color:var(--red-dark)}.form-input.car span.icon.button.yellow{background-color:var(--yellow)}.form-input.car span.icon.button.yellow:hover{background-color:var(--yellow-dark)}.form-input.car.disabled .control,.form-input.car.disabled .label,.form-input.car.disabled 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}.form-input.car.error .control{box-shadow:0 1px 3px 0 var(--red)}.form-input.car.error .control,.form-input.car.error span.icon{color:var(--red-cc)}.form-input.car .progress{background-color:var(--comp);border-radius:5px;bottom:0;height:3px;line-height:3px;position:absolute;right:0;transition:width .5s ease-in-out;width:100%;z-index:2}.form-input.car.without-icon .control{padding:5px 10px}.form-input.car.h-50 .control{height:50px}.form-input.car.h-50 span.icon{height:50px;line-height:50px}.form-input.car.h-45 .control{height:45px}.form-input.car.h-45 span.icon{height:45px;line-height:45px}.form-input.car.h-30 .control{font-size:10px;height:30px;padding:0}.form-input.car.h-30 span.icon{height:30px;line-height:30px}.form-input.car.h-35{height:35px}.form-input.car.h-35 .control{height:35px;padding:0 35px}.form-input.car.h-35 span.icon{height:35px;line-height:35px}.form-input.car.h-25 .control{height:25px;padding:0}.form-input.car.h-25 span.icon{height:25px;line-height:25px}.form-input.car.table-search{float:right;margin-right:10%;margin-top:4px;width:80%}.form-input.car.h-22 .control{height:22px;padding:0}.form-input.car.h-22 span.icon{height:22px;line-height:22px}.form-input.car.plaque-part-1{float:left;padding:0!important;width:35px!important}.form-input.car.plaque-part-1.plaque-part-m{width:49px!important}.form-input.car.plaque-part-3{float:left;padding:0!important;width:49px!important}.form-input.car.plaque-part-3.plaque-part-m{width:69px!important}.form-input.car.plaque-part-4{float:left;margin-top:10px;padding:0!important;width:34px!important}.form-input.car.plaque-part-4 .control{height:25px!important}.form-input.car.plaque-part-4.plaque-part-m{display:none!important}.form-input.car.bank-card-part-item{float:left;padding:0!important;width:25%}.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{content:\"\\f068\";font-family:Font Awesome\\ 5 Free;font-size:6px;font-weight:900;height:20px;line-height:20px;position:absolute;right:-10px;text-align:center;top:calc(50% - 10px);width:20px}.form-input.car.bank-card-part-item .control{background-color:initial!important;box-shadow:unset!important;font-size:13px!important;padding:0!important}"]
             },] }
 ];
 FormCarComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/car/search/form.car.search.component.js CHANGED Viewed

@@ -160,7 +160,7 @@ FormCarSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-car-search',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + (inp.error == null ? '' : ' error') + (inp.icon != null ? '' : ' without-icon') + ' form-input car'\">\r\n  <div *ngIf=\"inp.displayLabel\" class=\"label\">\r\n    <i *ngIf=\"inp.required\" class=\"f-r fas fa-star-of-life required-icon\"></i>\r\n    <i *ngIf=\"inp.rows.includes('Car')\" [className]=\"(type == 'Car' ? 'active ' : '') + 'change-type-btn fas fa-car'\" (click)=\"changeType('Car')\"></i>\r\n    <i *ngIf=\"inp.rows.includes('Motor')\" [className]=\"(type == 'Motor' ? 'active ' : '') + 'change-type-btn fas fa-motorcycle'\" (click)=\"changeType('Motor')\"></i>\r\n    <i *ngIf=\"inp.rows.includes('Driver')\" [className]=\"(type == 'Driver' ? 'active ' : '') + 'change-type-btn fas fa-user'\" (click)=\"changeType('Driver')\"></i>\r\n    <i *ngIf=\"inp.rows.includes('Fingerprint')\" [className]=\"(type == 'Fingerprint' ? 'active ' : '') + 'change-type-btn fas fa-fingerprint'\" (click)=\"changeType('Fingerprint')\"></i>\r\n  </div>\r\n  <div class=\"w-100 p-r\">\r\n    <lib-form-plaque-select [inp]=\"car\" *ngIf=\"type === 'Car'\"></lib-form-plaque-select>\r\n    <lib-form-plaque-select [inp]=\"motor\" *ngIf=\"type === 'Motor'\"></lib-form-plaque-select>\r\n    <lib-form-select [inp]=\"driver\" *ngIf=\"type === 'Driver'\"></lib-form-select>\r\n    <lib-form-select [inp]=\"fingerprint\" *ngIf=\"type === 'Fingerprint'\"></lib-form-select>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input.car{border-radius:5px;float:right;font-size:15px;position:relative;width:185px}.form-input.car .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.car.error .label{color:var(--red);font-size:10px}.form-input.car .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.car .label .change-type-btn{cursor:pointer;float:right;font-size:16px;height:20px;line-height:20px;text-align:center;width:30px}.form-input.car .label .change-type-btn.fa-user{font-size:14px;line-height:18px}.form-input.car .label .change-type-btn.active,.form-input.car .label .change-type-btn:hover{color:var(--icon)}.form-input.car .control{background-color:#fff;background-image:none;border:none;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input.car .control:focus,.form-input.car:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.car span.icon{bottom:0;color:var(--icon);cursor:text;font-size:14px;height:35px;left:0;line-height:38px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input.car span.icon.button{background-color:var(--base);border-radius:5px 0 0 5px;color:#fff;cursor:pointer}.form-input.car span.icon.button:hover{background-color:var(--base-dark)}.form-input.car span.icon.button.blue{background-color:var(--blue)}.form-input.car span.icon.button.blue:hover{background-color:var(--blue-dark)}.form-input.car span.icon.button.green{background-color:var(--green)}.form-input.car span.icon.button.green:hover{background-color:var(--green-dark)}.form-input.car span.icon.button.red{background-color:var(--red)}.form-input.car span.icon.button.red:hover{background-color:var(--red-dark)}.form-input.car span.icon.button.yellow{background-color:var(--yellow)}.form-input.car span.icon.button.yellow:hover{background-color:var(--yellow-dark)}.form-input.car.disabled .control,.form-input.car.disabled .label,.form-input.car.disabled 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}.form-input.car.error .control{box-shadow:0 1px 3px 0 var(--red)}.form-input.car.error .control,.form-input.car.error span.icon{color:var(--red-cc)}.form-input.car .progress{background-color:var(--icon);border-radius:5px;bottom:0;height:3px;line-height:3px;position:absolute;right:0;transition:width .5s ease-in-out;width:100%;z-index:2}.form-input.car.without-icon .control{padding:5px 10px}.form-input.car.h-50 .control{height:50px}.form-input.car.h-50 span.icon{height:50px;line-height:50px}.form-input.car.h-45 .control{height:45px}.form-input.car.h-45 span.icon{height:45px;line-height:45px}.form-input.car.h-30 .control{font-size:10px;height:30px;padding:0}.form-input.car.h-30 span.icon{height:30px;line-height:30px}.form-input.car.h-35{height:35px}.form-input.car.h-35 .control{height:35px;padding:0 35px}.form-input.car.h-35 span.icon{height:35px;line-height:35px}.form-input.car.h-25 .control{height:25px;padding:0}.form-input.car.h-25 span.icon{height:25px;line-height:25px}.form-input.car.table-search{float:right;margin-right:10%;margin-top:4px;width:80%}.form-input.car.h-22 .control{height:22px;padding:0}.form-input.car.h-22 span.icon{height:22px;line-height:22px}.form-input.car.plaque-part-1{float:left;padding:0!important;width:35px!important}.form-input.car.plaque-part-1.plaque-part-m{width:49px!important}.form-input.car.plaque-part-3{float:left;padding:0!important;width:49px!important}.form-input.car.plaque-part-3.plaque-part-m{width:69px!important}.form-input.car.plaque-part-4{float:left;margin-top:10px;padding:0!important;width:34px!important}.form-input.car.plaque-part-4 .control{height:25px!important}.form-input.car.plaque-part-4.plaque-part-m{display:none!important}.form-input.car.bank-card-part-item{float:left;padding:0!important;width:25%}.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{content:\"\\f068\";font-family:Font Awesome\\ 5 Free;font-size:6px;font-weight:900;height:20px;line-height:20px;position:absolute;right:-10px;text-align:center;top:calc(50% - 10px);width:20px}.form-input.car.bank-card-part-item .control{background-color:initial!important;box-shadow:unset!important;font-size:13px!important;padding:0!important}"]
+                styles: [".form-input.car{border-radius:5px;float:right;font-size:15px;position:relative;width:185px}.form-input.car .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.car.error .label{color:var(--red);font-size:10px}.form-input.car .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.car .label .change-type-btn{cursor:pointer;float:right;font-size:16px;height:20px;line-height:20px;text-align:center;width:30px}.form-input.car .label .change-type-btn.fa-user{font-size:14px;line-height:18px}.form-input.car .label .change-type-btn.active,.form-input.car .label .change-type-btn:hover{color:var(--comp)}.form-input.car .control{background-color:#fff;background-image:none;border:none;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input.car .control:focus,.form-input.car:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.car span.icon{bottom:0;color:var(--comp);cursor:text;font-size:14px;height:35px;left:0;line-height:38px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input.car span.icon.button{background-color:var(--base);border-radius:5px 0 0 5px;color:#fff;cursor:pointer}.form-input.car span.icon.button:hover{background-color:var(--base-dark)}.form-input.car span.icon.button.blue{background-color:var(--blue)}.form-input.car span.icon.button.blue:hover{background-color:var(--blue-dark)}.form-input.car span.icon.button.green{background-color:var(--green)}.form-input.car span.icon.button.green:hover{background-color:var(--green-dark)}.form-input.car span.icon.button.red{background-color:var(--red)}.form-input.car span.icon.button.red:hover{background-color:var(--red-dark)}.form-input.car span.icon.button.yellow{background-color:var(--yellow)}.form-input.car span.icon.button.yellow:hover{background-color:var(--yellow-dark)}.form-input.car.disabled .control,.form-input.car.disabled .label,.form-input.car.disabled 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}.form-input.car.error .control{box-shadow:0 1px 3px 0 var(--red)}.form-input.car.error .control,.form-input.car.error span.icon{color:var(--red-cc)}.form-input.car .progress{background-color:var(--comp);border-radius:5px;bottom:0;height:3px;line-height:3px;position:absolute;right:0;transition:width .5s ease-in-out;width:100%;z-index:2}.form-input.car.without-icon .control{padding:5px 10px}.form-input.car.h-50 .control{height:50px}.form-input.car.h-50 span.icon{height:50px;line-height:50px}.form-input.car.h-45 .control{height:45px}.form-input.car.h-45 span.icon{height:45px;line-height:45px}.form-input.car.h-30 .control{font-size:10px;height:30px;padding:0}.form-input.car.h-30 span.icon{height:30px;line-height:30px}.form-input.car.h-35{height:35px}.form-input.car.h-35 .control{height:35px;padding:0 35px}.form-input.car.h-35 span.icon{height:35px;line-height:35px}.form-input.car.h-25 .control{height:25px;padding:0}.form-input.car.h-25 span.icon{height:25px;line-height:25px}.form-input.car.table-search{float:right;margin-right:10%;margin-top:4px;width:80%}.form-input.car.h-22 .control{height:22px;padding:0}.form-input.car.h-22 span.icon{height:22px;line-height:22px}.form-input.car.plaque-part-1{float:left;padding:0!important;width:35px!important}.form-input.car.plaque-part-1.plaque-part-m{width:49px!important}.form-input.car.plaque-part-3{float:left;padding:0!important;width:49px!important}.form-input.car.plaque-part-3.plaque-part-m{width:69px!important}.form-input.car.plaque-part-4{float:left;margin-top:10px;padding:0!important;width:34px!important}.form-input.car.plaque-part-4 .control{height:25px!important}.form-input.car.plaque-part-4.plaque-part-m{display:none!important}.form-input.car.bank-card-part-item{float:left;padding:0!important;width:25%}.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{content:\"\\f068\";font-family:Font Awesome\\ 5 Free;font-size:6px;font-weight:900;height:20px;line-height:20px;position:absolute;right:-10px;text-align:center;top:calc(50% - 10px);width:20px}.form-input.car.bank-card-part-item .control{background-color:initial!important;box-shadow:unset!important;font-size:13px!important;padding:0!important}"]
             },] }
 ];
 FormCarSearchComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/checkbox/form.checkbox.component.js CHANGED Viewed

@@ -53,7 +53,7 @@ FormCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-checkbox',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + ' form-input-con checkbox' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + (inp.icon == null ? ' without-icon' : '')\">\r\n  <div class=\"form-input\" (click)=\"onFocusIn()\">\r\n    <div *ngIf=\"inp.displayLabel\" class=\"label\"></div>\r\n    <input (keydown)=\"onKeyDown($event)\" (change)=\"onChange()\" [disabled]=\"inp.disabled\" [(ngModel)]=\"inp.value\" #inputBase type=\"checkbox\" [name]=\"inp.name\" class=\"check\">\r\n    <div (click)=\"onClick()\" class=\"control\">{{inp.l(inp.name)}}</div>\r\n    <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input-con.checkbox{padding:0 15px}.form-input-con.checkbox,.form-input-con.checkbox .form-input{float:right;position:relative;width:100%}.form-input-con.checkbox .form-input .label{cursor:default;direction:rtl;font-size:12px;height:20px;line-height:20px;margin-bottom:3px;padding:0 10px;text-align:right}.form-input-con.checkbox .form-input .control,.form-input-con.checkbox .form-input .label{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;width:100%}.form-input-con.checkbox .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;cursor:pointer;font-size:11px;height:35px;line-height:35px;padding:0 35px;position:relative;text-align:center;z-index:2}.form-input-con.checkbox .form-input .control:after{content:\"\\f0c8\";font-family:Font Awesome\\ 5 Pro;font-size:17px;font-weight:400;height:35px;line-height:32px;position:absolute;right:0;top:0;width:35px}.form-input-con.checkbox .form-input .check:focus+.control,.form-input-con.checkbox .form-input .control:hover{border:var(--border-input-dark);outline:none}.form-input-con.checkbox.error .form-input .control{border:var(--border-input-red)}.form-input-con.checkbox.error .form-input .control,.form-input-con.checkbox.error .form-input span.icon{color:var(--red)}.form-input-con.checkbox .form-input .check{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.checkbox .form-input .check:checked+.control:after{animation:pop .18s ease-in;color:var(--green);content:\"\\f14a\";font-weight:900}.form-input-con.checkbox .form-input i.icon{bottom:0;color:var(--icon);cursor:pointer;font-size:13px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input-con.checkbox.without-icon .form-input .control{padding:0 0 0 35px}.form-input-con.checkbox.h-30 .form-input .control{font-size:10px;height:30px;line-height:28px;padding:0 30px}.form-input-con.checkbox.h-30 .form-input .control:after{font-size:14px;height:30px;line-height:28px;width:30px}.form-input-con.checkbox.h-30 .form-input i.icon{font-size:11px;height:30px;line-height:30px;width:30px}.form-input-con.checkbox.h-30.without-icon .form-input .control{padding:0 0 0 30px}"]
+                styles: [".form-input-con.checkbox{padding:0 15px}.form-input-con.checkbox,.form-input-con.checkbox .form-input{float:right;position:relative;width:100%}.form-input-con.checkbox .form-input .label{cursor:default;direction:rtl;font-size:12px;height:20px;line-height:20px;margin-bottom:3px;padding:0 10px;text-align:right}.form-input-con.checkbox .form-input .control,.form-input-con.checkbox .form-input .label{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;width:100%}.form-input-con.checkbox .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;cursor:pointer;font-size:11px;height:35px;line-height:35px;padding:0 35px;position:relative;text-align:center;z-index:2}.form-input-con.checkbox .form-input .control:after{content:\"\\f0c8\";font-family:Font Awesome\\ 5 Pro;font-size:17px;font-weight:400;height:35px;line-height:32px;position:absolute;right:0;top:0;width:35px}.form-input-con.checkbox .form-input .check:focus+.control,.form-input-con.checkbox .form-input .control:hover{border:var(--border-input-dark);outline:none}.form-input-con.checkbox.error .form-input .control{border:var(--border-input-red)}.form-input-con.checkbox.error .form-input .control,.form-input-con.checkbox.error .form-input span.icon{color:var(--red)}.form-input-con.checkbox .form-input .check{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.checkbox .form-input .check:checked+.control:after{animation:pop .18s ease-in;color:var(--green);content:\"\\f14a\";font-weight:900}.form-input-con.checkbox .form-input i.icon{bottom:0;color:var(--comp);cursor:pointer;font-size:13px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:2}.form-input-con.checkbox.without-icon .form-input .control{padding:0 0 0 35px}.form-input-con.checkbox.h-30 .form-input .control{font-size:10px;height:30px;line-height:28px;padding:0 30px}.form-input-con.checkbox.h-30 .form-input .control:after{font-size:14px;height:30px;line-height:28px;width:30px}.form-input-con.checkbox.h-30 .form-input i.icon{font-size:11px;height:30px;line-height:30px;width:30px}.form-input-con.checkbox.h-30.without-icon .form-input .control{padding:0 0 0 30px}"]
             },] }
 ];
 FormCheckboxComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/date/form.date.component.js CHANGED Viewed

@@ -238,7 +238,7 @@ FormDateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-date',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + ' form-input-con date' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')\">\r\n  <div class=\"form-input\" (click)=\"toggleCalendar()\">\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    <div class=\"w-100 p-r\">\r\n      <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n      <i *ngIf=\"inp.withClear && inp.value\" (click)=\"inp.clear()\" class=\"fad fa-eraser clear-icon\"></i>\r\n      <input (keydown)=\"onKeyDown($event)\" (keyup)=\"onKeyUp($event)\" (focusout)=\"onFocusOut()\" [disabled]=\"inp.disabled\" [(ngModel)]=\"inp.search\" #inputBase [name]=\"inp.name\" [placeholder]=\"inp.l(inp.name)\" class=\"control\" autocomplete=\"off\" maxlength=\"\">\r\n      <div #inputCalendarDiv class=\"calendar\">\r\n        <div class=\"header\">\r\n          <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n          <div class=\"title\">\r\n            <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n              {{active.format('jYYYY')}}\r\n            </div>\r\n            <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n              {{getActiveMonth()}}\r\n            </div>\r\n          </div>\r\n          <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n        </div>\r\n        <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n          <div class=\"day-names underline\">\r\n            <div class=\"item\">\u0634</div>\r\n            <div class=\"item\">\u06CC</div>\r\n            <div class=\"item\">\u062F</div>\r\n            <div class=\"item\">\u0633</div>\r\n            <div class=\"item\">\u0686</div>\r\n            <div class=\"item\">\u067E</div>\r\n            <div class=\"item\">\u062C</div>\r\n          </div>\r\n          <div class=\"days\">\r\n            <div [className]=\"'item not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\">{{d.day}}</div>\r\n            <div (click)=\"selectDate(d)\" [className]=\"'item' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\">{{d.day}}</div>\r\n            <div [className]=\"'item not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\">{{d.day}}</div>\r\n          </div>\r\n        </div>\r\n        <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n          <div [className]=\"(i + 1 == active.format('jM') ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n        </div>\r\n        <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n          <div [className]=\"(y == active.format('jYYYY') ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input-con.date{padding:0 15px}.form-input-con.date,.form-input-con.date .form-input{float:right;position:relative;width:100%}.form-input-con.date .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.date.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.date .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.date .form-input .control{background-color:#fff;background-image:none;border:none;border:var(--border-input);border-radius:5px;color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.date .form-input .control:focus{border-radius:5px 5px 5px 0}.form-input-con.date.top .form-input .control:focus{border-radius:0 5px 5px 5px}.form-input-con.date .form-input .control:focus,.form-input-con.date .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.date .form-input i.icon{color:var(--icon);cursor:text;font-size:13px;left:0;line-height:35px}.form-input-con.date .form-input i.clear-icon,.form-input-con.date .form-input i.icon{bottom:0;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:3}.form-input-con.date .form-input i.clear-icon{color:var(--red);cursor:pointer;font-size:14px;line-height:38px;right:0}.form-input-con.date.disabled .form-input .control,.form-input-con.date.disabled .form-input .label,.form-input-con.date.disabled .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7}.form-input-con.date.error .form-input .control,.form-input-con.date.error .form-input i.icon{color:var(--red-cc)}.form-input-con.date.error .form-input .control{border:var(--border-input-red)}.form-input-con.date.error .form-input .control:focus,.form-input-con.date.error .form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.date .form-input .calendar{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-color:#fff;border:var(--border-input);border-radius:0 0 5px 5px;color:var(--black);height:235px;left:0;overflow:hidden;position:absolute;top:-200000px;width:200px;z-index:102}.form-input-con.date .form-input .control:focus+.calendar{top:35px!important}.form-input-con.date.top .form-input .control:focus+.calendar{border-radius:5px 5px 0 0;bottom:35px;top:unset!important}.form-input-con.date .form-input .days-con{float:right;width:100%}.form-input-con.date .form-input .calendar .header{background:var(--black-33);float:right;width:100%}.form-input-con.date .form-input .calendar .header .next-month,.form-input-con.date .form-input .calendar .header .previous-month{cursor:pointer;float:right;font-size:15px;height:30px;line-height:30px;text-align:center;width:30px}.form-input-con.date .form-input .calendar .header .next-month:hover,.form-input-con.date .form-input .calendar .header .previous-month:hover{background:var(--black-33)}.form-input-con.date .form-input .calendar .header .title{float:right;font-family:VazirBold;font-size:12px;height:30px;line-height:30px;text-align:center;width:calc(100% - 60px)}.form-input-con.date .form-input .calendar .header .header-item{background-color:#fff;border:var(--border-input);border-radius:5px;cursor:pointer;float:right;height:20px;line-height:20px;margin-right:5px;margin-top:5px;text-align:center}.form-input-con.date .form-input .calendar .header .header-item:hover{background-color:var(--base-11)}.form-input-con.date .form-input .calendar .header .header-item.year{width:calc(40% - 10px)}.form-input-con.date .form-input .calendar .header .header-item.month{width:calc(60% - 10px)}.form-input-con.date .form-input .calendar .days-con .day-names{float:right;font-family:VazirLight;font-size:12px;position:relative;text-align:center;width:100%}.form-input-con.date .form-input .calendar .days-con .day-names .item{float:right;font-size:12px;height:25px;line-height:25px;text-align:center;width:14.28571%}.form-input-con.date .form-input .calendar .days-con .days{float:right;font-size:12px;text-align:center;width:100%}.form-input-con.date .form-input .calendar .days-con .days .item{cursor:pointer;float:right;font-size:11px;height:30px;line-height:30px;text-align:center;width:14.28571%}.form-input-con.date .form-input .calendar .days-con .days .item.not-in-month{cursor:default;opacity:.5}.form-input-con.date .form-input .calendar .days-con .days .item:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .days-con .days .item.not-in-month:hover{background-color:unset}.form-input-con.date .form-input .calendar .days-con .days .item.today{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .days-con .days .item.selected{background-color:var(--icon);color:#fff}.form-input-con.date .form-input .calendar .days-con .days .item.today.not-in-month:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .months-con{float:right;width:100%}.form-input-con.date .form-input .calendar .months-con .month{cursor:pointer;float:right;font-size:11px;height:51.25px;line-height:51.25px;text-align:center;width:33.33333%}.form-input-con.date .form-input .calendar .months-con .month.selected,.form-input-con.date .form-input .calendar .months-con .month:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .years-con{float:right;width:100%}.form-input-con.date .form-input .calendar .years-con .year{cursor:pointer;float:right;font-size:11px;height:41px;line-height:41px;text-align:center;width:25%}.form-input-con.date .form-input .calendar .years-con .year.selected,.form-input-con.date .form-input .calendar .years-con .year:hover{background-color:var(--black-33)}.form-input-con.date.table-search{float:right;padding:0;width:100%}.form-input-con.date.h-25 .form-input .control{height:25px;padding:5px}.form-input-con.date.h-25 .form-input i.icon{display:none}.form-input-con.date.h-25 .form-input .control:focus+.calendar{top:25px!important}.form-input-con.date.top.h-25 .form-input .control:focus+.calendar{bottom:25px}"]
+                styles: [".form-input-con.date{padding:0 15px}.form-input-con.date,.form-input-con.date .form-input{float:right;position:relative;width:100%}.form-input-con.date .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.date.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.date .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.date .form-input .control{background-color:#fff;background-image:none;border:none;border:var(--border-input);border-radius:5px;color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.date .form-input .control:focus{border-radius:5px 5px 5px 0}.form-input-con.date.top .form-input .control:focus{border-radius:0 5px 5px 5px}.form-input-con.date .form-input .control:focus,.form-input-con.date .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.date .form-input i.icon{color:var(--comp);cursor:text;font-size:13px;left:0;line-height:35px}.form-input-con.date .form-input i.clear-icon,.form-input-con.date .form-input i.icon{bottom:0;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:3}.form-input-con.date .form-input i.clear-icon{color:var(--red);cursor:pointer;font-size:14px;line-height:38px;right:0}.form-input-con.date.disabled .form-input .control,.form-input-con.date.disabled .form-input .label,.form-input-con.date.disabled .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7}.form-input-con.date.error .form-input .control,.form-input-con.date.error .form-input i.icon{color:var(--red-cc)}.form-input-con.date.error .form-input .control{border:var(--border-input-red)}.form-input-con.date.error .form-input .control:focus,.form-input-con.date.error .form-input:hover .control{border:var(--border-input-red-dark)}.form-input-con.date .form-input .calendar{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-color:#fff;border:var(--border-input);border-radius:0 0 5px 5px;color:var(--black);height:235px;left:0;overflow:hidden;position:absolute;top:-200000px;width:200px;z-index:102}.form-input-con.date .form-input .control:focus+.calendar{top:35px!important}.form-input-con.date.top .form-input .control:focus+.calendar{border-radius:5px 5px 0 0;bottom:35px;top:unset!important}.form-input-con.date .form-input .days-con{float:right;width:100%}.form-input-con.date .form-input .calendar .header{background:var(--black-33);float:right;width:100%}.form-input-con.date .form-input .calendar .header .next-month,.form-input-con.date .form-input .calendar .header .previous-month{cursor:pointer;float:right;font-size:15px;height:30px;line-height:30px;text-align:center;width:30px}.form-input-con.date .form-input .calendar .header .next-month:hover,.form-input-con.date .form-input .calendar .header .previous-month:hover{background:var(--black-33)}.form-input-con.date .form-input .calendar .header .title{float:right;font-family:VazirBold;font-size:12px;height:30px;line-height:30px;text-align:center;width:calc(100% - 60px)}.form-input-con.date .form-input .calendar .header .header-item{background-color:#fff;border:var(--border-input);border-radius:5px;cursor:pointer;float:right;height:20px;line-height:20px;margin-right:5px;margin-top:5px;text-align:center}.form-input-con.date .form-input .calendar .header .header-item:hover{background-color:var(--base-11)}.form-input-con.date .form-input .calendar .header .header-item.year{width:calc(40% - 10px)}.form-input-con.date .form-input .calendar .header .header-item.month{width:calc(60% - 10px)}.form-input-con.date .form-input .calendar .days-con .day-names{float:right;font-family:VazirLight;font-size:12px;position:relative;text-align:center;width:100%}.form-input-con.date .form-input .calendar .days-con .day-names .item{float:right;font-size:12px;height:25px;line-height:25px;text-align:center;width:14.28571%}.form-input-con.date .form-input .calendar .days-con .days{float:right;font-size:12px;text-align:center;width:100%}.form-input-con.date .form-input .calendar .days-con .days .item{cursor:pointer;float:right;font-size:11px;height:30px;line-height:30px;text-align:center;width:14.28571%}.form-input-con.date .form-input .calendar .days-con .days .item.not-in-month{cursor:default;opacity:.5}.form-input-con.date .form-input .calendar .days-con .days .item:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .days-con .days .item.not-in-month:hover{background-color:unset}.form-input-con.date .form-input .calendar .days-con .days .item.today{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .days-con .days .item.selected{background-color:var(--comp);color:#fff}.form-input-con.date .form-input .calendar .days-con .days .item.today.not-in-month:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .months-con{float:right;width:100%}.form-input-con.date .form-input .calendar .months-con .month{cursor:pointer;float:right;font-size:11px;height:51.25px;line-height:51.25px;text-align:center;width:33.33333%}.form-input-con.date .form-input .calendar .months-con .month.selected,.form-input-con.date .form-input .calendar .months-con .month:hover{background-color:var(--black-33)}.form-input-con.date .form-input .calendar .years-con{float:right;width:100%}.form-input-con.date .form-input .calendar .years-con .year{cursor:pointer;float:right;font-size:11px;height:41px;line-height:41px;text-align:center;width:25%}.form-input-con.date .form-input .calendar .years-con .year.selected,.form-input-con.date .form-input .calendar .years-con .year:hover{background-color:var(--black-33)}.form-input-con.date.table-search{float:right;padding:0;width:100%}.form-input-con.date.h-25 .form-input .control{height:25px;padding:5px}.form-input-con.date.h-25 .form-input i.icon{display:none}.form-input-con.date.h-25 .form-input .control:focus+.calendar{top:25px!important}.form-input-con.date.top.h-25 .form-input .control:focus+.calendar{bottom:25px}"]
             },] }
 ];
 FormDateComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/datetime/form.datetime.component.js CHANGED Viewed

@@ -92,7 +92,7 @@ FormDatetimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-datetime',
                 template: "<div [id]=\"inp.name + 'Input'\" [style]=\"inp.style\" [className]=\"inp.class + ' form-input-con datetime' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')\">\r\n  <div class=\"form-input\">\r\n    <div *ngIf=\"inp.displayLabel\" (click)=\"this.date.focus()\" class=\"label\"><i *ngIf=\"inp.required\" class=\"fas fa-star-of-life required-icon\"></i>{{inp.getLabel()}}</div>\r\n    <div class=\"w-100 p-r\">\r\n      <i (click)=\"this.date.focus()\" *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n      <i *ngIf=\"inp.withClear && (date.value || time.value)\" (click)=\"inp.clear()\" class=\"fad fa-eraser clear-icon\"></i>\r\n      <lib-form-date (changeIndex)=\"changeFocus('Date', $event)\" [inp]=\"date\"></lib-form-date>\r\n      <lib-form-time (changeIndex)=\"changeFocus('Time', $event)\" [inp]=\"time\"></lib-form-time>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input-con.datetime{padding:0 15px}.form-input-con.datetime,.form-input-con.datetime .form-input{float:right;position:relative;width:100%}.form-input-con.datetime .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.datetime.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.datetime .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.datetime .form-input .control{background-color:#fff;background-image:none;border:none;border:var(--border-input);border-radius:5px;color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.datetime .form-input .control:focus{border-radius:5px 5px 5px 0}.form-input-con.datetime.top .form-input .control:focus{border-radius:0 5px 5px 5px}.form-input-con.datetime .form-input .control:focus,.form-input-con.datetime .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.datetime .form-input i.icon{color:var(--icon);cursor:text;font-size:13px;left:0;line-height:35px}.form-input-con.datetime .form-input i.clear-icon,.form-input-con.datetime .form-input i.icon{bottom:0;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:3}.form-input-con.datetime .form-input i.clear-icon{color:var(--red);cursor:pointer;font-size:14px;line-height:38px;right:0}.form-input-con.datetime.disabled .form-input,.form-input-con.datetime.disabled .form-input .label,.form-input-con.datetime.disabled .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7;pointer-events:none}::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{padding:5px 15px 5px 35px!important;padding:5px 15px!important}::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .control,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .label,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input i.icon,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .control,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .label,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7;pointer-events:none}.form-input-con.datetime.error .form-input .control,.form-input-con.datetime.error .form-input i.icon{color:var(--red-cc)}.form-input-con.datetime.error .form-input .control{border:var(--border-input-red)}.form-input-con.datetime.error .form-input .control:focus,.form-input-con.datetime.error .form-input:hover .control{border:var(--border-input-red-dark)}::ng-deep .form-input-con.datetime .form-input .form-input-con.date{float:left;padding:0;width:60%}::ng-deep .form-input-con.datetime .form-input .form-input-con.time{float:right;padding:0;width:40%}::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{border-radius:5px 0 0 5px!important}::ng-deep .form-input-con.datetime .form-input .form-input-con.time .form-input .control{border-left:unset!important;border-radius:0 5px 5px 0!important}"]
+                styles: [".form-input-con.datetime{padding:0 15px}.form-input-con.datetime,.form-input-con.datetime .form-input{float:right;position:relative;width:100%}.form-input-con.datetime .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.datetime.error .form-input .label{color:var(--red);font-size:10px}.form-input-con.datetime .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.datetime .form-input .control{background-color:#fff;background-image:none;border:none;border:var(--border-input);border-radius:5px;color:var(--black);display:block;font-family:Vazir;font-size:11px;height:35px;padding:5px 35px;position:relative;text-align:center;width:100%;z-index:2}.form-input-con.datetime .form-input .control:focus{border-radius:5px 5px 5px 0}.form-input-con.datetime.top .form-input .control:focus{border-radius:0 5px 5px 5px}.form-input-con.datetime .form-input .control:focus,.form-input-con.datetime .form-input:hover .control{border:var(--border-input-dark);outline:none}.form-input-con.datetime .form-input i.icon{color:var(--comp);cursor:text;font-size:13px;left:0;line-height:35px}.form-input-con.datetime .form-input i.clear-icon,.form-input-con.datetime .form-input i.icon{bottom:0;height:35px;position:absolute;text-align:center;transition:all .35s ease-in-out;width:35px;z-index:3}.form-input-con.datetime .form-input i.clear-icon{color:var(--red);cursor:pointer;font-size:14px;line-height:38px;right:0}.form-input-con.datetime.disabled .form-input,.form-input-con.datetime.disabled .form-input .label,.form-input-con.datetime.disabled .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7;pointer-events:none}::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{padding:5px 15px 5px 35px!important;padding:5px 15px!important}::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .control,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .label,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input i.icon,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .control,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .label,::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input i.icon{cursor:default;filter:blur(.5px);opacity:.7;pointer-events:none}.form-input-con.datetime.error .form-input .control,.form-input-con.datetime.error .form-input i.icon{color:var(--red-cc)}.form-input-con.datetime.error .form-input .control{border:var(--border-input-red)}.form-input-con.datetime.error .form-input .control:focus,.form-input-con.datetime.error .form-input:hover .control{border:var(--border-input-red-dark)}::ng-deep .form-input-con.datetime .form-input .form-input-con.date{float:left;padding:0;width:60%}::ng-deep .form-input-con.datetime .form-input .form-input-con.time{float:right;padding:0;width:40%}::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{border-radius:5px 0 0 5px!important}::ng-deep .form-input-con.datetime .form-input .form-input-con.time .form-input .control{border-left:unset!important;border-radius:0 5px 5px 0!important}"]
             },] }
 ];
 FormDatetimeComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/file/form.file.component.js CHANGED Viewed

@@ -119,7 +119,7 @@ FormFileComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-file',
                 template: "<label #inputDiv [id]=\"inp.name + 'Input'\" [for]=\"inp.name + 'InputFile'\" [className]=\"inp.class + (inp.error == null ? '' : ' error') + (inp.value != null && inp.value != '' ? ' has-value' : '') + ' form-input-con file'\">\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 #inputBaseFile class=\"input-base-file\" type=\"file\" [id]=\"inp.name + 'InputFile'\" [multiple]=\"inp.multiple\" (change)=\"onChange($event)\">\r\n    <input #inputBase type=\"text\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n    <div class=\"control\">\r\n      <div class=\"title\">{{title()}}</div>\r\n      <div class=\"button\">{{inp.multiple ? inp.l(\"ChooseFiles\") : inp.l(\"ChooseFile\")}}</div>\r\n    </div>\r\n    <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n  </div>\r\n</label>\r\n",
-                styles: [".form-input-con.file{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;padding:0 15px}.form-input-con.file,.form-input-con.file .form-input{float:right;position:relative;width:100%}.form-input-con.file .form-input .input-base,.form-input-con.file .form-input .input-base-file{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.file .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;float:left;font-size:11px;height:35px;line-height:35px;overflow:hidden;padding:0 135px 0 35px;position:relative;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;z-index:2}.form-input-con.file .form-input .control .title{float:right;width:100%}.form-input-con.file .form-input .control:hover,.form-input-con.file .form-input .input-base:focus+.control{border:var(--border-input-dark);outline:none}.form-input-con.file.error .form-input .control{border:var(--border-input-red)}.form-input-con.file.error .form-input .control,.form-input-con.file.error .form-input span.icon{color:var(--red)}.form-input-con.file .form-input .button:hover,.form-input-con.file .form-input .control:hover .button,.form-input-con.file .form-input .input-base:focus+.control .button{background-color:var(--green-dark)}.form-input-con.file .form-input i.icon{bottom:0;color:var(--icon);font-size:13px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;width:35px;z-index:2}.form-input-con.file .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.file .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.file .form-input .button{background-color:var(--green);border-radius:0 5px 5px 0;bottom:0;color:#fff;font-size:10px;height:35px;line-height:35px;position:absolute;right:0;text-align:center;width:100px;z-index:2}.form-input-con.file.h-35{height:35px}.form-input-con.file.has-value.h-35 .form-input .control{direction:ltr;font-size:9px;height:35px}.form-input-con.file.h-35 .form-input .button,.form-input-con.file.h-35 .form-input i.icon{height:35px;line-height:35px}.form-input-con.file.h-30{height:30px}.form-input-con.file.h-30 .form-input .control{direction:ltr;font-size:9px;height:30px;line-height:30px}.form-input-con.file.h-30 .form-input .button,.form-input-con.file.h-30 .form-input i.icon{height:30px;line-height:30px}"]
+                styles: [".form-input-con.file{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;padding:0 15px}.form-input-con.file,.form-input-con.file .form-input{float:right;position:relative;width:100%}.form-input-con.file .form-input .input-base,.form-input-con.file .form-input .input-base-file{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input-con.file .form-input .control{background-color:#fff;border:var(--border-input);border-radius:5px;float:left;font-size:11px;height:35px;line-height:35px;overflow:hidden;padding:0 135px 0 35px;position:relative;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;z-index:2}.form-input-con.file .form-input .control .title{float:right;width:100%}.form-input-con.file .form-input .control:hover,.form-input-con.file .form-input .input-base:focus+.control{border:var(--border-input-dark);outline:none}.form-input-con.file.error .form-input .control{border:var(--border-input-red)}.form-input-con.file.error .form-input .control,.form-input-con.file.error .form-input span.icon{color:var(--red)}.form-input-con.file .form-input .button:hover,.form-input-con.file .form-input .control:hover .button,.form-input-con.file .form-input .input-base:focus+.control .button{background-color:var(--green-dark)}.form-input-con.file .form-input i.icon{bottom:0;color:var(--comp);font-size:13px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;width:35px;z-index:2}.form-input-con.file .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.file .form-input .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input-con.file .form-input .button{background-color:var(--green);border-radius:0 5px 5px 0;bottom:0;color:#fff;font-size:10px;height:35px;line-height:35px;position:absolute;right:0;text-align:center;width:100px;z-index:2}.form-input-con.file.h-35{height:35px}.form-input-con.file.has-value.h-35 .form-input .control{direction:ltr;font-size:9px;height:35px}.form-input-con.file.h-35 .form-input .button,.form-input-con.file.h-35 .form-input i.icon{height:35px;line-height:35px}.form-input-con.file.h-30{height:30px}.form-input-con.file.h-30 .form-input .control{direction:ltr;font-size:9px;height:30px;line-height:30px}.form-input-con.file.h-30 .form-input .button,.form-input-con.file.h-30 .form-input i.icon{height:30px;line-height:30px}"]
             },] }
 ];
 FormFileComponent.ctorParameters = () => [];

package/esm2015/lib/components/form/finger/form.finger.component.js CHANGED Viewed

@@ -125,7 +125,7 @@ FormFingerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-finger',
                 template: "<div #inputDiv [id]=\"inp.name + 'Input'\" [className]=\"inp.class + ' form-input finger' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')\">\r\n  <div class=\"form-input-flex\">\r\n    <div class=\"form-input-con\" (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 class=\"control\">\r\n        <i *ngIf=\"inp.icon != null || inp.loading\" #inputIcon [className]=\"(inp.loading ? 'fa-spin fa-spinner ' : inp.icon) + (inp.icon.includes('far') ? '' : ' fas') + ' icon'\"></i>\r\n        <div class=\"fingers\">\r\n          <div class=\"hand-con right\">\r\n            <i class=\"fas fa-hand-paper hand fa-flip-horizontal\"></i>\r\n            <div (click)=\"addRemoveFinger('R1')\" [className]=\"(inp.value.R1 == 'Loading' ? 'loading ' : (inp.value.R1 == null ? '' : 'remove ')) + 'btn-f f1'\">\r\n              <i [className]=\"(inp.value.R1 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R1 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.R1 && inp.value.R1.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.R1.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('R2')\" [className]=\"(inp.value.R2 == 'Loading' ? 'loading ' : (inp.value.R2 == null ? '' : 'remove ')) + 'btn-f f2'\">\r\n              <i [className]=\"(inp.value.R2 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R2 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.R2 && inp.value.R2.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.R2.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('R3')\" [className]=\"(inp.value.R3 == 'Loading' ? 'loading ' : (inp.value.R3 == null ? '' : 'remove ')) + 'btn-f f3'\">\r\n              <i [className]=\"(inp.value.R3 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R3 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.R3 && inp.value.R3.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.R3.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('R4')\" [className]=\"(inp.value.R4 == 'Loading' ? 'loading ' : (inp.value.R4 == null ? '' : 'remove ')) + 'btn-f f4'\">\r\n              <i [className]=\"(inp.value.R4 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R4 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.R4 && inp.value.R4.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.R4.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('R5')\" [className]=\"(inp.value.R5 == 'Loading' ? 'loading ' : (inp.value.R5 == null ? '' : 'remove ')) + 'btn-f f5'\">\r\n              <i [className]=\"(inp.value.R5 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R5 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.R5 && inp.value.R5.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.R5.Image + '\\')'}\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"hand-con left\">\r\n            <i class=\"fas hand fa-hand-paper\"></i>\r\n            <div (click)=\"addRemoveFinger('L1')\" [className]=\"(inp.value.L1 == 'Loading' ? 'loading ' : (inp.value.L1 == null ? '' : 'remove ')) + 'btn-f f1'\">\r\n              <i [className]=\"(inp.value.L1 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L1 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.L1 && inp.value.L1.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.L1.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('L2')\" [className]=\"(inp.value.L2 == 'Loading' ? 'loading ' : (inp.value.L2 == null ? '' : 'remove ')) + 'btn-f f2'\">\r\n              <i [className]=\"(inp.value.L2 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L2 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.L2 && inp.value.L2.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.L2.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('L3')\" [className]=\"(inp.value.L3 == 'Loading' ? 'loading ' : (inp.value.L3 == null ? '' : 'remove ')) + 'btn-f f3'\">\r\n              <i [className]=\"(inp.value.L3 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L3 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.L3 && inp.value.L3.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.L3.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('L4')\" [className]=\"(inp.value.L4 == 'Loading' ? 'loading ' : (inp.value.L4 == null ? '' : 'remove ')) + 'btn-f f4'\">\r\n              <i [className]=\"(inp.value.L4 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L4 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.L4 && inp.value.L4.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.L4.Image + '\\')'}\"></div>\r\n            </div>\r\n            <div (click)=\"addRemoveFinger('L5')\" [className]=\"(inp.value.L5 == 'Loading' ? 'loading ' : (inp.value.L5 == null ? '' : 'remove ')) + 'btn-f f5'\">\r\n              <i [className]=\"(inp.value.L5 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L5 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'\"></i>\r\n              <div class=\"img\" *ngIf=\"inp.value.L5 && inp.value.L5.Image\" [style]=\"{backgroundImage: 'url(\\'data:image/png;base64,' + inp.value.L5.Image + '\\')'}\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".form-input.finger{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;padding:0 15px;position:relative;width:100%}.form-input.finger .form-input-flex{align-items:center;display:flex;float:right;justify-content:center;width:100%}.form-input.finger .form-input-flex .form-input-con{float:right;width:250px}.form-input.finger .form-input-flex .form-input-con .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.finger .form-input-flex .form-input-con.error .label{color:var(--red);font-size:10px}.form-input.finger .form-input-flex .form-input-con .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.finger .form-input-flex .form-input-con>.control{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);float:right;min-height:35px;position:relative;width:100%}.form-input.finger .form-input-flex .form-input-con .input-base{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input.finger .form-input-flex .form-input-con .input-base:focus+.control,.form-input.finger .form-input-flex .form-input-con:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.finger .form-input-flex .form-input-con i.icon{color:var(--icon);cursor:default;font-size:14px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;top:0;transition:all .35s ease-in-out;width:35px;z-index:1}.form-input.finger .form-input-flex .form-input-con.error>.control{box-shadow:0 1px 3px 0 var(--red)}.form-input.finger .form-input-flex .form-input-con.error i.icon{color:var(--red-cc)}.form-input.finger .form-input-flex .form-input-con>.control .fingers{float:right;position:relative;width:100%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con{float:right;position:relative;width:50%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .hand{float:right;font-size:100px;height:160px;line-height:160px;padding-right:10px;position:relative;text-align:right;width:100%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f{align-items:center;background-color:var(--green);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:12px;height:17px;justify-content:center;position:absolute;text-align:center;width:17px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f:hover{background-color:var(--green-dark)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove{background-color:var(--red)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove:hover{background-color:var(--red-dark)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.loading,.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.loading:hover{background-color:var(--icon)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f1{right:26px;top:79px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f2{right:47px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f3{right:64px;top:29px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f4{right:82px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f5{right:99px;top:54px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f1{left:26px;top:79px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f2{left:47px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f3{left:64px;top:29px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f4{left:82px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f5{left:99px;top:54px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f .img{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:5px;bottom:20px;box-shadow:var(--box-shadow);display:none;height:100px;position:absolute;right:-29px;width:75px;z-index:1}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove:hover .img{display:block}"]
+                styles: [".form-input.finger{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;float:right;padding:0 15px;position:relative;width:100%}.form-input.finger .form-input-flex{align-items:center;display:flex;float:right;justify-content:center;width:100%}.form-input.finger .form-input-flex .form-input-con{float:right;width:250px}.form-input.finger .form-input-flex .form-input-con .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.finger .form-input-flex .form-input-con.error .label{color:var(--red);font-size:10px}.form-input.finger .form-input-flex .form-input-con .label .required-icon{color:var(--red);font-size:9px;height:20px;line-height:20px;text-align:center;width:20px}.form-input.finger .form-input-flex .form-input-con>.control{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);float:right;min-height:35px;position:relative;width:100%}.form-input.finger .form-input-flex .form-input-con .input-base{cursor:pointer;height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:1}.form-input.finger .form-input-flex .form-input-con .input-base:focus+.control,.form-input.finger .form-input-flex .form-input-con:hover .control{box-shadow:0 1px 5px 0 rgba(0,0,0,.7)}.form-input.finger .form-input-flex .form-input-con i.icon{color:var(--comp);cursor:default;font-size:14px;height:35px;left:0;line-height:35px;position:absolute;text-align:center;top:0;transition:all .35s ease-in-out;width:35px;z-index:1}.form-input.finger .form-input-flex .form-input-con.error>.control{box-shadow:0 1px 3px 0 var(--red)}.form-input.finger .form-input-flex .form-input-con.error i.icon{color:var(--red-cc)}.form-input.finger .form-input-flex .form-input-con>.control .fingers{float:right;position:relative;width:100%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con{float:right;position:relative;width:50%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .hand{float:right;font-size:100px;height:160px;line-height:160px;padding-right:10px;position:relative;text-align:right;width:100%}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f{align-items:center;background-color:var(--green);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:12px;height:17px;justify-content:center;position:absolute;text-align:center;width:17px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f:hover{background-color:var(--green-dark)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove{background-color:var(--red)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove:hover{background-color:var(--red-dark)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.loading,.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.loading:hover{background-color:var(--comp)}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f1{right:26px;top:79px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f2{right:47px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f3{right:64px;top:29px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f4{right:82px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.right .btn-f.f5{right:99px;top:54px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f1{left:26px;top:79px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f2{left:47px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f3{left:64px;top:29px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f4{left:82px;top:37px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con.left .btn-f.f5{left:99px;top:54px}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f .img{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:5px;bottom:20px;box-shadow:var(--box-shadow);display:none;height:100px;position:absolute;right:-29px;width:75px;z-index:1}.form-input.finger .form-input-flex .form-input-con>.control .fingers .hand-con .btn-f.remove:hover .img{display:block}"]
             },] }
 ];
 FormFingerComponent.propDecorators = {

package/esm2015/lib/components/form/icon/form.icon.component.js CHANGED Viewed

@@ -63,7 +63,7 @@ FormIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-form-icon',
                 template: "<div *ngIf=\"inp.url == null\" #inputDiv [id]=\"inp.name + 'Input'\" (click)=\"onClick($event)\" [className]=\"inp.class + ' form-input icon'\" [style]=\"inp.style\">\r\n  <lib-tooltip [text]=\"inp.l(inp.name)\"></lib-tooltip>\r\n  <input #inputBase type=\"button\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n  <div class=\"icon-con\">\r\n    <i *ngIf=\"inp.icon != null\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n  </div>\r\n</div>\r\n<a *ngIf=\"inp.url != null\" [target]=\"inp.urlNewTab ? '_blank' : ''\" [routerLink]=\"inp.url\" #inputDiv [id]=\"inp.name + 'Input'\" (click)=\"onClick($event)\" [className]=\"inp.class + ' form-input icon'\" [style]=\"inp.style\">\r\n  <lib-tooltip [text]=\"inp.l(inp.name)\"></lib-tooltip>\r\n  <input #inputBase type=\"button\" class=\"input-base\" (keydown)=\"onKeyDown($event)\" (focusin)=\"onFocusIn()\">\r\n  <div class=\"icon-con\">\r\n    <i *ngIf=\"inp.icon != null\" #inputIcon [className]=\"(inp.loading ? 'fad fa-spin fa-spinner' : inp.icon) + ' icon'\"></i>\r\n  </div>\r\n</a>\r\n",
-                styles: [".form-input.icon{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;float:right;height:30px;position:relative;width:30px;z-index:1}.form-input.icon .input-base{height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:0}.form-input.icon .icon-con{border-radius:5px;float:right;height:100%;position:absolute;right:0;top:0;width:100%}.form-input.icon .icon-con i.icon{color:var(--black-88);float:right;font-size:18px;height:30px;line-height:20px;padding:5px;text-align:center;width:30px}.form-input.icon .input-base:focus+.icon-con,.form-input.icon:hover .icon-con{background-color:var(--black-22)}.form-input.icon .input-base:focus+.icon-con .icon,.form-input.icon:hover .icon-con i.icon{color:var(--black-99)}.form-input.icon.red .input-base:focus+.icon-con,.form-input.icon.red:hover .icon-con{background-color:var(--red-22)}.form-input.icon.red .input-base:focus+.icon-con .icon,.form-input.icon.red:hover .icon-con i.icon{color:var(--red)}.form-input.icon.blue .input-base:focus+.icon-con,.form-input.icon.blue:hover .icon-con{background-color:var(--blue-22)}.form-input.icon.blue .input-base:focus+.icon-con .icon,.form-input.icon.blue:hover .icon-con i.icon{color:var(--blue)}.form-input.icon.green .input-base:focus+.icon-con,.form-input.icon.green:hover .icon-con{background-color:var(--green-22)}.form-input.icon.green .input-base:focus+.icon-con .icon,.form-input.icon.green:hover .icon-con i.icon{color:var(--green)}.form-input.icon.yellow .input-base:focus+.icon-con,.form-input.icon.yellow:hover .icon-con{background-color:var(--icon-22)}.form-input.icon.yellow .input-base:focus+.icon-con .icon,.form-input.icon.yellow:hover .icon-con i.icon{color:var(--icon)}.form-input.icon.h-20{height:20px;width:20px}.form-input.icon.h-20 .icon-con i.icon{font-size:16px;height:20px;line-height:18px;width:20px}.form-input.icon.h-25{height:25px;width:25px}.form-input.icon.h-25 .icon-con i.icon{font-size:15px;height:25px;line-height:15px;width:25px}"]
+                styles: [".form-input.icon{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;float:right;height:30px;position:relative;width:30px;z-index:1}.form-input.icon .input-base{height:0;opacity:0;position:absolute;right:50%;top:50%;width:0;z-index:0}.form-input.icon .icon-con{border-radius:5px;float:right;height:100%;position:absolute;right:0;top:0;width:100%}.form-input.icon .icon-con i.icon{color:var(--black-88);float:right;font-size:18px;height:30px;line-height:20px;padding:5px;text-align:center;width:30px}.form-input.icon .input-base:focus+.icon-con,.form-input.icon:hover .icon-con{background-color:var(--black-22)}.form-input.icon .input-base:focus+.icon-con .icon,.form-input.icon:hover .icon-con i.icon{color:var(--black-99)}.form-input.icon.red .input-base:focus+.icon-con,.form-input.icon.red:hover .icon-con{background-color:var(--red-22)}.form-input.icon.red .input-base:focus+.icon-con .icon,.form-input.icon.red:hover .icon-con i.icon{color:var(--red)}.form-input.icon.blue .input-base:focus+.icon-con,.form-input.icon.blue:hover .icon-con{background-color:var(--blue-22)}.form-input.icon.blue .input-base:focus+.icon-con .icon,.form-input.icon.blue:hover .icon-con i.icon{color:var(--blue)}.form-input.icon.green .input-base:focus+.icon-con,.form-input.icon.green:hover .icon-con{background-color:var(--green-22)}.form-input.icon.green .input-base:focus+.icon-con .icon,.form-input.icon.green:hover .icon-con i.icon{color:var(--green)}.form-input.icon.comp .input-base:focus+.icon-con,.form-input.icon.comp:hover .icon-con{background-color:var(--comp-22)}.form-input.icon.comp .input-base:focus+.icon-con .icon,.form-input.icon.comp:hover .icon-con i.icon{color:var(--comp)}.form-input.icon.h-20{height:20px;width:20px}.form-input.icon.h-20 .icon-con i.icon{font-size:16px;height:20px;line-height:18px;width:20px}.form-input.icon.h-25{height:25px;width:25px}.form-input.icon.h-25 .icon-con i.icon{font-size:15px;height:25px;line-height:15px;width:25px}"]
             },] }
 ];
 FormIconComponent.ctorParameters = () => [];