@dotted-labs/ngx-supabase-stripe 0.3.2 → 0.4.0

package/fesm2022/dotted-labs-ngx-supabase-stripe.mjs

@@ -305,10 +305,10 @@ class SupabaseClientService {
             return { data: null, error: error };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SupabaseClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SupabaseClientService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SupabaseClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -607,10 +607,10 @@ class StripeClientService {
             return { paymentMethod: null, error: error };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StripeClientService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StripeClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1300,10 +1300,10 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
 })));
 
 class EmbeddedSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: EmbeddedSkeletonComponent, isStandalone: true, selector: "lib-embedded-skeleton", ngImport: i0, template: "<div class=\"w-full max-w-md mx-auto p-4\">\n  <!-- Header skeleton -->\n  <div class=\"flex items-center gap-4 mb-6\">\n    <div class=\"skeleton w-16 h-16 rounded-lg\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n  </div>\n\n  <!-- Price skeleton -->\n  <div class=\"mb-8\">\n    <div class=\"skeleton h-10 w-32 mb-2\"></div>\n    <div class=\"skeleton h-4 w-24\"></div>\n  </div>\n\n  <!-- Payment form skeleton -->\n  <div class=\"space-y-4\">\n    <!-- Email field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Card info field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Name field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Country selector -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Submit button -->\n    <div class=\"skeleton h-12 w-full mt-6\"></div>\n  </div>\n</div> " });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EmbeddedSkeletonComponent, isStandalone: true, selector: "lib-embedded-skeleton", ngImport: i0, template: "<div class=\"w-full max-w-md mx-auto p-4\">\n  <!-- Header skeleton -->\n  <div class=\"flex items-center gap-4 mb-6\">\n    <div class=\"skeleton w-16 h-16 rounded-lg\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n  </div>\n\n  <!-- Price skeleton -->\n  <div class=\"mb-8\">\n    <div class=\"skeleton h-10 w-32 mb-2\"></div>\n    <div class=\"skeleton h-4 w-24\"></div>\n  </div>\n\n  <!-- Payment form skeleton -->\n  <div class=\"space-y-4\">\n    <!-- Email field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Card info field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Name field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Country selector -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Submit button -->\n    <div class=\"skeleton h-12 w-full mt-6\"></div>\n  </div>\n</div> " });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-embedded-skeleton', standalone: true, template: "<div class=\"w-full max-w-md mx-auto p-4\">\n  <!-- Header skeleton -->\n  <div class=\"flex items-center gap-4 mb-6\">\n    <div class=\"skeleton w-16 h-16 rounded-lg\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n  </div>\n\n  <!-- Price skeleton -->\n  <div class=\"mb-8\">\n    <div class=\"skeleton h-10 w-32 mb-2\"></div>\n    <div class=\"skeleton h-4 w-24\"></div>\n  </div>\n\n  <!-- Payment form skeleton -->\n  <div class=\"space-y-4\">\n    <!-- Email field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Card info field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Name field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Country selector -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Submit button -->\n    <div class=\"skeleton h-12 w-full mt-6\"></div>\n  </div>\n</div> " }]
         }] });
@@ -1311,9 +1311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class EmbeddedCheckoutComponent {
     checkoutStore = inject(CheckoutStore);
     customerStore = inject(CustomerStore);
-    priceId = input.required();
-    returnPagePath = input('/return');
-    customer = computed(() => this.customerStore.customer().data);
+    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
+    returnPagePath = input('/return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
     async ngOnInit() {
         this.createCheckoutSession();
     }
@@ -1330,19 +1330,19 @@ class EmbeddedCheckoutComponent {
     ngOnDestroy() {
         this.checkoutStore.destroyEmbeddedCheckout();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedCheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: EmbeddedCheckoutComponent, isStandalone: true, selector: "lib-embedded-checkout", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"checkout-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (checkoutStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ checkoutStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EmbeddedCheckoutComponent, isStandalone: true, selector: "lib-embedded-checkout", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"checkout-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (checkoutStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ checkoutStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedCheckoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-embedded-checkout', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"checkout-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (checkoutStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ checkoutStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div> " }]
-        }] });
+        }], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
 
 class ReturnPageComponent {
     route = inject(ActivatedRoute);
     router = inject(Router);
     checkoutStore = inject(CheckoutStore);
-    returnUrl = input('/');
+    returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             const sessionId = params['session_id'];
@@ -1360,19 +1360,19 @@ class ReturnPageComponent {
     navigate() {
         this.router.navigateByUrl(this.returnUrl());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ReturnPageComponent, isStandalone: true, selector: "lib-checkout-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"return-page-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <div class=\"loading-state\">\n      <div class=\"spinner\"></div>\n      <p>Verifying your payment status...</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentComplete()) {\n    <div class=\"alert alert-success alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">\u00A1Payment completed successfully!</h2>\n      </div>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentProcessing()) {\n    <div class=\"alert alert-info alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">Payment in processing</h2>\n      </div>\n      <p class=\"status-message\">Your payment is being processed. You will receive an email confirmation when it is complete.</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusError()) {\n    <div class=\"alert alert-error alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n        </svg>\n        <h2 class=\"status-title\">An error occurred</h2>\n      </div>\n      @if (checkoutStore.error()) {\n        <p class=\"status-message\">{{ checkoutStore.error() }}</p>\n      } @else {\n        <p class=\"status-message\">The payment could not be processed. Please try again or contact support.</p>\n      }\n    </div>\n  }\n\n  <div class=\"flex justify-end w-full pt-4\">\n    <button class=\"btn btn-outline\" (click)=\"navigate()\">Back</button>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ReturnPageComponent, isStandalone: true, selector: "lib-checkout-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"return-page-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <div class=\"loading-state\">\n      <div class=\"spinner\"></div>\n      <p>Verifying your payment status...</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentComplete()) {\n    <div class=\"alert alert-success alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">\u00A1Payment completed successfully!</h2>\n      </div>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentProcessing()) {\n    <div class=\"alert alert-info alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">Payment in processing</h2>\n      </div>\n      <p class=\"status-message\">Your payment is being processed. You will receive an email confirmation when it is complete.</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusError()) {\n    <div class=\"alert alert-error alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n        </svg>\n        <h2 class=\"status-title\">An error occurred</h2>\n      </div>\n      @if (checkoutStore.error()) {\n        <p class=\"status-message\">{{ checkoutStore.error() }}</p>\n      } @else {\n        <p class=\"status-message\">The payment could not be processed. Please try again or contact support.</p>\n      }\n    </div>\n  }\n\n  <div class=\"flex justify-end w-full pt-4\">\n    <button class=\"btn btn-outline\" (click)=\"navigate()\">Back</button>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ReturnPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-checkout-return-page', standalone: true, imports: [CommonModule], template: "<div class=\"return-page-container\">\n  @if (checkoutStore.isStatusLoading()) {\n    <div class=\"loading-state\">\n      <div class=\"spinner\"></div>\n      <p>Verifying your payment status...</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentComplete()) {\n    <div class=\"alert alert-success alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">\u00A1Payment completed successfully!</h2>\n      </div>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentProcessing()) {\n    <div class=\"alert alert-info alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n        </svg>\n        <h2 class=\"status-title\">Payment in processing</h2>\n      </div>\n      <p class=\"status-message\">Your payment is being processed. You will receive an email confirmation when it is complete.</p>\n    </div>\n  }\n\n  @if (checkoutStore.isStatusError()) {\n    <div class=\"alert alert-error alert-soft flex flex-col items-center gap-4\">\n      <div class=\"flex items-center gap-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n        </svg>\n        <h2 class=\"status-title\">An error occurred</h2>\n      </div>\n      @if (checkoutStore.error()) {\n        <p class=\"status-message\">{{ checkoutStore.error() }}</p>\n      } @else {\n        <p class=\"status-message\">The payment could not be processed. Please try again or contact support.</p>\n      }\n    </div>\n  }\n\n  <div class=\"flex justify-end w-full pt-4\">\n    <button class=\"btn btn-outline\" (click)=\"navigate()\">Back</button>\n  </div>\n</div> " }]
-        }] });
+        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class ProductItemSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ProductItemSkeletonComponent, isStandalone: true, selector: "lib-product-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl w-[350px]\">\n  <figure>\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"skeleton h-8 w-32\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n    <div class=\"skeleton h-4 w-full\"></div>\n    <div class=\"skeleton h-4 w-3/4\"></div>\n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-24\"></div>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ProductItemSkeletonComponent, isStandalone: true, selector: "lib-product-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl w-[350px]\">\n  <figure>\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"skeleton h-8 w-32\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n    <div class=\"skeleton h-4 w-full\"></div>\n    <div class=\"skeleton h-4 w-3/4\"></div>\n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-24\"></div>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-product-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl w-[350px]\">\n  <figure>\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"skeleton h-8 w-32\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n    <div class=\"skeleton h-4 w-full\"></div>\n    <div class=\"skeleton h-4 w-3/4\"></div>\n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-24\"></div>\n    </div>\n  </div>\n</div> " }]
         }] });
@@ -1417,10 +1417,10 @@ class UtilsService {
                 return 'badge-ghost';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: UtilsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1428,33 +1428,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 class ProductItemComponent {
-    product = input.required();
-    currency = input(Currency.EUR);
+    product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
     productSelected = output();
     priceSelected = output();
     utils = inject(UtilsService);
     sanitizer = inject(DomSanitizer);
-    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
     sanitizedImage = computed(() => {
         const imageUrl = this.product().images?.[0];
         return imageUrl ? this.sanitizer.bypassSecurityTrustUrl(imageUrl) : null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "sanitizedImage" }] : []));
     onSelect() {
         this.productSelected.emit(this.product());
         this.priceSelected.emit(this.price()?.details);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl w-[350px]\">\n  <!-- Header with image and favorite icon -->\n  <div class=\"relative\">\n    @if (sanitizedImage()) {\n      <figure class=\"bg-gradient-to-br from-base-200 to-base-300\">\n        <img \n          [src]=\"sanitizedImage()\" \n          alt=\"{{ product().name }}\" \n          class=\"h-64 w-full object-cover p-8 rounded-t-3xl\" />\n      </figure>\n    } @else {\n      <div class=\"h-64 bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center\">\n        <div class=\"text-base-content/50 text-6xl\">\uD83D\uDCE6</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"card-body p-6 flex flex-col h-full\">\n    <!-- Product title -->\n    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\n    <!-- Description (moved under title) -->\n    @if (product().description) {\n      <p class=\"text-base-content/70 text-sm mb-4 line-clamp-3\">\n        {{ product().description }}\n      </p>\n    }\n\n         <!-- Price options as text -->\n    <div class=\"flex justify-between gap-2\">\n      <span class=\"text-xl font-bold text-base-content\">\n        @if (price()?.details?.type === 'recurring') {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}/{{ price()?.recurringInterval === 'month' ? 'mo' : 'yr' }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      <!-- Status badge (only show if inactive) -->\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl w-[350px]\">\n  <!-- Header with image and favorite icon -->\n  <div class=\"relative\">\n    @if (sanitizedImage()) {\n      <figure class=\"bg-gradient-to-br from-base-200 to-base-300\">\n        <img \n          [src]=\"sanitizedImage()\" \n          alt=\"{{ product().name }}\" \n          class=\"h-64 w-full object-cover p-8 rounded-t-3xl\" />\n      </figure>\n    } @else {\n      <div class=\"h-64 bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center\">\n        <div class=\"text-base-content/50 text-6xl\">\uD83D\uDCE6</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"card-body p-6 flex flex-col h-full\">\n    <!-- Product title -->\n    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\n    <!-- Description (moved under title) -->\n    @if (product().description) {\n      <p class=\"text-base-content/70 text-sm mb-4 line-clamp-3\">\n        {{ product().description }}\n      </p>\n    }\n\n         <!-- Price options as text -->\n    <div class=\"flex justify-between gap-2\">\n      <span class=\"text-xl font-bold text-base-content\">\n        @if (price()?.details?.type === 'recurring') {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}/{{ price()?.recurringInterval === 'month' ? 'mo' : 'yr' }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      <!-- Status badge (only show if inactive) -->\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-product-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl w-[350px]\">\n  <!-- Header with image and favorite icon -->\n  <div class=\"relative\">\n    @if (sanitizedImage()) {\n      <figure class=\"bg-gradient-to-br from-base-200 to-base-300\">\n        <img \n          [src]=\"sanitizedImage()\" \n          alt=\"{{ product().name }}\" \n          class=\"h-64 w-full object-cover p-8 rounded-t-3xl\" />\n      </figure>\n    } @else {\n      <div class=\"h-64 bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center\">\n        <div class=\"text-base-content/50 text-6xl\">\uD83D\uDCE6</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"card-body p-6 flex flex-col h-full\">\n    <!-- Product title -->\n    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\n    <!-- Description (moved under title) -->\n    @if (product().description) {\n      <p class=\"text-base-content/70 text-sm mb-4 line-clamp-3\">\n        {{ product().description }}\n      </p>\n    }\n\n         <!-- Price options as text -->\n    <div class=\"flex justify-between gap-2\">\n      <span class=\"text-xl font-bold text-base-content\">\n        @if (price()?.details?.type === 'recurring') {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}/{{ price()?.recurringInterval === 'month' ? 'mo' : 'yr' }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      <!-- Status badge (only show if inactive) -->\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div> " }]
-        }] });
+        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: true }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
 
 class ProductListComponent {
     productsStore = inject(ProductsStore);
-    products = input([]);
-    currency = input(Currency.EUR);
+    products = input([], ...(ngDevMode ? [{ debugName: "products" }] : []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
     productSelected = output();
     priceSelected = output();
     onProductSelect(product) {
@@ -1463,26 +1463,26 @@ class ProductListComponent {
     onPriceSelect(price) {
         this.priceSelected.emit(price);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n}\n\n@if (productsStore.isStatusError() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n}\n\n@if (!productsStore.hasProducts() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n}\n\n@if (productsStore.hasProducts()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        [currency]=\"currency()\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ProductItemComponent, selector: "lib-product-item", inputs: ["product", "currency"], outputs: ["productSelected", "priceSelected"] }, { kind: "component", type: ProductItemSkeletonComponent, selector: "lib-product-item-skeleton" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n}\n\n@if (productsStore.isStatusError() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n}\n\n@if (!productsStore.hasProducts() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n}\n\n@if (productsStore.hasProducts()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        [currency]=\"currency()\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ProductItemComponent, selector: "lib-product-item", inputs: ["product", "currency"], outputs: ["productSelected", "priceSelected"] }, { kind: "component", type: ProductItemSkeletonComponent, selector: "lib-product-item-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stripe-product-list', standalone: true, imports: [CommonModule, ProductItemComponent, ProductItemSkeletonComponent], template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n}\n\n@if (productsStore.isStatusError() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n}\n\n@if (!productsStore.hasProducts() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n}\n\n@if (productsStore.hasProducts()) {\n  <div class=\"flex justify-start gap-8\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        [currency]=\"currency()\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n" }]
-        }] });
+        }], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
 
 class ProductItemButtonComponent {
-    product = input.required();
-    currency = input(Currency.EUR);
-    buttonText = input('Buy now');
-    buttonClass = input('btn btn-primary');
-    showPrice = input(true);
-    disabled = input(false);
+    product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
+    buttonText = input('Buy now', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+    buttonClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+    showPrice = input(true, ...(ngDevMode ? [{ debugName: "showPrice" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     productSelected = output();
     priceSelected = output();
     utils = inject(UtilsService);
-    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
-    isDisabled = computed(() => this.disabled() || !this.product().active);
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
+    isDisabled = computed(() => this.disabled() || !this.product().active, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     displayText = computed(() => {
         if (!this.product().active) {
             return 'Inactive';
@@ -1499,7 +1499,7 @@ class ProductItemButtonComponent {
             ? `/${priceInfo.recurringInterval === 'month' ? 'mo' : 'yr'}`
             : '';
         return `${this.buttonText()} - ${formattedPrice}${suffix}`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
     onSelect() {
         if (this.isDisabled()) {
             return;
@@ -1507,20 +1507,20 @@ class ProductItemButtonComponent {
         this.productSelected.emit(this.product());
         this.priceSelected.emit(this.price()?.details);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: ProductItemButtonComponent, isStandalone: true, selector: "lib-product-item-button", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showPrice: { classPropertyName: "showPrice", publicName: "showPrice", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<button \n  [class]=\"buttonClass()\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onSelect()\">\n  {{ displayText() }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ProductItemButtonComponent, isStandalone: true, selector: "lib-product-item-button", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showPrice: { classPropertyName: "showPrice", publicName: "showPrice", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<button \n  [class]=\"buttonClass()\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onSelect()\">\n  {{ displayText() }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-product-item-button', standalone: true, imports: [CommonModule], template: "<button \n  [class]=\"buttonClass()\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"onSelect()\">\n  {{ displayText() }}\n</button>\n" }]
-        }] });
+        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: true }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], showPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrice", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
 
 class EmbeddedSubscriptionComponent {
     subscriptionsStore = inject(SubscriptionsStore);
     customerStore = inject(CustomerStore);
-    priceId = input.required();
-    returnPagePath = input('/subscription-return');
-    customer = computed(() => this.customerStore.customer().data);
+    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
+    returnPagePath = input('/subscription-return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
     async ngOnInit() {
         this.createSubscription();
     }
@@ -1532,21 +1532,21 @@ class EmbeddedSubscriptionComponent {
     ngOnDestroy() {
         this.subscriptionsStore.destroyEmbeddedSubscription();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: EmbeddedSubscriptionComponent, isStandalone: true, selector: "lib-embedded-subscription", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"subscription-container\">\n  <div class=\"info-panel p-4 bg-primary-100 rounded-lg mb-4\">\n    <div class=\"flex items-center\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-primary mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n      <p class=\"text-primary-700\">Plan de suscripci\u00F3n: <span class=\"font-semibold\">{{ priceId() }}</span></p>\n    </div>\n  </div>\n  \n  @if (subscriptionsStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (subscriptionsStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ subscriptionsStore.error() }}</p>\n    </div>\n  }\n  \n  <div id=\"embedded-checkout\" class=\"mt-4\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EmbeddedSubscriptionComponent, isStandalone: true, selector: "lib-embedded-subscription", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"subscription-container\">\n  <div class=\"info-panel p-4 bg-primary-100 rounded-lg mb-4\">\n    <div class=\"flex items-center\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-primary mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n      <p class=\"text-primary-700\">Plan de suscripci\u00F3n: <span class=\"font-semibold\">{{ priceId() }}</span></p>\n    </div>\n  </div>\n  \n  @if (subscriptionsStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (subscriptionsStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ subscriptionsStore.error() }}</p>\n    </div>\n  }\n  \n  <div id=\"embedded-checkout\" class=\"mt-4\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-embedded-subscription', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"subscription-container\">\n  <div class=\"info-panel p-4 bg-primary-100 rounded-lg mb-4\">\n    <div class=\"flex items-center\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-primary mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n      <p class=\"text-primary-700\">Plan de suscripci\u00F3n: <span class=\"font-semibold\">{{ priceId() }}</span></p>\n    </div>\n  </div>\n  \n  @if (subscriptionsStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (subscriptionsStore.isStatusError()) {\n    <div class=\"error\">\n      <p>Error: {{ subscriptionsStore.error() }}</p>\n    </div>\n  }\n  \n  <div id=\"embedded-checkout\" class=\"mt-4\"></div>\n</div> " }]
-        }] });
+        }], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
 
 class SubscriptionReturnPageComponent {
     route = inject(ActivatedRoute);
     router = inject(Router);
     checkoutStore = inject(CheckoutStore);
     subscriptionsStore = inject(SubscriptionsStore);
-    sessionStatus = computed(() => this.checkoutStore.sessionStatus());
-    returnUrl = input('/');
+    sessionStatus = computed(() => this.checkoutStore.sessionStatus(), ...(ngDevMode ? [{ debugName: "sessionStatus" }] : []));
+    returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             const sessionId = params['session_id'];
@@ -1564,17 +1564,17 @@ class SubscriptionReturnPageComponent {
     navigate() {
         this.router.navigateByUrl(this.returnUrl());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionReturnPageComponent, isStandalone: true, selector: "lib-subscription-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4\">\n  <div class=\"hero-content text-center max-w-md\">\n    <div class=\"card w-full bg-base-100 shadow-2xl\">\n      <div class=\"card-body items-center text-center\">\n        <!-- Success Icon -->\n        <div class=\"mb-6\">\n          <div class=\"avatar\">\n            <div class=\"w-24 h-24 rounded-full bg-success/10 flex items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"h-full w-full text-success\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n\n        <!-- Status Content -->\n        @if (checkoutStore.isStatusLoading()) {\n          <div class=\"flex flex-col items-center gap-4 mb-6\">\n            <span class=\"loading loading-spinner loading-lg text-primary\"></span>\n            <div class=\"alert alert-info\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"stroke-current shrink-0 w-6 h-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n              </svg>\n              <span>Cargando detalles de la suscripci\u00F3n...</span>\n            </div>\n          </div>\n        } @else if (checkoutStore.isStatusError()) {\n          <div class=\"alert alert-error mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span>{{ subscriptionsStore.error() }}</span>\n          </div>\n        } @else if (checkoutStore.isPaymentComplete()) {\n\n          <!-- Title and Description -->\n          <h2 class=\"card-title text-3xl font-bold text-base-content mb-2\">{{ sessionStatus()?.amount_total }}</h2>\n\n          <div class=\"alert alert-success mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span class=\"font-medium\">Tu suscripci\u00F3n est\u00E1 activa y lista para usar.</span>\n          </div>\n\n          <div class=\"bg-base-200 rounded-lg p-4 mb-6 w-full\">\n            <h3 class=\"font-semibold text-sm text-base-content/80 mb-3\">Beneficios incluidos:</h3>\n            <ul class=\"space-y-2\">\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Acceso completo a todas las funciones\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Soporte prioritario 24/7\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Actualizaciones autom\u00E1ticas\n              </li>\n            </ul>\n          </div>\n        }\n\n        <!-- Action Buttons -->\n        <div class=\"card-actions justify-center w-full\">\n          <button class=\"btn btn-primary btn-wide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n            Ir al Panel Principal\n          </button>\n        </div>\n\n        <!-- Additional Help -->\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            \u00BFNecesitas ayuda?\n            <a href=\"#\" class=\"link link-primary\">Contacta soporte</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionReturnPageComponent, isStandalone: true, selector: "lib-subscription-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4\">\n  <div class=\"hero-content text-center max-w-md\">\n    <div class=\"card w-full bg-base-100 shadow-2xl\">\n      <div class=\"card-body items-center text-center\">\n        <!-- Success Icon -->\n        <div class=\"mb-6\">\n          <div class=\"avatar\">\n            <div class=\"w-24 h-24 rounded-full bg-success/10 flex items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"h-full w-full text-success\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n\n        <!-- Status Content -->\n        @if (checkoutStore.isStatusLoading()) {\n          <div class=\"flex flex-col items-center gap-4 mb-6\">\n            <span class=\"loading loading-spinner loading-lg text-primary\"></span>\n            <div class=\"alert alert-info\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"stroke-current shrink-0 w-6 h-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n              </svg>\n              <span>Cargando detalles de la suscripci\u00F3n...</span>\n            </div>\n          </div>\n        } @else if (checkoutStore.isStatusError()) {\n          <div class=\"alert alert-error mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span>{{ subscriptionsStore.error() }}</span>\n          </div>\n        } @else if (checkoutStore.isPaymentComplete()) {\n\n          <!-- Title and Description -->\n          <h2 class=\"card-title text-3xl font-bold text-base-content mb-2\">{{ sessionStatus()?.amount_total }}</h2>\n\n          <div class=\"alert alert-success mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span class=\"font-medium\">Tu suscripci\u00F3n est\u00E1 activa y lista para usar.</span>\n          </div>\n\n          <div class=\"bg-base-200 rounded-lg p-4 mb-6 w-full\">\n            <h3 class=\"font-semibold text-sm text-base-content/80 mb-3\">Beneficios incluidos:</h3>\n            <ul class=\"space-y-2\">\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Acceso completo a todas las funciones\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Soporte prioritario 24/7\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Actualizaciones autom\u00E1ticas\n              </li>\n            </ul>\n          </div>\n        }\n\n        <!-- Action Buttons -->\n        <div class=\"card-actions justify-center w-full\">\n          <button class=\"btn btn-primary btn-wide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n            Ir al Panel Principal\n          </button>\n        </div>\n\n        <!-- Additional Help -->\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            \u00BFNecesitas ayuda?\n            <a href=\"#\" class=\"link link-primary\">Contacta soporte</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionReturnPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-return-page', standalone: true, imports: [CommonModule], template: "<div class=\"flex justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4\">\n  <div class=\"hero-content text-center max-w-md\">\n    <div class=\"card w-full bg-base-100 shadow-2xl\">\n      <div class=\"card-body items-center text-center\">\n        <!-- Success Icon -->\n        <div class=\"mb-6\">\n          <div class=\"avatar\">\n            <div class=\"w-24 h-24 rounded-full bg-success/10 flex items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"h-full w-full text-success\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n\n        <!-- Status Content -->\n        @if (checkoutStore.isStatusLoading()) {\n          <div class=\"flex flex-col items-center gap-4 mb-6\">\n            <span class=\"loading loading-spinner loading-lg text-primary\"></span>\n            <div class=\"alert alert-info\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"stroke-current shrink-0 w-6 h-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n              </svg>\n              <span>Cargando detalles de la suscripci\u00F3n...</span>\n            </div>\n          </div>\n        } @else if (checkoutStore.isStatusError()) {\n          <div class=\"alert alert-error mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span>{{ subscriptionsStore.error() }}</span>\n          </div>\n        } @else if (checkoutStore.isPaymentComplete()) {\n\n          <!-- Title and Description -->\n          <h2 class=\"card-title text-3xl font-bold text-base-content mb-2\">{{ sessionStatus()?.amount_total }}</h2>\n\n          <div class=\"alert alert-success mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span class=\"font-medium\">Tu suscripci\u00F3n est\u00E1 activa y lista para usar.</span>\n          </div>\n\n          <div class=\"bg-base-200 rounded-lg p-4 mb-6 w-full\">\n            <h3 class=\"font-semibold text-sm text-base-content/80 mb-3\">Beneficios incluidos:</h3>\n            <ul class=\"space-y-2\">\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Acceso completo a todas las funciones\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Soporte prioritario 24/7\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Actualizaciones autom\u00E1ticas\n              </li>\n            </ul>\n          </div>\n        }\n\n        <!-- Action Buttons -->\n        <div class=\"card-actions justify-center w-full\">\n          <button class=\"btn btn-primary btn-wide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n            Ir al Panel Principal\n          </button>\n        </div>\n\n        <!-- Additional Help -->\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            \u00BFNecesitas ayuda?\n            <a href=\"#\" class=\"link link-primary\">Contacta soporte</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>" }]
-        }] });
+        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class BrandIconDirective {
     el;
-    paymentMethod = input.required({ alias: 'ngxBrandIcon' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandIcon' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1596,20 +1596,20 @@ class BrandIconDirective {
         };
         return brandIcons[brand || 'unknown'] || '💳';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: BrandIconDirective, isStandalone: true, selector: "[ngxBrandIcon]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandIcon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: BrandIconDirective, isStandalone: true, selector: "[ngxBrandIcon]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandIcon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxBrandIcon]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandIcon", required: true }] }] } });
 
 class BrandNameDirective {
     el;
-    paymentMethod = input.required({ alias: 'ngxBrandName' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandName' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1631,20 +1631,20 @@ class BrandNameDirective {
         };
         return brandNames[brand || 'unknown'] || 'Tarjeta';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: BrandNameDirective, isStandalone: true, selector: "[ngxBrandName]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: BrandNameDirective, isStandalone: true, selector: "[ngxBrandName]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandNameDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxBrandName]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandName", required: true }] }] } });
 
 class PaymentMethodTypeDirective {
     el;
-    paymentMethod = input.required({ alias: 'ngxPaymentMethodType' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxPaymentMethodType' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1670,20 +1670,20 @@ class PaymentMethodTypeDirective {
         };
         return typeNames[this.paymentMethod().type] || 'Método de pago';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: PaymentMethodTypeDirective, isStandalone: true, selector: "[ngxPaymentMethodType]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxPaymentMethodType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: PaymentMethodTypeDirective, isStandalone: true, selector: "[ngxPaymentMethodType]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxPaymentMethodType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxPaymentMethodType]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxPaymentMethodType", required: true }] }] } });
 
 class PaymentMethodComponent {
-    paymentMethod = input.required();
-    mode = input('detailed');
+    paymentMethod = input.required(...(ngDevMode ? [{ debugName: "paymentMethod" }] : []));
+    mode = input('detailed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     get last4() {
         return this.paymentMethod().card?.last4 || '****';
     }
@@ -1719,41 +1719,41 @@ class PaymentMethodComponent {
     get billingAddress() {
         return this.paymentMethod().billing_details?.address;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentMethodComponent, isStandalone: true, selector: "ngx-payment-method", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "paymentMethod", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Detailed Version -->\n@if (mode() === 'detailed') {\n  <div class=\"w-full max-w-md mx-auto\">\n    <!-- Stack of Credit Cards -->\n    <div class=\"stack w-full h-56\">\n      <div class=\"bg-gradient-to-br from-primary to-accent text-neutral-content relative place-content-center rounded-box\">\n        <div class=\"card-body p-6 relative z-10\">\n          <!-- Card Header -->\n          <div class=\"flex justify-between items-start mb-6\">\n            <div class=\"flex items-center gap-2\">\n              <!--<span class=\"text-3xl filter drop-shadow-lg\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n              <div class=\"font-bold text-lg text-primary-content\" [ngxBrandName]=\"paymentMethod()\"></div>\n              @if (cardCountry) {\n                <div class=\"text-xs text-primary-content/60 uppercase\">{{ cardCountry }}</div>\n              }\n              @if (isExpired) {\n                <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n              }\n            </div>\n          </div>\n\n          <!-- Card Number -->\n          <div class=\"mb-6\">\n            <div class=\"font-mono text-xl tracking-wider text-primary-content\">\n              **** **** **** {{ last4 }}\n            </div>\n          </div>\n\n          <!-- Card Bottom Info -->\n          <div class=\"flex justify-start items-end\">\n            <div class=\"flex-1\">\n              <div class=\"text-xs text-primary-content/60 mb-1\">TITULAR</div>\n              <div class=\"font-medium text-sm text-primary-content truncate max-w-32\">{{ holderName }}</div>\n            </div>\n            \n            @if (expirationDate) {\n              <div class=\"flex-1\">\n                <div class=\"text-xs text-primary-content/60 mb-1\">V\u00C1LIDA HASTA</div>\n                <div class=\"font-mono text-sm text-primary-content\">{{ expirationDate }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Card Background Pattern -->\n        <div class=\"absolute inset-0 opacity-20\">\n          <div class=\"absolute top-4 right-4 w-20 h-20 rounded-full bg-primary-content/30\"></div>\n          <div class=\"absolute bottom-4 left-4 w-16 h-16 rounded-full bg-primary-content/20\"></div>\n          <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full bg-primary-content/10\"></div>\n        </div>\n      </div>\n      <div class=\"bg-secondary grid place-content-center rounded-box\"></div>\n      <div class=\"bg-accent grid place-content-center rounded-box\"></div>\n    </div>\n\n    <!-- Additional Information Below Cards -->\n    <div class=\"mt-6 space-y-4\">\n      <!-- Billing Information -->\n      @if (billingEmail || billingPhone) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n              Informaci\u00F3n de Contacto\n            </h4>\n            \n            <div class=\"space-y-2\">\n              @if (billingEmail) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingEmail }}</span>\n                </div>\n              }\n              \n              @if (billingPhone) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingPhone }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Billing Address -->\n      @if (billingAddress && (billingAddress.line1 || billingAddress.city)) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n              </svg>\n              Direcci\u00F3n de Facturaci\u00F3n\n            </h4>\n            \n            <div class=\"text-sm text-base-content/70 space-y-1\">\n              @if (billingAddress.line1) {\n                <div>{{ billingAddress.line1 }}</div>\n                @if (billingAddress.line2) {\n                  <div>{{ billingAddress.line2 }}</div>\n                }\n              }\n              \n              <div class=\"flex gap-2 flex-wrap\">\n                @if (billingAddress.city) {\n                  <span>{{ billingAddress.city }}</span>\n                }\n                @if (billingAddress.postal_code) {\n                  <span>{{ billingAddress.postal_code }}</span>\n                }\n                @if (billingAddress.country) {\n                  <span class=\"uppercase\">{{ billingAddress.country }}</span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Card Creation Date -->\n      <div class=\"flex items-center justify-between text-sm text-base-content/60 px-2\">\n        <span>M\u00E9todo agregado:</span>\n        <span>{{ paymentMethod().created * 1000 | date:'short' }}</span>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Compact Version -->\n@if (mode() === 'compact') {\n  <div class=\"flex items-center gap-2\">\n    <!--<span class=\"text-xl filter drop-shadow-sm\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n    \n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-medium\" [ngxBrandName]=\"paymentMethod()\"></span>\n        <span class=\"text-base-content/70\">\u2022\u2022\u2022\u2022 {{ last4 }}</span>\n        @if (paymentMethod().type === 'card' && expirationDate) {\n          <span class=\"text-base-content/70 text-sm\">{{ expirationDate }}</span>\n        }\n      </div>\n    </div>\n\n    @if (isExpired) {\n      <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\">Activa</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "directive", type: BrandNameDirective, selector: "[ngxBrandName]", inputs: ["ngxBrandName"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentMethodComponent, isStandalone: true, selector: "ngx-payment-method", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "paymentMethod", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Detailed Version -->\n@if (mode() === 'detailed') {\n  <div class=\"w-full max-w-md mx-auto\">\n    <!-- Stack of Credit Cards -->\n    <div class=\"stack w-full h-56\">\n      <div class=\"bg-gradient-to-br from-primary to-accent text-neutral-content relative place-content-center rounded-box\">\n        <div class=\"card-body p-6 relative z-10\">\n          <!-- Card Header -->\n          <div class=\"flex justify-between items-start mb-6\">\n            <div class=\"flex items-center gap-2\">\n              <!--<span class=\"text-3xl filter drop-shadow-lg\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n              <div class=\"font-bold text-lg text-primary-content\" [ngxBrandName]=\"paymentMethod()\"></div>\n              @if (cardCountry) {\n                <div class=\"text-xs text-primary-content/60 uppercase\">{{ cardCountry }}</div>\n              }\n              @if (isExpired) {\n                <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n              }\n            </div>\n          </div>\n\n          <!-- Card Number -->\n          <div class=\"mb-6\">\n            <div class=\"font-mono text-xl tracking-wider text-primary-content\">\n              **** **** **** {{ last4 }}\n            </div>\n          </div>\n\n          <!-- Card Bottom Info -->\n          <div class=\"flex justify-start items-end\">\n            <div class=\"flex-1\">\n              <div class=\"text-xs text-primary-content/60 mb-1\">TITULAR</div>\n              <div class=\"font-medium text-sm text-primary-content truncate max-w-32\">{{ holderName }}</div>\n            </div>\n            \n            @if (expirationDate) {\n              <div class=\"flex-1\">\n                <div class=\"text-xs text-primary-content/60 mb-1\">V\u00C1LIDA HASTA</div>\n                <div class=\"font-mono text-sm text-primary-content\">{{ expirationDate }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Card Background Pattern -->\n        <div class=\"absolute inset-0 opacity-20\">\n          <div class=\"absolute top-4 right-4 w-20 h-20 rounded-full bg-primary-content/30\"></div>\n          <div class=\"absolute bottom-4 left-4 w-16 h-16 rounded-full bg-primary-content/20\"></div>\n          <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full bg-primary-content/10\"></div>\n        </div>\n      </div>\n      <div class=\"bg-secondary grid place-content-center rounded-box\"></div>\n      <div class=\"bg-accent grid place-content-center rounded-box\"></div>\n    </div>\n\n    <!-- Additional Information Below Cards -->\n    <div class=\"mt-6 space-y-4\">\n      <!-- Billing Information -->\n      @if (billingEmail || billingPhone) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n              Informaci\u00F3n de Contacto\n            </h4>\n            \n            <div class=\"space-y-2\">\n              @if (billingEmail) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingEmail }}</span>\n                </div>\n              }\n              \n              @if (billingPhone) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingPhone }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Billing Address -->\n      @if (billingAddress && (billingAddress.line1 || billingAddress.city)) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n              </svg>\n              Direcci\u00F3n de Facturaci\u00F3n\n            </h4>\n            \n            <div class=\"text-sm text-base-content/70 space-y-1\">\n              @if (billingAddress.line1) {\n                <div>{{ billingAddress.line1 }}</div>\n                @if (billingAddress.line2) {\n                  <div>{{ billingAddress.line2 }}</div>\n                }\n              }\n              \n              <div class=\"flex gap-2 flex-wrap\">\n                @if (billingAddress.city) {\n                  <span>{{ billingAddress.city }}</span>\n                }\n                @if (billingAddress.postal_code) {\n                  <span>{{ billingAddress.postal_code }}</span>\n                }\n                @if (billingAddress.country) {\n                  <span class=\"uppercase\">{{ billingAddress.country }}</span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Card Creation Date -->\n      <div class=\"flex items-center justify-between text-sm text-base-content/60 px-2\">\n        <span>M\u00E9todo agregado:</span>\n        <span>{{ paymentMethod().created * 1000 | date:'short' }}</span>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Compact Version -->\n@if (mode() === 'compact') {\n  <div class=\"flex items-center gap-2\">\n    <!--<span class=\"text-xl filter drop-shadow-sm\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n    \n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-medium\" [ngxBrandName]=\"paymentMethod()\"></span>\n        <span class=\"text-base-content/70\">\u2022\u2022\u2022\u2022 {{ last4 }}</span>\n        @if (paymentMethod().type === 'card' && expirationDate) {\n          <span class=\"text-base-content/70 text-sm\">{{ expirationDate }}</span>\n        }\n      </div>\n    </div>\n\n    @if (isExpired) {\n      <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\">Activa</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BrandNameDirective, selector: "[ngxBrandName]", inputs: ["ngxBrandName"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-payment-method', standalone: true, imports: [CommonModule, BrandIconDirective, BrandNameDirective, PaymentMethodTypeDirective], template: "<!-- Detailed Version -->\n@if (mode() === 'detailed') {\n  <div class=\"w-full max-w-md mx-auto\">\n    <!-- Stack of Credit Cards -->\n    <div class=\"stack w-full h-56\">\n      <div class=\"bg-gradient-to-br from-primary to-accent text-neutral-content relative place-content-center rounded-box\">\n        <div class=\"card-body p-6 relative z-10\">\n          <!-- Card Header -->\n          <div class=\"flex justify-between items-start mb-6\">\n            <div class=\"flex items-center gap-2\">\n              <!--<span class=\"text-3xl filter drop-shadow-lg\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n              <div class=\"font-bold text-lg text-primary-content\" [ngxBrandName]=\"paymentMethod()\"></div>\n              @if (cardCountry) {\n                <div class=\"text-xs text-primary-content/60 uppercase\">{{ cardCountry }}</div>\n              }\n              @if (isExpired) {\n                <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n              }\n            </div>\n          </div>\n\n          <!-- Card Number -->\n          <div class=\"mb-6\">\n            <div class=\"font-mono text-xl tracking-wider text-primary-content\">\n              **** **** **** {{ last4 }}\n            </div>\n          </div>\n\n          <!-- Card Bottom Info -->\n          <div class=\"flex justify-start items-end\">\n            <div class=\"flex-1\">\n              <div class=\"text-xs text-primary-content/60 mb-1\">TITULAR</div>\n              <div class=\"font-medium text-sm text-primary-content truncate max-w-32\">{{ holderName }}</div>\n            </div>\n            \n            @if (expirationDate) {\n              <div class=\"flex-1\">\n                <div class=\"text-xs text-primary-content/60 mb-1\">V\u00C1LIDA HASTA</div>\n                <div class=\"font-mono text-sm text-primary-content\">{{ expirationDate }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Card Background Pattern -->\n        <div class=\"absolute inset-0 opacity-20\">\n          <div class=\"absolute top-4 right-4 w-20 h-20 rounded-full bg-primary-content/30\"></div>\n          <div class=\"absolute bottom-4 left-4 w-16 h-16 rounded-full bg-primary-content/20\"></div>\n          <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full bg-primary-content/10\"></div>\n        </div>\n      </div>\n      <div class=\"bg-secondary grid place-content-center rounded-box\"></div>\n      <div class=\"bg-accent grid place-content-center rounded-box\"></div>\n    </div>\n\n    <!-- Additional Information Below Cards -->\n    <div class=\"mt-6 space-y-4\">\n      <!-- Billing Information -->\n      @if (billingEmail || billingPhone) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n              Informaci\u00F3n de Contacto\n            </h4>\n            \n            <div class=\"space-y-2\">\n              @if (billingEmail) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingEmail }}</span>\n                </div>\n              }\n              \n              @if (billingPhone) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingPhone }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Billing Address -->\n      @if (billingAddress && (billingAddress.line1 || billingAddress.city)) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n              </svg>\n              Direcci\u00F3n de Facturaci\u00F3n\n            </h4>\n            \n            <div class=\"text-sm text-base-content/70 space-y-1\">\n              @if (billingAddress.line1) {\n                <div>{{ billingAddress.line1 }}</div>\n                @if (billingAddress.line2) {\n                  <div>{{ billingAddress.line2 }}</div>\n                }\n              }\n              \n              <div class=\"flex gap-2 flex-wrap\">\n                @if (billingAddress.city) {\n                  <span>{{ billingAddress.city }}</span>\n                }\n                @if (billingAddress.postal_code) {\n                  <span>{{ billingAddress.postal_code }}</span>\n                }\n                @if (billingAddress.country) {\n                  <span class=\"uppercase\">{{ billingAddress.country }}</span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Card Creation Date -->\n      <div class=\"flex items-center justify-between text-sm text-base-content/60 px-2\">\n        <span>M\u00E9todo agregado:</span>\n        <span>{{ paymentMethod().created * 1000 | date:'short' }}</span>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Compact Version -->\n@if (mode() === 'compact') {\n  <div class=\"flex items-center gap-2\">\n    <!--<span class=\"text-xl filter drop-shadow-sm\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n    \n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-medium\" [ngxBrandName]=\"paymentMethod()\"></span>\n        <span class=\"text-base-content/70\">\u2022\u2022\u2022\u2022 {{ last4 }}</span>\n        @if (paymentMethod().type === 'card' && expirationDate) {\n          <span class=\"text-base-content/70 text-sm\">{{ expirationDate }}</span>\n        }\n      </div>\n    </div>\n\n    @if (isExpired) {\n      <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\">Activa</div>\n    }\n  </div>\n}\n" }]
-        }] });
+        }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentMethod", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 class PaymentIntentsDialogComponent {
-    paymentIntent = input.required();
-    dialogId = input.required();
+    paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
+    dialogId = input.required(...(ngDevMode ? [{ debugName: "dialogId" }] : []));
     utils = new UtilsService();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsDialogComponent, isStandalone: true, selector: "lib-payment-intents-dialog", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null }, dialogId: { classPropertyName: "dialogId", publicName: "dialogId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dialog [id]=\"dialogId()\" class=\"modal\">\n  <div class=\"modal-box max-w-2xl\">\n    <h3 class=\"font-bold text-lg mb-4\">Detalles del Payment Intent</h3>\n    \n    <!-- Header with Amount and Status -->\n    <div class=\"flex items-center gap-3 mb-6 p-4 bg-base-200 rounded-lg\">\n      <div class=\"flex-1\">\n        <div class=\"text-3xl font-bold text-primary\">\n          {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-sm text-base-content/70\">\n          {{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}\n        </div>\n      </div>\n      <div class=\"flex gap-2\">\n        <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }}\">\n          {{ paymentIntent().status }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\n      <!-- Transaction Details -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          Detalles de la Transacci\u00F3n\n        </h4>\n        \n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Estado</div>\n            <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Monto</div>\n            <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n            <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n          </div>\n        </div>\n\n        <!-- Confirmation Method -->\n        <div class=\"mt-3 flex items-center gap-2 text-sm p-2 bg-base-200 rounded\">\n          <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n          <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\n      <!-- Payment Information -->\n      @if (paymentIntent().paymentMethod) {\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n            Informaci\u00F3n del Pago\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\n      <!-- Additional Information -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          Informaci\u00F3n Adicional\n        </h4>\n        \n        <div class=\"space-y-2\">\n          @if (paymentIntent().invoiceId) {\n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Factura</span>\n              <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n            </div>\n          }\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Entorno</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\">Producci\u00F3n</span>\n              } @else {\n                <span class=\"text-warning\">Pruebas</span>\n              }\n            </span>\n          </div>\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Referencia</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-action\">\n      <form method=\"dialog\">\n        <button class=\"btn btn-primary\">Cerrar</button>\n      </form>\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentIntentsDialogComponent, isStandalone: true, selector: "lib-payment-intents-dialog", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null }, dialogId: { classPropertyName: "dialogId", publicName: "dialogId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dialog [id]=\"dialogId()\" class=\"modal\">\n  <div class=\"modal-box max-w-2xl\">\n    <h3 class=\"font-bold text-lg mb-4\">Detalles del Payment Intent</h3>\n    \n    <!-- Header with Amount and Status -->\n    <div class=\"flex items-center gap-3 mb-6 p-4 bg-base-200 rounded-lg\">\n      <div class=\"flex-1\">\n        <div class=\"text-3xl font-bold text-primary\">\n          {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-sm text-base-content/70\">\n          {{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}\n        </div>\n      </div>\n      <div class=\"flex gap-2\">\n        <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }}\">\n          {{ paymentIntent().status }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\n      <!-- Transaction Details -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          Detalles de la Transacci\u00F3n\n        </h4>\n        \n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Estado</div>\n            <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Monto</div>\n            <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n            <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n          </div>\n        </div>\n\n        <!-- Confirmation Method -->\n        <div class=\"mt-3 flex items-center gap-2 text-sm p-2 bg-base-200 rounded\">\n          <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n          <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\n      <!-- Payment Information -->\n      @if (paymentIntent().paymentMethod) {\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n            Informaci\u00F3n del Pago\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\n      <!-- Additional Information -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          Informaci\u00F3n Adicional\n        </h4>\n        \n        <div class=\"space-y-2\">\n          @if (paymentIntent().invoiceId) {\n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Factura</span>\n              <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n            </div>\n          }\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Entorno</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\">Producci\u00F3n</span>\n              } @else {\n                <span class=\"text-warning\">Pruebas</span>\n              }\n            </span>\n          </div>\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Referencia</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-action\">\n      <form method=\"dialog\">\n        <button class=\"btn btn-primary\">Cerrar</button>\n      </form>\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intents-dialog', standalone: true, imports: [CommonModule, PaymentMethodComponent], template: "<dialog [id]=\"dialogId()\" class=\"modal\">\n  <div class=\"modal-box max-w-2xl\">\n    <h3 class=\"font-bold text-lg mb-4\">Detalles del Payment Intent</h3>\n    \n    <!-- Header with Amount and Status -->\n    <div class=\"flex items-center gap-3 mb-6 p-4 bg-base-200 rounded-lg\">\n      <div class=\"flex-1\">\n        <div class=\"text-3xl font-bold text-primary\">\n          {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-sm text-base-content/70\">\n          {{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}\n        </div>\n      </div>\n      <div class=\"flex gap-2\">\n        <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }}\">\n          {{ paymentIntent().status }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\n      <!-- Transaction Details -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          Detalles de la Transacci\u00F3n\n        </h4>\n        \n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Estado</div>\n            <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Monto</div>\n            <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n            <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n          </div>\n        </div>\n\n        <!-- Confirmation Method -->\n        <div class=\"mt-3 flex items-center gap-2 text-sm p-2 bg-base-200 rounded\">\n          <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n          <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\n      <!-- Payment Information -->\n      @if (paymentIntent().paymentMethod) {\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n            Informaci\u00F3n del Pago\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\n      <!-- Additional Information -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          Informaci\u00F3n Adicional\n        </h4>\n        \n        <div class=\"space-y-2\">\n          @if (paymentIntent().invoiceId) {\n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Factura</span>\n              <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n            </div>\n          }\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Entorno</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\">Producci\u00F3n</span>\n              } @else {\n                <span class=\"text-warning\">Pruebas</span>\n              }\n            </span>\n          </div>\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Referencia</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-action\">\n      <form method=\"dialog\">\n        <button class=\"btn btn-primary\">Cerrar</button>\n      </form>\n    </div>\n  </div>\n</dialog>\n" }]
-        }] });
+        }], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }], dialogId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogId", required: true }] }] } });
 
 class PaymentIntentsTableComponent {
-    paymentIntents = input.required();
+    paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
     paymentIntentsTable = computed(() => {
         return this.paymentIntents().map(paymentIntent => ({
             ...paymentIntent,
             selected: false
         }));
-    });
-    loading = input(false);
-    error = input(null);
-    withControls = input(true);
+    }, ...(ngDevMode ? [{ debugName: "paymentIntentsTable" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
     exportSelected = output();
     onRefresh = output();
     utils = inject(UtilsService);
-    hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0);
+    hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0, ...(ngDevMode ? [{ debugName: "hasPaymentIntents" }] : []));
     trackByPaymentIntentId = (index, item) => item.id;
     refreshPaymentIntents() {
         this.onRefresh.emit();
@@ -1788,23 +1788,23 @@ class PaymentIntentsTableComponent {
     exportSelectedPaymentIntents() {
         this.exportSelected.emit(this.paymentIntentsTable().filter(paymentIntent => paymentIntent.selected));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsTableComponent, isStandalone: true, selector: "lib-payment-intents-table", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportSelected: "exportSelected", onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                @if (paymentIntent.paymentMethod) {\n                  <ngx-payment-method \n                    [paymentMethod]=\"paymentIntent.paymentMethod!\" \n                    mode=\"compact\">\n                  </ngx-payment-method>\n                } @else {\n                  <span class=\"badge badge-outline\">\n                    {{ paymentIntent.paymentMethodId }}\n                  </span>\n                }\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <lib-payment-intents-dialog \n                  [paymentIntent]=\"paymentIntent\" \n                  [dialogId]=\"'modal-' + paymentIntent.id\">\n                </lib-payment-intents-dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }, { kind: "component", type: PaymentIntentsDialogComponent, selector: "lib-payment-intents-dialog", inputs: ["paymentIntent", "dialogId"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentIntentsTableComponent, isStandalone: true, selector: "lib-payment-intents-table", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportSelected: "exportSelected", onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                @if (paymentIntent.paymentMethod) {\n                  <ngx-payment-method \n                    [paymentMethod]=\"paymentIntent.paymentMethod!\" \n                    mode=\"compact\">\n                  </ngx-payment-method>\n                } @else {\n                  <span class=\"badge badge-outline\">\n                    {{ paymentIntent.paymentMethodId }}\n                  </span>\n                }\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <lib-payment-intents-dialog \n                  [paymentIntent]=\"paymentIntent\" \n                  [dialogId]=\"'modal-' + paymentIntent.id\">\n                </lib-payment-intents-dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }, { kind: "component", type: PaymentIntentsDialogComponent, selector: "lib-payment-intents-dialog", inputs: ["paymentIntent", "dialogId"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intents-table', standalone: true, imports: [
                         CommonModule,
                         PaymentMethodComponent,
                         PaymentIntentsDialogComponent
                     ], template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                @if (paymentIntent.paymentMethod) {\n                  <ngx-payment-method \n                    [paymentMethod]=\"paymentIntent.paymentMethod!\" \n                    mode=\"compact\">\n                  </ngx-payment-method>\n                } @else {\n                  <span class=\"badge badge-outline\">\n                    {{ paymentIntent.paymentMethodId }}\n                  </span>\n                }\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <lib-payment-intents-dialog \n                  [paymentIntent]=\"paymentIntent\" \n                  [dialogId]=\"'modal-' + paymentIntent.id\">\n                </lib-payment-intents-dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> " }]
-        }] });
+        }], propDecorators: { paymentIntents: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntents", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "withControls", required: false }] }], exportSelected: [{ type: i0.Output, args: ["exportSelected"] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }] } });
 
 class SubscriptionItemSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SubscriptionItemSkeletonComponent, isStandalone: true, selector: "lib-subscription-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <div class=\"flex items-center gap-2\">\n          <div class=\"skeleton h-6 w-32\"></div>\n          <div class=\"skeleton h-5 w-20\"></div>\n        </div>\n        <div class=\"skeleton h-4 w-48 mt-2\"></div>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <div class=\"skeleton h-8 w-20\"></div>\n      </div>\n    </div>\n\n    <div class=\"mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div class=\"skeleton h-4 w-32\"></div>\n        <div class=\"skeleton h-4 w-32\"></div>\n      </div>\n    </div>\n\n    <!--<div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <div class=\"card-actions mt-4 justify-end\">\n        <div class=\"skeleton h-8 w-32\"></div>\n      </div>\n    </div>-->\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SubscriptionItemSkeletonComponent, isStandalone: true, selector: "lib-subscription-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <div class=\"flex items-center gap-2\">\n          <div class=\"skeleton h-6 w-32\"></div>\n          <div class=\"skeleton h-5 w-20\"></div>\n        </div>\n        <div class=\"skeleton h-4 w-48 mt-2\"></div>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <div class=\"skeleton h-8 w-20\"></div>\n      </div>\n    </div>\n\n    <div class=\"mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div class=\"skeleton h-4 w-32\"></div>\n        <div class=\"skeleton h-4 w-32\"></div>\n      </div>\n    </div>\n\n    <!--<div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <div class=\"card-actions mt-4 justify-end\">\n        <div class=\"skeleton h-8 w-32\"></div>\n      </div>\n    </div>-->\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <div class=\"flex items-center gap-2\">\n          <div class=\"skeleton h-6 w-32\"></div>\n          <div class=\"skeleton h-5 w-20\"></div>\n        </div>\n        <div class=\"skeleton h-4 w-48 mt-2\"></div>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <div class=\"skeleton h-8 w-20\"></div>\n      </div>\n    </div>\n\n    <div class=\"mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div class=\"skeleton h-4 w-32\"></div>\n        <div class=\"skeleton h-4 w-32\"></div>\n      </div>\n    </div>\n\n    <!--<div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <div class=\"card-actions mt-4 justify-end\">\n        <div class=\"skeleton h-8 w-32\"></div>\n      </div>\n    </div>-->\n  </div>\n</div>" }]
         }] });
@@ -1814,12 +1814,12 @@ class SubscriptionItemComponent {
     portalAccountStore = inject(PortalAccountStore);
     utils = inject(UtilsService);
     sanitizer = inject(DomSanitizer);
-    subscription = input.required();
+    subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
     onManageSubscription = output();
-    isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading());
+    isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading(), ...(ngDevMode ? [{ debugName: "isStatusLoading" }] : []));
     productImage = computed(() => {
         return this.subscription().product?.images?.[0] || 'https://img.daisyui.com/images/profile/demo/yellingcat@192.webp';
-    });
+    }, ...(ngDevMode ? [{ debugName: "productImage" }] : []));
     isExpanded = false;
     toggleExpand() {
         this.isExpanded = !this.isExpanded;
@@ -1830,44 +1830,44 @@ class SubscriptionItemComponent {
     sanitizeImageUrl(imageUrl) {
         return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionItemComponent, isStandalone: true, selector: "lib-subscription-item", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-300\">\n  <div class=\"card-body p-6\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start mb-4\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Imagen de la suscripci\u00F3n -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || 'Subscription product'\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div>\n          <h3 class=\"text-2xl font-bold text-base-content\">\n            {{ subscription().product?.name || 'Subscription Plan' }}\n          </h3>\n          <div class=\"flex items-center gap-2 mt-1\">\n            <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-lg\">\n              {{ subscription().status }}\n            </span>\n            @if (subscription().cancel.cancel_at_period_end) {\n              <span class=\"badge badge-warning badge-lg\">Cancelada</span>\n            }\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-4xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-lg capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <!-- Fechas de per\u00EDodo -->\n    <div class=\"flex justify-between items-center py-4 border-t border-base-300\">\n      <div class=\"text-left\">\n        <div class=\"text-base-content/70 text-sm font-medium\">Start:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_start ?? '') }}\n        </div>\n      </div>\n      \n      <div class=\"text-right\">\n        <div class=\"text-base-content/70 text-sm font-medium\">End:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_end ?? '') }}\n        </div>\n      </div>\n    </div>\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          Cargando...\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          Gestionar Suscripci\u00F3n\n        }\n      </button>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionItemComponent, isStandalone: true, selector: "lib-subscription-item", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-300\">\n  <div class=\"card-body p-6\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start mb-4\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Imagen de la suscripci\u00F3n -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || 'Subscription product'\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div>\n          <h3 class=\"text-2xl font-bold text-base-content\">\n            {{ subscription().product?.name || 'Subscription Plan' }}\n          </h3>\n          <div class=\"flex items-center gap-2 mt-1\">\n            <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-lg\">\n              {{ subscription().status }}\n            </span>\n            @if (subscription().cancel.cancel_at_period_end) {\n              <span class=\"badge badge-warning badge-lg\">Cancelada</span>\n            }\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-4xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-lg capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <!-- Fechas de per\u00EDodo -->\n    <div class=\"flex justify-between items-center py-4 border-t border-base-300\">\n      <div class=\"text-left\">\n        <div class=\"text-base-content/70 text-sm font-medium\">Start:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_start ?? '') }}\n        </div>\n      </div>\n      \n      <div class=\"text-right\">\n        <div class=\"text-base-content/70 text-sm font-medium\">End:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_end ?? '') }}\n        </div>\n      </div>\n    </div>\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          Cargando...\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          Gestionar Suscripci\u00F3n\n        }\n      </button>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-300\">\n  <div class=\"card-body p-6\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start mb-4\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Imagen de la suscripci\u00F3n -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || 'Subscription product'\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div>\n          <h3 class=\"text-2xl font-bold text-base-content\">\n            {{ subscription().product?.name || 'Subscription Plan' }}\n          </h3>\n          <div class=\"flex items-center gap-2 mt-1\">\n            <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-lg\">\n              {{ subscription().status }}\n            </span>\n            @if (subscription().cancel.cancel_at_period_end) {\n              <span class=\"badge badge-warning badge-lg\">Cancelada</span>\n            }\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-4xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-lg capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <!-- Fechas de per\u00EDodo -->\n    <div class=\"flex justify-between items-center py-4 border-t border-base-300\">\n      <div class=\"text-left\">\n        <div class=\"text-base-content/70 text-sm font-medium\">Start:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_start ?? '') }}\n        </div>\n      </div>\n      \n      <div class=\"text-right\">\n        <div class=\"text-base-content/70 text-sm font-medium\">End:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_end ?? '') }}\n        </div>\n      </div>\n    </div>\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          Cargando...\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          Gestionar Suscripci\u00F3n\n        }\n      </button>\n    </div>\n  </div>\n</div> " }]
-        }] });
+        }], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
 
 class SubscriptionsListComponent {
-    subscriptions = input.required();
-    loading = input(false);
-    error = input(null);
-    withEmptyState = input(true);
+    subscriptions = input.required(...(ngDevMode ? [{ debugName: "subscriptions" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    withEmptyState = input(true, ...(ngDevMode ? [{ debugName: "withEmptyState" }] : []));
     onManageSubscription = output();
     manageSubscription(customerId) {
         this.onManageSubscription.emit(customerId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionsListComponent, isStandalone: true, selector: "lib-subscriptions-list", inputs: { subscriptions: { classPropertyName: "subscriptions", publicName: "subscriptions", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withEmptyState: { classPropertyName: "withEmptyState", publicName: "withEmptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"subscriptions-container\">\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-subscription-item-skeleton></lib-subscription-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (subscriptions().length > 0) {\n    <div class=\"subscriptions-list flex flex-col gap-4\">\n      @for (subscription of subscriptions(); track subscription.id) {\n        <lib-subscription-item \n          [subscription]=\"subscription\"\n          (onManageSubscription)=\"manageSubscription($event)\">\n        </lib-subscription-item>\n      }\n    </div>\n  } @else if (withEmptyState() && subscriptions().length === 0 && !loading()) {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n          <div class=\"card-body items-center text-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <h2 class=\"card-title text-xl\">No tienes suscripciones activas</h2>\n            <p class=\"text-gray-600\">Consulta nuestros planes para comenzar una suscripci\u00F3n.</p>\n          </div>\n        </div>\n      </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionItemComponent, selector: "lib-subscription-item", inputs: ["subscription"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionItemSkeletonComponent, selector: "lib-subscription-item-skeleton" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionsListComponent, isStandalone: true, selector: "lib-subscriptions-list", inputs: { subscriptions: { classPropertyName: "subscriptions", publicName: "subscriptions", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withEmptyState: { classPropertyName: "withEmptyState", publicName: "withEmptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"subscriptions-container\">\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-subscription-item-skeleton></lib-subscription-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (subscriptions().length > 0) {\n    <div class=\"subscriptions-list flex flex-col gap-4\">\n      @for (subscription of subscriptions(); track subscription.id) {\n        <lib-subscription-item \n          [subscription]=\"subscription\"\n          (onManageSubscription)=\"manageSubscription($event)\">\n        </lib-subscription-item>\n      }\n    </div>\n  } @else if (withEmptyState() && subscriptions().length === 0 && !loading()) {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n          <div class=\"card-body items-center text-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <h2 class=\"card-title text-xl\">No tienes suscripciones activas</h2>\n            <p class=\"text-gray-600\">Consulta nuestros planes para comenzar una suscripci\u00F3n.</p>\n          </div>\n        </div>\n      </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionItemComponent, selector: "lib-subscription-item", inputs: ["subscription"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionItemSkeletonComponent, selector: "lib-subscription-item-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscriptions-list', standalone: true, imports: [CommonModule, SubscriptionItemComponent, SubscriptionItemSkeletonComponent], template: "<div class=\"subscriptions-container\">\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-subscription-item-skeleton></lib-subscription-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (subscriptions().length > 0) {\n    <div class=\"subscriptions-list flex flex-col gap-4\">\n      @for (subscription of subscriptions(); track subscription.id) {\n        <lib-subscription-item \n          [subscription]=\"subscription\"\n          (onManageSubscription)=\"manageSubscription($event)\">\n        </lib-subscription-item>\n      }\n    </div>\n  } @else if (withEmptyState() && subscriptions().length === 0 && !loading()) {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n          <div class=\"card-body items-center text-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <h2 class=\"card-title text-xl\">No tienes suscripciones activas</h2>\n            <p class=\"text-gray-600\">Consulta nuestros planes para comenzar una suscripci\u00F3n.</p>\n          </div>\n        </div>\n      </div>\n  }\n</div> " }]
-        }] });
+        }], propDecorators: { subscriptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptions", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withEmptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "withEmptyState", required: false }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
 
 class SubscriptionCardSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SubscriptionCardSkeletonComponent, isStandalone: true, selector: "lib-subscription-card-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 w-96 shadow-sm\">\n  <figure class=\"flex items-center justify-center\">\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <div class=\"skeleton h-8 w-2/3\"></div>\n      <div class=\"skeleton h-6 w-24 rounded-full\"></div>\n    </div>\n    \n    <div class=\"mt-3\">\n      <div class=\"skeleton h-4 w-full\"></div>\n      <div class=\"skeleton h-4 w-5/6 mt-2\"></div>\n    </div>\n    \n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-40 rounded-lg\"></div>\n    </div>\n  </div>\n</div> " });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SubscriptionCardSkeletonComponent, isStandalone: true, selector: "lib-subscription-card-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 w-96 shadow-sm\">\n  <figure class=\"flex items-center justify-center\">\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <div class=\"skeleton h-8 w-2/3\"></div>\n      <div class=\"skeleton h-6 w-24 rounded-full\"></div>\n    </div>\n    \n    <div class=\"mt-3\">\n      <div class=\"skeleton h-4 w-full\"></div>\n      <div class=\"skeleton h-4 w-5/6 mt-2\"></div>\n    </div>\n    \n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-40 rounded-lg\"></div>\n    </div>\n  </div>\n</div> " });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionCardSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-card-skeleton', standalone: true, template: "<div class=\"card bg-base-100 w-96 shadow-sm\">\n  <figure class=\"flex items-center justify-center\">\n    <div class=\"skeleton h-48 w-full\"></div>\n  </figure>\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <div class=\"skeleton h-8 w-2/3\"></div>\n      <div class=\"skeleton h-6 w-24 rounded-full\"></div>\n    </div>\n    \n    <div class=\"mt-3\">\n      <div class=\"skeleton h-4 w-full\"></div>\n      <div class=\"skeleton h-4 w-5/6 mt-2\"></div>\n    </div>\n    \n    <div class=\"card-actions justify-end mt-4\">\n      <div class=\"skeleton h-10 w-40 rounded-lg\"></div>\n    </div>\n  </div>\n</div> " }]
         }] });
 
 class SubscriptionCardComponent {
-    subscription = input.required();
-    loading = input(false);
-    error = input(null);
+    subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     utils = inject(UtilsService);
     onManageSubscription = output();
     hasValidProductImages() {
@@ -1886,64 +1886,64 @@ class SubscriptionCardComponent {
     manageSubscription() {
         this.onManageSubscription.emit(this.subscription().customer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionCardComponent, isStandalone: true, selector: "lib-subscription-card", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "@if (loading()) {\n  <lib-subscription-card-skeleton></lib-subscription-card-skeleton>\n} @else if (error()) {\n  <div class=\"alert alert-error\">{{ error() }}</div>\n} @else if (subscription()) {\n  <div class=\"card bg-base-100 w-96 shadow-sm \">\n  @if (hasValidProductImages()) {\n    <figure class=\"flex items-center justify-center\">\n      <img [src]=\"getProductImage()\" [alt]=\"getProductName()\" class=\"h-48 w-full object-cover\" />\n    </figure>\n  }\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <h2 class=\"card-title\">{{ getProductName() }}</h2>\n      <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} subscription-status\">\n        {{ subscription().status }}\n      </span>\n    </div>\n    \n    <div class=\"mt-3\">\n      <p class=\"opacity-75\">{{ subscription().product?.description }}</p>\n    </div>\n    \n    <div class=\"card-actions justify-end\">\n      <button class=\"btn btn-primary\" (click)=\"manageSubscription()\">\n        Manage Subscription\n      </button>\n    </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardSkeletonComponent, selector: "lib-subscription-card-skeleton" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionCardComponent, isStandalone: true, selector: "lib-subscription-card", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "@if (loading()) {\n  <lib-subscription-card-skeleton></lib-subscription-card-skeleton>\n} @else if (error()) {\n  <div class=\"alert alert-error\">{{ error() }}</div>\n} @else if (subscription()) {\n  <div class=\"card bg-base-100 w-96 shadow-sm \">\n  @if (hasValidProductImages()) {\n    <figure class=\"flex items-center justify-center\">\n      <img [src]=\"getProductImage()\" [alt]=\"getProductName()\" class=\"h-48 w-full object-cover\" />\n    </figure>\n  }\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <h2 class=\"card-title\">{{ getProductName() }}</h2>\n      <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} subscription-status\">\n        {{ subscription().status }}\n      </span>\n    </div>\n    \n    <div class=\"mt-3\">\n      <p class=\"opacity-75\">{{ subscription().product?.description }}</p>\n    </div>\n    \n    <div class=\"card-actions justify-end\">\n      <button class=\"btn btn-primary\" (click)=\"manageSubscription()\">\n        Manage Subscription\n      </button>\n    </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardSkeletonComponent, selector: "lib-subscription-card-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-card', standalone: true, imports: [CommonModule, SubscriptionCardSkeletonComponent], template: "@if (loading()) {\n  <lib-subscription-card-skeleton></lib-subscription-card-skeleton>\n} @else if (error()) {\n  <div class=\"alert alert-error\">{{ error() }}</div>\n} @else if (subscription()) {\n  <div class=\"card bg-base-100 w-96 shadow-sm \">\n  @if (hasValidProductImages()) {\n    <figure class=\"flex items-center justify-center\">\n      <img [src]=\"getProductImage()\" [alt]=\"getProductName()\" class=\"h-48 w-full object-cover\" />\n    </figure>\n  }\n  <div class=\"card-body\">\n    <div class=\"flex justify-between items-center\">\n      <h2 class=\"card-title\">{{ getProductName() }}</h2>\n      <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} subscription-status\">\n        {{ subscription().status }}\n      </span>\n    </div>\n    \n    <div class=\"mt-3\">\n      <p class=\"opacity-75\">{{ subscription().product?.description }}</p>\n    </div>\n    \n    <div class=\"card-actions justify-end\">\n      <button class=\"btn btn-primary\" (click)=\"manageSubscription()\">\n        Manage Subscription\n      </button>\n    </div>\n    </div>\n  </div>\n}\n" }]
-        }] });
+        }], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
 
 class PaymentIntentItemSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: PaymentIntentItemSkeletonComponent, isStandalone: true, selector: "lib-payment-intent-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm card-skeleton\">\n  <div class=\"card-body p-4\">\n    <!-- Header with status and expand button -->\n    <div class=\"flex justify-between\">\n      <div class=\"w-full\">\n        <div class=\"flex items-center\">\n          <!-- Title/Status placeholder -->\n          <div class=\"skeleton w-32 h-6 rounded-md\"></div>\n          <!-- Badge placeholder -->\n          <div class=\"skeleton w-24 h-6 ml-2 rounded-full\"></div>\n        </div>\n        <!-- Customer ID placeholder -->\n        <div class=\"skeleton w-48 h-4 mt-2 rounded-md\"></div>\n      </div>\n      \n      <!-- Details button placeholder -->\n      <div class=\"skeleton w-20 h-8 rounded-md\"></div>\n    </div>\n\n    <!-- Payment details summary -->\n    <div class=\"flex justify-between mt-3\">\n      <div>\n        <!-- Amount placeholder -->\n        <div class=\"skeleton w-32 h-8 rounded-md\"></div>\n      </div>\n      <div>\n        <!-- Date placeholder -->\n        <div class=\"skeleton w-28 h-6 rounded-md\"></div>\n      </div>\n    </div>\n    \n    <!-- Optional expanded details placeholder -->\n    <div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <!-- Details heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-3/4 h-4 rounded-md\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <!-- Second column heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-2/3 h-4 rounded-md\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Action button placeholder -->\n      <div class=\"flex justify-end mt-4\">\n        <div class=\"skeleton w-36 h-10 rounded-md\"></div>\n      </div>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PaymentIntentItemSkeletonComponent, isStandalone: true, selector: "lib-payment-intent-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm card-skeleton\">\n  <div class=\"card-body p-4\">\n    <!-- Header with status and expand button -->\n    <div class=\"flex justify-between\">\n      <div class=\"w-full\">\n        <div class=\"flex items-center\">\n          <!-- Title/Status placeholder -->\n          <div class=\"skeleton w-32 h-6 rounded-md\"></div>\n          <!-- Badge placeholder -->\n          <div class=\"skeleton w-24 h-6 ml-2 rounded-full\"></div>\n        </div>\n        <!-- Customer ID placeholder -->\n        <div class=\"skeleton w-48 h-4 mt-2 rounded-md\"></div>\n      </div>\n      \n      <!-- Details button placeholder -->\n      <div class=\"skeleton w-20 h-8 rounded-md\"></div>\n    </div>\n\n    <!-- Payment details summary -->\n    <div class=\"flex justify-between mt-3\">\n      <div>\n        <!-- Amount placeholder -->\n        <div class=\"skeleton w-32 h-8 rounded-md\"></div>\n      </div>\n      <div>\n        <!-- Date placeholder -->\n        <div class=\"skeleton w-28 h-6 rounded-md\"></div>\n      </div>\n    </div>\n    \n    <!-- Optional expanded details placeholder -->\n    <div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <!-- Details heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-3/4 h-4 rounded-md\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <!-- Second column heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-2/3 h-4 rounded-md\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Action button placeholder -->\n      <div class=\"flex justify-end mt-4\">\n        <div class=\"skeleton w-36 h-10 rounded-md\"></div>\n      </div>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intent-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm card-skeleton\">\n  <div class=\"card-body p-4\">\n    <!-- Header with status and expand button -->\n    <div class=\"flex justify-between\">\n      <div class=\"w-full\">\n        <div class=\"flex items-center\">\n          <!-- Title/Status placeholder -->\n          <div class=\"skeleton w-32 h-6 rounded-md\"></div>\n          <!-- Badge placeholder -->\n          <div class=\"skeleton w-24 h-6 ml-2 rounded-full\"></div>\n        </div>\n        <!-- Customer ID placeholder -->\n        <div class=\"skeleton w-48 h-4 mt-2 rounded-md\"></div>\n      </div>\n      \n      <!-- Details button placeholder -->\n      <div class=\"skeleton w-20 h-8 rounded-md\"></div>\n    </div>\n\n    <!-- Payment details summary -->\n    <div class=\"flex justify-between mt-3\">\n      <div>\n        <!-- Amount placeholder -->\n        <div class=\"skeleton w-32 h-8 rounded-md\"></div>\n      </div>\n      <div>\n        <!-- Date placeholder -->\n        <div class=\"skeleton w-28 h-6 rounded-md\"></div>\n      </div>\n    </div>\n    \n    <!-- Optional expanded details placeholder -->\n    <div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <!-- Details heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-3/4 h-4 rounded-md\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <!-- Second column heading placeholder -->\n          <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n          \n          <!-- List items placeholders -->\n          <div class=\"space-y-2\">\n            <div class=\"skeleton w-full h-4 rounded-md\"></div>\n            <div class=\"skeleton w-2/3 h-4 rounded-md\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Action button placeholder -->\n      <div class=\"flex justify-end mt-4\">\n        <div class=\"skeleton w-36 h-10 rounded-md\"></div>\n      </div>\n    </div>\n  </div>\n</div> " }]
         }] });
 
 class PaymentIntentItemComponent {
-    paymentIntent = input.required();
+    paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
     utils = inject(UtilsService);
-    isExpanded = signal(false);
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     toggleExpand() {
         this.isExpanded.update(value => !value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentItemComponent, isStandalone: true, selector: "lib-payment-intent-item", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-all duration-200 border border-base-200\">\n  <div class=\"card-body p-4\">\n    \n    <!-- Header Section -->\n    <div class=\"flex justify-between items-start mb-3\">\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <div class=\"text-2xl font-bold text-primary\">\n            {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n          </div>\n          <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} badge-sm\">\n            {{ paymentIntent().status }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\">TEST</div>\n          }\n        </div>\n      </div>\n      \n      <button \n        class=\"btn btn-sm btn-ghost btn-circle\" \n        (click)=\"toggleExpand()\"\n        [class.rotate-180]=\"isExpanded()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 transition-transform duration-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Main Info Section -->\n    <div class=\"space-y-2\">\n      <!-- Payment Method -->\n      @if (paymentIntent().paymentMethod) {\n        <ngx-payment-method \n          [paymentMethod]=\"paymentIntent().paymentMethod!\" \n          mode=\"compact\">\n        </ngx-payment-method>\n      } @else {\n        <div class=\"flex items-center gap-2 p-2 bg-base-200 rounded-lg\">\n          <div class=\"w-8 h-8 bg-base-300 rounded-full flex items-center justify-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n          </div>\n          <div>\n            <div class=\"font-medium text-sm\">M\u00E9todo de pago</div>\n            <div class=\"text-xs text-base-content/70\">\u2022\u2022\u2022\u2022 {{ paymentIntent().paymentMethodId.slice(-4) }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Confirmation Method -->\n      <div class=\"flex items-center gap-2 text-sm\">\n        <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n        <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\n        <!-- Transaction Details -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            Detalles de la Transacci\u00F3n\n          </h4>\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Estado</div>\n              <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Monto</div>\n              <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n              <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Payment Information -->\n        @if (paymentIntent().paymentMethod) {\n          <div>\n            <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n              Informaci\u00F3n del Pago\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\n        <!-- Additional Information -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n            </svg>\n            Informaci\u00F3n Adicional\n          </h4>\n          \n          <div class=\"space-y-2\">\n            @if (paymentIntent().invoiceId) {\n              <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n                <span class=\"text-sm text-base-content/70\">Factura</span>\n                <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n              </div>\n            }\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Entorno</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\">Producci\u00F3n</span>\n                } @else {\n                  <span class=\"text-warning\">Pruebas</span>\n                }\n              </span>\n            </div>\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Referencia</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentIntentItemComponent, isStandalone: true, selector: "lib-payment-intent-item", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-all duration-200 border border-base-200\">\n  <div class=\"card-body p-4\">\n    \n    <!-- Header Section -->\n    <div class=\"flex justify-between items-start mb-3\">\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <div class=\"text-2xl font-bold text-primary\">\n            {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n          </div>\n          <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} badge-sm\">\n            {{ paymentIntent().status }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\">TEST</div>\n          }\n        </div>\n      </div>\n      \n      <button \n        class=\"btn btn-sm btn-ghost btn-circle\" \n        (click)=\"toggleExpand()\"\n        [class.rotate-180]=\"isExpanded()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 transition-transform duration-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Main Info Section -->\n    <div class=\"space-y-2\">\n      <!-- Payment Method -->\n      @if (paymentIntent().paymentMethod) {\n        <ngx-payment-method \n          [paymentMethod]=\"paymentIntent().paymentMethod!\" \n          mode=\"compact\">\n        </ngx-payment-method>\n      } @else {\n        <div class=\"flex items-center gap-2 p-2 bg-base-200 rounded-lg\">\n          <div class=\"w-8 h-8 bg-base-300 rounded-full flex items-center justify-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n          </div>\n          <div>\n            <div class=\"font-medium text-sm\">M\u00E9todo de pago</div>\n            <div class=\"text-xs text-base-content/70\">\u2022\u2022\u2022\u2022 {{ paymentIntent().paymentMethodId.slice(-4) }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Confirmation Method -->\n      <div class=\"flex items-center gap-2 text-sm\">\n        <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n        <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\n        <!-- Transaction Details -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            Detalles de la Transacci\u00F3n\n          </h4>\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Estado</div>\n              <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Monto</div>\n              <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n              <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Payment Information -->\n        @if (paymentIntent().paymentMethod) {\n          <div>\n            <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n              Informaci\u00F3n del Pago\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\n        <!-- Additional Information -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n            </svg>\n            Informaci\u00F3n Adicional\n          </h4>\n          \n          <div class=\"space-y-2\">\n            @if (paymentIntent().invoiceId) {\n              <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n                <span class=\"text-sm text-base-content/70\">Factura</span>\n                <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n              </div>\n            }\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Entorno</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\">Producci\u00F3n</span>\n                } @else {\n                  <span class=\"text-warning\">Pruebas</span>\n                }\n              </span>\n            </div>\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Referencia</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intent-item', standalone: true, imports: [CommonModule, PaymentMethodComponent], template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-all duration-200 border border-base-200\">\n  <div class=\"card-body p-4\">\n    \n    <!-- Header Section -->\n    <div class=\"flex justify-between items-start mb-3\">\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <div class=\"text-2xl font-bold text-primary\">\n            {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n          </div>\n          <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} badge-sm\">\n            {{ paymentIntent().status }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\">TEST</div>\n          }\n        </div>\n      </div>\n      \n      <button \n        class=\"btn btn-sm btn-ghost btn-circle\" \n        (click)=\"toggleExpand()\"\n        [class.rotate-180]=\"isExpanded()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 transition-transform duration-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Main Info Section -->\n    <div class=\"space-y-2\">\n      <!-- Payment Method -->\n      @if (paymentIntent().paymentMethod) {\n        <ngx-payment-method \n          [paymentMethod]=\"paymentIntent().paymentMethod!\" \n          mode=\"compact\">\n        </ngx-payment-method>\n      } @else {\n        <div class=\"flex items-center gap-2 p-2 bg-base-200 rounded-lg\">\n          <div class=\"w-8 h-8 bg-base-300 rounded-full flex items-center justify-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n          </div>\n          <div>\n            <div class=\"font-medium text-sm\">M\u00E9todo de pago</div>\n            <div class=\"text-xs text-base-content/70\">\u2022\u2022\u2022\u2022 {{ paymentIntent().paymentMethodId.slice(-4) }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Confirmation Method -->\n      <div class=\"flex items-center gap-2 text-sm\">\n        <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n        <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\n        <!-- Transaction Details -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            Detalles de la Transacci\u00F3n\n          </h4>\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Estado</div>\n              <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Monto</div>\n              <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n              <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Payment Information -->\n        @if (paymentIntent().paymentMethod) {\n          <div>\n            <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n              Informaci\u00F3n del Pago\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\n        <!-- Additional Information -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n            </svg>\n            Informaci\u00F3n Adicional\n          </h4>\n          \n          <div class=\"space-y-2\">\n            @if (paymentIntent().invoiceId) {\n              <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n                <span class=\"text-sm text-base-content/70\">Factura</span>\n                <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n              </div>\n            }\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Entorno</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\">Producci\u00F3n</span>\n                } @else {\n                  <span class=\"text-warning\">Pruebas</span>\n                }\n              </span>\n            </div>\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Referencia</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> " }]
-        }] });
+        }], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }] } });
 
 class PaymentIntentsListComponent {
-    paymentIntents = input.required();
-    loading = input(false);
-    error = input(null);
-    withControls = input(true);
+    paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
     onRefresh = output();
     trackByPaymentIntentId = (index, item) => item.id;
     refreshPaymentIntents() {
         this.onRefresh.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsListComponent, isStandalone: true, selector: "lib-payment-intents-list", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n      @if (paymentIntents().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ paymentIntents().length }} payment intents</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Actualizar\n      </button>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-payment-intent-item-skeleton></lib-payment-intent-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (paymentIntents().length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (paymentIntent of paymentIntents(); track paymentIntent.id) {\n        <lib-payment-intent-item [paymentIntent]=\"paymentIntent\"></lib-payment-intent-item>\n      }\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No hay payment intents recientes</h2>\n          <p class=\"text-gray-600\">No se encontraron payment intents en tu historial.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentItemSkeletonComponent, selector: "lib-payment-intent-item-skeleton" }, { kind: "component", type: PaymentIntentItemComponent, selector: "lib-payment-intent-item", inputs: ["paymentIntent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentIntentsListComponent, isStandalone: true, selector: "lib-payment-intents-list", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n      @if (paymentIntents().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ paymentIntents().length }} payment intents</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Actualizar\n      </button>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-payment-intent-item-skeleton></lib-payment-intent-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (paymentIntents().length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (paymentIntent of paymentIntents(); track paymentIntent.id) {\n        <lib-payment-intent-item [paymentIntent]=\"paymentIntent\"></lib-payment-intent-item>\n      }\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No hay payment intents recientes</h2>\n          <p class=\"text-gray-600\">No se encontraron payment intents en tu historial.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentItemSkeletonComponent, selector: "lib-payment-intent-item-skeleton" }, { kind: "component", type: PaymentIntentItemComponent, selector: "lib-payment-intent-item", inputs: ["paymentIntent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intents-list', standalone: true, imports: [
                         CommonModule,
                         PaymentIntentItemSkeletonComponent,
                         PaymentIntentItemComponent
                     ], template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n      @if (paymentIntents().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ paymentIntents().length }} payment intents</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Actualizar\n      </button>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\">\n      @for (item of [1,2,3]; track item) {\n        <lib-payment-intent-item-skeleton></lib-payment-intent-item-skeleton>\n      }\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (paymentIntents().length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (paymentIntent of paymentIntents(); track paymentIntent.id) {\n        <lib-payment-intent-item [paymentIntent]=\"paymentIntent\"></lib-payment-intent-item>\n      }\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No hay payment intents recientes</h2>\n          <p class=\"text-gray-600\">No se encontraron payment intents en tu historial.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> " }]
-        }] });
+        }], propDecorators: { paymentIntents: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntents", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "withControls", required: false }] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }] } });
 
 class SubscriptionsComponent {
     customerStore = inject(CustomerStore);
     portalAccountStore = inject(PortalAccountStore);
-    returnUrl = input(window.location.origin + '/account');
+    returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     manageSubscription(customerId) {
         this.portalAccountStore.createPortalSession(customerId, this.returnUrl());
     }
@@ -1952,19 +1952,19 @@ class SubscriptionsComponent {
             this.customerStore.loadSubscriptions(this.customerStore.customer().data?.id);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionsComponent, isStandalone: true, selector: "lib-subscriptions", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mb-4 flex flex-col justify-between items-center\">\n  <div class=\"mb-6 w-full\">\n    <h2 class=\"text-2xl font-bold text-gray-800\">Subscriptions</h2>\n    <p class=\"text-gray-600\">Manage your subscriptions and payments in one place</p>\n  </div>\n  <div class=\"controls mb-4 flex justify-between items-center w-full\">\n    <div class=\"stats\">\n      @if (customerStore.subscriptions.data().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ customerStore.subscriptions.data().length}} subscriptions</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshSubscriptions()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Updated\n    </button>\n  </div>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <lib-subscription-card\n    [subscription]=\"customerStore.firstSubscription()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscription-card>\n  <lib-subscriptions-list\n    [subscriptions]=\"customerStore.restSubscriptions()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    [withEmptyState]=\"false\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscriptions-list>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardComponent, selector: "lib-subscription-card", inputs: ["subscription", "loading", "error"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionsListComponent, selector: "lib-subscriptions-list", inputs: ["subscriptions", "loading", "error", "withEmptyState"], outputs: ["onManageSubscription"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionsComponent, isStandalone: true, selector: "lib-subscriptions", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mb-4 flex flex-col justify-between items-center\">\n  <div class=\"mb-6 w-full\">\n    <h2 class=\"text-2xl font-bold text-gray-800\">Subscriptions</h2>\n    <p class=\"text-gray-600\">Manage your subscriptions and payments in one place</p>\n  </div>\n  <div class=\"controls mb-4 flex justify-between items-center w-full\">\n    <div class=\"stats\">\n      @if (customerStore.subscriptions.data().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ customerStore.subscriptions.data().length}} subscriptions</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshSubscriptions()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Updated\n    </button>\n  </div>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <lib-subscription-card\n    [subscription]=\"customerStore.firstSubscription()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscription-card>\n  <lib-subscriptions-list\n    [subscriptions]=\"customerStore.restSubscriptions()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    [withEmptyState]=\"false\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscriptions-list>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardComponent, selector: "lib-subscription-card", inputs: ["subscription", "loading", "error"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionsListComponent, selector: "lib-subscriptions-list", inputs: ["subscriptions", "loading", "error", "withEmptyState"], outputs: ["onManageSubscription"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscriptions', standalone: true, imports: [CommonModule, SubscriptionCardComponent, SubscriptionsListComponent], template: "<div class=\"mb-4 flex flex-col justify-between items-center\">\n  <div class=\"mb-6 w-full\">\n    <h2 class=\"text-2xl font-bold text-gray-800\">Subscriptions</h2>\n    <p class=\"text-gray-600\">Manage your subscriptions and payments in one place</p>\n  </div>\n  <div class=\"controls mb-4 flex justify-between items-center w-full\">\n    <div class=\"stats\">\n      @if (customerStore.subscriptions.data().length > 0) {\n        <span class=\"badge badge-soft badge-info\">{{ customerStore.subscriptions.data().length}} subscriptions</span>\n      }\n    </div>\n    <button class=\"btn btn-sm btn-outline\" (click)=\"refreshSubscriptions()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n      </svg>\n      Updated\n    </button>\n  </div>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <lib-subscription-card\n    [subscription]=\"customerStore.firstSubscription()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscription-card>\n  <lib-subscriptions-list\n    [subscriptions]=\"customerStore.restSubscriptions()\"\n    [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n    [error]=\"customerStore.subscriptions.error()\"\n    [withEmptyState]=\"false\"\n    (onManageSubscription)=\"manageSubscription($event)\">\n  </lib-subscriptions-list>\n</div>" }]
-        }] });
+        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class CustomerDashboardComponent {
     customerStore = inject(CustomerStore);
-    returnUrl = input(window.location.origin + '/account');
-    customer = computed(() => this.customerStore.customer().data);
-    activeTab = signal('list');
+    returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
+    activeTab = signal('list', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     refreshPaymentIntents() {
         this.customerStore.loadPaymentIntents(this.customerStore.customer().data?.id);
     }
@@ -1974,10 +1974,10 @@ class CustomerDashboardComponent {
     exportSelectedPaymentIntents(paymentIntents) {
         console.log('[💰 CustomerDashboardComponent] exportSelectedPaymentIntents: ', paymentIntents);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CustomerDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CustomerDashboardComponent, isStandalone: true, selector: "lib-customer-dashboard", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container flex flex-col gap-6 mx-auto\">\n  <!-- Subscriptions Section -->\n  <section class=\"flex flex-col\">\n    <lib-subscriptions [returnUrl]=\"returnUrl()\"></lib-subscriptions>\n  </section>\n\n  <!-- Payment Intents Section with Tabs -->\n  <section class=\"flex flex-col\">\n    <header class=\"mb-4\">\n      <h2 class=\"text-2xl font-bold text-gray-800\">Payment Intents</h2>\n      <p class=\"text-gray-600\">Payment intents history. Select a tab to see the list or table view.</p>\n    </header>\n\n    <div role=\"tablist\" class=\"tabs tabs-box w-fit mb-4\">\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'list'\" (click)=\"setActiveTab('list')\">Lista</a>\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\">Tabla</a>\n    </div>\n\n    @if (activeTab() === 'list') {\n      <lib-payment-intents-list\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-list>\n    } @else {\n      <lib-payment-intents-table\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (exportSelected)=\"exportSelectedPaymentIntents($event)\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-table>\n    }\n  </section>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentsListComponent, selector: "lib-payment-intents-list", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["onRefresh"] }, { kind: "component", type: PaymentIntentsTableComponent, selector: "lib-payment-intents-table", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["exportSelected", "onRefresh"] }, { kind: "component", type: SubscriptionsComponent, selector: "lib-subscriptions", inputs: ["returnUrl"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CustomerDashboardComponent, isStandalone: true, selector: "lib-customer-dashboard", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container flex flex-col gap-6 mx-auto\">\n  <!-- Subscriptions Section -->\n  <section class=\"flex flex-col\">\n    <lib-subscriptions [returnUrl]=\"returnUrl()\"></lib-subscriptions>\n  </section>\n\n  <!-- Payment Intents Section with Tabs -->\n  <section class=\"flex flex-col\">\n    <header class=\"mb-4\">\n      <h2 class=\"text-2xl font-bold text-gray-800\">Payment Intents</h2>\n      <p class=\"text-gray-600\">Payment intents history. Select a tab to see the list or table view.</p>\n    </header>\n\n    <div role=\"tablist\" class=\"tabs tabs-box w-fit mb-4\">\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'list'\" (click)=\"setActiveTab('list')\">Lista</a>\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\">Tabla</a>\n    </div>\n\n    @if (activeTab() === 'list') {\n      <lib-payment-intents-list\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-list>\n    } @else {\n      <lib-payment-intents-table\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (exportSelected)=\"exportSelectedPaymentIntents($event)\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-table>\n    }\n  </section>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentsListComponent, selector: "lib-payment-intents-list", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["onRefresh"] }, { kind: "component", type: PaymentIntentsTableComponent, selector: "lib-payment-intents-table", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["exportSelected", "onRefresh"] }, { kind: "component", type: SubscriptionsComponent, selector: "lib-subscriptions", inputs: ["returnUrl"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-customer-dashboard', standalone: true, imports: [
                         CommonModule,
@@ -1985,7 +1985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         PaymentIntentsTableComponent,
                         SubscriptionsComponent
                     ], template: "<div class=\"container flex flex-col gap-6 mx-auto\">\n  <!-- Subscriptions Section -->\n  <section class=\"flex flex-col\">\n    <lib-subscriptions [returnUrl]=\"returnUrl()\"></lib-subscriptions>\n  </section>\n\n  <!-- Payment Intents Section with Tabs -->\n  <section class=\"flex flex-col\">\n    <header class=\"mb-4\">\n      <h2 class=\"text-2xl font-bold text-gray-800\">Payment Intents</h2>\n      <p class=\"text-gray-600\">Payment intents history. Select a tab to see the list or table view.</p>\n    </header>\n\n    <div role=\"tablist\" class=\"tabs tabs-box w-fit mb-4\">\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'list'\" (click)=\"setActiveTab('list')\">Lista</a>\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\">Tabla</a>\n    </div>\n\n    @if (activeTab() === 'list') {\n      <lib-payment-intents-list\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-list>\n    } @else {\n      <lib-payment-intents-table\n        [paymentIntents]=\"customerStore.paymentIntents.data()\"\n        [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n        [error]=\"customerStore.paymentIntents.error()\"\n        (exportSelected)=\"exportSelectedPaymentIntents($event)\"\n        (onRefresh)=\"refreshPaymentIntents()\">\n      </lib-payment-intents-table>\n    }\n  </section>\n</div>\n" }]
-        }] });
+        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 /*
  * Public API Surface of ngx-supabase-stripe