@mapvx/website-component 0.11.0 → 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 +46 -10
- package/dist/browser/main.js +97 -97
- package/dist/browser/styles.css +1 -1
- package/package.json +1 -1
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
|
|
241
|
-
| ----------------------- | --------- | ---------- |
|
|
242
|
-
| `api-key` | `string` | ✅ **Yes** | -
|
|
243
|
-
| `institution-id` | `string` | ✅ **Yes** | -
|
|
244
|
-
| `initial-data` | `string` | ❌ No | -
|
|
245
|
-
| `default-to-map` | `boolean` | ❌ No | `false`
|
|
246
|
-
| `show-category-filters` | `boolean` | ❌ No | `true`
|
|
247
|
-
| `show-city-filter` | `boolean` | ❌ No | `true`
|
|
248
|
-
| `inherit-font-family` | `boolean` | ❌ No | `false`
|
|
249
|
-
| `hide-deals` | `boolean` | ❌ No | `false`
|
|
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
|
```
|