ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,296 @@
+.form-input-con.text{
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.text .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+
+.form-input-con.text .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.text.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.text .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input-con.text .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;
+  position: relative;
+  z-index: 2;
+  font-size: 11px;
+  border: var(--border-input);
+}
+
+.form-input-con.text .form-input:hover .control, .form-input-con.text .form-input .control:focus {
+  outline: none;
+  border: var(--border-input-dark);
+}
+.form-input-con.text.error .form-input .control {
+  border: var(--border-input-red);
+}
+.form-input-con.text.error .form-input .control, .form-input-con.text.error .form-input span.icon {
+  color: var(--red);
+}
+.form-input-con.text.error .form-input:hover .control, .form-input-con.text.error .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+
+.form-input-con.text.without-icon .form-input .control {
+  padding: 5px 10px;
+}
+
+.form-input-con.text .form-input 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-con.text .form-input span.clear-icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--red);
+  cursor: pointer;
+  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;
+  right: 0;
+}
+
+.form-input-con.text .form-input span.icon.button {
+  background-color: var(--base);
+  color: white;
+  border-radius: 5px 0 0 5px;
+  cursor: pointer;
+}
+.form-input-con.text .form-input span.icon.button:hover {
+  background-color: var(--base-dark);
+}
+.form-input-con.text .form-input span.icon.button.blue {
+  background-color: var(--blue);
+}
+.form-input-con.text .form-input span.icon.button.blue:hover {
+  background-color: var(--blue-dark);
+}
+.form-input-con.text .form-input span.icon.button.green {
+  background-color: var(--green);
+}
+.form-input-con.text .form-input span.icon.button.green:hover {
+  background-color: var(--green-dark);
+}
+.form-input-con.text .form-input span.icon.button.red {
+  background-color: var(--red);
+}
+.form-input-con.text .form-input span.icon.button.red:hover {
+  background-color: var(--red-dark);
+}
+.form-input-con.text .form-input span.icon.button.comp {
+  background-color: var(--comp);
+}
+.form-input-con.text .form-input span.icon.button.comp:hover {
+  background-color: var(--comp-dark);
+}
+
+.form-input-con.text.disabled .form-input .control, .form-input-con.text.disabled .form-input span.icon, .form-input-con.text.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.text .form-input .progress {
+  width: 98%;
+  margin-right: 1%;
+  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;
+}
+.form-input-con.text.without-icon .form-input .control {
+  padding: 5px 10px;
+}
+.form-input-con.text.h-50 .form-input .control {
+  height: 50px;
+}
+.form-input-con.text.h-50 .form-input span.icon {
+  height: 50px;
+  line-height: 50px;
+}
+
+.form-input-con.text.h-45 .form-input .control {
+  height: 45px;
+  font-size: 17px;
+}
+.form-input-con.text.h-45 .form-input .control::-moz-placeholder, .form-input-con.text.h-45 .form-input .control::-webkit-input-placeholder {
+   font-size: 12px;
+}
+
+.form-input-con.text.h-45 .form-input span.icon {
+  height: 45px;
+  line-height: 50px;
+  font-size: 18px;
+}
+
+.form-input-con.text.h-30 .form-input .control {
+  height: 30px;
+  padding: 0;
+  font-size: 10px;
+}
+
+.form-input-con.text.h-30 .form-input span.icon {
+  height: 30px;
+  width: 30px;
+  line-height: 33px;
+  font-size: 11px;
+}
+
+.form-input-con.text.h-35 {
+  height: 35px;
+}
+
+.form-input-con.text.h-35 .form-input .control {
+  height: 35px;
+  padding: 0 35px;
+}
+
+.form-input-con.text.h-35 .form-input span.icon {
+  height: 35px;
+  line-height: 35px;
+}
+
+.form-input-con.text.h-25 .form-input .control {
+  height: 25px;
+  padding: 0;
+}
+
+.form-input-con.text.h-25 .form-input span.icon {
+  height: 25px;
+  line-height: 25px;
+}
+
+.form-input-con.text.h-25 .form-input .control::-moz-placeholder, .form-input-con.text.h-25 .form-input .control::-webkit-input-placeholder {
+  font-size: 10px;
+  font-family: VazirLight;
+}
+
+.form-input-con.text.table-search {
+  width: 100%;
+  float: right;
+  padding: 0;
+}
+.form-input-con.text.plaque-part-item .form-input .control{
+  border: none !important;
+}
+.form-input-con.text.plaque-part-1{
+  width: 35px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input-con.text.plaque-part-1.plaque-part-m{
+  width: 49px!important;
+}
+.form-input-con.text.plaque-part-3{
+  width: 49px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input-con.text.plaque-part-3.plaque-part-m{
+  width: 69px !important;
+}
+.form-input-con.text.plaque-part-4{
+  margin-top: 10px;
+  width: 31px!important;
+  padding: 0!important;
+  float: left;
+}
+.form-input-con.text.plaque-part-4 .form-input .control{
+  height: 25px!important;
+}
+.form-input-con.text.plaque-part-4.plaque-part-m{
+  display: none !important;
+}
+
+.form-input-con.text.bank-card-part-item{
+  width: 25%;
+  float: left;
+  padding: 0 !important;
+}
+.form-input-con.text.bank-card-part-item:not(.bank-card-part-4):after{
+  position: absolute;
+  content: '\f068';
+  font-family: "Font Awesome 5 Pro";
+  font-weight: 900;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  top: calc(50% - 10px);
+  right: -10px;
+  text-align: center;
+  font-size: 6px;
+}
+.form-input-con.text.bank-card-part-item .form-input .control{
+  background-color: transparent !important;
+  box-shadow: unset !important;
+  border: unset !important;
+  padding: 0 !important;
+  font-size: 13px !important;
+}

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

@@ -0,0 +1,13 @@
+<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + ' form-input-con text' + (inp.error == null ? '' : ' error') + (inp.disabled || inp.loading ? ' disabled' : '') + (inp.icon == null ? ' without-icon' : '')">
+  <div class="form-input" (click)="onFocusIn()">
+    <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
+    <input (keydown)="onKeyDown($event)" (change)="onChange($event)" (keyup)="onKeyUp($event)" [disabled]="inp.disabled || inp.loading" [value]="getValue()" [placeholder]="inp.placeholder ? inp.l(inp.placeholder) : ''" #inputBase [type]="inp.type == type.Password ? 'password': 'text'" [name]="inp.name" class="control" autocomplete="off" [maxLength]="inp.maxLength > 0 ? inp.type == type.Number ? inp.maxLength.toString().length : inp.maxLength : 524288">
+    <span *ngIf="inp.icon != null || inp.loading" (click)="inp.button && onClickButton()" #inputIcon [className]="(inp.button ? inp.button + ' button ' : '') + 'icon'">
+      <i [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner ' : inp.icon + ' ')">{{inp.type === type.Sheba ? 'IR' : ''}}</i>
+    </span>
+    <span *ngIf="inp.withClear && inp.value" (click)="inp.clear()" class="clear-icon">
+      <i class="fa-duotone fa-eraser"></i>
+    </span>
+    <div *ngIf="inp.progress != null && inp.progress.remainSecs > 0" [ngStyle]="{width: inp.progress.percent + '%'}" class="progress"></div>
+  </div>
+</div>

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

@@ -0,0 +1,185 @@
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError, InputType} from '../../../classes/enum.class';
+import {HelperClass} from '../../../classes/helper.class';
+
+@Component({
+  selector: 'lib-form-textbox',
+  templateUrl: './form.textbox.component.html',
+  styleUrls: ['./form.textbox.component.css']
+})
+export class FormTextboxComponent implements OnInit {
+  @Input()
+  inp: InputClass;
+  cValue = '';
+  @Output()
+  changeIndex = new EventEmitter<string>();
+
+  get type(): typeof InputType {
+    return InputType;
+  }
+
+  navigationKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'Home', 'End', 'ArrowLeft', 'ArrowRight', 'Clear', 'Copy', 'Paste'];
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputLabel') inputLabel: ElementRef;
+
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+      this.inp.value = v != null ? v.toString() : '';
+    };
+    this.inp.focus = (changeIndex= false) => {
+      this.onFocusIn(changeIndex);
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      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.type === InputType.Mobile && !RegExp(/^(09\d{9})$/).test(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.Phone && !RegExp(/^(0\d{10})$/).test(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.Url && !RegExp(/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)$/).test(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.required && this.inp.type === InputType.Email && !RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.NationalCode && !HelperClass.nationalCodeValid(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.Sheba && !HelperClass.shebaValid(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.PostalCode && !HelperClass.postalCodeValid(this.inp.value)) {
+        this.inp.error = InputError.Invalid;
+        return false;
+      }
+      if (this.inp.type === InputType.Number || this.inp.type === InputType.Price){
+        const v = this.inp.value.toString().replace(/,/g, '');
+        if (!/^\d+$/.test(v)){
+          this.inp.error = InputError.Invalid;
+          return false;
+        }
+      }
+      if (this.inp.type === InputType.Number || this.inp.type === InputType.Price){
+        const v = parseInt(this.inp.value.replace(/,/g, ''), 10);
+        if (this.inp.required && this.inp.minLength !== -1 && v < this.inp.minLength) {
+          this.inp.error = InputError.MinAmount;
+          return false;
+        }
+        if (this.inp.required && this.inp.maxLength !== -1 && v > this.inp.maxLength) {
+          this.inp.error = InputError.MaxAmount;
+          return false;
+        }
+      } else {
+        if (this.inp.required && this.inp.minLength !== -1 && this.inp.minLength === this.inp.maxLength &&
+          this.inp.value.length !== this.inp.minLength) {
+          this.inp.error = InputError.Length;
+          return false;
+        }
+        if (this.inp.required && this.inp.minLength !== -1 && this.inp.value.length < this.inp.minLength) {
+          this.inp.error = InputError.MinLength;
+          return false;
+        }
+        if (this.inp.required && this.inp.maxLength !== -1 && this.inp.value.length > this.inp.maxLength) {
+          this.inp.error = InputError.MaxLength;
+          return false;
+        }
+      }
+      if (this.inp.match !== null && this.inp.value !== this.inp.match.value) {
+        this.inp.error = InputError.NotMatch;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(this.inp.default, false);
+    };
+    this.inp.data = () => {
+      let v = this.inp.value;
+      if (v === null){
+        return null;
+      }
+      if (v && this.inp.type === InputType.Number || this.inp.type === InputType.Price){
+        v = parseInt(v.replace(/,/g, ''), 10);
+      }
+      return v;
+    };
+  }
+
+  onFocusIn(changeIndex = false): void {
+    if (changeIndex){
+      this.inputBase.nativeElement.select();
+    }else{
+      this.inputBase.nativeElement.focus();
+    }
+  }
+  onChange(e): void {
+    this.onKeyUp(e);
+  }
+
+  onKeyUp(e): void {
+    this.inp.value = e.target.value;
+    if (this.inp.onKeyUp) {
+      this.inp.onKeyUp(this.inp);
+    }
+    if (this.inp.onChange) {
+      if (this.cValue !== e.target.value) {
+        this.inp.onChange(e.target.value);
+        this.cValue = e.target.value;
+      }
+    }
+  }
+  onClickButton(): void{
+    if (this.inp.isValid()){
+      this.inp.onClickButton();
+    }
+  }
+  onKeyDown(e): void {
+    if (this.inp.onKeyDown) {
+      this.inp.onKeyDown(e);
+    }
+    const code = e.keyCode || e.which;
+    if (code === 9 || code === 13) {
+      e.preventDefault();
+      if (code === 13 && this.inp.button){
+        this.onClickButton();
+      }else{
+        this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
+      }
+      return;
+    }
+    this.inp.error = null;
+  }
+
+  getValue(): string {
+    try {
+      if (this.inp.value && this.inp.type === InputType.Price){
+        const v = this.inp.value.toString().replace(/,/g, '');
+        if (/^\d+$/.test(v)){
+          return parseInt(v, 10).toLocaleString();
+        }
+        return v;
+      }
+      return this.inp.value;
+    }
+    catch {
+      return '';
+    }
+  }
+}

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

@@ -0,0 +1,205 @@
+.form-input-con.time {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.time .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+.form-input-con.time .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.time.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.time .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+
+.form-input-con.time .form-input .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;
+  background-color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 11px;
+  border: var(--border-input);
+}
+.form-input-con.time .form-input .control:focus{
+  border-radius: 5px 5px 5px 0;
+}
+.form-input-con.time.top .form-input .control:focus{
+  border-radius: 0 5px 5px 5px;
+}
+
+.form-input-con.time .form-input:hover .control, .form-input-con.time .form-input .control:focus {
+  border: var(--border-input-dark);
+  outline: none;
+}
+
+.form-input-con.time .form-input i.icon {
+  position: absolute;
+  font-size: 13px;
+  color: var(--comp);
+  cursor: text;
+  bottom: 0;
+  z-index: 3;
+  -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.time .form-input i.clear-icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--red);
+  cursor: pointer;
+  bottom: 0;
+  z-index: 3;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  width: 35px;
+  text-align: center;
+  height: 35px;
+  line-height: 38px;
+  right: 0;
+}
+
+.form-input-con.time.disabled .form-input .control, .form-input-con.time.disabled .form-input i.icon, .form-input-con.time.disabled .form-input .label {
+  cursor: default;
+  opacity: 0.7;
+  filter: blur(0.5px);
+}
+
+.form-input-con.time.error .form-input .control, .form-input-con.time.error .form-input i.icon {
+  color: var(--red-cc);
+}
+
+.form-input-con.time.error .form-input .control {
+  border: var(--border-input-red);
+}
+.form-input-con.time.error .form-input:hover .control, .form-input-con.time.error .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+
+.form-input-con.time .form-input .options-con{
+  position: absolute;
+  left: 0;
+  height: 235px;
+  top: -200000px;
+  background-color: white;
+  border: var(--border-input);
+  border-radius: 0 0 5px 5px;
+  z-index: 4;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+.form-input-con.time .form-input .options-con .options{
+  float: right;
+  width: 100px;
+  position: relative;
+}
+.form-input-con.time .form-input .options-con .options .hours{
+  float: left;
+  width: 50%;
+  height: 235px;
+  overflow: auto;
+  position: relative;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.form-input-con.time .form-input .options-con .options .rightline{
+  position: absolute;
+  top: 0;
+  right: calc((100% - 1px) / 2);
+  width: 1px;
+  height: 235px;
+}
+.form-input-con.time .form-input .options-con .options .hours::-webkit-scrollbar {
+  display: none;
+}
+.form-input-con.time .form-input .options-con .options .minutes{
+  float: right;
+  width: 50%;
+  height: 235px;
+  overflow: auto;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.form-input-con.time .form-input .options-con .options .hours::-webkit-scrollbar {
+  display: none;
+}
+.form-input-con.time .form-input .options-con .options .hours .hour, .form-input-con.time .form-input .options-con .options .minutes .minute{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+.form-input-con.time .form-input .options-con .options .hours .hour:hover,
+.form-input-con.time .form-input .options-con .options .hours .hour.active,
+.form-input-con.time .form-input .options-con .options .minutes .minute:hover,
+.form-input-con.time .form-input .options-con .options .minutes .minute.active{
+  background-color: var(--black-33);
+}
+.form-input-con.time .form-input .control:focus + .options-con{
+  top: 35px !important;
+}
+
+.form-input-con.time.top .form-input .control:focus + .options-con{
+  border-radius: 5px 5px 0 0;
+  bottom: 35px;
+  top: unset!important;
+}
+.form-input-con.time.h-22 .form-input .control {
+  height: 22px;
+  padding: 5px;
+}
+.form-input-con.time.h-22 .form-input i.icon {
+  display: none;
+}
+.form-input-con.time.h-22 .form-input .control:focus + .options-con{
+  top: 22px !important;
+}
+
+.form-input-con.time.h-22.top .form-input .control:focus + .options-con{
+  bottom: 22px;
+}