@ng-supabase/primeng
Version:
ng-supabase is a component library and helper utilities for integrating Supabase in your angular application.
304 lines (296 loc) • 70.7 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i0 from '@angular/core';
import { input, Component, ChangeDetectionStrategy, EventEmitter, inject, Input, Output, signal, computed, Injectable, makeEnvironmentProviders } from '@angular/core';
import * as i1$4 from 'primeng/menu';
import { MenuModule } from 'primeng/menu';
import * as i1$2 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import * as i4$2 from 'primeng/checkbox';
import { CheckboxModule } from 'primeng/checkbox';
import * as i3$1 from 'primeng/password';
import { PasswordModule } from 'primeng/password';
import * as i2$1 from 'primeng/inputtext';
import { InputTextModule } from 'primeng/inputtext';
import * as i3 from 'primeng/iconfield';
import { IconFieldModule } from 'primeng/iconfield';
import * as i4$1 from 'primeng/inputicon';
import { InputIconModule } from 'primeng/inputicon';
import { LogService, SupabaseConfig, SupabaseService, ResetPasswordComponent as ResetPasswordComponent$1, SignInComponent as SignInComponent$1, SetPasswordComponent as SetPasswordComponent$1, RegisterComponent as RegisterComponent$1, RegisterOrSignInComponent as RegisterOrSignInComponent$1, UserAvatarButtonComponent as UserAvatarButtonComponent$1, ActiveUserAvatarButtonComponent as ActiveUserAvatarButtonComponent$1, InitialsPipe, NotifyService as NotifyService$1 } from '@ng-supabase/core';
import * as i1 from 'primeng/message';
import { MessageModule } from 'primeng/message';
import * as i1$1 from 'primeng/divider';
import { DividerModule } from 'primeng/divider';
import * as i4 from 'primeng/fieldset';
import { FieldsetModule } from 'primeng/fieldset';
import * as i7 from 'primeng/progressspinner';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import * as i6 from 'primeng/inputotp';
import { InputOtpModule } from 'primeng/inputotp';
import * as i1$3 from 'primeng/api';
import { MessageService } from 'primeng/api';
import * as i4$3 from 'primeng/floatlabel';
import { FloatLabelModule } from 'primeng/floatlabel';
import * as i2$2 from 'primeng/selectbutton';
import { SelectButtonModule } from 'primeng/selectbutton';
import * as i1$5 from 'primeng/avatar';
import { AvatarModule } from 'primeng/avatar';
import * as i2$3 from 'primeng/skeleton';
import { SkeletonModule } from 'primeng/skeleton';
import { RouterLink } from '@angular/router';
import { ToastModule } from 'primeng/toast';
// Angular.
class MessagesComponent {
constructor() {
this.messages = input([]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: MessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: MessagesComponent, isStandalone: true, selector: "supabase-messages", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for(message of messages(); track message){\n<p-message\n [severity]=\"message.severity\"\n [closable]=\"true\"\n [icon]=\"message.icon\"\n [text]=\"message.text\"\n>\n</p-message>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;min-width:350px}input{min-width:260px}.flex{display:flex}.flex-column{flex-direction:column}.flex-auto{flex:1 1 auto}.gap-2{gap:.5rem}.items-center{align-items:center}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MessageModule }, { kind: "component", type: i1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: MessagesComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-messages', standalone: true, imports: [MessageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for(message of messages(); track message){\n<p-message\n [severity]=\"message.severity\"\n [closable]=\"true\"\n [icon]=\"message.icon\"\n [text]=\"message.text\"\n>\n</p-message>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;min-width:350px}input{min-width:260px}.flex{display:flex}.flex-column{flex-direction:column}.flex-auto{flex:1 1 auto}.gap-2{gap:.5rem}.items-center{align-items:center}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}\n"] }]
}] });
// Angular.
class SocialsGridComponent {
get hasSocials() {
return this.socialItems.length > 0;
}
get hasNoSocials() {
return this.socialItems.length === 0;
}
constructor() {
this.subtitle = 'or sign in with';
this.errorMessage = new EventEmitter();
this.socialItems = [];
this.log = inject(LogService);
this.config = inject(SupabaseConfig);
this.supabase = inject(SupabaseService);
const { signIn } = inject(SupabaseConfig);
this.socialItems = signIn.socialSignInItems;
}
async signInWithSocial(social) {
const result = this.config.signIn.onSocialSignIn?.(social);
if (result === false) {
return;
}
const { error } = await this.supabase.client.auth.signInWithOAuth({
provider: social,
});
if (error) {
this.log.debug(`Unable to sign in with social '${social}'. ${error.message}`);
this.errorMessage.emit(error.message);
return;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SocialsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: SocialsGridComponent, isStandalone: true, selector: "supabase-socials-grid", inputs: { subtitle: "subtitle" }, outputs: { errorMessage: "errorMessage" }, ngImport: i0, template: "@if(hasSocials){\n<p-divider align=\"center\">\n <span class=\"divider-txt\">{{ subtitle }}</span>\n</p-divider>\n\n<section class=\"grid\">\n @for(social of socialItems; track social){\n <div class=\"col text-center\">\n <p-button\n styleClass=\"w-full\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [label]=\"social.title\"\n (click)=\"signInWithSocial(social.value)\"\n >\n @if(social.icon){\n <img [src]=\"social.icon\" label=\"Logo\" class=\"mr-2 idp-icon\" />\n }\n </p-button>\n </div>\n }\n</section>\n}\n", styles: [".idp-icon{width:18px}.divider-txt{color:#6f7681}.grid{display:flex;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem;margin-top:-.5rem}.col{flex-grow:1;min-width:33%;padding:.5rem}.text-center{text-align:center}.mr-2{margin-right:.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SocialsGridComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-socials-grid', standalone: true, imports: [CommonModule, DividerModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(hasSocials){\n<p-divider align=\"center\">\n <span class=\"divider-txt\">{{ subtitle }}</span>\n</p-divider>\n\n<section class=\"grid\">\n @for(social of socialItems; track social){\n <div class=\"col text-center\">\n <p-button\n styleClass=\"w-full\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [label]=\"social.title\"\n (click)=\"signInWithSocial(social.value)\"\n >\n @if(social.icon){\n <img [src]=\"social.icon\" label=\"Logo\" class=\"mr-2 idp-icon\" />\n }\n </p-button>\n </div>\n }\n</section>\n}\n", styles: [".idp-icon{width:18px}.divider-txt{color:#6f7681}.grid{display:flex;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem;margin-top:-.5rem}.col{flex-grow:1;min-width:33%;padding:.5rem}.text-center{text-align:center}.mr-2{margin-right:.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"] }]
}], ctorParameters: () => [], propDecorators: { subtitle: [{
type: Input
}], errorMessage: [{
type: Output
}] } });
// Angular.
class WaitMessageComponent {
constructor() {
this.mainTitle = `Didn't receive it?`;
this.sendAgainLabel = `send again`;
this.cancelLabel = `cancel`;
this.showSendAgain = true;
this.showCancel = true;
this.subTitle = '';
this.otpMessage = 'Enter the code from your email';
this.loading = false;
this.cancel = new EventEmitter();
this.sendAgain = new EventEmitter();
this.verifyOtp = new EventEmitter();
this.config = inject(SupabaseConfig);
this.otp = '';
}
checkOtpValue(event) {
const digits = (event.value || '').length;
const doOtpCheck = digits === this.config.signIn.otpLength;
if (doOtpCheck) {
this.verifyOtp.emit(event.value);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WaitMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: WaitMessageComponent, isStandalone: true, selector: "supabase-wait-message", inputs: { message: "message", mainTitle: "mainTitle", sendAgainLabel: "sendAgainLabel", cancelLabel: "cancelLabel", showSendAgain: "showSendAgain", showCancel: "showCancel", subTitle: "subTitle", otpMessage: "otpMessage", loading: "loading" }, outputs: { cancel: "cancel", sendAgain: "sendAgain", verifyOtp: "verifyOtp" }, ngImport: i0, template: "@if(message){\n<p-fieldset>\n <ng-template pTemplate=\"header\">\n <div class=\"flex items-center gap-2 px-2\">\n <i [ngClass]=\"message.icon\"></i>\n <span class=\"font-bold\">{{ message.title }}</span>\n </div>\n </ng-template>\n <div class=\"p-3\">\n <p class=\"m-0\" [innerHTML]=\"message.message\"></p>\n\n @if(message.enableOtp){\n <p-divider align=\"center\" type=\"dotted\">\n @if(loading){\n <p-progress-spinner\n ariaLabel=\"loading\"\n [style]=\"{ width: '35px', height: '35px' }\"\n />\n }@else{\n <b class=\"text-500\">Or</b>\n }\n </p-divider>\n\n <div class=\"flex flex-column items-center\">\n <div class=\"flex items-center\">\n <strong class=\"pb-3\">{{ otpMessage }}</strong>\n </div>\n <p-inputotp\n [autofocus]=\"true\"\n [(ngModel)]=\"otp\"\n [length]=\"config.signIn.otpLength\"\n [disabled]=\"loading\"\n [integerOnly]=\"true\"\n (onChange)=\"checkOtpValue($event)\"\n />\n </div>\n }\n\n <p class=\"mt-4 text-right\">\n <small\n >{{ mainTitle }}\n @if(showSendAgain){\n <a href=\"\" (click)=\"sendAgain.emit(); $event.preventDefault()\">{{\n sendAgainLabel\n }}</a>\n } @if(showSendAgain && showCancel){ | } @if (showCancel){\n <a href=\"\" (click)=\"cancel.emit(); $event.preventDefault()\">{{\n cancelLabel\n }}</a>\n }\n </small>\n </p>\n </div>\n</p-fieldset>\n} @if(subTitle){\n<h4 class=\"text-500 text-center\">{{ subTitle }}</h4>\n}\n", styles: [".flex{display:flex}.flex-column{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.m-0{margin:0}.mt-4{margin-top:1rem}.p-3{padding:.75rem}.pb-3{padding-bottom:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.text-right{text-align:right}.text-center{text-align:center}.text-500{color:#6b7280}.font-bold{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i4.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WaitMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-wait-message', standalone: true, imports: [
FormsModule,
CommonModule,
DividerModule,
FieldsetModule,
InputOtpModule,
ProgressSpinnerModule,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(message){\n<p-fieldset>\n <ng-template pTemplate=\"header\">\n <div class=\"flex items-center gap-2 px-2\">\n <i [ngClass]=\"message.icon\"></i>\n <span class=\"font-bold\">{{ message.title }}</span>\n </div>\n </ng-template>\n <div class=\"p-3\">\n <p class=\"m-0\" [innerHTML]=\"message.message\"></p>\n\n @if(message.enableOtp){\n <p-divider align=\"center\" type=\"dotted\">\n @if(loading){\n <p-progress-spinner\n ariaLabel=\"loading\"\n [style]=\"{ width: '35px', height: '35px' }\"\n />\n }@else{\n <b class=\"text-500\">Or</b>\n }\n </p-divider>\n\n <div class=\"flex flex-column items-center\">\n <div class=\"flex items-center\">\n <strong class=\"pb-3\">{{ otpMessage }}</strong>\n </div>\n <p-inputotp\n [autofocus]=\"true\"\n [(ngModel)]=\"otp\"\n [length]=\"config.signIn.otpLength\"\n [disabled]=\"loading\"\n [integerOnly]=\"true\"\n (onChange)=\"checkOtpValue($event)\"\n />\n </div>\n }\n\n <p class=\"mt-4 text-right\">\n <small\n >{{ mainTitle }}\n @if(showSendAgain){\n <a href=\"\" (click)=\"sendAgain.emit(); $event.preventDefault()\">{{\n sendAgainLabel\n }}</a>\n } @if(showSendAgain && showCancel){ | } @if (showCancel){\n <a href=\"\" (click)=\"cancel.emit(); $event.preventDefault()\">{{\n cancelLabel\n }}</a>\n }\n </small>\n </p>\n </div>\n</p-fieldset>\n} @if(subTitle){\n<h4 class=\"text-500 text-center\">{{ subTitle }}</h4>\n}\n", styles: [".flex{display:flex}.flex-column{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.m-0{margin:0}.mt-4{margin-top:1rem}.p-3{padding:.75rem}.pb-3{padding-bottom:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.text-right{text-align:right}.text-center{text-align:center}.text-500{color:#6b7280}.font-bold{font-weight:700}\n"] }]
}], propDecorators: { message: [{
type: Input,
args: [{ required: true }]
}], mainTitle: [{
type: Input
}], sendAgainLabel: [{
type: Input
}], cancelLabel: [{
type: Input
}], showSendAgain: [{
type: Input
}], showCancel: [{
type: Input
}], subTitle: [{
type: Input
}], otpMessage: [{
type: Input
}], loading: [{
type: Input
}], cancel: [{
type: Output
}], sendAgain: [{
type: Output
}], verifyOtp: [{
type: Output
}] } });
// Angular.
class ResetPasswordComponent extends ResetPasswordComponent$1 {
constructor() {
super(...arguments);
this.messages = signal([]);
}
onError(error) {
super.onError(error);
this.messages.set([
{
severity: 'error',
closable: true,
text: error.message,
},
]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ResetPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: ResetPasswordComponent, isStandalone: true, selector: "supabase-reset-password", usesInheritance: true, ngImport: i0, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<!-- Wait -->\n@if(wait()){\n<supabase-wait-message\n [message]=\"wait()\"\n [showCancel]=\"false\"\n subTitle=\"You can close this window\"\n (sendAgain)=\"resetPassword()\"\n></supabase-wait-message>\n\n} @else {\n<!-- Form -->\n<form [formGroup]=\"form\" (ngSubmit)=\"resetPassword()\">\n <section class=\"mt-4\">\n <span class=\"flex flex-column gap-2 p-input-icon-left\">\n <label for=\"email\">Email address</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-envelope\" />\n <input\n id=\"email\"\n type=\"email\"\n pInputText\n class=\"w-full\"\n autocomplete=\"off\"\n formControlName=\"email\"\n (keydown.enter)=\"resetPassword()\"\n />\n </p-iconfield>\n </span>\n </section>\n\n <!-- Action button -->\n <div class=\"w-full mt-4\">\n <p-button\n styleClass=\"w-full\"\n label=\"Reset Password\"\n [disabled]=\"form.invalid || form.disabled\"\n [loading]=\"sendingReset()\"\n (click)=\"resetPassword()\"\n ></p-button>\n </div>\n\n <!-- Error message -->\n <supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n</form>\n}\n", styles: [".flex{display:flex}.flex-column{flex-direction:column}.gap-2{gap:.5rem}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i4$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: MessagesComponent, selector: "supabase-messages", inputs: ["messages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: WaitMessageComponent, selector: "supabase-wait-message", inputs: ["message", "mainTitle", "sendAgainLabel", "cancelLabel", "showSendAgain", "showCancel", "subTitle", "otpMessage", "loading"], outputs: ["cancel", "sendAgain", "verifyOtp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ResetPasswordComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-reset-password', standalone: true, imports: [
CommonModule,
ButtonModule,
InputTextModule,
IconFieldModule,
InputIconModule,
MessagesComponent,
ReactiveFormsModule,
WaitMessageComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<!-- Wait -->\n@if(wait()){\n<supabase-wait-message\n [message]=\"wait()\"\n [showCancel]=\"false\"\n subTitle=\"You can close this window\"\n (sendAgain)=\"resetPassword()\"\n></supabase-wait-message>\n\n} @else {\n<!-- Form -->\n<form [formGroup]=\"form\" (ngSubmit)=\"resetPassword()\">\n <section class=\"mt-4\">\n <span class=\"flex flex-column gap-2 p-input-icon-left\">\n <label for=\"email\">Email address</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-envelope\" />\n <input\n id=\"email\"\n type=\"email\"\n pInputText\n class=\"w-full\"\n autocomplete=\"off\"\n formControlName=\"email\"\n (keydown.enter)=\"resetPassword()\"\n />\n </p-iconfield>\n </span>\n </section>\n\n <!-- Action button -->\n <div class=\"w-full mt-4\">\n <p-button\n styleClass=\"w-full\"\n label=\"Reset Password\"\n [disabled]=\"form.invalid || form.disabled\"\n [loading]=\"sendingReset()\"\n (click)=\"resetPassword()\"\n ></p-button>\n </div>\n\n <!-- Error message -->\n <supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n</form>\n}\n", styles: [".flex{display:flex}.flex-column{flex-direction:column}.gap-2{gap:.5rem}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"] }]
}] });
// Angular.
class LoadingOverlayComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: LoadingOverlayComponent, isStandalone: true, selector: "supabase-loading-overlay", ngImport: i0, template: "<p-progressSpinner></p-progressSpinner>\n<ng-content></ng-content>\n", styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:250;flex-direction:column;background-color:#ffffffe6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-loading-overlay', standalone: true, imports: [CommonModule, ProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-progressSpinner></p-progressSpinner>\n<ng-content></ng-content>\n", styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:250;flex-direction:column;background-color:#ffffffe6}\n"] }]
}] });
// Angular.
let id = 0;
class SignInComponent extends SignInComponent$1 {
constructor() {
super(...arguments);
this.menuItems = [
{
label: 'Sign in with email',
icon: 'pi pi-envelope',
command: () => this.showSignInWithEmail(),
},
];
this.id = `ng-sign-in_${id++}`;
this.messages = computed(() => {
const text = this.errorMessage() || '';
const message = {
severity: 'error',
text,
};
return text ? [message] : [];
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SignInComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: SignInComponent, isStandalone: true, selector: "supabase-sign-in", usesInheritance: true, ngImport: i0, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<!-- Loading overlay. -->\n@if(signingIn | async){\n<supabase-loading-overlay>\n <h4>Logging in. Please wait...</h4>\n</supabase-loading-overlay>\n}\n\n<!-- Wait -->\n@if(wait()){\n<supabase-wait-message\n [message]=\"wait()\"\n [showCancel]=\"true\"\n subTitle=\"You can close this window\"\n [loading]=\"verifyingOtp()\"\n (sendAgain)=\"signIn()\"\n (verifyOtp)=\"verifyOtp($event)\"\n (cancel)=\"wait.set(null)\"\n></supabase-wait-message>\n} @else if(forgotPassword) {\n<supabase-reset-password\n [email]=\"form.value.email || ''\"\n></supabase-reset-password>\n} @else {\n<!-- Sign in form -->\n<form [formGroup]=\"form\" (ngSubmit)=\"signIn()\">\n <section class=\"mt-4\">\n <span class=\"flex flex-column gap-2 p-input-icon-left\">\n <label [for]=\"id + '_email'\">Email address</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-envelope\" />\n <input\n [id]=\"id + '_email'\"\n type=\"email\"\n pInputText\n class=\"w-full\"\n autocomplete=\"off\"\n formControlName=\"email\"\n (keydown.enter)=\"signIn()\"\n />\n </p-iconfield>\n </span>\n\n @if(form.value.usePassword){\n <span class=\"flex flex-column gap-2 p-input-icon-left mt-2\">\n <label for=\"id + '_pass'\">Password</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-lock\" />\n <input\n id=\"id + '_pass'\"\n type=\"password\"\n class=\"w-full\"\n autocomplete=\"off\"\n pInputText\n formControlName=\"password\"\n (keydown.enter)=\"signIn()\"\n />\n </p-iconfield>\n </span>\n }\n </section>\n\n <section class=\"flex mt-4\">\n <span class=\"flex items-center\">\n <p-checkbox\n [inputId]=\"id + '_rem'\"\n formControlName=\"rememberMe\"\n [binary]=\"true\"\n />\n <label [for]=\"id + '_rem'\" class=\"ml-2\">Remember me</label>\n </span>\n\n <span class=\"flex-auto\"></span>\n\n <div class=\"flex items-center\">\n @if(form.value.usePassword){\n <a href=\"\" (click)=\"showForgotPassword($event)\">Forgot password?</a>\n <p-button\n icon=\"pi pi-ellipsis-v\"\n severity=\"secondary\"\n [rounded]=\"true\"\n [text]=\"true\"\n (click)=\"menu.toggle($event)\"\n ></p-button>\n\n <p-menu #menu appendTo=\"body\" [model]=\"menuItems\" [popup]=\"true\"></p-menu>\n }@else{\n <a href=\"\" (click)=\"showSignInWithPassword($event)\"\n >Sign in with password</a\n >\n }\n </div>\n </section>\n\n <!-- Sign in button -->\n <div class=\"w-full mt-4\">\n <p-button\n styleClass=\"w-full\"\n [label]=\"form.value.usePassword ? 'Sign In' : 'Continue'\"\n [disabled]=\"form.invalid || form.disabled\"\n (click)=\"signIn()\"\n ></p-button>\n </div>\n\n <!-- Error message -->\n <supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n\n <!-- Socials -->\n <supabase-socials-grid\n (errorMessage)=\"errorMessage.set($event)\"\n ></supabase-socials-grid>\n</form>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;min-width:350px}input{min-width:260px}.flex{display:flex}.flex-column{flex-direction:column}.flex-auto{flex:1 1 auto}.gap-2{gap:.5rem}.items-center{align-items:center}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MenuModule }, { kind: "component", type: i1$4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i4$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: MessagesComponent, selector: "supabase-messages", inputs: ["messages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: WaitMessageComponent, selector: "supabase-wait-message", inputs: ["message", "mainTitle", "sendAgainLabel", "cancelLabel", "showSendAgain", "showCancel", "subTitle", "otpMessage", "loading"], outputs: ["cancel", "sendAgain", "verifyOtp"] }, { kind: "component", type: SocialsGridComponent, selector: "supabase-socials-grid", inputs: ["subtitle"], outputs: ["errorMessage"] }, { kind: "component", type: ResetPasswordComponent, selector: "supabase-reset-password" }, { kind: "component", type: LoadingOverlayComponent, selector: "supabase-loading-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SignInComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-sign-in', standalone: true, imports: [
MenuModule,
CommonModule,
ButtonModule,
CheckboxModule,
PasswordModule,
IconFieldModule,
InputIconModule,
InputTextModule,
MessagesComponent,
ReactiveFormsModule,
WaitMessageComponent,
SocialsGridComponent,
ResetPasswordComponent,
LoadingOverlayComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<!-- Loading overlay. -->\n@if(signingIn | async){\n<supabase-loading-overlay>\n <h4>Logging in. Please wait...</h4>\n</supabase-loading-overlay>\n}\n\n<!-- Wait -->\n@if(wait()){\n<supabase-wait-message\n [message]=\"wait()\"\n [showCancel]=\"true\"\n subTitle=\"You can close this window\"\n [loading]=\"verifyingOtp()\"\n (sendAgain)=\"signIn()\"\n (verifyOtp)=\"verifyOtp($event)\"\n (cancel)=\"wait.set(null)\"\n></supabase-wait-message>\n} @else if(forgotPassword) {\n<supabase-reset-password\n [email]=\"form.value.email || ''\"\n></supabase-reset-password>\n} @else {\n<!-- Sign in form -->\n<form [formGroup]=\"form\" (ngSubmit)=\"signIn()\">\n <section class=\"mt-4\">\n <span class=\"flex flex-column gap-2 p-input-icon-left\">\n <label [for]=\"id + '_email'\">Email address</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-envelope\" />\n <input\n [id]=\"id + '_email'\"\n type=\"email\"\n pInputText\n class=\"w-full\"\n autocomplete=\"off\"\n formControlName=\"email\"\n (keydown.enter)=\"signIn()\"\n />\n </p-iconfield>\n </span>\n\n @if(form.value.usePassword){\n <span class=\"flex flex-column gap-2 p-input-icon-left mt-2\">\n <label for=\"id + '_pass'\">Password</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-lock\" />\n <input\n id=\"id + '_pass'\"\n type=\"password\"\n class=\"w-full\"\n autocomplete=\"off\"\n pInputText\n formControlName=\"password\"\n (keydown.enter)=\"signIn()\"\n />\n </p-iconfield>\n </span>\n }\n </section>\n\n <section class=\"flex mt-4\">\n <span class=\"flex items-center\">\n <p-checkbox\n [inputId]=\"id + '_rem'\"\n formControlName=\"rememberMe\"\n [binary]=\"true\"\n />\n <label [for]=\"id + '_rem'\" class=\"ml-2\">Remember me</label>\n </span>\n\n <span class=\"flex-auto\"></span>\n\n <div class=\"flex items-center\">\n @if(form.value.usePassword){\n <a href=\"\" (click)=\"showForgotPassword($event)\">Forgot password?</a>\n <p-button\n icon=\"pi pi-ellipsis-v\"\n severity=\"secondary\"\n [rounded]=\"true\"\n [text]=\"true\"\n (click)=\"menu.toggle($event)\"\n ></p-button>\n\n <p-menu #menu appendTo=\"body\" [model]=\"menuItems\" [popup]=\"true\"></p-menu>\n }@else{\n <a href=\"\" (click)=\"showSignInWithPassword($event)\"\n >Sign in with password</a\n >\n }\n </div>\n </section>\n\n <!-- Sign in button -->\n <div class=\"w-full mt-4\">\n <p-button\n styleClass=\"w-full\"\n [label]=\"form.value.usePassword ? 'Sign In' : 'Continue'\"\n [disabled]=\"form.invalid || form.disabled\"\n (click)=\"signIn()\"\n ></p-button>\n </div>\n\n <!-- Error message -->\n <supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n\n <!-- Socials -->\n <supabase-socials-grid\n (errorMessage)=\"errorMessage.set($event)\"\n ></supabase-socials-grid>\n</form>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;min-width:350px}input{min-width:260px}.flex{display:flex}.flex-column{flex-direction:column}.flex-auto{flex:1 1 auto}.gap-2{gap:.5rem}.items-center{align-items:center}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"] }]
}] });
// Angular.
class SetPasswordComponent extends SetPasswordComponent$1 {
constructor() {
super(...arguments);
this.messages = signal([]);
}
onError(error) {
super.onError(error);
this.messages.set([
{
severity: 'error',
closable: true,
text: error.message,
},
]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SetPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: SetPasswordComponent, isStandalone: true, selector: "supabase-set-password", usesInheritance: true, ngImport: i0, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<form\n class=\"mt-4 flex\"\n [formGroup]=\"form\"\n (ngSubmit)=\"submit()\"\n (keydown.enter)=\"submit()\"\n>\n <p-floatlabel>\n <p-password\n formControlName=\"password\"\n [feedback]=\"true\"\n [toggleMask]=\"true\"\n ></p-password>\n <label for=\"password\">New password</label>\n </p-floatlabel>\n\n @if(confirmPassword){\n <p-floatlabel class=\"ml-3\">\n <p-password\n formControlName=\"confirm\"\n [feedback]=\"false\"\n [toggleMask]=\"true\"\n ></p-password>\n <label for=\"password\">Confirm new password</label>\n </p-floatlabel>\n } @else {\n <p-button\n label=\"Set password\"\n styleClass=\"ml-3\"\n [disabled]=\"form.invalid\"\n (click)=\"submit()\"\n ></p-button>\n }\n</form>\n\n<supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n\n<!-- Bottom. -->\n@if(confirmPassword){\n<p-divider align=\"center\">\n @if(confirmMisMatch()){\n <span class=\"text-invalid\">\n <i class=\"pi pi-exclamation-triangle\"></i>\n Passwords do not match\n </span>\n }\n</p-divider>\n\n<p-button\n styleClass=\"w-full\"\n icon=\"pi pi-check\"\n [label]=\"saving() ? savingLabel : saveLabel\"\n [disabled]=\"form.invalid\"\n [loading]=\"saving()\"\n (click)=\"submit()\"\n></p-button>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative}p-message{margin-top:20px}.text-invalid{color:var(--p-floatlabel-invalid-color)}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$1.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i4$3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: MessagesComponent, selector: "supabase-messages", inputs: ["messages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SetPasswordComponent, decorators: [{
type: Component,
args: [{ selector: 'supabase-set-password', standalone: true, imports: [
CommonModule,
ButtonModule,
DividerModule,
PasswordModule,
FloatLabelModule,
MessagesComponent,
ReactiveFormsModule,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<form\n class=\"mt-4 flex\"\n [formGroup]=\"form\"\n (ngSubmit)=\"submit()\"\n (keydown.enter)=\"submit()\"\n>\n <p-floatlabel>\n <p-password\n formControlName=\"password\"\n [feedback]=\"true\"\n [toggleMask]=\"true\"\n ></p-password>\n <label for=\"password\">New password</label>\n </p-floatlabel>\n\n @if(confirmPassword){\n <p-floatlabel class=\"ml-3\">\n <p-password\n formControlName=\"confirm\"\n [feedback]=\"false\"\n [toggleMask]=\"true\"\n ></p-password>\n <label for=\"password\">Confirm new password</label>\n </p-floatlabel>\n } @else {\n <p-button\n label=\"Set password\"\n styleClass=\"ml-3\"\n [disabled]=\"form.invalid\"\n (click)=\"submit()\"\n ></p-button>\n }\n</form>\n\n<supabase-messages class=\"mt-4\" [messages]=\"messages()\"></supabase-messages>\n\n<!-- Bottom. -->\n@if(confirmPassword){\n<p-divider align=\"center\">\n @if(confirmMisMatch()){\n <span class=\"text-invalid\">\n <i class=\"pi pi-exclamation-triangle\"></i>\n Passwords do not match\n </span>\n }\n</p-divider>\n\n<p-button\n styleClass=\"w-full\"\n icon=\"pi pi-check\"\n [label]=\"saving() ? savingLabel : saveLabel\"\n [disabled]=\"form.invalid\"\n [loading]=\"saving()\"\n (click)=\"submit()\"\n></p-button>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative}p-message{margin-top:20px}.text-invalid{color:var(--p-floatlabel-invalid-color)}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"] }]
}] });
// Angular.
class RegisterComponent extends RegisterComponent$1 {
constructor() {
super(...arguments);
this.messages = signal([]);
}
onError(error) {
super.onError(error);
const detail = error?.message || error;
this.messages.set([
{
severity: 'error',
closable: true,
text: detail,
},
]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RegisterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: RegisterComponent, isStandalone: true, selector: "supabase-register", usesInheritance: true, ngImport: i0, template: "@if(title){\n<h1>{{ title }}</h1>\n}\n\n<!-- Wait -->\n@if(wait()){\n<supabase-wait-message\n [message]=\"wait()\"\n [showCancel]=\"false\"\n subTitle=\"You can close this window\"\n [loading]=\"verifyingOtp()\"\n (sendAgain)=\"register()\"\n (verifyOtp)=\"verifyOtp($event)\"\n></supabase-wait-message>\n} @else {\n<!-- Form -->\n<form [formGroup]=\"form\" (ngSubmit)=\"register()\">\n <section class=\"mt-4\">\n <span class=\"flex flex-column gap-2 p-input-icon-left\">\n <label for=\"email\">Email address</label>\n\n <p-iconfield iconPosition=\"left\">\n <p-inputicon styleClass=\"pi pi-envelope\" />\n <input\n id=\"email\"\n type=\"email\"\n pInputText\n class=\"w-full\"\n autocomplete=\"off\"\n formControlName=\"email\"\n (keydown.enter)=\"register()\"\n />\n </p-iconfield>\n </span>\n </section>\n\n @if(config.register.metadata.length){\n <ng-container formGroupName=\"metadata\">\n @for(meta of config.register.metadata; track $index){\n <section class=\"mt-2\">\n <div class=\"flex flex-column gap-2\">\n <label [for]=\"'user-meta-' + meta.field\">{{ meta.label }}</label>\n <input\n pInputText\n [id]=\"'user-meta-' + meta.field\"\n [type]=\"meta.type || 'text'\"\n [formControlName]=\"meta.field\"\n />\n </div>\n </section>\n }\n </ng-container>\n }\n\n <!-- Action button -->\n <div class=\"w-full mt-4\">\n <p-button\n styleClass=\"w-full\"\n label=\"Sign up\"\n [disabled]=\"form.invalid || form.disabled\"\n [loading]=\"working()\"\n (click)=\"register()\"\n ></p-button>\n </div>\n\n <!-- Error message -->\n <supabase-messages [messages]=\"messages()\"></supabase-messages>\n\n <!-- Socials -->\n <supabase-socials-grid\n subtitle=\"or sign up with\"\n (errorMessage)=\"onError($event)\"\n ></supabase-socials-grid>\n</form>\n}\n", styles: [".flex{display:flex}.flex-column{flex-direction:column}.gap-2{gap:.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1.5rem}.w-full{width:100%}:host ::ng-deep .w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "co