{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "contact-us", "title": "Contact Us", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/contact-us/contact-us.component.ts", "content": "// Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email /\n// phone / office) and a live Mapbox map pinned to your office (pass accessToken +\n// location; falls back to a placeholder without a token). Right: a Card-wrapped form\n// (name / email / company / subject Select / message Textarea) that swaps to a success\n// state. Emits \"submit\" with the payload. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport { CheckCircle2, LucideAngularModule, Mail, MapPin, Phone, Send } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\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 { UiMapComponent, UiMapMarkerComponent } from '@/ui/map/map.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface ContactUsPayload {\n name: string\n email: string\n company: string\n subject: string\n message: string\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-contact-us, [ui-contact-us]',\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 UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiLabelComponent,\n UiMapComponent,\n UiMapMarkerComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n
\n
\n \n
\n

Contact

\n

Talk to our team

\n

\n Questions about pricing, onboarding, or a custom plan? Send a note and we'll get back within one business\n day.\n

\n\n
    \n
  • \n \n \n \n hello@example.com\n
    • \n
  • \n \n \n \n +1 (555) 010-2030\n
    • \n
  • \n \n \n \n {{ locationLabel }}\n
    • \n
\n\n
\n @if (accessToken) {\n
\n \n \n \n \n \n \n
\n } @else {\n
\n {{ locationLabel }}\n
\n }\n
\n
\n\n \n
\n @if (!sent()) {\n
\n

Send a message

\n

We'll route it to the right person.

\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n \n \n Sales\n Support\n Partnership\n \n \n
\n
\n \n \n
\n \n
\n } @else {\n
\n \n \n \n

Message sent

\n

\n Thanks, {{ name() }} — we'll reply to {{ email() }} within one business day.\n

\n \n
\n }\n
\n
\n
\n
\n `,\n})\nexport class UiContactUsComponent {\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly Phone = Phone\n protected readonly Send = Send\n\n /** Mapbox token. Without it the map area shows a styled placeholder. */\n @Input() accessToken = ''\n /** Office [lng, lat]. */\n @Input() location: [number, number] = [-122.4194, 37.7749]\n @Input() locationLabel = 'San Francisco, CA'\n @Input('class') className?: string\n @Output() readonly submit = new EventEmitter()\n\n readonly name = signal('')\n readonly email = signal('')\n readonly company = signal('')\n readonly subject = signal('sales')\n readonly message = signal('')\n readonly sent = signal(false)\n\n readonly canSubmit = computed(() => !!this.name() && !!this.email() && !!this.message())\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n send(): ContactUsPayload | null {\n if (!this.canSubmit()) return null\n const payload: ContactUsPayload = {\n name: this.name(),\n email: this.email(),\n company: this.company(),\n subject: this.subject(),\n message: this.message(),\n }\n this.sent.set(true)\n this.submit.emit(payload)\n return payload\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contact-us/contact-us.component.ts" }, { "path": "packages/registry-angular/blocks/contact-us/index.ts", "content": "export { UiContactUsComponent, type ContactUsPayload } from './contact-us.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/contact-us/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/select.json", "https://uipkge.dev/r/angular/textarea.json", "https://uipkge.dev/r/angular/map.json" ], "description": "Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits \"submit\" with the payload.", "categories": [ "marketing" ] }