{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "contact-01", "title": "Sales Contact Form", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/contact-01/contact-01.component.ts", "content": "// Interactive enterprise solutions architect dispatch workbench with track selection,\n// live hub timezones, SLA badges, and ticket generator. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n Building2,\n Check,\n Copy,\n Headphones,\n LucideAngularModule,\n MessageSquare,\n Send,\n ShieldCheck,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface InquiryTrack {\n id: string\n title: string\n subtitle: string\n sla: string\n icon: 'enterprise' | 'support' | 'security'\n}\n\nexport interface ContactSubmitPayload {\n type: string\n name: string\n email: string\n company: string\n teamSize: string\n message: string\n ticketId: string\n}\n\nconst inquiryTypes: InquiryTrack[] = [\n {\n id: 'enterprise',\n title: 'Enterprise Architecture',\n subtitle: 'Custom registries, zero-lockin migrations & multi-team governance',\n sla: '< 2h SLA',\n icon: 'enterprise',\n },\n {\n id: 'support',\n title: 'Dedicated Engineering SLA',\n subtitle: '24/7 incident response, custom upstream bugfixes & private Slack channel',\n sla: '< 15m SLA',\n icon: 'support',\n },\n {\n id: 'security',\n title: 'Security & Compliance Review',\n subtitle: 'SOC2 Type II audits, self-hosted registry mirrors & air-gapped deployments',\n sla: '< 4h SLA',\n icon: 'security',\n },\n]\n\nconst globalHubs = [\n { city: 'San Francisco', tz: 'PST (UTC-8)', status: 'Active (09:00 - 18:00)', email: 'sf@uipkge.dev' },\n { city: 'London', tz: 'GMT (UTC+0)', status: 'Active (08:30 - 17:30)', email: 'london@uipkge.dev' },\n { city: 'Singapore', tz: 'SGT (UTC+8)', status: 'Active (09:00 - 18:00)', email: 'singapore@uipkge.dev' },\n]\n\nconst teamSizes = ['1-10', '10-50', '50+']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-contact-01, [ui-contact-01]',\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: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiLabelComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n Enterprise Engineering & Architecture Solutions\n \n

\n Talk to a principal design engineer.\n

\n

\n No generic sales reps. Connect directly with the core team that architects our dual-framework registry,\n token engines, and headless workbenches.\n

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

Select Engagement Track

\n
\n @for (track of inquiryTypes; track track.id) {\n \n
\n
\n
\n @switch (track.icon) {\n @case ('enterprise') {\n \n }\n @case ('support') {\n \n }\n @default {\n \n }\n }\n
\n {{ track.title }}\n
\n \n {{ track.sla }}\n \n
\n

\n {{ track.subtitle }}\n

\n
\n }\n
\n
\n\n
\n\n \n
\n
\n

Direct Engineering Hubs

\n
\n \n Live Dispatch Active\n
\n
\n\n
\n @for (hub of hubs; track hub.city) {\n \n
\n

{{ hub.city }}

\n

{{ hub.tz }} • {{ hub.status }}

\n
\n \n {{ hub.email }}\n \n
\n }\n
\n
\n
\n\n \n
\n
\n
\n
\n

\n \n Dispatch Engineering Request\n

\n \n Direct Dispatch: {{ selectedType() }}\n \n
\n

\n Provide architectural specifications or questions. Our engineering team responds within guaranteed\n SLA.\n

\n
\n\n
\n @if (!sent()) {\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n Engineering Team Size\n
\n @for (ts of teamSizes; track ts) {\n \n }\n
\n
\n
\n\n
\n
\n\n
\n
\n \n NDA & IP protection pre-guaranteed.\n
\n\n \n Dispatch Inquiry\n \n \n
\n
\n } @else {\n \n
\n \n \n
\n
\n

Inquiry Dispatched Successfully

\n

\n A principal solutions architect has been assigned. You will receive a technical response at\n {{ email() }} within guaranteed SLA.\n

\n
\n\n \n
\n

Reference Ticket ID

\n

{{ ticketId() }}

\n
\n \n @if (copiedTicket()) {\n \n } @else {\n \n }\n {{ copiedTicket() ? 'Copied' : 'Copy' }}\n \n
\n\n \n Send Another Inquiry\n \n
\n }\n
\n \n \n \n \n
\n `,\n})\nexport class UiContact01Component {\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Headphones = Headphones\n protected readonly MessageSquare = MessageSquare\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n\n protected readonly inquiryTypes = inquiryTypes\n protected readonly hubs = globalHubs\n protected readonly teamSizes = teamSizes\n\n @Input('class') className?: string\n @Output() readonly submit = new EventEmitter()\n\n readonly selectedType = signal('enterprise')\n readonly name = signal('')\n readonly email = signal('')\n readonly company = signal('')\n readonly teamSize = signal('10-50')\n readonly message = signal('')\n readonly sent = signal(false)\n readonly ticketId = signal('')\n readonly copiedTicket = signal(false)\n private copyTimer: ReturnType | undefined\n\n readonly canSubmit = computed(() => !!this.name().trim() && !!this.email().trim() && !!this.message().trim())\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 lg:px-8', this.className)\n }\n\n trackCardClass(id: string): string {\n return cn(\n 'group focus-visible:ring-ring cursor-pointer rounded-xl border p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedType() === id\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40',\n )\n }\n\n trackIconClass(id: string): string {\n return cn(\n 'rounded-lg p-2 transition-colors',\n this.selectedType() === id\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted text-foreground group-hover:bg-primary/10 group-hover:text-primary',\n )\n }\n\n teamSizeClass(ts: string): string {\n return cn(\n 'rounded-md border px-2 py-1.5 text-center font-mono text-xs transition-colors',\n this.teamSize() === ts\n ? 'border-primary bg-primary/10 text-primary font-semibold'\n : 'border-border bg-background text-muted-foreground hover:text-foreground',\n )\n }\n\n onFormSubmit(event: Event): void {\n event.preventDefault()\n this.dispatch()\n }\n\n dispatch(): ContactSubmitPayload | null {\n if (!this.canSubmit()) return null\n const generatedId = `UIP-${Math.floor(1000 + Math.random() * 9000)}`\n this.ticketId.set(generatedId)\n this.sent.set(true)\n const payload: ContactSubmitPayload = {\n type: this.selectedType(),\n name: this.name(),\n email: this.email(),\n company: this.company(),\n teamSize: this.teamSize(),\n message: this.message(),\n ticketId: generatedId,\n }\n this.submit.emit(payload)\n return payload\n }\n\n copyTicket(): void {\n const id = this.ticketId()\n if (!id) return\n try {\n void navigator.clipboard?.writeText(id)\n } catch {\n // Clipboard unavailable (e.g. jsdom) — still flip the label.\n }\n this.copiedTicket.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedTicket.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contact-01/contact-01.component.ts" }, { "path": "packages/registry-angular/blocks/contact-01/index.ts", "content": "export { UiContact01Component, type InquiryTrack, type ContactSubmitPayload } from './contact-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/contact-01/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", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/label.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.", "categories": [ "marketing" ] }