@forgeroute/ui 0.4.41 → 0.4.43

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -1,6 +1,6 @@
 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 { DOCUMENT, isPlatformBrowser } from "@angular/common";
+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";
 import { FormsModule } from "@angular/forms";
@@ -449,6 +449,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this.pending = input(false, ...ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []);
 		this.label = input("Payment details", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.mountId = input("", ...ngDevMode ? [{ debugName: "mountId" }] : /* istanbul ignore next */ []);
 		this.mountClass = input("", ...ngDevMode ? [{ debugName: "mountClass" }] : /* istanbul ignore next */ []);
 		this.showAchNotice = input(true, ...ngDevMode ? [{ debugName: "showAchNotice" }] : /* istanbul ignore next */ []);
@@ -1244,6 +1245,13 @@ var StripePaymentComponent = class StripePaymentComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				mountId: {
 					classPropertyName: "mountId",
 					publicName: "mountId",
@@ -1376,6 +1384,9 @@ var StripePaymentComponent = class StripePaymentComponent {
       @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
+      @if (!mountOnly() && required()) {
+        <div class="sp-label" data-testid="stripe-required-label">{{ label() }}<span class="sp-required" aria-hidden="true">*</span></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"
         [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
       @if (!mountOnly() && achNoticeVisible()) {
@@ -1393,7 +1404,7 @@ var StripePaymentComponent = class StripePaymentComponent {
     </div>
   `,
 			isInline: true,
-			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"],
+			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-label{font-size:.875rem;font-weight:500;color:#1e293b;margin-bottom:6px}.sp-required{color:#dc2626;margin-left:2px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -1492,6 +1503,9 @@ i0.ɵɵngDeclareClassMetadata({
       @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
+      @if (!mountOnly() && required()) {
+        <div class="sp-label" data-testid="stripe-required-label">{{ label() }}<span class="sp-required" aria-hidden="true">*</span></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"
         [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
       @if (!mountOnly() && achNoticeVisible()) {
@@ -1508,7 +1522,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"]
+			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-label{font-size:.875rem;font-weight:500;color:#1e293b;margin-bottom:6px}.sp-required{color:#dc2626;margin-left:2px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1769,6 +1783,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
 		mountId: [{
 			type: i0.Input,
 			args: [{
@@ -3007,6 +3029,7 @@ var StripeConnectComponent = class StripeConnectComponent {
 		this.complete = model(false, ...ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []);
 		this.detailsSubmitted = model(false, ...ngDevMode ? [{ debugName: "detailsSubmitted" }] : /* istanbul ignore next */ []);
 		this.title = input("Stripe Connect Account", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.bare = input(false, ...ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []);
 		this.showWhenNoAccount = input(false, ...ngDevMode ? [{ debugName: "showWhenNoAccount" }] : /* istanbul ignore next */ []);
 		this.startTitle = input("Connect your Stripe account", ...ngDevMode ? [{ debugName: "startTitle" }] : /* istanbul ignore next */ []);
 		this.startText = input("Collect your customers' payments online. You finish setting up your account on Stripe, then come back here.", ...ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []);
@@ -3119,6 +3142,13 @@ var StripeConnectComponent = class StripeConnectComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				bare: {
+					classPropertyName: "bare",
+					publicName: "bare",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				showWhenNoAccount: {
 					classPropertyName: "showWhenNoAccount",
 					publicName: "showWhenNoAccount",
@@ -3193,65 +3223,69 @@ var StripeConnectComponent = class StripeConnectComponent {
 			ngImport: i0,
 			template: `
     @if (visible()) {
-      <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
-        @if (!accountId()) {
-          <ui-alert variant="info" [quiet]="true" [title]="startTitle()" data-testid="connect-status-none">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else if (complete()) {
-          <ui-alert variant="success" [quiet]="true" title="Account setup complete" data-testid="connect-status-complete">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else if (detailsSubmitted()) {
-          <ui-alert variant="info" [quiet]="true" title="Stripe is verifying your account" data-testid="connect-status-verifying">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else {
-          <ui-alert variant="warning" [quiet]="true" title="Account setup incomplete" data-testid="connect-status-incomplete">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        }
-      </ui-detail-card>
+      @if (bare()) {
+        <ng-container *ngTemplateOutlet="body" />
+      } @else {
+        <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
+          <ng-container *ngTemplateOutlet="body" />
+        </ui-detail-card>
+      }
     }
+
+    <ng-template #body>
+      @if (!accountId()) {
+        <ui-stack gap="sm" data-testid="connect-status-none">
+          <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-stack>
+        </ui-stack>
+      } @else if (complete()) {
+        <ui-stack gap="sm" 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-stack>
+        </ui-stack>
+      } @else if (detailsSubmitted()) {
+        <ui-stack gap="sm" data-testid="connect-status-verifying">
+          <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-stack>
+        </ui-stack>
+      } @else {
+        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+          <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-stack>
+        </ui-stack>
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: ["ui-stripe-connect{display:block;min-width:0}\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}\n"],
 			dependencies: [
 				{
-					kind: "component",
-					type: AlertComponent,
-					selector: "ui-alert",
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
 					inputs: [
-						"variant",
-						"title",
-						"dismissible",
-						"dismissAriaLabel",
-						"quiet",
-						"compact",
-						"inline",
-						"fill"
-					],
-					outputs: ["dismissed"]
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: ["label", "variant"]
 				},
 				{
 					kind: "component",
@@ -3367,7 +3401,8 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			imports: [
-				AlertComponent,
+				NgTemplateOutlet,
+				BadgeComponent,
 				ButtonComponent,
 				DetailCardComponent,
 				StackComponent,
@@ -3375,49 +3410,53 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			template: `
     @if (visible()) {
-      <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
-        @if (!accountId()) {
-          <ui-alert variant="info" [quiet]="true" [title]="startTitle()" data-testid="connect-status-none">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else if (complete()) {
-          <ui-alert variant="success" [quiet]="true" title="Account setup complete" data-testid="connect-status-complete">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else if (detailsSubmitted()) {
-          <ui-alert variant="info" [quiet]="true" title="Stripe is verifying your account" data-testid="connect-status-verifying">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        } @else {
-          <ui-alert variant="warning" [quiet]="true" title="Account setup incomplete" data-testid="connect-status-incomplete">
-            <ui-stack gap="sm">
-              <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-stack>
-            </ui-stack>
-          </ui-alert>
-        }
-      </ui-detail-card>
+      @if (bare()) {
+        <ng-container *ngTemplateOutlet="body" />
+      } @else {
+        <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
+          <ng-container *ngTemplateOutlet="body" />
+        </ui-detail-card>
+      }
     }
+
+    <ng-template #body>
+      @if (!accountId()) {
+        <ui-stack gap="sm" data-testid="connect-status-none">
+          <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-stack>
+        </ui-stack>
+      } @else if (complete()) {
+        <ui-stack gap="sm" 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-stack>
+        </ui-stack>
+      } @else if (detailsSubmitted()) {
+        <ui-stack gap="sm" data-testid="connect-status-verifying">
+          <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-stack>
+        </ui-stack>
+      } @else {
+        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+          <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-stack>
+        </ui-stack>
+      }
+    </ng-template>
   `,
 			encapsulation: ViewEncapsulation.None,
-			styles: ["ui-stripe-connect{display:block;min-width:0}\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}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -3479,6 +3518,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		bare: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bare",
+				required: false
+			}]
+		}],
 		showWhenNoAccount: [{
 			type: i0.Input,
 			args: [{