@nyaruka/temba-components 0.22.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/demo/index.html +136 -98
  3. package/dist/e4bb741a.js +356 -0
  4. package/dist/index.js +356 -1
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/anchor/Anchor.js +25 -0
  10. package/out-tsc/src/anchor/Anchor.js.map +1 -0
  11. package/out-tsc/src/checkbox/Checkbox.js +29 -14
  12. package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
  13. package/out-tsc/src/contactsearch/ContactSearch.js +146 -72
  14. package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
  15. package/out-tsc/src/dialog/Dialog.js +12 -3
  16. package/out-tsc/src/dialog/Dialog.js.map +1 -1
  17. package/out-tsc/src/dialog/Modax.js +12 -2
  18. package/out-tsc/src/dialog/Modax.js.map +1 -1
  19. package/out-tsc/src/interfaces.js +1 -0
  20. package/out-tsc/src/interfaces.js.map +1 -1
  21. package/out-tsc/src/list/TembaMenu.js +39 -16
  22. package/out-tsc/src/list/TembaMenu.js.map +1 -1
  23. package/out-tsc/src/omnibox/Omnibox.js +7 -1
  24. package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
  25. package/out-tsc/src/options/Options.js +28 -4
  26. package/out-tsc/src/options/Options.js.map +1 -1
  27. package/out-tsc/src/select/Select.js +90 -41
  28. package/out-tsc/src/select/Select.js.map +1 -1
  29. package/out-tsc/src/textinput/TextInput.js +42 -1
  30. package/out-tsc/src/textinput/TextInput.js.map +1 -1
  31. package/out-tsc/temba-modules.js +2 -0
  32. package/out-tsc/temba-modules.js.map +1 -1
  33. package/out-tsc/test/temba-select.test.js +2 -1
  34. package/out-tsc/test/temba-select.test.js.map +1 -1
  35. package/package.json +1 -1
  36. package/screenshots/truth/checkbox/checked.png +0 -0
  37. package/screenshots/truth/checkbox/default.png +0 -0
  38. package/screenshots/truth/select/expressions.png +0 -0
  39. package/screenshots/truth/select/functions.png +0 -0
  40. package/src/anchor/Anchor.ts +26 -0
  41. package/src/checkbox/Checkbox.ts +31 -16
  42. package/src/contactsearch/ContactSearch.ts +157 -80
  43. package/src/dialog/Dialog.ts +13 -3
  44. package/src/dialog/Modax.ts +9 -2
  45. package/src/interfaces.ts +1 -0
  46. package/src/list/TembaMenu.ts +40 -16
  47. package/src/omnibox/Omnibox.ts +9 -1
  48. package/src/options/Options.ts +32 -8
  49. package/src/select/Select.ts +95 -43
  50. package/src/textinput/TextInput.ts +47 -1
  51. package/static/css/temba-components.css +1 -2
  52. package/temba-modules.ts +2 -0
  53. package/test/temba-select.test.ts +3 -1
  54. package/test-assets/style.css +1 -1
  55. package/dist/0aab9494.js +0 -1
package/out-tsc/test/temba-select.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"temba-select.test.js","sourceRoot":"","sources":["../../test/temba-select.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport { useFakeTimers } from 'sinon';\nimport { Options } from '../src/options/Options';\nimport { Select } from '../src/select/Select';\nimport { assertScreenshot, checkTimers, getClip } from './utils.test';\nimport { range } from '../src/utils';\nimport { Store } from '../src/store/Store';\n\nlet clock: any;\n\nconst colors = [\n { name: 'Red', value: '0' },\n { name: 'Green', value: '1' },\n { name: 'Blue', value: '2' },\n];\n\nexport const createSelect = async (def: string, delay = 0) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute('style', 'width: 250px;');\n\n const select: Select = await fixture(def, { parentNode });\n clock.tick(1);\n await select.updateComplete;\n await waitFor(delay);\n return select;\n};\n\nexport const open = async (select: Select) => {\n await click('temba-select');\n await select.updateComplete;\n\n // Lots of various things introduce ticks here\n // * quiet period for searchable\n // * throttle for cursor movement (init)\n // * throttle for scroll event if needed\n // As such, we aggressively wait for http activity\n // and advance possible ticks before and after to\n // reliably wait until the select is truly open\n\n await clock.tick(150);\n await select.httpComplete;\n await clock.tick(150);\n\n await waitFor(0);\n await clock.tick(150);\n\n checkTimers(clock);\n return select;\n};\n\nexport const clear = (select: Select) => {\n (select.shadowRoot.querySelector('.clear-button') as HTMLDivElement).click();\n};\n\nexport const getOptions = (select: Select): Options => {\n return select.shadowRoot.querySelector('temba-options[visible]');\n};\n\nexport const clickOption = async (select: Select, index: number) => {\n const options = getOptions(select);\n const option = options.shadowRoot.querySelector(\n `[data-option-index=\"${index}\"]`\n ) as HTMLDivElement;\n option.click();\n await clock.tick(50);\n await options.updateComplete;\n await select.updateComplete;\n //checkTimers(clock);\n};\n\nexport const openAndClick = async (select: Select, index: number) => {\n await open(select);\n await clickOption(select, index);\n};\n\nexport const getSelectHTML = (\n options: any[] = colors,\n attrs: any = { placeholder: 'Select a color', name: 'color' }\n): string => {\n const selectHTML = `\n <temba-select ${Object.keys(attrs)\n .map((name: string) => `${name}='${attrs[name]}'`)\n .join(' ')}>\n ${options\n .map(\n option =>\n `<temba-option name=\"${option.name}\" value=\"${option.value}\"></temba-option>`\n )\n .join('')}\n </temba-select>`;\n return selectHTML;\n};\n\nexport const forPages = async (select: Select, pages = 1) => {\n for (const _ in range(0, pages * 3 + 1)) {\n await select.httpComplete;\n await select.updateComplete;\n await waitFor(0);\n }\n};\n\nconst getClipWithOptions = (select: Select) => {\n const selectClip = getClip(select);\n const options = select.shadowRoot.querySelector(\n 'temba-options[visible]'\n ) as Options;\n\n if (options) {\n const optionsClip = getClip(options);\n const y = Math.min(selectClip.y, optionsClip.y);\n const x = Math.min(selectClip.x, optionsClip.x);\n const combinedClip = {\n y,\n x,\n width: Math.max(selectClip.right, optionsClip.right) - x,\n height: Math.max(selectClip.bottom, optionsClip.bottom) - y,\n };\n return combinedClip;\n }\n\n return selectClip;\n};\n\nconst loadStore = async () => {\n const store: Store = await fixture(\n \"<temba-store completion='/test-assets/store/editor.json'></temba-store>\"\n );\n await store.httpComplete;\n return store;\n};\n\ndescribe('temba-select', () => {\n beforeEach(function () {\n clock = useFakeTimers();\n setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n });\n\n afterEach(function () {\n clock.restore();\n });\n\n it('can be created', async () => {\n const select = await createSelect('<temba-select></temba-select>');\n assert.instanceOf(select, Select);\n });\n\n it('can be disabled', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { disabled: true })\n );\n\n expect(select.disabled).to.equal(true);\n await assertScreenshot('select/disabled', getClip(select));\n });\n\n it('can be disabled with selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { disabled: true, value: '0' })\n );\n\n expect(select.disabled).to.equal(true);\n await assertScreenshot('select/disabled-selection', getClip(select));\n });\n\n it('can be disabled with multi selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { placeholder: 'Select a color', multi: true })\n );\n\n await openAndClick(select, 0);\n select.disabled = true;\n expect(select.disabled).to.equal(true);\n\n // make sure we can't select anymore\n await open(select);\n expect(select.isOpen()).to.equal(false);\n await assertScreenshot('select/disabled-multi-selection', getClip(select));\n });\n\n it('can be created with temba-option tags', async () => {\n const select = await createSelect(getSelectHTML());\n assert.equal(select.getStaticOptions().length, 3);\n expect(select.values.length).to.equal(0);\n await assertScreenshot('select/with-placeholder', getClip(select));\n });\n\n it('picks the first option without a placeholder', async () => {\n const select = await createSelect(getSelectHTML(colors, {}));\n assert.equal(select.getStaticOptions().length, 3);\n expect(select.values[0].name).to.equal('Red');\n await assertScreenshot('select/without-placeholder', getClip(select));\n });\n\n it('shows options when opened', async () => {\n const select = await createSelect(getSelectHTML());\n await open(select);\n const options = getOptions(select);\n assert.instanceOf(options, Options);\n\n // our options should be visible\n assert.isTrue(\n options.shadowRoot\n .querySelector('.options-container')\n .classList.contains('show')\n );\n\n await assertScreenshot('select/local-options', getClipWithOptions(select));\n });\n\n it('can be created with attribute options', async () => {\n const options = JSON.stringify([{ name: 'Embedded Option', value: '0' }]);\n const select = await createSelect(getSelectHTML([], { options }));\n // select the first option\n await openAndClick(select, 0);\n expect(select.values[0].name).to.equal('Embedded Option');\n await assertScreenshot('select/embedded', getClipWithOptions(select));\n });\n\n describe('single selection', () => {\n it('can select a single option', async () => {\n const select = await createSelect(getSelectHTML());\n expect(select.values.length).to.equal(0);\n\n // select the first option\n await openAndClick(select, 0);\n\n expect(select.values.length).to.equal(1);\n expect(select.values[0].name).to.equal('Red');\n expect(select.shadowRoot.innerHTML).to.contain('Red');\n\n await assertScreenshot(\n 'select/selected-single',\n getClipWithOptions(select)\n );\n });\n\n it('can search with existing selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the second option\n await openAndClick(select, 1);\n expect(select.values.length).to.equal(1);\n expect(select.values[0].name).to.equal('Green');\n\n // for single selection our current selection should be in the list and focused\n await open(select);\n assert.equal(select.cursorIndex, 1);\n assert.equal(select.visibleOptions.length, 3);\n\n // now lets do a search, we should see our selection (green) and one other (red)\n await typeInto('temba-select', 're', false);\n await open(select);\n assert.equal(select.visibleOptions.length, 2);\n\n await assertScreenshot(\n 'select/search-with-selected',\n getClipWithOptions(select)\n );\n\n // but our cursor should be on the first match\n assert.equal(select.cursorIndex, 0);\n });\n });\n\n describe('multiple selection', () => {\n it('can select multiple options', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { placeholder: 'Select a color', multi: true })\n );\n expect(select.values.length).to.equal(0);\n\n // select the first option twice\n await openAndClick(select, 0);\n await openAndClick(select, 0);\n\n // now we should have red and green selected\n expect(select.values.length).to.equal(2);\n expect(select.shadowRoot.innerHTML).to.contain('Red');\n expect(select.shadowRoot.innerHTML).to.contain('Green');\n\n await assertScreenshot(\n 'select/selected-multi',\n getClipWithOptions(select)\n );\n });\n });\n\n describe('endpoints', () => {\n it('can load from an endpoint', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a color',\n endpoint: '/test-assets/select/colors.json',\n })\n );\n\n await open(select);\n await assertScreenshot(\n 'select/remote-options',\n getClipWithOptions(select)\n );\n assert.equal(select.visibleOptions.length, 3);\n });\n\n it('can search an endpoint', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a color',\n endpoint: '/test-assets/select/colors.json',\n searchable: true,\n })\n );\n\n await typeInto('temba-select', 're', false);\n await open(select);\n await forPages(select, 2);\n assert.equal(select.visibleOptions.length, 2);\n\n await assertScreenshot('select/searching', getClipWithOptions(select));\n });\n\n it('pages through cursor results', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a group',\n endpoint: '/test-assets/select/groups.json',\n valueKey: 'uuid',\n })\n );\n\n await open(select);\n await forPages(select, 3);\n\n // should have all three pages visible right away\n assert.equal(select.visibleOptions.length, 15);\n });\n\n it('shows cached results', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a group',\n endpoint: '/test-assets/select/groups.json',\n valueKey: 'uuid',\n searchable: true,\n })\n );\n\n // wait for updates from fetching three pages\n await open(select);\n await forPages(select, 4);\n\n // quiet for searchable\n await waitFor(200);\n\n assert.equal(select.visibleOptions.length, 15);\n\n // close and reopen\n select.blur();\n await open(select);\n assert.equal(select.visibleOptions.length, 15);\n\n // close and reopen once more (previous bug failed on third opening)\n select.blur();\n await open(select);\n assert.equal(select.visibleOptions.length, 15);\n });\n\n it('can enter expressions', async () => {\n await loadStore();\n const select = await createSelect(\n getSelectHTML([], {\n endpoint: '/colors.json',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', 'Hi there @contact', false);\n await open(select);\n\n await forPages(select, 1);\n await clock.tick(400);\n await select.httpComplete;\n\n assert.equal(select.completionOptions.length, 14);\n await assertScreenshot('select/expressions', getClipWithOptions(select));\n });\n\n it('clears single selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { clearable: true })\n );\n assert.equal(select.getStaticOptions().length, 3);\n\n await openAndClick(select, 0);\n expect(select.values[0].name).to.equal('Red');\n\n await assertScreenshot('select/selection-clearable', getClip(select));\n\n clear(select);\n expect(select.values.length).to.equal(0);\n });\n\n /** */\n\n it('should look the same with search enabled', async () => {\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n })\n );\n await assertScreenshot(\n 'select/search-enabled',\n getClipWithOptions(select)\n );\n });\n\n it('should look the same with search enabled and selection made', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the first option\n await openAndClick(select, 1);\n await assertScreenshot(\n 'select/search-selected',\n getClipWithOptions(select)\n );\n });\n\n it('should show focus for the selected option', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the first option\n await openAndClick(select, 1);\n\n // now open and look at focus\n await open(select);\n await assertScreenshot(\n 'select/search-selected-focus',\n getClipWithOptions(select)\n );\n });\n\n it('should show search with existing multiple selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n multi: true,\n })\n );\n\n // select the first option\n await openAndClick(select, 0);\n await openAndClick(select, 0);\n await open(select);\n\n // now lets do a search, we should see our selection (green) and one other (red)\n await typeInto('temba-select', 're', false);\n await open(select);\n\n // should have two things selected and active query and no matching options\n await assertScreenshot(\n 'select/search-multi-no-matches',\n getClipWithOptions(select)\n );\n });\n\n it('should show functions', async () => {\n await loadStore();\n\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', 'look at @(max(m', false);\n await open(select);\n\n await assertScreenshot('select/functions', getClipWithOptions(select));\n });\n\n it('can select expression completion as value', async () => {\n await loadStore();\n\n const select = await createSelect(\n getSelectHTML(colors, {\n multi: true,\n placeholder: 'Select a color',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', '@con', false);\n await openAndClick(select, 0);\n\n expect(select.values[0].name).to.equal('@contact');\n await assertScreenshot(\n 'select/expression-selected',\n getClipWithOptions(select)\n );\n });\n });\n});\n"]}
1
+ {"version":3,"file":"temba-select.test.js","sourceRoot":"","sources":["../../test/temba-select.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport { useFakeTimers } from 'sinon';\nimport { Options } from '../src/options/Options';\nimport { Select } from '../src/select/Select';\nimport { assertScreenshot, checkTimers, getClip } from './utils.test';\nimport { range } from '../src/utils';\nimport { Store } from '../src/store/Store';\n\nlet clock: any;\n\nconst colors = [\n { name: 'Red', value: '0' },\n { name: 'Green', value: '1' },\n { name: 'Blue', value: '2' },\n];\n\nexport const createSelect = async (def: string, delay = 0) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute('style', 'width: 250px;');\n\n const select: Select = await fixture(def, { parentNode });\n clock.tick(1);\n await select.updateComplete;\n await waitFor(delay);\n return select;\n};\n\nexport const open = async (select: Select) => {\n await click('temba-select');\n await select.updateComplete;\n\n // Lots of various things introduce ticks here\n // * quiet period for searchable\n // * throttle for cursor movement (init)\n // * throttle for scroll event if needed\n // As such, we aggressively wait for http activity\n // and advance possible ticks before and after to\n // reliably wait until the select is truly open\n\n await clock.tick(150);\n await select.httpComplete;\n await clock.tick(150);\n\n await waitFor(0);\n await clock.tick(150);\n\n checkTimers(clock);\n return select;\n};\n\nexport const clear = (select: Select) => {\n (select.shadowRoot.querySelector('.clear-button') as HTMLDivElement).click();\n};\n\nexport const getOptions = (select: Select): Options => {\n return select.shadowRoot.querySelector('temba-options[visible]');\n};\n\nexport const clickOption = async (select: Select, index: number) => {\n const options = getOptions(select);\n const option = options.shadowRoot.querySelector(\n `[data-option-index=\"${index}\"]`\n ) as HTMLDivElement;\n option.click();\n await clock.tick(250);\n await options.updateComplete;\n await select.updateComplete;\n //checkTimers(clock);\n};\n\nexport const openAndClick = async (select: Select, index: number) => {\n await open(select);\n await clickOption(select, index);\n};\n\nexport const getSelectHTML = (\n options: any[] = colors,\n attrs: any = { placeholder: 'Select a color', name: 'color' }\n): string => {\n const selectHTML = `\n <temba-select ${Object.keys(attrs)\n .map((name: string) => `${name}='${attrs[name]}'`)\n .join(' ')}>\n ${options\n .map(\n option =>\n `<temba-option name=\"${option.name}\" value=\"${option.value}\"></temba-option>`\n )\n .join('')}\n </temba-select>`;\n return selectHTML;\n};\n\nexport const forPages = async (select: Select, pages = 1) => {\n for (const _ in range(0, pages * 3 + 1)) {\n await select.httpComplete;\n await select.updateComplete;\n await waitFor(0);\n }\n};\n\nconst getClipWithOptions = (select: Select) => {\n const selectClip = getClip(select);\n const options = select.shadowRoot.querySelector(\n 'temba-options[visible]'\n ) as Options;\n\n if (options) {\n const optionsClip = getClip(options);\n const y = Math.min(selectClip.y, optionsClip.y);\n const x = Math.min(selectClip.x, optionsClip.x);\n const combinedClip = {\n y,\n x,\n width: Math.max(selectClip.right, optionsClip.right) - x,\n height: Math.max(selectClip.bottom, optionsClip.bottom) - y,\n };\n return combinedClip;\n }\n\n return selectClip;\n};\n\nconst loadStore = async () => {\n const store: Store = await fixture(\n \"<temba-store completion='/test-assets/store/editor.json'></temba-store>\"\n );\n await store.httpComplete;\n return store;\n};\n\ndescribe('temba-select', () => {\n beforeEach(function () {\n clock = useFakeTimers();\n setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n });\n\n afterEach(function () {\n clock.restore();\n });\n\n it('can be created', async () => {\n const select = await createSelect('<temba-select></temba-select>');\n assert.instanceOf(select, Select);\n });\n\n it('can be disabled', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { disabled: true })\n );\n\n expect(select.disabled).to.equal(true);\n await assertScreenshot('select/disabled', getClip(select));\n });\n\n it('can be disabled with selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { disabled: true, value: '0' })\n );\n\n expect(select.disabled).to.equal(true);\n await assertScreenshot('select/disabled-selection', getClip(select));\n });\n\n it('can be disabled with multi selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { placeholder: 'Select a color', multi: true })\n );\n\n await openAndClick(select, 0);\n select.disabled = true;\n expect(select.disabled).to.equal(true);\n\n // make sure we can't select anymore\n await open(select);\n expect(select.isOpen()).to.equal(false);\n await assertScreenshot('select/disabled-multi-selection', getClip(select));\n });\n\n it('can be created with temba-option tags', async () => {\n const select = await createSelect(getSelectHTML());\n assert.equal(select.getStaticOptions().length, 3);\n expect(select.values.length).to.equal(0);\n await assertScreenshot('select/with-placeholder', getClip(select));\n });\n\n it('picks the first option without a placeholder', async () => {\n const select = await createSelect(getSelectHTML(colors, {}));\n assert.equal(select.getStaticOptions().length, 3);\n expect(select.values[0].name).to.equal('Red');\n await assertScreenshot('select/without-placeholder', getClip(select));\n });\n\n it('shows options when opened', async () => {\n const select = await createSelect(getSelectHTML());\n await open(select);\n const options = getOptions(select);\n assert.instanceOf(options, Options);\n\n // our options should be visible\n assert.isTrue(\n options.shadowRoot\n .querySelector('.options-container')\n .classList.contains('show')\n );\n\n await assertScreenshot('select/local-options', getClipWithOptions(select));\n });\n\n it('can be created with attribute options', async () => {\n const options = JSON.stringify([{ name: 'Embedded Option', value: '0' }]);\n const select = await createSelect(getSelectHTML([], { options }));\n // select the first option\n await openAndClick(select, 0);\n expect(select.values[0].name).to.equal('Embedded Option');\n await assertScreenshot('select/embedded', getClipWithOptions(select));\n });\n\n describe('single selection', () => {\n it('can select a single option', async () => {\n const select = await createSelect(getSelectHTML());\n expect(select.values.length).to.equal(0);\n\n // select the first option\n await openAndClick(select, 0);\n\n expect(select.values.length).to.equal(1);\n expect(select.values[0].name).to.equal('Red');\n expect(select.shadowRoot.innerHTML).to.contain('Red');\n\n await assertScreenshot(\n 'select/selected-single',\n getClipWithOptions(select)\n );\n });\n\n it('can search with existing selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the second option\n await openAndClick(select, 1);\n expect(select.values.length).to.equal(1);\n expect(select.values[0].name).to.equal('Green');\n\n // for single selection our current selection should be in the list and focused\n await open(select);\n assert.equal(select.cursorIndex, 1);\n assert.equal(select.visibleOptions.length, 3);\n\n // now lets do a search, we should see our selection (green) and one other (red)\n await typeInto('temba-select', 're', false);\n await open(select);\n assert.equal(select.visibleOptions.length, 2);\n\n await assertScreenshot(\n 'select/search-with-selected',\n getClipWithOptions(select)\n );\n\n // but our cursor should be on the first match\n assert.equal(select.cursorIndex, 0);\n });\n });\n\n describe('multiple selection', () => {\n it('can select multiple options', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { placeholder: 'Select a color', multi: true })\n );\n expect(select.values.length).to.equal(0);\n\n // select the first option twice\n await openAndClick(select, 0);\n await openAndClick(select, 0);\n\n // now we should have red and green selected\n expect(select.values.length).to.equal(2);\n expect(select.shadowRoot.innerHTML).to.contain('Red');\n expect(select.shadowRoot.innerHTML).to.contain('Green');\n\n await assertScreenshot(\n 'select/selected-multi',\n getClipWithOptions(select)\n );\n });\n });\n\n describe('endpoints', () => {\n it('can load from an endpoint', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a color',\n endpoint: '/test-assets/select/colors.json',\n })\n );\n\n await open(select);\n await assertScreenshot(\n 'select/remote-options',\n getClipWithOptions(select)\n );\n assert.equal(select.visibleOptions.length, 3);\n });\n\n it('can search an endpoint', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a color',\n endpoint: '/test-assets/select/colors.json',\n searchable: true,\n })\n );\n\n await typeInto('temba-select', 're', false);\n await open(select);\n await forPages(select, 2);\n assert.equal(select.visibleOptions.length, 2);\n\n await assertScreenshot('select/searching', getClipWithOptions(select));\n });\n\n it('pages through cursor results', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a group',\n endpoint: '/test-assets/select/groups.json',\n valueKey: 'uuid',\n })\n );\n\n await open(select);\n await forPages(select, 3);\n\n // should have all three pages visible right away\n assert.equal(select.visibleOptions.length, 15);\n });\n\n it('shows cached results', async () => {\n const select = await createSelect(\n getSelectHTML([], {\n placeholder: 'Select a group',\n endpoint: '/test-assets/select/groups.json',\n valueKey: 'uuid',\n searchable: true,\n })\n );\n\n // wait for updates from fetching three pages\n await open(select);\n await forPages(select, 4);\n\n // quiet for searchable\n await waitFor(200);\n\n assert.equal(select.visibleOptions.length, 15);\n\n // close and reopen\n select.blur();\n await clock.tick(250);\n\n await open(select);\n assert.equal(select.visibleOptions.length, 15);\n\n // close and reopen once more (previous bug failed on third opening)\n select.blur();\n await open(select);\n assert.equal(select.visibleOptions.length, 15);\n });\n\n it('can enter expressions', async () => {\n await loadStore();\n const select = await createSelect(\n getSelectHTML([], {\n endpoint: '/colors.json',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', 'Hi there @contact', false);\n await open(select);\n\n await forPages(select, 1);\n await clock.tick(400);\n await select.httpComplete;\n\n assert.equal(select.completionOptions.length, 14);\n await assertScreenshot('select/expressions', getClipWithOptions(select));\n });\n\n it('clears single selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { clearable: true })\n );\n assert.equal(select.getStaticOptions().length, 3);\n\n await openAndClick(select, 0);\n expect(select.values[0].name).to.equal('Red');\n\n await assertScreenshot('select/selection-clearable', getClip(select));\n\n clear(select);\n expect(select.values.length).to.equal(0);\n });\n\n /** */\n\n it('should look the same with search enabled', async () => {\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n })\n );\n await assertScreenshot(\n 'select/search-enabled',\n getClipWithOptions(select)\n );\n });\n\n it('should look the same with search enabled and selection made', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the first option\n await openAndClick(select, 1);\n await assertScreenshot(\n 'select/search-selected',\n getClipWithOptions(select)\n );\n });\n\n it('should show focus for the selected option', async () => {\n const select = await createSelect(\n getSelectHTML(colors, { searchable: true })\n );\n\n // select the first option\n await openAndClick(select, 1);\n\n // now open and look at focus\n await open(select);\n await assertScreenshot(\n 'select/search-selected-focus',\n getClipWithOptions(select)\n );\n });\n\n it('should show search with existing multiple selection', async () => {\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n multi: true,\n })\n );\n\n // select the first option\n await openAndClick(select, 0);\n await openAndClick(select, 0);\n await open(select);\n\n // now lets do a search, we should see our selection (green) and one other (red)\n await typeInto('temba-select', 're', false);\n await open(select);\n\n // should have two things selected and active query and no matching options\n await assertScreenshot(\n 'select/search-multi-no-matches',\n getClipWithOptions(select)\n );\n });\n\n it('should show functions', async () => {\n await loadStore();\n\n const select = await createSelect(\n getSelectHTML(colors, {\n placeholder: 'Select a color',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', 'look at @(max(m', false);\n await open(select);\n\n await assertScreenshot('select/functions', getClipWithOptions(select));\n });\n\n it('can select expression completion as value', async () => {\n await loadStore();\n\n const select = await createSelect(\n getSelectHTML(colors, {\n multi: true,\n placeholder: 'Select a color',\n searchable: true,\n expressions: 'session',\n })\n );\n\n await typeInto('temba-select', '@con', false);\n await openAndClick(select, 0);\n\n expect(select.values[0].name).to.equal('@contact');\n await assertScreenshot(\n 'select/expression-selected',\n getClipWithOptions(select)\n );\n });\n });\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.22.0",
3
+ "version": "0.25.0",
4
4
  "description": "Web components to support rapidpro and related projects",
5
5
  "author": "Nyaruka <code@nyaruka.coim>",
6
6
  "main": "dist/index.js",
package/src/anchor/Anchor.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { LitElement, TemplateResult, html, css, property } from 'lit-element';
2
+
3
+ export class Anchor extends LitElement {
4
+ static get styles() {
5
+ return css`
6
+ :host {
7
+ cursor: pointer;
8
+ color: var(--color-link-primary);
9
+ }
10
+ `;
11
+ }
12
+
13
+ @property({ type: String })
14
+ href: string;
15
+
16
+ private handleClick(evt: MouseEvent) {
17
+ // TODO: fire event instead to be handled upstream
18
+ (window as any).goto(evt);
19
+ }
20
+
21
+ public render(): TemplateResult {
22
+ return html`
23
+ <slot href="${this.href}" @click="${this.handleClick}"></slot>
24
+ `;
25
+ }
26
+ }
package/src/checkbox/Checkbox.ts CHANGED
@@ -9,6 +9,19 @@ export class Checkbox extends FormElement {
9
9
  display: inline-block;
10
10
  }
11
11
 
12
+ :host([label]) {
13
+ width: 100%;
14
+ }
15
+
16
+ .wrapper.label {
17
+ padding: 10px;
18
+ border-radius: var(--curvature);
19
+ }
20
+
21
+ .wrapper.label:hover {
22
+ background: #f9f9f9;
23
+ }
24
+
12
25
  temba-field {
13
26
  --help-text-margin-left: 24px;
14
27
  cursor: pointer;
@@ -93,22 +106,24 @@ export class Checkbox extends FormElement {
93
106
  />`;
94
107
 
95
108
  return html`
96
- <temba-field
97
- name=${this.name}
98
- .helpText=${this.helpText}
99
- .errors=${this.errors}
100
- .widgetOnly=${this.widgetOnly}
101
- .helpAlways=${true}
102
- ?disabled=${this.disabled}
103
- @click=${this.handleClick}
104
- >
105
- <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
106
- ${icon}
107
- ${this.label
108
- ? html`<div class="checkbox-label">${this.label}</div>`
109
- : null}
110
- </div>
111
- </temba-field>
109
+ <div class="wrapper ${this.label ? 'label' : ''}">
110
+ <temba-field
111
+ name=${this.name}
112
+ .helpText=${this.helpText}
113
+ .errors=${this.errors}
114
+ .widgetOnly=${this.widgetOnly}
115
+ .helpAlways=${true}
116
+ ?disabled=${this.disabled}
117
+ @click=${this.handleClick}
118
+ >
119
+ <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
120
+ ${icon}
121
+ ${this.label
122
+ ? html`<div class="checkbox-label">${this.label}</div>`
123
+ : null}
124
+ </div>
125
+ </temba-field>
126
+ </div>
112
127
  `;
113
128
  }
114
129
  }
package/src/contactsearch/ContactSearch.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { TemplateResult, html, property, css } from 'lit-element';
2
- import { getUrl, fillTemplate, WebResponse } from '../utils';
2
+ import { getUrl, WebResponse } from '../utils';
3
3
  import { TextInput } from '../textinput/TextInput';
4
4
  import '../alert/Alert';
5
- import { Contact } from '../interfaces';
5
+ import { Contact, CustomEventType } from '../interfaces';
6
6
  import { styleMap } from 'lit-html/directives/style-map';
7
7
  import { FormElement } from '../FormElement';
8
8
 
@@ -31,7 +31,7 @@ export class ContactSearch extends FormElement {
31
31
  width: 160px;
32
32
  }
33
33
 
34
- .created-on {
34
+ .date {
35
35
  text-align: right;
36
36
  }
37
37
 
@@ -40,7 +40,7 @@ export class ContactSearch extends FormElement {
40
40
  color: var(--color-text-dark);
41
41
  }
42
42
 
43
- .field-header.created-on {
43
+ .field-header.date {
44
44
  text-align: right;
45
45
  }
46
46
 
@@ -55,12 +55,6 @@ export class ContactSearch extends FormElement {
55
55
 
56
56
  table {
57
57
  width: 100%;
58
- padding-top: 10px;
59
- }
60
-
61
- .header td {
62
- border-bottom: 2px solid var(--color-borders);
63
- padding: 5px 3px;
64
58
  }
65
59
 
66
60
  .contact td {
@@ -92,6 +86,46 @@ export class ContactSearch extends FormElement {
92
86
  .error {
93
87
  margin-top: 10px;
94
88
  }
89
+
90
+ .match-count {
91
+ padding: 4px;
92
+ margin-top: 6px;
93
+ }
94
+
95
+ .linked {
96
+ color: var(--color-link-primary);
97
+ text-decoration: none;
98
+ cursor: pointer;
99
+ }
100
+
101
+ .header td {
102
+ border-bottom: 0px solid var(--color-borders);
103
+ padding: 5px 3px;
104
+ }
105
+
106
+ .expanded .header td {
107
+ border-bottom: 2px solid var(--color-borders);
108
+ }
109
+
110
+ td.field-header,
111
+ tr.table-footer,
112
+ tr.contact {
113
+ display: none;
114
+ }
115
+
116
+ .expanded td.field-header {
117
+ display: table-cell;
118
+ }
119
+
120
+ .expanded tr.contact,
121
+ .expanded tr.table-footer {
122
+ display: table-row;
123
+ }
124
+
125
+ .query {
126
+ display: var(--contact-search-query-display);
127
+ margin-bottom: 10px;
128
+ }
95
129
  `;
96
130
  }
97
131
 
@@ -100,6 +134,9 @@ export class ContactSearch extends FormElement {
100
134
  @property({ type: Boolean })
101
135
  fetching: boolean;
102
136
 
137
+ @property({ type: Boolean })
138
+ expanded: boolean;
139
+
103
140
  @property({ type: String })
104
141
  endpoint: string;
105
142
 
@@ -112,8 +149,11 @@ export class ContactSearch extends FormElement {
112
149
  @property({ type: String })
113
150
  query = '';
114
151
 
115
- @property({ type: String, attribute: 'matches-text' })
116
- matchesText = '';
152
+ @property({ type: Number })
153
+ inactiveThreshold = 1000;
154
+
155
+ @property({ type: Number })
156
+ inactiveDays = 90;
117
157
 
118
158
  @property({ attribute: false })
119
159
  summary: SummaryResponse;
@@ -140,16 +180,22 @@ export class ContactSearch extends FormElement {
140
180
  }
141
181
  }
142
182
 
143
- public fetchSummary(query: string): any {
144
- // const CancelToken = axios.CancelToken;
145
- // this.cancelToken = CancelToken.source();
146
-
147
- const url = this.endpoint + query;
183
+ public executeQuery(query: string): any {
184
+ const url = this.endpoint + query.replace('\n', ' ');
185
+ getUrl(url).then((response: WebResponse) => {
186
+ if (response.status === 200) {
187
+ const summary = response.json as SummaryResponse;
188
+ this.fireCustomEvent(CustomEventType.FetchComplete, summary);
189
+ }
190
+ });
191
+ }
148
192
 
193
+ public fetchSummary(query: string): any {
194
+ const url = this.endpoint + query.replace('\n', ' ');
149
195
  getUrl(url).then((response: WebResponse) => {
196
+ this.fetching = false;
150
197
  if (response.status === 200) {
151
198
  this.summary = response.json as SummaryResponse;
152
- this.fetching = false;
153
199
 
154
200
  if (this.summary.error) {
155
201
  this.errors = [this.summary.error];
@@ -157,6 +203,7 @@ export class ContactSearch extends FormElement {
157
203
  this.errors = [];
158
204
  }
159
205
  this.requestUpdate('errors');
206
+ this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);
160
207
  }
161
208
  });
162
209
  }
@@ -177,54 +224,76 @@ export class ContactSearch extends FormElement {
177
224
 
178
225
  if (!this.summary.error) {
179
226
  const count = this.summary.total;
180
- const message = fillTemplate(this.matchesText, {
181
- query: this.summary.query,
182
- count,
183
- });
227
+ const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;
184
228
 
185
229
  summary = html`
186
- <table cellspacing="0" cellpadding="0">
187
- <tr class="header">
188
- <td colspan="2"></td>
189
- ${fields.map(
190
- field => html` <td class="field-header">${field.label}</td> `
230
+ <div class="summary ${this.expanded ? 'expanded' : ''}">
231
+ <table cellspacing="0" cellpadding="0">
232
+ <tr class="header">
233
+ <td colspan="2">
234
+ Found
235
+ <a
236
+ class="linked"
237
+ target="_"
238
+ href="/contact/?search=${encodeURIComponent(
239
+ this.summary.query
240
+ )}"
241
+ >
242
+ ${count.toLocaleString()}
243
+ </a>
244
+ contact${count !== 1 ? 's' : ''}
245
+ </td>
246
+ ${fields.map(
247
+ field => html` <td class="field-header">${field.label}</td> `
248
+ )}
249
+ <td></td>
250
+ <td class="field-header date">
251
+ ${lastSeenOn ? 'Last Seen' : 'Created'}
252
+ </td>
253
+ </tr>
254
+
255
+ ${this.summary.sample.map(
256
+ (contact: Contact) => html`
257
+ <tr class="contact">
258
+ <td class="urn">
259
+ ${(contact as any).primary_urn_formatted}
260
+ </td>
261
+ <td class="name">${contact.name}</td>
262
+ ${fields.map(
263
+ field => html`
264
+ <td class="field">
265
+ ${(
266
+ (contact as any).fields[field.uuid] || { text: '' }
267
+ ).text}
268
+ </td>
269
+ `
270
+ )}
271
+ <td></td>
272
+ <td class="date">
273
+ ${lastSeenOn
274
+ ? contact.last_seen_on || '--'
275
+ : contact.created_on}
276
+ </td>
277
+ </tr>
278
+ `
191
279
  )}
192
- <td></td>
193
- <td class="field-header created-on">Created On</td>
194
- </tr>
195
-
196
- ${this.summary.sample.map(
197
- (contact: Contact) => html`
198
- <tr class="contact">
199
- <td class="urn">${(contact as any).primary_urn_formatted}</td>
200
- <td class="name">${contact.name}</td>
201
- ${fields.map(
202
- field => html`
203
- <td class="field">
204
- ${((contact as any).fields[field.uuid] || { text: '' })
205
- .text}
206
- </td>
207
- `
208
- )}
209
- <td></td>
210
- <td class="created-on">${contact.created_on}</td>
211
- </tr>
212
- `
213
- )}
214
-
215
- <tr class="table-footer">
216
- <td class="query-details" colspan=${fields.length + 3}>
217
- ${message}
218
- </td>
219
- <td class="more">
220
- ${this.summary.total > this.summary.sample.length
221
- ? html`
222
- ${this.summary.total - this.summary.sample.length} more
223
- `
224
- : null}
225
- </td>
226
- </tr>
227
- </table>
280
+ ${this.summary.total > this.summary.sample.length
281
+ ? html`<tr class="table-footer">
282
+ <td class="query-details" colspan=${fields.length + 3}></td>
283
+ <td class="more">
284
+ <a
285
+ class="linked"
286
+ target="_"
287
+ href="/contact/?search=${encodeURIComponent(
288
+ this.summary.query
289
+ )}"
290
+ >more</a
291
+ >
292
+ </td>
293
+ </tr>`
294
+ : null}
295
+ </table>
296
+ </div>
228
297
  `;
229
298
  }
230
299
  }
@@ -232,23 +301,31 @@ export class ContactSearch extends FormElement {
232
301
  const loadingStyle = this.fetching ? { opacity: '1' } : {};
233
302
 
234
303
  return html`
235
- <temba-textinput
236
- .label=${this.label}
237
- .helpText=${this.helpText}
238
- .widgetOnly=${this.widgetOnly}
239
- .errors=${this.errors}
240
- name=${this.name}
241
- .inputRoot=${this}
242
- @input=${this.handleQueryChange}
243
- placeholder=${this.placeholder}
244
- value=${this.query}
245
- >
246
- <temba-loading
247
- units="4"
248
- style=${styleMap(loadingStyle)}
249
- ></temba-loading>
250
- </temba-textinput>
251
- ${this.summary ? html` <div class="summary">${summary}</div> ` : null}
304
+ <div class="query">
305
+ <temba-textinput
306
+ .label=${this.label}
307
+ .helpText=${this.helpText}
308
+ .widgetOnly=${this.widgetOnly}
309
+ .errors=${this.errors}
310
+ name=${this.name}
311
+ .inputRoot=${this}
312
+ @input=${this.handleQueryChange}
313
+ placeholder=${this.placeholder}
314
+ .value=${this.query}
315
+ textarea
316
+ autogrow
317
+ >
318
+ </temba-textinput>
319
+ </div>
320
+
321
+ ${this.fetching
322
+ ? html`<temba-loading
323
+ units="4"
324
+ style=${styleMap(loadingStyle)}
325
+ ></temba-loading>`
326
+ : this.summary
327
+ ? html` <div class="summary">${summary}</div> `
328
+ : null}
252
329
  `;
253
330
  }
254
331
  }
package/src/dialog/Dialog.ts CHANGED
@@ -49,7 +49,7 @@ export class Dialog extends RapidElement {
49
49
  position: fixed;
50
50
  top: 0px;
51
51
  left: 0px;
52
- transition: opacity linear calc(var(--transitions-speed) / 2ms);
52
+ transition: opacity linear calc(var(--transition-speed) / 2ms);
53
53
  pointer-events: none;
54
54
  }
55
55
 
@@ -68,7 +68,7 @@ export class Dialog extends RapidElement {
68
68
 
69
69
  .dialog-body {
70
70
  background: #fff;
71
- max-height: 55vh;
71
+ max-height: 75vh;
72
72
  overflow-y: auto;
73
73
  }
74
74
 
@@ -162,6 +162,9 @@ export class Dialog extends RapidElement {
162
162
  @property({ type: Boolean })
163
163
  destructive: boolean;
164
164
 
165
+ @property({ type: Boolean })
166
+ disabled: boolean;
167
+
165
168
  @property({ type: Boolean })
166
169
  loading: boolean;
167
170
 
@@ -293,6 +296,10 @@ export class Dialog extends RapidElement {
293
296
  );
294
297
  }
295
298
 
299
+ public getPrimaryButton(): Button {
300
+ return this.shadowRoot.querySelector(`temba-button[primary]`);
301
+ }
302
+
296
303
  private handleKeyUp(event: KeyboardEvent) {
297
304
  if (event.key === 'Escape') {
298
305
  this.clickCancel();
@@ -320,7 +327,9 @@ export class Dialog extends RapidElement {
320
327
  public render(): TemplateResult {
321
328
  const height = this.getDocumentHeight();
322
329
 
323
- const maskStyle = { height: `${height + 100}px` };
330
+ const maskStyle = {
331
+ height: `${height + 100}px`,
332
+ };
324
333
  const dialogStyle = { width: Dialog.widths[this.size] };
325
334
 
326
335
  const header = this.header
@@ -375,6 +384,7 @@ export class Dialog extends RapidElement {
375
384
  ?destructive=${this.destructive}
376
385
  ?primary=${!this.destructive}
377
386
  ?submitting=${this.submitting}
387
+ ?disabled=${this.disabled}
378
388
  >}</temba-button
379
389
  >
380
390
  `