@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
321 lines (316 loc) • 90.7 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, signal, model, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, untracked, inject, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { trigger, transition, style, animate } from '@angular/animations';
import { PghBreakpoints, PghMediaModule } from '@tapsellorg/angular-material-library/media';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import { takeUntil, filter } from 'rxjs';
import * as i2 from '@angular/cdk/layout';
import * as i5 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i8 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i6 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i1$1 from '@angular/forms';
import { Validators, FormBuilder, ReactiveFormsModule } from '@angular/forms';
import * as i3$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i6$1 from '@tapsellorg/angular-material-library/src/lib/input';
import { PghFormValidators, PghInputModule } from '@tapsellorg/angular-material-library/src/lib/input';
import * as i7 from '@tapsellorg/angular-material-library/src/lib/loader';
import { PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';
import * as i9 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { PghPageHeadModule } from '@tapsellorg/angular-material-library/src/lib/page-head';
import { MatRadioModule } from '@angular/material/radio';
import * as i6$2 from '@tapsellorg/angular-material-library/src/lib/countdown-timer';
import { PghCountdownTimerService, PghCountdownTimerModule } from '@tapsellorg/angular-material-library/src/lib/countdown-timer';
import { PghPinInputComponent } from '@tapsellorg/angular-material-library/src/lib/pin-input';
import * as i2$1 from '@angular/cdk/bidi';
const PGH_AUTH_LAYOUT_INFO = {
login: {
sideTitle: '',
redirectTitle: 'ثبتنام',
redirectPath: 'register',
},
register: {
sideTitle: '',
redirectTitle: 'ورود به حساب کاربری',
redirectPath: 'login',
},
'forget-password': {
sideTitle: '',
redirectTitle: '',
redirectPath: '',
},
'reset-password': {
sideTitle: '',
redirectTitle: '',
redirectPath: '',
},
'email-verify': {
sideTitle: '',
redirectTitle: '',
redirectPath: '',
},
'otp-login': {
sideTitle: 'ورود',
redirectTitle: 'ثبت نام',
redirectPath: 'otp-login',
},
'otp-verification-code': {
sideTitle: 'تایید کد',
redirectTitle: 'ورود',
redirectPath: 'otp-login',
},
};
class PghAuthLayoutComponent extends withDestroy() {
constructor(router, breakpointObserver, cdr) {
super();
this.router = router;
this.breakpointObserver = breakpointObserver;
this.cdr = cdr;
this.hasBackButton = input(true);
this.hasBackToLogin = input(false);
this.hasSupportButton = input(true);
this.supportButtonClick = output();
this.isUserPanel = input(true);
this.loginButtonText = input('ورود');
this.supportPhoneNumber = input('02191090986');
this.routeName = signal('login');
this.isMobile = signal(false);
this.layoutInfo = signal(undefined);
this.logos = input([
{
src: 'https://cdn.tapture.ir/tapsell/web/front/web-logo/tapsell-new/logos/white-transparent/Full+Logo+1000px.svg',
alt: 'Tapsell Logo',
width: 100,
},
{
src: 'https://cdn.tapture.ir/tapsell/web/front/web-logo/mediaad/white-logo.png',
alt: 'media Logo',
width: 100,
},
]);
this.isOpened = model(false);
this.layoutInfo.set(PGH_AUTH_LAYOUT_INFO);
}
ngOnInit() {
this.onObserveBreakpoints();
this.getRouteName();
}
onSupportClick() {
this.supportButtonClick.emit();
}
goToLogin() {
this.router.navigateByUrl('/login');
}
goBack() {
this.isOpened.set(false);
}
goToRegister() {
this.router.navigateByUrl('/register');
}
onObserveBreakpoints() {
this.breakpointObserver
.observe(PghBreakpoints.md)
.pipe(takeUntil(this._destroyed$))
.subscribe(result => {
this.isMobile.set(!result.matches);
this.cdr.detectChanges();
});
}
getRouteName() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event) => {
this.routeName.set(event.url.split('/')[1].split('?')[0]);
this.cdr.detectChanges();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghAuthLayoutComponent, deps: [{ token: i1.Router }, { token: i2.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghAuthLayoutComponent, isStandalone: false, selector: "pgh-auth-layout", inputs: { hasBackButton: { classPropertyName: "hasBackButton", publicName: "hasBackButton", isSignal: true, isRequired: false, transformFunction: null }, hasBackToLogin: { classPropertyName: "hasBackToLogin", publicName: "hasBackToLogin", isSignal: true, isRequired: false, transformFunction: null }, hasSupportButton: { classPropertyName: "hasSupportButton", publicName: "hasSupportButton", isSignal: true, isRequired: false, transformFunction: null }, isUserPanel: { classPropertyName: "isUserPanel", publicName: "isUserPanel", isSignal: true, isRequired: false, transformFunction: null }, loginButtonText: { classPropertyName: "loginButtonText", publicName: "loginButtonText", isSignal: true, isRequired: false, transformFunction: null }, supportPhoneNumber: { classPropertyName: "supportPhoneNumber", publicName: "supportPhoneNumber", isSignal: true, isRequired: false, transformFunction: null }, logos: { classPropertyName: "logos", publicName: "logos", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { supportButtonClick: "supportButtonClick", isOpened: "isOpenedChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"pgh-auth-layout container\" [class.mobile]=\"isMobile()\" dark=\"false\">\n @if (isOpened()) {\n <div\n class=\"pgh-form-container flex-column\"\n [class.mobile]=\"isMobile()\"\n [@formContainerAnimation]\n [@.disabled]=\"isMobile()\"\n >\n @if (!isMobile()) { @if(!hasBackToLogin()){\n <div class=\"d-flex align-self-start cursor-pointer\" (click)=\"goBack()\">\n <mat-icon svgIcon=\"arrow_forward_ios\" style=\"width: 20px\" class=\"align-self-end\"></mat-icon>\n <span>\u0628\u0627\u0632\u06AF\u0634\u062A</span>\n </div>\n }@else{\n <ng-container [ngTemplateOutlet]=\"backToLogin\"></ng-container>\n } }\n <ng-template #backToLogin>\n <a mat-stroked-button color=\"primary\" [routerLink]=\"['/login']\" class=\"mb-4 align-self-start\">\n <mat-icon class=\"arrow-right-icon\" svgIcon=\"keyboard_arrow_right\"></mat-icon>\n <span>\u0628\u0627\u0632\u06AF\u0634\u062A</span>\n </a>\n </ng-template>\n <div class=\"content-block w-100 flex-column d-flex justify-content-center\">\n <div class=\"w-100 d-flex flex-row-reverse\">\n @if (isMobile() && hasBackButton()) {\n <mat-icon svgIcon=\"arrow_back_ios\" class=\"cursor-pointer\" (click)=\"goBack()\"></mat-icon>\n }\n </div>\n <ng-content></ng-content>\n <div class=\"pgh-form-subtitle mt-3\" [class.mobile]=\"isMobile()\">\n @if (hasSupportButton() && !isMobile()) {\n <div class=\"d-flex align-items-center\">\n <mat-icon svgIcon=\"support_agent\"></mat-icon>\n <button mat-button color=\"primary\" (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n </div>\n } @if (isUserPanel()) {\n <a [routerLink]=\"['/' + layoutInfo()![routeName()].redirectPath]\">\n {{ layoutInfo()![routeName()].redirectTitle }}\n </a>\n }\n </div>\n </div>\n </div>\n }\n <div\n class=\"pgh-side-part p-4\"\n [class.close]=\"!isOpened()\"\n [class.mobile-open]=\"isOpened() && isMobile()\"\n [class.mobile]=\"isMobile()\"\n >\n @if (isOpened()) {\n <div class=\"d-flex flex-column justify-content-center align-items-center w-100\">\n <span class=\"font-size-24 mt-5\">{{ layoutInfo()![routeName()].sideTitle }}</span>\n </div>\n }\n <div class=\"pgh-auth-logos\">\n @for (logo of logos(); track logo; let i = $index) {\n <img [src]=\"logo.src\" [alt]=\"logo.alt\" [width]=\"logo.width\" />\n @if (i !== logos().length - 1) {\n <mat-divider [vertical]=\"true\" class=\"logos-divider mx-2\"></mat-divider>\n } }\n </div>\n @if (!isOpened()) {\n <div class=\"w-100 flex-grow-1\">\n <button\n mat-button\n mat-raised-button\n class=\"big-mat-button col-12 mb-3\"\n (click)=\"goToLogin(); isOpened.set(true)\"\n >\n <span class=\"text-primary\">{{ loginButtonText() }}</span>\n </button>\n @if (isUserPanel()) {\n <button\n mat-button\n mat-stroked-button\n class=\"big-mat-button col-12\"\n (click)=\"goToRegister(); isOpened.set(true)\"\n >\n <span>\u062B\u0628\u062A\u200C\u0646\u0627\u0645</span>\n </button>\n } @if (hasSupportButton()) {\n <div class=\"d-flex align-items-center ms-auto me-auto justify-content-center mt-2\">\n <mat-icon svgIcon=\"support_agent\"></mat-icon>\n <button mat-button (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n </div>\n }\n </div>\n } @if (isUserPanel()) {\n <a class=\"text-white d-flex align-items-center\" href=\"tel:{{ supportPhoneNumber() }}\">\n {{\n supportPhoneNumber()?.slice(0, 3) +\n '-' +\n supportPhoneNumber()?.slice(4, supportPhoneNumber()?.length)\n }}\n <mat-icon svgIcon=\"call\" class=\"ms-2\"></mat-icon>\n </a>\n }\n </div>\n</div>\n", styles: [".pgh-auth-layout{--mdc-outlined-button-label-text-color: #fff;--mdc-text-button-label-text-color: #fff;--mdc-protected-button-container-color: #fff;min-height:80vh;display:flex;justify-content:center;background-color:transparent;margin-inline:auto auto;width:100%;position:relative;--gutter-x: 0}.pgh-auth-layout.mobile{overflow-x:hidden;min-height:100%;margin-top:0;background-color:var(--fff)}.pgh-form-container{padding-top:2rem;padding-bottom:2rem;padding-inline:3.5rem 3.5rem;border-radius:0 1rem 1rem 0;width:60%}.pgh-form-container .content-block{flex:1}.pgh-form-container.mobile{width:100%;padding:1rem;border-radius:0}.pgh-form-container .pgh-form-subtitle{display:flex;justify-content:space-between;align-items:center}.pgh-form-container .pgh-form-subtitle.mobile{flex-direction:column}.pgh-form-container:not(.mobile){display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow);background-color:var(--fff)}.pgh-side-part{max-width:400px;width:40%;background-color:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:1rem 0 0 1rem;color:var(--fff);box-shadow:var(--shadow)}.pgh-side-part.close{border-radius:1rem;width:100%;justify-content:space-evenly}.pgh-side-part .mat-mdc-outlined-button{background-color:transparent!important;border-color:var(--fff)}.pgh-side-part.mobile-open{display:none}.pgh-side-part.mobile{border-radius:0}.logos-divider{height:50px;border-inline-start-color:var(--fff)}.pgh-auth-logos{width:100%;display:flex;justify-content:center;align-items:center;flex:1}[dark=true] .pgh-auth-logos img{filter:brightness(0)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
trigger('formContainerAnimation', [
transition(':enter', [
style({ opacity: 0, width: 0 }),
animate('.5s ease-out', style({ opacity: 1, width: '60%' })),
]),
transition(':leave', [animate('.5s ease-in', style({ width: 0, padding: 0, opacity: 0 }))]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghAuthLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-auth-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('formContainerAnimation', [
transition(':enter', [
style({ opacity: 0, width: 0 }),
animate('.5s ease-out', style({ opacity: 1, width: '60%' })),
]),
transition(':leave', [animate('.5s ease-in', style({ width: 0, padding: 0, opacity: 0 }))]),
]),
], standalone: false, template: "<div class=\"pgh-auth-layout container\" [class.mobile]=\"isMobile()\" dark=\"false\">\n @if (isOpened()) {\n <div\n class=\"pgh-form-container flex-column\"\n [class.mobile]=\"isMobile()\"\n [@formContainerAnimation]\n [@.disabled]=\"isMobile()\"\n >\n @if (!isMobile()) { @if(!hasBackToLogin()){\n <div class=\"d-flex align-self-start cursor-pointer\" (click)=\"goBack()\">\n <mat-icon svgIcon=\"arrow_forward_ios\" style=\"width: 20px\" class=\"align-self-end\"></mat-icon>\n <span>\u0628\u0627\u0632\u06AF\u0634\u062A</span>\n </div>\n }@else{\n <ng-container [ngTemplateOutlet]=\"backToLogin\"></ng-container>\n } }\n <ng-template #backToLogin>\n <a mat-stroked-button color=\"primary\" [routerLink]=\"['/login']\" class=\"mb-4 align-self-start\">\n <mat-icon class=\"arrow-right-icon\" svgIcon=\"keyboard_arrow_right\"></mat-icon>\n <span>\u0628\u0627\u0632\u06AF\u0634\u062A</span>\n </a>\n </ng-template>\n <div class=\"content-block w-100 flex-column d-flex justify-content-center\">\n <div class=\"w-100 d-flex flex-row-reverse\">\n @if (isMobile() && hasBackButton()) {\n <mat-icon svgIcon=\"arrow_back_ios\" class=\"cursor-pointer\" (click)=\"goBack()\"></mat-icon>\n }\n </div>\n <ng-content></ng-content>\n <div class=\"pgh-form-subtitle mt-3\" [class.mobile]=\"isMobile()\">\n @if (hasSupportButton() && !isMobile()) {\n <div class=\"d-flex align-items-center\">\n <mat-icon svgIcon=\"support_agent\"></mat-icon>\n <button mat-button color=\"primary\" (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n </div>\n } @if (isUserPanel()) {\n <a [routerLink]=\"['/' + layoutInfo()![routeName()].redirectPath]\">\n {{ layoutInfo()![routeName()].redirectTitle }}\n </a>\n }\n </div>\n </div>\n </div>\n }\n <div\n class=\"pgh-side-part p-4\"\n [class.close]=\"!isOpened()\"\n [class.mobile-open]=\"isOpened() && isMobile()\"\n [class.mobile]=\"isMobile()\"\n >\n @if (isOpened()) {\n <div class=\"d-flex flex-column justify-content-center align-items-center w-100\">\n <span class=\"font-size-24 mt-5\">{{ layoutInfo()![routeName()].sideTitle }}</span>\n </div>\n }\n <div class=\"pgh-auth-logos\">\n @for (logo of logos(); track logo; let i = $index) {\n <img [src]=\"logo.src\" [alt]=\"logo.alt\" [width]=\"logo.width\" />\n @if (i !== logos().length - 1) {\n <mat-divider [vertical]=\"true\" class=\"logos-divider mx-2\"></mat-divider>\n } }\n </div>\n @if (!isOpened()) {\n <div class=\"w-100 flex-grow-1\">\n <button\n mat-button\n mat-raised-button\n class=\"big-mat-button col-12 mb-3\"\n (click)=\"goToLogin(); isOpened.set(true)\"\n >\n <span class=\"text-primary\">{{ loginButtonText() }}</span>\n </button>\n @if (isUserPanel()) {\n <button\n mat-button\n mat-stroked-button\n class=\"big-mat-button col-12\"\n (click)=\"goToRegister(); isOpened.set(true)\"\n >\n <span>\u062B\u0628\u062A\u200C\u0646\u0627\u0645</span>\n </button>\n } @if (hasSupportButton()) {\n <div class=\"d-flex align-items-center ms-auto me-auto justify-content-center mt-2\">\n <mat-icon svgIcon=\"support_agent\"></mat-icon>\n <button mat-button (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n </div>\n }\n </div>\n } @if (isUserPanel()) {\n <a class=\"text-white d-flex align-items-center\" href=\"tel:{{ supportPhoneNumber() }}\">\n {{\n supportPhoneNumber()?.slice(0, 3) +\n '-' +\n supportPhoneNumber()?.slice(4, supportPhoneNumber()?.length)\n }}\n <mat-icon svgIcon=\"call\" class=\"ms-2\"></mat-icon>\n </a>\n }\n </div>\n</div>\n", styles: [".pgh-auth-layout{--mdc-outlined-button-label-text-color: #fff;--mdc-text-button-label-text-color: #fff;--mdc-protected-button-container-color: #fff;min-height:80vh;display:flex;justify-content:center;background-color:transparent;margin-inline:auto auto;width:100%;position:relative;--gutter-x: 0}.pgh-auth-layout.mobile{overflow-x:hidden;min-height:100%;margin-top:0;background-color:var(--fff)}.pgh-form-container{padding-top:2rem;padding-bottom:2rem;padding-inline:3.5rem 3.5rem;border-radius:0 1rem 1rem 0;width:60%}.pgh-form-container .content-block{flex:1}.pgh-form-container.mobile{width:100%;padding:1rem;border-radius:0}.pgh-form-container .pgh-form-subtitle{display:flex;justify-content:space-between;align-items:center}.pgh-form-container .pgh-form-subtitle.mobile{flex-direction:column}.pgh-form-container:not(.mobile){display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow);background-color:var(--fff)}.pgh-side-part{max-width:400px;width:40%;background-color:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:1rem 0 0 1rem;color:var(--fff);box-shadow:var(--shadow)}.pgh-side-part.close{border-radius:1rem;width:100%;justify-content:space-evenly}.pgh-side-part .mat-mdc-outlined-button{background-color:transparent!important;border-color:var(--fff)}.pgh-side-part.mobile-open{display:none}.pgh-side-part.mobile{border-radius:0}.logos-divider{height:50px;border-inline-start-color:var(--fff)}.pgh-auth-logos{width:100%;display:flex;justify-content:center;align-items:center;flex:1}[dark=true] .pgh-auth-logos img{filter:brightness(0)}\n"] }]
}], ctorParameters: () => [{ type: i1.Router }, { type: i2.BreakpointObserver }, { type: i0.ChangeDetectorRef }] });
class PghLoginComponent {
constructor(formBuilder) {
this.formBuilder = formBuilder;
this.pageTitle = input('ورود');
this.description = input('ورود به پنل مدیااد و تپسل با یک حساب');
this.includeForgetPasswordLink = input(false);
this.includeRegisterLink = input(false);
this.type = input('EMAIL');
this.formSubmit = output();
this.submitLoader = input();
this.buttonText = input('ورود');
this.form = this.formBuilder.group({
email: [''],
password: ['', { validators: [Validators.required] }],
});
this.isPasswordRevealed = signal(false);
this.forgetPasswordLinkQueryParams = signal(undefined);
}
ngOnChanges() {
this.form
.get('email')
?.setValidators(this.type() === 'EMAIL' ? [Validators.required, Validators.email] : [Validators.required]);
}
ngOnInit() {
this.bindEmailValueChanges();
}
onSubmit() {
if (this.form.invalid)
return;
this.formSubmit.emit(this.form.value);
}
bindEmailValueChanges() {
this.form.get('email')?.valueChanges.subscribe(value => {
if (value) {
this.forgetPasswordLinkQueryParams.set({
email: value,
});
}
else {
this.forgetPasswordLinkQueryParams.set(undefined);
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghLoginComponent, deps: [{ token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghLoginComponent, isStandalone: false, selector: "pgh-login", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, includeForgetPasswordLink: { classPropertyName: "includeForgetPasswordLink", publicName: "includeForgetPasswordLink", isSignal: true, isRequired: false, transformFunction: null }, includeRegisterLink: { classPropertyName: "includeRegisterLink", publicName: "includeRegisterLink", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, submitLoader: { classPropertyName: "submitLoader", publicName: "submitLoader", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pgh-login\">\n <header>\n <h1 class=\"font-weight-bold text-center font-size-18\">{{ pageTitle() }}</h1>\n </header>\n <p class=\"text-center\">{{ description() }}</p>\n <form [formGroup]=\"form\" (submit)=\"onSubmit()\" class=\"mt-2\">\n @if (type() === 'USERNAME') {\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n type=\"text\"\n formControlName=\"email\"\n autocomplete=\"username\"\n name=\"username\"\n class=\"text-left ltr\"\n autocapitalize=\"none\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n } @if (type() === 'EMAIL') {\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n type=\"email\"\n formControlName=\"email\"\n autocomplete=\"email\"\n name=\"email\"\n class=\"text-left ltr\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n }\n\n <mat-form-field class=\"w-100\">\n <mat-label>\u0631\u0645\u0632 \u0639\u0628\u0648\u0631</mat-label>\n <input\n matInput\n type=\"password\"\n formControlName=\"password\"\n autocomplete=\"current-password\"\n [pghShowPassword]=\"isPasswordRevealed()\"\n name=\"password\"\n class=\"ltr\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"isPasswordRevealed.set(!isPasswordRevealed())\"\n >\n <mat-icon [svgIcon]=\"isPasswordRevealed() ? 'visibility_off' : 'visibility'\"></mat-icon>\n </button>\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n @if (includeForgetPasswordLink()) {\n <div class=\"mb-3\">\n <a [routerLink]=\"['/forget-password']\" [queryParams]=\"forgetPasswordLinkQueryParams()\">\n \u0641\u0631\u0627\u0645\u0648\u0634\u06CC \u0631\u0645\u0632 \u0639\u0628\u0648\u0631\n </a>\n </div>\n }\n\n <button\n mat-raised-button\n color=\"primary\"\n class=\"big-mat-button col-12\"\n id=\"Accounts_Login\"\n type=\"submit\"\n [pghLoader]=\"submitLoader()\"\n [pghLoaderType]=\"'button'\"\n >\n <span>{{ buttonText() }}</span>\n </button>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6$1.PghInputTypeDirective, selector: "input[type]", inputs: ["type", "pghShowPassword"] }, { kind: "directive", type: i6$1.PghFieldErrorDirective, selector: "[pghFieldError]", inputs: ["pghFieldError"] }, { kind: "directive", type: i6$1.PghMarkAllAsTouchedDirective, selector: "form[formGroup]" }, { kind: "directive", type: i7.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghLoginComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-login', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"pgh-login\">\n <header>\n <h1 class=\"font-weight-bold text-center font-size-18\">{{ pageTitle() }}</h1>\n </header>\n <p class=\"text-center\">{{ description() }}</p>\n <form [formGroup]=\"form\" (submit)=\"onSubmit()\" class=\"mt-2\">\n @if (type() === 'USERNAME') {\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n type=\"text\"\n formControlName=\"email\"\n autocomplete=\"username\"\n name=\"username\"\n class=\"text-left ltr\"\n autocapitalize=\"none\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n } @if (type() === 'EMAIL') {\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n type=\"email\"\n formControlName=\"email\"\n autocomplete=\"email\"\n name=\"email\"\n class=\"text-left ltr\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n }\n\n <mat-form-field class=\"w-100\">\n <mat-label>\u0631\u0645\u0632 \u0639\u0628\u0648\u0631</mat-label>\n <input\n matInput\n type=\"password\"\n formControlName=\"password\"\n autocomplete=\"current-password\"\n [pghShowPassword]=\"isPasswordRevealed()\"\n name=\"password\"\n class=\"ltr\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"isPasswordRevealed.set(!isPasswordRevealed())\"\n >\n <mat-icon [svgIcon]=\"isPasswordRevealed() ? 'visibility_off' : 'visibility'\"></mat-icon>\n </button>\n <mat-error *pghFieldError=\"let message\">\n {{ message }}\n </mat-error>\n </mat-form-field>\n @if (includeForgetPasswordLink()) {\n <div class=\"mb-3\">\n <a [routerLink]=\"['/forget-password']\" [queryParams]=\"forgetPasswordLinkQueryParams()\">\n \u0641\u0631\u0627\u0645\u0648\u0634\u06CC \u0631\u0645\u0632 \u0639\u0628\u0648\u0631\n </a>\n </div>\n }\n\n <button\n mat-raised-button\n color=\"primary\"\n class=\"big-mat-button col-12\"\n id=\"Accounts_Login\"\n type=\"submit\"\n [pghLoader]=\"submitLoader()\"\n [pghLoaderType]=\"'button'\"\n >\n <span>{{ buttonText() }}</span>\n </button>\n </form>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }] });
class PghForgetPasswordComponent {
constructor(formBuilder, route) {
this.formBuilder = formBuilder;
this.route = route;
this.formSubmit = output();
this.submitLoader = input();
this.initialEmailValue = input();
this.form = this.formBuilder.group({
email: ['', { validators: [Validators.required, Validators.email] }],
});
}
ngOnInit() {
this.form
.get('email')
?.setValue(this.initialEmailValue() || this.route.snapshot.queryParamMap.get('email'));
}
recoverPassword() {
if (this.form.invalid)
return;
const email = this.form.get('email')?.value;
this.formSubmit.emit({ email });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghForgetPasswordComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PghForgetPasswordComponent, isStandalone: false, selector: "pgh-forget-password", inputs: { submitLoader: { classPropertyName: "submitLoader", publicName: "submitLoader", isSignal: true, isRequired: false, transformFunction: null }, initialEmailValue: { classPropertyName: "initialEmailValue", publicName: "initialEmailValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"pgh-forget-password\">\n <header>\n <h1 class=\"font-weight-bold text-center font-size-18\">\u0641\u0631\u0627\u0645\u0648\u0634\u06CC \u0631\u0645\u0632 \u0639\u0628\u0648\u0631</h1>\n <p class=\"text-center\">\u0628\u0631\u0627\u06CC \u062A\u063A\u06CC\u06CC\u0631 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631\u060C \u0627\u06CC\u0645\u06CC\u0644 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F</p>\n </header>\n <form [formGroup]=\"form\" (submit)=\"recoverPassword()\" class=\"mt-2\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n formControlName=\"email\"\n type=\"email\"\n name=\"email\"\n autocomplete=\"email\"\n placeholder=\"email@example.com\"\n class=\"text-left ltr\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n\n <button\n mat-raised-button\n color=\"primary\"\n class=\"big-mat-button col-12\"\n type=\"submit\"\n [pghLoader]=\"submitLoader()\"\n [pghLoaderType]=\"'button'\"\n >\n \u062A\u0627\u06CC\u06CC\u062F\n </button>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i6$1.PghInputTypeDirective, selector: "input[type]", inputs: ["type", "pghShowPassword"] }, { kind: "directive", type: i6$1.PghFieldErrorDirective, selector: "[pghFieldError]", inputs: ["pghFieldError"] }, { kind: "directive", type: i6$1.PghMarkAllAsTouchedDirective, selector: "form[formGroup]" }, { kind: "directive", type: i7.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghForgetPasswordComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-forget-password', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"pgh-forget-password\">\n <header>\n <h1 class=\"font-weight-bold text-center font-size-18\">\u0641\u0631\u0627\u0645\u0648\u0634\u06CC \u0631\u0645\u0632 \u0639\u0628\u0648\u0631</h1>\n <p class=\"text-center\">\u0628\u0631\u0627\u06CC \u062A\u063A\u06CC\u06CC\u0631 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631\u060C \u0627\u06CC\u0645\u06CC\u0644 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F</p>\n </header>\n <form [formGroup]=\"form\" (submit)=\"recoverPassword()\" class=\"mt-2\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n formControlName=\"email\"\n type=\"email\"\n name=\"email\"\n autocomplete=\"email\"\n placeholder=\"email@example.com\"\n class=\"text-left ltr\"\n autofocus\n />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n\n <button\n mat-raised-button\n color=\"primary\"\n class=\"big-mat-button col-12\"\n type=\"submit\"\n [pghLoader]=\"submitLoader()\"\n [pghLoaderType]=\"'button'\"\n >\n \u062A\u0627\u06CC\u06CC\u062F\n </button>\n </form>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i1.ActivatedRoute }] });
class PghRegisterComponent {
constructor(formBuilder) {
this.formBuilder = formBuilder;
this.formSubmit = output();
this.submitLoader = input();
this.registrationFormContent = input({
mainDescription: 'استفاده از <strong>همه</strong> خدمات تبلیغاتی تپسل (وبسایت و اپلیکیشن) فقط با ساخت <strong>یک</strong> حساب کاربری',
privacyAgencyTitle: ' قوانین و مقررات تپسل',
privacyLink: 'https://college.tapsell.ir/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D9%88-%D9%85%D9%82%D8%B1%D8%B1%D8%A7%D8%AA/',
});
this.userOptions = input(this.getDefaultOptions());
this.isPasswordRevealed = signal(false);
this.form = this.formBuilder.group({
firstName: ['', { validators: [Validators.required] }],
lastName: ['', { validators: [Validators.required] }],
email: ['', { validators: [Validators.required, Validators.email] }],
phone: ['', { validators: [Validators.required, PghFormValidators.phoneNumberValidator()] }],
password: [
'',
{
validators: [
Validators.required,
PghFormValidators.hasCapitalCase(),
PghFormValidators.hasNumber(),
PghFormValidators.hasSmallCase(),
Validators.minLength(8),
],
},
],
acceptPolicies: [false, { validators: [Validators.requiredTrue] }],
userType: ['advertiser', { validators: [Validators.required] }],
});
this.passwordValidationRules = [
{ key: 'minlength', message: 'شامل حداقل ۸ کاراکتر' },
{ key: 'hasCapitalCase', message: 'شامل حداقل یک حرف بزرگ' },
{ key: 'hasSmallCase', message: 'شامل حداقل یک حرف کوچک' },
{ key: 'hasNumber', message: 'شامل حداقل یک عدد' },
];
this.initializeOptions();
}
onUserTypeClick(value) {
this.form.get('userType')?.setValue(value);
}
onSubmit() {
if (this.form.invalid)
return;
this.formSubmit.emit(this.form.value);
}
initializeOptions() {
effect(() => {
untracked(() => this.setDefaultUserType());
});
}
getDefaultOptions() {
return [
{
value: 'advertiser',
label: 'تبلیغدهنده',
description: 'میخواهم کسبوکارم را در وبسایتها یا اپلیکیشنها تبلیغ کنم',
},
{
value: 'publisher',
label: 'نمایشدهنده',
description: 'میخواهم با نمایش دادن تبلیغات در وبسایت یا اپلیکیشن خود، درآمد کسب کنم',
},
{
value: 'both',
label: 'هر دو',
description: 'میخواهم هم کسبوکارم را تبلیغ کنم و هم از نمایش تبلیغات درآمد کسب کنم',
},
];
}
setDefaultUserType() {
const defaultValue = this.userOptions().length > 0 ? this.userOptions()[0].value : '';
this.form.get('userType')?.setValue(defaultValue);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghRegisterComponent, deps: [{ token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghRegisterComponent, isStandalone: false, selector: "pgh-register", inputs: { submitLoader: { classPropertyName: "submitLoader", publicName: "submitLoader", isSignal: true, isRequired: false, transformFunction: null }, registrationFormContent: { classPropertyName: "registrationFormContent", publicName: "registrationFormContent", isSignal: true, isRequired: false, transformFunction: null }, userOptions: { classPropertyName: "userOptions", publicName: "userOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<header>\n <h1 class=\"font-weight-bold text-center font-size-18\">\u062B\u0628\u062A\u200C\u0646\u0627\u0645</h1>\n</header>\n<p class=\"text-center\" [innerHTML]=\"registrationFormContent().mainDescription\"></p>\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"row\">\n <mat-form-field class=\"col-12 col-md-6\">\n <mat-label>\u0646\u0627\u0645</mat-label>\n <input matInput formControlName=\"firstName\" type=\"text\" name=\"name\" autocomplete=\"name\" />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"col-12 col-md-6\">\n <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC</mat-label>\n <input\n matInput\n formControlName=\"lastName\"\n type=\"text\"\n name=\"family-name\"\n autocomplete=\"family-name\"\n />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n </div>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\u0627\u06CC\u0645\u06CC\u0644</mat-label>\n <input\n matInput\n formControlName=\"email\"\n type=\"email\"\n name=\"email\"\n autocomplete=\"email\"\n placeholder=\"email@example.com\"\n pghPersianNumbersToEnglish\n class=\"font-english-numbers\"\n />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\u0634\u0645\u0627\u0631\u0647\u200C\u06CC \u0645\u0648\u0628\u0627\u06CC\u0644</mat-label>\n <input\n matInput\n formControlName=\"phone\"\n type=\"tel\"\n name=\"tel\"\n autocomplete=\"tel\"\n placeholder=\"09xxxxxxxxx\"\n pghPersianNumbersToEnglish\n />\n <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"w-100\" style=\"margin-bottom: -0.8em\">\n <mat-label>\u0631\u0645\u0632 \u0639\u0628\u0648\u0631</mat-label>\n <input\n matInput\n formControlName=\"password\"\n type=\"password\"\n name=\"new-password\"\n [pghShowPassword]=\"isPasswordRevealed()\"\n autocomplete=\"new-password\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"isPasswordRevealed.set(!isPasswordRevealed())\"\n >\n <mat-icon\n class=\"fz-20\"\n [svgIcon]=\"isPasswordRevealed() ? 'visibility_off' : 'remove_red_eye'\"\n ></mat-icon>\n </button>\n </mat-form-field>\n\n @for(rule of passwordValidationRules; track rule.key){\n <div class=\"font-size-14\">\n <li\n [ngClass]=\"{\n 'text-success':\n !form.get('password')?.hasError(rule.key) &&\n form.get('password')?.dirty &&\n form.get('password')?.value,\n 'text-danger': form.get('password')?.hasError(rule.key) && form.get('password')?.dirty,\n 'text-muted': !form.get('password')?.dirty || !form.get('password')?.value\n }\"\n >\n {{ rule.message }}\n </li>\n </div>\n }\n\n <div class=\"mb-3 mt-4\">\n <p>\u0646\u0648\u0639 \u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC</p>\n\n <div class=\"pgh-user-type-section d-flex justify-content-between\">\n @for (option of userOptions(); track option.value){\n <div\n class=\"pgh-user-type-item\"\n [class.selected]=\"form.get('userType')?.value === option?.value\"\n (click)=\"onUserTypeClick(option.value)\"\n >\n <strong>\n {{ option.label }}\n </strong>\n\n <div>\n <small>\n {{ option.description }}\n </small>\n </div>\n </div>\n }\n </div>\n </div>\n\n <mat-checkbox formControlName=\"acceptPolicies\">\n <a\n class=\"text-decoration-underline\"\n href=\"{{ registrationFormContent().privacyLink }}\"\n target=\"_blank\"\n >\n {{ registrationFormContent().privacyAgencyTitle }}\n </a>\n \u0631\u0627 \u0645\u06CC\u200C\u067E\u0630\u06CC\u0631\u0645.\n </mat-checkbox>\n @if (form.get('acceptPolicies')?.invalid && form.get('acceptPolicies')?.touched) {\n <span class=\"mat-error\">\u062A\u0627 \u0632\u0645\u0627\u0646\u06CC\u200C\u06A9\u0647 \u0642\u0648\u0627\u0646\u06CC\u0646 \u0631\u0627 \u0646\u067E\u0630\u06CC\u0631\u06CC\u062F \u0646\u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u06CC\u062F \u062B\u0628\u062A\u200C\u0646\u0627\u0645 \u06A9\u0646\u06CC\u062F.</span>\n }\n <button\n mat-raised-button\n color=\"primary\"\n class=\"big-mat-button col-12 mt-3\"\n id=\"Send_Email_Verification\"\n type=\"submit\"\n [pghLoader]=\"submitLoader()\"\n >\n <span>\u062F\u0631\u06CC\u0627\u0641\u062A \u06A9\u062F \u062A\u0627\u06CC\u06CC\u062F</span>\n </button>\n</form>\n", styles: [".pgh-user-type-section{display:flex;flex-wrap:wrap;gap:10px}.pgh-user-type-item{border:1px solid var(--666);border-radius:4px;flex:1 1 calc(33.333% - 10px);box-sizing:border-box;padding:10px;cursor:pointer}.pgh-user-type-item.selected{border-color:var(--primary)}.text-muted{color:var(--444)}.text-danger{color:var(--danger)}.text-success{color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disable