JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q45145F
  • License ISC

Package Exports

  • @ppci/source-dialog

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/source-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Source Dialog

A simple full screen source dialog

Table of contents

  1. Installation
  2. Usage
  3. Theme | Styling
  4. Properties
  5. Events
  6. Changelog

Installation

CDN

  <script type='module' src="http://developer.powerpeers.com/social/1.0.0/source-dialog.js" />

NPM

  npm i @ppci/source-dialog

Usage

// Javascript import
import '@ppci/source-dialog'
<!-- or module import -->
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/source-dialog.js" />

const onClose = (event) => {
  // place click logic here
}

const source = {
  // Used by dialog
  "id":1,"
  "name":"Mark Prince",
  "city":"Amsterdam",
  "image":"http://imageurl.com"/1.jpg,
  "description":"Powerpeers COO",
}

<source-dialog
  loading
  open
  source="${source}"
  @close=${onClose}>

  <div>Place dialog content here</div>

</source-dialog>

Theme | Styling.

source-dialog {
  --theme-dialog-backdrop: white;
}

Properties

Property Type Description Possible Values
*source* Object Contains source details for a specific source ```javascript { // Used by dialog "id":1," "name":"Mark Prince", "city":"Amsterdam", "image":"http://imageurl.com"/1.jpg, "description":"Powerpeers COO", 
      // Other
      categoryId":1,
      "deviceId":"1015",
      "status":"ACTIVE",
      "latitude":52.368,
      "longitude":4.9036,
      "website":null,
      "type":"SUN",
      "supply":9500,
      "start":"2016-04-10T00:00:00",
      "end":null,
      "soldOut":false,
      "weight":1
    }
  ```
</td>
*open* boolean Show or hide dialog ```html ```
error String Show error on dialog
loading boolean Show or hide loading indicator ```html ```

Events

Name Description Detail / Payload
@close Dialog close icon has been clicked ```{ target: ..., currentTarget: ..., ... }```

Changelog

1.0.0 ( Major )

  • Initial version of the source dialog.