{"id":28443508,"url":"https://github.com/substrate-system/email","last_synced_at":"2025-06-29T12:31:41.700Z","repository":{"id":294337905,"uuid":"984421901","full_name":"substrate-system/email","owner":"substrate-system","description":"Email input web component","archived":false,"fork":false,"pushed_at":"2025-06-14T00:21:53.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T01:26:20.422Z","etag":null,"topics":["email","input","web-component"],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/email/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-15T22:56:22.000Z","updated_at":"2025-06-14T00:21:58.000Z","dependencies_parsed_at":"2025-06-14T01:33:32.870Z","dependency_job_id":null,"html_url":"https://github.com/substrate-system/email","commit_stats":null,"previous_names":["substrate-system/email"],"tags_count":8,"template":false,"template_full_name":"substrate-system/template-web-component","purl":"pkg:github/substrate-system/email","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Femail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Femail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Femail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Femail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/email/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Femail/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262593618,"owners_count":23334027,"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":["email","input","web-component"],"created_at":"2025-06-06T08:07:18.669Z","updated_at":"2025-06-29T12:31:41.688Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# email\n[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/email/nodejs.yml?style=flat-square)](https://github.com/substrate-system/email/actions/workflows/nodejs.yml)\n[![types](https://img.shields.io/npm/types/@substrate-system/email?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/email?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/email)\n[![GZip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/email?style=flat-square\u0026color=green)](https://bundlephobia.com/package/@substrate-system/email)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)\n[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)\n\n\nWeb component for email inputs.\n\n**_featuring:_**\n\n* robust client-side validation -- check that email is of the form `abc@domain.tld`\n* good UX for validation\n  - errors are only shown if the input has been focused\n  - errors are not shown until the input blurs\n* add a class to the element when it is not valid\n* emit `valid` and `invalid` events when validity changes\n\n\n[See a live demo](https://substrate-system.github.io/email/)\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Modules](#modules)\n  * [ESM](#esm)\n  * [Common JS](#common-js)\n- [Example](#example)\n- [CSS](#css)\n  * [Bundler](#bundler)\n  * [CSS imports](#css-imports)\n  * [Customize CSS via some variables](#customize-css-via-some-variables)\n- [Use](#use)\n  * [HTML](#html)\n  * [pre-built](#pre-built)\n\n\u003c!-- tocstop --\u003e\n\n## Install\n\n```sh\nnpm i -S @substrate-system/email\n```\n\n## Modules\n\nThis exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).\n\n### ESM\n```js\nimport { email } from '@substrate-system/email'\n```\n\n### Common JS\n```js\nconst { email } = require('@substrate-system/email')\n```\n\n## Example\n\nSee [./example](./example/), and [the demo page](https://substrate-system.github.io/email/).\n\n```js\nimport { SubstrateEmail } from '@substrate-system/email'\nimport { SubstrateButton } from '@substrate-system/button'\nSubstrateEmail.define()\nSubstrateButton.define()\nconst qs = document.querySelector\n\nconst input = qs('form substrate-email')\ninput?.addEventListener('valid', ev =\u003e {\n    console.log('We are valid!', ev)\n    qs('substrate-button')!.disabled = false\n})\n\ninput?.addEventListener('invalid', ev =\u003e {\n    console.log('no longer valid....', ev)\n    qs('substrate-button')!.disabled = true\n})\n```\n\n## CSS\n\n### Bundler\n\nThe `package.json` exposes css, suitable for `vite` or `esbuild`:\n\n```js\nimport '@substrate-system/email/css'\n```\n\nOr minified:\n```js\nimport '@substrate-system/email/css/min'\n```\n\n### CSS imports\n\nIf using a CSS processor, you can import from the CSS files:\n```css\n@import url(\"../node_modules/@substrate-system/email/dist/index.min.css\");\n```\n\n### Customize CSS via some variables\n\n```css\nsubstrate-email {\n    --bgc: #fafafa;\n    --color: black;\n    --focus: #005fcc;\n    --error-color: red;\n}\n```\n\n------------------------------------------------------------------------\n\n## Use\nYou can set a name for this custom element with the static method\n`define`. To use the default name, `substrate-email`, just import and\ncall `.define()`.\n\n\u003e [!CAUTION]  \n\u003e If you change the name of the web component, it will break the CSS.\n\n\n```js\nimport { SubstrateEmail } from '@substrate-system/email'\n\n// create a web component named `substrate-email`\nSubstrateEmail.define()\n```\n\nOverride the `tag` property to change the tag name:\n```js\nimport { SubstrateEmail } from '@substrate-system/email'\n\n// set a custom name\nSubstrateEmail.tag = 'cool-input'\n\nSubstrateEmail.define()\n```\n\n### HTML\n```html\n\u003cdiv\u003e\n    \u003csubstrate-email\u003e\u003c/substrate-email\u003e\n\u003c/div\u003e\n```\n\n### pre-built\nThis package exposes minified JS and CSS files too. Copy them to a location that is\naccessible to your web server, then link to them in HTML.\n\n#### copy\n```sh\ncp ./node_modules/@substrate-system/email/dist/index.min.js ./public/substrate-email.min.js\ncp ./node_modules/@substrate-system/email/dist/style.min.css ./public/substrate-email.css\n```\n\n#### HTML\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"./substrate-email.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- ... --\u003e\n    \u003cscript type=\"module\" src=\"./substrate-email.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Femail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Femail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Femail/lists"}