@forgeroute/ui 0.4.4 → 0.4.6

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -416,6 +416,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.doc = inject(DOCUMENT);
 		this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 		this.host = inject(ElementRef);
+		this.mountOnly = input(false, ...ngDevMode ? [{ debugName: "mountOnly" }] : /* istanbul ignore next */ []);
 		this.mode = input("payment", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
 		this.publishableKey = input(null, ...ngDevMode ? [{ debugName: "publishableKey" }] : /* istanbul ignore next */ []);
 		this.clientSecret = input(null, ...ngDevMode ? [{ debugName: "clientSecret" }] : /* istanbul ignore next */ []);
@@ -461,6 +462,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.errorMessages = input(null, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
 		this.loadErrorMessage = input("Failed to load the payment form. Please try again.", ...ngDevMode ? [{ debugName: "loadErrorMessage" }] : /* istanbul ignore next */ []);
 		this.a11yMessages = input(null, ...ngDevMode ? [{ debugName: "a11yMessages" }] : /* istanbul ignore next */ []);
+		this.stripeReady = output();
 		this.ready = output();
 		this.paymentMethodTypeChange = output();
 		this.elementChange = output();
@@ -477,7 +479,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
 		this.errorId = `ui-stripe-error-${nextId++}`;
 		this.mountRef = viewChild("mount", ...ngDevMode ? [{ debugName: "mountRef" }] : /* istanbul ignore next */ []);
-		this.mountHidden = computed(() => this.loading() || this.pending() || !!this.loadErrorText(), ...ngDevMode ? [{ debugName: "mountHidden" }] : /* istanbul ignore next */ []);
+		this.mountHidden = computed(() => !this.mountOnly() && (this.loading() || this.pending() || !!this.loadErrorText()), ...ngDevMode ? [{ debugName: "mountHidden" }] : /* istanbul ignore next */ []);
 		this.achNoticeVisible = computed(() => this.showAchNotice() && this.selectedType() === "us_bank_account", ...ngDevMode ? [{ debugName: "achNoticeVisible" }] : /* istanbul ignore next */ []);
 		this.effectiveSubmitLabel = computed(() => this.submitLabel() || (this.mode() === "setup" ? "Save payment method" : "Pay"), ...ngDevMode ? [{ debugName: "effectiveSubmitLabel" }] : /* istanbul ignore next */ []);
 		this.submitDisabled = computed(() => this.disabled() || this.loading() || this.pending() || !this.isReady() || !!this.loadErrorText(), ...ngDevMode ? [{ debugName: "submitDisabled" }] : /* istanbul ignore next */ []);
@@ -566,7 +568,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		effect(() => {
 			const amount = this.deferred()?.amount;
 			untracked(() => {
-				if (amount !== void 0 && this.lastAmount !== void 0 && amount !== this.lastAmount && this.elements?.update) this.elements.update({ amount });
+				if (!this.mountOnly() && amount !== void 0 && this.lastAmount !== void 0 && amount !== this.lastAmount && this.elements?.update) this.elements.update({ amount });
 				this.lastAmount = amount;
 			});
 		});
@@ -888,9 +890,12 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.lastType = null;
 		this.selectedType.set(null);
 		this.complete.set(false);
-		if (element) try {
-			element.destroy();
-		} catch {}
+		if (element) {
+			try {
+				element.destroy();
+			} catch {}
+			if (!this.destroyed) this.stripeReady.emit(null);
+		}
 	}
 	loadFailed(message, stripeMessage) {
 		this.loading.set(false);
@@ -936,7 +941,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 			const elementOptions = { ...elementConfig };
 			const defaultValues = this.defaultValues();
 			if (defaultValues) elementOptions["defaultValues"] = defaultValues;
-			if (this.disabled()) elementOptions["readOnly"] = true;
+			if (this.disabled() && !this.mountOnly()) elementOptions["readOnly"] = true;
 			this.appliedDefaultValues = JSON.stringify(defaultValues ?? null);
 			this.appliedDisabled = this.disabled();
 			const element = elements.create("payment", elementOptions);
@@ -949,8 +954,10 @@ var StripePaymentComponent = class StripePaymentComponent {
 				if (generation !== this.generation) return;
 				this.loading.set(false);
 				this.isReady.set(true);
-				this.applyDefaultValues(this.defaultValues());
-				this.applyDisabled(this.disabled());
+				if (!this.mountOnly()) {
+					this.applyDefaultValues(this.defaultValues());
+					this.applyDisabled(this.disabled());
+				}
 				this.ready.emit();
 			});
 			element.on("loaderror", (event) => {
@@ -959,6 +966,11 @@ var StripePaymentComponent = class StripePaymentComponent {
 				this.loadFailed(message, event?.error?.message ?? "");
 			});
 			element.mount(container);
+			this.stripeReady.emit({
+				stripe: this.stripe,
+				elements,
+				paymentElement: element
+			});
 		} catch (err) {
 			if (generation !== this.generation) return;
 			this.loadFailed(messageOfThrown(err, MSG_LOAD_FAILED), messageOfThrown(err, ""));
@@ -966,12 +978,12 @@ var StripePaymentComponent = class StripePaymentComponent {
 	}
 	applyDefaultValues(defaultValues) {
 		const signature = JSON.stringify(defaultValues ?? null);
-		if (!this.element?.update || !this.isReady() || signature === this.appliedDefaultValues) return;
+		if (this.mountOnly() || !this.element?.update || !this.isReady() || signature === this.appliedDefaultValues) return;
 		this.appliedDefaultValues = signature;
 		this.element.update({ defaultValues: defaultValues ?? {} });
 	}
 	applyDisabled(disabled) {
-		if (!this.element?.update || !this.isReady() || disabled === this.appliedDisabled) return;
+		if (this.mountOnly() || !this.element?.update || !this.isReady() || disabled === this.appliedDisabled) return;
 		this.appliedDisabled = disabled;
 		this.element.update({ readOnly: disabled });
 	}
@@ -1007,6 +1019,13 @@ var StripePaymentComponent = class StripePaymentComponent {
 			isStandalone: true,
 			selector: "ui-stripe-payment",
 			inputs: {
+				mountOnly: {
+					classPropertyName: "mountOnly",
+					publicName: "mountOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				mode: {
 					classPropertyName: "mode",
 					publicName: "mode",
@@ -1324,6 +1343,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 				}
 			},
 			outputs: {
+				stripeReady: "stripeReady",
 				ready: "ready",
 				paymentMethodTypeChange: "paymentMethodTypeChange",
 				elementChange: "elementChange",
@@ -1331,7 +1351,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 				failed: "failed",
 				loadError: "loadError"
 			},
-			host: { properties: { "attr.aria-busy": "loading() || submitting() ? \"true\" : null" } },
+			host: { properties: { "attr.aria-busy": "!mountOnly() && (loading() || submitting()) ? \"true\" : null" } },
 			viewQueries: [{
 				propertyName: "mountRef",
 				first: true,
@@ -1342,26 +1362,28 @@ var StripePaymentComponent = class StripePaymentComponent {
 			ngImport: i0,
 			template: `
     <div class="sp">
-      <div class="sp-sr" role="status" aria-live="polite" data-testid="stripe-status">{{ statusText() }}</div>
-      @if (loading() || pending()) {
+      @if (!mountOnly() || a11yMessages()) {
+        <div class="sp-sr" role="status" aria-live="polite" data-testid="stripe-status">{{ statusText() }}</div>
+      }
+      @if (!mountOnly() && (loading() || pending())) {
         <div class="sp-skeleton" data-testid="stripe-skeleton" aria-hidden="true">
           <ui-skeleton [height]="44" [mb]="10" />
           <ui-skeleton [height]="44" [mb]="10" />
           <ui-skeleton [height]="44" width="60%" />
         </div>
       }
-      @if (loadErrorText(); as text) {
+      @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
       <div #mount class="sp-mount" [attr.id]="mountId() || null" [class]="mountClass()" [class.sp-mount--hidden]="mountHidden()" [attr.aria-hidden]="mountHidden() ? 'true' : null" [attr.inert]="mountHidden() ? '' : null"
-        role="group" [attr.aria-label]="label()" data-testid="stripe-mount"></div>
-      @if (achNoticeVisible()) {
+        [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
+      @if (!mountOnly() && achNoticeVisible()) {
         <div class="sp-block" [attr.data-testid]="achNoticeTestId()"><ui-alert variant="info">{{ achNotice() }}</ui-alert></div>
       }
-      @if (errorText(); as text) {
+      @if (!mountOnly() && errorText(); as text) {
         <div class="sp-block" [id]="errorId" data-testid="stripe-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
-      @if (showSubmit()) {
+      @if (!mountOnly() && showSubmit()) {
         <div class="sp-actions">
           <ui-button variant="primary" type="button" [loading]="submitting()" [disabled]="submitDisabled()" [ariaDescribedBy]="errorText() ? errorId : undefined"
             data-testid="stripe-submit" (click)="confirm()">{{ effectiveSubmitLabel() }}</ui-button>
@@ -1393,6 +1415,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -1444,29 +1467,31 @@ i0.ɵɵngDeclareClassMetadata({
 				ButtonComponent,
 				SkeletonComponent
 			],
-			host: { "[attr.aria-busy]": "loading() || submitting() ? \"true\" : null" },
+			host: { "[attr.aria-busy]": "!mountOnly() && (loading() || submitting()) ? \"true\" : null" },
 			template: `
     <div class="sp">
-      <div class="sp-sr" role="status" aria-live="polite" data-testid="stripe-status">{{ statusText() }}</div>
-      @if (loading() || pending()) {
+      @if (!mountOnly() || a11yMessages()) {
+        <div class="sp-sr" role="status" aria-live="polite" data-testid="stripe-status">{{ statusText() }}</div>
+      }
+      @if (!mountOnly() && (loading() || pending())) {
         <div class="sp-skeleton" data-testid="stripe-skeleton" aria-hidden="true">
           <ui-skeleton [height]="44" [mb]="10" />
           <ui-skeleton [height]="44" [mb]="10" />
           <ui-skeleton [height]="44" width="60%" />
         </div>
       }
-      @if (loadErrorText(); as text) {
+      @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
       <div #mount class="sp-mount" [attr.id]="mountId() || null" [class]="mountClass()" [class.sp-mount--hidden]="mountHidden()" [attr.aria-hidden]="mountHidden() ? 'true' : null" [attr.inert]="mountHidden() ? '' : null"
-        role="group" [attr.aria-label]="label()" data-testid="stripe-mount"></div>
-      @if (achNoticeVisible()) {
+        [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
+      @if (!mountOnly() && achNoticeVisible()) {
         <div class="sp-block" [attr.data-testid]="achNoticeTestId()"><ui-alert variant="info">{{ achNotice() }}</ui-alert></div>
       }
-      @if (errorText(); as text) {
+      @if (!mountOnly() && errorText(); as text) {
         <div class="sp-block" [id]="errorId" data-testid="stripe-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
-      @if (showSubmit()) {
+      @if (!mountOnly() && showSubmit()) {
         <div class="sp-actions">
           <ui-button variant="primary" type="button" [loading]="submitting()" [disabled]="submitDisabled()" [ariaDescribedBy]="errorText() ? errorId : undefined"
             data-testid="stripe-submit" (click)="confirm()">{{ effectiveSubmitLabel() }}</ui-button>
@@ -1479,6 +1504,14 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
+		mountOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mountOnly",
+				required: false
+			}]
+		}],
 		mode: [{
 			type: i0.Input,
 			args: [{
@@ -1839,6 +1872,10 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		stripeReady: [{
+			type: i0.Output,
+			args: ["stripeReady"]
+		}],
 		ready: [{
 			type: i0.Output,
 			args: ["ready"]
@@ -2363,6 +2400,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -2402,7 +2440,10 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"title",
 						"description",
 						"maxWidth",
-						"bodyOverflow"
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable"
 					],
 					outputs: ["close"]
 				},
@@ -2424,6 +2465,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"label",
 						"ariaLabel",
 						"placeholder",
+						"prefix",
 						"type",
 						"maxlength",
 						"required",
@@ -2438,6 +2480,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"maxDecimals",
 						"step",
 						"valueType",
+						"formatter",
 						"showErrors",
 						"disabled"
 					],