@ppci/sourcemix-list

Sourcemix list

A list of sourcemixes

Table of contents

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

Installation

NPM

npm i @ppci/sourcemix-list

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

Usage

Javascript

import '@ppci/sourcemix-list'

Browser

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

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

Property	Type	Description	Possible Values
*items*	Array		```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, }, }, ]; ```
*limit*	Number	Amount of sourcemixes visible in the list
loading	Boolean	Show/hide loading indicator
deleteMode	Boolean	Toggle delete mode on the list.

Events

Name	Description	Payload
@list-item-click	List item has been clicked	``` { detail: { id: '1', }, } ```
@list-item-delete	List item delete button clicked	``` { detail: { id: '1', }, } ```
@add-click	Add button clicked
@list-sorted	List has been reordered	``` { detail: [ // Reordered list of items ] } ```