npm package: @ppci/sourcemix-list
Description: List of sourcemixes
Author: Powerpeers
Latest version: 1.3.20

# Sourcemix list

A list of sourcemixes

### Table of contents

<ol>
  <li>
    <a href="#installation">Installation</a>
  </li>
  <li>
    <a href="#usage">Usage</a>
  </li>
  <li>
    <a href="#styling">Styling</a>
  </li>
  <li>
    <a href="#properties">Properties</a>
  </li>
  <li>
    <a href="#events">Events</a>
  </li>
</ol>

### Installation
#### NPM
```javascript
npm i @ppci/sourcemix-list

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

### Usage
#### Javascript
```javascript
import '@ppci/sourcemix-list'
```

#### Browser
```html
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/sourcemix-list/builds/index.min.js" />

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

<!-- Component -->
<sourcemix-list 
  limit=${Number}
  .items=${Array}
  @list-item-click=${Event}
  @list-item-delete=${Event}
  @change=${Event}
  @placeholder-click=${Event"}
  ?loading=${Boolean}
  ?deleteMode=${Boolean}
</sourcemix-list>
```

### Styling

```css
sourcemix-list {
   /* Dynamically generated icon variables based on available energy subtypes */
  --icon-wind: 'wind icon';
  --icon-sun: 'sun icon';
  --icon-water: 'water icon';
  ...etc

  /* Dynamically generated category color variables based on the available categories */
  --local-color: red;
  --social-color: blue;
  ...etc
}
```

### Properties
<table width="100%">
  <thead>
    <tr>
      <td>Property</td>
      <td>Type</td>
      <td>Description</td>
      <td>Possible Values</td>
    </tr>
  </thead>
  <tr>
    <td>*items*</td>
    <td>Array</td>
    <td></td>
    <td>
    ```javascript
      const items = [
        {
          id: 12,
          sourceId: 9000,
          target: '605ea8c2f74bfd2f9c25eaad6e41f5356d8ba58f5b9dce339b866ae6ce602f54',
          priority: 4,
          categoryId: 1,
          startDate: '2019-07-25T09:00:06.069',
          endDate: null,
          source: {
            id: 9000,
            categoryId: 1,
            deviceId: 'a7f8d7d426d716d384e78b9606be016601cb7ef012bdf488741c6fd4fa285978',
            name: 'Naeem ',
            city: 'Amstelveen',
            status: 'ACTIVE',
            latitude: 52.31142,
            longitude: 4.870087,
            image: null,
            website: null,
            type: 'SUN',
            description: 'sdfdf',
            supply: 4564,
            startDate: '2019-01-01T00:00:00',
            endDate: null,
          },
        },
        {
          id: 10,
          sourceId: 8000,
          target: '605ea8c2f74bfd2f9c25eaad6e41f5356d8ba58f5b9dce339b866ae6ce602f54',
          priority: 5,
          categoryId: 1,
          startDate: '2019-07-25T09:00:06.069',
          endDate: null,
          source: {
            id: 8000,
            categoryId: 1,
            deviceId: '270200df51f975d003e872334e8b5238d013ade3ad7c2a61781fa85aed851432',
            name: 'Akhilesh ',
            city: 'Antwerp',
            status: 'ACTIVE',
            latitude: 51.219448,
            longitude: 4.402464,
            image: null,
            website: null,
            type: 'SUN',
            description: 'solar panels',
            supply: 453,
            startDate: '2019-04-04T00:00:00',
            endDate: null,
          },
        },
      ];
    ```
    </td>
  </tr>
  <tr>
    <td>*limit*</td>
    <td>Number</td>
    <td>Amount of sourcemixes visible in the list</td>
    <td></td>
  </tr>
   <tr>
    <td>loading</td>
    <td>Boolean</td>
    <td>Show/hide loading indicator</td>
    <td></td>
  </tr>
  <tr>
    <td>deleteMode</td>
    <td>Boolean</td>
    <td>Toggle delete mode on the list.</td>
    <td></td>
  </tr>
</table>

### Events
<table width="100%">
  <thead>
    <tr>
      <td>Name</td>
      <td>Description</td>
      <td>Payload</td>
    </tr>
  </thead>
  <tr>
    <td>@list-item-click</td>
    <td>List item has been clicked</td>
    <td>
    ```
    { 
      detail: { 
        id: '1',
      },
    }
    ```
    </td>
  </tr>
   <tr>
    <td>@list-item-delete</td>
    <td>List item delete button clicked</td>
    <td>
    ```
    { 
      detail: { 
        id: '1',
      },
    }
    ```
    </td>
  </tr>
   <tr>
    <td>@add-click</td>
    <td>Add button clicked</td>
    <td></td>
  </tr>
   <tr>
    <td>@list-sorted</td>
    <td>List has been reordered</td>
    <td>
    ```
    { 
      detail: [ // Reordered list of items ]
    }
    ```
    </td>
  </tr>
</table>