@metrifox/angular-sdk 0.0.2-beta.1 → 0.0.2-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +310 -320
  2. package/dist/README.md +310 -320
  3. package/dist/fesm2022/index.mjs +119 -64
  4. package/dist/modules/customer-portal/components/customer-portal.component.d.ts +8 -3
  5. package/dist/modules/pricing-table/components/pricing-table.component.d.ts +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
package/dist/fesm2022/index.mjs CHANGED
@@ -699,7 +699,7 @@ const defaultCustomerPortalTheme = {
699
699
  },
700
700
  sections: {
701
701
  background: '#ffffff',
702
- padding: '0px',
702
+ padding: '16px',
703
703
  borderColor: 'transparent',
704
704
  borderRadius: '8px',
705
705
  emptyTextColor: '#A1A1AA',
@@ -724,7 +724,7 @@ const defaultCustomerPortalTheme = {
724
724
  },
725
725
  header: { fontSize: '16px', fontWeight: '600', color: '#52525B' },
726
726
  label: { fontSize: '13px', fontWeight: '500', color: '#71717A' },
727
- value: { fontSize: '16px', fontWeight: '500', color: '#52525B' },
727
+ value: { fontSize: '14px', fontWeight: '500', color: '#52525B' },
728
728
  },
729
729
  buttons: {
730
730
  primary: {
@@ -766,10 +766,10 @@ const defaultCustomerPortalTheme = {
766
766
  cellPadding: '1rem 0.75rem',
767
767
  expandIconColor: '#71717A',
768
768
  typography: {
769
- fontSize: '16px',
770
- fontWeight: '500',
771
- headerFontSize: '16px',
772
- headerFontWeight: '600',
769
+ fontSize: '14px',
770
+ fontWeight: '400',
771
+ headerFontSize: '14px',
772
+ headerFontWeight: '500',
773
773
  },
774
774
  },
775
775
  modals: {
@@ -2160,7 +2160,7 @@ class CreditBalanceSectionComponent {
2160
2160
 
2161
2161
  <!-- Credit Transactions Modal (compact width) -->
2162
2162
  @if (showCreditTransactions()) {
2163
- <div class="fixed inset-0 flex items-center justify-center z-50 p-4" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeCreditTransactions()">
2163
+ <div class="fixed inset-0 flex items-center justify-center z-[100] p-4" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeCreditTransactions()">
2164
2164
  <div class="w-full max-w-sm max-h-[80vh] flex flex-col mx-auto" [style.background-color]="'var(--cp-modal-bg)'" [style.border-radius]="'var(--cp-modal-radius)'" (click)="$event.stopPropagation()">
2165
2165
  <!-- Modal Header -->
2166
2166
  <div class="flex justify-between items-center p-4 border-b border-gray-100">
@@ -2264,7 +2264,7 @@ class CreditBalanceSectionComponent {
2264
2264
 
2265
2265
  <!-- Wallet Settings Modal -->
2266
2266
  @if (showWalletSettings()) {
2267
- <div class="fixed inset-0 flex items-center justify-center z-50 p-6" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeWalletSettings()">
2267
+ <div class="fixed inset-0 flex items-center justify-center z-[100] p-6" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeWalletSettings()">
2268
2268
  <div class="w-full max-w-3xl min-h-[75vh] max-h-[85vh] flex flex-col shadow-xl" [style.background-color]="'var(--cp-modal-bg)'" [style.border-radius]="'var(--cp-modal-radius)'" (click)="$event.stopPropagation()">
2269
2269
  <!-- Modal Header -->
2270
2270
  <div class="flex justify-between items-center p-4 border-b border-gray-100">
@@ -2624,7 +2624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2624
2624
 
2625
2625
  <!-- Credit Transactions Modal (compact width) -->
2626
2626
  @if (showCreditTransactions()) {
2627
- <div class="fixed inset-0 flex items-center justify-center z-50 p-4" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeCreditTransactions()">
2627
+ <div class="fixed inset-0 flex items-center justify-center z-[100] p-4" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeCreditTransactions()">
2628
2628
  <div class="w-full max-w-sm max-h-[80vh] flex flex-col mx-auto" [style.background-color]="'var(--cp-modal-bg)'" [style.border-radius]="'var(--cp-modal-radius)'" (click)="$event.stopPropagation()">
2629
2629
  <!-- Modal Header -->
2630
2630
  <div class="flex justify-between items-center p-4 border-b border-gray-100">
@@ -2728,7 +2728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2728
2728
 
2729
2729
  <!-- Wallet Settings Modal -->
2730
2730
  @if (showWalletSettings()) {
2731
- <div class="fixed inset-0 flex items-center justify-center z-50 p-6" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeWalletSettings()">
2731
+ <div class="fixed inset-0 flex items-center justify-center z-[100] p-6" [style.background-color]="'var(--cp-modal-overlay-bg)'" (click)="closeWalletSettings()">
2732
2732
  <div class="w-full max-w-3xl min-h-[75vh] max-h-[85vh] flex flex-col shadow-xl" [style.background-color]="'var(--cp-modal-bg)'" [style.border-radius]="'var(--cp-modal-radius)'" (click)="$event.stopPropagation()">
2733
2733
  <!-- Modal Header -->
2734
2734
  <div class="flex justify-between items-center p-4 border-b border-gray-100">
@@ -3136,7 +3136,9 @@ class EntitlementsSectionComponent {
3136
3136
  [style.fontWeight]="'var(--cp-table-row-weight)'">
3137
3137
  <div class="flex flex-col gap-y-1 items-start max-w-[130px]">
3138
3138
  <span>{{ entitlement.feature_name || '-' }}</span>
3139
- <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded max-w-[120px] truncate">{{ entitlement.feature_key }}</span>
3139
+ <span class="text-[var(--cp-table-text)] max-w-[120px] truncate"
3140
+ [style.fontSize]="'var(--cp-table-row-size)'"
3141
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ entitlement.feature_key }}</span>
3140
3142
  </div>
3141
3143
  </td>
3142
3144
  <td class="text-[var(--cp-table-text)] border-y border-[var(--cp-table-border)]"
@@ -3180,7 +3182,8 @@ class EntitlementsSectionComponent {
3180
3182
  <div class="bg-transparent rounded-2xl px-3 pt-5">
3181
3183
  @if (getMeteredEntitlements().length > 0) {
3182
3184
  <!-- Header -->
3183
- <div class="grid grid-cols-4 border-b border-[var(--cp-table-border)] gap-x-4 py-3 pl-3 pr-12 bg-[var(--cp-table-header-bg)]">
3185
+ <div class="grid grid-cols-4 border-b border-[var(--cp-table-border)] gap-x-4 pr-12 bg-[var(--cp-table-header-bg)]"
3186
+ [style.padding]="'var(--cp-table-cell-padding, 0.75rem 1.5rem)'">
3184
3187
  <div class="text-[var(--cp-table-header-text)]"
3185
3188
  [style.fontSize]="'var(--cp-table-header-size)'"
3186
3189
  [style.fontWeight]="'var(--cp-table-header-weight)'">Feature</div>
@@ -3193,28 +3196,38 @@ class EntitlementsSectionComponent {
3193
3196
  </div>
3194
3197
 
3195
3198
  <!-- Rows -->
3196
- @for (usage of getMeteredEntitlements(); track usage.id || $index) {
3197
- <div class="py-4 px-4 border-b border-[var(--cp-table-border)] last:border-0">
3199
+ @for (usage of getMeteredEntitlements(); track usage.id || $index; let rowIdx = $index) {
3200
+ <div class="border-b border-[var(--cp-table-border)] last:border-0"
3201
+ [class]="rowIdx % 2 === 0 ? 'bg-[var(--cp-table-row-even-bg)]' : 'bg-[var(--cp-table-row-odd-bg)]'"
3202
+ [style.padding]="'var(--cp-table-cell-padding, 1rem 1.5rem)'">
3198
3203
  <!-- Main Row (Collapsible Trigger) -->
3199
3204
  <div class="flex items-center cursor-pointer" (click)="toggleEntitlementExpand(usage.id)">
3200
3205
  <div class="flex-1 grid grid-cols-4 gap-4 items-center pr-8">
3201
3206
  <!-- Feature -->
3202
- <div class="flex flex-col gap-y-1 items-start max-w-[120px]">
3203
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">{{ usage.feature_name || '-' }}</span>
3204
- <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded max-w-[120px] truncate">{{ usage.feature_key }}</span>
3207
+ <div class="flex flex-col gap-y-1 items-start max-w-[120px] text-balance">
3208
+ <span class="text-[var(--cp-table-text)]"
3209
+ [style.fontSize]="'var(--cp-table-row-size)'"
3210
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ usage.feature_name || '-' }}</span>
3211
+ <span class="text-[var(--cp-table-text)] max-w-[120px] truncate"
3212
+ [style.fontSize]="'var(--cp-table-row-size)'"
3213
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ usage.feature_key }}</span>
3205
3214
  </div>
3206
3215
 
3207
3216
  <!-- Type -->
3208
3217
  <div>
3209
- <span class="text-xs text-[var(--cp-link-color)]">{{ _capitalize(usage.type?.split('_').join(' ') || '') }}</span>
3218
+ <span class="text-[var(--cp-table-text)]"
3219
+ [style.fontSize]="'var(--cp-table-row-size)'"
3220
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ _capitalize(usage.type?.split('_').join(' ') || '') }}</span>
3210
3221
  </div>
3211
3222
 
3212
3223
  <!-- Usage -->
3213
3224
  <div class="col-span-2">
3214
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">{{ getEntitlementUsageBalance(usage) }}</span>
3215
- <div class="flex items-center gap-x-2">
3216
- <div class="w-96 h-1.5 my-1.5 bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-start justify-start rounded overflow-hidden">
3217
- <div class="h-1.5 bg-[var(--cp-section-usage-bar-color,#006FEE)] rounded" [style.width.%]="getEntitlementUsagePercent(usage)"></div>
3225
+ <span class="text-[var(--cp-table-text)]"
3226
+ [style.fontSize]="'var(--cp-table-row-size)'"
3227
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ getEntitlementUsageBalance(usage) }}</span>
3228
+ <div class="w-full flex items-center gap-x-2">
3229
+ <div class="w-full max-w-[24rem] h-[6px] my-[6px] bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-center justify-start rounded overflow-hidden">
3230
+ <div class="h-[6px] rounded" [style.width.%]="getEntitlementUsagePercent(usage)" [style.backgroundColor]="'var(--cp-section-usage-bar-color)'"></div>
3218
3231
  </div>
3219
3232
  <span class="text-[var(--cp-table-text)]"
3220
3233
  [style.fontSize]="'var(--cp-table-row-size)'"
@@ -3233,10 +3246,14 @@ class EntitlementsSectionComponent {
3233
3246
  @if (isEntitlementExpanded(usage.id)) {
3234
3247
  <div class="w-full rounded-lg overflow-hidden flex flex-col items-start justify-start gap-y-0 pt-4">
3235
3248
  @for (pool of getProcessedPools(usage); track pool.pool) {
3236
- <div class="w-full flex items-center px-6 py-3 gap-x-40">
3237
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)] w-20">{{ pool.pool }}</span>
3238
- <div>
3239
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">
3249
+ <div class="w-full flex items-center px-2 py-3 gap-x-12 sm:gap-x-20 md:gap-x-40">
3250
+ <span class="w-20 text-[var(--cp-table-text)]"
3251
+ [style.fontSize]="'var(--cp-table-row-size)'"
3252
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ pool.pool }}</span>
3253
+ <div class="flex-1">
3254
+ <span class="text-[var(--cp-table-text)]"
3255
+ [style.fontSize]="'var(--cp-table-row-size)'"
3256
+ [style.fontWeight]="'var(--cp-table-row-weight)'">
3240
3257
  @if (!pool.isUnlimited) {
3241
3258
  @if (pool.balance < 0) {
3242
3259
  {{ _formatNumber(Math.abs(pool.balance)) }} used above limit
@@ -3245,11 +3262,13 @@ class EntitlementsSectionComponent {
3245
3262
  }
3246
3263
  }
3247
3264
  </span>
3248
- <div class="flex items-center gap-x-2">
3249
- <div class="w-72 h-1.5 my-1.5 bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-start justify-start rounded overflow-hidden">
3250
- <div class="h-1.5 rounded" [class]="'bg-' + pool.color" [style.width.%]="pool.percent"></div>
3265
+ <div class="w-full flex items-center gap-x-2">
3266
+ <div class="w-full max-w-[18rem] h-[6px] my-[6px] bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-center justify-start rounded overflow-hidden">
3267
+ <div class="h-[6px]" [style.width.%]="pool.percent" [style.backgroundColor]="'var(--cp-section-usage-bar-color)'"></div>
3251
3268
  </div>
3252
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">
3269
+ <span class="text-[var(--cp-table-text)]"
3270
+ [style.fontSize]="'var(--cp-table-row-size)'"
3271
+ [style.fontWeight]="'var(--cp-table-row-weight)'">
3253
3272
  @if (pool.isUnlimited) {
3254
3273
  {{ _formatNumber(pool.used) }}/ Unlimited
3255
3274
  } @else {
@@ -3258,7 +3277,9 @@ class EntitlementsSectionComponent {
3258
3277
  </span>
3259
3278
  </div>
3260
3279
  @if (pool.nextResetAt) {
3261
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">resets on {{ pool.nextResetAt }}</span>
3280
+ <span class="text-[var(--cp-table-text)]"
3281
+ [style.fontSize]="'var(--cp-table-row-size)'"
3282
+ [style.fontWeight]="'var(--cp-table-row-weight)'">resets on {{ pool.nextResetAt }}</span>
3262
3283
  }
3263
3284
  </div>
3264
3285
  </div>
@@ -3363,7 +3384,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3363
3384
  [style.fontWeight]="'var(--cp-table-row-weight)'">
3364
3385
  <div class="flex flex-col gap-y-1 items-start max-w-[130px]">
3365
3386
  <span>{{ entitlement.feature_name || '-' }}</span>
3366
- <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded max-w-[120px] truncate">{{ entitlement.feature_key }}</span>
3387
+ <span class="text-[var(--cp-table-text)] max-w-[120px] truncate"
3388
+ [style.fontSize]="'var(--cp-table-row-size)'"
3389
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ entitlement.feature_key }}</span>
3367
3390
  </div>
3368
3391
  </td>
3369
3392
  <td class="text-[var(--cp-table-text)] border-y border-[var(--cp-table-border)]"
@@ -3407,7 +3430,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3407
3430
  <div class="bg-transparent rounded-2xl px-3 pt-5">
3408
3431
  @if (getMeteredEntitlements().length > 0) {
3409
3432
  <!-- Header -->
3410
- <div class="grid grid-cols-4 border-b border-[var(--cp-table-border)] gap-x-4 py-3 pl-3 pr-12 bg-[var(--cp-table-header-bg)]">
3433
+ <div class="grid grid-cols-4 border-b border-[var(--cp-table-border)] gap-x-4 pr-12 bg-[var(--cp-table-header-bg)]"
3434
+ [style.padding]="'var(--cp-table-cell-padding, 0.75rem 1.5rem)'">
3411
3435
  <div class="text-[var(--cp-table-header-text)]"
3412
3436
  [style.fontSize]="'var(--cp-table-header-size)'"
3413
3437
  [style.fontWeight]="'var(--cp-table-header-weight)'">Feature</div>
@@ -3420,28 +3444,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3420
3444
  </div>
3421
3445
 
3422
3446
  <!-- Rows -->
3423
- @for (usage of getMeteredEntitlements(); track usage.id || $index) {
3424
- <div class="py-4 px-4 border-b border-[var(--cp-table-border)] last:border-0">
3447
+ @for (usage of getMeteredEntitlements(); track usage.id || $index; let rowIdx = $index) {
3448
+ <div class="border-b border-[var(--cp-table-border)] last:border-0"
3449
+ [class]="rowIdx % 2 === 0 ? 'bg-[var(--cp-table-row-even-bg)]' : 'bg-[var(--cp-table-row-odd-bg)]'"
3450
+ [style.padding]="'var(--cp-table-cell-padding, 1rem 1.5rem)'">
3425
3451
  <!-- Main Row (Collapsible Trigger) -->
3426
3452
  <div class="flex items-center cursor-pointer" (click)="toggleEntitlementExpand(usage.id)">
3427
3453
  <div class="flex-1 grid grid-cols-4 gap-4 items-center pr-8">
3428
3454
  <!-- Feature -->
3429
- <div class="flex flex-col gap-y-1 items-start max-w-[120px]">
3430
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">{{ usage.feature_name || '-' }}</span>
3431
- <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded max-w-[120px] truncate">{{ usage.feature_key }}</span>
3455
+ <div class="flex flex-col gap-y-1 items-start max-w-[120px] text-balance">
3456
+ <span class="text-[var(--cp-table-text)]"
3457
+ [style.fontSize]="'var(--cp-table-row-size)'"
3458
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ usage.feature_name || '-' }}</span>
3459
+ <span class="text-[var(--cp-table-text)] max-w-[120px] truncate"
3460
+ [style.fontSize]="'var(--cp-table-row-size)'"
3461
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ usage.feature_key }}</span>
3432
3462
  </div>
3433
3463
 
3434
3464
  <!-- Type -->
3435
3465
  <div>
3436
- <span class="text-xs text-[var(--cp-link-color)]">{{ _capitalize(usage.type?.split('_').join(' ') || '') }}</span>
3466
+ <span class="text-[var(--cp-table-text)]"
3467
+ [style.fontSize]="'var(--cp-table-row-size)'"
3468
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ _capitalize(usage.type?.split('_').join(' ') || '') }}</span>
3437
3469
  </div>
3438
3470
 
3439
3471
  <!-- Usage -->
3440
3472
  <div class="col-span-2">
3441
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">{{ getEntitlementUsageBalance(usage) }}</span>
3442
- <div class="flex items-center gap-x-2">
3443
- <div class="w-96 h-1.5 my-1.5 bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-start justify-start rounded overflow-hidden">
3444
- <div class="h-1.5 bg-[var(--cp-section-usage-bar-color,#006FEE)] rounded" [style.width.%]="getEntitlementUsagePercent(usage)"></div>
3473
+ <span class="text-[var(--cp-table-text)]"
3474
+ [style.fontSize]="'var(--cp-table-row-size)'"
3475
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ getEntitlementUsageBalance(usage) }}</span>
3476
+ <div class="w-full flex items-center gap-x-2">
3477
+ <div class="w-full max-w-[24rem] h-[6px] my-[6px] bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-center justify-start rounded overflow-hidden">
3478
+ <div class="h-[6px] rounded" [style.width.%]="getEntitlementUsagePercent(usage)" [style.backgroundColor]="'var(--cp-section-usage-bar-color)'"></div>
3445
3479
  </div>
3446
3480
  <span class="text-[var(--cp-table-text)]"
3447
3481
  [style.fontSize]="'var(--cp-table-row-size)'"
@@ -3460,10 +3494,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3460
3494
  @if (isEntitlementExpanded(usage.id)) {
3461
3495
  <div class="w-full rounded-lg overflow-hidden flex flex-col items-start justify-start gap-y-0 pt-4">
3462
3496
  @for (pool of getProcessedPools(usage); track pool.pool) {
3463
- <div class="w-full flex items-center px-6 py-3 gap-x-40">
3464
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)] w-20">{{ pool.pool }}</span>
3465
- <div>
3466
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">
3497
+ <div class="w-full flex items-center px-2 py-3 gap-x-12 sm:gap-x-20 md:gap-x-40">
3498
+ <span class="w-20 text-[var(--cp-table-text)]"
3499
+ [style.fontSize]="'var(--cp-table-row-size)'"
3500
+ [style.fontWeight]="'var(--cp-table-row-weight)'">{{ pool.pool }}</span>
3501
+ <div class="flex-1">
3502
+ <span class="text-[var(--cp-table-text)]"
3503
+ [style.fontSize]="'var(--cp-table-row-size)'"
3504
+ [style.fontWeight]="'var(--cp-table-row-weight)'">
3467
3505
  @if (!pool.isUnlimited) {
3468
3506
  @if (pool.balance < 0) {
3469
3507
  {{ _formatNumber(Math.abs(pool.balance)) }} used above limit
@@ -3472,11 +3510,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3472
3510
  }
3473
3511
  }
3474
3512
  </span>
3475
- <div class="flex items-center gap-x-2">
3476
- <div class="w-72 h-1.5 my-1.5 bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-start justify-start rounded overflow-hidden">
3477
- <div class="h-1.5 rounded" [class]="'bg-' + pool.color" [style.width.%]="pool.percent"></div>
3513
+ <div class="w-full flex items-center gap-x-2">
3514
+ <div class="w-full max-w-[18rem] h-[6px] my-[6px] bg-[var(--cp-section-usage-bar-track-color,#E4E4E7)] flex items-center justify-start rounded overflow-hidden">
3515
+ <div class="h-[6px]" [style.width.%]="pool.percent" [style.backgroundColor]="'var(--cp-section-usage-bar-color)'"></div>
3478
3516
  </div>
3479
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">
3517
+ <span class="text-[var(--cp-table-text)]"
3518
+ [style.fontSize]="'var(--cp-table-row-size)'"
3519
+ [style.fontWeight]="'var(--cp-table-row-weight)'">
3480
3520
  @if (pool.isUnlimited) {
3481
3521
  {{ _formatNumber(pool.used) }}/ Unlimited
3482
3522
  } @else {
@@ -3485,7 +3525,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
3485
3525
  </span>
3486
3526
  </div>
3487
3527
  @if (pool.nextResetAt) {
3488
- <span class="text-[13px] leading-[120%] text-[var(--cp-table-text)]">resets on {{ pool.nextResetAt }}</span>
3528
+ <span class="text-[var(--cp-table-text)]"
3529
+ [style.fontSize]="'var(--cp-table-row-size)'"
3530
+ [style.fontWeight]="'var(--cp-table-row-weight)'">resets on {{ pool.nextResetAt }}</span>
3489
3531
  }
3490
3532
  </div>
3491
3533
  </div>
@@ -5037,7 +5079,7 @@ class InvoicePreviewComponent {
5037
5079
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InvoicePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5038
5080
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: InvoicePreviewComponent, isStandalone: true, selector: "cp-invoice-preview", inputs: { show: "show", selectedInvoice: "selectedInvoice", invoiceDetails: "invoiceDetails", invoiceDetailsLoading: "invoiceDetailsLoading" }, outputs: { close: "close" }, ngImport: i0, template: `
5039
5081
  @if (show && selectedInvoice) {
5040
- <div class="invoice-preview-modal fixed inset-0 z-50 overflow-hidden">
5082
+ <div class="invoice-preview-modal fixed inset-0 z-[100] overflow-hidden">
5041
5083
  <!-- Backdrop -->
5042
5084
  <div
5043
5085
  class="invoice-preview-backdrop absolute inset-0 bg-black/50 transition-opacity"
@@ -5374,7 +5416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
5374
5416
  type: Component,
5375
5417
  args: [{ selector: 'cp-invoice-preview', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
5376
5418
  @if (show && selectedInvoice) {
5377
- <div class="invoice-preview-modal fixed inset-0 z-50 overflow-hidden">
5419
+ <div class="invoice-preview-modal fixed inset-0 z-[100] overflow-hidden">
5378
5420
  <!-- Backdrop -->
5379
5421
  <div
5380
5422
  class="invoice-preview-backdrop absolute inset-0 bg-black/50 transition-opacity"
@@ -5808,11 +5850,23 @@ class CustomerPortalComponent {
5808
5850
  cssVars = computed(() => {
5809
5851
  const custom = this.themeSignal() ?? MetrifoxService.getTheme()?.customerPortal;
5810
5852
  const theme = mergeCustomerPortalTheme(defaultCustomerPortalTheme, custom);
5811
- return MetrifoxService.customerPortalThemeToCssVars(theme);
5853
+ const vars = MetrifoxService.customerPortalThemeToCssVars(theme);
5854
+ return {
5855
+ ...vars,
5856
+ 'font-family': 'var(--cp-font-family)',
5857
+ 'background-color': 'var(--cp-bg)',
5858
+ 'border-radius': 'var(--cp-radius)',
5859
+ };
5812
5860
  });
5813
5861
  ngOnInit() {
5814
5862
  this.loadCustomerDetails();
5815
5863
  }
5864
+ ngOnChanges(changes) {
5865
+ if (changes['customerKey'] && !changes['customerKey'].firstChange) {
5866
+ this.lastLoadedCustomerKey = null;
5867
+ this.loadCustomerDetails();
5868
+ }
5869
+ }
5816
5870
  ngOnDestroy() {
5817
5871
  this.destroy$.next();
5818
5872
  this.destroy$.complete();
@@ -6029,11 +6083,11 @@ class CustomerPortalComponent {
6029
6083
  }
6030
6084
  }
6031
6085
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6032
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: CustomerPortalComponent, isStandalone: true, selector: "metrifox-customer-portal", inputs: { customerKey: "customerKey", sectionsConfig: "sectionsConfig", theme: "theme" }, outputs: { dataLoaded: "dataLoaded", errorOccurred: "errorOccurred" }, ngImport: i0, template: `
6086
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: CustomerPortalComponent, isStandalone: true, selector: "metrifox-customer-portal", inputs: { customerKey: "customerKey", sectionsConfig: "sectionsConfig", theme: "theme" }, outputs: { dataLoaded: "dataLoaded", errorOccurred: "errorOccurred" }, usesOnChanges: true, ngImport: i0, template: `
6033
6087
  <div class="font-sans antialiased" [ngStyle]="cssVars()">
6034
6088
  <!-- Error State -->
6035
6089
  @if (error()) {
6036
- <div class="max-w-[60rem] mx-auto py-6 px-4">
6090
+ <div class="max-w-[60rem] mx-auto" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6037
6091
  <div class="bg-red-50 p-4 rounded-lg text-red-700">
6038
6092
  Error loading customer details: {{ error() }}
6039
6093
  </div>
@@ -6042,7 +6096,7 @@ class CustomerPortalComponent {
6042
6096
 
6043
6097
  <!-- Loading State -->
6044
6098
  @if (loading() && !error()) {
6045
- <div class="max-w-[60rem] mx-auto py-6 px-4">
6099
+ <div class="max-w-[60rem] mx-auto" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6046
6100
  <div class="animate-pulse space-y-4">
6047
6101
  <div class="h-12 bg-gray-200 rounded-lg"></div>
6048
6102
  <div class="h-16 bg-gray-200 rounded-lg"></div>
@@ -6055,7 +6109,7 @@ class CustomerPortalComponent {
6055
6109
 
6056
6110
  <!-- Content -->
6057
6111
  @if (!loading() && !error() && customerDetails()) {
6058
- <div class="max-w-[60rem] mx-auto py-6 px-4 space-y-4">
6112
+ <div class="w-full max-w-[60rem] mx-auto min-w-0 flex flex-col gap-6" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6059
6113
  <!-- Empty Subscription State -->
6060
6114
  @if (subscriptions().length === 0) {
6061
6115
  <div class="w-full"
@@ -6132,7 +6186,7 @@ class CustomerPortalComponent {
6132
6186
 
6133
6187
  <!-- Subscription Content Template -->
6134
6188
  <ng-template #subscriptionContent let-subscription>
6135
- <div class="space-y-4">
6189
+ <div class="flex flex-col gap-6">
6136
6190
  <cp-subscription-section
6137
6191
  [subscription]="subscription"
6138
6192
  [sectionsConfig]="sectionsConfig"
@@ -6197,7 +6251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6197
6251
  <div class="font-sans antialiased" [ngStyle]="cssVars()">
6198
6252
  <!-- Error State -->
6199
6253
  @if (error()) {
6200
- <div class="max-w-[60rem] mx-auto py-6 px-4">
6254
+ <div class="max-w-[60rem] mx-auto" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6201
6255
  <div class="bg-red-50 p-4 rounded-lg text-red-700">
6202
6256
  Error loading customer details: {{ error() }}
6203
6257
  </div>
@@ -6206,7 +6260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6206
6260
 
6207
6261
  <!-- Loading State -->
6208
6262
  @if (loading() && !error()) {
6209
- <div class="max-w-[60rem] mx-auto py-6 px-4">
6263
+ <div class="max-w-[60rem] mx-auto" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6210
6264
  <div class="animate-pulse space-y-4">
6211
6265
  <div class="h-12 bg-gray-200 rounded-lg"></div>
6212
6266
  <div class="h-16 bg-gray-200 rounded-lg"></div>
@@ -6219,7 +6273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6219
6273
 
6220
6274
  <!-- Content -->
6221
6275
  @if (!loading() && !error() && customerDetails()) {
6222
- <div class="max-w-[60rem] mx-auto py-6 px-4 space-y-4">
6276
+ <div class="w-full max-w-[60rem] mx-auto min-w-0 flex flex-col gap-6" [style.padding]="'var(--cp-container-padding, 40px 24px)'">
6223
6277
  <!-- Empty Subscription State -->
6224
6278
  @if (subscriptions().length === 0) {
6225
6279
  <div class="w-full"
@@ -6296,7 +6350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6296
6350
 
6297
6351
  <!-- Subscription Content Template -->
6298
6352
  <ng-template #subscriptionContent let-subscription>
6299
- <div class="space-y-4">
6353
+ <div class="flex flex-col gap-6">
6300
6354
  <cp-subscription-section
6301
6355
  [subscription]="subscription"
6302
6356
  [sectionsConfig]="sectionsConfig"
@@ -6701,6 +6755,7 @@ class PricingTableComponent {
6701
6755
  return {
6702
6756
  ...MetrifoxService.pricingTableThemeToCssVars(theme),
6703
6757
  ...MetrifoxService.getBackgroundImage(theme),
6758
+ 'font-family': 'var(--pt-font-family, var(--cp-font-family, inherit))',
6704
6759
  };
6705
6760
  });
6706
6761
  ngOnInit() {
package/dist/modules/customer-portal/components/customer-portal.component.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
1
+ import { EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
2
2
  import { SafeHtml } from '@angular/platform-browser';
3
3
  import { CustomerDetails, Wallet, SectionConfig, CustomerDataLoadedEvent, ErrorEvent, CustomerPortalTheme, BillingHistory, ProductPlans, Offering, Invoice, Subscription } from '../../../lib/types';
4
4
  import { ICONS } from '../utils/icons';
5
5
  import { defaultCustomerPortalTheme } from '../utils/defaults';
6
6
  import * as i0 from "@angular/core";
7
7
  export { defaultCustomerPortalTheme };
8
- export declare class CustomerPortalComponent implements OnInit, OnDestroy {
8
+ export declare class CustomerPortalComponent implements OnInit, OnChanges, OnDestroy {
9
9
  private destroy$;
10
10
  private isLoadingData;
11
11
  private lastLoadedCustomerKey;
@@ -37,8 +37,13 @@ export declare class CustomerPortalComponent implements OnInit, OnDestroy {
37
37
  tenantCheckoutUsername: import("@angular/core").Signal<string>;
38
38
  plans: import("@angular/core").Signal<Offering[]>;
39
39
  planIntervals: import("@angular/core").Signal<string[]>;
40
- cssVars: import("@angular/core").Signal<import("../../../lib/types").CssVarMap>;
40
+ cssVars: import("@angular/core").Signal<{
41
+ 'font-family': string;
42
+ 'background-color': string;
43
+ 'border-radius': string;
44
+ }>;
41
45
  ngOnInit(): void;
46
+ ngOnChanges(changes: SimpleChanges): void;
42
47
  ngOnDestroy(): void;
43
48
  private loadCustomerDetails;
44
49
  private loadAdditionalData;
package/dist/modules/pricing-table/components/pricing-table.component.d.ts CHANGED
@@ -75,7 +75,7 @@ export declare class PricingTableComponent implements OnInit, OnDestroy {
75
75
  intervals: import("@angular/core").Signal<string[]>;
76
76
  filteredSinglePurchases: import("@angular/core").Signal<ParentOffering[]>;
77
77
  cssVars: import("@angular/core").Signal<{
78
- [x: string]: string;
78
+ 'font-family': string;
79
79
  }>;
80
80
  ngOnInit(): void;
81
81
  ngOnDestroy(): void;