ps-toolkit-ui 0.0.211 → 0.0.212

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

@@ -1,320 +0,0 @@
-.steps{
-  float: right;
-  width: 100%;
-  padding: 20px;
-  background-color: white;
-  border-radius: 5px;
-}
-.steps > .header{
-  float: right;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-}
-.steps > .header > .step-con{
-  float: right;
-  width: 160px;
-  position: relative;
-  padding: 10px;
-}
-.steps > .header > .step-con .step{
-  float: right;
-  width: 100%;
-  position: relative;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: default;
-  pointer-events: none;
-}
-.steps > .header > .step-con.done .step, .steps > .header > .step-con.next .step, .steps > .header > .step-con.process .step{
-  cursor: pointer;
-  pointer-events: unset;
-}
-.steps > .header > .step-con.done .step:hover, .steps > .header > .step-con.next .step:hover, .steps > .header > .step-con.process .step{
-  background-color: var(--base-11);
-}
-.steps > .header > .step-con .step .icon{
-  float: right;
-  width: 40px;
-  margin-right: calc(50% - 20px);
-  text-align: center;
-  font-size: 25px;
-  height: 40px;
-  line-height: 40px;
-}
-.steps > .header > .step-con .step .icon i{
-  line-height: 35px;
-}
-.steps > .header > .step-con.done .icon {
-  /*border: 2px solid var(--comp);*/
-}
-.steps > .header > .step-con.process .icon{
-  /*border: 2px solid var(--comp);*/
-}
-.steps > .header > .step-con .step .title{
-  float: right;
-  width: 100%;
-  text-align: center;
-  font-size: 13px;
-  height: 50px;
-  line-height: 50px;
-}
-.steps > .header > .step-con .step.with-description .title{
-  float: right;
-  width: 100%;
-  text-align: center;
-  font-size: 13px;
-  height: 25px;
-  line-height: 32px;
-}
-.steps > .header > .step-con .step .description{
-  float: right;
-  width: 100%;
-  text-align: center;
-  font-size: 11px;
-  height: 25px;
-  line-height: 20px;
-}
-.steps > .header > .step-con .step .dot{
-  float: right;
-  width: 15px;
-  height: 15px;
-  line-height: 15px;
-  margin-right: calc((100% - 15px) / 2);
-  border-radius: 50%;
-}
-.steps > .header > .step-con .step .delete{
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  font-size: 25px;
-  text-align: center;
-  color: var(--red);
-  cursor: pointer;
-  display: none;
-}
-.steps > .header > .step-con .step .delete:hover{
-  color: var(--red-dark);
-}
-.steps > .header > .step-con.process .step .delete{
-  display: block;
-}
-.steps > .header > .step-con .step .dot.dot-done{
-  display: none;
-  color: var(--comp);
-}
-.steps > .header > .step-con .step .dot.dot-process{
-  display: none;
-  color: var(--comp);
-  font-size: 20px;
-}
-.steps > .header > .step-con.done .step .dot, .steps > .header > .step-con.process .step .dot{
-  display: none;
-}
-.steps > .header > .step-con.done .step .dot.dot-done{
-  display: block;
-}
-.steps > .header > .step-con.process .step .dot.dot-process{
-  display: block;
-}
-.steps > .header > .step-con .step .line-r{
-  position: absolute;
-  width: calc((100% - 5px) / 2);
-  height: 2px;
-  bottom: 16px;
-  right: -10px;
-  background-image: linear-gradient(to right, rgba(51, 51, 51, 0.1), rgba(51, 51, 51, 0.4));
-}
-.steps > .header > .step-con .step .line-l{
-  position: absolute;
-  width: calc((100% - 5px) / 2);
-  height: 2px;
-  bottom: 16px;
-  left: -10px;
-  background-image: linear-gradient(to left, rgba(51, 51, 51, 0.1), rgba(51, 51, 51, 0.4));
-}
-.steps > .header > .step-con:first-of-type .step .line-r{
-  display: none;
-}
-.steps > .header > .step-con:last-of-type .step .line-l{
-  display: none;
-}
-@media (max-width: 399.99px) {
-  .steps{
-    width: 96%;
-    margin: 20px 2%;
-  }
-  .steps {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-  }
-  .steps .steps{
-    width: 100%;
-    margin-right: 0;
-  }
-
-  .steps > .header > .step-con .step .icon{
-    width: 30px;
-    margin-right: calc((100% - 30px) / 2);
-    font-size: 18px;
-    height: 30px;
-  }
-  .steps > .header > .step-con .step .icon i{
-    line-height: 25px;
-  }
-  .steps > .header > .step-con .step .title{
-    font-size: 10px;
-    line-height: 13px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-}
-
-@media (min-width: 400px) and (max-width: 499.99px) {
-  .steps{
-    width: 96%;
-    margin: 20px 2%;
-  }
-  .steps {
-    width: 100%;
-    margin: 0;
-    padding: 10px;
-  }
-  .steps .steps{
-    width: 100%;
-    margin-right: 0;
-  }
-
-  .steps > .header > .step-con .step .icon{
-    width: 30px;
-    margin-right: calc((100% - 30px) / 2);
-    font-size: 18px;
-    height: 30px;
-  }
-  .steps > .header > .step-con .step .icon i{
-    line-height: 25px;
-  }
-  .steps > .header > .step-con .step .title{
-    font-size: 10px;
-    line-height: 13px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-}
-
-@media (min-width: 500px) and (max-width: 599.99px) {
-  .steps{
-    width: 96%;
-    margin: 20px 2%;
-  }
-  .steps {
-    width: 100%;
-    margin: 0;
-  }
-  .steps .steps{
-    width: 100%;
-    margin-right: 0;
-  }
-
-  .steps > .header > .step-con .step .icon{
-    width: 35px;
-    margin-right: calc((100% - 35px) / 2);
-    font-size: 20px;
-    height: 35px;
-  }
-  .steps > .header > .step-con .step .icon i{
-    line-height: 30px;
-  }
-  .steps > .header > .step-con .step .title{
-    font-size: 11px;
-    line-height: 13px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 699.99px) {
-  .steps{
-    width: 96%;
-    margin: 20px 2%;
-  }
-  .steps {
-    width: 100%;
-    margin: 0;
-  }
-  .steps .steps{
-    width: 100%;
-    margin-right: 0;
-  }
-
-  .steps > .header > .step-con .step .icon{
-    width: 35px;
-    margin-right: calc((100% - 35px) / 2);
-    font-size: 20px;
-    height: 35px;
-  }
-  .steps > .header > .step-con .step .icon i{
-    line-height: 30px;
-  }
-  .steps > .header > .step-con .step .title{
-    font-size: 11px;
-  }
-}
-
-@media (min-width: 700px) and (max-width: 799.99px) {
-  .steps{
-    width: 96%;
-    margin: 20px 2%;
-  }
-  .steps {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-@media (min-width: 800px) and (max-width: 899.99px) {
-  .steps {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-@media (min-width: 900px) and (max-width: 999.99px) {
-  .steps {
-    width: 90%;
-    margin: 0 5%;
-  }
-}
-
-@media (min-width: 1000px) and (max-width: 1099.99px) {
-  .steps {
-    width: 80%;
-    margin: 0 10%;
-  }
-}
-
-@media (min-width: 1100px) and (max-width: 1199.99px) {
-  .steps {
-    width: 70%;
-    margin: 0 15%;
-  }
-}
-
-@media (min-width: 1200px) and (max-width: 1299.99px) {
-  .steps {
-    width: 70%;
-    margin: 0 15%;
-  }
-}

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

@@ -1,18 +0,0 @@
-<div class="steps">
-  <div class="header">
-    <div *ngFor="let s of steps.items; let i = index" [className]="(getActive() === i ? 'process ' : getActive() > i ? 'done ' : steps.activeAll ? 'next ' : '') + 'step-con'">
-      <div [className]="(s.description ? 'with-description ' : '') + 'step'" (click)="changeStep(i, s)">
-        <div [className]="s.icon + ' icon fa svg'"></div>
-        <div class="title o-h-d">{{steps.l(s.title)}}</div>
-        <div *ngIf="s.description" class="description o-h-d">({{steps.l(s.description)}})</div>
-        <i *ngIf="s.onDelete" (click)="onDelete(s)" class="delete fas fa-times"></i>
-        <i class="dot fas fa-dot-circle"></i>
-        <i class="dot dot-done fas fa-circle"></i>
-        <i class="dot dot-process fas fa-spinner"></i>
-        <div class="line-r"></div>
-        <div class="line-l"></div>
-      </div>
-    </div>
-  </div>
-  <ng-content></ng-content>
-</div>

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

@@ -1,44 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {StepsClass, StepsItemClass} from '../../classes/steps.class';
-
-@Component({
-  selector: 'lib-steps',
-  templateUrl: './steps.component.html',
-  styleUrls: ['./steps.component.css']
-})
-export class StepsComponent{
-  @Input()
-  steps: StepsClass;
-
-  constructor(private router: Router) {
-  }
-  getActive(): number {
-    return this.steps.items.findIndex(x => x.active);
-  }
-  changeStep(i: number, s: StepsItemClass): void{
-    if (s.url != null){
-      if (this.getActive() !== 0 || this.steps.activeAll) {
-        this.router.navigate([s.url]);
-      }
-    }else{
-      if (s.onClick){
-        s.onClick(s);
-      }else{
-        const a = this.steps.items.findIndex(x => x.active);
-        if (a > i || this.steps.activeAll){
-          this.steps.items[a].active = false;
-          this.steps.items[i].active = true;
-        }
-      }
-    }
-  }
-  onDelete(s: StepsItemClass): void{
-    const a = this.steps.items.findIndex(x => x.name === s.name);
-    if (this.steps.items[a].active){
-      this.steps.items[a - 1].active = true;
-    }
-    this.steps.items = this.steps.items.filter(x => x.name !== s.name);
-    s.onDelete(s);
-  }
-}

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

@@ -1,29 +0,0 @@
-.loading {
-  position: absolute;
-  background-color: white;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  border-radius: 5px;
-  z-index: 101;
-}
-
-.loading .text {
-  position: absolute;
-  height: 35px;
-  line-height: 35px;
-  width: 100%;
-  text-align: center;
-  font-family: VazirBold;
-  top: calc(50% - 20px);
-}
-
-::ng-deep .loading .text .icon {
-  font-size: 20px !important;
-  line-height: 30px;
-  position: relative;
-  top: 5px;
-  margin-left: 5px;
-}

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

@@ -1,9 +0,0 @@
-<div *ngIf="table.loading" class="loading">
-  <div class="text" [innerHTML]="table.l('LoadingTable', 'Processing')"></div>
-</div>
-<div *ngIf="!table.permission" class="loading">
-  <div class="text"><i class="fas fa-shield-alt icon"></i>{{ table.l("PermissionDenied") }}</div>
-</div>
-<div *ngIf="!table.loading && table.permission && table.rows.length == 0" class="loading">
-  <div class="text"><i class="fas fa-exclamation icon"></i>{{ table.l("NotfoundTitle") }}</div>
-</div>

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

@@ -1,14 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {TableClass} from '../../../classes/table.class';
-
-@Component({
-  selector: 'lib-table-loading',
-  templateUrl: './table.loading.component.html',
-  styleUrls: ['./table.loading.component.css']
-})
-export class TableLoadingComponent{
-  @Input()
-  table: TableClass;
-  constructor() {
-  }
-}

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

@@ -1,138 +0,0 @@
-.pagination{
-  float: right;
-  width: 100%;
-  text-align: center;
-}
-
-.pagination .items{
-  display: inline-block;
-  position: relative;
-}
-
-::ng-deep .table-con .pagination .form-input-con.button{
-  width: unset;
-  float: unset;
-  padding: 0 5px;
-  display: inline-block;
-  min-width: 25px;
-  margin: 0 2px;
-  vertical-align: middle;
-}
-
-::ng-deep .table-con .pagination .items .dots{
-  height: 25px;
-  line-height: 25px;
-  display: inline-block;
-  min-width: 25px;
-  margin: 0 5px;
-}
-
-::ng-deep .table-con .pagination .form-input-con.select{
-  width: unset;
-  padding: 0 5px;
-  display: inline-block;
-  min-width: 25px;
-  margin: 0 5px;
-  float: left;
-}
-
-
-
-
-@media (max-width: 399.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button.extra,
-  ::ng-deep .table-con .pagination .form-input-con.button.first,
-  ::ng-deep .table-con .pagination .form-input-con.button.last{
-    display: none;
-  }
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    display: none;
-  }
-}
-
-@media (min-width: 400px) and (max-width: 499.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button.extra,
-  ::ng-deep .table-con .pagination .form-input-con.button.first,
-  ::ng-deep .table-con .pagination .form-input-con.button.last{
-    display: none;
-  }
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    display: none;
-  }
-}
-
-@media (min-width: 500px) and (max-width: 599.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button.extra{
-    display: none;
-  }
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    margin: 0;
-    font-size: 10px;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 699.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    margin: 0;
-    font-size: 10px;
-  }
-}
-
-@media (min-width: 700px) and (max-width: 799.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    margin: 0;
-    font-size: 10px;
-  }
-}
-
-@media (min-width: 800px) and (max-width: 899.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    margin: 0;
-    font-size: 10px;
-  }
-}
-
-@media (min-width: 900px) and (max-width: 999.98px) {
-  ::ng-deep .table-con .pagination .form-input-con.button{
-    padding: 0 3px;
-    margin: 0 3px;
-  }
-  ::ng-deep .table-con .pagination .items .dots {
-    margin: 0;
-    font-size: 10px;
-  }
-}
-
-@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/table/pagination/table.pagination.component.html

@@ -1,9 +0,0 @@
-<div class="pagination">
-  <div class="items">
-    <span *ngFor="let btn of getButtons()">
-      <lib-form-button *ngIf="btn.type === type.Button" [inp]="btn"></lib-form-button>
-      <div class="dots" *ngIf="btn.type === type.Icon"><div class="w-100"><i class="fas fa-ellipsis-h icon"></i></div></div>
-    </span>
-  </div>
-  <lib-form-select [inp]="perPageSelect"></lib-form-select>
-</div>

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

@@ -1,89 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {TableClass} from '../../../classes/table.class';
-import {InputClass, OptionClass} from '../../../classes/form.class';
-import {InputType} from '../../../classes/enum.class';
-
-@Component({
-  selector: 'lib-table-pagination',
-  templateUrl: './table.pagination.component.html',
-  styleUrls: ['./table.pagination.component.css']
-})
-export class TablePaginationComponent implements OnInit {
-  @Input()
-  table: TableClass;
-  size: number;
-  perPageSelect: InputClass;
-  next: InputClass;
-  get type(): typeof InputType { return InputType; }
-
-  getButtons(): InputClass[]{
-    this.size = parseInt((this.table.count / this.table.perPage).toString(), 10) + (this.table.count % this.table.perPage > 0 ? 1 : 0);
-    if (this.size <= 1) {
-      return [];
-    }
-    const previous = new InputClass(this.table.environment, this.table.l, null,
-      'fa-duotone fa-angle-right', InputType.Button, 'h-25', this.table.page - 1);
-    previous.onClick = (btn) => this.changePage(btn);
-    const next = new InputClass(this.table.environment, this.table.l, null,
-      'fa-duotone fa-angle-left', InputType.Button, 'h-25', this.table.page + 1);
-    next.onClick = (btn) => this.changePage(btn);
-    const last = new InputClass(this.table.environment, this.table.l, this.size.toString(), null,
-      InputType.Button, 'h-25 last', this.size);
-    last.onClick = (btn) => this.changePage(btn);
-    const first = new InputClass(this.table.environment, this.table.l, '1', null, InputType.Button, 'h-25 first', 1);
-    first.onClick = (btn) => this.changePage(btn);
-    const dots = new InputClass(this.table.environment, this.table.l, 'dots', '', InputType.Icon);
-    let buttons: InputClass[] = [];
-    buttons.push(previous);
-    if (this.table.page === 1){
-      previous.onClick = null;
-    }
-    if (this.size < 6) {
-      buttons = buttons.concat(this.add(1, this.size + 1));
-    } else if (this.table.page < 4) {
-      buttons = buttons.concat(this.add(1, 5), [dots, last]);
-    } else if (this.table.page > this.size - 3) {
-      buttons = buttons.concat([first, dots], this.add(this.size - 3, this.size + 1));
-    } else {
-      buttons = buttons.concat([first, dots], this.add(this.table.page - 1, this.table.page + 2), [dots, last]);
-    }
-    buttons.push(next);
-    if (this.table.page === this.size){
-      next.onClick = null;
-    }
-    return buttons;
-  }
-
-  add(s: number, f: number): InputClass[] {
-    const l: InputClass[] = [];
-    for (let i = s; i < f; i++) {
-      const b = new InputClass(this.table.environment, this.table.l, i.toString(),
-        null, InputType.Button, 'h-25' + (this.table.page === i ? ' active' : ' extra'), i);
-      b.onClick = (btn) => this.changePage(btn);
-      l.push(b);
-    }
-    return l;
-  }
-  changePage(btn): void{
-    this.table.page = btn.value;
-    this.table.load(btn);
-  }
-
-  ngOnInit(): void{
-    this.perPageSelect = new InputClass(this.table.environment, this.table.l, 'PerPage', '', InputType.Select, 'h-25 w-80-p f-l');
-    this.perPageSelect.value = this.table.perPage.toString();
-    this.perPageSelect.options = [
-      new OptionClass('5', '5'),
-      new OptionClass('10', '10'),
-      new OptionClass('50', '50'),
-      new OptionClass('100', '100'),
-    ];
-    this.perPageSelect.value = this.perPageSelect.search = this.table.perPage.toString();
-    this.perPageSelect.displayLabel = false;
-    this.perPageSelect.onChange = (v) => {
-      this.table.page = 1;
-      this.table.perPage = parseInt(v.value, 10);
-      this.table.load();
-    };
-  }
-}