ps-toolkit-ui 0.0.210 → 0.0.211

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

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

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

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

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

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

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

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

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

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