ps-toolkit-ui 0.0.211 → 0.0.212

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

@@ -1,22 +0,0 @@
-<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + ' form-input-con time' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
-  <div class="form-input" (click)="toggleTime()">
-    <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">
-      <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)" (keyup)="onKeyUp($event)" (focusout)="onFocusOut()" [disabled]="inp.disabled" [(ngModel)]="inp.search" #inputBase [name]="inp.name" [placeholder]="inp.l(inp.name)" class="control" autocomplete="off" maxlength="">
-      <div #inputOptionsDiv class="options-con">
-        <div class="options">
-          <div class="hours">
-            <div [className]="(h === activeHour ? 'active ' : '') + 'hour'" (click)="selectTime(h, 'hour')" *ngFor="let h of hours">{{h}}</div>
-          </div>
-          <div class="rightline">
-          </div>
-          <div class="minutes">
-            <div [className]="(m === activeMinute ? 'active ' : '') + 'minute'" (click)="selectTime(m, 'minute')" *ngFor="let m of minutes">{{m}}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,139 +0,0 @@
-import {Component, ElementRef, EventEmitter, 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-time',
-  templateUrl: './form.time.component.html',
-  styleUrls: ['./form.time.component.css']
-})
-export class FormTimeComponent implements OnInit{
-  @Input()
-  inp: InputClass;
-  @Input()
-  inForm: boolean;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  cSearch = '';
-  hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
-  minutes = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
-  activeHour = null;
-  activeMinute = null;
-  @ViewChild('inputBase') inputBase: ElementRef;
-  @ViewChild('inputDiv') inputDiv: ElementRef;
-  @ViewChild('inputLabel') inputLabel: ElementRef;
-  @ViewChild('inputOptionsDiv') inputOptionsDiv: ElementRef;
-  constructor(){
-  }
-  ngOnInit(): void{
-    if (this.inp.value){
-      this.inp.setValue(this.inp.value, false);
-    }
-    this.inp.setValue = (v) => {
-      if (v === null){
-        this.inp.clear();
-        return;
-      } else  {
-        this.activeHour = `${(v.Hours > 9 ? v.Hours : `0${v.Hours}`)}`;
-        this.activeMinute = `${(v.Minutes > 9 ? v.Minutes : `0${v.Minutes}`)}`;
-        this.inp.value = `${this.activeHour}:${this.activeMinute}`;
-        this.inp.search = `${this.activeHour}:${this.activeMinute}`;
-      }
-    };
-    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 (!RegExp(/^(?:(?:([01]?\d|2[0-3]):)([0-5]?\d))$/).test(this.inp.value)) {
-        this.inp.error = InputError.Invalid;
-        return false;
-      }
-      return true;
-    };
-    this.inp.clear = () => {
-      if (this.inp.default){
-        this.inp.setValue(this.inp.default, false);
-      }else{
-        this.inp.value = null;
-        this.inp.search = null;
-      }
-    };
-    this.inp.data = () => {
-      return this.inp.value;
-    };
-    this.inp.focus = () => {
-      this.openOptions();
-    };
-    this.inp.focusOut = () => {
-      $(this.inputBase.nativeElement).blur();
-    };
-  }
-  toggleTime(): void{
-    this.openOptions();
-  }
-  openOptions(): void {
-    this.setPosition();
-    $(this.inputBase.nativeElement).focus();
-  }
-  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');
-    }
-  }
-  onKeyDown(e): void{
-    const code = e.keyCode || e.which;
-    if (code === 9 || code === 13) {
-      e.preventDefault();
-      $(this.inputDiv.nativeElement).removeClass('top');
-      this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
-      if (!this.inForm){
-        $(this.inputBase.nativeElement).blur();
-      }
-    }
-  }
-  onKeyUp(e): void{
-    this.inp.error = null;
-    if (this.cSearch !== e.target.value) {
-      this.cSearch = e.target.value;
-      if (this.inp.search !== '' && this.inp.search !== null){
-        if (RegExp(/^(?:(?:([01]?\d|2[0-3]):)([0-5]?\d))$/).test(this.inp.search)){
-          const hm = this.inp.search.split(':');
-          this.activeHour = hm[0].length === 2 ? hm[0] : `0${hm[0]}`;
-          this.activeMinute = hm[1].length === 2 ? hm[1] : `0${hm[1]}`;
-          this.inp.value = `${this.activeHour}:${this.activeMinute}`;
-          return;
-        }
-      }
-      this.activeHour = null;
-      this.activeMinute = null;
-      this.inp.value = null;
-    }
-  }
-  onFocusOut(): void{
-    $(this.inputDiv.nativeElement).removeClass('top');
-    this.inp.search = this.inp.value;
-  }
-  selectTime(v: string, s: string): void{
-    if (s === 'hour'){
-      this.activeMinute = this.activeMinute === null ? '00' : this.activeMinute;
-      this.activeHour = v;
-    }else{
-      this.activeHour = this.activeHour === null ? '00' : this.activeHour;
-      this.activeMinute = v;
-      this.changeIndex.emit('Tab');
-    }
-    this.inp.search = `${this.activeHour}:${this.activeMinute}`;
-    this.inp.value = `${this.activeHour}:${this.activeMinute}`;
-  }
-}

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

@@ -1,109 +0,0 @@
-.form-input-con.tree {
-  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-con.tree .form-input {
-  float: right;
-  width: 100%;
-  position: relative;
-}
-.form-input-con.tree .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.tree.error .form-input .label {
-  font-size: 10px;
-  color: var(--red);
-}
-.form-input-con.tree .form-input .label .required-icon{
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  font-size: 9px;
-  color: var(--red);
-  text-align: center;
-}
-.form-input-con.tree .form-input > .control{
-  float: right;
-  width: 100%;
-  border-radius: 5px;
-  background-color: white;
-  min-height: 35px;
-  position: relative;
-  padding: 10px;
-  max-height: 400px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: var(--border-input);
-}
-.form-input-con.tree .form-input:hover .control, .form-input-con.tree .form-input .input-base:focus + .control {
-  border: var(--border-input-dark);
-}
-.form-input-con.tree.error .form-input:hover .control, .form-input-con.tree.error .form-input .input-base:focus + .control {
-  border: var(--border-input-red-dark);
-}
-.form-input-con.tree .form-input .input-base {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  cursor: pointer;
-  top: 50%;
-  right: 50%;
-  z-index: 1;
-}
-.form-input-con.tree .form-input 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-con.tree .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.tree.error .form-input > .control {
-  border: var(--border-input-red);
-}
-.form-input-con.tree.error .form-input i.icon {
-  color: var(--red);
-}

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

@@ -1,11 +0,0 @@
-<div #inputDiv [id]="inp.name + 'Input'" [className]="inp.class + ' form-input-con tree' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
-  <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 #inputBase type="checkbox" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
-    <div [className]="(inp.loading ? 'o-h ' : '') + 'control'">
-      <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>
-      <lib-form-tree-item [level]="0" [index]="i" [item]="item" [tree]="inp" [base]="true" *ngFor="let item of inp.rows; let i = index"></lib-form-tree-item>
-    </div>
-  </div>
-</div>

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

@@ -1,98 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import * as $ from 'jquery';
-import {InputClass, TreeRowClass} from '../../../classes/form.class';
-import {InputError} from '../../../classes/enum.class';
-
-@Component({
-  selector: 'lib-form-tree',
-  templateUrl: './form.tree.component.html',
-  styleUrls: ['./form.tree.component.css']
-})
-export class FormTreeComponent implements OnInit{
-  @Input()
-  inp: InputClass;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  @ViewChild('inputBase') inputBase: ElementRef;
-  constructor(){
-  }
-  ngOnInit(): void {
-    this.inp.load();
-    this.inp.focus = () => {
-      this.onFocusIn();
-    };
-    this.inp.isValid = () => {
-      this.inp.error = null;
-      if (this.inp.required && this.getSelected().length === 0) {
-        this.inp.error = InputError.Required;
-        return false;
-      }
-      return true;
-    };
-    this.inp.data = () => {
-      return this.getSelected();
-    };
-    this.inp.setValue = (v) => {
-      this.check(v.map(String));
-    };
-    this.inp.clear = () => {
-      this.inp.setValue([], false);
-    };
-  }
-
-  onClick(): void{
-    this.onFocusIn();
-  }
-  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();
-  }
-  getSelected(): any[]{
-    let l = [];
-    for (const f of this.inp.rows){
-      l = l.concat(this.getRowSelected(f));
-    }
-    return l;
-  }
-  getRowSelected(ch: TreeRowClass): any[]{
-    let l = [];
-    if (ch.selected && (!this.inp.onlyChild || ch.children.length === 0)){
-      l.push(ch.value);
-    }
-    ch.children.forEach((c) => {
-      const rs = this.getRowSelected(c);
-      l = l.concat(rs);
-    });
-    return l;
-  }
-
-  check(ids, chs = this.inp.rows): boolean{
-    let isChecked = false;
-    let cIsChecked = false;
-    for (const r of chs){
-      r.selected = ids.includes(r.value);
-      if (r.selected){
-        isChecked = true;
-      }
-      cIsChecked = this.check(ids, r.children);
-      if (this.inp.onlyChild && cIsChecked){
-        r.selected = true;
-      }
-    }
-    return isChecked || cIsChecked;
-  }
-  checkChildren(chs: TreeRowClass[], ids): void{
-    for (const r of chs){
-      if (ids.includes(r.value)){
-        r.toggle(this.inp.onlyChild);
-      }
-      setTimeout(() => {this.checkChildren(r.children, ids); });
-    }
-  }
-}

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

@@ -1,142 +0,0 @@
-.row-item {
-  float: left;
-  width: 90%;
-  text-align: center;
-  position: relative;
-  margin: 2px 0 2px 5px;
-}
-
-.row-item .content {
-  float: right;
-  width: 100%;
-  cursor: pointer;
-  border-radius: 5px;
-  background-color: #0b486b11;
-}
-
-.row-item .open-close {
-  position: absolute;
-  right: -30px;
-  height: 35px;
-  width: 10px;
-  text-align: center;
-  line-height: 30px;
-  font-size: 20px;
-  cursor: pointer;
-}
-
-.row-item .content:hover, .row-item .content.parent {
-  background-color: #0b486b22;
-}
-
-.row-item .content.parent:hover {
-  background-color: #0b486b44;
-}
-
-.row-item .children {
-  float: left;
-  width: 100%;
-  padding: 10px;
-  position: relative;
-  display: none;
-}
-
-.row-item .children .items {
-  float: left;
-  width: 100%;
-}
-
-.row-item .children > .line {
-  width: 2px;
-  background-color: #0b486b22;
-  top: 15px;
-  right: 20px;
-  height: calc(100% - 30px);
-  position: absolute;
-}
-
-.row-item .children .row-item > .line {
-  width: 10px;
-  background-color: #0b486b22;
-  top: 17px;
-  height: 2px;
-  position: absolute;
-  right: -35px;
-}
-
-.row-item .content .title {
-  float: right;
-  width: 100%;
-  height: 35px;
-  line-height: 35px;
-  font-size: 12px;
-}
-
-
-.row-item .checkbox {
-  float: right;
-  width: 100%;
-  text-align: center;
-  height: 35px;
-  line-height: 35px;
-  padding: 0 35px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  font-size: 12px;
-  z-index: 2;
-  position: relative;
-}
-
-.row-item .control {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  cursor: pointer;
-  top: 50%;
-  right: 50%;
-  z-index: 1;
-}
-.row-item > .checkbox:before {
-  content: "\f0c8";
-  position: absolute;
-  font-family: "Font Awesome 5 Pro";
-  font-weight: normal;
-  width: 35px;
-  height: 35px;
-  line-height: 35px;
-  right: 0;
-  top: 0;
-  font-size: 18px;
-}
-
-.row-item.selected > .checkbox:before {
-  content: "\f14a";
-  color: var(--green);
-  font-weight: 900;
-  animation: pop 180ms ease-in;
-}
-
-.row-item.null > .checkbox:before {
-  content: "\f146";
-  color: var(--green);
-  font-weight: 900;
-  animation: pop 180ms ease-in;
-}
-.row-item:after{
-  content:"";
-  border: 0;
-  height: 1px;
-  width: 100%;
-  float: right;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.25), rgba(0, 0, 0, 0));
-}
-::ng-deep lib-form-tree-item:last-of-type > .row-item:after{
-  display: none;
-}

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

@@ -1,9 +0,0 @@
-<div [className]="(item.selected ? 'selected ' : item.selected == null ? 'null ' : '') + 'row-item'">
-  <div (click)="onClick()" class="checkbox">{{tree.l(item.name)}}</div>
-  <i *ngIf="item.children.length > 0" (click)="openClose($event)" [className]="(index == 0 && level == 0 ? 'fa-duotone fa-caret-down ' : 'fa-duotone fa-caret-left ') + 'open-close'"></i>
-  <div [className]="(index == 0 && level == 0 ? 'open ' : '') + 'children'" [style]="index == 0 && level == 0 ? {display: 'block'} : {}" *ngIf="item.children.length > 0">
-    <div class="items rightline">
-      <lib-form-tree-item [level]="level + 1" [index]="i" [item]="child" [parent]="item" [tree]="tree" *ngFor="let child of item.children; let i = index"></lib-form-tree-item>
-    </div>
-  </div>
-</div>

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

@@ -1,49 +0,0 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
-import * as $ from 'jquery';
-import {InputClass, TreeRowClass} from '../../../../classes/form.class';
-
-@Component({
-  selector: 'lib-form-tree-item',
-  templateUrl: './form.tree.item.component.html',
-  styleUrls: ['./form.tree.item.component.css']
-})
-export class FormTreeItemComponent implements OnInit{
-  @Input()
-  item: TreeRowClass;
-  @Input()
-  level: number;
-  @Input()
-  index: number;
-  @Input()
-  tree: InputClass;
-  @Input()
-  parent: TreeRowClass = null;
-  @Input()
-  base: boolean;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  @ViewChild('inputDiv') inputDiv: ElementRef;
-  @ViewChild('inputBase') inputBase: ElementRef;
-  constructor(){
-  }
-  ngOnInit(): void{
-    this.item.parent = this.parent;
-  }
-  openClose(e): void {
-    const ch = $(e.target).closest('.row-item').find(' > .children');
-    const oc = $(e.target).closest('.row-item').find(' > .open-close');
-    if (ch.hasClass('open')) {
-      ch.removeClass('open');
-      ch.stop().slideUp();
-      oc.removeClass('fa-caret-down').addClass('fa-caret-left');
-    } else {
-      ch.addClass('open');
-      ch.stop().slideDown();
-      oc.addClass('fa-caret-down').removeClass('fa-caret-left');
-    }
-  }
-
-  onClick(): void {
-    this.item.toggle(this.tree.onlyChild);
-  }
-}

package/src/lib/components/header/header.component.css

@@ -1,57 +0,0 @@
-#Header{
-  float: right;
-  width: 100%;
-  height: 50px;
-  background-color: white;
-  position: relative;
-  z-index: 11;
-}
-#Header .logout{
-  float: left;
-  width: 80px;
-  margin: 10px 30px;
-}
-@media (max-width: 399.98px) {
-  #Header .toggle-sidebar{
-    display: block;
-  }
-}
-
-@media (min-width: 400px) and (max-width: 499.98px) {
-  #Header .toggle-sidebar{
-    display: block;
-  }
-}
-
-@media (min-width: 500px) and (max-width: 599.98px) {
-  #Header .toggle-sidebar{
-    display: block;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 699.98px) {
-  #Header .toggle-sidebar{
-    display: block;
-  }
-}
-
-@media (min-width: 700px) and (max-width: 799.98px) {
-  #Header .toggle-sidebar{
-    display: block;
-  }
-}
-
-@media (min-width: 800px) and (max-width: 899.98px) {
-}
-
-@media (min-width: 900px) and (max-width: 999.98px) {
-}
-
-@media (min-width: 1000px) and (max-width: 1099.98px) {
-}
-
-@media (min-width: 1100px) and (max-width: 1199.98px) {
-}
-
-@media (min-width: 1200px) {
-}

package/src/lib/components/header/header.component.html

@@ -1,5 +0,0 @@
-<div id="Header" class="underline">
-  <div class="logout">
-    <lib-form-button [inp]="logoutInp"></lib-form-button>
-  </div>
-</div>

package/src/lib/components/header/header.component.ts

@@ -1,28 +0,0 @@
-import {Component, EventEmitter, Output} from '@angular/core';
-import {InputClass} from '../../classes/form.class';
-import {InputType} from '../../classes/enum.class';
-import {PsToolkitUiConfigService} from '../../services/config.service';
-import {LangClass} from '../../classes/lang.class';
-import {strings} from '../../classes/string.class';
-import {HelperClass} from '../../classes/helper.class';
-
-@Component({
-  selector: 'lib-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
-})
-export class HeaderComponent{
-  logoutInp: InputClass;
-  @Output()
-  logout = new EventEmitter();
-  constructor(public config: PsToolkitUiConfigService){
-    const lang = new LangClass(config.currentLang, config.strings);
-    const l = (key: string, v = null): string => {
-      return lang.get('Public', 'Header', key, v);
-    };
-    this.logoutInp = new InputClass(config.environment, l, 'Logout', null, InputType.Button, 'grey h-30');
-    this.logoutInp.onClick = () => {
-      this.logout.emit();
-    };
-  }
-}