@ppci-mock/source-mix

Sourcemix widget

Usage no npm install needed!

<script type="module">
  import ppciMockSourceMix from 'https://cdn.skypack.dev/@ppci-mock/source-mix';
</script>

README

Source mix

Table of contents

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

Installation

NPM

npm i @ppci-mock/source-mix

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

Usage

Javascript

import '@ppci-mock/source-mix'

Browser

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

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/source-mix/builds/legacy.min.js" />

<!-- Component -->
<source-mix
  limit="Number"
  categoryIds="Array"
></source-mix>

Styling

source-mix {
  --icon-color: white;
  --icon-background-color: gray;

  --local-color: #32b4e9;
  --social-color: #ffa800;

  --icon-sun: '\\e9d4';
  --icon-wind: '\\e9c1';
  --icon-water: '\\e90b';
}

Properties

Property Type Description Possible Values
*deviceId* String Show source mix for a given device
*categoryIds* Array A list of categoryIds. Show source mix for the following categories. It is also possible to pass a single category. ```js [ 1, \\ local 2, \\ social ] ```
*limit* Number Max amount of sources in the source mix.
deleteMode Boolean Set to true to enable delete mode. The user is now able to delete sources from his source mix.

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