ps-toolkit-ui 0.0.210 → 0.0.211

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+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();
+    };
+  }
+}