ps-toolkit-ui 0.0.211 → 0.0.212

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

@@ -1,389 +0,0 @@
-#Login {
-  position: relative;
-  width: 100%;
-  float: right;
-  border-radius: 5px;
-  display: table;
-  background-color: white;
-  height: 100vh;
-}
-
-#Login .form-c {
-  display: table-cell;
-  width: 50%;
-  vertical-align: middle;
-  position: relative;
-  z-index: 2;
-  box-shadow: 19px 0 35px -7px rgba(0,0,0,.05);
-}
-
-#Login .about-c {
-  display: table-cell;
-  width: 50%;
-  height: 100%;
-  vertical-align: middle;
-}
-
-#Login .form {
-  width: 70%;
-  margin: 0 auto;
-}
-
-#Login .about {
-  width: 100%;
-  position: relative;
-  float: right;
-  border-radius: 0 5px 5px 0;
-}
-
-#Login .about .info {
-  width: 100%;
-  position: relative;
-  float: right;
-  z-index: 2;
-  border-radius: 0 5px 5px 0;
-}
-
-#Login .triangles {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 1;
-  border-radius: 0 5px 5px 0;
-}
-
-#Login .triangles .triangle {
-  position: absolute;
-  color: var(--base);
-  opacity: 0.2;
-}
-
-#Login .triangles .triangle-1 {
-  font-size: 656px;
-  top: -10px;
-  right: -50px;
-}
-
-#Login .triangles .triangle-2 {
-  font-size: 1000px;
-  top: 80px;
-  right: -60px;
-}
-
-#Login .triangles .triangle-3 {
-  font-size: 900px;
-  top: -347px;
-  right: -46px;
-}
-
-#Login .about .logo {
-  height: 200px;
-  width: 200px;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  margin: 0 auto;
-  position: relative;
-}
-
-#Login .about .title {
-  width: 100%;
-  float: right;
-  text-align: center;
-  font-size: 25px;
-  height: 40px;
-  line-height: 40px;
-  font-family: VazirBold;
-  position: relative;
-  margin-top: 20px;
-  font-weight: bolder;
-}
-#Login .about .sub-title {
-  float: right;
-  text-align: center;
-  font-size: 12px;
-  line-height: 30px;
-  position: relative;
-  padding: 20px;
-  width: 80%;
-  margin-right: 10%;
-  font-family: VazirLight;
-}
-
-#Login .form .title {
-  width: 100%;
-  margin-top: 30px;
-  float: right;
-  text-align: center;
-  font-size: 25px;
-  height: 50px;
-  line-height: 50px;
-  font-family: VazirBold;
-  margin-bottom: 10px;
-}
-
-#Login .form .sub-title {
-  width: 100%;
-  float: right;
-  color: var(--black-88);
-  text-align: center;
-  font-size: 12px;
-  height: 30px;
-  line-height: 30px;
-  font-family: VazirLight;
-}
-
-#Login .form .title i {
-  font-size: 30px;
-  color: var(--base);
-  margin-left: 5px;
-  position: relative;
-  top: 7px;
-  left: 5px;
-}
-
-::ng-deep #Login .form .title{
-  width: 100%;
-  margin-top: 30px;
-  float: right;
-  text-align: center;
-  font-size: 25px;
-  height: 50px;
-  line-height: 50px;
-  font-family: VazirBold;
-  margin-bottom: 10px;
-}
-::ng-deep #Login .form .sub-title{
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-::ng-deep #Login .form .sub-title:after{
-  background-image: none !important;
-}
-@media (max-width: 399.98px) {
-  #Login {
-    padding: 20px 0;
-  }
-  #Login {
-    display: unset;
-    width: 90%;
-    margin-right: 5%;
-  }
-  #Login .form-c{
-    display: unset;
-    width: 100%;
-  }
-  #Login .about-c{
-    display: unset;
-    width: 100%;
-    float: right;
-    height: 80px;
-  }
-  #Login .about, #Login .triangles, #Login .about .info{
-    border-radius: 5px 5px 0 0;
-  }
-  #Login .form{
-    width: 90%;
-  }
-  #Login .about .info{
-    padding: 10px 5px 5px 5px;
-  }
-  #Login .about .logo{
-    display: inline-block;
-    float: right;
-    margin: unset;
-    margin-right: 10%;
-    width: 80px;
-    height: 80px;
-  }
-  #Login .about .title{
-    display: inline-block;
-    width: calc(80% - 80px);
-    line-height: 80px;
-    height: 80px;
-  }
-}
-
-@media (min-width: 400px) and (max-width: 499.98px) {
-  #Login {
-    padding: 50px 0;
-  }
-  #Login {
-    display: unset;
-    width: 80%;
-    margin-right: 10%;
-  }
-  #Login .form-c{
-    display: unset;
-    width: 100%;
-    float: right;
-  }
-  #Login .about-c{
-    display: unset;
-    width: 100%;
-    float: right;
-    height: 100px;
-  }
-  #Login .about, #Login .triangles, #Login .about .info{
-    border-radius: 5px 5px 0 0;
-  }
-  #Login .form{
-    width: 80%;
-    float: right;
-    margin-right: 10%;
-  }
-  #Login .about .info{
-    padding: 10px;
-  }
-  #Login .about .logo{
-    display: inline-block;
-    float: right;
-    margin: unset;
-    margin-right: 10%;
-    width: 100px;
-    height: 100px;
-  }
-  #Login .about .title{
-    display: inline-block;
-    width: calc(80% - 100px);
-    line-height: 100px;
-    height: 100px;
-  }
-}
-
-@media (min-width: 500px) and (max-width: 599.98px) {
-  #Login {
-    padding: 50px 0;
-  }
-  #Login {
-    display: unset;
-    width: 80%;
-    margin-right: 10%;
-  }
-  #Login .form-c{
-    display: unset;
-    width: 100%;
-    float: right;
-  }
-  #Login .about-c{
-    display: unset;
-    width: 100%;
-    float: right;
-    height: 100px;
-  }
-  #Login .about, #Login .triangles, #Login .about .info{
-    border-radius: 5px 5px 0 0;
-  }
-  #Login .form{
-    width: 70%;
-    float: right;
-    margin-right: 15%;
-  }
-  #Login .about .info{
-    padding: 10px;
-  }
-  #Login .about .logo{
-    display: inline-block;
-    float: right;
-    margin: unset;
-    margin-right: 10%;
-    width: 100px;
-    height: 100px;
-  }
-  #Login .about .title{
-    display: inline-block;
-    width: calc(80% - 100px);
-    line-height: 100px;
-    height: 100px;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 699.98px) {
-  #Login {
-    padding: 50px 0;
-  }
-  #Login {
-    display: unset;
-    width: 80%;
-    margin-right: 10%;
-  }
-  #Login .form-c{
-    display: unset;
-    width: 100%;
-    float: right;
-  }
-  #Login .about-c{
-    display: unset;
-    width: 100%;
-    float: right;
-    height: 100px;
-  }
-  #Login .about, #Login .triangles, #Login .about .info{
-    border-radius: 5px 5px 0 0;
-  }
-  #Login .form{
-    width: 70%;
-    float: right;
-    margin-right: 15%;
-  }
-  #Login .about .info{
-    padding: 10px;
-  }
-  #Login .about .logo{
-    display: inline-block;
-    float: right;
-    margin: unset;
-    margin-right: 10%;
-    width: 100px;
-    height: 100px;
-  }
-  #Login .about .title{
-    display: inline-block;
-    width: calc(80% - 100px);
-    line-height: 100px;
-    height: 100px;
-  }
-}
-
-@media (min-width: 700px) and (max-width: 799.98px) {
-  #Login {
-    padding: 50px 0;
-  }
-  #Login {
-    width: 90%;
-    margin-right: 5%;
-  }
-}
-
-@media (min-width: 800px) and (max-width: 899.98px) {
-  #Login {
-    width: 80%;
-    margin-right: 10%;
-  }
-}
-
-@media (min-width: 900px) and (max-width: 999.98px) {
-  #Login {
-    width: 80%;
-    margin-right: 10%;
-  }
-}
-
-@media (min-width: 1000px) and (max-width: 1099.98px) {
-  #Login {
-    width: 70%;
-    margin-right: 15%;
-  }
-}
-
-@media (min-width: 1100px) and (max-width: 1199.98px) {
-  #Login {
-    width: 70%;
-    margin-right: 15%;
-  }
-}
-
-@media (min-width: 1200px) {
-}

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

@@ -1,27 +0,0 @@
-<div id="Login">
-  <div class="triangles">
-    <i class="triangle triangle-1 fas fa-caret-left"></i>
-    <i class="triangle triangle-2 fas fa-caret-left"></i>
-    <i class="triangle triangle-3 fas fa-caret-left"></i>
-  </div>
-  <div class="about-c">
-    <div class="about">
-      <div class="info">
-        <div class="logo"></div>
-        <div class="title">
-          {{ l('Base') }}
-        </div>
-        <div class="sub-title">
-          {{ l('BaseDesc') }}
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="form-c">
-    <ng-container *ngFor="let step of login.steps; let i = index">
-      <div class="form" *ngIf="i === login.active">
-        <lib-form [form]=step.form></lib-form>
-      </div>
-    </ng-container>
-  </div>
-</div>

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

@@ -1,145 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {LangClass} from '../../classes/lang.class';
-import {LoginClass, LoginStepClass} from '../../classes/login.class';
-import {FormClass, InputClass, Progress} from '../../classes/form.class';
-import {InputError, InputType, Method} from '../../classes/enum.class';
-import {RequestClass} from '../../classes/request.class';
-import {HelperClass} from '../../classes/helper.class';
-import {PsToolkitUiConfigService} from '../../services/config.service';
-
-@Component({
-    selector: 'lib-login',
-    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css']
-})
-export class LoginComponent implements OnInit{
-  @Input()
-  login: LoginClass;
-  mobile: InputClass;
-  username: InputClass;
-  l: (k, v?) => string;
-  constructor(public config: PsToolkitUiConfigService){
-    const lang = new LangClass(config.currentLang, config.strings);
-    this.l = (key: string, v = null): string => {
-      return lang.get('Public', 'Login', key, v);
-    };
-  }
-  ngOnInit(): void {
-    if (this.login.type === 'Sms'){
-      const sendCodeForm = new FormClass(this.config.environment, this.l, 'SendCode', true, this.login.sendCodeUrl, 'p-h-50');
-      const sendCode = new InputClass(this.config.environment, this.l, 'SendCode', 'fa-duotone fa-paper-plane', InputType.Submit);
-      sendCodeForm.subName = 'SendCodeSubTitle';
-      this.mobile = new InputClass(this.config.environment, this.l, 'Mobile',
-        'fa-duotone fa-mobile-alt', InputType.Mobile, 'm-b-10 h-45', '', true, 4, 50);
-      sendCodeForm.onSuccess = () => {
-        loginForm.subName = this.l('LoginSmsSubTitle', this.mobile.data());
-        this.mobile.type = InputType.Hidden;
-        code.progress.start();
-        this.login.steps[1].show();
-        setTimeout(() => {
-          code.focus();
-        }, 100);
-      };
-      sendCodeForm.inputs = [
-        this.mobile,
-        sendCode
-      ];
-      sendCode.onClick = () => {
-        sendCodeForm.submit();
-      };
-      const loginForm = new FormClass(this.config.environment, this.l, 'LoginSms', true, this.login.loginUrl, 'p-h-50');
-      loginForm.subName = this.l('LoginSmsSubTitle', '');
-      loginForm.onSuccess = (result) => {
-        this.login.setCookie(result);
-        if (this.login.steps.length > 2 && result.CurrentUser === null){
-          this.login.steps[2].show(result.StepData);
-        } else {
-          this.login.onSuccess(result);
-        }
-      };
-      loginForm.onFailed = (msg) => {
-        code.clear();
-        this.mobile.error = InputError.NotExist;
-        this.mobile.type = InputType.Mobile;
-        setTimeout(() => {
-          this.mobile.focus();
-        }, 100);
-        this.login.steps[0].show();
-      };
-      const code = new InputClass(this.config.environment, this.l, 'Code',
-        'fa-duotone fa-unlock-alt', InputType.Number, 'm-b-10 h-45', null, true, 1111, 9999);
-      const labelResend = new InputClass(this.config.environment, this.l, 'ReSendCodeDes',
-        null, InputType.Label, 'comp resend-code');
-      code.progress = new Progress(120);
-      code.progress.onStart = () => {
-        labelResend.value = null;
-      };
-      code.progress.onEnd = () => {
-        labelResend.value = 'ReSendCodeDes';
-      };
-      labelResend.onClick = () => {
-        labelResend.name = '(' + this.l('LoadingComp', 'Send') + ')';
-        new RequestClass(this.config.environment).send(this.login.reSendCodeUrl, Method.Post, loginForm.data(), null, () => {
-          labelResend.name = 'ReSendCodeDes';
-          code.progress.start();
-        }, (error) => {
-          HelperClass.addNotification(this.l(error));
-          labelResend.name = 'ReSendCodeDes';
-        });
-      };
-      const login = new InputClass(this.config.environment, this.l, 'LoginSms', 'fa-duotone fa-sign-in-alt', InputType.Submit);
-      loginForm.inputs = [
-        this.mobile,
-        code,
-        labelResend,
-        login
-      ];
-      login.onClick = () => {
-        loginForm.submit();
-      };
-      const loginStep = new LoginStepClass(loginForm);
-      loginStep.show = () => {
-        this.login.active = 1;
-      };
-      const sendCodeStep = new LoginStepClass(sendCodeForm);
-      sendCodeStep.show = () => {
-        this.login.active = 0;
-      };
-      this.login.steps.unshift(loginStep);
-      this.login.steps.unshift(sendCodeStep);
-      setTimeout(() => {
-        this.mobile.focus();
-      }, 100);
-    } else if (this.login.type === 'Password'){
-      const loginForm = new FormClass(this.config.environment, this.l, 'LoginPassword', true, this.login.loginUrl, 'p-h-50');
-      loginForm.subName = 'LoginPasswordSubTitle';
-      const login = new InputClass(this.config.environment, this.l, 'LoginPassword', 'fa-duotone fa-sign-in-alt', InputType.Submit);
-      loginForm.onSuccess = (result) => {
-        this.login.setCookie(result);
-        if (this.login.steps.length > 1 && result.CurrentUser === null){
-          this.login.steps[1].show(result.StepData);
-        } else {
-          this.login.onSuccess(result);
-        }
-      };
-      this.username = new InputClass(this.config.environment, this.l, 'Username',
-        'fa-duotone fa-user', InputType.Text, 'm-b-10 h-45', '', true, 4, 50);
-      loginForm.inputs = [
-        this.username,
-        new InputClass(this.config.environment, this.l, 'Password', 'fa-duotone fa-key', InputType.Password, 'm-b-10 h-45', '', true, 5, 50),
-        login
-      ];
-      login.onClick = () => {
-        loginForm.submit();
-      };
-      const loginStep = new LoginStepClass(loginForm);
-      loginStep.show = () => {
-        this.login.active = 0;
-      };
-      this.login.steps.unshift(loginStep);
-      setTimeout(() => {
-        this.username.focus();
-      }, 100);
-    }
-  }
-}

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

@@ -1,60 +0,0 @@
-.modal{
-  display: none;
-  position: fixed;
-  overflow-y: auto;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--black-t-44);
-  z-index: 999;
-}
-.modal .content{
-  float: right;
-  width: 40%;
-  margin: 50px 30%;
-  background-color: white;
-  border-radius: 5px;
-  box-shadow: var(--box-shadow-modal);
-  z-index: 2;
-  position: relative;
-}
-.modal .content .header{
-  float: right;
-  width: 100%;
-  position: relative;
-  text-align: center;
-}
-.modal .content .header .title{
-  height: 40px;
-  width: 100%;
-  line-height: 40px;
-  float: left;
-  font-family: VazirBold;
-  font-size: 18px;
-}
-::ng-deep .modal .content > lib-form-button .form-input-con.button{
-  position: absolute;
-  left: -25px;
-  top: -10px;
-  z-index: 5;
-}
-.modal .content .body{
-  float: right;
-  width: 100%;
-  position: relative;
-}
-.modal .content .footer{
-  float: right;
-  width: 100%;
-  background-color: var(--base-22);
-  height: 50px;
-}
-.modal .content .footer:before{
-  content:"";
-  border: 0;
-  height: 1px;
-  width: 100%;
-  float: right;
-  background-image: linear-gradient(to right, rgba(51, 51, 51, 0), rgba(51, 51, 51, 0.25), rgba(51, 51, 51, 0));
-}

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

@@ -1,12 +0,0 @@
-<div [id]="modal.id + 'Modal'" class="modal">
-  <div [className]="(modal.class ? modal.class : '') + ' content'">
-    <lib-form-button [inp]="close"></lib-form-button>
-    <div class="body">
-      <ng-content></ng-content>
-      <lib-form *ngIf="modal.form != null && modal.firstForm" [form]="modal.form"></lib-form>
-      <lib-table *ngIf="modal.table != null" [table]="modal.table"></lib-table>
-      <lib-form *ngIf="modal.form != null && !modal.firstForm" [form]="modal.form"></lib-form>
-      <lib-accordion *ngIf="modal.accordion != null" [accordion]="modal.accordion"></lib-accordion>
-    </div>
-  </div>
-</div>

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

@@ -1,23 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {ModalClass} from '../../classes/modal.class';
-import {InputClass} from '../../classes/form.class';
-import {InputType} from '../../classes/enum.class';
-
-@Component({
-  selector: 'lib-modal',
-  templateUrl: './modal.component.html',
-  styleUrls: ['./modal.component.css']
-})
-export class ModalComponent implements OnInit{
-  @Input()
-  modal: ModalClass;
-  close: InputClass;
-  constructor(){
-  }
-  ngOnInit(): void {
-    this.close = new InputClass(this.modal.environment, this.modal.l, null, 'fa-duotone fa-times', InputType.Icon, 'w-u h-30 red');
-    this.close.onClick = () => {
-      this.modal.hide();
-    };
-  }
-}