@ppci/sourcemix-item

Sourcemix item

Table of contents

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

Installation

NPM

npm i @ppci/sourcemix-item

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

Usage

Javascript

import '@ppci/sourcemix-item'

Browser

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

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/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' } }```