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

Events