@nyaruka/temba-components 0.29.0 → 0.30.0

package/out-tsc/test/temba-slider.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-slider.test.js","sourceRoot":"","sources":["../../test/temba-slider.test.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,2DAA2D;AAC3D,4DAA4D;AAE5D,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,gDAAgD;IAChD,8DAA8D;IAC9D,yEAAyE;IACzE,uEAAuE;IACvE,gEAAgE;AAClE,CAAC,CAAC,CAAC","sourcesContent":["// import { html, fixture, expect } from '@open-wc/testing';\n// import { TembaSlider } from '../src/slider/TembaSlider';\n// import { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-slider', () => {\n  // it('renders default slider', async () => {});\n  // it('renders a slider with visible ranges', async () => {});\n  // it('updates slider position on element value change', async () => {});\n  // it('updates slider position on when track clicked', async () => {});\n  // it('updates slider position on circle drag', async () => {});\n});\n"]}
+{"version":3,"file":"temba-slider.test.js","sourceRoot":"","sources":["../../test/temba-slider.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { TemplateResult } from 'lit';\nimport { TembaSlider } from '../src/slider/TembaSlider';\nimport { assertScreenshot, getClip, showMouse } from './utils.test';\n\nconst createSlider = async (def: TemplateResult) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 200px;');\n  return (await fixture(def, { parentNode })) as TembaSlider;\n};\n\ndescribe('temba-slider', () => {\n  it('renders default slider', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\"></temba-slider>\n    `);\n\n    expect(slider.label).to.equal('My Slider');\n    await assertScreenshot('slider/default', getClip(slider));\n  });\n\n  it('renders a slider with visible range - custom min default max no value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" min=\"5\" range></temba-slider>\n    `);\n    expect(slider.range).to.equal(true);\n    expect(slider.min).to.equal(5);\n    expect(slider.max).to.equal(100);\n    expect(slider.value).to.equal('5');\n    await assertScreenshot(\n      'slider/custom-min-default-max-no-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider with visible range - default min custom max no value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" max=\"105\" range></temba-slider>\n    `);\n    expect(slider.range).to.equal(true);\n    expect(slider.min).to.equal(0);\n    expect(slider.max).to.equal(105);\n    expect(slider.value).to.equal('0');\n    await assertScreenshot(\n      'slider/default-min-custom-max-no-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider with visible range - custom min custom max no value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" min=\"5\" max=\"105\" range></temba-slider>\n    `);\n    expect(slider.range).to.equal(true);\n    expect(slider.min).to.equal(5);\n    expect(slider.max).to.equal(105);\n    expect(slider.value).to.equal('5');\n    await assertScreenshot(\n      'slider/default-min-default-max-valid-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider with visible range - custom min custom max valid value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider\n        label=\"My Slider\"\n        min=\"5\"\n        max=\"105\"\n        value=\"55\"\n        range\n      ></temba-slider>\n    `);\n    expect(slider.range).to.equal(true);\n    expect(slider.min).to.equal(5);\n    expect(slider.max).to.equal(105);\n    expect(slider.value).to.equal('55');\n    await assertScreenshot(\n      'slider/custom-min-custom-max-valid-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider with visible range - custom min custom max invalid value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider\n        label=\"My Slider\"\n        min=\"5\"\n        max=\"105\"\n        value=\"150\"\n        range\n      ></temba-slider>\n    `);\n    expect(slider.range).to.equal(true);\n    expect(slider.min).to.equal(5);\n    expect(slider.max).to.equal(105);\n    expect(slider.value).to.equal('105');\n    await assertScreenshot(\n      'slider/default-min-default-max-invalid-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider without visible range - default min default max no value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\"></temba-slider>\n    `);\n    expect(slider.range).to.equal(false);\n    expect(slider.min).to.equal(0);\n    expect(slider.max).to.equal(100);\n    expect(slider.value).to.equal('0');\n    await assertScreenshot('slider/no-visible-range-no-value', getClip(slider));\n  });\n\n  it('renders a slider without visible range - default min default max valid value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" value=\"50\"></temba-slider>\n    `);\n    expect(slider.range).to.equal(false);\n    expect(slider.min).to.equal(0);\n    expect(slider.max).to.equal(100);\n    expect(slider.value).to.equal('50');\n    await assertScreenshot(\n      'slider/no-visible-range-valid-value',\n      getClip(slider)\n    );\n  });\n\n  it('renders a slider without visible range - default min default max invalid value', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" value=\"150\"></temba-slider>\n    `);\n    expect(slider.range).to.equal(false);\n    expect(slider.min).to.equal(0);\n    expect(slider.max).to.equal(100);\n    expect(slider.value).to.equal('100');\n    await assertScreenshot(\n      'slider/no-visible-range-invalid-value',\n      getClip(slider)\n    );\n  });\n\n  it('updates slider position on element value change', async () => {\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider\n        label=\"My Slider\"\n        min=\"0\"\n        max=\"100\"\n        value=\"50\"\n        range\n      ></temba-slider>\n    `);\n    slider.value = '75';\n    expect(slider.value).to.equal('75');\n    await assertScreenshot(\n      'slider/update-slider-on-value-change',\n      getClip(slider)\n    );\n  });\n\n  it('updates slider position on when track clicked', async () => {\n    showMouse();\n\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" value=\"50\"></temba-slider>\n    `);\n    const clip = slider.getBoundingClientRect();\n\n    const y = clip.top + clip.height / 2;\n    const x75 = clip.left + (clip.width / 4) * 3;\n\n    // click track at three quarters\n    await moveMouse(x75, y);\n    await mouseDown();\n    await mouseUp();\n\n    expect(slider.value).to.equal('75');\n    await assertScreenshot(\n      'slider/update-slider-on-track-clicked',\n      getClip(slider)\n    );\n  });\n\n  it('updates slider position on circle drag', async () => {\n    showMouse();\n\n    const slider: TembaSlider = await createSlider(html`\n      <temba-slider label=\"My Slider\" value=\"0\"></temba-slider>\n    `);\n    const clip = slider.getBoundingClientRect();\n\n    // hover over the circle at 0, mouse down, then drag to 80\n    const y = clip.top + clip.height / 2;\n    const x80 = clip.left + (clip.width / 5) * 4;\n\n    await moveMouse(clip.left, y);\n    await mouseDown();\n    await moveMouse(x80, y);\n    await mouseUp();\n\n    expect(slider.value).to.equal('80');\n    await assertScreenshot(\n      'slider/update-slider-on-circle-dragged',\n      getClip(slider)\n    );\n  });\n});\n"]}

package/out-tsc/test/temba-textinput.test.js

@@ -113,7 +113,6 @@ describe('temba-textinput', () => {
             name: 'message',
             value: 'hello world',
             label: 'Your Message',
-            // eslint-disable-next-line @typescript-eslint/camelcase
             help_text: 'Enter your message here',
         }));
         await assertScreenshot('textinput/input-form', getClip(input));
@@ -133,14 +132,14 @@ describe('temba-textinput', () => {
             label: 'Your Date',
             datepicker: true,
             placeholder: 'Select a date',
-            // eslint-disable-next-line @typescript-eslint/camelcase
             help_text: 'Dates can be helpful',
         }));
         const widget = input.shadowRoot.querySelector('.textinput');
         expect(widget.placeholder).to.equal('Select a date');
         await assertScreenshot('textinput/date-form', getClip(input));
     });
-    it('shows initialized date', async () => {
+    // This test has intermittent failures, commenting for now
+    xit('shows initialized date', async () => {
         const input = await createInput(getInputHTML({
             datepicker: true,
             placeholder: 'Select a date',
@@ -157,7 +156,7 @@ describe('temba-textinput', () => {
         clip.width += 55;
         await assertScreenshot('textinput/date-initialized', clip);
     });
-    it('updates on date selection', async () => {
+    xit('updates on date selection', async () => {
         const input = await createInput(getInputHTML({
             datepicker: true,
             placeholder: 'Select a date',

package/out-tsc/test/temba-textinput.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-textinput.test.js","sourceRoot":"","sources":["../../test/temba-textinput.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport { TextInput } from '../src/textinput/TextInput';\nimport { assertScreenshot, getAttributes, getClip } from './utils.test';\n\nexport const getInputHTML = (attrs: any = { value: 'hello world' }) => {\n  return `<temba-textinput ${getAttributes(attrs)}></temba-textinput>`;\n};\n\nexport const createInput = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 250px;');\n  const input: TextInput = await fixture(def, { parentNode });\n  return input;\n};\n\ndescribe('temba-textinput', () => {\n  it('can be created', async () => {\n    const input: TextInput = await createInput(getInputHTML());\n    assert.instanceOf(input, TextInput);\n    await assertScreenshot('textinput/input', getClip(input));\n  });\n\n  it('shows placeholder', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ placeholder: 'Enter some text' })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n\n    expect(widget.placeholder).to.equal('Enter some text');\n    await assertScreenshot('textinput/input-placeholder', getClip(input));\n  });\n\n  it('should focus inputs on click', async () => {\n    const input: TextInput = await createInput(getInputHTML());\n    await click('temba-textinput');\n    await assertScreenshot('textinput/input-focused', getClip(input));\n  });\n\n  it('should render textarea', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n    assert.instanceOf(input, TextInput);\n    await assertScreenshot('textinput/textarea', getClip(input));\n  });\n\n  it('should focus textarea on click', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n    await click('temba-textinput');\n    await assertScreenshot('textinput/textarea-focused', getClip(input));\n  });\n\n  it('takes internal input changes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world' })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('INPUT');\n    expect(widget.disabled).to.equal(false);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello to the world');\n  });\n\n  it('does not take internal input changes for disabled', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', disabled: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('INPUT');\n    expect(widget.disabled).to.equal(true);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello world');\n    await assertScreenshot('textinput/input-disabled', getClip(input));\n  });\n\n  it('takes internal textarea changes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('TEXTAREA');\n    expect(widget.disabled).to.equal(false);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello to the world');\n  });\n\n  it('does not take internal textarea changes for disabled', async () => {\n    const input: TextInput = await fixture(\n      getInputHTML({ value: 'hello world', textarea: true, disabled: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('TEXTAREA');\n    expect(widget.disabled).to.equal(true);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello world');\n  });\n\n  it(\"doesn't advance cursor on GSM character replacement\", async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true, gsm: true })\n    );\n    input.value = 'Let’s try some text with a funny tick.';\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('replaced ');\n\n    expect(input.value).to.equal(\n      \"Let's try some text with a funny replaced tick.\"\n    );\n  });\n\n  it(\"doesn't move cursor to the end on insert in input\", async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world' })\n    );\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('sad, sad ');\n\n    expect(input.value).to.equal('hello sad, sad world');\n    await assertScreenshot('textinput/input-inserted', getClip(input));\n  });\n\n  it('shows form attributes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        name: 'message',\n        value: 'hello world',\n        label: 'Your Message',\n        // eslint-disable-next-line @typescript-eslint/camelcase\n        help_text: 'Enter your message here',\n      })\n    );\n    await assertScreenshot('textinput/input-form', getClip(input));\n  });\n\n  it('updates input value', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        value: 'hello world',\n      })\n    );\n\n    input.value = 'Updated by attribute change';\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n\n    await assertScreenshot('textinput/input-updated', getClip(input));\n    expect(widget.value).to.equal('Updated by attribute change');\n  });\n\n  it('shows datepicker placeholder in a form', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        name: 'Date',\n        label: 'Your Date',\n        datepicker: true,\n        placeholder: 'Select a date',\n        // eslint-disable-next-line @typescript-eslint/camelcase\n        help_text: 'Dates can be helpful',\n      })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.placeholder).to.equal('Select a date');\n    await assertScreenshot('textinput/date-form', getClip(input));\n  });\n\n  it('shows initialized date', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        datepicker: true,\n        placeholder: 'Select a date',\n        value: '2020-04-20',\n      })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.value).to.equal('2020-04-20');\n\n    await waitFor(500);\n    await click('temba-textinput');\n    await waitFor(500);\n\n    const clip = getClip(input);\n\n    // account for the portaled date picker\n    clip.height += 325;\n    clip.width += 55;\n\n    await assertScreenshot('textinput/date-initialized', clip);\n  });\n\n  it('updates on date selection', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        datepicker: true,\n        placeholder: 'Select a date',\n        value: '2020-04-20',\n      })\n    );\n\n    // open our picker\n    await waitFor(500);\n    await click('temba-textinput');\n    await waitFor(500);\n\n    // click on a new date\n    const newDate = document.querySelectorAll(\n      \".flatpickr-day[aria-label='April 21, 2020']\"\n    )[1] as HTMLSpanElement;\n    newDate.click();\n\n    // make sure it updated\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.value).to.equal('April 21, 2020');\n  });\n});\n"]}
+{"version":3,"file":"temba-textinput.test.js","sourceRoot":"","sources":["../../test/temba-textinput.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport { TextInput } from '../src/textinput/TextInput';\nimport { assertScreenshot, getAttributes, getClip } from './utils.test';\n\nexport const getInputHTML = (attrs: any = { value: 'hello world' }) => {\n  return `<temba-textinput ${getAttributes(attrs)}></temba-textinput>`;\n};\n\nexport const createInput = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 250px;');\n  const input: TextInput = await fixture(def, { parentNode });\n  return input;\n};\n\ndescribe('temba-textinput', () => {\n  it('can be created', async () => {\n    const input: TextInput = await createInput(getInputHTML());\n    assert.instanceOf(input, TextInput);\n    await assertScreenshot('textinput/input', getClip(input));\n  });\n\n  it('shows placeholder', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ placeholder: 'Enter some text' })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n\n    expect(widget.placeholder).to.equal('Enter some text');\n    await assertScreenshot('textinput/input-placeholder', getClip(input));\n  });\n\n  it('should focus inputs on click', async () => {\n    const input: TextInput = await createInput(getInputHTML());\n    await click('temba-textinput');\n    await assertScreenshot('textinput/input-focused', getClip(input));\n  });\n\n  it('should render textarea', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n    assert.instanceOf(input, TextInput);\n    await assertScreenshot('textinput/textarea', getClip(input));\n  });\n\n  it('should focus textarea on click', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n    await click('temba-textinput');\n    await assertScreenshot('textinput/textarea-focused', getClip(input));\n  });\n\n  it('takes internal input changes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world' })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('INPUT');\n    expect(widget.disabled).to.equal(false);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello to the world');\n  });\n\n  it('does not take internal input changes for disabled', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', disabled: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('INPUT');\n    expect(widget.disabled).to.equal(true);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello world');\n    await assertScreenshot('textinput/input-disabled', getClip(input));\n  });\n\n  it('takes internal textarea changes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('TEXTAREA');\n    expect(widget.disabled).to.equal(false);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello to the world');\n  });\n\n  it('does not take internal textarea changes for disabled', async () => {\n    const input: TextInput = await fixture(\n      getInputHTML({ value: 'hello world', textarea: true, disabled: true })\n    );\n\n    // trigger a change on our internal widget\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.tagName).to.equal('TEXTAREA');\n    expect(widget.disabled).to.equal(true);\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('to the ');\n\n    // should be reflected on our main input\n    expect(input.value).to.equal('hello world');\n  });\n\n  it(\"doesn't advance cursor on GSM character replacement\", async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world', textarea: true, gsm: true })\n    );\n    input.value = 'Let’s try some text with a funny tick.';\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('replaced ');\n\n    expect(input.value).to.equal(\n      \"Let's try some text with a funny replaced tick.\"\n    );\n  });\n\n  it(\"doesn't move cursor to the end on insert in input\", async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({ value: 'hello world' })\n    );\n\n    // focus our widget, move back a few spots and insert some text\n    await click('temba-textinput');\n    await pressKey('ArrowLeft', 5);\n    await type('sad, sad ');\n\n    expect(input.value).to.equal('hello sad, sad world');\n    await assertScreenshot('textinput/input-inserted', getClip(input));\n  });\n\n  it('shows form attributes', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        name: 'message',\n        value: 'hello world',\n        label: 'Your Message',\n        help_text: 'Enter your message here',\n      })\n    );\n    await assertScreenshot('textinput/input-form', getClip(input));\n  });\n\n  it('updates input value', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        value: 'hello world',\n      })\n    );\n\n    input.value = 'Updated by attribute change';\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n\n    await assertScreenshot('textinput/input-updated', getClip(input));\n    expect(widget.value).to.equal('Updated by attribute change');\n  });\n\n  it('shows datepicker placeholder in a form', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        name: 'Date',\n        label: 'Your Date',\n        datepicker: true,\n        placeholder: 'Select a date',\n        help_text: 'Dates can be helpful',\n      })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.placeholder).to.equal('Select a date');\n    await assertScreenshot('textinput/date-form', getClip(input));\n  });\n\n  // This test has intermittent failures, commenting for now\n  xit('shows initialized date', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        datepicker: true,\n        placeholder: 'Select a date',\n        value: '2020-04-20',\n      })\n    );\n\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.value).to.equal('2020-04-20');\n\n    await waitFor(500);\n    await click('temba-textinput');\n    await waitFor(500);\n\n    const clip = getClip(input);\n\n    // account for the portaled date picker\n    clip.height += 325;\n    clip.width += 55;\n\n    await assertScreenshot('textinput/date-initialized', clip);\n  });\n\n  xit('updates on date selection', async () => {\n    const input: TextInput = await createInput(\n      getInputHTML({\n        datepicker: true,\n        placeholder: 'Select a date',\n        value: '2020-04-20',\n      })\n    );\n\n    // open our picker\n    await waitFor(500);\n    await click('temba-textinput');\n    await waitFor(500);\n\n    // click on a new date\n    const newDate = document.querySelectorAll(\n      \".flatpickr-day[aria-label='April 21, 2020']\"\n    )[1] as HTMLSpanElement;\n    newDate.click();\n\n    // make sure it updated\n    const widget = input.shadowRoot.querySelector(\n      '.textinput'\n    ) as HTMLInputElement;\n    expect(widget.value).to.equal('April 21, 2020');\n  });\n});\n"]}

package/out-tsc/test/temba-tip.test.js

@@ -6,7 +6,7 @@ const getTarget = () => {
     return "<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>";
 };
 const getTip = async (attrs = {}, slot = getTarget()) => {
-    return (await getComponent(TAG, attrs, slot, 20, 'margin:200px;'));
+    return (await getComponent(TAG, attrs, slot, 20, 0, 'margin:200px;'));
 };
 const getRightClip = (ele) => {
     const clip = getClip(ele);

package/out-tsc/test/temba-tip.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-tip.test.js","sourceRoot":"","sources":["../../test/temba-tip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { Tip } from '../src/tip/Tip';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-tip';\n\nconst getTarget = () => {\n  return \"<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>\";\n};\n\nconst getTip = async (\n  attrs: { text?: string; position?: string; visible?: boolean } = {},\n  slot = getTarget()\n) => {\n  return (await getComponent(TAG, attrs, slot, 20, 'margin:200px;')) as Tip;\n};\n\nconst getRightClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getLeftClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.x -= 80;\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getTopClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.y -= 30;\n  clip.height += 30;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\nconst getBottomClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.height += 35;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\ndescribe(TAG, () => {\n  it('can be created', async () => {\n    const icon = await getTip({ text: 'Resolve' });\n    assert.instanceOf(icon, Tip);\n  });\n\n  it('shows on the left', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'left',\n    });\n    await assertScreenshot('tip/left', getLeftClip(tip));\n  });\n\n  it('shows on the right', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'right',\n    });\n    await assertScreenshot('tip/right', getRightClip(tip));\n  });\n\n  it('shows on top', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'top',\n    });\n    await assertScreenshot('tip/top', getTopClip(tip));\n  });\n\n  it('shows on bottom', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'bottom',\n    });\n    await assertScreenshot('tip/bottom', getBottomClip(tip));\n  });\n});\n"]}
+{"version":3,"file":"temba-tip.test.js","sourceRoot":"","sources":["../../test/temba-tip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { Tip } from '../src/tip/Tip';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-tip';\n\nconst getTarget = () => {\n  return \"<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>\";\n};\n\nconst getTip = async (\n  attrs: { text?: string; position?: string; visible?: boolean } = {},\n  slot = getTarget()\n) => {\n  return (await getComponent(TAG, attrs, slot, 20, 0, 'margin:200px;')) as Tip;\n};\n\nconst getRightClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getLeftClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.x -= 80;\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getTopClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.y -= 30;\n  clip.height += 30;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\nconst getBottomClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.height += 35;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\ndescribe(TAG, () => {\n  it('can be created', async () => {\n    const icon = await getTip({ text: 'Resolve' });\n    assert.instanceOf(icon, Tip);\n  });\n\n  it('shows on the left', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'left',\n    });\n    await assertScreenshot('tip/left', getLeftClip(tip));\n  });\n\n  it('shows on the right', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'right',\n    });\n    await assertScreenshot('tip/right', getRightClip(tip));\n  });\n\n  it('shows on top', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'top',\n    });\n    await assertScreenshot('tip/top', getTopClip(tip));\n  });\n\n  it('shows on bottom', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'bottom',\n    });\n    await assertScreenshot('tip/bottom', getBottomClip(tip));\n  });\n});\n"]}

package/out-tsc/test/utils.test.js

@@ -1,9 +1,14 @@
 import '../temba-modules';
 import { stub } from 'sinon';
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, html, assert } from '@open-wc/testing';
+import MouseHelper from './MouseHelper';
 const gets = [];
 const posts = [];
 let normalFetch;
+export const showMouse = async () => {
+    const mouse = await fixture(html `<mouse-helper />`);
+    assert.instanceOf(mouse, MouseHelper);
+};
 export const getAttributes = (attrs = {}) => {
     return `${Object.keys(attrs)
         .map((name) => {
@@ -14,19 +19,16 @@ export const getAttributes = (attrs = {}) => {
     })
         .join(' ')}`;
 };
-export const getComponent = async (tag, attrs = {}, slot = '', width = 250, style = '') => {
+export const getComponent = async (tag, attrs = {}, slot = '', width = 250, height = 0, style = '') => {
     const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;
-    if (width > 0 || style) {
-        const parentNode = document.createElement('div');
-        if (width > 0) {
-            parentNode.setAttribute('style', `width: ${width}px;${style}`);
-        }
-        else {
-            parentNode.setAttribute('style', `${style}`);
-        }
-        return await fixture(spec, { parentNode });
-    }
-    return await fixture(spec);
+    const parentNode = document.createElement('div');
+    const styleAttribute = `
+    ${width > 0 ? `width:${width}px;` : ``} 
+    ${height > 0 ? `height:${height}px;` : ``}
+    ${style ? style : ``}
+  `;
+    parentNode.setAttribute('style', styleAttribute);
+    return await fixture(spec, { parentNode });
 };
 const createResponse = mocked => {
     const mockResponse = new window.Response(mocked.body, {
@@ -95,7 +97,7 @@ export const assertScreenshot = async (filename, clip, threshold = 0.1, exclude
     // const screenShotsEnabled = !!__karma__.config.args.find(
     // (option: string) => option === '--screenshots'
     // );
-    // await (window as any).waitFor(300);
+    await window.waitFor(200);
     // console.log((window as any).watched);
     if (window.watched) {
         // return;
@@ -147,4 +149,14 @@ export const getHTMLAttrs = (attrs = {}) => {
 export const getHTML = (tag, attrs = {}) => {
     return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;
 };
+export const loadStore = async () => {
+    const store = await fixture(`<temba-store 
+      completion='/test-assets/store/editor.json'
+      groups='/test-assets/store/groups.json'
+      languages='/test-assets/store/languages.json'
+    />`);
+    await store.httpComplete;
+    await store.httpComplete;
+    return store;
+};
 //# sourceMappingURL=utils.test.js.map

package/out-tsc/test/utils.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\n\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { stub } from 'sinon';\nimport { expect, fixture } from '@open-wc/testing';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n}\n\nconst gets: CodeMock[] = [];\nconst posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n\n  if (width > 0 || style) {\n    const parentNode = document.createElement('div');\n    if (width > 0) {\n      parentNode.setAttribute('style', `width: ${width}px;${style}`);\n    } else {\n      parentNode.setAttribute('style', `${style}`);\n    }\n    return await fixture(spec, { parentNode });\n  }\n\n  return await fixture(spec);\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: 200,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: 200,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (endpoint: RegExp, body: any, headers: {} = {}) => {\n  gets.push({ endpoint, body, headers });\n};\n\nexport const mockPOST = (endpoint: RegExp, body: any, headers: {} = {}) => {\n  posts.push({ endpoint, body, headers });\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  threshold = 0.1,\n  exclude: Clip[] = []\n) => {\n  // const screenShotsEnabled = !!__karma__.config.args.find(\n  // (option: string) => option === '--screenshots'\n  // );\n\n  // await (window as any).waitFor(300);\n\n  // console.log((window as any).watched);\n  if ((window as any).watched) {\n    // return;\n  }\n\n  const mochaUI = document.querySelector('#mocha');\n  mochaUI.classList.add('screenshots');\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  } finally {\n    mochaUI.classList.remove('screenshots');\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n"]}
+{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\n\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { stub } from 'sinon';\nimport { expect, fixture, html, assert } from '@open-wc/testing';\nimport MouseHelper from './MouseHelper';\nimport { Store } from '../src/store/Store';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n}\n\nconst gets: CodeMock[] = [];\nconst posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const showMouse = async () => {\n  const mouse = await fixture(html`<mouse-helper />`);\n  assert.instanceOf(mouse, MouseHelper);\n};\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  height = 0,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n  const parentNode = document.createElement('div');\n  const styleAttribute = `\n    ${width > 0 ? `width:${width}px;` : ``} \n    ${height > 0 ? `height:${height}px;` : ``}\n    ${style ? style : ``}\n  `;\n\n  parentNode.setAttribute('style', styleAttribute);\n  return await fixture(spec, { parentNode });\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: 200,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: 200,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (endpoint: RegExp, body: any, headers: any = {}) => {\n  gets.push({ endpoint, body, headers });\n};\n\nexport const mockPOST = (endpoint: RegExp, body: any, headers: any = {}) => {\n  posts.push({ endpoint, body, headers });\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  threshold = 0.1,\n  exclude: Clip[] = []\n) => {\n  // const screenShotsEnabled = !!__karma__.config.args.find(\n  // (option: string) => option === '--screenshots'\n  // );\n\n  await (window as any).waitFor(200);\n\n  // console.log((window as any).watched);\n  if ((window as any).watched) {\n    // return;\n  }\n\n  const mochaUI = document.querySelector('#mocha');\n  mochaUI.classList.add('screenshots');\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  } finally {\n    mochaUI.classList.remove('screenshots');\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n\nexport const loadStore = async () => {\n  const store: Store = await fixture(\n    `<temba-store \n      completion='/test-assets/store/editor.json'\n      groups='/test-assets/store/groups.json'\n      languages='/test-assets/store/languages.json'\n    />`\n  );\n  await store.httpComplete;\n  await store.httpComplete;\n  return store;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -8,7 +8,6 @@
   "homepage": "https://github.com/nyaruka/temba-components/",
   "license": "AGPL-3.0-only",
   "repository": "https://github.com/nyaruka/temba-components/",
-  "private": false,
   "scripts": {
     "start": "concurrently --kill-others --names tsc,web-dev-server \"yarn tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --open --watch --port 3010 --esbuild-target auto\"",
     "tsc:watch": "tsc --watch",
@@ -22,6 +21,7 @@
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" --write --ignore-path .gitignore",
     "lint": "yarn lint:eslint && yarn lint:prettier",
     "format": "yarn format:eslint && yarn format:prettier",
+    "test-file": "rimraf out-tsc && tsc && web-test-runner --node-resolve --coverage",
     "test": "rimraf out-tsc && tsc && web-test-runner --node-resolve --coverage",
     "test:watch": "web-test-runner --node-resolve --watch",
     "storybook": "concurrently --kill-others --names tsc,storybook \"npm run tsc:watch\" \"start-storybook --node-resolve --watch --open\"",
@@ -57,7 +57,7 @@
     "@web/dev-server": "^0.0.12",
     "@web/test-runner": "^0.7.41",
     "@web/test-runner-puppeteer": "0.10.5",
-    "auto-changelog": "^1.16.2",
+    "auto-changelog": "*",
     "concurrently": "^5.1.0",
     "deepmerge": "^4.2.2",
     "dynamicpixelmatch": "^0.0.2",
@@ -107,5 +107,6 @@
     "prismjs": "^1.23.0",
     "lit-element": "^3",
     "lit-html": "^2"
-  }
+  },
+  "packageManager": "yarn@1.22.1"
 }

package/src/contacts/ContactBadges.ts

@@ -19,9 +19,6 @@ export class ContactBadges extends ContactStoreElement {
         display: flex;
         flex-wrap: wrap;
       }
-
-      .flow {
-      }
     `;
   }
 
@@ -34,12 +31,11 @@ export class ContactBadges extends ContactStoreElement {
           ${status && this.data.status !== 'active'
             ? html`
                 <temba-label
-                  class="status"
                   icon="${status.icon}"
                   onclick="goto(event)"
                   href="/contact/${status.name.toLowerCase()}"
-                  clickable
                   secondary
+                  clickable
                   shadow
                 >
                   ${status.name}
@@ -49,14 +45,13 @@ export class ContactBadges extends ContactStoreElement {
           ${this.data.flow
             ? html`
                 <temba-label
-                  class="flow"
                   icon="flow"
                   onclick="goto(event)"
                   href="/contact/?search=flow+%3D+${encodeURIComponent(
                     '"' + this.data.flow.name + '"'
                   )}"
                   clickable
-                  tertiary
+                  primary
                   shadow
                 >
                   ${this.data.flow.name}
@@ -66,7 +61,6 @@ export class ContactBadges extends ContactStoreElement {
           ${this.data.language
             ? html`
                 <temba-label
-                  class="language"
                   icon="globe"
                   onclick="goto(event)"
                   href="/contact/?search=language+%3D+${encodeURIComponent(
@@ -88,7 +82,6 @@ export class ContactBadges extends ContactStoreElement {
                 href="/contact/filter/${group.uuid}/"
                 icon=${group.is_dynamic ? 'atom' : 'users'}
                 clickable
-                light
                 shadow
               >
                 ${group.name}

package/src/contacts/ContactChat.ts

@@ -350,6 +350,9 @@ export class ContactChat extends ContactStoreElement {
                         </div>`
                       : html` <div
                           class="chatbox ${this.toolbar ? 'full' : ''}"
+                          style="${this.currentContact.status !== 'active'
+                            ? 'display:none'
+                            : ''}"
                         >
                           <temba-completion
                             @change=${this.handleChatChange}

package/src/contacts/ContactName.ts

@@ -1,8 +1,14 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
-import { ContactStoreElement } from './ContactStoreElement';
+import { RapidElement } from '../RapidElement';
+
+export class ContactName extends RapidElement {
+  @property({ type: String })
+  name: string;
+
+  @property({ type: String })
+  urn: string;
 
-export class ContactName extends ContactStoreElement {
   @property({ type: Number, attribute: 'icon-size' })
   size = 20;
 
@@ -10,29 +16,25 @@ export class ContactName extends ContactStoreElement {
     return css`
       :host {
         display: flex;
+        align-items: center;
       }
 
       temba-urn {
         margin-right: 0.2em;
-        margin-top: 2px;
       }
     `;
   }
 
   public render(): TemplateResult {
-    if (this.data) {
-      const urn =
-        this.data.urns.length > 0
-          ? html`<temba-urn
-              size=${this.size}
-              urn="${this.data.urns[0]}"
-            ></temba-urn>`
-          : null;
-      return html`
-        ${urn}
-        <div class="name">${this.data.name}</div>
-        <slot></slot>
-      `;
-    }
+    const urn = this.urn
+      ? html`<temba-urn size=${this.size} urn=${this.urn}></temba-urn>`
+      : null;
+    return html`
+      ${urn}
+      <div class="name">
+        ${this.name ? this.name : this.urn ? this.urn.split(':')[1] : ''}
+      </div>
+      <slot></slot>
+    `;
   }
 }

package/src/contacts/ContactNameFetch.ts

@@ -0,0 +1,32 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactNameFetch extends ContactStoreElement {
+  @property({ type: Number, attribute: 'icon-size' })
+  size = 20;
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+
+      temba-urn {
+        margin-right: 0.2em;
+        margin-top: 2px;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (this.data) {
+      console.log(this.data);
+      return html` <temba-contact-name
+          name=${this.data.name}
+          urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
+        />
+        <slot></slot>`;
+    }
+  }
+}