@johnsonandjohnson/mettle-components

1.17.0 • Public • Published

Mettle Logo

Mettle Custom Elements

CodeQL npm Unit Test codecov

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

  • [x] Use native JS for little to no dependency
  • [x] Cross browser support
  • [x] Flexible for CSS
  • [x] 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>

Changelog

Review our latest changes and updates

Contributing

License Contributor Covenant

Contributions are welcomed!

Package Sidebar

Install

npm i @johnsonandjohnson/mettle-components

Weekly Downloads

6

Version

1.17.0

License

Apache-2.0

Unpacked Size

14.2 MB

Total Files

368

Last publish

Collaborators

  • jjoswg
  • gforti