ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,385 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import * as $ from 'jquery';
+import {InputClass, OptionClass} from '../../../../classes/form.class';
+import {InputError, InputType} from '../../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-plaque-select',
+  templateUrl: './form.plaque.select.component.html',
+  styleUrls: ['./form.plaque.select.component.css']
+})
+export class FormPlaqueSelectComponent implements OnInit{
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @Input()
+  inp: InputClass;
+  cSearch = '';
+  open = false;
+  top = false;
+  part1: InputClass;
+  part2: InputClass;
+  part3: InputClass;
+  part4: InputClass;
+  get type(): typeof InputType { return InputType; }
+  alphas = ['الف', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی'];
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputOptionsDiv') inputOptionsDiv: ElementRef;
+  @ViewChild('inputLabel') inputLabel: ElementRef;
+  ngOnInit(): void{
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+      this.inp.options = [];
+    };
+    this.inp.setSearch = (s) => {
+      const p = s ? s.split('_') : null;
+      if (p && p.length === 4) {
+        setTimeout(() => {
+          this.part1.value = p[0];
+          this.part2.value = p[1];
+          this.part2.search = p[1];
+          this.part3.value = p[2];
+          this.part4.value = p[3];
+        }, 100);
+      } else if (p && p.length === 2) {
+        setTimeout(() => {
+          this.part1.value = p[0];
+          this.part3.value = p[1];
+        }, 100);
+      }else {
+        this.part1.value = '';
+        this.part2.value = '';
+        this.part2.search = '';
+        this.part3.value = '';
+        this.part4.value = '';
+      }
+    };
+    this.inp.focus = () => {
+      this.openOptions(true);
+    };
+    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.clear = () => {
+      this.inp.error = null;
+      this.inp.value = this.inp.default;
+      this.inp.search = '';
+      this.part1.value = '';
+      this.part2.value = '';
+      this.part2.search = '';
+      this.part3.value = '';
+      this.part4.value = '';
+      if (this.inp.rel != null){
+        this.inp.rel.options = [];
+      }
+    };
+    this.inp.data = () => {
+      return this.inp.value;
+    };
+    this.part1 = new InputClass(this.inp.environment, this.inp.l, 'Part1', null, InputType.Number,
+      'plaque-part-1 plaque-part-item' + (this.inp.type === InputType.SelectAutoCompletePlaqueM ? ' plaque-part-m' : ''),
+      '', true,
+      this.inp.type === InputType.SelectAutoCompletePlaqueM ? 100 : 10,
+      this.inp.type === InputType.SelectAutoCompletePlaqueM ? 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.SelectAutoCompletePlaqueM ? ' 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.SelectAutoCompletePlaqueM ? ' plaque-part-m' : ''),
+      '', true,
+      this.inp.type === InputType.SelectAutoCompletePlaqueM ? 10000 : 100,
+      this.inp.type === InputType.SelectAutoCompletePlaqueM ? 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.SelectAutoCompletePlaqueM ? ' 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;
+      this.inp.value = null;
+      if (v.length === 2 && this.inp.type === InputType.SelectAutoCompletePlaque){
+        this.part2.focus();
+        this.loadOptions();
+      } else if (v.length === 3 && this.inp.type === InputType.SelectAutoCompletePlaqueM){
+        this.part3.focus();
+        this.loadOptions();
+      }
+    };
+    this.part2.onChange = () => {
+      this.inp.error = null;
+      this.inp.value = null;
+      setTimeout(() => {
+        this.part3.focus();
+        this.loadOptions();
+      }, 100);
+    };
+    this.part3.onChange = (v) => {
+      this.inp.error = null;
+      this.inp.value = null;
+      if (v.length === 3 && this.inp.type === InputType.SelectAutoCompletePlaque){
+        this.part4.focus();
+        this.loadOptions();
+      } else if (v.length === 5 && this.inp.type === InputType.SelectAutoCompletePlaqueM){
+        this.loadOptions();
+      }
+    };
+    this.part4.onChange = (v) => {
+      this.inp.error = null;
+      this.inp.value = null;
+      if (v.length === 2){
+        this.loadOptions();
+      }
+    };
+    this.part1.onKeyDown = this.part2.onKeyDown = this.part3.onKeyDown = this.part4.onKeyDown = (e) => {
+      const code = e.keyCode || e.which;
+      if (code === 38 || code === 40){
+        this.onKeyDown(e);
+      }
+    };
+    this.part1.onFocusOut = (e) => {
+      if (!$(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')){
+        if (this.open){
+          this.closeOptions();
+        }
+      }
+    };
+    this.part2.onFocusOut = (e) => {
+      if (!$(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')){
+        if (this.open){
+          this.closeOptions();
+        }
+      }
+    };
+    this.part3.onFocusOut = (e) => {
+      if (!$(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')){
+        if (this.open){
+          this.closeOptions();
+        }
+      }
+    };
+    this.part4.onFocusOut = (e) => {
+      if (!$(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')){
+        if (this.open){
+          this.closeOptions();
+        }
+      }
+    };
+  }
+  loadOptions(): void{
+    const v = this.getSearch().replace(/^_+|_+$/g, '');
+    if (v){
+      this.inp.load(this.inp.url.replace('{}', v));
+    }else{
+      this.inp.options = [];
+    }
+  }
+  openOptions(f = false): boolean{
+    this.setPosition();
+    this.setHoverCenter();
+    this.open = true;
+    this.focusInput(f);
+    return true;
+  }
+  focusInput(f = false): void{
+    if (f){
+      this.part1.focus();
+    }
+  }
+  closeOptions(): boolean{
+    setTimeout(() => {
+      this.open = false;
+      this.top = false;
+      this.inp.hover = -1;
+      if (this.inp.value === null){
+        this.inp.search = '';
+        this.part1.value = '';
+        this.part2.value = '';
+        this.part2.search = '';
+        this.part3.value = '';
+        this.part4.value = '';
+        this.inp.options = [];
+      }
+    }, 1);
+    return true;
+  }
+  setPosition(): void{
+    const rect = this.inputDiv.nativeElement.getBoundingClientRect();
+    const offsetOfBottom = window.innerHeight - rect.bottom;
+    const height = this.inputOptionsDiv.nativeElement.offsetHeight;
+    this.top = offsetOfBottom < height;
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9) {
+      e.preventDefault();
+      this.cI(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+    else if (code === 13){
+      e.preventDefault();
+      if (this.open){
+        const h = this.getSelected();
+        if (!h){
+          return;
+        }
+        this.selectOption(h.value);
+      }else{
+        this.cI('Tab');
+      }
+    }
+    else if (code === 40){
+      e.preventDefault();
+      if (this.inp.hover + 1 >= this.inp.index){
+        return;
+      }
+      this.inp.hover = this.getHover();
+      this.setHoverCenter();
+    }
+    else if (code === 38){
+      e.preventDefault();
+      if (this.inp.hover <= 0){
+        this.inp.hover = 0;
+        return;
+      }
+      this.inp.hover = this.getHover(-1);
+      this.setHoverCenter();
+    }
+  }
+  toggleOption(): void{
+    this.openOptions();
+  }
+  selectOption(v, isEdit = false): void{
+    this.inp.error = null;
+    const va = this.getValue(v);
+    this.inp.value = v;
+    this.inp.hover = va ? va.index : -1;
+    this.inp.search = va ? va.search : '';
+    this.cSearch = this.inp.search;
+    if (this.inp.onChange){
+      this.inp.onChange(this.inp);
+    }
+    if (this.inp.rel){
+      this.inp.rel.value = null;
+      this.inp.rel.hover = -1;
+      this.inp.rel.index = 0;
+      this.inp.rel.search = '';
+      this.inp.rel.options = [];
+      this.inp.rel.url = this.inp.relUrl.replace('{}', this.inp.value);
+      if (this.inp.rel.type !== InputType.SelectAutoComplete) {
+        this.inp.rel.load();
+      }else{
+        this.inp.rel.url += '_{}';
+      }
+    }
+    const p = va ? va.option.Plaque.split('_') : null;
+    if (p && p.length === 4) {
+      this.part1.value = p ? p[0] : '';
+      this.part2.value = p ? p[1] : '';
+      this.part2.search = p ? p[1] : '';
+      this.part3.value = p ? p[2] : '';
+      this.part4.value = p ? p[3] : '';
+    } else if (p && p.length === 2) {
+      this.part1.value = p ? p[0] : '';
+      this.part3.value = p ? p[1] : '';
+    }
+    if (!isEdit){
+      this.cI('Tab');
+    }
+  }
+  cI(i: string): void{
+    setTimeout(() => {
+      this.changeIndex.emit(i);
+    }, 10);
+    setTimeout(() => {
+      this.closeOptions();
+    }, 20);
+  }
+  setHoverCenter(): void {
+    setTimeout(() => {
+      const hover: any = $(this.inputOptionsDiv.nativeElement).find('.option.hover');
+      const items: any = $(this.inputOptionsDiv.nativeElement).find('.items');
+      if (hover.length === 0){
+        return;
+      }
+      items.scrollTop = items.scrollTop - items.offset.top + hover.offset.top - hover.height();
+    }, 1);
+  }
+  getSelected(o: OptionClass[] = this.inp.options): any{
+    const h = o.find(x => x.index === this.inp.hover);
+    if (h){
+      return h;
+    }
+    for (const i of o){
+      const hi = this.getSelected(i.options);
+      if (hi){
+        return hi;
+      }
+    }
+  }
+  getHover(i = 1, o: OptionClass[] = this.inp.options, h = this.inp.hover): number{
+    const ho = o.find(x => x.index === h + i);
+    if (ho){
+      if (ho.show){
+        return ho.index;
+      }else {
+        h = h + i;
+      }
+    }
+    for (const it of o){
+      const hi = this.getHover(i, it.options, h);
+      if (hi){
+        return hi;
+      }
+    }
+    return 0;
+  }
+  getValue(v, o: OptionClass[] = this.inp.options): OptionClass{
+    const h = o.find(x => x.value === v);
+    if (h){
+      return h;
+    }
+    for (const i of o){
+      const hi = this.getValue(v, i.options);
+      if (hi){
+        return hi;
+      }
+    }
+  }
+  plaqueChangeFocus(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();
+      }
+    }
+  }
+  getSearch(): string{
+    return this.inp.type === InputType.SelectAutoCompletePlaque ?
+      `${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/radio/form.radio.component.css

@@ -0,0 +1,158 @@
+.form-input-con.radio {
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  position: relative;
+}
+.form-input-con.radio .form-input {
+  float: right;
+  width: 100%;
+  position: relative;
+}
+
+.form-input-con.radio .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.radio.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+
+.form-input-con.radio .form-input .label .required-icon {
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+
+
+.form-input-con.radio .form-input i.icon {
+  position: absolute;
+  font-size: 13px;
+  color: var(--comp);
+  cursor: default;
+  bottom: 0;
+  z-index: 1;
+  -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.radio .form-input > .control {
+  display: table;
+  width: 100%;
+  height: 35px;
+  background-color: white;
+  padding: 0 35px;
+  border: var(--border-input);
+  border-radius: 5px;
+}
+
+.form-input-con.radio .form-input .input-base {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+  top: 50%;
+  right: 50%;
+  z-index: 1;
+}
+
+.form-input-con.radio .form-input:hover .control, .form-input-con.radio .form-input .input-base:focus + .control {
+  outline: none;
+  border: var(--border-input-dark);
+}
+
+.form-input-con.radio.error .form-input > .control {
+  border: var(--border-input-red);
+}
+
+.form-input-con.radio.error .form-input i.icon {
+  color: var(--red);
+}
+
+
+.form-input-con.radio .form-input .options {
+  width: 100%;
+  text-align: center;
+  display: table;
+  height: 100%;
+}
+
+.form-input-con.radio .form-input .option {
+  text-align: center;
+  cursor: pointer;
+  font-size: 11px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  float: right;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.form-input-con.radio .form-input .option-con {
+  display: table-cell;
+  position: relative;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.form-input-con.radio .form-input .option-con .text {
+  height: 25px;
+  line-height: 25px;
+  margin-right: 10px;
+  float: right;
+  padding: 0 20px;
+}
+
+.form-input-con.radio .form-input .option-con input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  right: 0;
+}
+
+.form-input-con.radio .form-input .option-con span:after {
+  float: right;
+  height: 30px;
+  width: 15px;
+  content: "\f111";
+  font-family: "Font Awesome 5 Pro";
+  font-weight: bold;
+  color: var(--black-33);
+  line-height: 30px;
+  font-size: 14px;
+}
+.form-input-con.radio .form-input .option-con:hover span:after {
+  color: var(--black-66);
+}
+.form-input-con.radio .form-input .option-con input:checked ~ span:after {
+  color: var(--comp);
+  content: "\f192";
+}

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

@@ -0,0 +1,16 @@
+<div #inputDiv [id]="inp.name + 'Input'" [className]="inp.class + ' form-input-con radio' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
+  <div class="form-input" (click)="onClick()">
+    <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
+    <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+    <input #inputBase type="text" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+    <div class="control">
+      <div [className]="(o.class ? o.class + ' ' : '') + 'option-con'" *ngFor="let o of inp.options">
+        <label class="option">
+          <input [disabled]="inp.disabled" (change)="onChange()" [value]="o.value" [(ngModel)]="inp.value" [checked]="inp.value == o.value" type="radio" [name]="inp.name">
+          <span></span>
+          <div class="text">{{inp.l(o.name)}}</div>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,78 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import * as $ from 'jquery';
+import {InputClass} from '../../../classes/form.class';
+import {InputError} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-radio',
+  templateUrl: './form.radio.component.html',
+  styleUrls: ['./form.radio.component.css']
+})
+export class FormRadioComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputBase') inputBase: ElementRef;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.load();
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+      if (this.inp.value == null){
+        this.inp.value = this.inp.options.find(x => true).value;
+      }
+      this.onChange();
+    };
+    this.inp.setValue(this.inp.value, false);
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && this.inp.value === null) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(this.inp.default, false);
+    };
+    this.inp.data = () => {
+      return this.inp.value;
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+
+  onClick(): void{
+    this.onFocusIn();
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9 || code === 13) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+    const selected = this.inp.options.findIndex(x => x.value === this.inp.value);
+    if (code === 37){
+      const next = (selected >= this.inp.options.length - 1) ? selected : selected + 1;
+      this.inp.value = this.inp.options[next].value;
+    }
+    if (code === 39){
+      const next = (selected > 0) ? selected - 1 : 0;
+      this.inp.value = this.inp.options[next].value;
+    }
+  }
+  onChange(): void{
+    this.inp.error = null;
+    if (this.inp.onChange){
+      this.inp.onChange(this.inp);
+    }
+  }
+  onFocusIn(): void{
+    $(this.inputBase.nativeElement).focus();
+  }
+}