@johnsonandjohnson/mettle-components NPM

Mettle Custom Elements

A Suite of custom elements and services to be used on a front-end JavaScript application.

These are built under the Web Components spec. These tags can be dropped into any front end application like html. You can use this package in addition to your own or with other custom element packages.

Mettle Components Documentation

Goals

Use native JS for little to no dependency
Cross browser support
Flexible for CSS
Unit tested

Project Installation

$ npm install @johnsonandjohnson/mettle-components --save

To include the components to your code

import '@johnsonandjohnson/mettle-components'

Quick Sample

<html>
  <head>
    <title>Mettle Component Example</title>
  </head>
  <body>
    <span id="id-44629472-5691-4c53-b7f0-c5488854761b">
      Hover or tap me for tip
    </span>
    <mettle-tool-tip
      data-for="id-44629472-5691-4c53-b7f0-c5488854761b">
        <p>Slot HTML/Text</p>
    </mettle-tool-tip>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/index.js"></script>
  </body>
</html>

To include services to your code

import { 
  HtmlMarker,
  HttpFetch,
  I18n,
  Observable,
  Roles,
  Router
} from '@johnsonandjohnson/mettle-components/services'

Quick Sample

<html>
  <head>
    <title>Mettle Services Example</title>
  </head>
  <body>
    <div id="render"></div>

    <script type="module">
      import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/services.js'

      (async () => {
        const htmlMarker = new HtmlMarker()
        const htmlString = '<button disabled="${disabled}">Random Disabled</button>'
        const div = document.querySelector('#render')

        let model = {
          disabled: 'disabled'
        }
        await htmlMarker.render(div, htmlString, model)

        window.setInterval(() => {
          model.disabled = (Math.random() >= 0.5) ? 'disabled' : ''
          htmlMarker.updateModel(model)
        }, 1000)
      })()
    </script>
  </body>
</html>