ps-toolkit-ui 0.0.211 → 0.0.212

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

@@ -1,151 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-<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

@@ -1,130 +0,0 @@
-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

@@ -1,215 +0,0 @@
-.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

@@ -1,59 +0,0 @@
-<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>