ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,151 @@
+.form-input-con.file {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+.form-input-con.file .form-input {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+
+.form-input-con.file .form-input .input-base-file, .form-input-con.file .form-input .input-base {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+  top: 50%;
+  right: 50%;
+  z-index: 1;
+}
+
+.form-input-con.file .form-input .control {
+  float: left;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 135px 0 35px;
+  text-align: center;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 5px;
+  border: var(--border-input);
+  background-color: white;
+  font-size: 11px;
+}
+.form-input-con.file .form-input .control .title{
+  float: right;
+  width: 100%;
+}
+
+.form-input-con.file .form-input .control:hover, .form-input-con.file .form-input .input-base:focus + .control {
+  outline: none;
+  border: var(--border-input-dark);
+}
+
+.form-input-con.file.error .form-input .control {
+  border: var(--border-input-red);
+}
+.form-input-con.file.error .form-input .control, .form-input-con.file.error .form-input span.icon {
+  color: var(--red);
+}
+.form-input-con.file .form-input .control:hover .button, .form-input-con.file .form-input .input-base:focus + .control .button {
+  background-color: var(--green-dark);
+}
+.form-input-con.file .form-input .button:hover {
+  background-color: var(--green-dark);
+}
+
+.form-input-con.file .form-input i.icon {
+  position: absolute;
+  width: 35px;
+  font-size: 13px;
+  color: var(--comp);
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.form-input-con.file .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.file .form-input .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+
+.form-input-con.file .form-input .button {
+  position: absolute;
+  width: 100px;
+  right: 0;
+  bottom: 0;
+  background-color: var(--green);
+  border-radius: 0 5px 5px 0;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  color: white;
+  font-size: 10px;
+  z-index: 2;
+}
+
+.form-input-con.file.h-35 {
+  height: 35px;
+}
+
+.form-input-con.file.has-value.h-35 .form-input .control {
+  height: 35px;
+  direction: ltr;
+  font-size: 9px;
+}
+
+.form-input-con.file.h-35 .form-input i.icon, .form-input-con.file.h-35 .form-input .button {
+  height: 35px;
+  line-height: 35px;
+}
+
+.form-input-con.file.h-30 {
+  height: 30px;
+}
+
+.form-input-con.file.h-30 .form-input .control {
+  height: 30px;
+  line-height: 30px;
+  direction: ltr;
+  font-size: 9px;
+}
+
+.form-input-con.file.h-30 .form-input i.icon, .form-input-con.file.h-30 .form-input .button {
+  height: 30px;
+  line-height: 30px;
+}

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

@@ -0,0 +1,12 @@
+<label #inputDiv [id]="inp.name + 'Input'" [for]="inp.name + 'InputFile'" [className]="inp.class + (inp.error == null ? '' : ' error') + (inp.value != null && inp.value != '' ? ' has-value' : '') + ' form-input-con file'">
+  <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>
+    <input #inputBaseFile class="input-base-file" type="file" [id]="inp.name + 'InputFile'" [multiple]="inp.multiple" (change)="onChange($event)">
+    <input #inputBase type="text" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+    <div class="control">
+      <div class="title">{{title()}}</div>
+      <div class="button">{{inp.multiple ? inp.l("ChooseFiles") : inp.l("ChooseFile")}}</div>
+    </div>
+    <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+  </div>
+</label>

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

@@ -0,0 +1,130 @@
+import {Component, ElementRef, EventEmitter, HostListener, 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-file',
+  templateUrl: './form.file.component.html',
+  styleUrls: ['./form.file.component.css']
+})
+export class FormFileComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputBaseFile') inputBaseFile: ElementRef;
+  @ViewChild('inputBase') inputBase: 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.allowed != null && this.inp.value != null && typeof this.inp.value !== 'string' &&
+        this.inp.value.map(x => this.inp.allowed.includes(x.name.split('.').pop().toLowerCase())).filter(x => !x).length > 0) {
+        this.inp.error = InputError.NotAllowed;
+        return false;
+      }
+      if (this.inp.maxLength !== -1 && this.inp.value != null && typeof this.inp.value !== 'string' &&
+        this.inp.value.map(x => x.size > this.inp.maxLength * 1024).filter(x => x).length > 0) {
+        this.inp.error = InputError.MaxContent;
+        return false;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.value = this.inp.default;
+    };
+    this.inp.data = () => {
+      if (this.inp.value && typeof this.inp.value !== 'string') {
+        if (!this.inp.exportPdf) {
+          return this.inp.value;
+        } else {
+          // const doc = new jsPDF();
+          // let y = 5;
+          // for (const img of this.inp.value) {
+          //   const i = await this.getPdfImage(img);
+          //   if (y + i.h > 287) {
+          //     doc.addPage();
+          //     y = 5;
+          //   }
+          //   doc.addImage(i.base64, 'JPEG', 5, y, i.w, i.h);
+          //   y += i.h + 5;
+          // }
+          // return doc.output('blob');
+        }
+      }
+      return null;
+    };
+    this.inp.focus = () => {
+      this.onClick();
+    };
+  }
+  getPdfImage(file): any{
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const i = new Image();
+        i.src = window.URL.createObjectURL(file);
+        i.onload = () => {
+          let w = i.width;
+          let h = i.height;
+          if (w > 200){
+            h = (200 * h) / w;
+            w = 200;
+          }
+          if (h > 287){
+            w = (287 * w) / h;
+            h = 287;
+          }
+          resolve({base64: reader.result.toString(), w, h});
+        };
+      };
+      reader.onerror = error => reject(error);
+    });
+  }
+  onClick(): void{
+    $(this.inputBase.nativeElement).focus();
+  }
+  onChange(e): void{
+    this.inp.error = null;
+    const v = [];
+    for (const f of e.target.files){
+      v.push(f);
+    }
+    this.inp.value = v;
+    this.changeIndex.emit('Tab');
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9 || code === 13) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+  }
+  onFocusIn(): void{
+    $(this.inputBase.nativeElement).focus();
+  }
+  title(): string{
+    if (this.inp.value == null){
+      return this.inp.l('FileNotSelected');
+    }
+    const t = typeof this.inp.value === 'string' ? this.inp.value : this.inp.value.map(x => x.name).join(', ');
+    const l = typeof this.inp.value === 'string' ? 1 : this.inp.value.length;
+    return this.inp.l('FileSelected', [l, t]);
+  }
+}

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

@@ -0,0 +1,215 @@
+.form-input.finger {
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  position: relative;
+}
+.form-input.finger .form-input-flex {
+  float: right;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.form-input.finger .form-input-flex .form-input-con {
+  float: right;
+  width: 250px;
+}
+.form-input.finger .form-input-flex .form-input-con .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.finger .form-input-flex .form-input-con.error .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input.finger .form-input-flex .form-input-con .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input.finger .form-input-flex .form-input-con > .control{
+  float: right;
+  width: 100%;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
+  background-color: white;
+  position: relative;
+  min-height: 35px;
+}
+
+.form-input.finger .form-input-flex .form-input-con .input-base {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+  top: 50%;
+  right: 50%;
+  z-index: 1;
+}
+.form-input.finger .form-input-flex .form-input-con:hover .control, .form-input.finger .form-input-flex .form-input-con .input-base:focus + .control {
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7);
+}
+.form-input.finger .form-input-flex .form-input-con i.icon {
+  position: absolute;
+  font-size: 14px;
+  color: var(--comp);
+  cursor: default;
+  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.finger .form-input-flex .form-input-con.error > .control {
+  box-shadow: 0 1px 3px 0 var(--red);
+}
+.form-input.finger .form-input-flex .form-input-con.error i.icon {
+  color: var(--red-cc);
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers {
+  float: right;
+  width: 100%;
+  position: relative;
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con{
+  float: right;
+  width: 50%;
+  position: relative;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .hand{
+  float: right;
+  width: 100%;
+  position: relative;
+  font-size: 100px;
+  height: 160px;
+  line-height: 160px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f{
+  position: absolute;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  background-color: var(--green);
+  border-radius: 50%;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f:hover{
+  background-color: var(--green-dark);
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f.remove{
+  background-color: var(--red);
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f.remove:hover{
+  background-color: var(--red-dark);
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f.loading{
+  background-color: var(--comp);
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f.loading:hover{
+  background-color: var(--comp);
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.right .btn-f.f1{
+  top: 79px;
+  right: 26px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.right .btn-f.f2{
+  top: 37px;
+  right: 47px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.right .btn-f.f3{
+  top: 29px;
+  right: 64px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.right .btn-f.f4{
+  top: 37px;
+  right: 82px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.right .btn-f.f5{
+  top: 54px;
+  right: 99px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.left .btn-f.f1{
+  top: 79px;
+  left: 26px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.left .btn-f.f2{
+  top: 37px;
+  left: 47px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.left .btn-f.f3{
+  top: 29px;
+  left: 64px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.left .btn-f.f4{
+  top: 37px;
+  left: 82px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con.left .btn-f.f5{
+  top: 54px;
+  left: 99px;
+}
+
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f .img{
+  position: absolute;
+  width: 75px;
+  height: 100px;
+  bottom: 20px;
+  right: calc((17px - 75px) / 2);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: 1;
+  border-radius: 5px;
+  box-shadow: var(--box-shadow);
+  display: none;
+}
+.form-input.finger .form-input-flex .form-input-con > .control .fingers .hand-con .btn-f.remove:hover .img{
+  display: block;
+}

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

@@ -0,0 +1,59 @@
+<div #inputDiv [id]="inp.name + 'Input'" [className]="inp.class + ' form-input finger' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
+  <div class="form-input-flex">
+    <div class="form-input-con" (click)="onClick()">
+      <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
+      <input #inputBase type="checkbox" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+      <div class="control">
+        <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-spin fa-spinner ' : inp.icon) + (inp.icon.includes('far') ? '' : ' fas') + ' icon'"></i>
+        <div class="fingers">
+          <div class="hand-con right">
+            <i class="fas fa-hand-paper hand fa-flip-horizontal"></i>
+            <div (click)="addRemoveFinger('R1')" [className]="(inp.value.R1 == 'Loading' ? 'loading ' : (inp.value.R1 == null ? '' : 'remove ')) + 'btn-f f1'">
+              <i [className]="(inp.value.R1 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R1 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.R1 && inp.value.R1.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.R1.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('R2')" [className]="(inp.value.R2 == 'Loading' ? 'loading ' : (inp.value.R2 == null ? '' : 'remove ')) + 'btn-f f2'">
+              <i [className]="(inp.value.R2 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R2 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.R2 && inp.value.R2.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.R2.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('R3')" [className]="(inp.value.R3 == 'Loading' ? 'loading ' : (inp.value.R3 == null ? '' : 'remove ')) + 'btn-f f3'">
+              <i [className]="(inp.value.R3 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R3 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.R3 && inp.value.R3.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.R3.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('R4')" [className]="(inp.value.R4 == 'Loading' ? 'loading ' : (inp.value.R4 == null ? '' : 'remove ')) + 'btn-f f4'">
+              <i [className]="(inp.value.R4 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R4 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.R4 && inp.value.R4.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.R4.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('R5')" [className]="(inp.value.R5 == 'Loading' ? 'loading ' : (inp.value.R5 == null ? '' : 'remove ')) + 'btn-f f5'">
+              <i [className]="(inp.value.R5 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.R5 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.R5 && inp.value.R5.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.R5.Image + '\')'}"></div>
+            </div>
+          </div>
+          <div class="hand-con left">
+            <i class="fas hand fa-hand-paper"></i>
+            <div (click)="addRemoveFinger('L1')" [className]="(inp.value.L1 == 'Loading' ? 'loading ' : (inp.value.L1 == null ? '' : 'remove ')) + 'btn-f f1'">
+              <i [className]="(inp.value.L1 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L1 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.L1 && inp.value.L1.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.L1.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('L2')" [className]="(inp.value.L2 == 'Loading' ? 'loading ' : (inp.value.L2 == null ? '' : 'remove ')) + 'btn-f f2'">
+              <i [className]="(inp.value.L2 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L2 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.L2 && inp.value.L2.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.L2.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('L3')" [className]="(inp.value.L3 == 'Loading' ? 'loading ' : (inp.value.L3 == null ? '' : 'remove ')) + 'btn-f f3'">
+              <i [className]="(inp.value.L3 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L3 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.L3 && inp.value.L3.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.L3.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('L4')" [className]="(inp.value.L4 == 'Loading' ? 'loading ' : (inp.value.L4 == null ? '' : 'remove ')) + 'btn-f f4'">
+              <i [className]="(inp.value.L4 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L4 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.L4 && inp.value.L4.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.L4.Image + '\')'}"></div>
+            </div>
+            <div (click)="addRemoveFinger('L5')" [className]="(inp.value.L5 == 'Loading' ? 'loading ' : (inp.value.L5 == null ? '' : 'remove ')) + 'btn-f f5'">
+              <i [className]="(inp.value.L5 == 'Loading' ? 'fa-spin fa-spinner ' : (inp.value.L5 == null ? 'fa-plus ' : 'fa-minus ')) + 'fas'"></i>
+              <div class="img" *ngIf="inp.value.L5 && inp.value.L5.Image" [style]="{backgroundImage: 'url(\'data:image/png;base64,' + inp.value.L5.Image + '\')'}"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>