@thescaffold/ngx-apps-capital 0.2.21 → 0.2.31

package/fesm2022/thescaffold-ngx-apps-capital-dashboard.module-C08wnnHw.mjs

@@ -0,0 +1,788 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, ViewChild, Component, NgModule } from '@angular/core';
+import * as i1$1 from '@thescaffold/ngx-common';
+import { PeriodService, DefaultPeriodType, PaymentModule as PaymentModule$1 } from '@thescaffold/ngx-common';
+import * as i3 from '@thescaffold/ngx-core';
+import { BaseDirective, ControlService, getEnv, navigateExternal, using, SharedModule, PipesModule } from '@thescaffold/ngx-core';
+import * as i2 from '@thescaffold/ngx-ui';
+import { FlyoutService, WizardService, WebgetsModule, ElementsModule, DashboardModule as DashboardModule$1 } from '@thescaffold/ngx-ui';
+import { C as CardProvider } from './thescaffold-ngx-apps-capital-card.provider-CebuwlQl.mjs';
+import { P as PaymentProvider } from './thescaffold-ngx-apps-capital-payment.provider-DAlEfzgr.mjs';
+import { of, takeUntil, map, switchMap, forkJoin } from 'rxjs';
+import * as i1 from '@angular/common';
+
+class DashboardComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.flyoutService = inject(FlyoutService);
+        this.controlService = inject(ControlService);
+        this.wizardService = inject(WizardService);
+        this.periodService = inject(PeriodService);
+        this.paymentMeta$ = () => of({
+            type: this.actionType,
+            planTypeId: this.selectedPlanTypeId,
+            periodType: this.periodType,
+        });
+        this.verifyPaymentData = {
+            mode: 'verify',
+            appName: getEnv('APP_NAME'),
+            amount: 0.0,
+            hooks: {},
+            options: [],
+        };
+        this.wizardData = {
+            name: 'upgrade-plan',
+            showProgress: true,
+            showNav: false,
+        };
+        this.context = this.controlService.getContext();
+        this.planTypes$ = this.apiService
+            .on('apps/capital/plan-type')
+            .getMany({
+            page: 1,
+            perPage: 12,
+            clientId: this.context?.clientId,
+            currency: getEnv('X_PREFERENCE_CURRENCY'),
+        })
+            .pipe(takeUntil(this.$), map(({ data }) => data));
+        this.currentPlan = null;
+        this.capital$ = this.apiService.post('apps/capital/wallet/init').pipe(takeUntil(this.$), switchMap((wallet) => forkJoin([
+            this.apiService.get('apps/capital/user-plan'),
+            of(wallet),
+            this.apiService.get('apps/capital/debt'),
+            this.apiService.get('apps/capital/cost', { type: 'current' }),
+        ])), map(([plan, wallet, pending, estimate]) => {
+            this.currentPlan = plan?.data;
+            return {
+                plan: plan?.data,
+                wallet: wallet?.data,
+                pending: pending?.data,
+                estimate: estimate?.data,
+            };
+        }));
+        this.periodType = DefaultPeriodType;
+        this.periodData$ = this.periodService.list().pipe(map((list) => ({
+            default: list.find((item) => item.value == DefaultPeriodType),
+            list,
+            size: 'btn-lg',
+            showSearch: false,
+        })));
+    }
+    get paymentData() {
+        const amount = (this.actionType == 'apps.capital.dashboard.upgrade-plan'
+            ? this.upgradePlanAmount
+            : this.actionType == 'apps.capital.dashboard.pay-debt'
+                ? this.payNowAmount
+                : 0);
+        return {
+            mode: 'pay',
+            appName: getEnv('APP_NAME'),
+            amount: amount == 0 ? -1 : amount,
+            hooks: {
+                meta: () => this.paymentMeta$(),
+            },
+            options: ['card', 'provider', 'wallet'],
+            redirect: (provider, amount, reference, currency) => {
+                navigateExternal(`${getEnv('BASE_URL')}${this.router.url}?type=${provider}&reference=${reference}`);
+            },
+        };
+    }
+    onPeriodSelect({ value }) {
+        this.periodType = value;
+    }
+    upgradePlan() {
+        this.actionType = 'apps.capital.dashboard.upgrade-plan';
+        this.flyoutService.open(this.upgradePlanFlyout);
+    }
+    payNow(payNowAmount) {
+        this.actionType = 'apps.capital.dashboard.pay-debt';
+        this.payNowAmount = payNowAmount;
+        this.flyoutService.open(this.payNowFlyout);
+    }
+    selectPlanType(planType) {
+        this.selectedPlanTypeId = planType.id;
+        this.apiService
+            .post('apps/capital/user-plan/compute-upgrade', {
+            planTypeId: planType.id,
+            periodType: this.periodType,
+        })
+            .pipe(takeUntil(this.$))
+            .subscribe(using(({ data }) => {
+            this.upgradePlanAmount = data.diff;
+            this.wizardService.goto(this.wizardData.name, 'make-payment');
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DashboardComponent, isStandalone: false, selector: "app-dashboard", viewQueries: [{ propertyName: "beforeMetricsTemplate", first: true, predicate: ["beforeMetricsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "upgradePlanFlyout", first: true, predicate: ["upgradePlanFlyout"], descendants: true, read: TemplateRef, static: true }, { propertyName: "payNowFlyout", first: true, predicate: ["payNowFlyout"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #beforeMetricsTemplate>
+      <!-- verify payment -->
+      <x-common-payment [data]="verifyPaymentData"></x-common-payment>
+    
+      @if (capital$ | async; as capital) {
+        <div class="">
+          <div class="row gx-5 d-flex flex-wrap">
+            <div class="col d-flex flex-column">
+              <div class="card card-body">
+                <div class="d-flex justify-content-between align-items-center">
+                  <span class="fs-6">
+                    {{
+                    'apps.capital.component.dashboard.message.plan' | xTranslate
+                    }}
+                  </span>
+                  @if (capital.plan?.type?.name) {
+                    <span class="fs-3"
+                      >{{ capital.plan?.type?.name }}
+                    </span>
+                  }
+                  <!-- <span *ngIf="capital.plan?.type?.name" class="fs-3"
+                  >{{
+                  capital.plan.type[capital.plan.periodType]
+                  | xMajor | number: '1.2-2'
+                  }}<span class="fs-6">{{ capital.plan.type.currency }}</span>
+                </span> -->
+                @if (!capital.plan?.type?.name) {
+                  <span class="fs-3">
+                    ...
+                  </span>
+                }
+              </div>
+              @if (
+                capital.plan?.type?.name &&
+                capital.plan?.type?.name?.toLowerCase() != 'pro'
+                ) {
+                <div
+                  class="d-flex justify-content-end align-items-center"
+                  >
+                  <button
+                    class="btn btn-outline-warning btn-sm small-text"
+                    (click)="upgradePlan()"
+                    >
+                    {{
+                    'apps.capital.component.dashboard.button.upgrade-plan'
+                    | xTranslate
+                    }}
+                  </button>
+                </div>
+              }
+              @if (!capital.plan?.type?.name) {
+                <div
+                  class="d-flex justify-content-end align-items-center"
+                  >
+                  <button
+                    class="btn btn-outline-warning btn-sm small-text"
+                    (click)="upgradePlan()"
+                    >
+                    {{
+                    'apps.capital.component.dashboard.button.select-plan'
+                    | xTranslate
+                    }}
+                  </button>
+                </div>
+              }
+            </div>
+          </div>
+          <!-- <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">{{
+                'apps.capital.component.dashboard.message.balance'
+                | xTranslate
+              }}</span>
+              <span class="fs-3"
+                >{{ capital.wallet.availableBalance | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{
+                capital.wallet.currency
+              }}</span></span
+              >
+            </div>
+          </div>
+        </div> -->
+        <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">
+                {{
+                'apps.capital.component.dashboard.message.pending'
+                | xTranslate
+                }}
+              </span>
+              <span
+                class="fs-3"
+                [ngClass]="{ 'text-warning': capital.pending.debt }"
+                >{{ capital.pending.debt | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{ capital.wallet.currency }}</span>
+              </span>
+            </div>
+            @if (capital.pending.debt > 0) {
+              <div
+                class="d-flex justify-content-end align-items-center"
+                >
+                <button
+                  class="btn btn-outline-warning btn-sm small-text"
+                  (click)="payNow(capital.pending.debt)"
+                  >
+                  {{
+                  'apps.capital.component.dashboard.button.pay-now'
+                  | xTranslate
+                  }}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+        <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">{{
+                'apps.capital.component.dashboard.message.cost' | xTranslate
+              }}</span>
+              <span class="fs-3"
+                >{{ capital.estimate.cost | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{
+                capital.wallet.currency
+              }}</span></span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    } @else {
+      <x-element-loader></x-element-loader>
+    }
+    </ng-template>
+    
+    <!-- upgrade plan flyout -->
+    <ng-template #upgradePlanFlyout>
+      <x-webget-flyout [data]="{ title: 'Upgrade Plan' }">
+        <x-webget-wizard [data]="wizardData">
+          <ng-template [xWizard]="'select-plan'">
+            @if (periodData$ | async; as periodData) {
+              @if (
+                planTypes$ && planTypes$ | async; as planTypes) {
+                <div
+                  class="d-flex flex-column"
+                  >
+                  <div class="d-flex flex-column my-3 align-items-center">
+                    <p class="text-secondary text-center">
+                      {{
+                      'apps.capital.component.dashboard.message.select-plan'
+                      | xTranslate
+                      }}
+                    </p>
+                  </div>
+                  <div class="d-flex justify-content-end align-items-center my-3">
+                    <x-picker
+                      [data]="periodData"
+                      (select)="onPeriodSelect($event)"
+                    ></x-picker>
+                  </div>
+                  @if (planTypes.length) {
+                    <div
+                      class="accordion"
+                      id="plan-accordion"
+                      >
+                      @for (planType of planTypes; track planType; let i = $index) {
+                        <div
+                          class="accordion-item w-100"
+                          >
+                          @if (planType.id != currentPlan?.type?.id) {
+                            <div
+                              class="accordion-header"
+                              >
+                              <button
+                                class="accordion-button d-flex justify-content-between align-items-center"
+                                [ngClass]="{ collapsed: planType.type !== 'popular' }"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                [attr.data-bs-target]="'#collapse' + i"
+                                >
+                                <div class="col-8">
+                                  <div class="h3">{{ planType.name | titlecase }}</div>
+                                  @if (planType.desc) {
+                                    <div
+                                      class="h6 text-body-secondary"
+                                      >
+                                      {{ planType.desc }}
+                                    </div>
+                                  }
+                                </div>
+                                <div class="col-3">
+                                  <div class="fw-bolder fst-italic h3">
+                                    {{ planType.currency ?? '...' }}
+                                    {{
+                                    (planType[periodType]
+                                    | xMajor
+                                    | number: '1.2-2') ?? '...'
+                                    }}
+                                  </div>
+                                </div>
+                              </button>
+                            </div>
+                          }
+                          <div
+                            [attr.id]="'collapse' + i"
+                            class="accordion-collapse collapse"
+                            [ngClass]="{ show: planType.type == 'popular' }"
+                            data-bs-parent="#plan-accordion"
+                            >
+                            <div class="accordion-body">
+                              <div
+                                class="d-flex justify-content-start align-items-center"
+                                >
+                                @if (planType.detail) {
+                                  <p
+                                    class="text-body-secondary"
+                                    >
+                                    {{ planType.detail }}
+                                  </p>
+                                }
+                              </div>
+                              @if (planType?.meta?.features?.length) {
+                                <ul
+                                  class="list-group list-group-flush"
+                                  >
+                                  @for (feature of planType?.meta?.features; track feature) {
+                                    <li
+                                      class="list-group-item"
+                                      >
+                                      {{ feature }}
+                                    </li>
+                                  }
+                                </ul>
+                              }
+                              <div
+                                class="d-flex justify-content-end align-items-center my-3"
+                                >
+                                <button
+                                  class="btn btn-primary"
+                                  (click)="selectPlanType(planType)"
+                                  >
+                                  Choose {{ planType.name }}
+                                  <i class="fa-solid fa-arrow-right-long"></i>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  } @else {
+                    <x-element-blank></x-element-blank>
+                  }
+                  <div
+                    class="d-flex justify-content-center align-items-center my-3"
+                    >
+                    <p class="text-center mb-1">
+                      {{
+                      'apps.capital.component.dashboard.message.terms'
+                      | xTranslate
+                      }}
+                    </p>
+                  </div>
+                </div>
+              } @else {
+                <x-element-loader></x-element-loader>
+              }
+            } @else {
+              <x-element-loader></x-element-loader>
+            }
+          </ng-template>
+          <ng-template [xWizard]="'make-payment'">
+            @if (false) {
+            } @else {
+              <x-common-payment [data]="paymentData"></x-common-payment>
+            }
+          </ng-template>
+        </x-webget-wizard>
+      </x-webget-flyout>
+    </ng-template>
+    
+    <!-- pay now flyout -->
+    <ng-template #payNowFlyout>
+      <x-webget-flyout [data]="{ title: 'Pay Now' }">
+        @if (false) {
+        } @else {
+          <x-common-payment [data]="paymentData"></x-common-payment>
+        }
+      </x-webget-flyout>
+    </ng-template>
+    
+    <!-- upgrade payment flyout -->
+    <ng-template #makePaymentTemplate>
+      <x-common-payment [data]="paymentData"></x-common-payment>
+    </ng-template>
+    
+    <!-- misc -->
+    <ng-template #loader>
+      <x-element-loader></x-element-loader>
+    </ng-template>
+    
+    <ng-template #empty>
+      <x-element-blank></x-element-blank>
+    </ng-template>
+    `, isInline: true, styles: [".small-text{font-size:.7rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.FlyoutComponent, selector: "x-webget-flyout", inputs: ["data"] }, { kind: "component", type: i2.WizardComponent, selector: "x-webget-wizard", inputs: ["data"] }, { kind: "directive", type: i2.WizardDirective, selector: "ng-template[xWizard]", inputs: ["xWizard"] }, { kind: "component", type: i2.BlankComponent, selector: "x-element-blank", inputs: ["image", "icon", "type"] }, { kind: "component", type: i2.LoaderComponent, selector: "x-element-loader", inputs: ["data"] }, { kind: "component", type: i2.PickerComponent, selector: "x-picker", inputs: ["data"], outputs: ["select"] }, { kind: "component", type: i1$1.PaymentComponent, selector: "x-common-payment", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "xTranslate" }, { kind: "pipe", type: i3.MajorPipe, name: "xMajor" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'app-dashboard', template: `
+    <ng-template #beforeMetricsTemplate>
+      <!-- verify payment -->
+      <x-common-payment [data]="verifyPaymentData"></x-common-payment>
+    
+      @if (capital$ | async; as capital) {
+        <div class="">
+          <div class="row gx-5 d-flex flex-wrap">
+            <div class="col d-flex flex-column">
+              <div class="card card-body">
+                <div class="d-flex justify-content-between align-items-center">
+                  <span class="fs-6">
+                    {{
+                    'apps.capital.component.dashboard.message.plan' | xTranslate
+                    }}
+                  </span>
+                  @if (capital.plan?.type?.name) {
+                    <span class="fs-3"
+                      >{{ capital.plan?.type?.name }}
+                    </span>
+                  }
+                  <!-- <span *ngIf="capital.plan?.type?.name" class="fs-3"
+                  >{{
+                  capital.plan.type[capital.plan.periodType]
+                  | xMajor | number: '1.2-2'
+                  }}<span class="fs-6">{{ capital.plan.type.currency }}</span>
+                </span> -->
+                @if (!capital.plan?.type?.name) {
+                  <span class="fs-3">
+                    ...
+                  </span>
+                }
+              </div>
+              @if (
+                capital.plan?.type?.name &&
+                capital.plan?.type?.name?.toLowerCase() != 'pro'
+                ) {
+                <div
+                  class="d-flex justify-content-end align-items-center"
+                  >
+                  <button
+                    class="btn btn-outline-warning btn-sm small-text"
+                    (click)="upgradePlan()"
+                    >
+                    {{
+                    'apps.capital.component.dashboard.button.upgrade-plan'
+                    | xTranslate
+                    }}
+                  </button>
+                </div>
+              }
+              @if (!capital.plan?.type?.name) {
+                <div
+                  class="d-flex justify-content-end align-items-center"
+                  >
+                  <button
+                    class="btn btn-outline-warning btn-sm small-text"
+                    (click)="upgradePlan()"
+                    >
+                    {{
+                    'apps.capital.component.dashboard.button.select-plan'
+                    | xTranslate
+                    }}
+                  </button>
+                </div>
+              }
+            </div>
+          </div>
+          <!-- <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">{{
+                'apps.capital.component.dashboard.message.balance'
+                | xTranslate
+              }}</span>
+              <span class="fs-3"
+                >{{ capital.wallet.availableBalance | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{
+                capital.wallet.currency
+              }}</span></span
+              >
+            </div>
+          </div>
+        </div> -->
+        <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">
+                {{
+                'apps.capital.component.dashboard.message.pending'
+                | xTranslate
+                }}
+              </span>
+              <span
+                class="fs-3"
+                [ngClass]="{ 'text-warning': capital.pending.debt }"
+                >{{ capital.pending.debt | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{ capital.wallet.currency }}</span>
+              </span>
+            </div>
+            @if (capital.pending.debt > 0) {
+              <div
+                class="d-flex justify-content-end align-items-center"
+                >
+                <button
+                  class="btn btn-outline-warning btn-sm small-text"
+                  (click)="payNow(capital.pending.debt)"
+                  >
+                  {{
+                  'apps.capital.component.dashboard.button.pay-now'
+                  | xTranslate
+                  }}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+        <div class="col d-flex flex-column">
+          <div class="card card-body">
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fs-6">{{
+                'apps.capital.component.dashboard.message.cost' | xTranslate
+              }}</span>
+              <span class="fs-3"
+                >{{ capital.estimate.cost | xMajor | number: '1.2-2'
+                }}<span class="fs-6">{{
+                capital.wallet.currency
+              }}</span></span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    } @else {
+      <x-element-loader></x-element-loader>
+    }
+    </ng-template>
+    
+    <!-- upgrade plan flyout -->
+    <ng-template #upgradePlanFlyout>
+      <x-webget-flyout [data]="{ title: 'Upgrade Plan' }">
+        <x-webget-wizard [data]="wizardData">
+          <ng-template [xWizard]="'select-plan'">
+            @if (periodData$ | async; as periodData) {
+              @if (
+                planTypes$ && planTypes$ | async; as planTypes) {
+                <div
+                  class="d-flex flex-column"
+                  >
+                  <div class="d-flex flex-column my-3 align-items-center">
+                    <p class="text-secondary text-center">
+                      {{
+                      'apps.capital.component.dashboard.message.select-plan'
+                      | xTranslate
+                      }}
+                    </p>
+                  </div>
+                  <div class="d-flex justify-content-end align-items-center my-3">
+                    <x-picker
+                      [data]="periodData"
+                      (select)="onPeriodSelect($event)"
+                    ></x-picker>
+                  </div>
+                  @if (planTypes.length) {
+                    <div
+                      class="accordion"
+                      id="plan-accordion"
+                      >
+                      @for (planType of planTypes; track planType; let i = $index) {
+                        <div
+                          class="accordion-item w-100"
+                          >
+                          @if (planType.id != currentPlan?.type?.id) {
+                            <div
+                              class="accordion-header"
+                              >
+                              <button
+                                class="accordion-button d-flex justify-content-between align-items-center"
+                                [ngClass]="{ collapsed: planType.type !== 'popular' }"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                [attr.data-bs-target]="'#collapse' + i"
+                                >
+                                <div class="col-8">
+                                  <div class="h3">{{ planType.name | titlecase }}</div>
+                                  @if (planType.desc) {
+                                    <div
+                                      class="h6 text-body-secondary"
+                                      >
+                                      {{ planType.desc }}
+                                    </div>
+                                  }
+                                </div>
+                                <div class="col-3">
+                                  <div class="fw-bolder fst-italic h3">
+                                    {{ planType.currency ?? '...' }}
+                                    {{
+                                    (planType[periodType]
+                                    | xMajor
+                                    | number: '1.2-2') ?? '...'
+                                    }}
+                                  </div>
+                                </div>
+                              </button>
+                            </div>
+                          }
+                          <div
+                            [attr.id]="'collapse' + i"
+                            class="accordion-collapse collapse"
+                            [ngClass]="{ show: planType.type == 'popular' }"
+                            data-bs-parent="#plan-accordion"
+                            >
+                            <div class="accordion-body">
+                              <div
+                                class="d-flex justify-content-start align-items-center"
+                                >
+                                @if (planType.detail) {
+                                  <p
+                                    class="text-body-secondary"
+                                    >
+                                    {{ planType.detail }}
+                                  </p>
+                                }
+                              </div>
+                              @if (planType?.meta?.features?.length) {
+                                <ul
+                                  class="list-group list-group-flush"
+                                  >
+                                  @for (feature of planType?.meta?.features; track feature) {
+                                    <li
+                                      class="list-group-item"
+                                      >
+                                      {{ feature }}
+                                    </li>
+                                  }
+                                </ul>
+                              }
+                              <div
+                                class="d-flex justify-content-end align-items-center my-3"
+                                >
+                                <button
+                                  class="btn btn-primary"
+                                  (click)="selectPlanType(planType)"
+                                  >
+                                  Choose {{ planType.name }}
+                                  <i class="fa-solid fa-arrow-right-long"></i>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  } @else {
+                    <x-element-blank></x-element-blank>
+                  }
+                  <div
+                    class="d-flex justify-content-center align-items-center my-3"
+                    >
+                    <p class="text-center mb-1">
+                      {{
+                      'apps.capital.component.dashboard.message.terms'
+                      | xTranslate
+                      }}
+                    </p>
+                  </div>
+                </div>
+              } @else {
+                <x-element-loader></x-element-loader>
+              }
+            } @else {
+              <x-element-loader></x-element-loader>
+            }
+          </ng-template>
+          <ng-template [xWizard]="'make-payment'">
+            @if (false) {
+            } @else {
+              <x-common-payment [data]="paymentData"></x-common-payment>
+            }
+          </ng-template>
+        </x-webget-wizard>
+      </x-webget-flyout>
+    </ng-template>
+    
+    <!-- pay now flyout -->
+    <ng-template #payNowFlyout>
+      <x-webget-flyout [data]="{ title: 'Pay Now' }">
+        @if (false) {
+        } @else {
+          <x-common-payment [data]="paymentData"></x-common-payment>
+        }
+      </x-webget-flyout>
+    </ng-template>
+    
+    <!-- upgrade payment flyout -->
+    <ng-template #makePaymentTemplate>
+      <x-common-payment [data]="paymentData"></x-common-payment>
+    </ng-template>
+    
+    <!-- misc -->
+    <ng-template #loader>
+      <x-element-loader></x-element-loader>
+    </ng-template>
+    
+    <ng-template #empty>
+      <x-element-blank></x-element-blank>
+    </ng-template>
+    `, styles: [".small-text{font-size:.7rem!important}\n"] }]
+        }], propDecorators: { beforeMetricsTemplate: [{
+                type: ViewChild,
+                args: ['beforeMetricsTemplate', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], upgradePlanFlyout: [{
+                type: ViewChild,
+                args: ['upgradePlanFlyout', { read: TemplateRef, static: true }]
+            }], payNowFlyout: [{
+                type: ViewChild,
+                args: ['payNowFlyout', { read: TemplateRef, static: true }]
+            }] } });
+
+class DashboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent], imports: [SharedModule, i2.DashboardModule, WebgetsModule,
+            ElementsModule,
+            PipesModule,
+            PaymentModule$1] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardModule, imports: [SharedModule,
+            DashboardModule$1.register({
+                metrics: [],
+                providers: [CardProvider, PaymentProvider],
+                templateSource: DashboardComponent,
+            }),
+            WebgetsModule,
+            ElementsModule,
+            PipesModule,
+            PaymentModule$1] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DashboardComponent],
+                    imports: [
+                        SharedModule,
+                        DashboardModule$1.register({
+                            metrics: [],
+                            providers: [CardProvider, PaymentProvider],
+                            templateSource: DashboardComponent,
+                        }),
+                        WebgetsModule,
+                        ElementsModule,
+                        PipesModule,
+                        PaymentModule$1,
+                    ],
+                }]
+        }] });
+
+export { DashboardModule };
+//# sourceMappingURL=thescaffold-ngx-apps-capital-dashboard.module-C08wnnHw.mjs.map