ps-toolkit-ui 0.0.211 → 0.0.212

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

@@ -1,10 +0,0 @@
-<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" (click)="onFocusIn($event)" [className]="inp.class + ' form-input plaque' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + (inp.type === type.PlaqueM ? ' plaque-m' : '')">
-  <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 [className]="'plaque-con' + (part2.value === 'ع' ? ' p' : '') + (part2.value === 'الف' ? ' g' : '')">
-    <div class="part-0" (click)="part1.focus()"></div>
-    <lib-form-textbox (changeIndex)="changeFocus('Part1', $event)" [inp]="part1"></lib-form-textbox>
-    <lib-form-select (changeIndex)="changeFocus('Part2', $event)" [inp]="part2"></lib-form-select>
-    <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>
-</div>

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

@@ -1,178 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {InputClass, OptionClass} from '../../../classes/form.class';
-import {InputError, InputType} from '../../../classes/enum.class';
-
-@Component({
-  selector: 'lib-form-plaque',
-  templateUrl: './form.plaque.component.html',
-  styleUrls: ['./form.plaque.component.css']
-})
-export class FormPlaqueComponent implements OnInit{
-  @Input()
-  inp: InputClass;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  part1: InputClass;
-  part2: InputClass;
-  part3: InputClass;
-  part4: InputClass;
-  get type(): typeof InputType { return InputType; }
-  alphas = ['الف', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی'];
-  @ViewChild('inputBase') inputBase: ElementRef;
-  @ViewChild('inputDiv') inputDiv: ElementRef;
-  @ViewChild('inputLabel') inputLabel: ElementRef;
-  constructor(){
-  }
-
-  ngOnInit(): void {
-    this.part1 = new InputClass(this.inp.environment, this.inp.l, 'Part1', null, InputType.Number,
-      'plaque-part-1 plaque-part-item' + (this.inp.type === InputType.PlaqueM ? ' plaque-part-m' : ''),
-      '', true,
-      this.inp.type === InputType.PlaqueM ? 100 : 10,
-      this.inp.type === InputType.PlaqueM ? 999 : 99);
-    this.part2 = new InputClass(this.inp.environment, this.inp.l, 'Part2', null, InputType.Select,
-      'plaque-part-2 plaque-part-item' + (this.inp.type === InputType.PlaqueM ? ' plaque-part-m' : ''),
-      '', true);
-    this.part2.options = this.alphas.map(x => new OptionClass(x, x));
-    this.part3 = new InputClass(this.inp.environment, this.inp.l, 'Part3', null, InputType.Number,
-      'plaque-part-3 plaque-part-item' + (this.inp.type === InputType.PlaqueM ? ' plaque-part-m' : ''),
-      '', true,
-      this.inp.type === InputType.PlaqueM ? 10000 : 100,
-      this.inp.type === InputType.PlaqueM ? 99999 : 999);
-    this.part4 = new InputClass(this.inp.environment, this.inp.l, 'Part4', null, InputType.Number,
-      'plaque-part-4 plaque-part-item' + (this.inp.type === InputType.PlaqueM ? ' plaque-part-m' : ''),
-      '', true, 10, 99);
-    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 === 2 && this.inp.type === InputType.Plaque){
-        this.part2.focus();
-      } else if (v.length === 3 && this.inp.type === InputType.PlaqueM){
-        this.part3.focus();
-      }
-    };
-    this.part2.onChange = () => {
-      this.inp.error = null;
-      setTimeout(() => {
-        this.part3.focus();
-      }, 100);
-    };
-    this.part3.onChange = (v) => {
-      this.inp.error = null;
-      if (v.length === 3 && this.inp.type === InputType.Plaque){
-        this.part4.focus();
-      } else if (v.length === 5 && this.inp.type === InputType.PlaqueM){
-        this.changeIndex.emit('Tab');
-      }
-    };
-    this.part4.onChange = (v) => {
-      this.inp.error = null;
-      if (v.length === 2){
-        this.changeIndex.emit('Tab');
-      }
-    };
-    this.inp.setValue = (v) => {
-      const parts = v.split('_');
-      if (parts.length === 4){
-        setTimeout(() => {
-          this.inp.value = v;
-          this.part1.value = parts[0];
-          this.part2.value = parts[1];
-          this.part2.search = parts[1];
-          this.part3.value = parts[2];
-          this.part4.value = parts[3];
-        }, 100);
-      } else if (parts.length === 2){
-        setTimeout(() => {
-          this.inp.value = v;
-          this.part1.value = parts[0];
-          this.part3.value = parts[1];
-        }, 100);
-      }else{
-        this.part1.value = '';
-        this.part2.value = '';
-        this.part2.search = '';
-        this.part3.value = '';
-        this.part4.value = '';
-      }
-    };
-    this.inp.isValid = () => {
-      this.inp.value = this.getValue();
-      if (this.inp.required && !this.inp.value) {
-        this.inp.error = InputError.Required;
-        return false;
-      }
-      if (!this.inp.required && !this.inp.value) {
-        return true;
-      }
-      if (this.inp.required && this.inp.type === InputType.Plaque &&
-        (!this.part1.isValid() || !this.part2.isValid() || !this.part3.isValid() || !this.part4.isValid())){
-        this.inp.error = InputError.Invalid;
-        return false;
-      }
-      if (this.inp.required && this.inp.type === InputType.PlaqueM && (!this.part1.isValid() || !this.part3.isValid())){
-        this.inp.error = InputError.Invalid;
-        return false;
-      }
-      return true;
-    };
-    this.inp.clear = () => {
-      this.inp.error = null;
-      this.inp.value = this.inp.default;
-      this.part1.value = this.part2.value = this.part3.value = this.part4.value = null;
-      this.part2.search = '';
-    };
-    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.inp.type === InputType.Plaque ?
-      `${this.part1.value ? this.part1.value : ''}_${this.part2.value ? this.part2.value : ''}_${this.part3.value ? this.part3.value : ''}_${this.part4.value ? this.part4.value : ''}` :
-      `${this.part1.value ? this.part1.value : ''}_${this.part3.value ? this.part3.value : ''}`;
-  }
-}

package/src/lib/components/form/plaque/select/form.plaque.select.component.css

@@ -1,167 +0,0 @@
-.form-input.plaque-select {
-  position: relative;
-  float: right;
-  width: 198px;
-  padding: 0 15px;
-  font-size: 12px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-}
-.form-input.plaque-select > .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.plaque-select.error > .label {
-  color: var(--red);
-}
-.form-input.plaque-select > .label .required-icon{
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  font-size: 9px;
-  color: var(--red);
-  text-align: center;
-}
-.form-input.plaque-select i.icon {
-  position: absolute;
-  width: 35px;
-  font-size: 15px;
-  color: var(--comp);
-  text-align: center;
-  height: 35px;
-  line-height: 35px;
-  left: 0;
-  bottom: 0;
-  z-index: 2;
-}
-.form-input.plaque-select.error i.icon {
-  color: var(--red-cc);
-}
-
-.form-input.plaque-select .options {
-  position: absolute;
-  width: 100%;
-  background-color: white;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-  border-radius: 0 0 5px 5px;
-  top: -2000px;
-  right: 0;
-  z-index: 5;
-  overflow: hidden;
-}
-
-::ng-deep .form-input.plaque-select.without-sub-options .options .option {
-  width: 100%;
-}
-.form-input.plaque-select.open .options {
-  top: 35px !important;
-}
-
-.form-input.plaque-select.top .options {
-  border-radius: 5px 5px 0 0;
-  bottom: 35px;
-  top: unset !important;
-}
-
-.form-input.plaque-select .options .items {
-  float: right;
-  width: 100%;
-  max-height: 200px;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-}
-
-.form-input.plaque-select .options .option {
-  float: right;
-  width: 100%;
-  height: 35px;
-  line-height: 35px;
-  text-align: center;
-  font-size: 11px;
-  border-radius: 0;
-}
-
-.form-input.plaque-select.open.h-50 .options {
-  top: 50px !important;
-}
-
-.form-input.plaque-select.h-50.top .options {
-  top: unset !important;
-  bottom: 50px;
-}
-
-.form-input.plaque-select.h-25 i.icon {
-  height: 25px;
-  width: 25px;
-  line-height: 25px;
-}
-
-.form-input.plaque-select.open.h-25 .options {
-  top: 25px !important;
-}
-
-.form-input.plaque-select.h-25.top .options {
-  top: unset !important;
-  bottom: 25px;
-}
-
-.form-input.plaque-select.h-25 .options .option {
-  height: 25px;
-  line-height: 25px;
-  font-size: 12px;
-}
-
-.form-input.plaque-select .plaque-con{
-  position: relative;
-  float: right;
-  width: 100%;
-  height: 35px;
-  font-size: 15px;
-  direction: ltr;
-  background-image: url("../../../../../assets/images/plaque.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  border-radius: 5px;
-  background-color: white;
-}
-.form-input.plaque-select .plaque-con .part-0{
-  width: 16px !important;
-  height: 35px !important;
-  float: left !important;
-}
-.form-input.plaque-select.plaque-m .plaque-con{
-  background-image: url("../../../../../assets/images/plaque_m.png");
-  background-color: white !important;
-}
-.form-input.plaque-select .plaque-con.p{
-  background-color: #ffc913;
-}
-.form-input.plaque-select .plaque-con.g{
-  background-color: #e20600;
-}
-::ng-deep .form-input.plaque-select .plaque-con .form-input .control{
-  background-color: transparent !important;
-  box-shadow: unset !important;
-  padding: 0 !important;
-  font-size: 13px!important;
-}
-
-::ng-deep #Part2Input .options{
-  z-index: 6;
-}

package/src/lib/components/form/plaque/select/form.plaque.select.component.html

@@ -1,19 +0,0 @@
-<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" (click)="toggleOption()" [className]="inp.class + (inp.error == null ? '' : ' error') + (top ? ' top' : '') + (open ? ' open' : '') + (inp.icon != null ? '' : ' without-icon') + (inp.type === type.SelectAutoCompletePlaqueM ? ' plaque-m' : '') + ' form-input plaque-select'">
-  <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
-  <div class="w-100 p-r">
-    <div [className]="'plaque-con' + (part2.value === 'ع' ? ' p' : '') + (part2.value === 'الف' ? ' g' : '')">
-      <div class="image"></div>
-      <div class="part-0" (click)="part1.focus()"></div>
-      <lib-form-textbox (changeIndex)="plaqueChangeFocus('Part1', $event)" [inp]="part1"></lib-form-textbox>
-      <lib-form-select (changeIndex)="plaqueChangeFocus('Part2', $event)" [inp]="part2"></lib-form-select>
-      <lib-form-textbox (changeIndex)="plaqueChangeFocus('Part3', $event)" [inp]="part3"></lib-form-textbox>
-      <lib-form-textbox (changeIndex)="plaqueChangeFocus('Part4', $event)" [inp]="part4"></lib-form-textbox>
-    </div>
-    <i *ngIf="inp.loading" #inputIcon class="fa fa-spin fa-spinner icon"></i>
-    <div #inputOptionsDiv class="options">
-      <div class="items">
-        <lib-form-select-item (selectOption)="selectOption($event)" [select]="inp" [item]="opt" *ngFor="let opt of inp.options"></lib-form-select-item>
-      </div>
-    </div>
-  </div>
-</div>