contacts-pane 2.4.8 → 2.4.12-beta4

package/mintNewAddressBook.js

@@ -1,5 +1,7 @@
-const UI = require('solid-ui')
+import * as UI from 'solid-ui'
+import { solidLogicSingleton } from 'solid-logic'
 
+const { setACLUserPublic } = solidLogicSingleton.acl
 // const mime = require('mime-types')
 // const toolsPane0 = require('./toolsPane')
 // const toolsPane = toolsPane0.toolsPane
@@ -12,7 +14,7 @@ const $rdf = UI.rdf
 
 export function mintNewAddressBook (dataBrowserContext, context) {
   return new Promise(function (resolve, reject) {
-    UI.authn.logInLoadProfile(context).then(
+    UI.login.ensureLoadedProfile(context).then(
       context => {
         // 20180713
         console.log('Logged in as ' + context.me)
@@ -120,8 +122,7 @@ export function mintNewAddressBook (dataBrowserContext, context) {
               return reject(new Error('Error writing new file ' + task.to))
             }
 
-            UI.authn
-              .setACLUserPublic(dest, me, aclOptions)
+            setACLUserPublic(dest, me, aclOptions)
               .then(() => doNextTask())
               .catch(err => {
                 const message =

package/mugshotGallery.js

@@ -1,10 +1,11 @@
 import * as UI from 'solid-ui'
+import { store } from 'solid-logic'
 import * as mime from 'mime-types'
 
 const $rdf = UI.rdf
 const ns = UI.ns
 const utils = UI.utils
-const kb = UI.store
+const kb = store
 
 /*  Mugshot Gallery
 *
@@ -116,7 +117,7 @@ export function renderMugshotGallery (dom, subject) {
   // When a set of URIs are dropped on
   async function handleURIsDroppedOnMugshot (uris) {
     for (const u of uris) {
-      var thing = $rdf.sym(u) // Attachment needs text label to disinguish I think not icon.
+      let thing = $rdf.sym(u) // Attachment needs text label to disinguish I think not icon.
       console.log('Dropped on mugshot thing ' + thing) // icon was: UI.icons.iconBase + 'noun_25830.svg'
       if (u.startsWith('http') && u.indexOf('#') < 0) {
         // Plain document
@@ -125,8 +126,9 @@ export function renderMugshotGallery (dom, subject) {
           thing = $rdf.sym('https:' + u.slice(5))
         }
         const options = { withCredentials: false, credentials: 'omit' }
+        let result
         try {
-          var result = await kb.fetcher.webOperation('GET', thing.uri, options)
+          result = await kb.fetcher.webOperation('GET', thing.uri, options)
         } catch (err) {
           complain(
             `Gallery: fetch error trying to read picture ${thing} data: ${err}`
@@ -198,8 +200,18 @@ export function renderMugshotGallery (dom, subject) {
       droppedFileHandler
     )
     if (image) {
-      img.setAttribute('src', image.uri)
+      // img.setAttribute('src', image.uri) use token and works with NSS but not with CSS
+      // we need to get image with authenticated fetch
+      store.fetcher._fetch(image.uri)
+        .then(function(response) {
+          return response.blob()
+        })
+        .then(function(myBlob) {
+          const objectURL = URL.createObjectURL(myBlob)
+          img.setAttribute('src', objectURL)
+        })
       UI.widgets.makeDraggable(img, image)
+
     }
     return img
   }

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "contacts-pane",
-  "version": "2.4.8",
+  "version": "2.4.12-beta4",
   "description": "Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.",
   "main": "./contactsPane.js",
   "scripts": {
-    "build": "npm run build-lib",
-    "build-lib": "npx eslint *.js && make",
+    "build": "npm run clean && npm run build-lib",
+    "clean": "rm -rf lib",
+    "build-lib": "mkdir lib && make && npx tsc-transpile-only src/*.ts --outDir lib",
     "lint": "eslint '*.js'",
     "lint-fix": "eslint '*.js' --fix",
-    "test": "npm run lint",
-    "prepublishOnly": "npm test",
-    "postpublish": "git push origin master --follow-tags"
+    "test": "npm run lint && npm run build && npx tsc --target es2015  --moduleResolution node  --allowSyntheticDefaultImports __tests__/unit/*.ts && jest __tests__/unit/*test.ts",
+    "jest": "jest __tests__/unit/*test.ts",
+    "prepublishOnly": "npm run lint && npm run build && npm run jest",
+    "postpublish": "git push origin main --follow-tags"
   },
   "repository": {
     "type": "git",
@@ -36,15 +38,26 @@
   },
   "homepage": "https://github.com/solid/contacts-pane",
   "dependencies": {
-    "pane-registry": "^2.3.5",
-    "rdflib": "^2.2.2",
-    "solid-ui": "^2.4.2"
+    "solid-ui": "^2.4.33-beta4"
   },
   "devDependencies": {
-    "eslint": "^7.18.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
-    "standard": "^16.0.3"
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-typescript": "^7.24.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@types/jest": "^29.5.12",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
+    "lint-staged": "^13.3.0",
+    "typescript": "^5.4.3",
+    "typescript-transpile-only": "0.0.4"
   },
   "husky": {
     "hooks": {

package/src/autocompleteBar.ts

@@ -0,0 +1,92 @@
+// The Control with decorations
+
+import { NamedNode } from 'rdflib'
+import { store } from 'solid-logic'
+import { ns, widgets, icons } from 'solid-ui'
+import { renderAutoComplete } from './autocompletePicker' // dbpediaParameters
+import { wikidataParameters } from './publicData'
+
+
+const WEBID_NOUN = 'Solid ID'
+
+const kb = store
+
+const AUTOCOMPLETE_THRESHOLD = 4 // don't check until this many characters typed
+const AUTOCOMPLETE_ROWS = 12 // 20?
+
+const GREEN_PLUS = icons.iconBase + 'noun_34653_green.svg'
+const SEARCH_ICON = icons.iconBase + 'noun_Search_875351.svg'
+
+export async function renderAutocompleteControl (dom:HTMLDocument,
+   person:NamedNode, options, addOneIdAndRefresh): Promise<HTMLElement> {
+
+  async function autoCompleteDone (object, _name) {
+    const webid = object.uri
+    removeDecorated()
+    return addOneIdAndRefresh(person, webid)
+  }
+
+  async function greenButtonHandler (_event) {
+    const webid = await widgets.askName(dom, store, creationArea, ns.vcard('url'), null, WEBID_NOUN)
+    if (!webid) {
+      return // cancelled by user
+    }
+    return addOneIdAndRefresh(person, webid)
+  }
+  function removeDecorated () {
+    creationArea.removeChild(decoratedAutocomplete)
+    decoratedAutocomplete = null
+  }
+  async function searchButtonHandler (_event) {
+    if (decoratedAutocomplete) {
+      creationArea.removeChild(decoratedAutocomplete)
+      decoratedAutocomplete = null
+    } else {
+      decoratedAutocomplete = dom.createElement('div')
+      decoratedAutocomplete.setAttribute('style', 'display: flex; flex-flow: wrap;')
+      decoratedAutocomplete.appendChild(await renderAutoComplete(dom, acOptions, autoCompleteDone))
+      decoratedAutocomplete.appendChild(acceptButton)
+      decoratedAutocomplete.appendChild(cancelButton)
+      creationArea.appendChild(decoratedAutocomplete)
+    }
+  }
+
+  async function droppedURIHandler (uris) {
+    for (const webid of uris) { // normally one but can be more than one
+      await addOneIdAndRefresh(person, webid)
+    }
+  }
+
+  const queryParams = options.queryParameters || wikidataParameters
+  const acceptButton = widgets.continueButton(dom)
+  const cancelButton = widgets.cancelButton(dom, removeDecorated)
+  const klass = options.class
+  const acOptions = {
+    queryParams,
+    class:klass,
+    acceptButton,
+    cancelButton
+  }
+
+  var decoratedAutocomplete = null
+  // const { dom } = dataBrowserContext
+  options = options || {}
+  options.editable = kb.updater.editable(person.doc().uri, kb)
+
+  const creationArea = dom.createElement('div')
+  creationArea.setAttribute('style', 'display: flex; flex-flow: wrap;')
+
+  if (options.editable) {
+
+    // creationArea.appendChild(await renderAutoComplete(dom, options, autoCompleteDone)) wait for searchButton
+    creationArea.style.width = '100%'
+    const plus = creationArea.appendChild(widgets.button(dom, GREEN_PLUS, options.idNoun, greenButtonHandler))
+    widgets.makeDropTarget(plus, droppedURIHandler, null)
+    if (options.dbLookup) {
+      creationArea.appendChild(widgets.button(dom, SEARCH_ICON, options.idNoun, searchButtonHandler))
+    }
+  }
+  return creationArea
+} // renderAutocompleteControl
+
+// ends

package/src/autocompleteField.ts

@@ -0,0 +1,180 @@
+/* Form field for doing autocompleete
+ */
+import { BlankNode, NamedNode, st, Variable } from 'rdflib'
+import { store } from 'solid-logic'
+import { ns, style, widgets } from 'solid-ui'
+import { renderAutoComplete } from './autocompletePicker' // dbpediaParameters
+
+const AUTOCOMPLETE_THRESHOLD = 4 // don't check until this many characters typed
+const AUTOCOMPLETE_ROWS = 12 // 20?
+
+/**
+ * Render a autocomplete form field
+ *
+ * The same function is used for many similar one-value fields, with different
+ * regexps used to validate.
+ *
+ * @param dom The HTML Document object aka Document Object Model
+ * @param container  If present, the created widget will be appended to this
+ * @param already A hash table of (form, subject) kept to prevent recursive forms looping
+ * @param subject The thing about which the form displays/edits data
+ * @param form The form or field to be rendered
+ * @param doc The web document in which the data is
+ * @param callbackFunction Called when data is changed?
+ *
+ * @returns The HTML widget created
+ */
+// eslint-disable-next-line complexity
+export function autocompleteField ( // @@ are they allowed too be async??
+  dom: HTMLDocument,
+  container: HTMLElement | undefined,
+  already,
+  subject: NamedNode | BlankNode | Variable,
+  form: NamedNode,
+  doc: NamedNode | undefined,
+  callbackFunction: (ok: boolean, errorMessage: string) => void
+): HTMLElement {
+
+  async function addOneIdAndRefresh (result, _name) {
+    const ds = kb.statementsMatching(subject, property as any) // remove any multiple values
+
+    let is = ds.map(statement => st(statement.subject, statement.predicate, result, statement.why)) // can include >1 doc
+    if (is.length === 0) {
+      // or none
+      is = [st(subject, property as any, result, doc)]
+    }
+    try {
+      await kb.updater.updateMany(ds, is)
+    } catch (err) {
+      callbackFunction(false, err)
+      box.appendChild(widgets.errorMessageBlock(dom, 'Autocomplete form data write error:' + err))
+      return
+    }
+    callbackFunction(true, '')
+  }
+
+  const kb = store
+  const formDoc = form.doc ? form.doc() : null // @@ if blank no way to know
+
+  const box = dom.createElement('tr')
+  if (container) container.appendChild(box)
+  const lhs = dom.createElement('td')
+  lhs.setAttribute('class', 'formFieldName')
+  lhs.setAttribute('style', '  vertical-align: middle;')
+  box.appendChild(lhs)
+  const rhs = dom.createElement('td')
+  rhs.setAttribute('class', 'formFieldValue')
+  box.appendChild(rhs)
+
+  const property = kb.any(form, ns.ui('property'))
+  if (!property) {
+    box.appendChild(
+      dom.createTextNode('Error: No property given for autocomplete field: ' + form)
+    )
+    return box
+  }
+  const searchClass = kb.any(form, ns.ui('searchClass'))
+  if (!searchClass) {
+    box.appendChild(
+      dom.createTextNode('Error: No searchClass given for autocomplete field: ' + form)
+    )
+    return box
+  }
+  const endPoint = kb.any(form, ns.ui('endPoint'))
+  if (!endPoint) {
+    box.appendChild(
+      dom.createTextNode('Error: No SPARQL endPoint given for autocomplete field: ' + form)
+    )
+    return box
+  }
+  const queryTemplate = kb.any(form, ns.ui('queryTemplate'))
+  if (!queryTemplate) {
+    box.appendChild(
+      dom.createTextNode('Error: No queryTemplate given for autocomplete field: ' + form)
+    )
+    return box
+  }
+  // It can be cleaner to just remove empty fields if you can't edit them anyway
+  const suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc)
+
+  lhs.appendChild(widgets.fieldLabel(dom, property as any, form))
+  const uri = widgets.mostSpecificClassURI(form)
+  let params = widgets.fieldParams[uri]
+  if (params === undefined) params = {} // non-bottom field types can do this
+  const theStyle = params.style || style.textInputStyle
+  const klass = kb.the(form, ns.ui('category'), null, formDoc)
+  /*
+  { label: string;
+    logo: string;
+    searchByNameQuery?: string;
+    searchByNameURI?: string;
+    insitituteDetailsQuery?: string;
+    endPoint?: string;
+    class: object
+  }
+*/
+
+  queryParams.endPoint = endPoint.uri
+
+  const searchByNameQuery = kb.the(form, ns.ui('searchByNameQuery'), null, formDoc)
+  queryParams.searchByNameQuery = searchByNameQuery
+
+  var queryParams = {label: 'from form', logo: '', class: klass, endPoint, searchByNameQuery}
+
+  const options = { // cancelButton?: HTMLElement,
+                               // acceptButton?: HTMLElement,
+                               class: klass,
+                               queryParams }
+
+  // const acWiget = rhs.appendChild(await renderAutoComplete(dom, options, addOneIdAndRefresh))
+
+  // @@ set existing value is any
+  renderAutoComplete(dom, options, addOneIdAndRefresh).then(acWiget => rhs.appendChild(acWiget))
+
+
+  const field = dom.createElement('input')
+  ;(field as any).style = style.textInputStyle // Do we have to override length etc?
+  rhs.appendChild(field)
+  field.setAttribute('type', params.type ? params.type : 'text')
+
+  const size = kb.any(form, ns.ui('size')) // Form has precedence
+  field.setAttribute(
+    'size',
+    size ? '' + size : params.size ? '' + params.size : '20'
+  )
+  const maxLength = kb.any(form, ns.ui('maxLength'))
+  field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096')
+
+  doc = doc || widgets.fieldStore(subject, property as any, doc)
+
+  let obj = kb.any(subject, property as any, undefined, doc)
+  if (!obj) {
+    obj = kb.any(form, ns.ui('default'))
+  }
+  if (obj) {
+    /* istanbul ignore next */
+    field.value = obj.value || obj.value || ''
+  }
+  field.setAttribute('style', style)
+  if (!kb.updater) {
+    throw new Error('kb has no updater')
+  }
+  if (!kb.updater.editable((doc as NamedNode).uri)) {
+    field.readOnly = true // was: disabled. readOnly is better
+    ;(field as any).style = style.textInputStyleUneditable
+    // backgroundColor = textInputBackgroundColorUneditable
+    if (suppressEmptyUneditable && field.value === '') {
+      box.style.display = 'none' // clutter
+    }
+    return box
+  }
+  return box
+}
+
+
+
+
+
+
+
+// ends

package/src/autocompletePicker.ts

@@ -0,0 +1,253 @@
+/* Create and edit data using public data
+**
+** organization conveys many distinct types of thing.
+**
+*/
+import { NamedNode } from 'rdflib'
+import { store } from 'solid-logic'
+import { style, widgets } from 'solid-ui'
+import {
+  AUTOCOMPLETE_LIMIT, filterByLanguage, getPreferredLanguages, QueryParameters, queryPublicDataByName
+} from './publicData'
+
+const AUTOCOMPLETE_THRESHOLD = 4 // don't check until this many characters typed
+const AUTOCOMPLETE_ROWS = 20 // 20?
+const AUTOCOMPLETE_ROWS_STRETCH = 40
+const AUTOCOMPLETE_DEBOUNCE_MS = 300
+
+const autocompleteRowStyle = 'border: 0.2em solid straw;' // @@ white
+
+/*
+Autocomplete happens in four phases:
+  1. The search string is too small to bother
+  2. The search string is big enough, and we have not loaded the array
+  3. The search string is big enough, and we have loaded array up to the limit
+       Display them and wait for more user input
+  4. The search string is big enough, and we have loaded array NOT to the limit
+     but including all matches.   No more fetches.
+     If user gets more precise, wait for them to select one - or reduce to a single
+  5. Optionally waiting for accept button to be pressed
+*/
+
+type AutocompleteOptions = { cancelButton?: HTMLElement,
+                             acceptButton?: HTMLElement,
+                             class: NamedNode,
+                             queryParams: QueryParameters  }
+
+interface Callback1 {
+  (subject: NamedNode, name: string): void;
+}
+
+// The core of the autocomplete UI
+export async function renderAutoComplete (dom: HTMLDocument, options:AutocompleteOptions, // subject:NamedNode, predicate:NamedNode,
+  callback: Callback1) {
+  function complain (message) {
+    const errorRow = table.appendChild(dom.createElement('tr'))
+    console.log(message)
+    errorRow.appendChild(widgets.errorMessageBlock(dom, message, 'pink'))
+    style.setStyle(errorRow, 'autocompleteRowStyle')
+    errorRow.style.padding = '1em'
+  }
+  function remove (ele?: HTMLElement) {
+    if (ele) {
+      ele.parentNode.removeChild(ele)
+    }
+  }
+  function finish (object, name) {
+    console.log('Auto complete: finish! '  + object)
+     // remove(options.cancelButton)
+    // remove(options.acceptButton)
+    // remove(div)
+    callback(object, name)
+  }
+  async function gotIt(object:NamedNode, name:string) {
+    if (options.acceptButton) {
+       (options.acceptButton as any).disabled = false
+       searchInput.value = name // complete it
+       foundName = name
+       foundObject = object
+       console.log('Auto complete: name: '  + name)
+       console.log('Auto complete: waiting for accept '  + object)
+       return
+    }
+    finish(object, name)
+  }
+
+  async function acceptButtonHandler (_event) {
+    if (searchInput.value === foundName) { // still
+      finish(foundObject, foundName)
+    } else {
+      (options.acceptButton as any).disabled = true
+    }
+  }
+
+  async function cancelButtonHandler (_event) {
+    console.log('Auto complete: Canceled by user! ')
+    div.innerHTML = '' // Clear out the table
+  }
+
+  function nameMatch (filter:string, candidate: string):boolean {
+    const parts = filter.split(' ') // Each name part must be somewhere
+    for (let j = 0; j < parts.length; j++) {
+      const word = parts[j]
+      if (candidate.toLowerCase().indexOf(word) < 0) return false
+    }
+    return true
+  }
+
+  function cancelText (_event) {
+     searchInput.value = '';
+     if (options.acceptButton) {
+       (options.acceptButton as any).disabled == true; // start again
+     }
+     candidatesLoaded = false
+  }
+
+  function thinOut (filter) {
+    var hits = 0
+    var pick = null, pickedName = ''
+    for (let j = table.children.length - 1; j > 0; j--) { // backwards as we are removing rows
+      let row = table.children[j]
+      if (nameMatch(filter, row.textContent)) {
+        hits += 1
+        pick = row.getAttribute('subject')
+        pickedName = row.textContent
+        ;(row as any).style.display = ''
+        ;(row as any).style.color = 'blue' // @@ chose color
+      } else {
+        ;(row as any).style.display = 'none'
+      }
+    }
+    if (hits == 1) { // Maybe require green confirmation button be clicked?
+      console.log(`  auto complete elimination:  "${filter}" -> "${pickedName}"`)
+      gotIt(store.sym(pick), pickedName) // uri, name
+    }
+  }
+
+  function clearList () {
+    while (table.children.length > 1) {
+      table.removeChild(table.lastChild)
+    }
+  }
+
+  async function inputEventHHandler(_event) {
+    if (runningTimeout) {
+      clearTimeout(runningTimeout)
+    }
+    setTimeout(refreshList, AUTOCOMPLETE_DEBOUNCE_MS)
+  }
+
+  async function refreshList() {
+    if (inputEventHandlerLock) {
+      console.log (`Ignoring "${searchInput.value}" because of lock `)
+      return
+    }
+    inputEventHandlerLock = true
+    var languagePrefs = await getPreferredLanguages()
+    const filter = searchInput.value.trim().toLowerCase()
+    if (filter.length < AUTOCOMPLETE_THRESHOLD) { // too small
+      clearList()
+      candidatesLoaded = false
+      numberOfRows = AUTOCOMPLETE_ROWS
+    } else {
+      if (allDisplayed && lastFilter && filter.startsWith(lastFilter)) {
+          thinOut(filter) // reversible?
+          inputEventHandlerLock = false
+          return
+      }
+      var bindings
+      try {
+        bindings = await queryPublicDataByName(filter, OrgClass, options.queryParams)
+        // bindings = await queryDbpedia(sparql)
+      } catch (err) {
+        complain('Error querying db of organizations: ' + err)
+        inputEventHandlerLock = false
+        return
+      }
+      candidatesLoaded = true
+      const loadedEnough = bindings.length < AUTOCOMPLETE_LIMIT
+      if (loadedEnough) {
+        lastFilter = filter
+      } else {
+        lastFilter = null
+      }
+      clearList()
+      const slimmed = filterByLanguage(bindings, languagePrefs)
+      if (loadedEnough && slimmed.length <= AUTOCOMPLETE_ROWS_STRETCH) {
+        numberOfRows = slimmed.length // stretch if it means we get all items
+      }
+      allDisplayed = loadedEnough && slimmed.length <= numberOfRows
+      console.log(` Filter:"${filter}" bindings: ${bindings.length}, slimmed to ${slimmed.length}; rows: ${numberOfRows}, Enough? ${loadedEnough}, All displayed? ${allDisplayed}`)
+      slimmed.slice(0,numberOfRows).forEach(binding => {
+        const row = table.appendChild(dom.createElement('tr'))
+        style.setStyle(row, 'autocompleteRowStyle')
+        var uri = binding.subject.value
+        var name = binding.name.value
+        row.setAttribute('style', 'padding: 0.3em;')
+        row.setAttribute('subject', uri)
+        row.style.color = allDisplayed ? '#080' : '#000' // green means 'you should find it here'
+        row.textContent = name
+        row.addEventListener('click', async _event => {
+          console.log('       click row textContent: ' + row.textContent)
+          console.log('       click name: ' + name)
+          gotIt(store.sym(uri), name)
+        })
+      })
+    }
+    inputEventHandlerLock = false
+  } // refreshList
+
+
+/* sparqlForSearch
+*
+* name -- e.g., "mass"
+* theType -- e.g., <http://umbel.org/umbel/rc/EducationalOrganization>
+*/
+  function sparqlForSearch (name:string, theType:NamedNode):string {
+    let clean = name.replace(/\W/g, '') // Remove non alphanum so as to protect regexp
+    const sparql = `select distinct ?subject, ?name where {
+      ?subject a <${theType.uri}>; rdfs:label ?name
+      FILTER regex(?name, "${clean}", "i")
+    } LIMIT ${AUTOCOMPLETE_LIMIT}`
+    return sparql
+  }
+
+  const queryParams: QueryParameters = options.queryParams
+  const OrgClass = options.class // kb.sym('http://umbel.org/umbel/rc/EducationalOrganization') // @@@ other
+  if (options.acceptButton) {
+    options.acceptButton.addEventListener('click', acceptButtonHandler, false)
+  }
+  if (options.cancelButton) {
+    // options.cancelButton.addEventListener('click', cancelButtonHandler, false)
+  }
+
+  let candidatesLoaded = false
+  let runningTimeout = null
+  let inputEventHandlerLock = false
+  let allDisplayed = false
+  var lastFilter = null
+  var numberOfRows = AUTOCOMPLETE_ROWS
+  var div = dom.createElement('div')
+  var foundName = null // once found accepted string must match this
+  var foundObject = null
+  var table = div.appendChild(dom.createElement('table'))
+  table.setAttribute('style', 'max-width: 30em; margin: 0.5em;')
+  const head = table.appendChild(dom.createElement('tr'))
+  style.setStyle(head, 'autocompleteRowStyle')
+  const cell = head.appendChild(dom.createElement('td'))
+  const searchInput = cell.appendChild(dom.createElement('input'))
+  searchInput.setAttribute('type', 'text')
+  const searchInputStyle = style.searchInputStyle ||
+    'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em' // @
+  searchInput.setAttribute('style', searchInputStyle)
+  searchInput.addEventListener('keyup', function (event) {
+    if (event.keyCode === 13) {
+      acceptButtonHandler(event)
+    }
+  }, false);
+
+  searchInput.addEventListener('input', inputEventHHandler)
+  return div
+} // renderAutoComplete
+
+const ends = 'ENDS';

package/src/forms.ttl

@@ -166,7 +166,7 @@ vcard:Individual
 
 :oneAddress
     a ui:Group ;
-    ui:parts ( :id1409437207443 :id1409437292400 :id1409437421996 :id1409437467649 :id1409437569420 :id1409437646712 ).
+    ui:parts ( :id1409437207443 :id1409437292400 :id1409437421996 :id1409437467649 :id1409437569420 ). # :id1409437646712
 
 :id1409437207443
     a ui:SingleLineTextField ;