{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "property-amenities-grid", "title": "Property Amenities Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/property-amenities-grid/property-amenities-grid.component.ts", "content": "// Building and luxury residential amenities matrix: categorized lifestyle zones,\n// interactive category tabs, instant keyword search, and detailed feature cards with a\n// pool photography thumbnail. Port of the Vue block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Building2,\n Calendar,\n Car,\n Check,\n CircleDot,\n Clock,\n Compass,\n ConciergeBell,\n Dumbbell,\n FileText,\n Flame,\n HeartPulse,\n Laptop,\n LucideAngularModule,\n MapPin,\n Package,\n PawPrint,\n Search,\n ShieldCheck,\n Shirt,\n Video,\n Wifi,\n X,\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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ntype CategoryId = 'all' | 'wellness' | 'work' | 'services' | 'parking'\n\ninterface AmenityCategory {\n id: CategoryId\n label: string\n count: number\n icon: typeof Building2\n description: string\n}\n\nconst categories: AmenityCategory[] = [\n {\n id: 'all',\n label: 'All Amenities',\n count: 24,\n icon: Building2,\n description: 'Explore the full suite of resident services, wellness facilities, and private lounges.',\n },\n {\n id: 'wellness',\n label: 'Wellness & Recreation',\n count: 4,\n icon: HeartPulse,\n description: 'Resort-inspired spaces to rejuvenate body and mind, featuring sky-high fitness and hydrotherapy.',\n },\n {\n id: 'work',\n label: 'Work & Productivity',\n count: 3,\n icon: Laptop,\n description: 'High-speed professional environments for focused execution, remote meetings, and collaboration.',\n },\n {\n id: 'services',\n label: 'Convenience & Services',\n count: 3,\n icon: ConciergeBell,\n description: 'White-glove 24/7 concierge, contactless cold storage lockers, and on-demand valet care.',\n },\n {\n id: 'parking',\n label: 'Parking & Pet Care',\n count: 2,\n icon: Car,\n description: 'Subterranean EV charging and a dedicated pet-care suite.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-property-amenities-grid, [ui-property-amenities-grid]',\n standalone: true,\n // Vue 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 UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n
\n
\n \n \n {{ badge }}\n \n \n \n 24 Total Amenities\n \n
\n

\n {{ title }}\n

\n

\n {{ subtitle }}\n

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

24

\n

Curated Amenities

\n
\n
\n

4

\n

Lifestyle Zones

\n
\n
\n

24/7

\n

Concierge Access

\n
\n
\n

100%

\n

Pet Friendly

\n
\n
\n
\n\n
\n\n \n
\n \n
\n @for (cat of categoryList; track cat.id) {\n \n \n {{ cat.label }}\n \n {{ cat.count }}\n \n \n }\n
\n\n \n
\n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n
\n\n \n @if (isSearching()) {\n \n \n Showing matching results for \"{{ searchQuery() }}\"\n \n \n Reset Filter\n \n
\n }\n\n \n
\n \n @if (showWellness()) {\n
\n
\n
\n
\n \n
\n
\n

Wellness & Recreation

\n

\n Resort-inspired spaces to rejuvenate body and mind with skyline views and recovery hydrotherapy.\n

\n
\n
\n \n 4 Featured Amenities\n \n
\n\n
\n @if (matchesQuery('Heated Rooftop Infinity Pool pool skyline swim cabana')) {\n \n
\n \n
\n
\n \n Featured Highlight\n \n \n Year-Round Heated (84°F)\n \n
\n
\n
\n \n Level 42 Sky Deck\n ·\n \n 6:00 AM – 10:00 PM Daily\n
\n
\n
\n\n
\n
\n

Heated Rooftop Infinity Pool

\n

\n 50-meter temperature-controlled infinity pool on the 42nd floor featuring private cabanas,\n teak daybeds, outdoor sun deck, and poolside refreshment bar with 360-degree panoramic skyline\n views.\n

\n
\n\n
\n \n \n Panoramic Views\n \n \n \n Private Cabanas\n \n \n \n Towel Valet\n \n \n \n Poolside Bar\n \n
\n
\n
\n }\n\n @if (matchesQuery('Equinox-style Fitness Center & Yoga Studio gym pilates workout')) {\n \n
\n
\n
\n \n
\n 24/7 Access\n
\n
\n
\n \n Levels 3 & 4\n
\n

\n Equinox-style Fitness Center & Yoga Studio\n

\n
\n
\n\n
\n

\n Multi-level 4,500 sq ft strength and conditioning training facility outfitted with Woodway\n treadmills, Peloton bikes, Olympic lifting racks, and a dedicated sunlit yoga and reformer\n Pilates studio.\n

\n\n
\n Woodway & Peloton\n Reformer Pilates\n Personal Trainers\n
\n
\n
\n }\n\n @if (matchesQuery('Nordic Sauna & Cold Plunge Spa steam therapy recovery')) {\n \n
\n
\n
\n \n
\n Hydrotherapy\n
\n
\n
\n \n Level 3 Spa Suite\n
\n

Nordic Sauna & Cold Plunge Spa

\n
\n
\n\n
\n

\n Therapeutic cedarwood dry sauna, aromatic eucalyptus steam room, and dual 48°F contrast therapy\n cold plunge pools engineered for post-workout muscle recovery and immune resilience.\n

\n\n
\n 48°F Cold Plunge\n Cedar Dry Sauna\n Eucalyptus Steam\n
\n
\n
\n }\n\n @if (matchesQuery('Private Tennis & Pickleball Court sports rooftop court')) {\n \n
\n
\n
\n \n
\n Rooftop Court\n
\n
\n
\n \n Level 43 Sports Deck\n
\n

\n Private Tennis & Pickleball Court\n

\n
\n
\n\n
\n

\n Championship-grade rooftop regulation court with multi-sport cushioned acrylic surface,\n tournament-spec LED night illumination, automated Spinshot ball machines, and resident league\n reservations.\n

\n\n
\n Tournament LEDs\n Ball Machine Loan\n App Reservation\n Skyline Backdrop\n
\n
\n \n }\n \n \n }\n\n \n @if (showWork()) {\n
\n
\n
\n
\n \n
\n
\n

Work & Productivity

\n

\n Executive business facilities, private acoustic pods, and ultra-high-speed fiber network.\n

\n
\n
\n \n 3 Featured Amenities\n \n
\n\n
\n @if (matchesQuery('Resident Co-Working Lounge with Private Pods workspace zoom office')) {\n \n
\n
\n
\n \n
\n Quiet Focus\n
\n
\n
\n \n Level 2 Mezzanine\n
\n

\n Resident Co-Working Lounge with Private Pods\n

\n
\n
\n\n
\n

\n Spacious communal workspace with Herman Miller ergonomic seating, acoustic focus booths, private\n soundproof Zoom phone pods, and complimentary artisan espresso and nitro cold brew bar.\n

\n\n
\n Soundproof Pods\n Herman Miller Chairs\n Espresso Bar\n
\n
\n
\n }\n\n @if (matchesQuery('Executive Conference Room with AV boardroom meeting video presentation')) {\n \n
\n
\n
\n \n
\n App Booking\n
\n
\n
\n \n Level 2 North Wing\n
\n

\n Executive Conference Room with AV\n

\n
\n
\n\n
\n

\n 16-person board room equipped with 85-inch 4K HDR video conferencing displays, spatial\n beamforming microphone arrays, digital whiteboard, and integrated presentation hub.\n

\n\n
\n 16-Seat Capacity\n 4K Video Suite\n Digital Whiteboard\n
\n
\n
\n }\n\n @if (matchesQuery('High-Speed 10 Gbps Fiber WiFi throughout wifi internet mesh')) {\n \n
\n
\n
\n \n
\n Ultra-Fast\n
\n
\n
\n \n Building-wide Coverage\n
\n

\n High-Speed 10 Gbps Fiber WiFi throughout\n

\n
\n
\n\n
\n

\n Enterprise-grade symmetrical 10 Gbps redundant fiber backbone with Wi-Fi 7 access points\n delivering uninterrupted zero-drop roaming across all indoor lounges and outdoor terraces.\n

\n\n
\n Wi-Fi 7 Mesh\n 10 Gbps Symmetrical\n Zero Roam Handoff\n
\n
\n \n }\n \n \n }\n\n \n @if (showServices()) {\n
\n
\n
\n
\n \n
\n
\n

Convenience & Services

\n

\n White-glove hospitality, smart package handling, and premium garment care at your fingertips.\n

\n
\n
\n \n 3 Featured Amenities\n \n
\n\n
\n @if (matchesQuery('24/7 Doorman & Concierge Desk doorman front desk hospitality security')) {\n \n
\n
\n
\n \n
\n 24/7 Attended\n
\n
\n
\n \n Main Lobby Entrance\n
\n

24/7 Doorman & Concierge Desk

\n
\n
\n\n
\n

\n Round-the-clock uniform concierge team providing white-glove resident hospitality, verified\n visitor check-in, key holding, luggage assistance, taxi dispatch, and dining reservations.\n

\n\n
\n White-Glove Staff\n Key Holding\n Guest Escort\n
\n
\n
\n }\n\n @if (matchesQuery('Automated Package Lockers & Cold Storage Delivery parcel grocery refrigerated')) {\n \n
\n
\n
\n \n
\n Smart Storage\n
\n
\n
\n \n Lobby Concourse\n
\n

\n Automated Package Lockers & Cold Storage Delivery\n

\n
\n
\n\n
\n

\n Contactless Luxer One smart package room with digital PIN and barcode pickup alerts, secure\n oversized parcel rooms, and commercial-grade refrigerated storage for fresh grocery deliveries.\n

\n\n
\n Cold Grocery Lockers\n 24/7 App QR Pickup\n Oversized Item Vault\n
\n
\n
\n }\n\n @if (matchesQuery('Dry Cleaning Valet & Laundry Services garment tailoring wash')) {\n \n
\n
\n
\n \n
\n Valet Care\n
\n
\n
\n \n Service Concourse B1\n
\n

\n Dry Cleaning Valet & Laundry Services\n

\n
\n
\n\n
\n

\n On-demand eco-friendly dry cleaning drop-off lockers with 24-hour turnaround, garment pressing,\n shoe shining, tailored alterations, and in-locker contactless delivery return.\n

\n\n
\n 24h Turnaround\n Eco-Friendly Cleaning\n Tailored Alterations\n
\n
\n \n }\n \n \n }\n\n \n @if (showParking()) {\n
\n
\n
\n
\n \n
\n
\n

Parking & Pet Care

\n

\n Subterranean EV charging bays and private rooftop pet facilities for four-legged residents.\n

\n
\n
\n \n 2 Featured Amenities\n \n
\n\n
\n @if (matchesQuery('Secure Underground Parking with EV Chargers electric vehicle garage stall')) {\n \n
\n
\n
\n \n
\n EV Ready\n
\n
\n
\n \n Levels P1 – P3 Subterranean\n
\n

\n Secure Underground Parking with EV Chargers\n

\n
\n
\n\n
\n

\n Gated subterranean multi-level garage featuring automated license plate recognition entry gates,\n assigned private stalls, 48 universal Level 2 EV charging stations, and dedicated bike storage.\n

\n\n
\n 48 EV Charging Ports\n LPR Auto-Gate\n Covered Bike Vault\n
\n
\n
\n }\n\n @if (matchesQuery('Private Rooftop Dog Park & Pet Spa Station canine grooming wash animal')) {\n \n
\n
\n
\n \n
\n Pet Friendly\n
\n
\n
\n \n Level 44 Sky Deck\n
\n

\n Private Rooftop Dog Park & Pet Spa Station\n

\n
\n
\n\n
\n

\n Enclosed rooftop canine park with anti-microbial synthetic turf and agility obstacles, paired\n with an indoor heated pet wash spa featuring stainless steel wash tubs and pro blow dry station.\n

\n\n
\n Anti-Microbial Turf\n Heated Wash Tubs\n Pro Blow Dryers\n
\n
\n
\n }\n \n \n }\n \n\n \n
\n \n
\n
\n \n
\n
\n

\n Keyless Resident Access & Mobile App Integration\n

\n

\n All 24 building amenities are digitally accessible via NFC mobile key, offering instant cabana and\n conference room reservations, real-time fitness occupancy, and automated guest passes.\n

\n
\n
\n\n
\n \n \n
\n
\n \n \n
\n `,\n})\nexport class UiPropertyAmenitiesGridComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly Car = Car\n protected readonly Check = Check\n protected readonly CircleDot = CircleDot\n protected readonly Clock = Clock\n protected readonly Compass = Compass\n protected readonly ConciergeBell = ConciergeBell\n protected readonly Dumbbell = Dumbbell\n protected readonly FileText = FileText\n protected readonly Flame = Flame\n protected readonly HeartPulse = HeartPulse\n protected readonly Laptop = Laptop\n protected readonly MapPin = MapPin\n protected readonly Package = Package\n protected readonly PawPrint = PawPrint\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Shirt = Shirt\n protected readonly Video = Video\n protected readonly Wifi = Wifi\n protected readonly X = X\n protected readonly cn = cn\n\n protected readonly categoryList = categories\n\n @Input() title = 'World-Class Amenities & Services'\n @Input() subtitle = 'Designed for wellness, productivity, and quiet luxury living.'\n @Input() badge = 'Building Features & Lifestyle'\n @Input('class') className?: string\n\n readonly activeCategory = signal('all')\n readonly searchQuery = signal('')\n\n readonly isSearching = computed(() => this.searchQuery().trim().length > 0)\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full py-12 sm:py-16 lg:py-20', this.className)\n }\n\n pillCountClass(id: CategoryId): string {\n return cn(\n 'py-0.2 ml-1 rounded-full px-1.5 font-mono text-xs',\n this.activeCategory() === id\n ? 'bg-primary-foreground/20 text-primary-foreground'\n : 'bg-muted text-muted-foreground',\n )\n }\n\n matchesQuery(text: string): boolean {\n if (!this.isSearching()) return true\n return text.toLowerCase().includes(this.searchQuery().toLowerCase().trim())\n }\n\n readonly showWellness = computed(() => {\n if (this.activeCategory() !== 'all' && this.activeCategory() !== 'wellness') return false\n if (!this.isSearching()) return true\n return (\n this.matchesQuery('Heated Rooftop Infinity Pool') ||\n this.matchesQuery('Equinox-style Fitness Center & Yoga Studio') ||\n this.matchesQuery('Nordic Sauna & Cold Plunge Spa') ||\n this.matchesQuery('Private Tennis & Pickleball Court') ||\n this.matchesQuery('wellness recreation pool gym sauna')\n )\n })\n\n readonly showWork = computed(() => {\n if (this.activeCategory() !== 'all' && this.activeCategory() !== 'work') return false\n if (!this.isSearching()) return true\n return (\n this.matchesQuery('Resident Co-Working Lounge with Private Pods') ||\n this.matchesQuery('Executive Conference Room with AV') ||\n this.matchesQuery('High-Speed 10 Gbps Fiber WiFi throughout') ||\n this.matchesQuery('work productivity office wifi conference')\n )\n })\n\n readonly showServices = computed(() => {\n if (this.activeCategory() !== 'all' && this.activeCategory() !== 'services') return false\n if (!this.isSearching()) return true\n return (\n this.matchesQuery('24/7 Doorman & Concierge Desk') ||\n this.matchesQuery('Automated Package Lockers & Cold Storage Delivery') ||\n this.matchesQuery('Dry Cleaning Valet & Laundry Services') ||\n this.matchesQuery('convenience services concierge doorman package laundry')\n )\n })\n\n readonly showParking = computed(() => {\n if (this.activeCategory() !== 'all' && this.activeCategory() !== 'parking') return false\n if (!this.isSearching()) return true\n return (\n this.matchesQuery('Secure Underground Parking with EV Chargers') ||\n this.matchesQuery('Private Rooftop Dog Park & Pet Spa Station') ||\n this.matchesQuery('parking ev charger pet care dog park')\n )\n })\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/property-amenities-grid/property-amenities-grid.component.ts" }, { "path": "packages/registry-angular/blocks/property-amenities-grid/index.ts", "content": "export { UiPropertyAmenitiesGridComponent } from './property-amenities-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/property-amenities-grid/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/separator.json" ], "description": "Building and luxury residential amenities matrix featuring categorized lifestyle zones, interactive category tabs, instant keyword search, and detailed feature cards with pool photography thumbnail.", "categories": [ "real-estate", "hospitality", "marketing" ] }