{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-enterprise-sla-card", "title": "Pricing Enterprise Sla Card", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-enterprise-sla-card/pricing-enterprise-sla-card.component.ts", "content": "// Enterprise contract specification block: 99.999% SLA metrics, SOC2/HIPAA compliance\n// badges, and a private-deployment consultation card with a meeting-request action.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport { ArrowRight, Building2, Calendar, CheckCircle2, Lock, LucideAngularModule, Server } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport interface SlaGuarantee {\n title: string\n metric: string\n description: string\n icon: string\n}\n\nexport interface ComplianceCert {\n id: string\n name: string\n status: string\n badgeVariant?: 'default' | 'outline' | 'secondary'\n}\n\nconst DEFAULT_GUARANTEES: SlaGuarantee[] = [\n {\n title: 'High-Availability SLA',\n metric: '99.999%',\n description: 'Financial penalty-backed monthly uptime commitment across multi-region clusters.',\n icon: 'ShieldCheck',\n },\n {\n title: 'P1 Incident Response',\n metric: '< 15 mins',\n description: 'Direct paging to designated Staff Infrastructure Commanders 24/7/365.',\n icon: 'Headphones',\n },\n {\n title: 'Global Edge TTFB',\n metric: '< 12ms',\n description: 'Sub-15ms Time-To-First-Byte guaranteed via Anycast network mesh.',\n icon: 'Zap',\n },\n {\n title: 'Custom Legal & DPA',\n metric: 'Bespoke',\n description: 'Dedicated legal counsel review, redline allowances, and customized BAAs.',\n icon: 'Scale',\n },\n]\n\nconst DEFAULT_CERTS: ComplianceCert[] = [\n { id: 'soc2', name: 'SOC 2 Type II Certified', status: 'Continuous Audit' },\n { id: 'hipaa', name: 'HIPAA Compliant BAA', status: 'Available' },\n { id: 'iso27001', name: 'ISO/IEC 27001:2022', status: 'Certified' },\n { id: 'gdpr', name: 'GDPR & CCPA Verified', status: 'Compliant' },\n { id: 'fedramp', name: 'FedRAMP In-Process', status: 'High Baseline' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-enterprise-sla-card, [ui-pricing-enterprise-sla-card]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent],\n template: `\n
\n
\n \n
\n \n \n Enterprise Custom Contracting\n \n \n\n

\n {{ title() }}\n

\n\n

\n {{ description() }}\n

\n
\n\n \n
\n
\n \n
\n
\n
Service Level Agreement
\n

Penalty-Backed Contractual Metrics

\n

\n Every commitment is codified into your master service agreement with direct financial remedies.\n

\n
\n\n \n
\n @for (item of activeGuarantees(); track item.title) {\n
\n
\n {{ item.title }}\n {{ item.metric }}\n
\n

\n {{ item.description }}\n

\n
\n }\n
\n\n \n
\n
\n \n Security & Regulatory Attestations\n
\n
\n @for (cert of activeCertifications(); track cert.id) {\n \n \n {{ cert.name }}\n ({{ cert.status }})\n \n }\n
\n
\n
\n\n \n
\n
\n
\n
\n \n Custom Private Deployment\n
\n \n Tailored\n \n
\n\n
\n
Included with Custom Tier:
\n
    \n
  • \n \n Dedicated AWS / GCP VPC peering or self-hosted air-gap\n
    • \n
  • \n \n Custom SAML 2.0 / Okta / Azure AD SCIM provisioning\n
    • \n
  • \n \n Dedicated Solution Architect & design system migration team\n
    • \n
  • \n \n Invoiced payment via ACH, Wire Transfer, or AWS Marketplace\n
    • \n
\n
\n
\n\n \n
\n \n
\n Average executive response time: under 20 minutes\n
\n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiPricingEnterpriseSlaCardComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Lock = Lock\n protected readonly Server = Server\n\n @Input('title') set titleInput(v: string) {\n if (v !== undefined) this.titleSignal.set(v)\n }\n @Input('description') set descriptionInput(v: string) {\n if (v !== undefined) this.descriptionSignal.set(v)\n }\n @Input('guarantees') set guaranteesInput(v: SlaGuarantee[] | undefined) {\n this.guaranteesSignal.set(v)\n }\n @Input('certifications') set certificationsInput(v: ComplianceCert[] | undefined) {\n this.certificationsSignal.set(v)\n }\n @Input('class') className?: string\n\n private readonly titleSignal = signal('Mission-critical infrastructure with contractual legal guarantees.')\n private readonly descriptionSignal = signal(\n 'Tailored enterprise licensing, custom security reviews, isolated VPC deployments, and white-glove migration engineering.',\n )\n private readonly guaranteesSignal = signal(undefined)\n private readonly certificationsSignal = signal(undefined)\n\n readonly title = computed(() => this.titleSignal())\n readonly description = computed(() => this.descriptionSignal())\n readonly activeGuarantees = computed(() => this.guaranteesSignal() ?? DEFAULT_GUARANTEES)\n readonly activeCertifications = computed(() => this.certificationsSignal() ?? DEFAULT_CERTS)\n\n readonly isMeetingRequested = signal(false)\n private meetingTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.meetingTimer))\n }\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n requestMeeting(): void {\n this.isMeetingRequested.set(true)\n clearTimeout(this.meetingTimer)\n this.meetingTimer = setTimeout(() => {\n this.isMeetingRequested.set(false)\n }, 3000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-enterprise-sla-card/pricing-enterprise-sla-card.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-enterprise-sla-card/index.ts", "content": "export {\n UiPricingEnterpriseSlaCardComponent,\n type SlaGuarantee,\n type ComplianceCert,\n} from './pricing-enterprise-sla-card.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-enterprise-sla-card/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json" ], "description": "Enterprise contract specification block detailing 99.999% SLA metrics, SOC2/HIPAA compliance, and dedicated VPC architecture.", "categories": [ "pricing", "marketing" ] }