⚠️ 📖 DRAFT: <tag-complete>

examples/email-recipients/index.html

@@ -0,0 +1,91 @@
+<title>&lt;email&gt;</title>
+
+<link rel=stylesheet href=style.css>
+
+<email-recipients>
+
+ <template name=recipients>
+ <address>
+ <button id={#}
+ onclick=onremove
+ title='Remove <{self}> from recipients'>x</button>
+
+ <label>
+ <!-- `recipients` values when used within `<form>` -->
+ <input name=recipients[] type=checkbox value={self} checked>
+ {self}
+ </label>
+ </address>
+ </template>
+
+ <input
+ type=search
+ name=address
+ list=contacts
+ onchange=addrecipient
+ [email protected]>
+
+ <datalist id=contacts>
+ <template name=contacts>
+ <option value={email}>{name} &lt;{email}&gt;
+ </template>
+ </datalist>
+
+</email-recipients>
+
+<footer>
+<header>Comparable Examples</header>
+
+<ul>
+ <li>
+ <a href=https://github.com/ericgio/react-bootstrap-typeahead>React Typeahead</a>
+</footer>
+
+<script src=/snuggsi.es></script>
+<script defer>
+
+Element `email-recipients`
+
+(class extends HTMLElement {
+
+ initialize () {
+ this.context.recipients =
+ ['[email protected]', '[email protected]']
+
+ this.context.contacts = [
+ { name: 'Tim', email: '[email protected]' },
+ { name: 'Rob Cole', email: '[email protected]' }
+ ]
+ }
+
+ // use Array.prototype.splice
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+ onremove (event, id = event.target.id) {
+ this.context.recipients
+ .splice (id, 1)
+
+ this.select
+ `input[name=address]`.focus ()
+ }
+
+ addrecipient (event, input = event.target) {
+ this.context.recipients
+ .push (input.value)
+
+ input.value = ''
+ }
+
+ get recipients ()
+ { return this.context.recipients }
+
+ get contacts ()
+ { return this.context.contacts }
+})
+
+</script>
+
+<script src=/browser-sync.es></script>
+<script
+ name=polyfill
+ src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js>
+</script>

examples/email-recipients/style.css

@@ -0,0 +1,70 @@
+:root {
+ --email-recipients-corner-radius: 1vw;
+}
+
+email-recipients,
+email-recipients
+ > address:hover
+ { border-radius: var(--email-recipients-corner-radius) }
+
+email-recipients {
+ padding: 1em;
+ display: flex;
+ flex-basis: auto;
+ flex-flow: row wrap;
+ box-shadow: 0 0 0.28em rgba(40, 40, 40, 0.8)
+}
+
+email-recipients > * {
+ font-size: 90%;
+ line-height: 1.612em;
+}
+
+email-recipients > address {
+ display: flex;
+ cursor: pointer;
+ margin: 0;
+ font-style: normal;
+ align-items: center;
+ flex-flow: row nowrap;
+ font-family: sans-serif;
+}
+email-recipients > address::after {
+ content: ", ";
+ font-size: 1.6em;
+ font-weight: 300;
+ margin-top: -0.3em;
+ color: rgba(50, 50, 50, 0.7);
+}
+email-recipients > address:hover {
+ background: rgba(220, 220, 220, 0.5)
+}
+email-recipients > address button {
+ opacity: 0;
+ border: none;
+ background: none;
+ margin-right: 0.12em;
+ padding: 0 0.12em 0 0.2em;
+ border-right: 1px solid red;
+}
+
+email-recipients > address:hover button {
+ opacity: 0.5;
+ font-size: 80%;
+ cursor: pointer;
+ color: rgba(230, 0, 0, 0.9)
+}
+email-recipients > address button:hover {
+ opacity: 1.0
+}
+
+email-recipients input[name='recipients[]'] {
+ display: none;
+}
+email-recipients input[name=address] {
+ flex: 0;
+ border: none;
+ outline: none;
+ line-height: 1em;
+ margin-left: 0.7em;
+}