{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-usage-calculator-slider", "title": "Pricing Usage Calculator Slider", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-usage-calculator-slider/pricing-usage-calculator-slider.component.ts", "content": "// Infrastructure ROI calculator: MAU / QPS / edge-replica sliders against a\n// traditional monolith cost model. Port of the Vue PricingUsageCalculatorSlider 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, Calculator, Globe, LucideAngularModule, Server, Users } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport function formatCompactNumber(num: number): string {\n if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'\n if (num >= 1000) return (num / 1000).toFixed(0) + 'k'\n return num.toString()\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-usage-calculator-slider, [ui-pricing-usage-calculator-slider]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n
\n
\n \n \n Interactive Infrastructure ROI Calculator\n \n

\n Calculate your annual savings with unbundled architecture.\n

\n

\n See how eliminating proprietary seat licenses and runtime SaaS wrappers cuts your front-end TCO.\n

\n\n
\n \n \n \n
\n
\n\n
\n \n
\n
\n

Traffic & Telemetry Inputs

\n Dynamic Projection\n
\n\n
\n
\n \n Monthly Active Users (MAU)\n \n {{ formatNumber(mau()) }} users\n
\n \n
\n\n
\n
\n \n Peak Query Throughput\n \n {{ formatNumber(qps()) }} QPS\n
\n \n
\n\n
\n
\n \n Global Edge POP Replicas\n \n {{ edgeReplicas() }} Edge Regions\n
\n \n
\n
\n\n \n Formula: Direct AST + Raw Static Hosting\n ✓ Zero Seat Surcharges\n
\n
\n\n \n
\n \n Projected Annual Net Savings\n \n\n
\n
\n \\${{ annualSavings().toLocaleString() }}\n
\n

\n Saved every year (\\${{ monthlySavings().toLocaleString() }}/month)\n

\n
\n\n
\n
\n
\n Traditional Monolith Stack:\n \\${{ traditionalCost().toLocaleString() }}/mo\n
\n
\n
\n
\n
\n\n
\n
\n UIPKGE Unbundled Registry:\n \\${{ uipkgeCost().toLocaleString() }}/mo\n
\n
\n
\n
\n
\n
\n \n\n \n \n \n \n
\n `,\n})\nexport class UiPricingUsageCalculatorSliderComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Calculator = Calculator\n protected readonly Globe = Globe\n protected readonly Server = Server\n protected readonly Users = Users\n\n @Input('class') className?: string\n\n readonly mau = signal(100000)\n readonly qps = signal(500)\n readonly edgeReplicas = signal(3)\n\n readonly traditionalCost = computed(() => {\n const baseSeatFee = 350\n const perUserFee = (this.mau() / 1000) * 1.8\n const qpsSurcharge = this.qps() * 0.25\n return Math.round(baseSeatFee + perUserFee + qpsSurcharge)\n })\n\n readonly uipkgeCost = computed(() => {\n const rawBandwidth = (this.mau() / 100000) * 4\n const flatProLicense = 24\n return Math.round(flatProLicense + rawBandwidth)\n })\n\n readonly monthlySavings = computed(() => Math.max(0, this.traditionalCost() - this.uipkgeCost()))\n readonly annualSavings = computed(() => this.monthlySavings() * 12)\n readonly uipkgeBarWidth = computed(() => Math.max(5, (this.uipkgeCost() / Math.max(1, this.traditionalCost())) * 100))\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n formatNumber(num: number): string {\n return formatCompactNumber(num)\n }\n\n applyPreset(preset: 'seed' | 'growth' | 'scale'): void {\n if (preset === 'seed') {\n this.mau.set(25000)\n this.qps.set(150)\n this.edgeReplicas.set(2)\n } else if (preset === 'growth') {\n this.mau.set(350000)\n this.qps.set(2500)\n this.edgeReplicas.set(5)\n } else {\n this.mau.set(2500000)\n this.qps.set(12000)\n this.edgeReplicas.set(10)\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-usage-calculator-slider/pricing-usage-calculator-slider.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-usage-calculator-slider/index.ts", "content": "export {\n UiPricingUsageCalculatorSliderComponent,\n formatCompactNumber,\n} from './pricing-usage-calculator-slider.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-usage-calculator-slider/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Interactive frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "pricing" }