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/> `{`<br/> &nbsp;`entityId,`<br/> &nbsp;`entityType,`<br/> &nbsp;`marketplaceId,`<br/> &nbsp;`marketplaceBaseUrl,`<br/> &nbsp;`apiKey,`<br/> &nbsp;`apiBaseUrl,`<br/> `}` <br/><br/> `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 | |

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 | |