{"id":24316962,"url":"https://github.com/johnsonandjohnson/mettle-components","last_synced_at":"2025-09-27T00:32:33.569Z","repository":{"id":40338208,"uuid":"417518585","full_name":"johnsonandjohnson/mettle-components","owner":"johnsonandjohnson","description":"Mettle components are a collection of custom elements based of the Web Components spec to be used in front-end JavaScript applications.","archived":false,"fork":false,"pushed_at":"2023-08-16T13:54:24.000Z","size":8628,"stargazers_count":8,"open_issues_count":7,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-16T07:53:02.985Z","etag":null,"topics":["components","custom-elements","frond-end","javascript","web","web-components"],"latest_commit_sha":null,"homepage":"https://johnsonandjohnson.github.io/mettle-components/?path=/docs/welcome-introduction--page","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnsonandjohnson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-15T13:57:06.000Z","updated_at":"2024-07-31T01:13:31.000Z","dependencies_parsed_at":"2023-01-27T22:01:27.455Z","dependency_job_id":null,"html_url":"https://github.com/johnsonandjohnson/mettle-components","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsonandjohnson%2Fmettle-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsonandjohnson%2Fmettle-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsonandjohnson%2Fmettle-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsonandjohnson%2Fmettle-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnsonandjohnson","download_url":"https://codeload.github.com/johnsonandjohnson/mettle-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234368582,"owners_count":18821116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","custom-elements","frond-end","javascript","web","web-components"],"created_at":"2025-01-17T13:21:24.340Z","updated_at":"2025-09-27T00:32:32.471Z","avatar_url":"https://github.com/johnsonandjohnson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./mettle-logo.svg\" alt=\"Mettle Logo\" width=\"120\"/\u003e\n\n# Mettle Custom Elements\n\n[![CodeQL](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/codeql-analysis.yml/badge.svg?branch=main\u0026event=push)](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/codeql-analysis.yml)\n[![npm](https://img.shields.io/npm/v/@johnsonandjohnson/mettle-components?color=41%20170%2070\u0026label=NPM%20Package\u0026logo=npm)](https://www.npmjs.com/package/@johnsonandjohnson/mettle-components)\n[![Unit Test](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/unit-test.yml/badge.svg?branch=main\u0026event=push)](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/unit-test.yml)\n[![codecov](https://codecov.io/gh/johnsonandjohnson/mettle-components/branch/main/graph/badge.svg?token=UTNVOBVM4G)](https://codecov.io/gh/johnsonandjohnson/mettle-components)\n\nA Suite of custom elements and services to be used on a front-end JavaScript application.\n\nThese are built under the [Web Components](https://developer.mozilla.org/en-US/docs/Web/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.\n\n\u003e [Mettle Components Documentation](https://johnsonandjohnson.github.io/mettle-components/?path=/docs/welcome-introduction--page)\n\n### Goals\n\n- [x] Use native JS for little to no dependency\n- [x] Cross browser support\n- [x] Flexible for CSS\n- [x] Unit tested\n\n## Project Installation\n\n```sh\n$ npm install @johnsonandjohnson/mettle-components --save\n```\n\nTo include the components to your code\n\n```js\nimport '@johnsonandjohnson/mettle-components'\n```\n\n### Quick Sample\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMettle Component Example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cspan id=\"id-44629472-5691-4c53-b7f0-c5488854761b\"\u003e\n      Hover or tap me for tip\n    \u003c/span\u003e\n    \u003cmettle-tool-tip\n      data-for=\"id-44629472-5691-4c53-b7f0-c5488854761b\"\u003e\n        \u003cp\u003eSlot HTML/Text\u003c/p\u003e\n    \u003c/mettle-tool-tip\u003e\n    \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/index.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nTo include services to your code\n\n```js\nimport { \n  HtmlMarker,\n  HttpFetch,\n  I18n,\n  Observable,\n  Roles,\n  Router\n} from '@johnsonandjohnson/mettle-components/services'\n```\n\n### Quick Sample\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMettle Services Example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"render\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/services.js'\n\n      (async () =\u003e {\n        const htmlMarker = new HtmlMarker()\n        const htmlString = '\u003cbutton disabled=\"${disabled}\"\u003eRandom Disabled\u003c/button\u003e'\n        const div = document.querySelector('#render')\n\n        let model = {\n          disabled: 'disabled'\n        }\n        await htmlMarker.render(div, htmlString, model)\n\n        window.setInterval(() =\u003e {\n          model.disabled = (Math.random() \u003e= 0.5) ? 'disabled' : ''\n          htmlMarker.updateModel(model)\n        }, 1000)\n      })()\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## Changelog\n\n[Review our latest changes and updates](CHANGELOG.md)\n\n## Contributing\n\n[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)\n\n\nContributions are welcomed!  \n\n- Please read our [Contribution guidelines](CONTRIBUTING.md) to learn more about the process.\n- Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnsonandjohnson%2Fmettle-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnsonandjohnson%2Fmettle-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnsonandjohnson%2Fmettle-components/lists"}