Package Exports

@ppci-mock/sourcemix-item

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ppci-mock/sourcemix-item) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sourcemix item

Installation
Usage
Styling
Properties
Events

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' } }```

@ppci-mock/sourcemix-item