G-element NPM | npm.io

G-ELEMENT

A collection of elements used by Authentic System Solutions.

Elements

g-avatar - A user avatar element.
g-input-suggest - A paper-input that provides the user with input suggestions.
g-location - A wrapper element for html5 geo-location.
g-mongo-auth - An authorization element for nodejs mongodb.
g-notification - A wrapper element for html5 client side notification.
g-search-bar - A paper search bar element.
g-storage - A wrapper element for html5 indexed-db.
g-wizard-steps - A steps progress element.
g-socket-io - A wrapper element for Socket.IO.
g-calendar - A wrapper element for FullCalendar.
g-datatable - A responsive data table with Polymer 3 support.
g-file-upload - A wrapper element for input type file with client side image compress using compressorjs.
g-signature - A wrapper element for signature_pad.
g-dialog - A polymer 3 material dialog with a few extra conveniences.
g-expansion-panel - A polymer 3 material design expansion panel with header and collapsible content.
g-icon-item - A paper-icon-item without its behavior intended for UI designing.

Usage

Installation

npm install --save g-element

In an html file

<html>
  <head>
    <script type="module">
      import 'g-element/elements/my-element.js';
    </script>
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import 'g-element/elements/my-element.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
     <my-element></my-element>
    `;
  }
}
customElements.define('sample-element', SampleElement);