ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/form/car/search/form.car.search.component.ts

@@ -0,0 +1,170 @@
+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-car-search',
+  templateUrl: './form.car.search.component.html',
+  styleUrls: ['./form.car.search.component.css']
+})
+export class FormCarSearchComponent implements OnInit {
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  type = 'Car';
+  car: InputClass;
+  motor: InputClass;
+  driver: InputClass;
+  fingerprint: InputClass;
+  wsAuth = null;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  constructor(){
+  }
+  ngOnInit(): void {
+    this.car = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item',
+      'fa-user', InputType.SelectAutoCompletePlaque);
+    this.motor = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item',
+      'fa-motorcycle', InputType.SelectAutoCompletePlaqueM);
+    this.driver = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item',
+      null, InputType.SelectAutoComplete);
+    this.driver.placeholder = this.inp.l('DriverName');
+    this.fingerprint = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item', null, InputType.Select);
+    this.car.displayLabel = this.motor.displayLabel = this.driver.displayLabel = this.fingerprint.displayLabel = false;
+    this.car.url = this.motor.url = this.driver.url = this.inp.url.replace('_{}', '_' + this.type);
+    this.car.onChange = () => {
+      this.changeIndex.emit('Tab');
+      if (this.inp.onChange){
+        this.inp.onChange(this.car.data());
+      }
+    };
+    this.motor.onChange = () => {
+      this.changeIndex.emit('Tab');
+      if (this.inp.onChange){
+        this.inp.onChange(this.motor.data());
+      }
+    };
+    this.driver.onChange = () => {
+      this.changeIndex.emit('Tab');
+      if (this.inp.onChange){
+        this.inp.onChange(this.driver.data());
+      }
+    };
+    this.fingerprint.onChange = () => {
+      this.changeIndex.emit('Tab');
+      if (this.inp.onChange){
+        this.inp.onChange(this.fingerprint.data());
+      }
+    };
+    this.fingerprint.disabled = true;
+    this.fingerprint.placeholder = this.inp.l('LoadingText', 'Waiting');
+    this.inp.setValue = (v) => {
+      if (v != null){
+        if (v.Search && v.Search.split('_').length === 2){
+          this.type = 'Motor';
+          setTimeout(() => {
+            this.motor.setValue(v.Value, false);
+            this.motor.setSearch(v.Search);
+          });
+        } else if (v.Search && v.Search.split('_').length === 4){
+          this.type = 'Car';
+          setTimeout(() => {
+            this.car.setValue(v.Value, false);
+            this.car.setSearch(v.Search);
+          });
+        }
+      }
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && this.type === 'Car' && !this.car.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (this.inp.required && this.type === 'Motor' && !this.motor.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (this.inp.required && this.type === 'Driver' && !this.driver.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (this.inp.required && this.type === 'Fingerprint' && !this.fingerprint.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(null, false);
+      this.type = 'Car';
+      this.car.clear();
+      this.motor.clear();
+      this.driver.clear();
+      this.fingerprint.clear();
+    };
+    this.inp.data = () => {
+      return this.type === 'Car' ? this.car.data() :
+        this.type === 'Motor' ? this.motor.data() :
+        this.type === 'Driver' ? this.driver.data() :
+        this.type === 'Fingerprint' ? this.fingerprint.data() : null;
+    };
+  }
+  changeType(t: string): void {
+    this.type = t;
+    if (t === 'Fingerprint'){
+      this.fingerprint.loading = true;
+      this.fingerprint.placeholder = this.inp.l('LoadingText', 'Waiting');
+      this.fingerprint.value = null;
+      this.fingerprint.search = null;
+      this.wsAuth = new WebSocket('ws://localhost:7890/Auth');
+      this.wsAuth.onopen = () => {
+      };
+
+      this.wsAuth.onmessage = (evt) => {
+        if (this.wsAuth != null){
+          this.wsAuth.close();
+        }
+        if (evt.data === 'Notfound'){
+          HelperClass.addNotification(this.inp.l('NotfoundTitle'));
+          this.fingerprint.placeholder = this.inp.l('NotfoundTitle');
+          this.fingerprint.value = null;
+          this.fingerprint.search = null;
+          this.fingerprint.loading = false;
+        } else if (evt.data.startsWith('Error')){
+          HelperClass.addNotification(evt.data);
+          this.fingerprint.placeholder = this.inp.l('NotfoundTitle');
+          this.fingerprint.value = null;
+          this.fingerprint.search = null;
+          this.fingerprint.loading = false;
+        } else {
+          const user = JSON.parse(evt.data);
+          this.fingerprint.value = user.Id;
+          this.fingerprint.search = user.Name;
+          this.fingerprint.loading = false;
+        }
+        this.wsAuth.close();
+        this.wsAuth = null;
+      };
+      this.wsAuth.onclose = () => {
+      };
+    }
+    this.car.url = this.motor.url = this.driver.url = this.inp.url.replace('_{}', '_' + this.type);
+  }
+  onFocusIn(): void {
+    if (this.type === 'Car'){
+      this.car.focus();
+    } else if (this.type === 'Motor'){
+      this.motor.focus();
+    } else if (this.type === 'Driver'){
+      this.driver.focus();
+    } else if (this.type === 'Fingerprint'){
+      this.fingerprint.focus();
+    }
+  }
+}

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

@@ -0,0 +1,128 @@
+.form-input-con.checkbox{
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  position: relative;
+}
+.form-input-con.checkbox .form-input{
+  float: right;
+  width: 100%;
+  position: relative;
+}
+.form-input-con.checkbox .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.checkbox .form-input .control {
+  float: right;
+  width: 100%;
+  border-radius: 5px;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  font-size: 11px;
+  padding: 0 35px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  z-index: 2;
+  position: relative;
+  background-color: white;
+  border: var(--border-input);
+}
+.form-input-con.checkbox .form-input .control:after {
+  content: "\f0c8";
+  position: absolute;
+  font-family: "Font Awesome 5 Pro";
+  font-weight: normal;
+  width: 35px;
+  height: 35px;
+  line-height: 32px;
+  right: 0;
+  top: 0;
+  font-size: 17px;
+}
+
+.form-input-con.checkbox .form-input .control:hover, .form-input-con.checkbox .form-input .check:focus + .control{
+  outline: none;
+  border: var(--border-input-dark);
+}
+
+.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 {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+  top: 50%;
+  right: 50%;
+  z-index: 1;
+}
+
+.form-input-con.checkbox .form-input .check:checked + .control:after {
+  content: "\f14a";
+  color: var(--green);
+  font-weight: 900;
+  animation: pop 180ms ease-in;
+}
+
+.form-input-con.checkbox .form-input i.icon {
+  position: absolute;
+  font-size: 13px;
+  color: var(--comp);
+  cursor: pointer;
+  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;
+}
+.form-input-con.checkbox.without-icon .form-input .control{
+  padding: 0 0 0 35px;
+}
+.form-input-con.checkbox.h-30 .form-input .control {
+  height: 30px;
+  line-height: 28px;
+  padding: 0 30px;
+  font-size: 10px;
+}
+.form-input-con.checkbox.h-30 .form-input .control:after {
+  width: 30px;
+  height: 30px;
+  line-height: 28px;
+  font-size: 14px;
+}
+.form-input-con.checkbox.h-30 .form-input i.icon {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 11px;
+}
+.form-input-con.checkbox.h-30.without-icon .form-input .control{
+  padding: 0 0 0 30px;
+}

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

@@ -0,0 +1,8 @@
+<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' : '')">
+  <div class="form-input" (click)="onFocusIn()">
+    <div *ngIf="inp.displayLabel" class="label"></div>
+    <input (keydown)="onKeyDown($event)" (change)="onChange()" [disabled]="inp.disabled" [(ngModel)]="inp.value" #inputBase type="checkbox" [name]="inp.name" class="check">
+    <div (click)="onClick()" class="control">{{inp.l(inp.name)}}</div>
+    <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+  </div>
+</div>

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

@@ -0,0 +1,64 @@
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-checkbox',
+  templateUrl: './form.checkbox.component.html',
+  styleUrls: ['./form.checkbox.component.css']
+})
+export class FormCheckboxComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.value = this.inp.default;
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && !this.inp.value) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      return true;
+    };
+    this.inp.data = () => {
+      return this.inp.value;
+    };
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+  onFocusIn(): void{
+    this.inp.error = null;
+    this.inputBase.nativeElement.focus();
+  }
+  onClick(): void{
+    this.inputBase.nativeElement.click();
+  }
+  onChange(): void{
+    if (this.inp.onChange){
+      setTimeout(() => {
+        this.inp.onChange(this.inp);
+      }, 1);
+    }
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9 || code === 13) {
+      e.preventDefault();
+      this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
+    }
+  }
+}

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

@@ -0,0 +1,310 @@
+.form-input-con.date {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.date .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+.form-input-con.date .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.date.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.date .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+
+.form-input-con.date .form-input .control {
+  display: block;
+  width: 100%;
+  height: 35px;
+  padding: 5px 35px;
+  font-family: Vazir;
+  color: var(--black);
+  background-image: none;
+  border: none;
+  border-radius: 5px;
+  text-align: center;
+  background-color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 11px;
+  border: var(--border-input);
+}
+.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:hover .control, .form-input-con.date .form-input .control:focus {
+  border: var(--border-input-dark);
+  outline: none;
+}
+
+.form-input-con.date .form-input i.icon {
+  position: absolute;
+  font-size: 13px;
+  color: var(--comp);
+  cursor: text;
+  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: 35px;
+  left: 0;
+}
+.form-input-con.date .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.date.disabled .form-input .control, .form-input-con.date.disabled .form-input i.icon, .form-input-con.date.disabled .form-input .label {
+  cursor: default;
+  opacity: 0.7;
+  filter: blur(0.5px);
+}
+
+.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:hover .control, .form-input-con.date.error .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+
+.form-input-con.date .form-input .calendar{
+  position: absolute;
+  width: 200px;
+  height: 235px;
+  left: 0;
+  top: -200000px;
+  background-color: white;
+  border: var(--border-input);
+  border-radius: 0 0 5px 5px;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  z-index: 102;
+  color: var(--black);
+}
+.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{
+  float: right;
+  width: 100%;
+  background: var(--black-33);
+}
+.form-input-con.date .form-input .calendar .header .previous-month, .form-input-con.date .form-input .calendar .header .next-month{
+  float: right;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  font-size: 15px;
+  text-align: center;
+}
+.form-input-con.date .form-input .calendar .header .previous-month:hover, .form-input-con.date .form-input .calendar .header .next-month:hover{
+  background: var(--black-33);
+}
+.form-input-con.date .form-input .calendar .header .title{
+  float: right;
+  width: calc(100% - 60px);
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  text-align: center;
+  font-family: VazirBold;
+}
+.form-input-con.date .form-input .calendar .header .header-item{
+  float: right;
+  height: 20px;
+  line-height: 20px;
+  margin-top: 5px;
+  margin-right: 5px;
+  text-align: center;
+  background-color: white;
+  border: var(--border-input);
+  border-radius: 5px;
+  cursor: pointer;
+}
+.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;
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  font-family: VazirLight;
+  position: relative;
+}
+.form-input-con.date .form-input .calendar .days-con .day-names .item{
+  float: right;
+  width: calc(100% / 7);
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  text-align: center;
+}
+.form-input-con.date .form-input .calendar .days-con .days{
+  float: right;
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+}
+.form-input-con.date .form-input .calendar .days-con .days .item{
+  float: right;
+  width: calc(100% / 7);
+  height: 30px;
+  line-height: 30px;
+  font-size: 11px;
+  text-align: center;
+  cursor: pointer;
+}
+.form-input-con.date .form-input .calendar .days-con .days .item.not-in-month{
+  cursor: default;
+  opacity: 0.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: white;
+}
+.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{
+  float: right;
+  width: calc(100% / 3);
+  height: calc(205px / 4);
+  line-height: calc(205px / 4);
+  font-size: 11px;
+  text-align: center;
+  cursor: pointer;
+}
+.form-input-con.date .form-input .calendar .months-con .month:hover{
+  background-color: var(--black-33);
+}
+
+.form-input-con.date .form-input .calendar .months-con .month.selected{
+  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{
+  float: right;
+  width: calc(100% / 4);
+  height: calc(205px / 5);
+  line-height: calc(205px / 5);
+  font-size: 11px;
+  text-align: center;
+  cursor: pointer;
+}
+.form-input-con.date .form-input .calendar .years-con .year:hover{
+  background-color: var(--black-33);
+}
+
+.form-input-con.date .form-input .calendar .years-con .year.selected{
+  background-color: var(--black-33);
+}
+
+.form-input-con.date.table-search {
+  width: 100%;
+  float: right;
+  padding: 0;
+}
+.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;
+}