@ppci-mock/source-card

Source Card

This is a source wrapper around the custom card component. It handles certain async network requests like loading/updating the source mix.

By leveraging the apollo cache it will prevent a lot of network request while having multiple cards on the same page.

Table of contents

1. Installation
2. Usage
3. Properties
4. Events

Installation

NPM

npm i @ppci-mock/source-dialog

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci-mock/source-dialog'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/source-dialog/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/source-dialog/builds/legacy.min.js" />

<!-- Component -->
<source-dialog
  .source=${Object}
  .deviceId=${String}
  @close=${Function}
  open=${Boolean}
></source-dialog>

Properties

Property	Type	Description	Possible Values
*open*	boolean	Show or hide dialog
*deviceId*	String	Provide a deviceId of the selected device.
*source*	Object	Contains source details for a specific source	```javascript { // Used by dialog "id":1," "name":"Mark Prince", "city":"Amsterdam", "image":"http://imageurl.com"/1.jpg, "description":"Powerpeers COO", // Other categoryId":1, "deviceId":"1015", "status":"ACTIVE", "latitude":52.368, "longitude":4.9036, "website":null, "type":"SUN", "supply":9500, "start":"2016-04-10T00:00:00", "end":null, "soldOut":false, "weight":1 } ``` </td>
loading	boolean	Show or hide loading indicator

Events

Name	Description	Payload
@close	Dialog close icon has been clicked