ps-toolkit-ui 0.2.16 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6628,6 +6628,7 @@
6628
6628
  var LoginComponent = /** @class */ (function () {
6629
6629
  function LoginComponent(config) {
6630
6630
  this.config = config;
6631
+ this.loginTemplate = 'Main';
6631
6632
  var lang = new LangClass(config.currentLang, config.strings);
6632
6633
  this.l = function (key, v) {
6633
6634
  if (v === void 0) { v = null; }
@@ -6638,9 +6639,9 @@
6638
6639
  var _this = this;
6639
6640
  if (this.login.type === 'Sms') {
6640
6641
  var sendCodeForm_1 = new FormClass(this.config.environment, this.l, 'SendCode', true, this.login.sendCodeUrl);
6641
- var sendCode = new InputClass(this.config.environment, this.l, 'SendCode', 'fa-duotone fa-paper-plane', exports.InputType.Submit);
6642
+ var sendCode = new InputClass(this.config.environment, this.l, 'SendCode', 'fa-duotone fa-paper-plane', exports.InputType.Submit, 'h-45');
6642
6643
  sendCodeForm_1.subName = 'SendCodeSubTitle';
6643
- this.mobile = new InputClass(this.config.environment, this.l, 'Mobile', 'fa-duotone fa-mobile-alt', exports.InputType.Mobile, 'm-b-10 h-45', '', true, 4, 50);
6644
+ this.mobile = new InputClass(this.config.environment, this.l, 'Mobile', 'fa-duotone fa-mobile-alt', exports.InputType.Mobile, 'm-b-20 h-45', '', true, 4, 50);
6644
6645
  sendCodeForm_1.onSuccess = function () {
6645
6646
  loginForm_1.subName = _this.l('LoginSmsSubTitle', _this.mobile.data());
6646
6647
  _this.mobile.type = exports.InputType.Hidden;
@@ -6650,6 +6651,7 @@
6650
6651
  code_1.focus();
6651
6652
  }, 100);
6652
6653
  };
6654
+ this.mobile.displayLabel = this.loginTemplate === 'Main';
6653
6655
  sendCodeForm_1.inputs = [
6654
6656
  this.mobile,
6655
6657
  sendCode
@@ -6679,7 +6681,7 @@
6679
6681
  _this.login.steps[0].show();
6680
6682
  };
6681
6683
  var code_1 = new InputClass(this.config.environment, this.l, 'Code', 'fa-duotone fa-unlock-alt', exports.InputType.Number, 'm-b-10 h-45', null, true, 1111, 9999);
6682
- var labelResend_1 = new InputClass(this.config.environment, this.l, 'ReSendCodeDes', null, exports.InputType.Label, 'comp resend-code');
6684
+ var labelResend_1 = new InputClass(this.config.environment, this.l, 'ReSendCodeDes', null, exports.InputType.Label, 'comp resend-code h-45');
6683
6685
  code_1.progress = new Progress(120);
6684
6686
  code_1.progress.onStart = function () {
6685
6687
  labelResend_1.value = null;
@@ -6697,7 +6699,8 @@
6697
6699
  labelResend_1.name = 'ReSendCodeDes';
6698
6700
  });
6699
6701
  };
6700
- var login = new InputClass(this.config.environment, this.l, 'LoginSms', 'fa-duotone fa-sign-in-alt', exports.InputType.Submit);
6702
+ code_1.displayLabel = this.loginTemplate === 'Main';
6703
+ var login = new InputClass(this.config.environment, this.l, 'LoginSms', 'fa-duotone fa-sign-in-alt', exports.InputType.Submit, 'h-45');
6701
6704
  loginForm_1.inputs = [
6702
6705
  this.mobile,
6703
6706
  code_1,
@@ -6724,7 +6727,7 @@
6724
6727
  else if (this.login.type === 'Password') {
6725
6728
  var loginForm_2 = new FormClass(this.config.environment, this.l, 'LoginPassword', true, this.login.loginUrl);
6726
6729
  loginForm_2.subName = 'LoginPasswordSubTitle';
6727
- var login = new InputClass(this.config.environment, this.l, 'LoginPassword', 'fa-duotone fa-sign-in-alt', exports.InputType.Submit);
6730
+ var login = new InputClass(this.config.environment, this.l, 'LoginPassword', 'fa-duotone fa-sign-in-alt', exports.InputType.Submit, 'h-45');
6728
6731
  loginForm_2.onSuccess = function (result) {
6729
6732
  _this.login.setCookie(result);
6730
6733
  if (_this.login.steps.length > 1 && result.CurrentUser === null) {
@@ -6736,9 +6739,12 @@
6736
6739
  }
6737
6740
  };
6738
6741
  this.username = new InputClass(this.config.environment, this.l, 'Username', 'fa-duotone fa-user', exports.InputType.Text, 'm-b-10 h-45', '', true, 4, 50);
6742
+ var password = new InputClass(this.config.environment, this.l, 'Password', 'fa-duotone fa-key', exports.InputType.Password, 'm-b-20 h-45', '', true, 5, 50);
6743
+ this.username.displayLabel = this.loginTemplate === 'Main';
6744
+ password.displayLabel = this.loginTemplate === 'Main';
6739
6745
  loginForm_2.inputs = [
6740
6746
  this.username,
6741
- new InputClass(this.config.environment, this.l, 'Password', 'fa-duotone fa-key', exports.InputType.Password, 'm-b-10 h-45', '', true, 5, 50),
6747
+ password,
6742
6748
  login
6743
6749
  ];
6744
6750
  login.onClick = function () {
@@ -6759,15 +6765,16 @@
6759
6765
  LoginComponent.decorators = [
6760
6766
  { type: core.Component, args: [{
6761
6767
  selector: 'lib-login',
6762
- template: "<div id=\"Login\">\r\n <div class=\"triangles\">\r\n <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n </div>\r\n <div class=\"form-c\">\r\n <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n <div class=\"form\" *ngIf=\"i === login.active\">\r\n <lib-form [form]=step.form></lib-form>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-c\">\r\n <div class=\"about\">\r\n <div class=\"info\">\r\n <div class=\"logo\"></div>\r\n <div class=\"title\">\r\n {{ l('Base') }}\r\n </div>\r\n <div class=\"sub-title\">\r\n {{ l('BaseDesc') }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
6763
- styles: ["#Login{background-color:#fff;border-radius:5px;float:right;height:calc(100vh - 35px);overflow-y:auto;position:relative;width:100%}#Login .about-c,#Login .form-c{align-items:center;display:flex;float:left;justify-content:center;min-height:calc(100vh - 35px);position:relative;width:50%;z-index:2}#Login .form-c{box-shadow:19px 0 35px -7px rgba(0,0,0,.05)}#Login .form-c .form{margin:0 auto;width:60%}#Login .about,#Login .about .info{border-radius:0 5px 5px 0;float:right;position:relative;width:100%}#Login .about .info{z-index:2}#Login .triangles{border-radius:0 5px 5px 0;height:100%;overflow:hidden;position:absolute;width:100%;z-index:1}#Login .triangles .triangle{color:var(--base);opacity:.1;position:absolute}#Login .triangles .triangle-1{font-size:656px;right:-150px;top:50px}#Login .triangles .triangle-2{font-size:1000px;right:-240px;top:150px}#Login .triangles .triangle-3{font-size:900px;right:-220px;top:-347px}#Login .triangles .triangle-4{font-size:900px;right:-250px;top:450px}#Login .about .logo{background-position:50%;background-repeat:no-repeat;background-size:cover;height:200px;margin:0 auto;position:relative;width:200px}#Login .about .title{font-family:VazirBold;font-size:25px;font-weight:bolder;height:40px;line-height:40px;margin-top:20px;width:100%}#Login .about .sub-title,#Login .about .title{float:right;position:relative;text-align:center}#Login .about .sub-title{font-family:VazirLight;font-size:12px;line-height:30px;margin-right:10%;padding:20px;width:80%}::ng-deep #Login .form-c .form .title{float:right;font-family:VazirBold;font-size:25px;height:50px;line-height:50px;margin-bottom:10px;text-align:center;width:100%}::ng-deep #Login .form-c .form .sub-title{color:var(--black-88);float:right;font-family:VazirLight;font-size:12px;height:30px;line-height:30px;width:100%}::ng-deep #Login .form-c .form .title i{color:var(--base);font-size:30px;left:5px;margin-left:5px;position:relative;top:7px}::ng-deep #Login .form-c .form .sub-title{margin-bottom:20px;text-align:center}::ng-deep #Login .form-c .form .sub-title:after{background-image:none!important}@media (max-width:399.98px){#Login{height:calc(100vh - 60px)}#Login .about-c,#Login .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#Login .form-c .form{width:100%}#Login .about .info{padding:10px 5px 5px}#Login .about .logo{height:100px;width:100px}}@media (min-width:400px) and (max-width:499.98px){#Login{height:calc(100vh - 60px)}#Login .about-c,#Login .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#Login .form-c .form{width:80%}#Login .about .info{padding:10px}#Login .about .logo{height:100px;width:100px}}@media (min-width:500px) and (max-width:599.98px){#Login{height:calc(100vh - 60px)}#Login .about-c,#Login .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#Login .form-c .form{float:right;margin-right:15%;width:70%}#Login .about .info{padding:10px}#Login .about .logo{height:150px;width:150px}}@media (min-width:600px) and (max-width:699.98px){#Login .about-c,#Login .form-c{float:right;width:100%}#Login .form-c .form{float:right;margin-right:15%;width:70%}#Login .about .info{padding:10px}#Login .about .logo{height:150px;width:150px}}@media (min-width:700px) and (max-width:799.98px){#Login .form-c .form{width:90%}}@media (min-width:800px) and (max-width:899.98px){#Login .form-c .form{width:90%}}@media (min-width:900px) and (max-width:999.98px){#Login .form-c .form{width:80%}}@media (min-width:1000px) and (max-width:1099.98px){#Login .form-c .form{width:80%}}@media (min-width:1100px) and (max-width:1199.98px){#Login .form-c .form{width:70%}}@media (min-width:1200px) and (max-width:1299.98px){#Login .form-c .form{width:70%}}"]
6768
+ template: "<div id=\"LoginMain\" *ngIf=\"loginTemplate == 'Main'\">\r\n <div class=\"triangles\">\r\n <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n </div>\r\n <div class=\"form-c\">\r\n <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n <div class=\"form\" *ngIf=\"i === login.active\">\r\n <lib-form [form]=step.form></lib-form>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-c\">\r\n <div class=\"about\">\r\n <div class=\"info\">\r\n <div class=\"logo\"></div>\r\n <div class=\"title\">\r\n {{ l('Base') }}\r\n </div>\r\n <div class=\"sub-title\">\r\n {{ l('BaseDesc') }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<div id=\"LoginSimple\" *ngIf=\"loginTemplate == 'Simple'\">\r\n <div class=\"form-c\">\r\n <div class=\"title\">{{ l('Base') }}</div>\r\n <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n <div class=\"form\" *ngIf=\"i === login.active\">\r\n <lib-form [form]=step.form></lib-form>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n",
6769
+ styles: ["#LoginMain{background-color:#fff;border-radius:5px;float:right;height:calc(100vh - 35px);overflow-y:auto;position:relative;width:100%}#LoginMain .about-c,#LoginMain .form-c{align-items:center;display:flex;float:left;justify-content:center;min-height:calc(100vh - 35px);position:relative;width:50%;z-index:2}#LoginMain .form-c{box-shadow:19px 0 35px -7px rgba(0,0,0,.05)}#LoginMain .form-c .form{margin:0 auto;width:60%}#LoginMain .about,#LoginMain .about .info{border-radius:0 5px 5px 0;float:right;position:relative;width:100%}#LoginMain .about .info{z-index:2}#LoginMain .triangles{border-radius:0 5px 5px 0;height:100%;overflow:hidden;position:absolute;width:100%;z-index:1}#LoginMain .triangles .triangle{color:var(--base);opacity:.1;position:absolute}#LoginMain .triangles .triangle-1{font-size:656px;right:-150px;top:50px}#LoginMain .triangles .triangle-2{font-size:1000px;right:-240px;top:150px}#LoginMain .triangles .triangle-3{font-size:900px;right:-220px;top:-347px}#LoginMain .triangles .triangle-4{font-size:900px;right:-250px;top:450px}#LoginMain .about .logo{background-position:50%;background-repeat:no-repeat;background-size:cover;height:200px;margin:0 auto;position:relative;width:200px}#LoginMain .about .title{float:right;font-family:VazirBold;font-size:25px;font-weight:bolder;height:40px;line-height:40px;margin-top:20px;position:relative;text-align:center;width:100%}#LoginMain .about .sub-title{float:right;font-family:VazirLight;font-size:12px;line-height:30px;margin-right:10%;padding:20px;position:relative;text-align:center;width:80%}::ng-deep #LoginMain .form-c .form .title{float:right;font-family:VazirBold;font-size:25px;height:50px;line-height:50px;margin-bottom:10px;text-align:center;width:100%}::ng-deep #LoginMain .form-c .form .sub-title{color:var(--black-88);float:right;font-family:VazirLight;font-size:12px;height:30px;line-height:30px;width:100%}::ng-deep #LoginMain .form-c .form .title i{color:var(--base);font-size:30px;left:5px;margin-left:5px;position:relative;top:7px}::ng-deep #LoginMain .form-c .form .sub-title{margin-bottom:20px;text-align:center}::ng-deep #LoginMain .form-c .form .sub-title:after{background-image:none!important}#LoginSimple{align-items:center;display:flex;justify-content:center;min-height:100vh;width:100%}#LoginSimple,#LoginSimple .form-c{background-color:#fff;float:right;padding:20px}#LoginSimple .form-c{border:var(--border-base);border-radius:var(--border-radius-base);width:400px}#LoginSimple .form-c .title{color:var(--base);float:right;font-family:VazirBold;font-size:18px;line-height:60px;text-align:center;width:100%}@media (max-width:399.98px){#LoginMain{height:calc(100vh - 60px)}#LoginMain .about-c,#LoginMain .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#LoginMain .form-c .form{width:100%}#LoginMain .about .info{padding:10px 5px 5px}#LoginMain .about .logo{height:100px;width:100px}}@media (min-width:400px) and (max-width:499.98px){#LoginMain{height:calc(100vh - 60px)}#LoginMain .about-c,#LoginMain .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#LoginMain .form-c .form{width:80%}#LoginMain .about .info{padding:10px}#LoginMain .about .logo{height:100px;width:100px}}@media (min-width:500px) and (max-width:599.98px){#LoginMain{height:calc(100vh - 60px)}#LoginMain .about-c,#LoginMain .form-c{float:right;min-height:calc(100vh - 60px);width:100%}#LoginMain .form-c .form{float:right;margin-right:15%;width:70%}#LoginMain .about .info{padding:10px}#LoginMain .about .logo{height:150px;width:150px}}@media (min-width:600px) and (max-width:699.98px){#LoginMain .about-c,#LoginMain .form-c{float:right;width:100%}#LoginMain .form-c .form{float:right;margin-right:15%;width:70%}#LoginMain .about .info{padding:10px}#LoginMain .about .logo{height:150px;width:150px}}@media (min-width:700px) and (max-width:799.98px){#LoginMain .form-c .form{width:90%}}@media (min-width:800px) and (max-width:899.98px){#LoginMain .form-c .form{width:90%}}@media (min-width:900px) and (max-width:999.98px){#LoginMain .form-c .form{width:80%}}@media (min-width:1000px) and (max-width:1099.98px){#LoginMain .form-c .form{width:80%}}@media (min-width:1100px) and (max-width:1199.98px){#LoginMain .form-c .form{width:70%}}@media (min-width:1200px) and (max-width:1299.98px){#LoginMain .form-c .form{width:70%}}"]
6764
6770
  },] }
6765
6771
  ];
6766
6772
  LoginComponent.ctorParameters = function () { return [
6767
6773
  { type: PsToolkitUiConfigService }
6768
6774
  ]; };
6769
6775
  LoginComponent.propDecorators = {
6770
- login: [{ type: core.Input }]
6776
+ login: [{ type: core.Input }],
6777
+ loginTemplate: [{ type: core.Input }]
6771
6778
  };
6772
6779
 
6773
6780
  var LoadingComponent = /** @class */ (function () {