@dotted-labs/ngx-supabase-stripe 0.6.4 → 0.7.0

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

@@ -346,10 +346,10 @@ class SupabaseClientService {
             return { data: null, error: error };
         }
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SupabaseClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SupabaseClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SupabaseClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -362,7 +362,10 @@ class StripeClientService {
     stripe;
     embeddedCheckout = null;
     constructor() {
-        this.stripe = loadStripe(this.config.publishableKey);
+        const options = this.config.locale
+            ? { locale: this.config.locale }
+            : undefined;
+        this.stripe = loadStripe(this.config.publishableKey, options);
         console.log('🔌 [StripeClientService]: Loaded Stripe Client from @stripe/stripe-js');
     }
     /**
@@ -385,7 +388,7 @@ class StripeClientService {
         if (!accessToken) {
             return {
                 ok: false,
-                error: new Error('No Supabase Auth session. Sign in before checkout (e.g. signInWithPassword, signInWithOAuth, or magic link).'),
+                error: new Error($localize `:@@stripe.errors.no_auth_session:No Supabase Auth session. Sign in before checkout (e.g. signInWithPassword, signInWithOAuth, or magic link).`),
             };
         }
         return { ok: true, headers: { Authorization: `Bearer ${accessToken}` } };
@@ -684,10 +687,10 @@ class StripeClientService {
             return { paymentMethod: null, error: error };
         }
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StripeClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StripeClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -705,6 +708,102 @@ var Currency;
     Currency["INR"] = "inr";
 })(Currency || (Currency = {}));
 
+class ProductsService {
+    supabaseService = inject(SupabaseClientService);
+    /**
+     * Map a Stripe product row plus price rows to the public shape used by the UI.
+     */
+    toStripeProductPublic(product, prices = []) {
+        return this.parseProduct(product, prices);
+    }
+    /**
+     * Load all Stripe prices and products, returning parsed public products.
+     */
+    async fetchFullCatalog() {
+        const [pricesResult, productsResult] = await Promise.all([
+            this.supabaseService.selectStripePrices(),
+            this.supabaseService.selectStripeProducts(),
+        ]);
+        const pricesError = pricesResult.error;
+        const productsError = productsResult.error;
+        if (pricesError) {
+            return { data: null, error: pricesError };
+        }
+        if (productsError) {
+            return { data: null, error: productsError };
+        }
+        const prices = (pricesResult.data ?? []);
+        const stripeProducts = (productsResult.data ?? []);
+        const products = stripeProducts.map((product) => this.parseProduct(product, prices));
+        return { data: { prices, products }, error: null };
+    }
+    /**
+     * Load prices and a single product by id, returning parsed public product(s).
+     */
+    async fetchProductById(id) {
+        const [pricesResult, productResult] = await Promise.all([
+            this.supabaseService.selectStripePrices(),
+            this.supabaseService.selectStripeProduct(id),
+        ]);
+        const pricesError = pricesResult.error;
+        const productError = productResult.error;
+        if (pricesError) {
+            return { data: [], error: pricesError };
+        }
+        if (productError) {
+            return { data: [], error: productError };
+        }
+        const prices = (pricesResult.data ?? []);
+        const rows = productResult.data;
+        if (!rows?.length) {
+            return { data: [], error: null };
+        }
+        return { data: [this.parseProduct(rows[0], prices)], error: null };
+    }
+    /**
+     * Load prices and products for the given Stripe product ids.
+     */
+    async fetchProductsByIds(ids) {
+        const [pricesResult, productsResult] = await Promise.all([
+            this.supabaseService.selectStripePrices(),
+            this.supabaseService.selectStripeProductsByIds(ids),
+        ]);
+        const pricesError = pricesResult.error;
+        const productsError = productsResult.error;
+        if (pricesError) {
+            return { data: [], error: pricesError };
+        }
+        if (productsError) {
+            return { data: [], error: productsError };
+        }
+        const prices = (pricesResult.data ?? []);
+        const stripeProducts = (productsResult.data ?? []);
+        const products = stripeProducts.map((product) => this.parseProduct(product, prices));
+        return { data: products, error: null };
+    }
+    parseProduct(product, prices = []) {
+        const { attrs, ...mainProperties } = product;
+        return {
+            ...mainProperties,
+            images: attrs?.images ?? [],
+            prices: prices
+                .filter((price) => price.product === product.id)
+                .map((price) => ({
+                details: price,
+                recurringInterval: price?.attrs?.recurring?.interval ?? 'no-recurring',
+            })),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 const initialProductsState = {
     products: null,
     prices: null,
@@ -716,17 +815,23 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     isStatusLoading: computed(() => state.status() === 'loading'),
     isStatusSuccess: computed(() => state.status() === 'success'),
     isStatusError: computed(() => state.status() === 'error'),
-    oneTimeproductsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.type === 'one_time' && price.details.currency === state.currency()))) || []),
-    recurringProductsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.type === 'recurring' && price.details.currency === state.currency()))) || []),
-    productsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.currency === state.currency()))) || []),
+    oneTimeproductsByCurrency: computed(() => state
+        .products()
+        ?.filter((product) => product.prices.some((price) => price.details.type === 'one_time' && price.details.currency === state.currency())) || []),
+    recurringProductsByCurrency: computed(() => state
+        .products()
+        ?.filter((product) => product.prices.some((price) => price.details.type === 'recurring' && price.details.currency === state.currency())) || []),
+    productsByCurrency: computed(() => state
+        .products()
+        ?.filter((product) => product.prices.some((price) => price.details.currency === state.currency())) || []),
     hasProducts: computed(() => state.products() !== null && state.products().length > 0),
-    isError: computed(() => state.error())
-})), withMethods((store, supabaseService = inject(SupabaseClientService)) => ({
+    isError: computed(() => state.error()),
+})), withMethods((store, productsService = inject(ProductsService)) => ({
     /**
      * Get products by IDs from the current loaded products
      */
     getProductsByIds(ids) {
-        return store.products()?.filter(product => product.id && ids.includes(product.id)) || [];
+        return store.products()?.filter((product) => product.id && ids.includes(product.id)) || [];
     },
     /**
      * Set the currency filter for products
@@ -740,15 +845,11 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     async loadProductById(id) {
         patchState(store, { status: 'loading', error: null });
         try {
-            const { data: product, error: productError } = await supabaseService.selectStripeProduct(id);
+            const { data: products, error: productError } = await productsService.fetchProductById(id);
             if (productError) {
                 console.error('🎮 [ProductsStore]: Error loading product', productError);
                 patchState(store, { status: 'error', error: productError.message });
-            }
-            const products = [];
-            if (product && product.length > 0) {
-                const productParsed = parseProduct(product[0], store.prices());
-                products.push(productParsed);
+                return;
             }
             patchState(store, { status: 'success', products });
         }
@@ -762,33 +863,25 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     async loadProducts() {
         patchState(store, { status: 'loading', error: null });
         try {
-            const { data: prices, error: pricesError } = await supabaseService.selectStripePrices();
-            if (pricesError) {
-                console.error('🎮 [ProductsStore]: Error loading prices', pricesError);
-                patchState(store, { status: 'error', error: pricesError.message });
-            }
-            patchState(store, { prices: prices || [] });
-            const { data: stripeProducts, error: productsError } = await supabaseService.selectStripeProducts();
-            if (productsError) {
-                console.error('🎮 [ProductsStore]: Error loading products', productsError);
+            const { data, error } = await productsService.fetchFullCatalog();
+            if (error) {
+                console.error('🎮 [ProductsStore]: Error loading catalog', error);
                 patchState(store, {
                     status: 'error',
-                    error: productsError.message,
+                    error: error.message,
                 });
+                return;
             }
-            if (stripeProducts) {
-                {
-                    const products = [];
-                    stripeProducts.forEach(product => {
-                        products.push(parseProduct(product, store.prices()));
-                    });
-                    console.log('🎮 [ProductsStore] products: ', products);
-                    patchState(store, {
-                        status: 'success',
-                        products: products
-                    });
-                }
+            if (!data) {
+                patchState(store, { status: 'success', prices: [], products: [] });
+                return;
             }
+            console.log('🎮 [ProductsStore] products: ', data.products);
+            patchState(store, {
+                status: 'success',
+                prices: data.prices,
+                products: data.products,
+            });
         }
         catch (error) {
             patchState(store, {
@@ -800,14 +893,17 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     async loadProductsByIds(ids) {
         patchState(store, { status: 'loading', error: null });
         try {
-            const { data: products, error: productsError } = await supabaseService.selectStripeProductsByIds(ids);
+            const { data: products, error: productsError } = await productsService.fetchProductsByIds(ids);
             if (productsError) {
                 console.error('🎮 [ProductsStore]: Error loading products', productsError);
                 patchState(store, { status: 'error', error: productsError.message });
+                return;
             }
-            if (products) {
-                const products = [];
-            }
+            console.log('🎮 [ProductsStore] products: ', products);
+            patchState(store, {
+                status: 'success',
+                products,
+            });
         }
         catch (error) {
             patchState(store, { status: 'error', error: error.message });
@@ -818,7 +914,7 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
      */
     reset() {
         patchState(store, initialProductsState);
-    }
+    },
 })), withHooks((store) => ({
     async onInit() {
         console.log('🎮 [ProductsStore] onInit');
@@ -828,19 +924,8 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
             console.log('🎮 [ProductsStore] loading products...');
             await store.loadProducts();
         }
-    }
+    },
 })));
-function parseProduct(product, prices = []) {
-    const { attrs, ...mainProperties } = product;
-    return {
-        ...mainProperties,
-        images: attrs?.images || [],
-        prices: prices.filter(price => price.product === product.id).map(price => ({
-            details: price,
-            recurringInterval: price?.attrs?.recurring?.interval || 'no-recurring'
-        }))
-    };
-}
 
 const initialSubscriptionState = {
     subscriptions: null,
@@ -855,7 +940,7 @@ const SubscriptionsStore = signalStore({ providedIn: 'root' }, withState(initial
     isStatusError: computed(() => state.status() === 'error'),
     hasSubscriptions: computed(() => state.subscriptions() !== null && state.subscriptions().length > 0),
     isError: computed(() => state.error()),
-})), withMethods((store, stripeService = inject(StripeClientService), supabaseService = inject(SupabaseClientService), productsStore = inject(ProductsStore), customerStore = inject(CustomerStore)) => ({
+})), withMethods((store, stripeService = inject(StripeClientService), supabaseService = inject(SupabaseClientService), productsStore = inject(ProductsStore), productsService = inject(ProductsService), customerStore = inject(CustomerStore)) => ({
     /**
      * Create a subscription
      * @param priceId The price ID for the subscription
@@ -876,7 +961,7 @@ const SubscriptionsStore = signalStore({ providedIn: 'root' }, withState(initial
                 if (!stripe) {
                     patchState(store, {
                         status: 'error',
-                        error: 'No Stripe instance returned',
+                        error: $localize `:@@stripe.errors.no_stripe_instance:No Stripe instance returned`,
                     });
                 }
                 else {
@@ -913,7 +998,7 @@ const SubscriptionsStore = signalStore({ providedIn: 'root' }, withState(initial
             const prices = (productsStore.prices() ?? []);
             const userProductsById = new Map((userStripeProducts ?? []).map((p) => [
                 p.id,
-                parseProduct(p, prices),
+                productsService.toStripeProductPublic(p, prices),
             ]));
             console.log('🔍 [SubscriptionsStore] loaded subscriptions', subscriptions);
             const parsedSubscriptions = subscriptions?.map((subscription) => {
@@ -1227,7 +1312,7 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
         else {
             patchState(state, {
                 paymentMethodsStatus: 'error',
-                paymentMethodsError: 'Payment method not found'
+                paymentMethodsError: $localize `:@@stripe.errors.payment_method_not_found:Payment method not found`
             });
         }
     },
@@ -1301,7 +1386,7 @@ const CheckoutStore = signalStore({ providedIn: 'root' }, withState(initialCheck
                 if (!stripe) {
                     patchState(store, {
                         status: 'error',
-                        error: 'No Stripe instance returned',
+                        error: $localize `:@@stripe.errors.no_stripe_instance:No Stripe instance returned`,
                     });
                 }
                 else {
@@ -1384,7 +1469,7 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
                 throw new Error(error.message);
             }
             if (!url) {
-                throw new Error('No se pudo crear la sesión del portal');
+                throw new Error($localize `:@@stripe.errors.portal_session_failed:Could not create portal session`);
             }
             patchState(store, {
                 status: 'success',
@@ -1394,7 +1479,7 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
         }
         catch (error) {
             console.error('🚨 [PortalAccountStore]', error);
-            const errorMessage = error instanceof Error ? error.message : 'Error desconocido';
+            const errorMessage = error instanceof Error ? error.message : $localize `:@@stripe.errors.unknown:Unknown error`;
             patchState(store, {
                 status: 'error',
                 error: errorMessage
@@ -1410,10 +1495,10 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
 })));
 
 class EmbeddedSkeletonComponent {
-    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> " });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
         }] });
@@ -1422,9 +1507,9 @@ class EmbeddedCheckoutComponent {
     checkoutStore = inject(CheckoutStore);
     customerStore = inject(CustomerStore);
     stripeConfig = inject(STRIPE_CONFIG);
-    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
-    returnPagePath = input('/return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
-    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
+    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : /* istanbul ignore next */ []));
+    returnPagePath = input('/return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : /* istanbul ignore next */ []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : /* istanbul ignore next */ []));
     async ngOnInit() {
         this.createCheckoutSession();
     }
@@ -1443,19 +1528,19 @@ class EmbeddedCheckoutComponent {
     ngOnDestroy() {
         this.checkoutStore.destroyEmbeddedCheckout();
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmbeddedCheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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><span i18n=\"@@stripe.common.error_label\">Error:</span> {{ checkoutStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+            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><span i18n=\"@@stripe.common.error_label\">Error:</span> {{ checkoutStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div>\n" }]
         }], 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('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []));
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             const sessionId = params['session_id'];
@@ -1473,19 +1558,19 @@ class ReturnPageComponent {
     navigate() {
         this.router.navigateByUrl(this.returnUrl());
     }
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 i18n=\"@@stripe.checkout.verifying_status\">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\" i18n=\"@@stripe.checkout.payment_complete\">Payment 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\" i18n=\"@@stripe.checkout.payment_processing\">Payment in processing</h2>\n      </div>\n      <p class=\"status-message\" i18n=\"@@stripe.checkout.processing_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\" i18n=\"@@stripe.checkout.error_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\" i18n=\"@@stripe.checkout.error_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()\" i18n=\"@@stripe.common.back\">Back</button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+            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 i18n=\"@@stripe.checkout.verifying_status\">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\" i18n=\"@@stripe.checkout.payment_complete\">Payment 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\" i18n=\"@@stripe.checkout.payment_processing\">Payment in processing</h2>\n      </div>\n      <p class=\"status-message\" i18n=\"@@stripe.checkout.processing_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\" i18n=\"@@stripe.checkout.error_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\" i18n=\"@@stripe.checkout.error_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()\" i18n=\"@@stripe.common.back\">Back</button>\n  </div>\n</div>\n" }]
         }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class ProductItemSkeletonComponent {
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
         }] });
@@ -1530,10 +1615,42 @@ class UtilsService {
                 return 'badge-ghost';
         }
     }
-    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' });
+    translateStripeStatus(status) {
+        const labels = {
+            active: $localize `:@@stripe.status.active:Active`,
+            canceled: $localize `:@@stripe.status.canceled:Canceled`,
+            cancelled: $localize `:@@stripe.status.canceled:Canceled`,
+            incomplete: $localize `:@@stripe.status.incomplete:Incomplete`,
+            incomplete_expired: $localize `:@@stripe.status.incomplete_expired:Incomplete expired`,
+            past_due: $localize `:@@stripe.status.past_due:Past due`,
+            trialing: $localize `:@@stripe.status.trialing:Trialing`,
+            unpaid: $localize `:@@stripe.status.unpaid:Unpaid`,
+            paused: $localize `:@@stripe.status.paused:Paused`,
+            succeeded: $localize `:@@stripe.status.succeeded:Succeeded`,
+            failed: $localize `:@@stripe.status.failed:Failed`,
+            pending: $localize `:@@stripe.status.pending:Pending`,
+            processing: $localize `:@@stripe.status.processing:Processing`,
+            paid: $localize `:@@stripe.status.paid:Paid`,
+            requires_payment_method: $localize `:@@stripe.status.requires_payment_method:Requires payment method`,
+            requires_confirmation: $localize `:@@stripe.status.requires_confirmation:Requires confirmation`,
+            requires_action: $localize `:@@stripe.status.requires_action:Requires action`,
+            requires_capture: $localize `:@@stripe.status.requires_capture:Requires capture`,
+        };
+        return labels[status] ?? status;
+    }
+    translateBillingInterval(interval) {
+        const labels = {
+            day: $localize `:@@stripe.billing.daily:Daily`,
+            week: $localize `:@@stripe.billing.weekly:Weekly`,
+            month: $localize `:@@stripe.billing.monthly:Monthly`,
+            year: $localize `:@@stripe.billing.yearly:Yearly`,
+        };
+        return labels[interval] ?? interval;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1541,33 +1658,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 
 class ProductItemComponent {
-    product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
-    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
+    product = input.required(...(ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
     productSelected = output();
     priceSelected = output();
     utils = inject(UtilsService);
     sanitizer = inject(DomSanitizer);
-    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
+    perMonthSuffix = $localize `:@@stripe.product.per_month:/mo`;
+    perYearSuffix = $localize `:@@stripe.product.per_year:/yr`;
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
     sanitizedImage = computed(() => {
         const imageUrl = this.product().images?.[0];
         return imageUrl ? this.sanitizer.bypassSecurityTrustUrl(imageUrl) : null;
-    }, ...(ngDevMode ? [{ debugName: "sanitizedImage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "sanitizedImage" }] : /* istanbul ignore next */ []));
     onSelect() {
         this.productSelected.emit(this.product());
         this.priceSelected.emit(this.price()?.details);
     }
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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  <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    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\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    <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' ? perMonthSuffix : perYearSuffix }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\" i18n=\"@@stripe.product.inactive\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\"\n          i18n=\"@@stripe.product.buy_now\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+            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  <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    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\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    <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' ? perMonthSuffix : perYearSuffix }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\" i18n=\"@@stripe.product.inactive\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\"\n          i18n=\"@@stripe.product.buy_now\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], 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([], ...(ngDevMode ? [{ debugName: "products" }] : []));
-    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
+    products = input([], ...(ngDevMode ? [{ debugName: "products" }] : /* istanbul ignore next */ []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
     productSelected = output();
     priceSelected = output();
     onProductSelect(product) {
@@ -1576,29 +1695,29 @@ class ProductListComponent {
     onPriceSelect(price) {
         this.priceSelected.emit(price);
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 i18n=\"@@stripe.product.no_products\">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", 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: "21.2.0", ngImport: i0, type: ProductListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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" }]
+            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 i18n=\"@@stripe.product.no_products\">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" }]
         }], 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(...(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" }] : []));
+    product = input.required(...(ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []));
+    currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    buttonText = input($localize `:@@stripe.product.buy_now:Buy now`, ...(ngDevMode ? [{ debugName: "buttonText" }] : /* istanbul ignore next */ []));
+    buttonClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    showPrice = input(true, ...(ngDevMode ? [{ debugName: "showPrice" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     productSelected = output();
     priceSelected = output();
     utils = inject(UtilsService);
-    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" }] : []));
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || !this.product().active, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     displayText = computed(() => {
         if (!this.product().active) {
-            return 'Inactive';
+            return $localize `:@@stripe.product.inactive:Inactive`;
         }
         if (!this.showPrice()) {
             return this.buttonText();
@@ -1609,10 +1728,12 @@ class ProductItemButtonComponent {
         }
         const formattedPrice = this.utils.formatAmount(priceInfo.details?.unit_amount ?? 0, priceInfo.details?.currency ?? 'EUR');
         const suffix = priceInfo.details?.type === 'recurring'
-            ? `/${priceInfo.recurringInterval === 'month' ? 'mo' : 'yr'}`
+            ? priceInfo.recurringInterval === 'month'
+                ? $localize `:@@stripe.product.per_month:/mo`
+                : $localize `:@@stripe.product.per_year:/yr`
             : '';
         return `${this.buttonText()} - ${formattedPrice}${suffix}`;
-    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
     onSelect() {
         if (this.isDisabled()) {
             return;
@@ -1620,10 +1741,10 @@ class ProductItemButtonComponent {
         this.productSelected.emit(this.product());
         this.priceSelected.emit(this.price()?.details);
     }
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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"] }] } });
@@ -1632,9 +1753,9 @@ class EmbeddedSubscriptionComponent {
     subscriptionsStore = inject(SubscriptionsStore);
     customerStore = inject(CustomerStore);
     stripeConfig = inject(STRIPE_CONFIG);
-    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
-    returnPagePath = input('/subscription-return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
-    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
+    priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : /* istanbul ignore next */ []));
+    returnPagePath = input('/subscription-return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : /* istanbul ignore next */ []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : /* istanbul ignore next */ []));
     async ngOnInit() {
         this.createSubscription();
     }
@@ -1648,12 +1769,12 @@ class EmbeddedSubscriptionComponent {
     ngOnDestroy() {
         this.subscriptionsStore.destroyEmbeddedSubscription();
     }
-    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  @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.17", ngImport: i0, type: EmbeddedSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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=\"checkout-container\">\n  @if (subscriptionsStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (subscriptionsStore.isStatusError()) {\n    <div class=\"error\">\n      <p><span i18n=\"@@stripe.common.error_label\">Error:</span> {{ subscriptionsStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-embedded-subscription', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"subscription-container\">  \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> " }]
+            args: [{ selector: 'lib-embedded-subscription', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"checkout-container\">\n  @if (subscriptionsStore.isStatusLoading()) {\n    <lib-embedded-skeleton />\n  }\n  \n  @if (subscriptionsStore.isStatusError()) {\n    <div class=\"error\">\n      <p><span i18n=\"@@stripe.common.error_label\">Error:</span> {{ subscriptionsStore.error() }}</p>\n    </div>\n  }\n  <div id=\"embedded-checkout\"></div>\n</div>\n" }]
         }], 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 {
@@ -1661,8 +1782,8 @@ class SubscriptionReturnPageComponent {
     router = inject(Router);
     checkoutStore = inject(CheckoutStore);
     subscriptionsStore = inject(SubscriptionsStore);
-    sessionStatus = computed(() => this.checkoutStore.sessionStatus(), ...(ngDevMode ? [{ debugName: "sessionStatus" }] : []));
-    returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    sessionStatus = computed(() => this.checkoutStore.sessionStatus(), ...(ngDevMode ? [{ debugName: "sessionStatus" }] : /* istanbul ignore next */ []));
+    returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []));
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             const sessionId = params['session_id'];
@@ -1680,17 +1801,17 @@ class SubscriptionReturnPageComponent {
     navigate() {
         this.router.navigateByUrl(this.returnUrl());
     }
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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        <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        @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 i18n=\"@@stripe.subscription.loading_details\">Loading subscription details...</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          <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\" i18n=\"@@stripe.subscription.return.active\">Your subscription is active and ready to use.</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\" i18n=\"@@stripe.subscription.return.benefits_title\">Included benefits:</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                <span i18n=\"@@stripe.subscription.return.benefit_full_access\">Full access to all features</span>\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                <span i18n=\"@@stripe.subscription.return.benefit_support\">24/7 priority support</span>\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                <span i18n=\"@@stripe.subscription.return.benefit_updates\">Automatic updates</span>\n              </li>\n            </ul>\n          </div>\n        }\n\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            <span i18n=\"@@stripe.subscription.return.go_dashboard\">Go to dashboard</span>\n          </button>\n        </div>\n\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            <span i18n=\"@@stripe.subscription.return.need_help\">Need help?</span>\n            <a href=\"#\" class=\"link link-primary\" i18n=\"@@stripe.subscription.return.contact_support\">Contact support</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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>" }]
+            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        <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        @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 i18n=\"@@stripe.subscription.loading_details\">Loading subscription details...</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          <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\" i18n=\"@@stripe.subscription.return.active\">Your subscription is active and ready to use.</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\" i18n=\"@@stripe.subscription.return.benefits_title\">Included benefits:</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                <span i18n=\"@@stripe.subscription.return.benefit_full_access\">Full access to all features</span>\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                <span i18n=\"@@stripe.subscription.return.benefit_support\">24/7 priority support</span>\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                <span i18n=\"@@stripe.subscription.return.benefit_updates\">Automatic updates</span>\n              </li>\n            </ul>\n          </div>\n        }\n\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            <span i18n=\"@@stripe.subscription.return.go_dashboard\">Go to dashboard</span>\n          </button>\n        </div>\n\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            <span i18n=\"@@stripe.subscription.return.need_help\">Need help?</span>\n            <a href=\"#\" class=\"link link-primary\" i18n=\"@@stripe.subscription.return.contact_support\">Contact support</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class BrandIconDirective {
     el;
-    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandIcon' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : /* istanbul ignore next */ {}), alias: 'ngxBrandIcon' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1712,10 +1833,10 @@ class BrandIconDirective {
         };
         return brandIcons[brand || 'unknown'] || '💳';
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: BrandIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BrandIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxBrandIcon]',
@@ -1725,7 +1846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class BrandNameDirective {
     el;
-    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandName' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : /* istanbul ignore next */ {}), alias: 'ngxBrandName' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1747,10 +1868,10 @@ class BrandNameDirective {
         };
         return brandNames[brand || 'unknown'] || 'Tarjeta';
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: BrandNameDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BrandNameDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxBrandName]',
@@ -1760,7 +1881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class PaymentMethodTypeDirective {
     el;
-    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxPaymentMethodType' });
+    paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : /* istanbul ignore next */ {}), alias: 'ngxPaymentMethodType' });
     constructor(el) {
         this.el = el;
         effect(() => {
@@ -1786,10 +1907,10 @@ class PaymentMethodTypeDirective {
         };
         return typeNames[this.paymentMethod().type] || 'Método de pago';
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxPaymentMethodType]',
@@ -1798,8 +1919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxPaymentMethodType", required: true }] }] } });
 
 class PaymentMethodComponent {
-    paymentMethod = input.required(...(ngDevMode ? [{ debugName: "paymentMethod" }] : []));
-    mode = input('detailed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    paymentMethod = input.required(...(ngDevMode ? [{ debugName: "paymentMethod" }] : /* istanbul ignore next */ []));
+    mode = input('detailed', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     get last4() {
         return this.paymentMethod().card?.last4 || '****';
     }
@@ -1835,41 +1956,46 @@ class PaymentMethodComponent {
     get billingAddress() {
         return this.paymentMethod().billing_details?.address;
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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              <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\" i18n=\"@@stripe.payment_method.expired\">Expired</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\" i18n=\"@@stripe.payment_method.cardholder\">CARDHOLDER</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\" i18n=\"@@stripe.payment_method.valid_thru\">VALID THRU</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              <span i18n=\"@@stripe.payment_method.contact_info\">Contact information</span>\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              <span i18n=\"@@stripe.payment_method.billing_address\">Billing address</span>\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 i18n=\"@@stripe.payment_method.added_on\">Payment method added:</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    <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\" i18n=\"@@stripe.payment_method.expired\">Expired</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\" i18n=\"@@stripe.payment_method.active\">Active</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: "21.2.0", ngImport: i0, type: PaymentMethodComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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" }]
+            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              <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\" i18n=\"@@stripe.payment_method.expired\">Expired</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\" i18n=\"@@stripe.payment_method.cardholder\">CARDHOLDER</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\" i18n=\"@@stripe.payment_method.valid_thru\">VALID THRU</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              <span i18n=\"@@stripe.payment_method.contact_info\">Contact information</span>\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              <span i18n=\"@@stripe.payment_method.billing_address\">Billing address</span>\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 i18n=\"@@stripe.payment_method.added_on\">Payment method added:</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    <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\" i18n=\"@@stripe.payment_method.expired\">Expired</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\" i18n=\"@@stripe.payment_method.active\">Active</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(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
-    dialogId = input.required(...(ngDevMode ? [{ debugName: "dialogId" }] : []));
-    utils = new UtilsService();
-    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"] }] });
+    paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : /* istanbul ignore next */ []));
+    dialogId = input.required(...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    utils = inject(UtilsService);
+    liveModeLabel = $localize `:@@stripe.payment_intents.mode.live:Live`;
+    testModeLabel = $localize `:@@stripe.payment_intents.mode.test:Test`;
+    notAvailableLabel = $localize `:@@stripe.common.not_available:N/A`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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\" i18n=\"@@stripe.payment_intents.dialog_title\">Payment intent details</h3>\n    \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          {{ utils.translateStripeStatus(paymentIntent().status) }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\" i18n=\"@@stripe.payment_intents.mode.test\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\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          <span i18n=\"@@stripe.payment_intents.transaction_details\">Transaction details</span>\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\" i18n=\"@@stripe.payment_intents.table.status\">Status</div>\n            <div class=\"stat-value text-sm capitalize\">{{ utils.translateStripeStatus(paymentIntent().status) }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? liveModeLabel : testModeLabel }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\" i18n=\"@@stripe.payment_intents.table.amount\">Amount</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        <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\" i18n=\"@@stripe.payment_intents.confirmation\">Confirmation:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\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            <span i18n=\"@@stripe.payment_intents.payment_info\">Payment information</span>\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\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          <span i18n=\"@@stripe.payment_intents.additional_info\">Additional information</span>\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\" i18n=\"@@stripe.payment_intents.invoice\">Invoice</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\" i18n=\"@@stripe.payment_intents.environment\">Environment</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\" i18n=\"@@stripe.payment_intents.mode.live\">Live</span>\n              } @else {\n                <span class=\"text-warning\" i18n=\"@@stripe.payment_intents.mode.test\">Test</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\" i18n=\"@@stripe.payment_intents.reference\">Reference</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || notAvailableLabel }}</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\" i18n=\"@@stripe.common.close\">Close</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: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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" }]
+            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\" i18n=\"@@stripe.payment_intents.dialog_title\">Payment intent details</h3>\n    \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          {{ utils.translateStripeStatus(paymentIntent().status) }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\" i18n=\"@@stripe.payment_intents.mode.test\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\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          <span i18n=\"@@stripe.payment_intents.transaction_details\">Transaction details</span>\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\" i18n=\"@@stripe.payment_intents.table.status\">Status</div>\n            <div class=\"stat-value text-sm capitalize\">{{ utils.translateStripeStatus(paymentIntent().status) }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? liveModeLabel : testModeLabel }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\" i18n=\"@@stripe.payment_intents.table.amount\">Amount</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        <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\" i18n=\"@@stripe.payment_intents.confirmation\">Confirmation:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\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            <span i18n=\"@@stripe.payment_intents.payment_info\">Payment information</span>\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\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          <span i18n=\"@@stripe.payment_intents.additional_info\">Additional information</span>\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\" i18n=\"@@stripe.payment_intents.invoice\">Invoice</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\" i18n=\"@@stripe.payment_intents.environment\">Environment</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\" i18n=\"@@stripe.payment_intents.mode.live\">Live</span>\n              } @else {\n                <span class=\"text-warning\" i18n=\"@@stripe.payment_intents.mode.test\">Test</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\" i18n=\"@@stripe.payment_intents.reference\">Reference</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || notAvailableLabel }}</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\" i18n=\"@@stripe.common.close\">Close</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(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
+    paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : /* istanbul ignore next */ []));
     paymentIntentsTable = computed(() => {
         return this.paymentIntents().map(paymentIntent => ({
             ...paymentIntent,
             selected: false
         }));
-    }, ...(ngDevMode ? [{ debugName: "paymentIntentsTable" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "paymentIntentsTable" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : /* istanbul ignore next */ []));
     exportSelected = output();
     onRefresh = output();
     utils = inject(UtilsService);
-    hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0, ...(ngDevMode ? [{ debugName: "hasPaymentIntents" }] : []));
+    liveModeLabel = $localize `:@@stripe.payment_intents.mode.live:Live`;
+    testModeLabel = $localize `:@@stripe.payment_intents.mode.test:Test`;
+    hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0, ...(ngDevMode ? [{ debugName: "hasPaymentIntents" }] : /* istanbul ignore next */ []));
     trackByPaymentIntentId = (index, item) => item.id;
     refreshPaymentIntents() {
         this.onRefresh.emit();
@@ -1904,23 +2030,23 @@ class PaymentIntentsTableComponent {
     exportSelectedPaymentIntents() {
         this.exportSelected.emit(this.paymentIntentsTable().filter(paymentIntent => paymentIntent.selected));
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }} <span i18n=\"@@stripe.payment_intents.count_label\">payment intents</span></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        <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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          <span i18n=\"@@stripe.payment_intents.export_selected\">Export selected</span>\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        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th i18n=\"@@stripe.payment_intents.table.amount\">Amount</th>\n            <th i18n=\"@@stripe.payment_intents.table.payment_method\">Payment method</th>\n            <th i18n=\"@@stripe.payment_intents.table.status\">Status</th>\n            <th i18n=\"@@stripe.payment_intents.table.mode\">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                  {{ utils.translateStripeStatus(paymentIntent.status) }}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? liveModeLabel : testModeLabel }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\" i18n=\"@@stripe.payment_intents.details\">Details</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\" i18n=\"@@stripe.payment_intents.empty_title\">No recent payment intents</h2>\n          <p class=\"text-gray-600\" i18n=\"@@stripe.payment_intents.empty_description\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", 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: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+                    ], 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 }} <span i18n=\"@@stripe.payment_intents.count_label\">payment intents</span></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        <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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          <span i18n=\"@@stripe.payment_intents.export_selected\">Export selected</span>\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        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th i18n=\"@@stripe.payment_intents.table.amount\">Amount</th>\n            <th i18n=\"@@stripe.payment_intents.table.payment_method\">Payment method</th>\n            <th i18n=\"@@stripe.payment_intents.table.status\">Status</th>\n            <th i18n=\"@@stripe.payment_intents.table.mode\">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                  {{ utils.translateStripeStatus(paymentIntent.status) }}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? liveModeLabel : testModeLabel }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\" i18n=\"@@stripe.payment_intents.details\">Details</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\" i18n=\"@@stripe.payment_intents.empty_title\">No recent payment intents</h2>\n          <p class=\"text-gray-600\" i18n=\"@@stripe.payment_intents.empty_description\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], 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: "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-gradient-to-br from-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300 h-[180px]\">\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.17", ngImport: i0, type: SubscriptionItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SubscriptionItemSkeletonComponent, isStandalone: true, selector: "lib-subscription-item-skeleton", ngImport: i0, template: "<div class=\"card bg-gradient-to-br from-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300 h-[180px]\">\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: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-subscription-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-gradient-to-br from-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300 h-[180px]\">\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>" }]
         }] });
@@ -1930,12 +2056,14 @@ class SubscriptionItemComponent {
     portalAccountStore = inject(PortalAccountStore);
     utils = inject(UtilsService);
     sanitizer = inject(DomSanitizer);
-    subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
+    subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : /* istanbul ignore next */ []));
     onManageSubscription = output();
-    isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading(), ...(ngDevMode ? [{ debugName: "isStatusLoading" }] : []));
+    isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading(), ...(ngDevMode ? [{ debugName: "isStatusLoading" }] : /* istanbul ignore next */ []));
+    subscriptionProductAlt = $localize `:@@stripe.subscription.product_alt:Subscription product`;
+    subscriptionPlanFallback = $localize `:@@stripe.subscription.plan_fallback:Subscription plan`;
     productImage = computed(() => {
         return this.subscription().product?.images?.[0] || 'https://img.daisyui.com/images/profile/demo/yellingcat@192.webp';
-    }, ...(ngDevMode ? [{ debugName: "productImage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "productImage" }] : /* istanbul ignore next */ []));
     isExpanded = false;
     toggleExpand() {
         this.isExpanded = !this.isExpanded;
@@ -1946,44 +2074,44 @@ class SubscriptionItemComponent {
     sanitizeImageUrl(imageUrl) {
         return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
     }
-    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-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300\">\n  <div class=\"card-body p-4\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start\">\n      <div class=\"flex flex-row justify-start items-start 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 class=\"flex flex-col justify-start items-start gap-2\">\n          <div class=\"flex flex-row justify-start items-start gap-2\">\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-xs\">\n                {{ subscription().status }}\n              </span>\n              @if (subscription().cancel.cancel_at_period_end) {\n                <span class=\"badge badge-warning badge-xs\">Cancelada</span>\n              }\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-start items-start gap-4\">\n            <!--<div class=\"flex flex-row justify-start items-center gap-1\">\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=\"flex flex-row justify-start items-center gap-1\">\n              <div class=\"text-base-content/70 text-sm font-medium\">Subscription active until:</div>\n              <div class=\"text-base-content font-semibold\">\n                {{ utils.formatDate(subscription().current_period_end ?? '') }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-2xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-md capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary btn-sm\" [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.17", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300\">\n  <div class=\"card-body p-4\">\n    <!-- Header with title and price -->\n    <div class=\"flex justify-between items-start\">\n      <div class=\"flex flex-row justify-start items-start gap-3\">\n        <!-- Subscription image -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || subscriptionProductAlt\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div class=\"flex flex-col justify-start items-start gap-2\">\n          <div class=\"flex flex-row justify-start items-start gap-2\">\n            <h3 class=\"text-2xl font-bold text-base-content\">\n              {{ subscription().product?.name || subscriptionPlanFallback }}\n            </h3>\n            <div class=\"flex items-center gap-2 mt-1\">\n              <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-xs\">\n                {{ utils.translateStripeStatus(subscription().status) }}\n              </span>\n              @if (subscription().cancel.cancel_at_period_end) {\n                <span class=\"badge badge-warning badge-xs\" i18n=\"@@stripe.subscription.canceled_badge\">Canceled</span>\n              }\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-start items-start gap-4\">\n            <div class=\"flex flex-row justify-start items-center gap-1\">\n              <div class=\"text-base-content/70 text-sm font-medium\" i18n=\"@@stripe.subscription.active_until\">Subscription active until:</div>\n              <div class=\"text-base-content font-semibold\">\n                {{ utils.formatDate(subscription().current_period_end ?? '') }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main price -->\n      <div class=\"text-right\">\n        <div class=\"text-2xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-md capitalize\">\n          {{ utils.translateBillingInterval(subscription().plan.interval) }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary btn-sm\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          <span i18n=\"@@stripe.common.loading\">Loading...</span>\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          <span i18n=\"@@stripe.subscription.manage\">Manage subscription</span>\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300\">\n  <div class=\"card-body p-4\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start\">\n      <div class=\"flex flex-row justify-start items-start 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 class=\"flex flex-col justify-start items-start gap-2\">\n          <div class=\"flex flex-row justify-start items-start gap-2\">\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-xs\">\n                {{ subscription().status }}\n              </span>\n              @if (subscription().cancel.cancel_at_period_end) {\n                <span class=\"badge badge-warning badge-xs\">Cancelada</span>\n              }\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-start items-start gap-4\">\n            <!--<div class=\"flex flex-row justify-start items-center gap-1\">\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=\"flex flex-row justify-start items-center gap-1\">\n              <div class=\"text-base-content/70 text-sm font-medium\">Subscription active until:</div>\n              <div class=\"text-base-content font-semibold\">\n                {{ utils.formatDate(subscription().current_period_end ?? '') }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-2xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-md capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary btn-sm\" [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> " }]
+            args: [{ selector: 'lib-subscription-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-gradient-to-br from-base-100/10 to-base-200/10 shadow-lg hover:shadow-xl transition-all duration-300\">\n  <div class=\"card-body p-4\">\n    <!-- Header with title and price -->\n    <div class=\"flex justify-between items-start\">\n      <div class=\"flex flex-row justify-start items-start gap-3\">\n        <!-- Subscription image -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || subscriptionProductAlt\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div class=\"flex flex-col justify-start items-start gap-2\">\n          <div class=\"flex flex-row justify-start items-start gap-2\">\n            <h3 class=\"text-2xl font-bold text-base-content\">\n              {{ subscription().product?.name || subscriptionPlanFallback }}\n            </h3>\n            <div class=\"flex items-center gap-2 mt-1\">\n              <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-xs\">\n                {{ utils.translateStripeStatus(subscription().status) }}\n              </span>\n              @if (subscription().cancel.cancel_at_period_end) {\n                <span class=\"badge badge-warning badge-xs\" i18n=\"@@stripe.subscription.canceled_badge\">Canceled</span>\n              }\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-start items-start gap-4\">\n            <div class=\"flex flex-row justify-start items-center gap-1\">\n              <div class=\"text-base-content/70 text-sm font-medium\" i18n=\"@@stripe.subscription.active_until\">Subscription active until:</div>\n              <div class=\"text-base-content font-semibold\">\n                {{ utils.formatDate(subscription().current_period_end ?? '') }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Main price -->\n      <div class=\"text-right\">\n        <div class=\"text-2xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-md capitalize\">\n          {{ utils.translateBillingInterval(subscription().plan.interval) }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary btn-sm\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          <span i18n=\"@@stripe.common.loading\">Loading...</span>\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          <span i18n=\"@@stripe.subscription.manage\">Manage subscription</span>\n        }\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
 
 class SubscriptionsListComponent {
-    subscriptions = input.required(...(ngDevMode ? [{ debugName: "subscriptions" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    withEmptyState = input(true, ...(ngDevMode ? [{ debugName: "withEmptyState" }] : []));
+    subscriptions = input.required(...(ngDevMode ? [{ debugName: "subscriptions" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    withEmptyState = input(true, ...(ngDevMode ? [{ debugName: "withEmptyState" }] : /* istanbul ignore next */ []));
     onManageSubscription = output();
     manageSubscription(customerId) {
         this.onManageSubscription.emit(customerId);
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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\" i18n=\"@@stripe.subscription.empty_title\">You have no active subscriptions</h2>\n            <p class=\"text-gray-600\" i18n=\"@@stripe.subscription.empty_description\">Browse our plans to start a subscription.</p>\n          </div>\n        </div>\n      </div>\n  }\n</div>\n", 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: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+            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\" i18n=\"@@stripe.subscription.empty_title\">You have no active subscriptions</h2>\n            <p class=\"text-gray-600\" i18n=\"@@stripe.subscription.empty_description\">Browse our plans to start a subscription.</p>\n          </div>\n        </div>\n      </div>\n  }\n</div>\n" }]
         }], 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: "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> " });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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(...(ngDevMode ? [{ debugName: "subscription" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     utils = inject(UtilsService);
     onManageSubscription = output();
     hasValidProductImages() {
@@ -2002,64 +2130,67 @@ class SubscriptionCardComponent {
     manageSubscription() {
         this.onManageSubscription.emit(this.subscription().customer);
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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        {{ utils.translateStripeStatus(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()\" i18n=\"@@stripe.subscription.manage\">Manage subscription</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: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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" }]
+            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        {{ utils.translateStripeStatus(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()\" i18n=\"@@stripe.subscription.manage\">Manage subscription</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: "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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentIntentItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", 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: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
+    paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : /* istanbul ignore next */ []));
     utils = inject(UtilsService);
-    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    liveModeLabel = $localize `:@@stripe.payment_intents.mode.live:Live`;
+    testModeLabel = $localize `:@@stripe.payment_intents.mode.test:Test`;
+    notAvailableLabel = $localize `:@@stripe.common.not_available:N/A`;
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
     toggleExpand() {
         this.isExpanded.update(value => !value);
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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            {{ utils.translateStripeStatus(paymentIntent().status) }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\" i18n=\"@@stripe.payment_intents.mode.test\">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      @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\" i18n=\"@@stripe.payment_intents.payment_method\">Payment method</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      <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\" i18n=\"@@stripe.payment_intents.confirmation\">Confirmation:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\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            <span i18n=\"@@stripe.payment_intents.transaction_details\">Transaction details</span>\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\" i18n=\"@@stripe.payment_intents.table.status\">Status</div>\n              <div class=\"stat-value text-sm capitalize\">{{ utils.translateStripeStatus(paymentIntent().status) }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? liveModeLabel : testModeLabel }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\" i18n=\"@@stripe.payment_intents.table.amount\">Amount</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        @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              <span i18n=\"@@stripe.payment_intents.payment_info\">Payment information</span>\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\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            <span i18n=\"@@stripe.payment_intents.additional_info\">Additional information</span>\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\" i18n=\"@@stripe.payment_intents.invoice\">Invoice</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\" i18n=\"@@stripe.payment_intents.environment\">Environment</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\" i18n=\"@@stripe.payment_intents.mode.live\">Live</span>\n                } @else {\n                  <span class=\"text-warning\" i18n=\"@@stripe.payment_intents.mode.test\">Test</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\" i18n=\"@@stripe.payment_intents.reference\">Reference</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || notAvailableLabel }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+            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            {{ utils.translateStripeStatus(paymentIntent().status) }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\" i18n=\"@@stripe.payment_intents.mode.test\">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      @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\" i18n=\"@@stripe.payment_intents.payment_method\">Payment method</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      <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\" i18n=\"@@stripe.payment_intents.confirmation\">Confirmation:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\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            <span i18n=\"@@stripe.payment_intents.transaction_details\">Transaction details</span>\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\" i18n=\"@@stripe.payment_intents.table.status\">Status</div>\n              <div class=\"stat-value text-sm capitalize\">{{ utils.translateStripeStatus(paymentIntent().status) }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? liveModeLabel : testModeLabel }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\" i18n=\"@@stripe.payment_intents.table.amount\">Amount</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        @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              <span i18n=\"@@stripe.payment_intents.payment_info\">Payment information</span>\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\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            <span i18n=\"@@stripe.payment_intents.additional_info\">Additional information</span>\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\" i18n=\"@@stripe.payment_intents.invoice\">Invoice</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\" i18n=\"@@stripe.payment_intents.environment\">Environment</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\" i18n=\"@@stripe.payment_intents.mode.live\">Live</span>\n                } @else {\n                  <span class=\"text-warning\" i18n=\"@@stripe.payment_intents.mode.test\">Test</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\" i18n=\"@@stripe.payment_intents.reference\">Reference</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || notAvailableLabel }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }] } });
 
 class PaymentIntentsListComponent {
-    paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
+    paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : /* istanbul ignore next */ []));
     onRefresh = output();
     trackByPaymentIntentId = (index, item) => item.id;
     refreshPaymentIntents() {
         this.onRefresh.emit();
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaymentIntentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }} <span i18n=\"@@stripe.payment_intents.count_label\">payment intents</span></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      <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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\" i18n=\"@@stripe.payment_intents.empty_title\">No recent payment intents</h2>\n          <p class=\"text-gray-600\" i18n=\"@@stripe.payment_intents.empty_description\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", 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: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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> " }]
+                    ], 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 }} <span i18n=\"@@stripe.payment_intents.count_label\">payment intents</span></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      <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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\" i18n=\"@@stripe.payment_intents.empty_title\">No recent payment intents</h2>\n          <p class=\"text-gray-600\" i18n=\"@@stripe.payment_intents.empty_description\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], 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', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []));
     manageSubscription(customerId) {
         this.portalAccountStore.createPortalSession(customerId, this.returnUrl());
     }
@@ -2068,19 +2199,19 @@ class SubscriptionsComponent {
             this.customerStore.loadSubscriptions(this.customerStore.customer().data?.id);
         }
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SubscriptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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\" i18n=\"@@stripe.subscription.title\">Subscriptions</h2>\n    <p class=\"text-gray-600\" i18n=\"@@stripe.subscription.description\">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 }} <span i18n=\"@@stripe.subscription.count_label\">subscriptions</span></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      <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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>\n", 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: "21.2.0", ngImport: i0, type: SubscriptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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>" }]
+            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\" i18n=\"@@stripe.subscription.title\">Subscriptions</h2>\n    <p class=\"text-gray-600\" i18n=\"@@stripe.subscription.description\">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 }} <span i18n=\"@@stripe.subscription.count_label\">subscriptions</span></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      <span i18n=\"@@stripe.common.refresh\">Refresh</span>\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>\n" }]
         }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
 
 class CustomerDashboardComponent {
     customerStore = inject(CustomerStore);
-    returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
-    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
-    activeTab = signal('list', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []));
+    customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : /* istanbul ignore next */ []));
+    activeTab = signal('list', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     refreshPaymentIntents() {
         this.customerStore.loadPaymentIntents(this.customerStore.customer().data?.id);
     }
@@ -2090,27 +2221,24 @@ class CustomerDashboardComponent {
     exportSelectedPaymentIntents(paymentIntents) {
         console.log('[💰 CustomerDashboardComponent] exportSelectedPaymentIntents: ', paymentIntents);
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomerDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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\" i18n=\"@@stripe.customer.payment_intents_title\">Payment Intents</h2>\n      <p class=\"text-gray-600\" i18n=\"@@stripe.customer.payment_intents_description\">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')\" i18n=\"@@stripe.customer.tab_list\">List</a>\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\" i18n=\"@@stripe.customer.tab_table\">Table</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: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-customer-dashboard', standalone: true, imports: [
                         CommonModule,
                         PaymentIntentsListComponent,
                         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" }]
+                    ], 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\" i18n=\"@@stripe.customer.payment_intents_title\">Payment Intents</h2>\n      <p class=\"text-gray-600\" i18n=\"@@stripe.customer.payment_intents_description\">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')\" i18n=\"@@stripe.customer.tab_list\">List</a>\n      <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\" i18n=\"@@stripe.customer.tab_table\">Table</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
- */
 // Export configurations
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutStore, Currency, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, PortalAccountStore, ProductItemButtonComponent, ProductListComponent, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_BROWSER_CLIENT, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseProduct, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
+export { CheckoutStore, Currency, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, PortalAccountStore, ProductItemButtonComponent, ProductListComponent, ProductsService, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_BROWSER_CLIENT, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
 //# sourceMappingURL=dotted-labs-ngx-supabase-stripe.mjs.map