npm package: @marketplace-co/card
Description: Webcomponent card following open-wc recommendations
Author: @marketplace-co
Latest version: 0.0.21

## `src/Card.js`:

### class: `Card`, `mpc-card`

#### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

#### Fields

| Name              | Privacy | Type      | Default      | Description                                                                                                                                                                                                                                                                                                                                                                  | Inherited From |
| ----------------- | ------- | --------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `title`           | public  | `string`  | `''`         | Title of the card                                                                                                                                                                                                                                                                                                                                                            |                |
| `subtitle`        | public  | `string`  | `''`         | Subtitle of the card, shown above the title if present                                                                                                                                                                                                                                                                                                                       |                |
| `href`            | public  | `string`  | `''`         | When present, clicking the card will route to this string                                                                                                                                                                                                                                                                                                                    |                |
| `images`          | public  | `array`   | `[]`         | Array of image urls, only the first image will be shown                                                                                                                                                                                                                                                                                                                      |                |
| `loading`         | public  | `boolean` | `false`      | Show the loading state                                                                                                                                                                                                                                                                                                                                                       |                |
| `buttonText`      | public  | `string`  | `''`         | When present, a button is shown at the buttom of the card                                                                                                                                                                                                                                                                                                                    |                |
| `currency`        | public  | `string`  | `''`         | When present, a currency is shown next to the price                                                                                                                                                                                                                                                                                                                          |                |
| `currencySymbol`  | public  | `string`  | `'$'`        | The symbol to show before price string. Only used when price is set.                                                                                                                                                                                                                                                                                                         |                |
| `currencyFormat`  | public  | `string`  | `'0,0[.]00'` | The format string to display the price in, see \<a href="http\://numeraljs.com" target="\_blank">numeraljs.com\</a> for a full list of options                                                                                                                                                                                                                               |                |
| `darkMode`        | public  | `string`  | `'disabled'` | The theme of the card, valid options are \`disabled\`, \`auto\` & \`active\`. The auto strategy uses the \`prefers-color-scheme\` media feature under the hood, it will not listen for color changes when set to auto                                                                                                                                                        |                |
| `autoFetch`       | public  | `boolean` | `false`      | When true, autofetch data from the MPC API and apply it. See \`autoFetchConfig\` for more info.                                                                                                                                                                                                                                                                              |                |
| `autoFetchConfig` | public  | `object`  | `{}`         | Auto fetch data for the card when required params are supplied\<br/>&#xA;\`{\`\<br/>&#xA; \&nbsp;\`entityId,\`\<br/>&#xA; \&nbsp;\`entityType,\`\<br/>&#xA; \&nbsp;\`marketplaceId,\`\<br/>&#xA; \&nbsp;\`marketplaceBaseUrl,\`\<br/>&#xA; \&nbsp;\`apiKey,\`\<br/>&#xA; \&nbsp;\`apiBaseUrl,\`\<br/>&#xA;\`}\`&#xA; \<br/>\<br/>&#xA;\`entityType\` options are \`listing\` |                |
| `target`          | public  |           |              | Tells the browser where to open the link. Only used when href is set.                                                                                                                                                                                                                                                                                                        |                |
| `price`           | public  |           |              | When present, a price is shown. Formatted by numeral.js                                                                                                                                                                                                                                                                                                                      |                |

#### Methods

| Name                             | Privacy | Description | Parameters         | Return | Inherited From |
| -------------------------------- | ------- | ----------- | ------------------ | ------ | -------------- |
| `_handleAutoFetch`               |         |             | `autoFetch`        |        |                |
| `_handleAutoFetchResponse`       |         |             | `data, entityType` |        |                |
| `_handleSetPropertiesForListing` |         |             | `data`             |        |                |
| `mediaTemplate`                  |         |             |                    |        |                |
| `loadingTemplate`                |         |             |                    |        |                |
| `contentTemplate`                |         |             |                    |        |                |

#### Attributes

| Name              | Field           | Inherited From |
| ----------------- | --------------- | -------------- |
| `title`           | title           |                |
| `subtitle`        | subtitle        |                |
| `images`          | images          |                |
| `loading`         | loading         |                |
| `href`            | href            |                |
| `target`          | target          |                |
| `buttonText`      | buttonText      |                |
| `price`           | price           |                |
| `currency`        | currency        |                |
| `currencySymbol`  | currencySymbol  |                |
| `currencyFormat`  | currencyFormat  |                |
| `darkMode`        | darkMode        |                |
| `autoFetch`       | autoFetch       |                |
| `autoFetchConfig` | autoFetchConfig |                |

<hr/>

### Exports

| Kind | Name   | Declaration | Module      | Package |
| ---- | ------ | ----------- | ----------- | ------- |
| `js` | `Card` | Card        | src/Card.js |         |

## `mpc-card.js`:

### Exports

| Kind                        | Name       | Declaration | Module       | Package |
| --------------------------- | ---------- | ----------- | ------------ | ------- |
| `custom-element-definition` | `mpc-card` | Card        | /src/Card.js |         |