{"_id":"@braudypedrosa/bp-listings","_rev":"12-c3de59ab77650821072677f9ad180b4d","name":"@braudypedrosa/bp-listings","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@braudypedrosa/bp-listings","version":"1.0.0","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.0","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"ef8981772a797f9b2ff8f0e852b1e2b092bf76d9","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.0.tgz","fileCount":7,"integrity":"sha512-cKIsaSIq4Umi10ABNRJ/voL3He06Y7NlKk+YDGDphA3v4uIBLeFNf/NkOzekB4T1AmCn9rNDQ2s00v3YEWJAqg==","signatures":[{"sig":"MEUCIQC/q4zC2RsAtwkUF01e/+enHTLORhUnLOAAk424ZdgbQgIgUjRdngdZtUkPfYCoQAxvGSXSMR806H8TdmZYMW+zPcQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90402},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"a948f23f18cd195fb67f101106271e2f6064eea3","scripts":{"release:npm":"npm publish"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.8.0","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.0_1772213938983_0.22010216350737144","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@braudypedrosa/bp-listings","version":"1.0.1","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.1","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"621239909b40b25b5b266a350b1bee14db067f31","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.1.tgz","fileCount":5,"integrity":"sha512-ndDBJt+okY3DHmFhMrsM+8Is8UHx+kInCio8nWd71+7Ne/4nEHyar2L716qvDxyB/eSynnxXPbIDR8/mdD08WQ==","signatures":[{"sig":"MEUCIQDIuycpx2TqAz1XS+zEiAWhU4HHOgU+ViT5ADxKsCsrAgIgUY7nXiZ9H3rgp0c+fqJg7k6eGBIy6ZquMel1Fs4WYHA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55431},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"346a8cccf59c49359d106a7d3a322cc97ec3ff7c","scripts":{"release":"bash ./scripts/release.sh","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.8.0","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.1_1772221735588_0.5251409604826951","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.4":{"name":"@braudypedrosa/bp-listings","version":"1.0.4","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.4","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"a6449cf195aeeadbf831abb3b39a8dabf8d64b45","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.4.tgz","fileCount":5,"integrity":"sha512-kw+l7tAhiIt140lRbyBX6o9PoxgfJPieLDGTzFdrDpjE0kO3dFt5AcZQH6bPHZxOh8TQ29Y0njIgQD8V9V7U5w==","signatures":[{"sig":"MEUCIDbi9JkB266cCRzKpT8/M+nMh23WyxXjyi+wxmOPJtGnAiEA1RPni0cv254TgPy6TzY+WTzvDnKgxFswiwi9faT5ip0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55115},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"e7156f5b532931ecf81e9379a53483618d8cf656","scripts":{"release":"bash ./scripts/release.sh","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.8.0","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.4_1772379015086_0.9101050802547628","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5":{"name":"@braudypedrosa/bp-listings","version":"1.0.5","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.5","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"1a6ef69e4df8a19727c5e31601d4188bb0392b24","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.5.tgz","fileCount":5,"integrity":"sha512-P22S+55rxce+Sa1h+9lghspkIcgXaSXpPiQldoBn1Gd0bcvxmtbtWsQTF09p54l2rF+Q6lFC/fLcG0NNokL1og==","signatures":[{"sig":"MEYCIQDZiV5evs/wt1FAZ5pdNkw8KG6WoNggFVywtezcOLL/rQIhAOeD9uhHwb7NXI/J03VM6TxrAvUxhbNz2dNrhB0Q0GwV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55115},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"ce1c657184c5961149fe218207b0a24fdbcbc02d","scripts":{"release":"bash ./scripts/release.sh","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.8.0","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.5_1772379668166_0.8331013051981815","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6":{"name":"@braudypedrosa/bp-listings","version":"1.0.6","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.6","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"864c270433f7e43daaf9d9bdcb884642955a1e45","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.6.tgz","fileCount":6,"integrity":"sha512-RRisAasyhNkcG2gDl2OsW360e+HD0azpO+HA3TYUOwxunnia5hnvkvORJXwg2LuLUmeXuyMobMBkSCgbaeHUBg==","signatures":[{"sig":"MEUCIDwC96lpgjLzuvqdd5qtke7RNi4yYx7uDKfDlR7HrUU8AiEAnv3xCxvcmGHo58mdXaln5mrbD9fbRtKQ8PYY37F+t4I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83426},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"8dcb67101e718ab886065033d77ea885e836a9f0","scripts":{"dev":"vite","test":"vitest run --environment jsdom","release":"npm run build:css && bash ./scripts/release.sh","build:css":"sass listings-map.scss listings-map.css --no-source-map --style=expanded","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.10.1","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","jsdom":"^28.1.0","vitest":"^4.0.18","sass-embedded":"^1.97.3","@braudypedrosa/bp-calendar":"^1.0.3","@braudypedrosa/bp-search-widget":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.6_1772550449872_0.7860649261434611","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@braudypedrosa/bp-listings","version":"1.0.7","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.0.7","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"feb28e1c20a361fe4b56a3222ec74263e44444e3","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.0.7.tgz","fileCount":6,"integrity":"sha512-VwpkWkmJN1CNWf9QYw0YlPtBvtw73ZOrrVYcffITdLyE57N2v1bHdMtX86+I0FLR9ewmvWbYC6zwTq22m9I6EA==","signatures":[{"sig":"MEQCIGo5MpAkXHS09UaBVfqzXpbCUjzz9mSQpnHnEdo2Lcv9AiAFSngCDOqnobzLU46JyXPn2k+bn9czpECw+sFeTVBP+A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83426},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"6e00893771f586e1efd193a74fd51c499ba744e8","scripts":{"dev":"vite","test":"vitest run --environment jsdom","release":"npm run build:css && bash ./scripts/release.sh","build:css":"sass listings-map.scss listings-map.css --no-source-map --style=expanded","release:npm":"npm publish","release:major":"bash ./scripts/release.sh major","release:minor":"bash ./scripts/release.sh minor","release:patch":"bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.10.1","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.7.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","jsdom":"^28.1.0","vitest":"^4.0.18","sass-embedded":"^1.97.3","@braudypedrosa/bp-calendar":"^1.0.3","@braudypedrosa/bp-search-widget":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.0.7_1772550661139_0.5851853760007979","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0":{"name":"@braudypedrosa/bp-listings","version":"1.1.0","keywords":["listings","leaflet","map","vacation-rental","widget"],"license":"MIT","_id":"@braudypedrosa/bp-listings@1.1.0","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"homepage":"https://github.com/braudypedrosa/bp-listings#readme","bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"dist":{"shasum":"7d211e3fbf1bc50dd9e9f8ef3e71e36c2156a3e4","tarball":"https://registry.npmjs.org/@braudypedrosa/bp-listings/-/bp-listings-1.1.0.tgz","fileCount":6,"integrity":"sha512-Q3o05ahMouCKLF2DbNoX3CAIOwyRjWv9oFOZARWNbiC2S4JFfT3krvUW2of7Ic7PAieW+Ls9S9tyN7n5R0qDTQ==","signatures":[{"sig":"MEUCIGA0Rz1egkxpQK9GQzxm/vTeem/GrqnHVZm/nkFOiFkaAiEA0ToDEFbwpm3TGVqIVad3RAojJz2h3v/Pzl2J4lFeZYM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":119814},"main":"./listings-map.js","exports":{".":"./listings-map.js","./styles":"./listings-map.css"},"gitHead":"867310958bd5e8f944f3119346957f977dda2c20","scripts":{"dev":"vite","test":"vitest run","release":"npm run build:css && bash ./scripts/release.sh","build:css":"node ./scripts/build-css.mjs","release:npm":"npm publish","release:major":"npm run build:css && bash ./scripts/release.sh major","release:minor":"npm run build:css && bash ./scripts/release.sh minor","release:patch":"npm run build:css && bash ./scripts/release.sh patch"},"_npmUser":{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"},"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"_npmVersion":"11.10.1","description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","directories":{},"_nodeVersion":"25.7.0","dependencies":{"@braudypedrosa/bp-ui-components":"^0.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","jsdom":"^28.1.0","vitest":"^4.0.18","sass-embedded":"^1.97.3","@braudypedrosa/bp-calendar":"^1.0.5","@braudypedrosa/bp-search-widget":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/bp-listings_1.1.0_1772564501962_0.5628622158106289","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-02-27T17:38:58.917Z","modified":"2026-03-05T22:41:48.548Z","1.0.0":"2026-02-27T17:38:59.109Z","1.0.2":"2026-02-27T19:36:34.043Z","1.0.3":"2026-02-27T19:38:46.119Z","1.0.1":"2026-02-27T19:48:55.753Z","1.0.4":"2026-03-01T15:30:15.249Z","1.0.5":"2026-03-01T15:41:08.295Z","1.0.6":"2026-03-03T15:07:30.018Z","1.0.7":"2026-03-03T15:11:01.309Z","1.1.0":"2026-03-03T19:01:42.122Z"},"bugs":{"url":"https://github.com/braudypedrosa/bp-listings/issues"},"license":"MIT","homepage":"https://github.com/braudypedrosa/bp-listings#readme","keywords":["listings","leaflet","map","vacation-rental","widget"],"repository":{"url":"git+https://github.com/braudypedrosa/bp-listings.git","type":"git"},"description":"Airbnb-style listings + map widget powered by vanilla JavaScript and Leaflet","maintainers":[{"name":"braudypedrosa","email":"braudypedrosa@gmail.com"}],"readme":"# bp-listings\n\nAirbnb-style listings + map widget built with vanilla JavaScript and CSS.\n\nCurrent version: **1.1.0**\n\n## Overview\n\n`bp-listings` renders a listings grid and interactive map in one widget container.\nIt is framework-agnostic, distributed as standalone JS/CSS, and uses Leaflet for map rendering.\n\n`bp-listings` does not bundle a search UI. Search is integrated through the consumer-controlled\n`renderSearchSlot` hook, which lets you mount your own widget above the listings grid and drive\nresult updates through `setListings()`.\n\n## Features\n\n- Standalone UMD distribution (`ListingsMap.init(...)`)\n- Auto-loads Leaflet CSS/JS when `window.L` is not present\n- Listings cards with image carousel and badges\n- Favorite toggle with callback\n- Click-through callback for listing cards\n- Sort controls (`default`, `price-asc`, `price-desc`)\n- Optional pagination with configurable page size\n- Show/hide map toggle and fullscreen map action\n- Marker-to-card and card-to-marker highlighting behavior\n- Consumer-controlled search slot renderer with optional cleanup\n- Runtime methods to update listings and navigate map/pagination state\n\n## Installation\n\n### npm\n\n```bash\nnpm install @braudypedrosa/bp-listings\n```\n\n```js\nimport '@braudypedrosa/bp-listings';\nimport '@braudypedrosa/bp-listings/styles';\n```\n\n### Browser\n\n```html\n<link rel=\"stylesheet\" href=\"./listings-map.css\" />\n<script src=\"./listings-map.js\"></script>\n```\n\n## Quick Start\n\n```html\n<div id=\"widget\" style=\"width:100%;height:100vh;\"></div>\n<script>\n  const widget = ListingsMap.init({\n    container: '#widget',\n    currency: '₱',\n    mapOptions: { center: [14.58, 121.05], zoom: 12 },\n    listings: [\n      {\n        id: '1',\n        title: 'Apartment in Quezon City',\n        price: 13689,\n        pricePeriod: 'for 5 nights',\n        lat: 14.628,\n        lng: 121.055,\n        images: ['photo-1.jpg', 'photo-2.jpg']\n      }\n    ],\n    onFavorite: (listing, isFavorited) => {\n      console.log(listing.id, isFavorited);\n    },\n    onListingClick: (listing) => {\n      console.log('clicked', listing.id);\n    },\n  });\n</script>\n```\n\n## Listing Data Schema\n\nEach listing object can include:\n\n- `id: string` required\n- `title: string` required\n- `price: number | string` required\n- `lat: number` required\n- `lng: number` required\n- `subtitle?: string`\n- `details?: string`\n- `dates?: string`\n- `pricePeriod?: string`\n- `tag?: string`\n- `rating?: number`\n- `reviewCount?: number`\n- `badge?: string` for labels such as `Guest favorite` or `Superhost`\n- `images?: string[]`\n- `favorited?: boolean`\n\n### Recommended Consumer-side `searchData`\n\nWhen you integrate external search through `renderSearchSlot`, the recommended consumer-side shape is:\n\n```js\n{\n  searchData: {\n    location?: string | string[],\n    availability?: Array<{ start: string, end: string }>,\n    fields?: Record<string, string | string[]>,\n    filters?: Record<string, string | string[] | number>\n  }\n}\n```\n\nImportant:\n\n- this is a docs/demo convention only\n- `bp-listings` does not parse or enforce `searchData` automatically\n- matching remains consumer-owned, but helper exports are available for the documented convention\n\n## Config Options\n\n- `container: HTMLElement | string` required\n- `listings: Array<Listing>` default `[]`\n- `currency: string` default `'$'`\n- `mapOptions.center: [number, number]` default `[14.55, 121.03]`\n- `mapOptions.zoom: number` default `12`\n- `tileUrl: string` OpenStreetMap by default\n- `tileAttribution: string`\n- `showMapToggle: boolean` default `true`\n- `showSort: boolean` default `true`\n- `showPagination: boolean` default `true`\n- `pageSize: number` default `12`; explicit `0` or any non-positive value disables paging\n- `renderSearchSlot: (containerEl: HTMLElement, listingsWidget: ListingsMapWidget) => void | (() => void)`\n- `onFavorite: (listing, isFavorited) => void`\n- `onListingClick: (listing) => void`\n- `onMapMoveEnd: ({bounds, center, zoom}) => void`\n\n`renderSearchSlot` rules:\n\n- `containerEl` is the mounted slot host rendered above the listings grid\n- `listingsWidget` is the active `bp-listings` instance\n- if the callback returns a function, `bp-listings` calls it during `destroy()`\n- legacy usage that only accepts `(containerEl)` still works\n\n## Using `bp-search-widget` with `renderSearchSlot`\n\nThis is the official integration model:\n\n- keep `bp-listings` focused on rendering cards, markers, sorting, and pagination\n- mount `BPSearchWidget` inside `renderSearchSlot`\n- keep the full `allListings` dataset outside the widget\n- filter externally on `BPSearchWidget.onSearch`\n- push the filtered subset back into `bp-listings` with `setListings(filteredListings)`\n\nThis pattern requires a bundler or dev server that can resolve npm packages and SCSS style imports.\n\n```js\nimport '@braudypedrosa/bp-listings';\nimport '@braudypedrosa/bp-listings/styles';\nimport '@braudypedrosa/bp-search-widget/styles';\nimport { BPSearchWidget } from '@braudypedrosa/bp-search-widget';\n\nconst allListings = [\n  {\n    id: 'villa-ocean',\n    title: 'Ocean-view villa in Batangas',\n    price: 21450,\n    lat: 13.7565,\n    lng: 120.9414,\n    images: ['villa-1.jpg'],\n    searchData: {\n      location: ['Batangas', 'Nasugbu', 'Beachfront'],\n      availability: [{ start: '2030-04-10', end: '2030-04-30' }],\n      fields: {\n        'bp-guests': '6',\n      },\n      filters: {\n        'bp-bedrooms': 4,\n        'bp-view': 'Ocean',\n        'bp-amenities': ['Pool', 'Spa'],\n      },\n    },\n  },\n  {\n    id: 'cabin-ridge',\n    title: 'Ridge cabin outside Tagaytay',\n    price: 11800,\n    lat: 14.1153,\n    lng: 120.9625,\n    images: ['cabin-1.jpg'],\n    searchData: {\n      location: ['Tagaytay', 'Ridge'],\n      availability: [{ start: '2030-04-01', end: '2030-04-18' }],\n      fields: {\n        'bp-guests': '4',\n      },\n      filters: {\n        'bp-bedrooms': 2,\n        'bp-view': 'Garden',\n        'bp-amenities': ['Pet Friendly'],\n      },\n    },\n  },\n];\n\nconst fieldDefinitions = [\n  {\n    key: 'bp-guests',\n    label: 'Guests',\n    type: 'select',\n    options: ['2', '4', '6'],\n    position: 'end',\n  },\n];\n\nconst filterDefinitions = [\n  {\n    key: 'bp-bedrooms',\n    label: 'Bedrooms',\n    type: 'counter',\n    min: 0,\n    max: 8,\n    defaultValue: 0,\n    width: '24%',\n  },\n  {\n    key: 'bp-view',\n    label: 'View',\n    type: 'select',\n    options: ['Ocean', 'Garden', 'City'],\n    width: '28%',\n  },\n  {\n    key: 'bp-amenities',\n    label: 'Amenities',\n    type: 'checkbox',\n    options: ['Pool', 'Spa', 'Gym', 'Pet Friendly'],\n    width: '48%',\n  },\n];\n\nconst matchListing = ListingsMap.createSearchDataMatcher({\n  fields: fieldDefinitions,\n  filters: filterDefinitions,\n});\n\nconst listingsWidget = ListingsMap.init({\n  container: '#widget',\n  listings: allListings,\n  renderSearchSlot: (containerEl, widget) => {\n    const searchWidget = new BPSearchWidget(containerEl, {\n      fields: fieldDefinitions,\n      filters: filterDefinitions,\n      calendarOptions: {\n        startDate: new Date('2030-03-01T00:00:00'),\n        monthsToShow: 2,\n        datepickerPlacement: 'auto',\n      },\n      onSearch: (payload) => {\n        const filteredListings = ListingsMap.filterListingsBySearchData(allListings, payload, {\n          fields: fieldDefinitions,\n          filters: filterDefinitions,\n        });\n        widget.setListings(filteredListings);\n      },\n    });\n\n    return () => {\n      searchWidget.destroy();\n    };\n  },\n});\n\ndocument.querySelector('#reset-listings').addEventListener('click', () => {\n  listingsWidget.setListings(allListings);\n});\n```\n\n## Public Methods\n\nReturned widget instance exposes:\n\n- `setListings(listings)` and preserves the current sort selection while resetting pagination to page 1\n- `panToListing(id)`\n- `toggleMap()`\n- `goToPage(pageNumber)`\n- `destroy()`\n\nHelper exports on `window.ListingsMap` or the package module:\n\n- `createSearchDataMatcher({ fields, filters })`\n- `filterListingsBySearchData(listings, payload, { fields, filters })`\n\n## Styling and Theming\n\nAll classes are scoped with `.lm-*`.\n\nYou can customize appearance via CSS variables on `.lm-widget`, including:\n\n- typography via `--lm-font`\n- text and border colors\n- badge colors\n- price marker colors\n- radii\n\nThe included stylesheet is standalone and does not require a CSS framework.\n\nWhen the map is hidden, the desktop listings grid auto-fits to the available width so wider layouts\ncan expand beyond the default 2-column split view.\n\n## Local Demo\n\nThis repo includes a local demo at [index.html](/Users/braudypedorsa/Projects/libraries/bp-listings/index.html).\n\nRun it with:\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe local demo uses Vite only for development so it can resolve `@braudypedrosa/bp-search-widget`,\n`@braudypedrosa/bp-ui-components`, and their styles. The published `bp-listings` package format is unchanged.\n\n## Notes\n\n- Leaflet is loaded from `unpkg` automatically if it is not already available on the page.\n- If your app already loads Leaflet, the widget reuses existing `window.L`.\n- `bp-listings` does not include internal search/filter behavior.\n\n## License\n\nMIT\n\n## Maintainer Workflow\n\nFor the reusable release workflow, versioning rules, and verification steps, see [RELEASING.md](https://github.com/braudypedrosa/bp-listings/blob/main/RELEASING.md).\n","readmeFilename":"README.md"}