ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,178 @@
+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

@@ -0,0 +1,167 @@
+.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

@@ -0,0 +1,19 @@
+<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>