Sourcemix list
A list of sourcemixes
Table of contents
Installation
NPM
npm i @ppci/sourcemix-list
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjsUsage
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 ] } ``` |