simpo-component-library 3.6.101 → 3.6.105

package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.component.mjs

@@ -303,7 +303,7 @@ export class AuthenticationRequiredComponent extends BaseSection {
         return this.styles?.background?.accentColor ? this.styles.background?.accentColor : '#000';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: i1.RestService }, { token: i2.Router }, { token: i3.MessageService }, { token: i4.StorageServiceService }, { token: i5.MatDialog }, { token: i2.ActivatedRoute }, { token: i5.MatDialogRef, optional: true }, { token: i6.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel\">\r\n        <div class=\"panel\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      ></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"Enter Email\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Password</label>\r\n      <input type=\"password\" [(ngModel)]=\"password\" required=\"\">\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n    <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"login()\">Login</button>\r\n    <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\" (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(ngModel)]=\"userName\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (keypress)=\"validateNumber($event)\">\r\n    </div>\r\n    <div class=\"input-box position-relative\">\r\n      <label for=\"\">Password</label>\r\n      <input type=\"password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n      <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div>\r\n    </div>\r\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" *ngIf=\"!buttonLoading\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"createAccount()\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" *ngIf=\"buttonLoading\"\r\n      >Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up\">Alraedy have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.main-panel{max-width:450px;margin:auto}.input-box{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.input-box label{color:#000!important;font-size:15px;font-weight:700;font-family:Mulish}.input-box input{height:40px;border:2px solid rgba(0,0,0,.05);border-radius:5px;outline:none;padding-left:10px;padding-right:10px;font-weight:500;font-family:Mulish}.button{margin-top:20px;height:40px;outline:none}.panel{background:#fff;padding:4rem}.forgot-pwd{font-family:Mulish;text-align:right;font-size:14px;font-weight:700;margin-top:10px}.sign-up{margin-top:20px;text-align:center;font-size:15px;font-family:Mulish;color:#000!important}.sign-up span{font-family:Mulish;cursor:pointer}.mt-20{margin-top:20px}.or-divider{display:flex;align-items:center;margin:24px 0;color:#666}.or-divider:before,.or-divider:after{content:\"\";flex:1;border-bottom:1px solid #eee}.or-text{padding:0 12px;font-size:14px;font-family:Mulish}.strength-bar-container{display:flex;justify-content:space-between;width:100%!important;margin:auto;position:relative;top:15px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i10.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i11.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel\">\r\n        <div class=\"panel\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      ></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"Enter Email\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Password</label>\r\n      <input type=\"password\" [(ngModel)]=\"password\" required=\"\">\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n    <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"login()\">Login</button>\r\n    <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\" (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(ngModel)]=\"userName\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (keypress)=\"validateNumber($event)\">\r\n    </div>\r\n    <div class=\"input-box position-relative\">\r\n      <label for=\"\">Password</label>\r\n      <input type=\"password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n      <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div>\r\n    </div>\r\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" *ngIf=\"!buttonLoading\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"createAccount()\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" *ngIf=\"buttonLoading\"\r\n      >Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up\">Alraedy have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.main-panel{max-width:450px;margin:auto}.input-box{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.input-box label{color:#000!important;font-size:15px;font-weight:700;font-family:Mulish}.input-box input{height:40px;border:2px solid rgba(0,0,0,.05);border-radius:5px;outline:none;padding-left:10px;padding-right:10px;font-weight:500;font-family:Mulish}.button{margin-top:20px;height:40px;outline:none}.panel{background:#fff;padding:4rem}.forgot-pwd{font-family:Mulish;text-align:right;font-size:14px;font-weight:700;margin-top:10px}.sign-up{margin-top:20px;text-align:center;font-size:15px;font-family:Mulish;color:#000!important}.sign-up span{font-family:Mulish;cursor:pointer}.mt-20{margin-top:20px}.or-divider{display:flex;align-items:center;margin:24px 0;color:#666}.or-divider:before,.or-divider:after{content:\"\";flex:1;border-bottom:1px solid #eee}.or-text{padding:0 12px;font-size:14px;font-family:Mulish}.strength-bar-container{display:flex;justify-content:space-between;width:100%!important;margin:auto;position:relative;top:15px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i10.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i11.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,