ps-toolkit-ui 0.0.207 → 0.0.211

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

@@ -0,0 +1,326 @@
+.form-input-con.select {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+.form-input-con.select.plaque {
+  width: 185px!important;
+}
+
+.form-input-con.select > .form-input{
+  float: right;
+  width: 100%;
+  position: relative;
+}
+.form-input-con.select > .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.select.error > .form-input > .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.select > .form-input > .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input-con.select > .form-input .without-search {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  cursor: pointer;
+}
+.form-input-con.select > .form-input .control {
+  display: block;
+  width: 100%;
+  height: 35px;
+  padding: 5px 35px;
+  font-family: Vazir;
+  color: var(--black);
+  background-image: none;
+  border-radius: 5px;
+  text-align: center;
+  background-color: white;
+  font-size: 11px;
+  border: var(--border-input);
+}
+
+.form-input-con.select > .form-input:hover .control, .form-input-con.select > .form-input .control:focus {
+  outline: none;
+  border: 1px solid var(--black-88);
+}
+
+.form-input-con.select > .form-input .control:focus {
+  border-radius: 5px 5px 0 0;
+  outline: none;
+}
+.form-input-con.select.error > .form-input .control {
+  border: var(--border-input-red);
+}
+
+.form-input-con.select.error > .form-input .control, .form-input-con.select.error > .form-input i.icon {
+  color: var(--red);
+}
+.form-input-con.select.error > .form-input:hover .control, .form-input-con.select.error > .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+
+.form-input-con.select.top > .form-input .control:focus {
+  border-radius: 0 0 5px 5px;
+  outline: none;
+}
+
+.form-input-con.select > .form-input 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: 1;
+}
+.form-input-con.select > .form-input i.clear-icon {
+  position: absolute;
+  width: 35px;
+  font-size: 15px;
+  color: var(--red);
+  cursor: pointer;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.form-input-con.select > .form-input .options {
+  position: absolute;
+  width: 100%;
+  background-color: white;
+  border-radius: 0 0 5px 5px;
+  top: -200000px;
+  right: 0;
+  z-index: 5;
+  overflow: hidden;
+  cursor: pointer;
+  border: var(--border-input);
+}
+.form-input-con.select > .form-input .control:focus + .options {
+  top: 35px !important;
+}
+
+.form-input-con.select.top > .form-input .control:focus + .options {
+  border-radius: 5px 5px 0 0;
+  bottom: 35px;
+  top: unset !important;
+}
+
+.form-input-con.select > .form-input .options .items {
+  float: right;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+.form-input-con.select > .form-input .options .option {
+  float: right;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  font-size: 11px;
+  border-radius: 0;
+}
+.form-input-con.select .tags {
+  float: right;
+  width: 100%;
+}
+.form-input-con.select .tags .tag-con{
+  float: right;
+  width: auto;
+  padding: 5px;
+}
+.form-input-con.select .tags .tag-con .tag{
+  float: right;
+  width: auto;
+  position: relative;
+  background-color: var(--base);
+  color: white;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.form-input-con.select .tags .tag-con .tag > .label{
+  float: right;
+  width: auto;
+  padding: 0 5px 0 10px;
+}
+.form-input-con.select .tags .tag-con .tag > .delete{
+  float: right;
+  width: 25px;
+  text-align: center;
+  line-height: 25px;
+  cursor: pointer;
+}
+.form-input-con.select .tags .tag-con .tag > .delete:hover{
+  background-color: var(--base-dark);
+}
+.form-input-con.select.h-50 > .form-input .control {
+  height: 50px;
+  line-height: 50px;
+}
+
+.form-input-con.select.h-50 > .form-input .control:focus + .options {
+  top: 50px !important;
+}
+
+.form-input-con.select.h-50.top > .form-input .options {
+  top: unset !important;
+  bottom: 50px;
+}
+.form-input-con.select.h-25, .form-input-con.select.h-25 > .form-input .control {
+  height: 25px;
+  line-height: 25px;
+  padding: 0;
+}
+
+.form-input-con.select.h-25 > .form-input i.icon {
+  height: 25px;
+  width: 25px;
+  line-height: 25px;
+}
+
+.form-input-con.select.h-25 > .form-input .control:focus + .options {
+  top: 25px !important;
+}
+
+.form-input-con.select.h-25.top > .form-input .control:focus + .options {
+  border-radius: 5px 5px 0 0;
+  bottom: 25px;
+  top: unset !important;
+}
+.form-input-con.select.h-30, .form-input-con.select.h-30 > .form-input .control {
+  height: 30px;
+  line-height: 30px;
+  padding: 0;
+}
+
+.form-input-con.select.h-30 > .form-input i.icon {
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+}
+
+.form-input-con.select.h-30 > .form-input .control:focus + .options {
+  top: 30px !important;
+}
+
+.form-input-con.select.h-30.top > .form-input .control:focus + .options {
+  border-radius: 5px 5px 0 0;
+  bottom: 30px;
+  top: unset !important;
+}
+
+::ng-deep .form-input-con.select.h-30 > .form-input .options .option {
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+}
+
+.form-input-con.select.h-45, .form-input-con.select.h-45 > .form-input .control {
+  height: 45px;
+  line-height: 45px;
+  padding: 0;
+}
+.form-input-con.select.h-45 > .form-input .control::-moz-placeholder, .form-input-con.select.h-45 > .form-input .control::-webkit-input-placeholder {
+  font-size: 12px;
+}
+.form-input-con.select.h-45 > .form-input i.icon {
+  height: 45px;
+  width: 45px;
+  line-height: 45px;
+}
+
+.form-input-con.select.h-45 > .form-input .control:focus + .options {
+  top: 45px !important;
+}
+
+.form-input-con.select.h-45.top > .form-input .control:focus + .options {
+  border-radius: 5px 5px 0 0;
+  bottom: 45px;
+  top: unset !important;
+}
+
+::ng-deep .form-input-con.select.h-45 > .form-input .options .option {
+  min-height: 40px;
+  font-size: 12px;
+}
+
+.form-input-con.select.without-icon.h-25 > .form-input .control {
+  padding: 0;
+}
+.form-input-con.select.without-icon.h-30 > .form-input .control {
+  padding: 0;
+}
+.form-input-con.select.h-30 > .form-input i.icon {
+  font-size: 11px;
+}
+
+
+::ng-deep .form-input-con.select.without-sub-options > .form-input .options .option {
+  width: 100%;
+}
+
+.form-input-con.select.disabled > .form-input .control, .form-input-con.select.disabled > .form-input span.icon, .form-input-con.select.disabled > .form-input .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-con.select.plaque-part-2 > .form-input .control {
+  border: none !important;
+}
+.form-input-con.select.plaque-part-2{
+  width: 35px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input-con.select.plaque-part-2.plaque-part-m{
+  display: none!important;
+}
+

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

@@ -0,0 +1,16 @@
+<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '') + (inp.icon != null ? '' : ' without-icon') + ' form-input-con select'">
+  <div class="form-input" (click)="toggleOption($event)">
+    <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="f-r fas fa-star-of-life required-icon"></i><span class="f-r" [innerHTML]="inp.getLabel()"></span></div>
+    <div class="w-100 p-r">
+      <div *ngIf="inp.type === type.Select" class="without-search"></div>
+      <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+      <i *ngIf="inp.withClear && inp.value" (click)="inp.clear()" class="fa-duotone fa-eraser clear-icon"></i>
+      <input (keydown)="onKeyDown($event)" (focusout)="onFocusOut()" (keyup)="onKeyUp($event)" [disabled]="inp.disabled" [(ngModel)]="inp.search"  [placeholder]="inp.placeholder ? inp.l(inp.placeholder) : ''" #inputBase type="text" [name]="inp.name" class="control" autocomplete="off" [readOnly]="inp.type === type.Select" [maxLength]="inp.maxLength > 0 ? inp.maxLength : 524288">
+      <div #inputOptionsDiv class="options">
+        <div class="items">
+          <lib-form-select-item (selectOption)="selectOption($event)" [index]="1" [select]="inp" [item]="opt" *ngFor="let opt of inp.options"></lib-form-select-item>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,358 @@
+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-select',
+  templateUrl: './form.select.component.html',
+  styleUrls: ['./form.select.component.css']
+})
+export class FormSelectComponent implements OnInit{
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @Input()
+  inp: InputClass;
+  @Input()
+  inForm: boolean;
+  cSearch = '';
+  get type(): typeof InputType { return InputType; }
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputOptionsDiv') inputOptionsDiv: ElementRef;
+  @ViewChild('inputLabel') inputLabel: ElementRef;
+  ngOnInit(): void{
+    if (this.inp.type !== InputType.SelectAutoComplete){
+      this.inp.load();
+    }
+    this.inp.setValue = (v, isEdit) => {
+      if (!this.inp.multiple){
+        this.selectOption(v == null ? null : v.toString(), isEdit);
+      }else{
+        for (const t of v){
+          this.selectOption(t.toString(), isEdit);
+        }
+      }
+    };
+    if (this.inp.default != null){
+      this.inp.setValue(this.inp.default, false);
+    }
+    this.inp.setSearch = (s) => {
+      this.inp.search = s;
+    };
+    this.inp.focus = () => {
+      this.openOptions();
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && ((!this.inp.multiple && ((this.inp.addNew && !this.inp.search) || (!this.inp.addNew && !this.inp.value))) ||
+        (this.inp.multiple && this.getSelected().length === 0))) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      if (!this.inp.multiple){
+        this.inp.setValue(this.inp.default, true);
+      }else{
+        this.inp.options.forEach(x => this.unCheck(x));
+      }
+      if (this.inp.rel != null){
+        this.inp.rel.options = [];
+      }
+      if (this.inp.type === InputType.SelectAutoComplete){
+        this.inp.options = [];
+      }
+    };
+    this.inp.data = () => {
+      return !this.inp.multiple ? (this.inp.addNew ? this.inp.search : this.inp.value) : this.getSelected();
+    };
+    this.inp.focusOut = () => {
+      $(this.inputBase.nativeElement).blur();
+    };
+  }
+  loadOptions(): void{
+    const v = this.inp.search.replace(/^_+|_+$/g, '');
+    if (v){
+      this.inp.load(this.inp.url.replace('{}', v));
+    }else{
+      this.inp.options = [];
+    }
+  }
+  openOptions(): void{
+    this.setPosition();
+    this.setHoverCenter();
+    $(this.inputBase.nativeElement).focus();
+  }
+  onFocusOut(): void{
+    this.closeOptions();
+  }
+  closeOptions(): boolean{
+    setTimeout(() => {
+      $(this.inputDiv.nativeElement).removeClass('top');
+      this.inp.hover = -1;
+      if (this.inp.value === null){
+        if (!this.inp.addNew){
+          this.inp.search = '';
+        }
+        if (this.inp.type === InputType.SelectAutoComplete){
+          this.inp.options = [];
+        }else{
+          this.setOptions();
+        }
+      }
+    }, 1);
+    return true;
+  }
+  setPosition(): void{
+    const rect = this.inputDiv.nativeElement.getBoundingClientRect();
+    const offsetOfBottom = window.innerHeight - rect.bottom;
+    const height = this.inputOptionsDiv.nativeElement.offsetHeight;
+    if (offsetOfBottom < height){
+      $(this.inputDiv.nativeElement).addClass('top');
+    }else{
+      $(this.inputDiv.nativeElement).removeClass('top');
+    }
+  }
+  setOptions(r = this.inp.options): void{
+    r.map((x) => {
+      this.setOptions(x.options);
+      x.show = (this.inp.value !== null || this.inp.search === '' || x.name.includes(this.inp.search) ||
+          x.value.includes(this.inp.search) || x.options.filter(o => o.show).length > 0);
+    });
+  }
+  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.inputBase.nativeElement).is(':focus')){
+        const h = this.getSelectedHover();
+        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(e): void{
+    if (this.inp.multiple && $(e.target).closest('.option').hasClass('option')){
+      return;
+    }
+    this.openOptions();
+  }
+  onKeyUp(e): void{
+    if (this.cSearch !== e.target.value) {
+      this.cSearch = e.target.value;
+      if (this.inp.type === InputType.Select){
+        return;
+      }
+      this.inp.value = null;
+      if (this.inp.type === InputType.SelectSearch){
+        this.setOptions();
+      }else if (e.target.value){
+        this.loadOptions();
+      }else{
+        this.inp.options = [];
+      }
+    }
+  }
+  selectOption(v, isEdit = false): void{
+    this.inp.error = null;
+    const va = this.getValue(v);
+    if (this.inp.multiple){
+      this.toggle(va);
+      this.inp.search = '';
+    }else{
+      this.inp.value = v;
+      this.inp.hover = va ? va.index : -1;
+      this.inp.search = va ? (this.inp.type === InputType.SelectSearch || this.inp.type === InputType.Select ? va.name : va.search) : '';
+    }
+    this.setOptions();
+    this.cSearch = this.inp.search;
+    if (this.inp.onChange){
+      this.inp.onChange(this.inp, isEdit);
+    }
+    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 = [];
+      if (v !== null){
+        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 += '_{}';
+        }
+      }
+    }
+    if (!isEdit && !this.inp.multiple){
+      this.cI('Tab');
+    }
+  }
+  toggle(op: OptionClass): void {
+    if (op.selected){
+      this.unCheck(op);
+      setTimeout(() => {this.unCheckParent(op.parent); }, 100);
+    }else{
+      this.check(op);
+      setTimeout(() => {this.checkParent(op.parent); }, 100);
+    }
+  }
+  check(c: OptionClass): void {
+    c.selected = true;
+    this.checkChildren(c);
+  }
+  unCheck(c: OptionClass): void {
+    c.selected = false;
+    c.options.forEach((ch) => {
+      this.unCheck(ch);
+    });
+  }
+  checkChildren(o: OptionClass): void{
+    o.options.forEach((ch) => {
+      this.check(ch);
+    });
+  }
+  checkParent(p: OptionClass): void{
+    if (p){
+      if (p.options.filter(x => !x.selected).length > 0){
+        p.selected = null;
+      }else{
+        p.selected = true;
+      }
+      this.checkParent(p.parent);
+    }
+  }
+  unCheckParent(p: OptionClass): void{
+    if (p){
+      if (p.options.filter(x => x.selected || x.selected == null).length > 0){
+        p.selected = null;
+      }else{
+        p.selected = false;
+      }
+      this.unCheckParent(p.parent);
+    }
+  }
+  cI(i: string): void{
+    setTimeout(() => {
+      this.changeIndex.emit(i);
+      if (!this.inForm){
+        $(this.inputBase.nativeElement).blur();
+      }
+    }, 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);
+  }
+  title(): string {
+    if (this.inp.value == null){
+      return null;
+    }
+    return this.getTitle(this.inp);
+  }
+  getTitle(os): string{
+    for (const s of os.options){
+      if (s.value === this.inp.value.toString()){
+        return this.inp.l(s.name);
+      }
+      const v = this.getTitle(s);
+      if (v != null){
+        return v;
+      }
+    }
+    return null;
+  }
+  getSelectedHover(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.getSelectedHover(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;
+      }
+    }
+  }
+
+  getSelected(opts: OptionClass[]= this.inp.options): any[]{
+    let l = [];
+    for (const f of opts){
+      if (f.selected){
+        l.push(f.value);
+      }
+      if (f.selected && f.options.length !== 0){
+        continue;
+      }
+      const rs = this.getSelected(f.options);
+      l = l.concat(rs);
+    }
+    return l;
+  }
+}