@mapvx/website-component 0.11.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -237,16 +237,18 @@ export class MyComponent {
237
237
 
238
238
  The web component accepts the following input properties to customize its behavior:
239
239
 
240
- | Property | Type | Required | Default | Description |
241
- | ----------------------- | --------- | ---------- | ------- | ------------------------------------------------------------------------------------------------ |
242
- | `api-key` | `string` | ✅ **Yes** | - | Valid API key to initialize the SDK |
243
- | `institution-id` | `string` | ✅ **Yes** | - | Institution ID for specific data filtering and search |
244
- | `initial-data` | `string` | ❌ No | - | JSON string with initial data (use `prepareInitialData` from `@mapvx/website-component-helpers`) |
245
- | `default-to-map` | `boolean` | ❌ No | `false` | If `true`, shows map view by default |
246
- | `show-category-filters` | `boolean` | ❌ No | `true` | If `true`, shows category filters |
247
- | `show-city-filter` | `boolean` | ❌ No | `true` | If `true`, shows city filter |
248
- | `inherit-font-family` | `boolean` | ❌ No | `false` | If `true`, inherits font family from parent |
249
- | `hide-deals` | `boolean` | ❌ No | `false` | If `true`, hides deals and promotional content |
240
+ | Property | Type | Required | Default | Description |
241
+ | ----------------------- | --------- | ---------- | ------------------------------- | ------------------------------------------------------------------------------------------------ |
242
+ | `api-key` | `string` | ✅ **Yes** | - | Valid API key to initialize the SDK |
243
+ | `institution-id` | `string` | ✅ **Yes** | - | Institution ID for specific data filtering and search |
244
+ | `initial-data` | `string` | ❌ No | - | JSON string with initial data (use `prepareInitialData` from `@mapvx/website-component-helpers`) |
245
+ | `default-to-map` | `boolean` | ❌ No | `false` | If `true`, shows map view by default |
246
+ | `show-category-filters` | `boolean` | ❌ No | `true` | If `true`, shows category filters |
247
+ | `show-city-filter` | `boolean` | ❌ No | `true` | If `true`, shows city filter |
248
+ | `inherit-font-family` | `boolean` | ❌ No | `false` | If `true`, inherits font family from parent |
249
+ | `hide-deals` | `boolean` | ❌ No | `false` | If `true`, hides deals and promotional content |
250
+ | `card-width` | `number` | ❌ No | `237` (desktop), `170` (mobile) | Custom card width in pixels for grid view. Affects card size and number of cards per row |
251
+ | `rows-per-page` | `number` | ❌ No | `2` | Maximum number of rows per page (1-10). Shows fewer rows if not enough cards to fill all rows |
250
252
 
251
253
  ### Input Usage Examples
252
254
 
@@ -266,6 +268,40 @@ The web component accepts the following input properties to customize its behavi
266
268
  show-category-filters="false"
267
269
  show-city-filter="true"
268
270
  hide-deals="true"
271
+ card-width="300"
272
+ >
273
+ </mapvx-website>
274
+ ```
275
+
276
+ #### Custom Card Width
277
+
278
+ ```html
279
+ <!-- Larger cards (300px) -->
280
+ <mapvx-website api-key="your-api-key-here" institution-id="institution-123" card-width="300">
281
+ </mapvx-website>
282
+
283
+ <!-- Smaller cards (200px) -->
284
+ <mapvx-website api-key="your-api-key-here" institution-id="institution-123" card-width="200">
285
+ </mapvx-website>
286
+ ```
287
+
288
+ #### Custom Rows Per Page
289
+
290
+ ```html
291
+ <!-- Show 3 rows per page -->
292
+ <mapvx-website api-key="your-api-key-here" institution-id="institution-123" rows-per-page="3">
293
+ </mapvx-website>
294
+
295
+ <!-- Show 1 row per page (minimal) -->
296
+ <mapvx-website api-key="your-api-key-here" institution-id="institution-123" rows-per-page="1">
297
+ </mapvx-website>
298
+
299
+ <!-- Combine with custom card width -->
300
+ <mapvx-website
301
+ api-key="your-api-key-here"
302
+ institution-id="institution-123"
303
+ card-width="250"
304
+ rows-per-page="4"
269
305
  >
270
306
  </mapvx-website>
271
307
  ```