Sourcemix item
Table of contents
Installation
NPM
npm i @ppci-mock/sourcemix-item
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci-mock/sourcemix-item'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/sourcemix-item/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/sourcemix-item/builds/legacy.min.js" />
<!-- Component -->
<sourcemix-item
id=${String}
name=${String}
city=${String}
image=${String}
icon=${String}
deleteMode
></sourcemix-item>
Styling
sourcemix-item {
--category-color: blue;
--icon-color: white;
--background-color: white;
/* 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 |
*id* | string | Corresponding data id | 'd677ecdd-79c8-4409-81be-f0fd956f4be2', '1' |
*name* | string | Name of the sourcemix | |
*city* | string | City of the sourcemix | 'Amsterdam' |
*image* | string | Avatar image url | https://powerpeers-tst.azurewebsites.net/assets/images/avatars/Avatars-blonde.png |
*category* | string | Sourcemix category | local | social |
*subtype* | string | Sourcemix energy subtype | wind | sun | water |
deleteMode | boolean | Show item in delete mode. This will show a garbage bin icon. | |
inactive | boolean | Mark sourcemix as inactive. |
Events
Name | Description | Payload |
@click | List item clicked | ```{ detail: { id: '1' } }``` |
@delete | List item delete button clicked | ```{ detail: { id: '1' } }``` |