{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "floor-plan-explorer", "title": "Floor Plan Explorer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/floor-plan-explorer/floor-plan-explorer.component.ts", "content": "// Architectural unit floor plan inspector and residential layout explorer with a 2D\n// CAD-styled blueprint canvas, interactive room highlight pins, dimensional callouts,\n// room breakdown specs, and a building unit availability table. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Bath,\n Bed,\n Building2,\n Calendar,\n Check,\n CheckCircle2,\n Download,\n FileText,\n Home,\n Layers,\n LucideAngularModule,\n MapPin,\n Ruler,\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\n\nexport interface RoomSpec {\n id: string\n name: string\n shortLabel: string\n dimensionsImperial: string\n dimensionsMetric: string\n areaSqFt: number\n areaSqM: number\n flooring: string\n features: string[]\n pinX: number\n pinY: number\n rect: { x: number; y: number; w: number; h: number }\n}\n\nexport interface AvailableUnit {\n unitNumber: string\n floor: number\n view: string\n monthlyRent: number\n sqFt: number\n status: 'available-now' | 'available-soon' | 'leased' | 'under-contract'\n statusLabel: string\n moveInDate: string\n exposure: string\n}\n\nexport interface FloorPlanData {\n id: string\n tabKey: string\n tabLabel: string\n marketingName: string\n tier: string\n beds: number\n baths: number\n totalAreaSqFt: number\n totalAreaSqM: number\n interiorSqFt: number\n exteriorSqFt: number\n ceilingHeight: string\n exposure: string\n startingRent: number\n description: string\n highlights: string[]\n rooms: RoomSpec[]\n availableUnits: AvailableUnit[]\n}\n\nconst floorPlans: Record = {\n 'plan-a': {\n id: 'plan-a',\n tabKey: 'plan-a',\n tabLabel: 'Plan A - 1 Bed / 1 Bath',\n marketingName: 'Plan A - The Urban Haven',\n tier: 'Urban Gallery Residence',\n beds: 1,\n baths: 1,\n totalAreaSqFt: 780,\n totalAreaSqM: 72.5,\n interiorSqFt: 735,\n exteriorSqFt: 45,\n ceilingHeight: `10' 0\" Finished`,\n exposure: 'East · Garden & Sunrise',\n startingRent: 3450,\n description:\n 'Artfully designed open-concept layout featuring oversized east-facing windows, gourmet galley kitchen with quartz surfaces, secluded bedroom suite with walk-in closet, and a private sunrise terrace.',\n highlights: [\n 'Floor-to-ceiling glass wall',\n 'European quartz kitchen island',\n 'Deep soaking tub & frameless shower',\n 'Private sunrise terrace',\n ],\n rooms: [\n {\n id: 'living',\n name: 'Living & Dining Room',\n shortLabel: 'Living / Dining',\n dimensionsImperial: `16' × 12'`,\n dimensionsMetric: '4.9m × 3.7m',\n areaSqFt: 192,\n areaSqM: 17.8,\n flooring: 'Wide Plank Natural White Oak',\n features: ['East Sunrise Exposure', '9-Foot Glazing Wall', 'Concealed Media Wiring'],\n pinX: 280,\n pinY: 175,\n rect: { x: 170, y: 90, w: 230, h: 170 },\n },\n {\n id: 'master-bed',\n name: 'Master Bedroom',\n shortLabel: 'Master Bed',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Plush Organic Wool Loop',\n features: ['Acoustic Insulation', 'Custom Closet Built-ins', 'Blackout Shade Pocket'],\n pinX: 505,\n pinY: 175,\n rect: { x: 410, y: 90, w: 190, h: 170 },\n },\n {\n id: 'kitchen',\n name: 'Gourmet Galley Kitchen',\n shortLabel: 'Kitchen',\n dimensionsImperial: `11' × 9'`,\n dimensionsMetric: '3.4m × 2.7m',\n areaSqFt: 99,\n areaSqM: 9.2,\n flooring: 'Calacatta Honed Quartzite',\n features: ['Integrated Bosch Appliances', 'Undermount LED Lights', 'Soft-Close Walnut Joinery'],\n pinX: 280,\n pinY: 330,\n rect: { x: 170, y: 270, w: 230, h: 120 },\n },\n {\n id: 'master-bath',\n name: 'Primary Full Bath',\n shortLabel: 'Full Bath',\n dimensionsImperial: `9' × 6'`,\n dimensionsMetric: '2.7m × 1.8m',\n areaSqFt: 54,\n areaSqM: 5.0,\n flooring: 'Matte Slate & Terrazzo',\n features: ['Kohler Undermount Sink', 'Frameless Glass Shower', 'Backlit Anti-Fog Vanity'],\n pinX: 505,\n pinY: 330,\n rect: { x: 410, y: 270, w: 190, h: 120 },\n },\n {\n id: 'balcony',\n name: 'Private Terrace',\n shortLabel: 'Terrace',\n dimensionsImperial: `9' × 5'`,\n dimensionsMetric: '2.7m × 1.5m',\n areaSqFt: 45,\n areaSqM: 4.2,\n flooring: 'Weathered Teak Decking',\n features: ['Architectural Steel Railing', 'Exterior Power Outlet', 'Garden Courtyard Vistas'],\n pinX: 105,\n pinY: 175,\n rect: { x: 50, y: 90, w: 110, h: 170 },\n },\n ],\n availableUnits: [\n {\n unitNumber: '304',\n floor: 3,\n view: 'Courtyard & Garden',\n monthlyRent: 3450,\n sqFt: 780,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: 'East',\n },\n {\n unitNumber: '604',\n floor: 6,\n view: 'Skyline Sunrise View',\n monthlyRent: 3650,\n sqFt: 780,\n status: 'available-soon',\n statusLabel: 'Available Oct 15',\n moveInDate: 'Oct 15, 2026',\n exposure: 'East / North',\n },\n {\n unitNumber: '904',\n floor: 9,\n view: 'High-Floor Park View',\n monthlyRent: 3800,\n sqFt: 780,\n status: 'leased',\n statusLabel: 'Leased',\n moveInDate: 'Occupied',\n exposure: 'East',\n },\n ],\n },\n 'plan-b': {\n id: 'plan-b',\n tabKey: 'plan-b',\n tabLabel: 'Plan B - 2 Bed / 2 Bath',\n marketingName: 'Plan B - The Skyline Suite',\n tier: 'Signature Corner Residence',\n beds: 2,\n baths: 2,\n totalAreaSqFt: 1420,\n totalAreaSqM: 132.0,\n interiorSqFt: 1360,\n exteriorSqFt: 60,\n ceilingHeight: `10' 6\" Finished`,\n exposure: 'Southwest · Bay & City Skyline',\n startingRent: 4850,\n description:\n 'Expansive dual-exposure residence centered around a dramatic living and entertaining salon with floor-to-ceiling panoramic glass, chef-grade kitchen island, split master and guest wings, and a sheltered private terrace.',\n highlights: [\n 'Dual-aspect corner positioning with 270° light',\n 'Chef island with 10-foot marble waterfall',\n 'Primary wing with dual walk-in closets',\n 'Dedicated foyer vestibule & utility pantry',\n ],\n rooms: [\n {\n id: 'living',\n name: 'Living Room',\n shortLabel: 'Living Room',\n dimensionsImperial: `18' × 14'`,\n dimensionsMetric: '5.5m × 4.3m',\n areaSqFt: 252,\n areaSqM: 23.4,\n flooring: 'Wide Plank European White Oak',\n features: ['Floor-to-Ceiling Corner Glazing', 'Motorized Solar Shades', 'Recessed Architectural Lighting'],\n pinX: 255,\n pinY: 160,\n rect: { x: 150, y: 75, w: 220, h: 175 },\n },\n {\n id: 'master-bed',\n name: 'Master Bedroom',\n shortLabel: 'Master Bed',\n dimensionsImperial: `15' × 12'`,\n dimensionsMetric: '4.6m × 3.7m',\n areaSqFt: 180,\n areaSqM: 16.7,\n flooring: 'New Zealand Wool Weave',\n features: ['South Bay Views', 'Direct En-Suite Access', 'Custom Millwork Wardrobe'],\n pinX: 455,\n pinY: 145,\n rect: { x: 380, y: 75, w: 155, h: 150 },\n },\n {\n id: 'kitchen',\n name: 'Chef Kitchen & Dining',\n shortLabel: 'Kitchen',\n dimensionsImperial: `12' × 10'`,\n dimensionsMetric: '3.7m × 3.0m',\n areaSqFt: 120,\n areaSqM: 11.1,\n flooring: 'Calacatta Honed Quartzite',\n features: ['Waterfall Marble Island', 'Sub-Zero & Wolf Appliances', 'Pantry Cabinetry'],\n pinX: 255,\n pinY: 325,\n rect: { x: 150, y: 260, w: 220, h: 135 },\n },\n {\n id: 'master-bath',\n name: 'Master Bath',\n shortLabel: 'Master Bath',\n dimensionsImperial: `10' × 8'`,\n dimensionsMetric: '3.0m × 2.4m',\n areaSqFt: 80,\n areaSqM: 7.4,\n flooring: 'Bianco Carrara Marble',\n features: ['Dual Floating Vanities', 'Walk-in Rain Shower', 'Acoustic Privacy Door'],\n pinX: 590,\n pinY: 145,\n rect: { x: 545, y: 75, w: 90, h: 150 },\n },\n {\n id: 'guest-bed',\n name: 'Guest Bedroom / Study',\n shortLabel: 'Guest Bed',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Wide Plank European White Oak',\n features: ['Multi-Function Home Office', 'South Window Exposure', 'Built-in Closet System'],\n pinX: 565,\n pinY: 320,\n rect: { x: 490, y: 245, w: 145, h: 150 },\n },\n {\n id: 'guest-bath',\n name: 'Guest Full Bath',\n shortLabel: 'Guest Bath',\n dimensionsImperial: `8' × 6'`,\n dimensionsMetric: '2.4m × 1.8m',\n areaSqFt: 48,\n areaSqM: 4.5,\n flooring: 'Smoked Gray Terrazzo',\n features: ['Full Soaking Tub', 'Modern Matte Black Fixtures', 'Linen Storage'],\n pinX: 430,\n pinY: 320,\n rect: { x: 380, y: 245, w: 100, h: 150 },\n },\n {\n id: 'balcony',\n name: 'Private Terrace',\n shortLabel: 'Terrace',\n dimensionsImperial: `10' × 6'`,\n dimensionsMetric: '3.0m × 1.8m',\n areaSqFt: 60,\n areaSqM: 5.6,\n flooring: 'Architectural Ipe Wood',\n features: ['Panoramic Bay Overlook', 'Weatherproof Recessed Sconces', 'Glass Wind Guard'],\n pinX: 90,\n pinY: 160,\n rect: { x: 40, y: 75, w: 100, h: 175 },\n },\n ],\n availableUnits: [\n {\n unitNumber: '402',\n floor: 4,\n view: 'South City View',\n monthlyRent: 4850,\n sqFt: 1420,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: 'South / West',\n },\n {\n unitNumber: '708',\n floor: 7,\n view: 'Bay & Marina View',\n monthlyRent: 5200,\n sqFt: 1420,\n status: 'available-soon',\n statusLabel: 'Available Sep 1',\n moveInDate: 'Sep 1, 2026',\n exposure: 'Bay View / South',\n },\n {\n unitNumber: '1102',\n floor: 11,\n view: 'Penthouse Level Panoramic',\n monthlyRent: 5600,\n sqFt: 1420,\n status: 'leased',\n statusLabel: 'Leased',\n moveInDate: 'Occupied',\n exposure: 'Panoramic South',\n },\n ],\n },\n 'plan-c': {\n id: 'plan-c',\n tabKey: 'plan-c',\n tabLabel: 'Plan C - 3 Bed Penthouse',\n marketingName: 'Plan C - The Grandview Penthouse',\n tier: 'Crown Estate Penthouse',\n beds: 3,\n baths: 3.5,\n totalAreaSqFt: 2250,\n totalAreaSqM: 209.0,\n interiorSqFt: 2090,\n exteriorSqFt: 160,\n ceilingHeight: `11' 8\" Finished`,\n exposure: '360° Panoramic · Harbor, Bay & Bridges',\n startingRent: 9400,\n description:\n 'A true architectural masterpiece occupying the top levels of the tower. Direct key-lock private elevator access opens into a sweeping grand salon with 11.5-foot ceilings, full culinary kitchen with butler pantry, spa sanctuary primary suite, and wraparound sky terrace.',\n highlights: [\n 'Private elevator vestibule with secure biometric access',\n 'Wraparound sky terrace with built-in gas fire table',\n 'Primary retreat with double walk-in dressing galleries',\n 'Butler service pantry with climate-controlled wine vault',\n ],\n rooms: [\n {\n id: 'grand-salon',\n name: 'Grand Salon & Living',\n shortLabel: 'Grand Salon',\n dimensionsImperial: `24' × 16'`,\n dimensionsMetric: '7.3m × 4.9m',\n areaSqFt: 384,\n areaSqM: 35.7,\n flooring: 'Herringbone European Oak',\n features: ['360° Bay Vista Glazing', 'Gas Linear Fireplace', 'Custom Architectural Coving'],\n pinX: 275,\n pinY: 155,\n rect: { x: 160, y: 85, w: 240, h: 150 },\n },\n {\n id: 'primary-suite',\n name: 'Primary Penthouse Suite',\n shortLabel: 'Primary Suite',\n dimensionsImperial: `18' × 14'`,\n dimensionsMetric: '5.5m × 4.3m',\n areaSqFt: 252,\n areaSqM: 23.4,\n flooring: 'Custom Silk-Wool Blend Weave',\n features: ['Harbor Sunrise Exposure', 'Sitting Lounge Area', 'Dual Walk-in Closets'],\n pinX: 480,\n pinY: 155,\n rect: { x: 410, y: 85, w: 140, h: 150 },\n },\n {\n id: 'spa-bath',\n name: 'Spa Sanctuary Primary Bath',\n shortLabel: 'Spa Bath',\n dimensionsImperial: `12' × 9'`,\n dimensionsMetric: '3.7m × 2.7m',\n areaSqFt: 108,\n areaSqM: 10.0,\n flooring: 'Bookmatched Calacatta Marble',\n features: ['Freestanding Oval Soaking Tub', 'Dual Steam Shower', 'Radiant Heated Flooring'],\n pinX: 595,\n pinY: 155,\n rect: { x: 560, y: 85, w: 80, h: 150 },\n },\n {\n id: 'dining',\n name: 'Formal Dining Gallery',\n shortLabel: 'Dining Room',\n dimensionsImperial: `15' × 12'`,\n dimensionsMetric: '4.6m × 3.7m',\n areaSqFt: 180,\n areaSqM: 16.7,\n flooring: 'Herringbone European Oak',\n features: ['Seating for 10-12 Guests', 'Integrated Bar Cabinetry', 'Designer Chandelier Anchor'],\n pinX: 235,\n pinY: 315,\n rect: { x: 160, y: 245, w: 150, h: 145 },\n },\n {\n id: 'kitchen',\n name: 'Culinary Kitchen & Pantry',\n shortLabel: 'Kitchen',\n dimensionsImperial: `16' × 11'`,\n dimensionsMetric: '4.9m × 3.4m',\n areaSqFt: 176,\n areaSqM: 16.3,\n flooring: 'Taj Mahal Quartzite',\n features: ['12-Foot Monolithic Island', 'Gaggenau 400 Series Suite', 'Butler Prep Scullery'],\n pinX: 95,\n pinY: 315,\n rect: { x: 40, y: 245, w: 110, h: 145 },\n },\n {\n id: 'bed-2',\n name: 'Bedroom Suite 2',\n shortLabel: 'Bed 2 Suite',\n dimensionsImperial: `14' × 12'`,\n dimensionsMetric: '4.3m × 3.7m',\n areaSqFt: 168,\n areaSqM: 15.6,\n flooring: 'Wide Plank European Oak',\n features: ['En-Suite Private Bath', 'South Window Bank', 'Deep Built-in Wardrobe'],\n pinX: 395,\n pinY: 315,\n rect: { x: 320, y: 245, w: 150, h: 145 },\n },\n {\n id: 'bed-3',\n name: 'Bedroom 3 / Executive Study',\n shortLabel: 'Bed 3 / Study',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Custom Walnut Parquetry',\n features: ['Integrated Library Shelving', 'Acoustic Pocket Doors', 'Corner View Light'],\n pinX: 560,\n pinY: 315,\n rect: { x: 480, y: 245, w: 160, h: 145 },\n },\n {\n id: 'sky-terrace',\n name: 'Wraparound Sky Terrace',\n shortLabel: 'Sky Terrace',\n dimensionsImperial: `20' × 8'`,\n dimensionsMetric: '6.1m × 2.4m',\n areaSqFt: 160,\n areaSqM: 14.9,\n flooring: 'Porcelain Pavers & Teak',\n features: ['Integrated Linear Gas Hearth', 'Outdoor Audio Pre-Wire', 'Frameless Wind Barrier'],\n pinX: 340,\n pinY: 45,\n rect: { x: 160, y: 25, w: 360, h: 50 },\n },\n ],\n availableUnits: [\n {\n unitNumber: 'PH-01',\n floor: 14,\n view: '360° Bay & City Skyline',\n monthlyRent: 9400,\n sqFt: 2250,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: '360° Panoramic',\n },\n {\n unitNumber: 'PH-02',\n floor: 14,\n view: 'Harbor Sunrise & Marina',\n monthlyRent: 9100,\n sqFt: 2250,\n status: 'under-contract',\n statusLabel: 'Under Contract',\n moveInDate: 'Pending',\n exposure: 'East / South',\n },\n {\n unitNumber: 'PH-03',\n floor: 15,\n view: 'Crown Sky Penthouse with Spa',\n monthlyRent: 10500,\n sqFt: 2250,\n status: 'available-soon',\n statusLabel: 'Available Nov 1',\n moveInDate: 'Nov 1, 2026',\n exposure: 'Crown Panoramic',\n },\n ],\n },\n}\n\nconst planKeys = ['plan-a', 'plan-b', 'plan-c']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-floor-plan-explorer, [ui-floor-plan-explorer]',\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n The Grandview Collection\n \n Tower West · Residences\n
\n

\n The Grandview Penthouse Collection · Floor Plan Explorer\n

\n

\n Interactive architectural layout inspector, dimensional specifications, and real-time residential unit\n availability.\n

\n
\n\n
\n \n @if (!downloadSuccess()) {\n \n } @else {\n \n }\n {{ downloadLabel() }}\n \n
\n
\n\n \n
\n \n \n \n Plan A - 1 Bed / 1 Bath\n \n \n Plan B - 2 Bed / 2 Bath\n \n \n Plan C - 3 Bed Penthouse\n \n \n \n\n
\n Units:\n
\n \n \n
\n
\n
\n\n \n
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n

2D Architectural CAD Schematic

\n

Interactive room layout & dimensional spans

\n
\n
\n\n \n
\n \n \n Dimensions\n \n \n \n Fixtures\n \n \n \n Pins\n \n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n N\n \n\n \n \n \n \n \n \n 0\n 10'\n 20'\n Scale 1/4\" = 1'0\"\n \n\n \n \n @for (room of currentPlan().rooms; track room.id) {\n \n \n \n\n \n \n\n \n @if (showFurniture()) {\n \n \n @if (room.id === 'living' || room.id === 'grand-salon') {\n \n \n \n }\n\n \n @if (\n room.id === 'master-bed' ||\n room.id === 'guest-bed' ||\n room.id === 'primary-suite' ||\n room.id === 'bed-2'\n ) {\n \n \n \n \n }\n\n \n @if (room.id === 'kitchen') {\n \n \n \n \n }\n\n \n @if (room.id === 'master-bath' || room.id === 'guest-bath' || room.id === 'spa-bath') {\n \n \n }\n\n \n @if (room.id === 'balcony' || room.id === 'sky-terrace') {\n \n }\n \n }\n\n \n @if (showDimensions()) {\n \n \n \n {{ unitSystem() === 'imperial' ? room.dimensionsImperial : room.dimensionsMetric }}\n \n \n }\n \n }\n \n\n \n \n \n \n \n \n \n\n \n @if (showPins()) {\n \n @for (room of currentPlan().rooms; track 'pin-' + room.id) {\n \n \n @if (selectedRoomId() === room.id || hoveredRoomId() === room.id) {\n \n }\n\n \n \n\n \n \n {{ room.shortLabel }}\n \n \n }\n \n }\n \n
\n\n \n
\n
\n \n \n Active Focus: {{ activeRoom()?.name || 'Overview' }}\n \n \n {{\n unitSystem() === 'imperial' ? activeRoom()?.dimensionsImperial : activeRoom()?.dimensionsMetric\n }}\n ·\n \n {{\n unitSystem() === 'imperial' ? activeRoom()?.areaSqFt + ' Sq Ft' : activeRoom()?.areaSqM + ' m²'\n }}\n \n \n
\n\n
\n Finish:\n {{ activeRoom()?.flooring }}\n
\n
\n
\n\n \n
\n
\n

Ceiling Height

\n

\n {{ currentPlan().ceilingHeight }}\n

\n
\n
\n

Outdoor Space

\n

\n {{\n unitSystem() === 'imperial'\n ? currentPlan().exteriorSqFt + ' Sq Ft'\n : (currentPlan().exteriorSqFt * 0.0929).toFixed(1) + ' m²'\n }}\n

\n
\n
\n

Exposure

\n

{{ currentPlan().exposure }}

\n
\n
\n

Starting Rent

\n

\n \\${{ currentPlan().startingRent.toLocaleString()\n }}/mo\n

\n
\n
\n
\n\n \n
\n \n
\n
\n
\n \n {{ currentPlan().tier }}\n \n
\n \n {{ currentPlan().beds }} Bed\n ·\n \n {{ currentPlan().baths }} Bath\n
\n
\n

\n {{ currentPlan().marketingName }}\n

\n

\n {{ currentPlan().description }}\n

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

Total Architectural Living Area

\n
\n \n {{ currentPlan().totalAreaSqFt.toLocaleString() }}\n \n Sq Ft\n /\n \n {{ currentPlan().totalAreaSqM.toFixed(1) }}\n \n m²\n
\n \n \n Interior:\n {{ currentPlan().interiorSqFt }} sq ft\n \n \n Terrace:\n {{ currentPlan().exteriorSqFt }} sq ft\n \n
\n
\n\n \n
\n
\n

\n Room Breakdown & Dimensions\n

\n {{ currentPlan().rooms.length }} Spaces\n
\n\n
\n @for (room of currentPlan().rooms; track room.id) {\n \n
\n \n
\n

{{ room.name }}

\n

{{ room.flooring }}

\n
\n
\n\n
\n

\n {{ unitSystem() === 'imperial' ? room.dimensionsImperial : room.dimensionsMetric }}\n

\n

\n {{ unitSystem() === 'imperial' ? room.areaSqFt + ' sq ft' : room.areaSqM + ' m²' }}\n

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

\n Available Units in Building\n

\n

\n Real-time occupancy and lease rates for {{ currentPlan().tabLabel }}\n

\n
\n {{ availableCount() }} Available \n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (unit of currentPlan().availableUnits; track unit.unitNumber) {\n \n \n \n \n \n \n }\n \n
UnitFloor & ViewMonthly RentStatus
\n Unit {{ unit.unitNumber }}\n \n
{{ unit.view }}
\n
Floor {{ unit.floor }} · {{ unit.exposure }}
\n 		\n \\${{ unit.monthlyRent.toLocaleString() }}\n /mo\n \n \n {{ unit.statusLabel }}\n \n
\n
\n
\n\n
\n
\n \n \n
\n\n @if (showTourSuccess()) {\n
\n \n \n Tour request received for Unit {{ selectedUnitNumber() }}. Leasing agent will contact you within 15\n minutes.\n \n
\n }\n\n

\n Self-guided tours and agent-accompanied showings available daily 9:00 AM – 7:00 PM.\n

\n
\n
\n
\n
\n \n `,\n})\nexport class UiFloorPlanExplorerComponent {\n protected readonly Bath = Bath\n protected readonly Bed = Bed\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly FileText = FileText\n protected readonly Home = Home\n protected readonly Layers = Layers\n protected readonly MapPin = MapPin\n protected readonly Ruler = Ruler\n\n protected readonly planList = planKeys.map((key) => floorPlans[key]!)\n\n @Input() set initialPlan(plan: string) {\n if (plan && floorPlans[plan]) this.selectTab(plan)\n }\n @Input() set initialUnitSystem(system: 'imperial' | 'metric') {\n if (system === 'imperial' || system === 'metric') this.unitSystem.set(system)\n }\n @Input('class') className?: string\n\n readonly activeTab = signal('plan-b')\n readonly selectedRoomId = signal('living')\n readonly hoveredRoomId = signal(null)\n readonly selectedUnitNumber = signal('402')\n readonly showDimensions = signal(true)\n readonly showFurniture = signal(true)\n readonly showPins = signal(true)\n readonly unitSystem = signal<'imperial' | 'metric'>('imperial')\n readonly isDownloadingPdf = signal(false)\n readonly downloadSuccess = signal(false)\n readonly showTourSuccess = signal(false)\n\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n readonly currentPlan = computed(() => floorPlans[this.activeTab()] ?? floorPlans['plan-b']!)\n\n readonly activeRoom = computed(() => {\n const plan = this.currentPlan()\n const hovered = this.hoveredRoomId()\n if (hovered) return plan.rooms.find((r) => r.id === hovered) ?? null\n const selected = this.selectedRoomId()\n if (selected) return plan.rooms.find((r) => r.id === selected) ?? null\n return plan.rooms[0] ?? null\n })\n\n readonly availableCount = computed(\n () => this.currentPlan().availableUnits.filter((u) => u.status !== 'leased').length,\n )\n\n readonly downloadLabel = computed(() =>\n this.isDownloadingPdf()\n ? 'Generating PDF...'\n : this.downloadSuccess()\n ? 'PDF Downloaded'\n : 'Download PDF Floor Plan',\n )\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-6', this.className)\n }\n\n selectTab(key: string): void {\n this.activeTab.set(key)\n const plan = floorPlans[key]\n if (plan) {\n this.selectedRoomId.set(plan.rooms[0]?.id ?? null)\n this.hoveredRoomId.set(null)\n this.selectedUnitNumber.set(plan.availableUnits[0]?.unitNumber ?? '')\n }\n }\n\n selectRoom(roomId: string): void {\n this.selectedRoomId.update((prev) => (prev === roomId ? null : roomId))\n }\n\n hoverRoom(roomId: string | null): void {\n this.hoveredRoomId.set(roomId)\n }\n\n selectUnit(unitNumber: string): void {\n this.selectedUnitNumber.set(unitNumber)\n }\n\n isTerrace(roomId: string): boolean {\n return roomId === 'balcony' || roomId === 'sky-terrace'\n }\n\n unitToggleClass(system: 'imperial' | 'metric'): string {\n return cn(\n 'focus-visible:ring-ring rounded px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.unitSystem() === system\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n canvasToggleClass(active: boolean): string {\n return cn('h-7 gap-1 px-2 text-xs', active && 'bg-muted text-foreground')\n }\n\n roomFillClass(roomId: string): string {\n return cn(\n 'transition-colors duration-150',\n this.selectedRoomId() === roomId || this.hoveredRoomId() === roomId\n ? 'text-primary/15'\n : this.isTerrace(roomId)\n ? 'text-muted/60'\n : 'text-card',\n )\n }\n\n roomBorderClass(roomId: string): string {\n return cn(\n 'transition-colors duration-150',\n this.selectedRoomId() === roomId\n ? 'stroke-primary stroke-[2.5]'\n : this.hoveredRoomId() === roomId\n ? 'stroke-primary/70 stroke-[2]'\n : 'stroke-border/90 stroke-[1.5]',\n )\n }\n\n roomRowClass(roomId: string): string {\n return cn(\n 'flex cursor-pointer items-center justify-between rounded-md border p-2.5 transition-colors duration-150',\n this.selectedRoomId() === roomId\n ? 'border-primary bg-primary/5 shadow-xs'\n : this.hoveredRoomId() === roomId\n ? 'border-border bg-muted/60'\n : 'border-border/60 bg-card hover:bg-muted/30',\n )\n }\n\n roomDotClass(roomId: string): string {\n return cn(\n 'size-2 rounded-full transition-colors',\n this.selectedRoomId() === roomId\n ? 'bg-primary'\n : this.hoveredRoomId() === roomId\n ? 'bg-primary/70'\n : 'bg-muted-foreground/40',\n )\n }\n\n pinBadgeClass(roomId: string): string {\n return cn(\n 'transition-colors duration-150',\n this.selectedRoomId() === roomId\n ? 'fill-primary stroke-primary-foreground stroke-1 shadow-md'\n : this.hoveredRoomId() === roomId\n ? 'fill-foreground stroke-background stroke-1'\n : 'fill-card/90 stroke-border stroke-1 shadow-xs backdrop-blur-xs',\n )\n }\n\n pinLabelClass(roomId: string): string {\n return cn(\n 'font-mono text-xs font-semibold select-none',\n this.selectedRoomId() === roomId\n ? 'fill-primary-foreground'\n : this.hoveredRoomId() === roomId\n ? 'fill-background'\n : 'fill-foreground',\n )\n }\n\n unitRowClass(unitNumber: string): string {\n return cn(\n 'cursor-pointer text-xs transition-colors',\n this.selectedUnitNumber() === unitNumber ? 'bg-muted/80 font-medium' : 'hover:bg-muted/40',\n )\n }\n\n unitStatusClass(status: AvailableUnit['status']): string {\n switch (status) {\n case 'available-now':\n return 'border-success/20 bg-success/10 text-success text-xs font-normal'\n case 'available-soon':\n return 'border-info/20 bg-info/10 text-info text-xs font-normal'\n case 'under-contract':\n return 'border-warning/20 bg-warning/10 text-warning text-xs font-normal'\n default:\n return 'text-muted-foreground text-xs font-normal'\n }\n }\n\n downloadPdf(): void {\n if (this.isDownloadingPdf()) return\n this.isDownloadingPdf.set(true)\n this.downloadSuccess.set(false)\n this.timers.push(\n setTimeout(() => {\n this.isDownloadingPdf.set(false)\n this.downloadSuccess.set(true)\n this.timers.push(setTimeout(() => this.downloadSuccess.set(false), 4000))\n }, 900),\n )\n }\n\n scheduleTour(): void {\n this.showTourSuccess.set(true)\n this.timers.push(setTimeout(() => this.showTourSuccess.set(false), 4500))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/floor-plan-explorer/floor-plan-explorer.component.ts" }, { "path": "packages/registry-angular/blocks/floor-plan-explorer/index.ts", "content": "export {\n UiFloorPlanExplorerComponent,\n type AvailableUnit,\n type FloorPlanData,\n type RoomSpec,\n} from './floor-plan-explorer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/floor-plan-explorer/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/table.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "Architectural unit floor plan inspector and residential layout explorer with 2D CAD-styled blueprint canvas, interactive room highlight pins, dimensional callouts, room breakdown specs, and building unit availability table.", "categories": [ "real-estate", "app", "hospitality", "dashboard" ] }