ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,59 @@
+.option-con {
+  float: right;
+  width: 100%;
+}
+.option-con .caret-icon{
+  float: right;
+  width: 35px;
+  height: 35px;
+  line-height: 33px;
+  text-align: center;
+  font-size: 20px;
+}
+.option-con .children{
+  float: left;
+  width: calc(100% - 35px);
+  position: relative;
+}
+.option {
+  float: left;
+  width: 100%;
+  min-height: 30px;
+  text-align: center;
+  font-size: 10px;
+  border-radius: 0;
+  position: relative;
+  line-height: 15px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  padding: 3px 10px;
+}
+.option .check:after {
+  content: "\f0c8";
+  position: absolute;
+  font-family: "Font Awesome 5 Pro";
+  font-weight: normal;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  right: 5px;
+  top: 5px;
+  font-size: 18px;
+}
+.option .check.checked:after {
+  content: "\f14a";
+  color: var(--green);
+  font-weight: 900;
+  animation: pop 180ms ease-in;
+}
+.option .check.null:after {
+  content: "\f146";
+  color: var(--green);
+  font-weight: 900;
+  animation: pop 180ms ease-in;
+}
+
+.option-con.selected > .option, .option-con.hover > .option{
+  background-color: var(--black-33);
+}

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

@@ -0,0 +1,10 @@
+<div [className]="'option-con' + (item.value == select.value ? ' selected' : '') + (item.index == select.hover ? ' hover' : '')" *ngIf="item.show">
+<!--  <i class="fas fa-caret-left caret-icon" (click)="toggleChildren($event)" *ngIf="item.options.length > 0"></i>-->
+  <div (mousemove)="hoverOption(item)" (click)="selectOption.emit(item.value)" class="option">
+    <div [className]="(item.selected ? 'checked ' : item.selected == null ? 'null ' : '') + ' check'" *ngIf="select.multiple"></div>
+    <span [innerHTML]="select.l(item.name)"></span>
+  </div>
+  <div *ngIf="item.options.length > 0 && (select.level === null || select.level > index)" class="children rightline">
+    <lib-form-select-item (selectOption)="selectOption.emit($event)" [index]="index + 1" [parent]="item" [item]="op" [select]="select" *ngFor="let op of item.options"></lib-form-select-item>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import * as $ from 'jquery';
+import {InputClass, OptionClass} from '../../../../classes/form.class';
+
+@Component({
+  selector: 'lib-form-select-item',
+  templateUrl: './form.select.item.component.html',
+  styleUrls: ['./form.select.item.component.css']
+})
+export class FormSelectItemComponent implements OnInit{
+  @Output()
+  selectOption = new EventEmitter<string>();
+  @Input()
+  select: InputClass;
+  @Input()
+  item: OptionClass;
+  @Input()
+  parent: OptionClass = null;
+  @Input()
+  index: number;
+  ngOnInit(): void{
+    this.item.parent = this.parent;
+  }
+  hoverOption(opt: OptionClass): void{
+    this.select.hover = opt.index;
+  }
+  toggleChildren(e): void{
+    const ch = $(e.target).closest('.option-con').find(' > .children');
+    const oc = $(e.target).closest('.option-con').find(' > .caret-icon');
+    if (ch.hasClass('open')) {
+      ch.removeClass('open');
+      ch.slideUp();
+      oc.removeClass('fa-caret-down').addClass('fa-caret-left');
+    } else {
+      ch.addClass('open');
+      ch.slideDown();
+      oc.addClass('fa-caret-down').removeClass('fa-caret-left');
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+.form-input-con.table{
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.table .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+
+.form-input-con.table .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.table.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.table .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+
+.form-input-con.table .form-input .control {
+  float: right;
+  width: 100%;
+  border-radius: 5px;
+  border: var(--border-input);
+}
+.form-input-con.table.error .form-input .control {
+  border: var(--border-input-red);
+}

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

@@ -0,0 +1,8 @@
+<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + ' form-input-con table' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
+  <div class="form-input">
+    <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
+    <div class="control">
+      <lib-table (changeRows)="changeRows($event)" [table]="inp.table"></lib-table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,94 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {PermissionClass} from '../../../classes/permission.class';
+import {InputError, InputType, PermissionTypeEnum} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-table',
+  templateUrl: './form.table.component.html',
+  styleUrls: ['./form.table.component.css']
+})
+export class FormTableComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  constructor(){
+  }
+  ngOnInit(): void{
+    const p = new PermissionClass();
+    p.Type = PermissionTypeEnum.Form;
+    const lAccess = new PermissionClass();
+    lAccess.Action = 'List';
+    const iAccess = new PermissionClass();
+    iAccess.Action = 'Insert';
+    const uAccess = new PermissionClass();
+    uAccess.Action = 'Update';
+    const dAccess = new PermissionClass();
+    dAccess.Action = 'Delete';
+    p.Accesses = [
+      lAccess,
+      iAccess,
+      uAccess,
+      dAccess
+    ];
+    this.inp.table.displayLabel = false;
+    this.inp.table.style = {padding: 0, boxShadow: 'unset'};
+    this.inp.table.permissions = p;
+    this.inp.table.showExtraButtons = false;
+    this.inp.table.cols.forEach(x => x.sort = false);
+    if (this.inp.table.form){
+      this.inp.table.form.onTop = true;
+      this.inp.table.form.inputs.push(new InputClass(this.inp.environment, this.inp.l, 'Id', null, InputType.Hidden, '', null, false));
+      this.inp.table.form.inputs.forEach(x => {
+        x.displayLabel = false;
+        x.class += ' h-30';
+      });
+    }
+    this.inp.setValue = (v) => {
+      this.inp.table.rows = v === null ? [] : v;
+    };
+    this.inp.focus = () => {
+      if (this.inp.table.form){
+        this.inp.table.form.inputs.find(_ => true).focus();
+      }
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && this.inp.table.rows.length === 0) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (!this.inp.required && this.inp.table.rows.length === 0) {
+        return true;
+      }
+      if (this.inp.required && this.inp.minLength !== -1 && this.inp.minLength === this.inp.maxLength &&
+        this.inp.table.rows.length !== this.inp.minLength) {
+        this.inp.error = InputError.Length;
+        return false;
+      }
+      if (this.inp.required && this.inp.minLength !== -1 && this.inp.table.rows.length < this.inp.minLength) {
+        this.inp.error = InputError.MinLength;
+        return false;
+      }
+      if (this.inp.required && this.inp.maxLength !== -1 && this.inp.table.rows.length > this.inp.maxLength) {
+        this.inp.error = InputError.MaxLength;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(this.inp.default === null ? [] : this.inp.default, false);
+    };
+    this.inp.data = () => {
+      return this.inp.table.rows;
+    };
+    if (this.inp.default){
+      this.inp.setValue(this.inp.default, false);
+    }
+  }
+  changeRows(e): void{
+    this.inp.error = null;
+  }
+}

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

@@ -0,0 +1,109 @@
+.form-input-con.textarea {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+}
+.form-input-con.textarea .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+.form-input-con.textarea .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.textarea.error .form-input .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input-con.textarea .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input-con.textarea .form-input .control {
+  display: block;
+  width: 100%;
+  height: 80px;
+  padding: 10px 35px;
+  font-family: Vazir;
+  color: var(--black);
+  background-image: none;
+  border: none;
+  border-radius: 5px;
+  text-align: center;
+  resize: none;
+  font-size: 11px;
+  margin: 0;
+  border: var(--border-input);
+}
+
+.form-input-con.textarea .form-input .control:hover, .form-input-con.textarea .form-input .control:focus {
+  border: var(--border-input-dark);
+  outline: none;
+}
+
+.form-input-con.textarea .form-input i.icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--comp);
+  cursor: text;
+  top: 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.textarea .form-input i.clear-icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--red);
+  cursor: pointer;
+  top: 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.textarea.error .form-input .control {
+  border: var(--border-input-red);
+}
+.form-input-con.textarea.error .form-input .control:hover, .form-input-con.textarea.error .form-input .control:focus {
+  border: var(--border-input-red-dark);
+}
+.form-input-con.textarea.error .form-input .control, .form-input-con.textarea.error .form-input i.icon {
+  color: var(--red-cc);
+}
+
+.form-input-con.textarea.h-50 .form-input, .form-input-con.textarea.h-50 .form-input .control{
+  height: 50px;
+}
+.form-input-con.textarea.h-50 .form-input i.icon{
+  height: 50px;
+  line-height: 50px;
+}

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

@@ -0,0 +1,10 @@
+<div #inputDiv [id]="inp.name + 'Input'" [className]="inp.class + ' form-input-con textarea' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
+  <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>
+    <div class="w-100 p-r">
+      <textarea (keydown)="onKeyDown($event)" [disabled]="inp.disabled" [(ngModel)]="inp.value" [placeholder]="inp.l(inp.name)" #inputBase [name]="inp.name" class="control" autocomplete="off" [maxLength]="inp.maxLength > 0 ? inp.maxLength : 524288"></textarea>
+      <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>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,76 @@
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form-textarea',
+  templateUrl: './form.textarea.component.html',
+  styleUrls: ['./form.textarea.component.css']
+})
+export class FormTextareaComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputLabel') inputLabel: ElementRef;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+    };
+    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.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;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.value = this.inp.default;
+    };
+    this.inp.data = () => {
+      return this.inp.value;
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+  onFocusIn(): void{
+    this.inputBase.nativeElement.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');
+    }
+  }
+}