@ngx-addons/omni-auth-ui-material
Version:
User interface components for OmniAuth in Angular applications.
548 lines • 111 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, ViewContainerRef, Renderer2, input, effect, Directive, Input, HostBinding, Component, Injector, ChangeDetectionStrategy, signal, output, Pipe } from '@angular/core';
import * as i1 from '@angular/common';
import { DOCUMENT, CommonModule, NgOptimizedImage } from '@angular/common';
import * as i1$3 from '@angular/material/tabs';
import { MatTabsModule } from '@angular/material/tabs';
import * as i1$2 from '@angular/forms';
import { FormControl, NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatButton } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import * as i1$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i2$1 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { ErrorStateMatcher } from '@angular/material/core';
import { ErrorMessagePipe, OmniAuthService, AuthRouteService, AUTH_CONFIG, patterns, defaultContent } from '@ngx-addons/omni-auth-core';
import { MatCheckbox } from '@angular/material/checkbox';
class LoaderOverlayDirective {
#hostElement = inject((ElementRef));
#viewContainerRef = inject(ViewContainerRef);
#renderer = inject(Renderer2);
#document = inject(DOCUMENT);
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
#spinner;
get #nativeElement() {
return this.#hostElement.nativeElement;
}
#toggleOverlay = effect(() => {
const isLoading = this.loading();
if (isLoading) {
this.#nativeElement.classList.add('mat-loading');
this.#createSpinner();
}
else {
this.#nativeElement.classList.remove('mat-loading');
this.#destroySpinner();
}
}, ...(ngDevMode ? [{ debugName: "#toggleOverlay" }] : []));
#createSpinner() {
if (this.#spinner) {
return;
}
const wrapper = this.#document.createElement('div');
wrapper.classList.add('loading-wrapper');
this.#spinner = this.#viewContainerRef.createComponent(MatProgressSpinner);
this.#spinner.instance.mode = 'indeterminate';
this.#spinner.instance.color = 'primary';
this.#spinner.instance.strokeWidth = 2;
this.#spinner.instance.diameter = 21;
wrapper.style = `
position: absolute;
z-index: 15;
top: 0;
left: 0;
display: flex;
align-items: start;
padding-top: 7px;
width: 100%;
height: 100%;
justify-content: center;
}`;
wrapper.appendChild(this.#spinner.instance._elementRef.nativeElement);
this.#renderer.appendChild(this.#nativeElement, wrapper);
}
#destroySpinner() {
if (this.#spinner) {
this.#spinner.destroy();
this.#spinner = undefined;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoaderOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", type: LoaderOverlayDirective, isStandalone: true, selector: "[omniAuthUiMatLoadingOverlay]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoaderOverlayDirective, decorators: [{
type: Directive,
args: [{
selector: `[omniAuthUiMatLoadingOverlay]`,
standalone: true,
}]
}] });
class ButtonComponent {
type = 'primary';
icon;
iconOnly = false;
disabled = false;
loading = false;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ButtonComponent, isStandalone: true, selector: "omni-auth-ui-mat-button", inputs: { type: "type", icon: "icon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<button\n class=\"button\"\n mat-flat-button\n omniAuthUiMatLoadingOverlay\n [class.icon-only]=\"iconOnly\"\n [disabled]=\"disabled || loading\"\n [loading]=\"loading\"\n [ngClass]=\"type\"\n>\n @if (icon) {\n <mat-icon>{{ icon }}</mat-icon>\n }\n <ng-content />\n</button>\n", styles: [":host.disabled{pointer-events:none}.button.icon-only mat-icon{margin:0}.button:not(.icon-only) mat-icon{margin:0 8px 0 0}.button.secondary{--mat-button-filled-container-color: var(--mat-sys-surface-container-highest);--mat-button-filled-label-text-color: var(--mat-sys-on-primary-container);--mat-button-filled-hover-state-layer-opacity: .2;--mat-button-filled-state-layer-color: var(--mat-sys-primary-container);--mat-button-filled-focus-state-layer-opacity: .5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: LoaderOverlayDirective, selector: "[omniAuthUiMatLoadingOverlay]", inputs: ["loading"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-button', standalone: true, imports: [
CommonModule,
MatButton,
MatIconModule,
LoaderOverlayDirective,
], template: "<button\n class=\"button\"\n mat-flat-button\n omniAuthUiMatLoadingOverlay\n [class.icon-only]=\"iconOnly\"\n [disabled]=\"disabled || loading\"\n [loading]=\"loading\"\n [ngClass]=\"type\"\n>\n @if (icon) {\n <mat-icon>{{ icon }}</mat-icon>\n }\n <ng-content />\n</button>\n", styles: [":host.disabled{pointer-events:none}.button.icon-only mat-icon{margin:0}.button:not(.icon-only) mat-icon{margin:0 8px 0 0}.button.secondary{--mat-button-filled-container-color: var(--mat-sys-surface-container-highest);--mat-button-filled-label-text-color: var(--mat-sys-on-primary-container);--mat-button-filled-hover-state-layer-opacity: .2;--mat-button-filled-state-layer-color: var(--mat-sys-primary-container);--mat-button-filled-focus-state-layer-opacity: .5}\n"] }]
}], propDecorators: { type: [{
type: Input
}], icon: [{
type: Input
}], iconOnly: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.disabled']
}, {
type: Input
}], loading: [{
type: Input
}] } });
class HostStateMatcher {
parentFormControl;
constructor(parentFormControl) {
this.parentFormControl = parentFormControl;
}
isErrorState() {
return (this.parentFormControl &&
this.parentFormControl.invalid &&
(this.parentFormControl.dirty || this.parentFormControl.touched));
}
static fromNgControl(control) {
if (control.control instanceof FormControl) {
return new HostStateMatcher(control.control);
}
return new ErrorStateMatcher();
}
}
class InputComponent {
injector = inject(Injector);
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
value;
disabled = false;
errorStateMatcher = new ErrorStateMatcher();
onChangeLocalValue(value) {
this.value = value;
this.onChange?.(value);
}
onChange;
onTouched;
ngAfterViewInit() {
this.errorStateMatcher = HostStateMatcher.fromNgControl(this.injector.get(NgControl));
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputComponent, isStandalone: true, selector: "omni-auth-ui-mat-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: InputComponent,
multi: true,
},
], ngImport: i0, template: "<mat-form-field class=\"field\" subscriptSizing=\"dynamic\">\n <mat-label>{{ label() }}</mat-label>\n\n <input\n matInput\n [disabled]=\"disabled\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [ngModel]=\"value\"\n [placeholder]=\"placeholder() ?? ''\"\n [type]=\"type()\"\n (blur)=\"onTouched && onTouched()\"\n (ngModelChange)=\"onChangeLocalValue($event)\"\n />\n @if (hint(); as hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n <mat-error><ng-content/></mat-error>\n</mat-form-field>\n", styles: [".field{width:var(--field-width, auto);min-width:var(--field-min-width, auto)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-input', standalone: true, imports: [
CommonModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
MatAutocompleteModule,
], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: InputComponent,
multi: true,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"field\" subscriptSizing=\"dynamic\">\n <mat-label>{{ label() }}</mat-label>\n\n <input\n matInput\n [disabled]=\"disabled\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [ngModel]=\"value\"\n [placeholder]=\"placeholder() ?? ''\"\n [type]=\"type()\"\n (blur)=\"onTouched && onTouched()\"\n (ngModelChange)=\"onChangeLocalValue($event)\"\n />\n @if (hint(); as hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n <mat-error><ng-content/></mat-error>\n</mat-form-field>\n", styles: [".field{width:var(--field-width, auto);min-width:var(--field-min-width, auto)}\n"] }]
}] });
class MessageComponent {
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
get iconBasedOnType() {
switch (this.type()) {
case 'info':
return 'info';
case 'warn':
return 'warning';
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: MessageComponent, isStandalone: true, selector: "omni-auth-ui-mat-message", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-outer\">\n <div class=\"message-inner\" [ngClass]=\"type()\">\n <mat-icon class=\"icon\">{{ icon() ?? iconBasedOnType }}</mat-icon>\n <div class=\"message-content\">\n <ng-content/>\n </div>\n </div>\n</div>\n", styles: [".message-outer{color:var(--auth-message-color, var(--mat-sys-on-primary-container));background:var(--auth-message-background, var(--mat-sys-primary-container));box-shadow:var(--auth-message-box-shadow, var(--mat-sys-shadow));border-radius:var(--auth-message-border-radius-message, 4px)}.message-outer .message-inner{border-radius:var(--auth-message-border-radius-message, 4px);display:flex;align-items:center;padding:.6em .8rem;border:1px solid transparent;gap:var(--auth-horizontal-gap, 8px);box-shadow:var(--mat-sys-level1)}.message-outer .message-inner .message-content{display:flex;flex-direction:column;gap:var(--auth-horizontal-gap, 8px);width:100%}.message-outer .message-inner .icon{flex-shrink:0}.message-outer .message-inner.warn{color:var(--mat-sys-on-error-container);background:var(--mat-sys-error-container);--mdc-linear-progress-active-indicator-color: var(--mat-sys-on-error-container);--mdc-linear-progress-track-color: rgba(255, 255, 255, .71);--mat-icon-color: var(--mat-sys-on-error-container)}.message-outer .message-inner.warn .icon{color:var(--mat-sys-on-error-container)}.message-outer .message-inner.info{color:var(--on-info);background:var(--info-container);--mdc-linear-progress-active-indicator-color: var(--on-info);--mat-icon-color: var(--on-info);--mdc-linear-progress-track-color: rgba(255, 255, 255, .71)}.message-outer .message-inner.info .icon{color:var(--on-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MessageComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-message', standalone: true, imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-outer\">\n <div class=\"message-inner\" [ngClass]=\"type()\">\n <mat-icon class=\"icon\">{{ icon() ?? iconBasedOnType }}</mat-icon>\n <div class=\"message-content\">\n <ng-content/>\n </div>\n </div>\n</div>\n", styles: [".message-outer{color:var(--auth-message-color, var(--mat-sys-on-primary-container));background:var(--auth-message-background, var(--mat-sys-primary-container));box-shadow:var(--auth-message-box-shadow, var(--mat-sys-shadow));border-radius:var(--auth-message-border-radius-message, 4px)}.message-outer .message-inner{border-radius:var(--auth-message-border-radius-message, 4px);display:flex;align-items:center;padding:.6em .8rem;border:1px solid transparent;gap:var(--auth-horizontal-gap, 8px);box-shadow:var(--mat-sys-level1)}.message-outer .message-inner .message-content{display:flex;flex-direction:column;gap:var(--auth-horizontal-gap, 8px);width:100%}.message-outer .message-inner .icon{flex-shrink:0}.message-outer .message-inner.warn{color:var(--mat-sys-on-error-container);background:var(--mat-sys-error-container);--mdc-linear-progress-active-indicator-color: var(--mat-sys-on-error-container);--mdc-linear-progress-track-color: rgba(255, 255, 255, .71);--mat-icon-color: var(--mat-sys-on-error-container)}.message-outer .message-inner.warn .icon{color:var(--mat-sys-on-error-container)}.message-outer .message-inner.info{color:var(--on-info);background:var(--info-container);--mdc-linear-progress-active-indicator-color: var(--on-info);--mat-icon-color: var(--on-info);--mdc-linear-progress-track-color: rgba(255, 255, 255, .71)}.message-outer .message-inner.info .icon{color:var(--on-info)}\n"] }]
}] });
class PrintErrorComponent {
source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PrintErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PrintErrorComponent, isStandalone: true, selector: "omni-auth-ui-mat-print-error", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if((source() | errorMessage : content().errors)(); as error) {\n <omni-auth-ui-mat-message class=\"auth-form-error\" type=\"warn\">\n {{ error }}\n </omni-auth-ui-mat-message>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MessageComponent, selector: "omni-auth-ui-mat-message", inputs: ["icon", "type"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PrintErrorComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-print-error', standalone: true, imports: [ErrorMessagePipe, MessageComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if((source() | errorMessage : content().errors)(); as error) {\n <omni-auth-ui-mat-message class=\"auth-form-error\" type=\"warn\">\n {{ error }}\n </omni-auth-ui-mat-message>\n}\n" }]
}] });
class ConfirmSignUpComponent {
#authService = inject(OmniAuthService);
authRoute = inject(AuthRouteService);
#env = inject(AUTH_CONFIG);
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
user = {
email: null,
code: undefined,
};
emailPattern = this.#env.validation?.emailPattern || patterns.emailPattern;
resending = signal(false, ...(ngDevMode ? [{ debugName: "resending" }] : []));
processing = signal(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
disabledResend = false;
async resendCode() {
const email = this.user.email ?? this.authRoute.currentEmail();
if (!email) {
return;
}
this.resending.set(true);
const hasError = await this.#authService.resendSignUpCode({
email,
});
this.resending.set(false);
if (!hasError) {
this.disabledResend = true;
setTimeout(() => {
this.disabledResend = false;
}, 60000);
}
}
async onSubmit() {
const email = this.user.email ?? this.authRoute.currentEmail();
const code = this.user.code;
if (!email || !code) {
return;
}
this.processing.set(true);
await this.#authService.confirmSignUp({
email,
code: String(code),
});
this.processing.set(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmSignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ConfirmSignUpComponent, isStandalone: true, selector: "omni-auth-ui-mat-confirm-signup", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<form #confirmForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().confirmationSignUp.subTitle }}</span>\n <div class=\"description\">\n {{ content().confirmationSignUp.paragraph }}\n </div>\n </omni-auth-ui-mat-message>\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #code=\"ngModel\"\n name=\"code\"\n required\n type=\"text\"\n [label]=\"content().common.codeLabel\"\n [placeholder]=\"content().common.codePlaceholder\"\n [(ngModel)]=\"user.code\"\n >\n @switch (true) {\n @case (code.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"confirmSignUp\" [content]=\"content()\" />\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [disabled]=\"disabledResend\"\n [loading]=\"resending()\"\n (click)=\"resendCode()\"\n >{{ content().confirmationSignUp.resendLabel }}\n </omni-auth-ui-mat-button>\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!confirmForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().confirmationSignUp.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n</form>\n", styles: ["", ".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InputComponent, selector: "omni-auth-ui-mat-input", inputs: ["type", "placeholder", "label", "hint"] }, { kind: "component", type: MessageComponent, selector: "omni-auth-ui-mat-message", inputs: ["icon", "type"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmSignUpComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-confirm-signup', standalone: true, imports: [
CommonModule,
ButtonComponent,
FormsModule,
InputComponent,
MessageComponent,
InputComponent,
ButtonComponent,
PrintErrorComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form #confirmForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().confirmationSignUp.subTitle }}</span>\n <div class=\"description\">\n {{ content().confirmationSignUp.paragraph }}\n </div>\n </omni-auth-ui-mat-message>\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #code=\"ngModel\"\n name=\"code\"\n required\n type=\"text\"\n [label]=\"content().common.codeLabel\"\n [placeholder]=\"content().common.codePlaceholder\"\n [(ngModel)]=\"user.code\"\n >\n @switch (true) {\n @case (code.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"confirmSignUp\" [content]=\"content()\" />\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [disabled]=\"disabledResend\"\n [loading]=\"resending()\"\n (click)=\"resendCode()\"\n >{{ content().confirmationSignUp.resendLabel }}\n </omni-auth-ui-mat-button>\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!confirmForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().confirmationSignUp.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n</form>\n", styles: [".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"] }]
}] });
class SignUpComponent {
#authService = inject(OmniAuthService);
#env = inject(AUTH_CONFIG);
authRoute = inject(AuthRouteService);
processing = signal(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
termsAndConditions = output();
emailPattern = this.#env.validation?.emailPattern || patterns.emailPattern;
passwordPattern = this.#env.validation?.passwordPattern || patterns.passwordPattern;
user = {
tos: false,
name: null,
email: null,
password: null,
attributes: {}
};
async onSubmit() {
const email = this.user.email ?? this.authRoute.currentEmail();
const password = this.user.password;
const name = this.user.name;
const attributes = this.user.attributes;
if (!name || !email || !password) {
return;
}
this.processing.set(true);
await this.#authService.signUp({
email,
password,
name,
attributes,
});
this.processing.set(false);
}
updateUserEmail($event) {
this.user.email = $event;
const emailParts = $event.split('@');
if (emailParts.length === 2) {
this.user.name = $event.split('@')[0];
}
}
updateUserAttribute(key, value) {
if (!this.user.attributes) {
this.user.attributes = {};
}
this.user.attributes[key] = value;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SignUpComponent, isStandalone: true, selector: "omni-auth-ui-mat-signup", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { termsAndConditions: "termsAndConditions" }, ngImport: i0, template: "<form #registerForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"updateUserEmail($event)\"\n >\n <ng-container>\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </ng-container>\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #name=\"ngModel\"\n minlength=\"2\"\n name=\"name\"\n required\n type=\"text\"\n [label]=\"content().common.nameLabel\"\n [placeholder]=\"content().common.namePlaceholder\"\n [(ngModel)]=\"user.name\"\n >\n @switch (true) {\n @case (name.control.hasError(\"required\")) {\n <ng-container>{{ content().common.nameErrorRequiredText }}</ng-container>\n }\n @case (name.control.hasError(\"minLength\")) {\n <ng-container>{{ content().common.nameErrorMinLengthText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n\n @for (attribute of config()?.additionalAttributes; track attribute.key) {\n <mat-checkbox\n class=\"additional-attribute-checkbox\"\n [name]=\"attribute.key\"\n [ngModel]=\"user.attributes[attribute.key]\"\n [required]=\"attribute.isRequired\"\n (ngModelChange)=\"updateUserAttribute(attribute.key, $event)\">\n {{ attribute.label }}\n </mat-checkbox>\n }\n\n <ng-content select=\"[sign-up-footer]\" />\n <omni-auth-ui-mat-print-error source=\"signUp\" [content]=\"content()\" />\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!registerForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().signUp.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n</form>\n", styles: ["", ".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputComponent, selector: "omni-auth-ui-mat-input", inputs: ["type", "placeholder", "label", "hint"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignUpComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-signup', standalone: true, imports: [CommonModule, InputComponent, FormsModule, ButtonComponent, MatCheckbox, PrintErrorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form #registerForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"updateUserEmail($event)\"\n >\n <ng-container>\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </ng-container>\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #name=\"ngModel\"\n minlength=\"2\"\n name=\"name\"\n required\n type=\"text\"\n [label]=\"content().common.nameLabel\"\n [placeholder]=\"content().common.namePlaceholder\"\n [(ngModel)]=\"user.name\"\n >\n @switch (true) {\n @case (name.control.hasError(\"required\")) {\n <ng-container>{{ content().common.nameErrorRequiredText }}</ng-container>\n }\n @case (name.control.hasError(\"minLength\")) {\n <ng-container>{{ content().common.nameErrorMinLengthText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n\n @for (attribute of config()?.additionalAttributes; track attribute.key) {\n <mat-checkbox\n class=\"additional-attribute-checkbox\"\n [name]=\"attribute.key\"\n [ngModel]=\"user.attributes[attribute.key]\"\n [required]=\"attribute.isRequired\"\n (ngModelChange)=\"updateUserAttribute(attribute.key, $event)\">\n {{ attribute.label }}\n </mat-checkbox>\n }\n\n <ng-content select=\"[sign-up-footer]\" />\n <omni-auth-ui-mat-print-error source=\"signUp\" [content]=\"content()\" />\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!registerForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().signUp.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n</form>\n", styles: [".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"] }]
}] });
class SocialButtonsComponent {
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
processing = signal(null, ...(ngDevMode ? [{ debugName: "processing" }] : []));
#authService = inject(OmniAuthService);
signInProviders = input.required(...(ngDevMode ? [{ debugName: "signInProviders" }] : []));
onSocialButtonClick = async (provider) => {
this.processing.set(provider.key);
this.error.set(null);
const response = await this.#authService.signInWithProvider(provider.key);
this.processing.set(null);
if (response) {
this.error.set(this.content().errors[response.code] ?? this.content().errors.unknown);
}
};
name = name;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SocialButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SocialButtonsComponent, isStandalone: true, selector: "omni-auth-ui-mat-social-buttons", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, signInProviders: { classPropertyName: "signInProviders", publicName: "signInProviders", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"social-wrapper\">\n <div class=\"social-divider\">\n <hr aria-hidden=\"true\" class=\"social-divider-line\">\n <span class=\"social-divider-text\"> {{ content().socialButtons.orLine }}</span>\n <hr aria-hidden=\"true\" class=\"social-divider-line\">\n </div>\n\n <omni-auth-ui-mat-print-error source=\"signInWithProvider\" [content]=\"content()\"/>\n\n <div class=\"social-list\">\n @for (signInProvider of signInProviders(); track signInProvider.key) {\n <button class=\"social-list-item\" mat-button omniAuthUiMatLoadingOverlay\n type=\"button\"\n [class.processing]=\"processing() === signInProvider.key\"\n [disabled]=\"processing()\"\n [loading]=\"processing() === signInProvider.key\"\n (click)=\"onSocialButtonClick(signInProvider)\"\n >\n\n @if (signInProvider.icon; as icon) {\n <img height=\"24px\" width=\"24px\" [alt]=\"icon.alt\" [ngSrc]=\"icon.src\"/>\n } @else {\n @switch (signInProvider.key) {\n @case ('google') {\n <svg aria-hidden=\"true\" focusable=\"false\" height=\"24\"\n preserveAspectRatio=\"xMidYMid\"\n role=\"img\" viewBox=\"0 0 262 262\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n fill=\"#4285F4\"/>\n <path\n d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n fill=\"#34A853\"/>\n <path\n d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n fill=\"#FBBC05\"/>\n <path\n d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n fill=\"#EB4335\"/>\n </svg>\n }\n @case ('facebook') {\n <svg aria-hidden=\"true\" fill=\"#4267b2\" focusable=\"false\" height=\"24\" role=\"img\"\n viewBox=\"0 0 24 24\" width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z\"/>\n </svg>\n }\n @case ('apple') {\n <svg aria-hidden=\"true\" focusable=\"false\" height=\"24\" role=\"img\" viewBox=\"0 0 170 170\"\n width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z\"/>\n </svg>\n }\n @case ('github') {\n <svg height=\"24px\" role=\"img\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"/>\n </svg>\n }\n @case ('microsoft') {\n <svg fill=\"none\" height=\"24px\" viewBox=\"0 0 32 32\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect fill=\"#FEBA08\" height=\"10\" width=\"10\" x=\"17\" y=\"17\"/>\n <rect fill=\"#05A6F0\" height=\"10\" width=\"10\" x=\"5\" y=\"17\"/>\n <rect fill=\"#80BC06\" height=\"10\" width=\"10\" x=\"17\" y=\"5\"/>\n <rect fill=\"#F25325\" height=\"10\" width=\"10\" x=\"5\" y=\"5\"/>\n </svg>\n }\n @default {\n <svg fill=\"#000000\" height=\"24px\" viewBox=\"0 0 320 320\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M160,103.695c-18.802,0-36.461,5.146-51.731,14.14V64.523c0-24.551,18.025-44.523,40.183-44.523h23.098\n c22.157,0,40.183,19.973,40.183,44.523c0,5.522,4.478,10,10,10s10-4.478,10-10C231.731,28.945,204.733,0,171.549,0h-23.098\n c-33.185,0-60.183,28.945-60.183,64.523v68.591c-20.308,19.738-33.011,47.731-33.011,78.733C55.258,271.483,102.245,320,160,320\n s104.742-48.517,104.742-108.152S217.755,103.695,160,103.695z M160,300c-46.727,0-84.742-39.545-84.742-88.152\n s38.016-88.152,84.742-88.152s84.742,39.545,84.742,88.152S206.727,300,160,300z\"/>\n <path d=\"M189.504,195.563c0-16.273-13.235-29.513-29.505-29.513c-16.268,0-29.503,13.239-29.503,29.513\n c0,8.318,3.452,16.06,9.343,21.557l-7.075,31.729c-0.159,0.715-0.239,1.444-0.239,2.177c0,8.667,8.488,15.202,19.744,15.202h15.467\n c11.254,0,19.74-6.535,19.74-15.202c0-0.732-0.08-1.462-0.24-2.177l-7.076-31.729C186.051,211.622,189.504,203.881,189.504,195.563\n z M153.84,246.227l6.159-27.622l6.161,27.622H153.84z M164.36,204.014c-1.944,1.01-3.443,2.591-4.361,4.455\n c-0.918-1.864-2.417-3.445-4.361-4.455c-3.171-1.647-5.142-4.886-5.142-8.451c0-5.245,4.263-9.513,9.503-9.513\n c5.241,0,9.505,4.268,9.505,9.513C169.504,199.127,167.533,202.365,164.36,204.014z\"/>\n </g>\n </svg>\n }\n }\n }\n </button>\n\n }\n </div>\n</div>\n", styles: [".social-divider{align-items:center;display:flex;flex-direction:row;margin:0}.social-divider-text{margin:0 8px 2px;white-space:nowrap;color:var(--auth-social-divider-text-color, var(--mat-sys-secondary))}.social-divider-line{flex-grow:1;height:var(--auth-social-divider-line-height, 1px);border:0;margin:0;background-color:var(--auth-social-divider-line-color, var(--mat-sys-outline))}.social-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--auth-social-gap, 8px);width:100%}.social-list-item{transition:opacity .1s ease-in-out;background:var(--auth-social-button-bg, var(--mat-sys-secondary-fixed))}.social-list-item:disabled{opacity:.2}.social-list-item.processing{opacity:.7}.social-list-item svg{max-width:24px;max-height:24px}.social-wrapper{display:flex;flex-direction:column;gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: LoaderOverlayDirective, selector: "[omniAuthUiMatLoadingOverlay]", inputs: ["loading"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SocialButtonsComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-social-buttons', standalone: true, imports: [
CommonModule,
FormsModule,
MatButton,
LoaderOverlayDirective,
PrintErrorComponent,
NgOptimizedImage,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"social-wrapper\">\n <div class=\"social-divider\">\n <hr aria-hidden=\"true\" class=\"social-divider-line\">\n <span class=\"social-divider-text\"> {{ content().socialButtons.orLine }}</span>\n <hr aria-hidden=\"true\" class=\"social-divider-line\">\n </div>\n\n <omni-auth-ui-mat-print-error source=\"signInWithProvider\" [content]=\"content()\"/>\n\n <div class=\"social-list\">\n @for (signInProvider of signInProviders(); track signInProvider.key) {\n <button class=\"social-list-item\" mat-button omniAuthUiMatLoadingOverlay\n type=\"button\"\n [class.processing]=\"processing() === signInProvider.key\"\n [disabled]=\"processing()\"\n [loading]=\"processing() === signInProvider.key\"\n (click)=\"onSocialButtonClick(signInProvider)\"\n >\n\n @if (signInProvider.icon; as icon) {\n <img height=\"24px\" width=\"24px\" [alt]=\"icon.alt\" [ngSrc]=\"icon.src\"/>\n } @else {\n @switch (signInProvider.key) {\n @case ('google') {\n <svg aria-hidden=\"true\" focusable=\"false\" height=\"24\"\n preserveAspectRatio=\"xMidYMid\"\n role=\"img\" viewBox=\"0 0 262 262\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n fill=\"#4285F4\"/>\n <path\n d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n fill=\"#34A853\"/>\n <path\n d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\n fill=\"#FBBC05\"/>\n <path\n d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n fill=\"#EB4335\"/>\n </svg>\n }\n @case ('facebook') {\n <svg aria-hidden=\"true\" fill=\"#4267b2\" focusable=\"false\" height=\"24\" role=\"img\"\n viewBox=\"0 0 24 24\" width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z\"/>\n </svg>\n }\n @case ('apple') {\n <svg aria-hidden=\"true\" focusable=\"false\" height=\"24\" role=\"img\" viewBox=\"0 0 170 170\"\n width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z\"/>\n </svg>\n }\n @case ('github') {\n <svg height=\"24px\" role=\"img\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"/>\n </svg>\n }\n @case ('microsoft') {\n <svg fill=\"none\" height=\"24px\" viewBox=\"0 0 32 32\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect fill=\"#FEBA08\" height=\"10\" width=\"10\" x=\"17\" y=\"17\"/>\n <rect fill=\"#05A6F0\" height=\"10\" width=\"10\" x=\"5\" y=\"17\"/>\n <rect fill=\"#80BC06\" height=\"10\" width=\"10\" x=\"17\" y=\"5\"/>\n <rect fill=\"#F25325\" height=\"10\" width=\"10\" x=\"5\" y=\"5\"/>\n </svg>\n }\n @default {\n <svg fill=\"#000000\" height=\"24px\" viewBox=\"0 0 320 320\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M160,103.695c-18.802,0-36.461,5.146-51.731,14.14V64.523c0-24.551,18.025-44.523,40.183-44.523h23.098\n c22.157,0,40.183,19.973,40.183,44.523c0,5.522,4.478,10,10,10s10-4.478,10-10C231.731,28.945,204.733,0,171.549,0h-23.098\n c-33.185,0-60.183,28.945-60.183,64.523v68.591c-20.308,19.738-33.011,47.731-33.011,78.733C55.258,271.483,102.245,320,160,320\n s104.742-48.517,104.742-108.152S217.755,103.695,160,103.695z M160,300c-46.727,0-84.742-39.545-84.742-88.152\n s38.016-88.152,84.742-88.152s84.742,39.545,84.742,88.152S206.727,300,160,300z\"/>\n <path d=\"M189.504,195.563c0-16.273-13.235-29.513-29.505-29.513c-16.268,0-29.503,13.239-29.503,29.513\n c0,8.318,3.452,16.06,9.343,21.557l-7.075,31.729c-0.159,0.715-0.239,1.444-0.239,2.177c0,8.667,8.488,15.202,19.744,15.202h15.467\n c11.254,0,19.74-6.535,19.74-15.202c0-0.732-0.08-1.462-0.24-2.177l-7.076-31.729C186.051,211.622,189.504,203.881,189.504,195.563\n z M153.84,246.227l6.159-27.622l6.161,27.622H153.84z M164.36,204.014c-1.944,1.01-3.443,2.591-4.361,4.455\n c-0.918-1.864-2.417-3.445-4.361-4.455c-3.171-1.647-5.142-4.886-5.142-8.451c0-5.245,4.263-9.513,9.503-9.513\n c5.241,0,9.505,4.268,9.505,9.513C169.504,199.127,167.533,202.365,164.36,204.014z\"/>\n </g>\n </svg>\n }\n }\n }\n </button>\n\n }\n </div>\n</div>\n", styles: [".social-divider{align-items:center;display:flex;flex-direction:row;margin:0}.social-divider-text{margin:0 8px 2px;white-space:nowrap;color:var(--auth-social-divider-text-color, var(--mat-sys-secondary))}.social-divider-line{flex-grow:1;height:var(--auth-social-divider-line-height, 1px);border:0;margin:0;background-color:var(--auth-social-divider-line-color, var(--mat-sys-outline))}.social-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--auth-social-gap, 8px);width:100%}.social-list-item{transition:opacity .1s ease-in-out;background:var(--auth-social-button-bg, var(--mat-sys-secondary-fixed))}.social-list-item:disabled{opacity:.2}.social-list-item.processing{opacity:.7}.social-list-item svg{max-width:24px;max-height:24px}.social-wrapper{display:flex;flex-direction:column;gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px))}\n"] }]
}] });
class SignInComponent {
#authService = inject(OmniAuthService);
#authRoute = inject(AuthRouteService);
#env = inject(AUTH_CONFIG);
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
processing = signal(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
get currentEmail() {
return this.#authRoute.currentEmail;
}
user = {
email: null,
password: null,
};
emailPattern = this.#env.validation?.emailPattern || patterns.emailPattern;
passwordPattern = this.#env.validation?.passwordPattern || patterns.passwordPattern;
async onSubmit() {
const email = this.user.email ?? this.#authRoute.currentEmail();
const password = this.user.password;
if (!email || !password) {
return;
}
this.processing.set(true);
await this.#authService.signIn({
email,
password,
});
this.processing.set(false);
}
navigateToReset() {
this.#authRoute.nextStep('reset_password', this.user.email ? { email: this.user.email } : undefined);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SignInComponent, isStandalone: true, selector: "omni-auth-ui-mat-signin", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form #registerForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n @case (password.control.hasError(\"minlength\")) {\n <ng-container>{{ content().common.passwordErrorMinLengthText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <p>\n <a\n class=\"link\"\n tabindex=\"0\"\n target=\"_blank\"\n (click)=\"navigateToReset()\"\n (keyup)=\"navigateToReset()\"\n >\n {{ content().signIn.forgetPassword }}\n </a>\n </p>\n <omni-auth-ui-mat-print-error source=\"signIn\" [content]=\"content()\"/>\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!registerForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().signIn.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n @if (config()?.signInProviders; as signInProviders) {\n <div class=\"auth-form-social\">\n <omni-auth-ui-mat-social-buttons\n [content]=\"content()\"\n [signInProviders]=\"signInProviders\"\n />\n </div>\n }\n</form>\n", styles: ["", ".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InputComponent, selector: "omni-auth-ui-mat-input", inputs: ["type", "placeholder", "label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "component", type: SocialButtonsComponent, selector: "omni-auth-ui-mat-social-buttons", inputs: ["content", "signInProviders"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignInComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-signin', standalone: true, imports: [
CommonModule,
FormsModule,
InputComponent,
ButtonComponent,
SocialButtonsComponent,
PrintErrorComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form #registerForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n @case (password.control.hasError(\"minlength\")) {\n <ng-container>{{ content().common.passwordErrorMinLengthText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <p>\n <a\n class=\"link\"\n tabindex=\"0\"\n target=\"_blank\"\n (click)=\"navigateToReset()\"\n (keyup)=\"navigateToReset()\"\n >\n {{ content().signIn.forgetPassword }}\n </a>\n </p>\n <omni-auth-ui-mat-print-error source=\"signIn\" [content]=\"content()\"/>\n </div>\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!registerForm.invalid\"\n [loading]=\"processing()\"\n >{{ content().signIn.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n @if (config()?.signInProviders; as signInProviders) {\n <div class=\"auth-form-social\">\n <omni-auth-ui-mat-social-buttons\n [content]=\"content()\"\n [signInProviders]=\"signInProviders\"\n />\n </div>\n }\n</form>\n", styles: [".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"] }]
}] });
class ResetPasswordComponent {
#authService = inject(OmniAuthService);
#env = inject(AUTH_CONFIG);
authRoute = inject(AuthRouteService);
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
user = {
email: null,
code: null,
password: null,
};
emailPattern = this.#env.validation?.emailPattern || patterns.emailPattern;
passwordPattern = this.#env.validation?.passwordPattern || patterns.passwordPattern;
resending = signal(false, ...(ngDevMode ? [{ debugName: "resending" }] : []));
processing = signal(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
codeSent = false;
async sendCode() {
const email = this.user.email ?? this.authRoute.currentEmail();
if (!email) {
return;
}
this.resending.set(true);
const hasError = await this.#authService.forgotPassword({
email,
});
this.resending.set(false);
if (!hasError) {
this.codeSent = true;
}
}
async onSubmit() {
const email = this.user.email ?? this.authRoute.currentEmail();
const newPassword = this.user.password;
const code = this.user.code;
if (!email || !newPassword || !code) {
return;
}
this.processing.set(true);
await this.#authService.confirmForgotPassword({
email,
code: String(code),
newPassword,
});
this.processing.set(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ResetPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ResetPasswordComponent, isStandalone: true, selector: "omni-auth-ui-mat-reset-password", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (!codeSent) {\n <form #sendCodeForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"sendCode()\">\n <div class=\"auth-form-header\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [icon]=\"content().common.icons.back\"\n (click)=\"authRoute.nextStep('login')\"\n >\n {{ content().common.backToSignInLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().resetPassword.sendCodeMessage }}</span>\n </omni-auth-ui-mat-message>\n\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"forgotPassword\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button [disabled]=\"!!sendCodeForm.invalid\" [loading]=\"processing()\"\n >{{ content().resetPassword.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n </form>\n} @else {\n <form #sendCode=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-header\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [icon]=\"content().common.icons.back\"\n (click)=\"authRoute.nextStep('login')\"\n >\n {{ content().common.backToSignInLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().resetPassword.sendCodeMessage }}</span>\n </omni-auth-ui-mat-message>\n\n <omni-auth-ui-mat-input\n #code=\"ngModel\"\n name=\"code\"\n required\n type=\"text\"\n [label]=\"content().common.codeLabel\"\n [placeholder]=\"content().common.codePlaceholder\"\n [(ngModel)]=\"user.code\"\n >\n <ng-container>\n @switch (true) {\n @case (code.control.hasError(\"required\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n @case (code.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n }\n </ng-container>\n </omni-auth-ui-mat-input>\n\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"confirmForgotPassword\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!sendCode.invalid\"\n [loading]=\"processing()\"\n >{{ content().resetPassword.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n </form>\n}\n", styles: ["", ".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InputComponent, selector: "omni-auth-ui-mat-input", inputs: ["type", "placeholder", "label", "hint"] }, { kind: "component", type: MessageComponent, selector: "omni-auth-ui-mat-message", inputs: ["icon", "type"] }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ResetPasswordComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-reset-password', standalone: true, imports: [
CommonModule,
FormsModule,
InputComponent,
MessageComponent,
MessageComponent,
ButtonComponent,
PrintErrorComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!codeSent) {\n <form #sendCodeForm=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"sendCode()\">\n <div class=\"auth-form-header\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [icon]=\"content().common.icons.back\"\n (click)=\"authRoute.nextStep('login')\"\n >\n {{ content().common.backToSignInLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().resetPassword.sendCodeMessage }}</span>\n </omni-auth-ui-mat-message>\n\n <omni-auth-ui-mat-input\n #email=\"ngModel\"\n name=\"email\"\n required\n type=\"text\"\n [label]=\"content().common.emailLabel\"\n [ngModel]=\"authRoute.currentEmail()\"\n [pattern]=\"emailPattern\"\n [placeholder]=\"content().common.emailPlaceholder\"\n (ngModelChange)=\"user.email = $event\"\n >\n @switch (true) {\n @case (email.control.hasError(\"required\")) {\n <ng-container>{{ content().common.emailErrorRequiredText }}</ng-container>\n }\n @case (email.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.emailErrorPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"forgotPassword\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button [disabled]=\"!!sendCodeForm.invalid\" [loading]=\"processing()\"\n >{{ content().resetPassword.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n </form>\n} @else {\n <form #sendCode=\"ngForm\" class=\"auth-form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"auth-form-header\">\n <omni-auth-ui-mat-button\n type=\"secondary\"\n [icon]=\"content().common.icons.back\"\n (click)=\"authRoute.nextStep('login')\"\n >\n {{ content().common.backToSignInLabel }}\n </omni-auth-ui-mat-button>\n </div>\n\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message class=\"auth-form-hint\" icon=\"email\">\n <span class=\"title\">{{ content().resetPassword.sendCodeMessage }}</span>\n </omni-auth-ui-mat-message>\n\n <omni-auth-ui-mat-input\n #code=\"ngModel\"\n name=\"code\"\n required\n type=\"text\"\n [label]=\"content().common.codeLabel\"\n [placeholder]=\"content().common.codePlaceholder\"\n [(ngModel)]=\"user.code\"\n >\n <ng-container>\n @switch (true) {\n @case (code.control.hasError(\"required\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n @case (code.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.codeErrorRequiredText }}</ng-container>\n }\n }\n </ng-container>\n </omni-auth-ui-mat-input>\n\n <omni-auth-ui-mat-input\n #password=\"ngModel\"\n name=\"password\"\n required\n type=\"password\"\n [class.invalid-password]=\"password.control.hasError('pattern')\"\n [label]=\"content().common.passwordLabel\"\n [pattern]=\"passwordPattern\"\n [placeholder]=\"content().common.passwordPlaceholder\"\n [(ngModel)]=\"user.password\"\n >\n @switch (true) {\n @case (password.control.hasError(\"required\")) {\n <ng-container>{{ content().common.passwordErrorRequiredText }}</ng-container>\n }\n @case (password.control.hasError(\"pattern\")) {\n <ng-container>{{ content().common.passwordPatternText }}</ng-container>\n }\n }\n </omni-auth-ui-mat-input>\n <omni-auth-ui-mat-print-error source=\"confirmForgotPassword\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button\n type=\"primary\"\n [disabled]=\"!!sendCode.invalid\"\n [loading]=\"processing()\"\n >{{ content().resetPassword.submitLabel }}\n </omni-auth-ui-mat-button>\n </div>\n </form>\n}\n", styles: [".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"] }]
}] });
class LoaderComponent {
verticalCenter = input(false, ...(ngDevMode ? [{ debugName: "verticalCenter" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: LoaderComponent, isStandalone: true, selector: "omni-auth-ui-mat-loader", inputs: { verticalCenter: { classPropertyName: "verticalCenter", publicName: "verticalCenter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loader-container backdrop-blur\" [class.vertical-center]=\"verticalCenter()\">\n <mat-spinner class=\"loader\" [diameter]=\"30\" />\n</div>\n", styles: [".loader-container{position:absolute;inset:0;z-index:10;width:100%;height:100%;display:flex;justify-content:center}.loader-container.over-page{position:fixed;inset:0}.loader-container.over-page.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.backdrop-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#5a5a5a0a}.vertical-center{align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-loader', standalone: true, imports: [CommonModule, MatProgressSpinner], template: "<div class=\"loader-container backdrop-blur\" [class.vertical-center]=\"verticalCenter()\">\n <mat-spinner class=\"loader\" [diameter]=\"30\" />\n</div>\n", styles: [".loader-container{position:absolute;inset:0;z-index:10;width:100%;height:100%;display:flex;justify-content:center}.loader-container.over-page{position:fixed;inset:0}.loader-container.over-page.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.backdrop-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#5a5a5a0a}.vertical-center{align-items:center}\n"] }]
}] });
class ReplacePipe {
transform(value, strToReplace, replacementStr) {
if (!value || !strToReplace || !replacementStr) {
return value;
}
return value.replace(new RegExp(strToReplace, 'g'), replacementStr);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: ReplacePipe, isStandalone: true, name: "replace" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ReplacePipe, decorators: [{
type: Pipe,
args: [{ name: 'replace', standalone: true }]
}] });
class AuthenticatedComponent {
authService = inject(OmniAuthService);
content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthenticatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AuthenticatedComponent, isStandalone: true, selector: "omni-auth-ui-mat-authenticated", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (authService.currentUser(); as user) {\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message type=\"info\">\n @if (user?.displayName; as displayName) {\n {{ content().loggedIn.welcomeMessage | replace: '{{displayName}}': displayName }}\n } @else {\n {{ content().loggedIn.welcomeMessageNoDisplayName }}\n }\n </omni-auth-ui-mat-message>\n <omni-auth-ui-mat-print-error source=\"signOut\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button type=\"primary\" (click)=\"authService.signOut()\">Logout</omni-auth-ui-mat-button>\n </div>\n}\n", styles: ["", ".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: MessageComponent, selector: "omni-auth-ui-mat-message", inputs: ["icon", "type"] }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "component", type: PrintErrorComponent, selector: "omni-auth-ui-mat-print-error", inputs: ["source", "content"] }, { kind: "pipe", type: ReplacePipe, name: "replace" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthenticatedComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat-authenticated', standalone: true, imports: [
CommonModule,
MatTabsModule,
MessageComponent,
ButtonComponent,
ReplacePipe,
PrintErrorComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (authService.currentUser(); as user) {\n <div class=\"auth-form-body\">\n <omni-auth-ui-mat-message type=\"info\">\n @if (user?.displayName; as displayName) {\n {{ content().loggedIn.welcomeMessage | replace: '{{displayName}}': displayName }}\n } @else {\n {{ content().loggedIn.welcomeMessageNoDisplayName }}\n }\n </omni-auth-ui-mat-message>\n <omni-auth-ui-mat-print-error source=\"signOut\" [content]=\"content()\" />\n </div>\n\n <div class=\"auth-form-footer\">\n <omni-auth-ui-mat-button type=\"primary\" (click)=\"authService.signOut()\">Logout</omni-auth-ui-mat-button>\n </div>\n}\n", styles: [".auth-form{padding:var(--auth-form-container-padding-horizontal, 0) var(--auth-form-container-padding-vertical, 0px)}.auth-form .link{cursor:pointer;color:var(--auth-link-color, var(--mat-sys-primary))}.auth-form .link:hover{color:var(--auth-link-hover-color, var(--mat-sys-primary-fixed))}.auth-form-header{display:flex;background:var(--auth-form-header-bg);padding:var(--auth-form-header-padding-horizontal, 0) var(--auth-header-padding-vertical, 0px);border-radius:var(--auth-form-header-border-radius, 0)}.auth-form-body{--field-width: var(--auth-form-input-width, 100%);padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px);gap:var(--auth-form-body-gap, var(--auth-vertical-gap, 16px));display:flex;flex-direction:column}.auth-form-hint .description{padding-top:.3px;opacity:60%}.auth-form-footer{display:flex;justify-content:flex-end;gap:var(--auth-form-footer-gap, var(--auth-horizontal-gap, 8px));background:var(--auth-form-footer-bg, transparent);padding:var(--auth-form-footer-padding-horizontal, 16px) var(--auth-footer-padding-vertical, 8px);border-radius:var(--auth-form-footer-border-radius, 4px 4px 0 0)}.auth-form-social{padding:var(--auth-form-body-padding-horizontal, 14px) var(--auth-form-body-padding-vertical, 8px)}\n"] }]
}] });
class AuthComponent {
authService = inject(OmniAuthService);
authRouteService = inject(AuthRouteService);
content = input(defaultContent, ...(ngDevMode ? [{ debugName: "content" }] : []));
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AuthComponent, isStandalone: true, selector: "omni-auth-ui-mat", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"auth-form-container\">\n @if (authService.authState.isLoading()) {\n <omni-auth-ui-mat-loader [verticalCenter]=\"true\"/>\n }\n\n @if (authService.authState.value(); as user) {\n @switch (user.state) {\n @case ('authenticated') {\n <omni-auth-ui-mat-authenticated [content]=\"content()\"/>\n }\n @case ('error') {\n <omni-auth-ui-mat-message type=\"warn\">\n {{ user.error?.getErrorMessage() ?? content().errors.unknown }}\n </omni-auth-ui-mat-message>\n\n <div class=\"message-footer\">\n <omni-auth-ui-mat-button type=\"primary\" (click)=\"authService.signOut()\">Logout</omni-auth-ui-mat-button>\n </div>\n }\n @case ('unauthenticated') {\n @if (authRouteService.currentStep(); as currentStep) {\n @if ([\"login\", \"register\"].includes(currentStep)) {\n <mat-tab-group\n selectedIndex=\"{{ currentStep === 'login' ? 0 : 1 }}\"\n >\n <mat-tab [label]=\"content().signIn.title\">\n <ng-template matTabContent>\n <omni-auth-ui-mat-signin [config]=\"config()?.signIn\" [content]=\"content()\"/>\n </ng-template>\n </mat-tab>\n\n <mat-tab [label]=\"content().signUp.title\">\n <omni-auth-ui-mat-signup [config]=\"config()?.signUp\" [content]=\"content()\">\n <ng-content sign-up-footer select=\"[sign-up-footer]\"/>\n </omni-auth-ui-mat-signup>\n </mat-tab>\n </mat-tab-group>\n }\n\n @if (currentStep === \"confirm_sign_up\") {\n <omni-auth-ui-mat-confirm-signup [content]=\"content()\"/>\n }\n\n @if ([\"reset_password\", \"confirm_reset_password\"].includes(currentStep)) {\n <omni-auth-ui-mat-reset-password [content]=\"content()\"/>\n }\n }\n }\n }\n }\n</div>\n", styles: [".auth-form-container{position:relative;width:var(--auth-container-width, 350px);min-height:var(--auth-container-min-height, 200px)}.message-footer{display:flex;justify-content:flex-end;margin-top:var(--auth-vertical-gap, 16px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1$3.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: SignInComponent, selector: "omni-auth-ui-mat-signin", inputs: ["content", "config"] }, { kind: "component", type: SignUpComponent, selector: "omni-auth-ui-mat-signup", inputs: ["content", "config"], outputs: ["termsAndConditions"] }, { kind: "component", type: ConfirmSignUpComponent, selector: "omni-auth-ui-mat-confirm-signup", inputs: ["content"] }, { kind: "component", type: ResetPasswordComponent, selector: "omni-auth-ui-mat-reset-password", inputs: ["content"] }, { kind: "component", type: MessageComponent, selector: "omni-auth-ui-mat-message", inputs: ["icon", "type"] }, { kind: "component", type: ButtonComponent, selector: "omni-auth-ui-mat-button", inputs: ["type", "icon", "iconOnly", "disabled", "loading"] }, { kind: "component", type: LoaderComponent, selector: "omni-auth-ui-mat-loader", inputs: ["verticalCenter"] }, { kind: "component", type: AuthenticatedComponent, selector: "omni-auth-ui-mat-authenticated", inputs: ["content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthComponent, decorators: [{
type: Component,
args: [{ selector: 'omni-auth-ui-mat', standalone: true, imports: [
CommonModule,
MatTabsModule,
SignInComponent,
SignUpComponent,
ConfirmSignUpComponent,
ResetPasswordComponent,
MessageComponent,
ButtonComponent,
LoaderComponent,
AuthenticatedComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-form-container\">\n @if (authService.authState.isLoading()) {\n <omni-auth-ui-mat-loader [verticalCenter]=\"true\"/>\n }\n\n @if (authService.authState.value(); as user) {\n @switch (user.state) {\n @case ('authenticated') {\n <omni-auth-ui-mat-authenticated [content]=\"content()\"/>\n }\n @case ('error') {\n <omni-auth-ui-mat-message type=\"warn\">\n {{ user.error?.getErrorMessage() ?? content().errors.unknown }}\n </omni-auth-ui-mat-message>\n\n <div class=\"message-footer\">\n <omni-auth-ui-mat-button type=\"primary\" (click)=\"authService.signOut()\">Logout</omni-auth-ui-mat-button>\n </div>\n }\n @case ('unauthenticated') {\n @if (authRouteService.currentStep(); as currentStep) {\n @if ([\"login\", \"register\"].includes(currentStep)) {\n <mat-tab-group\n selectedIndex=\"{{ currentStep === 'login' ? 0 : 1 }}\"\n >\n <mat-tab [label]=\"content().signIn.title\">\n <ng-template matTabContent>\n <omni-auth-ui-mat-signin [config]=\"config()?.signIn\" [content]=\"content()\"/>\n </ng-template>\n </mat-tab>\n\n <mat-tab [label]=\"content().signUp.title\">\n <omni-auth-ui-mat-signup [config]=\"config()?.signUp\" [content]=\"content()\">\n <ng-content sign-up-footer select=\"[sign-up-footer]\"/>\n </omni-auth-ui-mat-signup>\n </mat-tab>\n </mat-tab-group>\n }\n\n @if (currentStep === \"confirm_sign_up\") {\n <omni-auth-ui-mat-confirm-signup [content]=\"content()\"/>\n }\n\n @if ([\"reset_password\", \"confirm_reset_password\"].includes(currentStep)) {\n <omni-auth-ui-mat-reset-password [content]=\"content()\"/>\n }\n }\n }\n }\n }\n</div>\n", styles: [".auth-form-container{position:relative;width:var(--auth-container-width, 350px);min-height:var(--auth-container-min-height, 200px)}.message-footer{display:flex;justify-content:flex-end;margin-top:var(--auth-vertical-gap, 16px)}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AuthComponent, SocialButtonsComponent };
//# sourceMappingURL=ngx-addons-omni-auth-ui-material.mjs.map