ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,287 @@
+.form-input.car {
+  position: relative;
+  float: right;
+  border-radius: 5px;
+  font-size: 15px;
+  width: 185px;
+}
+
+.form-input.car .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.car.error .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input.car .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input.car .label .change-type-btn{
+  float: right;
+  height: 20px;
+  width: 30px;
+  line-height: 20px;
+  font-size: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+.form-input.car .label .change-type-btn.fa-user{
+  font-size: 14px;
+  line-height: 18px;
+}
+.form-input.car .label .change-type-btn:hover, .form-input.car .label .change-type-btn.active{
+  color: var(--comp);
+}
+.form-input.car .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;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 11px;
+}
+
+.form-input.car:hover .control, .form-input.car .control:focus {
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
+}
+
+.form-input.car.without-icon .control {
+  padding: 5px 10px;
+}
+
+.form-input.car span.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: 38px;
+  left: 0;
+}
+.form-input.car span.icon.button {
+  background-color: var(--base);
+  color: white;
+  border-radius: 5px 0 0 5px;
+  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 span.icon, .form-input.car.disabled .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.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 {
+  width: 100%;
+  height: 3px;
+  line-height: 3px;
+  background-color: var(--comp);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 5px;
+  -webkit-transition: width 0.5s ease-in-out;
+  -moz-transition: width 0.5s ease-in-out;
+  -o-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+  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 {
+  height: 30px;
+  padding: 0;
+  font-size: 10px;
+}
+
+.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 {
+  width: 80%;
+  float: right;
+  margin-right: 10%;
+  margin-top: 4px;
+}
+.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{
+  width: 35px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input.car.plaque-part-1.plaque-part-m{
+  width: 49px!important;
+}
+.form-input.car.plaque-part-3{
+  width: 49px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input.car.plaque-part-3.plaque-part-m{
+  width: 69px !important;
+}
+.form-input.car.plaque-part-4{
+  margin-top: 10px;
+  width: 34px!important;
+  padding: 0!important;
+  float: left;
+}
+.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{
+  width: 25%;
+  float: left;
+  padding: 0 !important;
+}
+.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{
+  position: absolute;
+  content: '\f068';
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  top: calc(50% - 10px);
+  right: -10px;
+  text-align: center;
+  font-size: 6px;
+}
+.form-input.car.bank-card-part-item .control{
+  background-color: transparent !important;
+  box-shadow: unset !important;
+  padding: 0 !important;
+  font-size: 13px !important;
+}

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

@@ -0,0 +1,11 @@
+<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + (inp.error == null ? '' : ' error') + (inp.icon != null ? '' : ' without-icon') + ' form-input car'">
+  <div *ngIf="inp.displayLabel" class="label">
+    <i *ngIf="inp.required" class="f-r fas fa-star-of-life required-icon"></i>
+    <i [className]="(type === vehicleType.Car ? 'active ' : '') + 'change-type-btn fas fa-car'" (click)="changeType(vehicleType.Car)"></i>
+    <i [className]="(type === vehicleType.Motorcycle ? 'active ' : '') + 'change-type-btn fas fa-motorcycle'" (click)="changeType(vehicleType.Motorcycle)"></i>
+  </div>
+  <div class="w-100 p-r">
+    <lib-form-plaque (changeIndex)="changeIndex.emit($event)" [inp]="car" *ngIf="type === vehicleType.Car"></lib-form-plaque>
+    <lib-form-plaque (changeIndex)="changeIndex.emit($event)" [inp]="motor" *ngIf="type === vehicleType.Motorcycle"></lib-form-plaque>
+  </div>
+</div>

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

@@ -0,0 +1,82 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError, InputType, VehicleType} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-car',
+  templateUrl: './form.car.component.html',
+  styleUrls: ['./form.car.component.css']
+})
+export class FormCarComponent implements OnInit {
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  type: VehicleType = VehicleType.Car;
+  car: InputClass;
+  motor: InputClass;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  get vehicleType(): typeof VehicleType { return VehicleType; }
+  constructor(){
+  }
+  ngOnInit(): void {
+    this.car = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item',
+      'fa-user', InputType.Plaque, '', null, this.inp.required);
+    this.motor = new InputClass(this.inp.environment, this.inp.l, this.inp.name + 'Item',
+      'fa-motorcycle', InputType.PlaqueM, '', null, this.inp.required);
+    this.car.displayLabel = this.motor.displayLabel = false;
+    this.inp.setValue = (v) => {
+      if (v != null){
+        if (v.split('_').length === 2){
+          this.type = VehicleType.Motorcycle;
+          setTimeout(() => {
+            this.motor.setValue(v, false);
+          });
+        } else if (v.split('_').length === 4){
+          this.type = VehicleType.Car;
+          setTimeout(() => {
+            this.car.setValue(v, false);
+          });
+        }
+      }
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && this.type === VehicleType.Car && !this.car.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (this.inp.required && this.type === VehicleType.Motorcycle && !this.motor.isValid()) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(null, false);
+      this.type = VehicleType.Car;
+      this.car.clear();
+      this.motor.clear();
+    };
+    this.inp.data = () => {
+      return this.type === VehicleType.Car ? this.car.data() : this.type === VehicleType.Motorcycle ? this.motor.data() : null;
+    };
+  }
+  changeType(t: VehicleType): void {
+    this.type = t;
+    if (this.inp.onChange){
+      this.inp.onChange(t);
+    }
+  }
+  onFocusIn(): void {
+    if (this.type === VehicleType.Car){
+      this.car.focus();
+    } else if (this.type === VehicleType.Motorcycle){
+      this.motor.focus();
+    }
+  }
+}

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

@@ -0,0 +1,287 @@
+.form-input.car {
+  position: relative;
+  float: right;
+  border-radius: 5px;
+  font-size: 15px;
+  width: 185px;
+}
+
+.form-input.car .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.car.error .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input.car .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input.car .label .change-type-btn{
+  float: right;
+  height: 20px;
+  width: 30px;
+  line-height: 20px;
+  font-size: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+.form-input.car .label .change-type-btn.fa-user{
+  font-size: 14px;
+  line-height: 18px;
+}
+.form-input.car .label .change-type-btn:hover, .form-input.car .label .change-type-btn.active{
+  color: var(--comp);
+}
+.form-input.car .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;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 11px;
+}
+
+.form-input.car:hover .control, .form-input.car .control:focus {
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
+}
+
+.form-input.car.without-icon .control {
+  padding: 5px 10px;
+}
+
+.form-input.car span.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: 38px;
+  left: 0;
+}
+.form-input.car span.icon.button {
+  background-color: var(--base);
+  color: white;
+  border-radius: 5px 0 0 5px;
+  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 span.icon, .form-input.car.disabled .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.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 {
+  width: 100%;
+  height: 3px;
+  line-height: 3px;
+  background-color: var(--comp);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 5px;
+  -webkit-transition: width 0.5s ease-in-out;
+  -moz-transition: width 0.5s ease-in-out;
+  -o-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+  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 {
+  height: 30px;
+  padding: 0;
+  font-size: 10px;
+}
+
+.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 {
+  width: 80%;
+  float: right;
+  margin-right: 10%;
+  margin-top: 4px;
+}
+.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{
+  width: 35px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input.car.plaque-part-1.plaque-part-m{
+  width: 49px!important;
+}
+.form-input.car.plaque-part-3{
+  width: 49px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input.car.plaque-part-3.plaque-part-m{
+  width: 69px !important;
+}
+.form-input.car.plaque-part-4{
+  margin-top: 10px;
+  width: 34px!important;
+  padding: 0!important;
+  float: left;
+}
+.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{
+  width: 25%;
+  float: left;
+  padding: 0 !important;
+}
+.form-input.car.bank-card-part-item:not(.bank-card-part-4):after{
+  position: absolute;
+  content: '\f068';
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  top: calc(50% - 10px);
+  right: -10px;
+  text-align: center;
+  font-size: 6px;
+}
+.form-input.car.bank-card-part-item .control{
+  background-color: transparent !important;
+  box-shadow: unset !important;
+  padding: 0 !important;
+  font-size: 13px !important;
+}

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

@@ -0,0 +1,15 @@
+<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + (inp.error == null ? '' : ' error') + (inp.icon != null ? '' : ' without-icon') + ' form-input car'">
+  <div *ngIf="inp.displayLabel" class="label">
+    <i *ngIf="inp.required" class="f-r fas fa-star-of-life required-icon"></i>
+    <i *ngIf="inp.rows.includes('Car')" [className]="(type == 'Car' ? 'active ' : '') + 'change-type-btn fas fa-car'" (click)="changeType('Car')"></i>
+    <i *ngIf="inp.rows.includes('Motor')" [className]="(type == 'Motor' ? 'active ' : '') + 'change-type-btn fas fa-motorcycle'" (click)="changeType('Motor')"></i>
+    <i *ngIf="inp.rows.includes('Driver')" [className]="(type == 'Driver' ? 'active ' : '') + 'change-type-btn fas fa-user'" (click)="changeType('Driver')"></i>
+    <i *ngIf="inp.rows.includes('Fingerprint')" [className]="(type == 'Fingerprint' ? 'active ' : '') + 'change-type-btn fas fa-fingerprint'" (click)="changeType('Fingerprint')"></i>
+  </div>
+  <div class="w-100 p-r">
+    <lib-form-plaque-select [inp]="car" *ngIf="type === 'Car'"></lib-form-plaque-select>
+    <lib-form-plaque-select [inp]="motor" *ngIf="type === 'Motor'"></lib-form-plaque-select>
+    <lib-form-select [inp]="driver" *ngIf="type === 'Driver'"></lib-form-select>
+    <lib-form-select [inp]="fingerprint" *ngIf="type === 'Fingerprint'"></lib-form-select>
+  </div>
+</div>