@forgeroute/ui 0.4.45 → 0.4.47

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, ViewEncapsulation, afterNextRender, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { AlertComponent, BadgeComponent, ButtonComponent, DetailCardComponent, FormRowComponent, FormSectionComponent, ModalComponent, SkeletonComponent, StackComponent, TextComponent, TextInputComponent } from "@forgeroute/ui";
 import * as i1 from "@angular/forms";
@@ -3023,6 +3023,8 @@ function stripeConnectNotice(outcome) {
 var StripeConnectComponent = class StripeConnectComponent {
 	constructor() {
 		this.destroyRef = inject(DestroyRef);
+		this.injector = inject(Injector);
+		this.host = inject(ElementRef);
 		this.createAccount = input(null, ...ngDevMode ? [{ debugName: "createAccount" }] : /* istanbul ignore next */ []);
 		this.getStatus = input(null, ...ngDevMode ? [{ debugName: "getStatus" }] : /* istanbul ignore next */ []);
 		this.accountId = model(null, ...ngDevMode ? [{ debugName: "accountId" }] : /* istanbul ignore next */ []);
@@ -3041,6 +3043,19 @@ var StripeConnectComponent = class StripeConnectComponent {
 		this.loading = model(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 		this.navigateTab = input(null, ...ngDevMode ? [{ debugName: "navigateTab" }] : /* istanbul ignore next */ []);
 		this.visible = computed(() => !!this.accountId() || this.showWhenNoAccount(), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+		this.state = computed(() => !this.accountId() ? "none" : this.complete() ? "complete" : this.detailsSubmitted() ? "verifying" : "incomplete", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.liveText = computed(() => {
+			if (!this.visible()) return "";
+			const text = {
+				none: "Stripe account not connected.",
+				incomplete: "Account setup incomplete.",
+				verifying: "Stripe is verifying your account.",
+				complete: "Account setup complete."
+			}[this.state()];
+			return this.loading() ? `${text} Loading.` : text;
+		}, ...ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []);
+		this.acted = false;
+		this.lastState = this.state();
 		this.flow = new StripeConnectFlow({
 			createAccount: () => this.createAccount(),
 			getStatus: () => this.getStatus(),
@@ -3055,6 +3070,15 @@ var StripeConnectComponent = class StripeConnectComponent {
 			navigate: (url) => this.navigateCurrentTab(url),
 			destroyRef: this.destroyRef
 		});
+		effect(() => {
+			const state = this.state();
+			if (this.loading()) return;
+			const changed = state !== this.lastState;
+			this.lastState = state;
+			const focusIt = changed && this.acted && this.visible();
+			this.acted = false;
+			if (focusIt) afterNextRender(() => this.host.nativeElement.querySelector(".sc-state")?.focus(), { injector: this.injector });
+		});
 		if (typeof document !== "undefined") {
 			const onVisible = () => {
 				if (document.visibilityState !== "visible" || !this.flow.tabOpened || !this.refreshOnReturn() || this.loading()) return;
@@ -3066,13 +3090,22 @@ var StripeConnectComponent = class StripeConnectComponent {
 		}
 	}
 	start() {
+		const run = this.canRun(this.createAccount());
 		this.flow.start();
+		this.acted ||= run;
 	}
 	check() {
+		const run = this.canRun(this.getStatus());
 		this.flow.check();
+		this.acted ||= run;
 	}
 	resume() {
+		const run = this.canRun(this.getStatus());
 		this.flow.resume();
+		this.acted ||= run;
+	}
+	canRun(call) {
+		return !!call && !this.loading() && !this.disabled();
 	}
 	openDashboard() {
 		window.open(this.dashboardUrl(), "_blank", "noopener,noreferrer");
@@ -3222,6 +3255,8 @@ var StripeConnectComponent = class StripeConnectComponent {
 			},
 			ngImport: i0,
 			template: `
+    <!-- Persistent live region: present before the state changes, so every new state is announced (and "Loading" while a request runs). -->
+    <div class="sc-sr" role="status" aria-live="polite" aria-atomic="true" data-testid="connect-live">{{ liveText() }}</div>
     @if (visible()) {
       @if (bare()) {
         <ng-container *ngTemplateOutlet="body" />
@@ -3234,42 +3269,42 @@ var StripeConnectComponent = class StripeConnectComponent {
 
     <ng-template #body>
       @if (!accountId()) {
-        <ui-stack gap="sm" data-testid="connect-status-none">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-none" [attr.aria-busy]="loading() ? 'true' : null">
           <strong class="sc-title">{{ startTitle() }}</strong>
           <ui-text size="sm" [text]="startText()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="loading() || disabled()" (click)="start()">{{ loading() ? 'Loading...' : startLabel() }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">{{ startLabel() }}, opens in a new tab, busy</span>} @else { {{ startLabel() }}<span class="sc-sr">, opens in a new tab</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (complete()) {
-        <ui-stack gap="sm" data-testid="connect-status-complete">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-complete">
           <strong class="sc-title">Account setup complete</strong>
           <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard</ui-button>
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard<span class="sc-sr">, opens in a new tab</span></ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (detailsSubmitted()) {
-        <ui-stack gap="sm" data-testid="connect-status-verifying">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-verifying" [attr.aria-busy]="loading() ? 'true' : null">
           <strong class="sc-title">Stripe is verifying your account</strong>
           <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="loading() || disabled()" (click)="check()">{{ loading() ? 'Checking...' : 'Check Status' }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">Checking...</span><span class="sc-sr">Check Status, busy</span>} @else {Check Status}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else {
-        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-incomplete" [attr.aria-busy]="loading() ? 'true' : null">
           <span class="sc-badge"><ui-badge label="Account setup incomplete" variant="red" data-testid="connect-incomplete-badge" /></span>
           <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="loading() || disabled()" (click)="resume()">{{ loading() ? 'Loading...' : 'Complete Setup' }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">Complete Setup, opens in a new tab, busy</span>} @else {Complete Setup<span class="sc-sr">, opens in a new tab</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       }
     </ng-template>
   `,
 			isInline: true,
-			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-badge{display:flex}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}\n"],
+			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-badge{display:flex}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}ui-stripe-connect .sc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -3409,6 +3444,8 @@ i0.ɵɵngDeclareClassMetadata({
 				TextComponent
 			],
 			template: `
+    <!-- Persistent live region: present before the state changes, so every new state is announced (and "Loading" while a request runs). -->
+    <div class="sc-sr" role="status" aria-live="polite" aria-atomic="true" data-testid="connect-live">{{ liveText() }}</div>
     @if (visible()) {
       @if (bare()) {
         <ng-container *ngTemplateOutlet="body" />
@@ -3421,42 +3458,42 @@ i0.ɵɵngDeclareClassMetadata({
 
     <ng-template #body>
       @if (!accountId()) {
-        <ui-stack gap="sm" data-testid="connect-status-none">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-none" [attr.aria-busy]="loading() ? 'true' : null">
           <strong class="sc-title">{{ startTitle() }}</strong>
           <ui-text size="sm" [text]="startText()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="loading() || disabled()" (click)="start()">{{ loading() ? 'Loading...' : startLabel() }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">{{ startLabel() }}, opens in a new tab, busy</span>} @else { {{ startLabel() }}<span class="sc-sr">, opens in a new tab</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (complete()) {
-        <ui-stack gap="sm" data-testid="connect-status-complete">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-complete">
           <strong class="sc-title">Account setup complete</strong>
           <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard</ui-button>
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard<span class="sc-sr">, opens in a new tab</span></ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (detailsSubmitted()) {
-        <ui-stack gap="sm" data-testid="connect-status-verifying">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-verifying" [attr.aria-busy]="loading() ? 'true' : null">
           <strong class="sc-title">Stripe is verifying your account</strong>
           <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="loading() || disabled()" (click)="check()">{{ loading() ? 'Checking...' : 'Check Status' }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">Checking...</span><span class="sc-sr">Check Status, busy</span>} @else {Check Status}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else {
-        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+        <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-incomplete" [attr.aria-busy]="loading() ? 'true' : null">
           <span class="sc-badge"><ui-badge label="Account setup incomplete" variant="red" data-testid="connect-incomplete-badge" /></span>
           <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="loading() || disabled()" (click)="resume()">{{ loading() ? 'Loading...' : 'Complete Setup' }}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">Complete Setup, opens in a new tab, busy</span>} @else {Complete Setup<span class="sc-sr">, opens in a new tab</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       }
     </ng-template>
   `,
 			encapsulation: ViewEncapsulation.None,
-			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-badge{display:flex}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}\n"]
+			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-badge{display:flex}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}ui-stripe-connect .sc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"]
 		}]
 	}],
 	ctorParameters: () => [],