ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/confirm/confirm.component.ts

@@ -0,0 +1,47 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {FormClass, InputClass} from '../../classes/form.class';
+import {ModalClass} from '../../classes/modal.class';
+import {InputType} from '../../classes/enum.class';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+import {LangClass} from '../../classes/lang.class';
+
+@Component({
+  selector: 'lib-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.css']
+})
+export class ConfirmComponent implements OnInit{
+  @Input()
+  tableId: string;
+  l: (k, v?) => string;
+  confirm: ModalClass;
+  confirmLabel: InputClass;
+  constructor(public config: PsToolkitUiConfigService){
+    const lang = new LangClass(config.currentLang, config.strings);
+    this.l = (key: string, v = null): string => {
+      return lang.get('Public', 'Confirm', key, v);
+    };
+  }
+  ngOnInit(): void {
+    this.confirm = new ModalClass(this.config.environment, this.l, (this.tableId ? this.tableId : '') + 'Confirm');
+    this.confirm.form = new FormClass(this.config.environment, this.l, 'Confirm');
+    this.confirmLabel = new InputClass(this.config.environment, this.l, 'Confirm', null, InputType.Label, 'f-s-16 p-h-20 p-t-10 l-h-30', 'Confirm');
+    this.confirm.form.inputs = [
+      this.confirmLabel,
+    ];
+    this.confirm.form.addButtons('Accept', 'blue', false);
+  }
+
+  show(l: string, url: string, data, accept: (btn: InputClass) => void): void{
+    this.confirmLabel.value = l;
+    this.confirm.form.url = url;
+    this.confirm.form.data = () => {
+      return data;
+    };
+    this.confirm.form.onSuccess = (btn) => {
+      this.confirm.hide();
+      accept(btn);
+    };
+    this.confirm.show();
+  }
+}

package/src/lib/components/footer/footer.component.css

@@ -0,0 +1,46 @@
+#Footer{
+  position: fixed;
+  width: 100%;
+  line-height: 35px;
+  background-color: var(--base-dark);
+  bottom: 0;
+  right: 0;
+  color: white;
+  text-align: center;
+  z-index: 2;
+  font-size: 12px;
+  font-family: VazirBold;
+}
+
+#Footer .copyright, #Footer .creator{
+  float: right;
+  width: 50%;
+}
+
+#Footer .copyright i, #Footer .creator i, #Footer .creator a{
+  color: var(--comp)!important;
+}
+
+
+@media (max-width: 399.98px) {
+  #Footer .copyright, #Footer .creator{
+    width: 100%;
+    font-size: 11px;
+    line-height: 30px;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 499.98px) {
+  #Footer .copyright, #Footer .creator{
+    width: 100%;
+    line-height: 30px;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 599.98px) {
+  #Footer .copyright, #Footer .creator{
+    width: 100%;
+    line-height: 30px;
+  }
+
+}

package/src/lib/components/footer/footer.component.html

@@ -0,0 +1,9 @@
+<div id="Footer">
+    <div class="copyright">
+      <i class="far fa-copyright"></i>
+      {{l('Copyright')}}
+    </div>
+    <div class="creator">
+      <i class="fas fa-heart"></i> {{l('CreatorDesc')}} <a href="http://partsilicon.ir/" target="_blank">{{l('CreatorCom')}}</a>
+    </div>
+</div>

package/src/lib/components/footer/footer.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {LangClass} from '../../classes/lang.class';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+
+@Component({
+    selector: 'lib-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.css']
+})
+export class FooterComponent{
+  l: (k, v?) => string;
+  constructor(public config: PsToolkitUiConfigService){
+    const lang = new LangClass(config.currentLang, config.strings);
+    this.l = (key: string, v = null): string => {
+      return lang.get('Public', 'Footer', key, v);
+    };
+  }
+}

package/src/lib/components/form/bank-card/form.bank-card.component.css

@@ -0,0 +1,115 @@
+.form-input-con.bank-card {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.bank-card .form-input {
+   position: relative;
+   float: right;
+   width: 100%;
+ }
+
+.form-input-con.bank-card .form-input .label {
+  float: right;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 10px;
+  font-size: 12px;
+  margin-bottom: 3px;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  direction: rtl;
+  text-align: right;
+}
+.form-input-con.bank-card.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.bank-card .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input-con.bank-card .form-input .control {
+  float: right;
+  width: 100%;
+  height: 35px;
+  padding: 0 35px;
+  border-radius: 5px;
+  border: var(--border-input);
+  background-color: white;
+  position: relative;
+  direction: ltr;
+  overflow: hidden;
+}
+.form-input-con.bank-card .form-input:hover .control, .form-input-con.bank-card .form-input .control:focus {
+  outline: none;
+  border: var(--border-input-dark);
+}
+
+.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:hover .control, .form-input-con.bank-card.error .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+.form-input-con.bank-card.without-icon .form-input .control {
+  padding: 5px 10px;
+}
+
+.form-input-con.bank-card .form-input i.icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--comp);
+  cursor: text;
+  bottom: 0;
+  z-index: 2;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  width: 35px;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  left: 0;
+  text-align: center;
+}
+.form-input-con.bank-card .form-input i.clear-icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--red);
+  cursor: pointer;
+  bottom: 0;
+  z-index: 3;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  width: 35px;
+  text-align: center;
+  height: 35px;
+  line-height: 38px;
+  right: 0;
+}
+.form-input-con.bank-card.disabled .form-input .control, .form-input-con.bank-card.disabled .form-input i.icon, .form-input-con.bank-card.disabled .form-input .label {
+  cursor: default;
+  box-shadow: unset;
+  opacity: 0.7;
+  filter: blur(0.5px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+
+.form-input-con.bank-card.without-icon .form-input .control {
+  padding: 5px 10px;
+}

package/src/lib/components/form/bank-card/form.bank-card.component.html

@@ -0,0 +1,13 @@
+<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' : '')">
+  <div class="form-input" (click)="onFocusIn($event)">
+    <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>
+    <div class="control">
+      <lib-form-textbox (changeIndex)="changeFocus('Part1', $event)" [inp]="part1"></lib-form-textbox>
+      <lib-form-textbox (changeIndex)="changeFocus('Part2', $event)" [inp]="part2"></lib-form-textbox>
+      <lib-form-textbox (changeIndex)="changeFocus('Part3', $event)" [inp]="part3"></lib-form-textbox>
+      <lib-form-textbox (changeIndex)="changeFocus('Part4', $event)" [inp]="part4"></lib-form-textbox>
+    </div>
+    <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'" (click)="part1.focus()"></i>
+    <i *ngIf="inp.withClear && (part1.value || part2.value || part3.value || part4.value)" (click)="inp.clear()" class="fa-duotone fa-eraser clear-icon"></i>
+  </div>
+</div>

package/src/lib/components/form/bank-card/form.bank-card.component.ts

@@ -0,0 +1,144 @@
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError, InputType} from '../../../classes/enum.class';
+import {HelperClass} from '../../../classes/helper.class';
+
+@Component({
+  selector: 'lib-form-bank-card',
+  templateUrl: './form.bank-card.component.html',
+  styleUrls: ['./form.bank-card.component.css']
+})
+export class FormBankCardComponent implements OnInit {
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  cValue = '';
+  get type(): typeof InputType {
+    return InputType;
+  }
+  part1: InputClass;
+  part2: InputClass;
+  part3: InputClass;
+  part4: InputClass;
+  @ViewChild('inputPart1') inputPart1: ElementRef;
+  @ViewChild('inputPart2') inputPart2: ElementRef;
+  @ViewChild('inputPart3') inputPart3: ElementRef;
+  @ViewChild('inputPart4') inputPart4: ElementRef;
+  ngOnInit(): void {
+    this.part1 = new InputClass(this.inp.environment, this.inp.l, 'BankCardPart1', null, InputType.Number, 'bank-card-part-1 bank-card-part-item',
+      '', true, 1000, 9999);
+    this.part2 = new InputClass(this.inp.environment, this.inp.l, 'BankCardPart2', null, InputType.Number, 'bank-card-part-2 bank-card-part-item',
+      '', true, 1000, 9999);
+    this.part3 = new InputClass(this.inp.environment, this.inp.l, 'BankCardPart3', null, InputType.Number, 'bank-card-part-3 bank-card-part-item',
+      '', true, 1000, 9999);
+    this.part4 = new InputClass(this.inp.environment, this.inp.l, 'BankCardPart4', null, InputType.Number, 'bank-card-part-4 bank-card-part-item',
+      '', true, 1000, 9999);
+    this.part1.displayLabel = this.part2.displayLabel = this.part3.displayLabel = this.part4.displayLabel = false;
+    this.part1.placeholder = this.part2.placeholder = this.part3.placeholder = this.part4.placeholder = null;
+    this.part1.onChange = (v) => {
+      this.inp.error = null;
+      if (v.length === 4){
+        this.part2.focus();
+      }
+    };
+    this.part2.onChange = (v) => {
+      this.inp.error = null;
+      if (v.length === 4){
+        this.part3.focus();
+      }
+    };
+    this.part3.onChange = (v) => {
+      this.inp.error = null;
+      if (v.length === 4){
+        this.part4.focus();
+      }
+    };
+    this.part4.onChange = (v) => {
+      this.inp.error = null;
+      if (v.length === 4){
+        this.changeIndex.emit('Tab');
+      }
+    };
+    this.inp.setValue = (v) => {
+      if (v === null){
+        return;
+      }
+      this.part1.value = v.substr(0, 4);
+      this.part2.value = v.substr(4, 4);
+      this.part3.value = v.substr(8, 4);
+      this.part4.value = v.substr(12, 4);
+    };
+    this.inp.isValid = () => {
+      const v = this.getValue();
+      if (!this.inp.required && !v) {
+        return true;
+      }
+      if (!v) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (!HelperClass.checkCartDigit(v)){
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.part1.value = this.inp.default ? this.inp.default.substr(0, 4) : null;
+      this.part2.value = this.inp.default ? this.inp.default.substr(4, 4) : null;
+      this.part3.value = this.inp.default ? this.inp.default.substr(8, 4) : null;
+      this.part4.value = this.inp.default ? this.inp.default.substr(12, 4) : null;
+    };
+    this.inp.data = () => {
+      return this.getValue();
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+  changeFocus(p, a): void{
+    if (p === 'Part1'){
+      if (a === 'Tab' || a === 'Enter'){
+        this.part2.focus();
+      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
+        this.changeIndex.emit('ShiftTab');
+      }
+    } else if (p === 'Part2'){
+      if (a === 'Tab' || a === 'Enter'){
+        this.part3.focus();
+      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
+        this.part1.focus();
+      }
+    } else if (p === 'Part3'){
+      if (a === 'Tab' || a === 'Enter'){
+        this.part4.focus();
+      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
+        this.part2.focus();
+      }
+    } else if (p === 'Part4'){
+      if (a === 'Tab' || a === 'Enter'){
+        this.changeIndex.emit('Tab');
+      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
+        this.part3.focus();
+      }
+    }
+  }
+  onFocusIn(e = null): void{
+    if (e == null || !(e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0)){
+      this.part1.focus();
+    }
+  }
+  onKeyDown(e): void{
+    this.inp.error = null;
+    const code = e.keyCode || e.which;
+    if (code === 9) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+  }
+  getValue(): string{
+    return `${this.part1.value ? this.part1.value : ''}${this.part2.value ? this.part2.value : ''}${this.part3.value ? this.part3.value : ''}${this.part4.value ? this.part4.value : ''}`;
+  }
+}

package/src/lib/components/form/button/form.button.component.css

@@ -0,0 +1,222 @@
+.form-input-con.button {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+
+.form-input-con.button .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+  cursor: pointer;
+}
+
+.form-input-con.button .form-input .input-base {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+  top: 50%;
+  right: 50%;
+  z-index: 1;
+}
+
+.form-input-con.button .form-input .control {
+  display: block;
+  width: 100%;
+  height: 35px;
+  font-weight: 300;
+  background-image: none;
+  border: none;
+  border-radius: 5px;
+  padding: 0 35px 0 20px;
+  line-height: 35px;
+  text-align: center;
+  color: white;
+  float: left;
+  background-color: var(--base);
+  z-index: 2;
+  position: relative;
+}
+
+.form-input-con.button .form-input i.icon {
+  font-size: 12px;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  width: 30px;
+  height: 35px;
+  line-height: 35px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.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:hover .control, .form-input-con.button.red .form-input .input-base:focus + .control{
+  background-color: var(--red-dark);
+}
+
+.form-input-con.button.grey .form-input .control{
+  color: var(--black);
+  background-color: var(--black-22);
+}
+.form-input-con.button.grey .form-input i.icon {
+  color: var(--black);
+}
+
+.form-input-con.button.grey .form-input:hover .control, .form-input-con.button.grey .form-input .input-base:focus + .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:hover .control, .form-input-con.button.blue .form-input .input-base:focus + .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:hover .control, .form-input-con.button.green .form-input .input-base:focus + .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:hover .control, .form-input-con.button.comp .form-input .input-base:focus + .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:hover .control, .form-input-con.button.yellow .form-input .input-base:focus + .control {
+  background-color: var(--yellow-dark);
+}
+
+.form-input-con.button.active .form-input .control {
+  background-color: white;
+  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 {
+  right: unset;
+  left: 0;
+}
+
+.form-input-con.button.only-icon .form-input .control{
+  padding: 0;
+  min-width: 35px;
+}
+.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 {
+  height: 45px;
+  font-size: 13px;
+}
+
+.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 {
+  width: 35px;
+  font-size: 17px;
+}
+
+.form-input-con.button.h-30 {
+  height: 30px;
+  font-size: 12px;
+}
+
+.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{
+  padding: 0;
+  min-width: 30px;
+}
+.form-input-con.button.h-25 {
+  height: 25px;
+  font-size: 12px;
+}
+
+.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{
+  padding: 0;
+  min-width: 25px;
+}
+
+.form-input-con.button.h-20 {
+  height: 20px;
+  font-size: 11px;
+}
+
+.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 {
+  width: 100%;
+  padding: 0 8px;
+  min-width: 25px;
+}
+
+::ng-deep .form-input-con.button.h-25 .form-input .dot-spinner > div {
+  width: 3px;
+  height: 3px;
+  margin-right: 2px;
+}

package/src/lib/components/form/button/form.button.component.html

@@ -0,0 +1,16 @@
+<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">
+  <div *ngIf="inp.url == null" class="form-input" (click)="onClick($event)">
+    <input #inputBase type="button" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+    <div class="control">
+      <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>
+      <i *ngIf="inp.icon != null" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+    </div>
+  </div>
+  <a *ngIf="inp.url != null" [target]="inp.urlNewTab ? '_blank' : ''" [routerLink]="inp.url" class="form-input" (click)="onClick($event)">
+    <input #inputBase type="button" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+    <div class="control">
+      <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>
+      <i *ngIf="inp.icon != null" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+    </div>
+  </a>
+</div>

package/src/lib/components/form/button/form.button.component.ts

@@ -0,0 +1,65 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import * as $ from 'jquery';
+import {InputClass} from '../../../classes/form.class';
+
+@Component({
+  selector: 'lib-form-button',
+  templateUrl: './form.button.component.html',
+  styleUrls: ['./form.button.component.css']
+})
+export class FormButtonComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputBase') inputBase: ElementRef;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+  onFocusIn(): void{
+    $(this.inputBase.nativeElement).focus();
+  }
+  onClick(e): void{
+    if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) {
+      this.mouseClick();
+    }else{
+      this.codeClick();
+    }
+  }
+  mouseClick(): void{
+    this.onFocusIn();
+    if (this.inp.modal){
+      this.inp.modal.show();
+      if (this.inp.modal.form){
+        this.inp.modal.form.onSuccessBase = () => {
+          this.inp.modal.hide();
+        };
+      }
+    }
+    if (!this.inp.loading && this.inp.onClick != null){
+      this.inp.onClick(this.inp);
+    }
+  }
+  codeClick(): void{
+    this.onFocusIn();
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+    if (code === 13) {
+      e.preventDefault();
+      if (!this.inp.loading && this.inp.onClick != null){
+        this.inp.onClick(this.inp);
+      }
+    }
+  }
+}